*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #ffffff;
  color: #000000;  
}

/* CSS for section section:main */
.container {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    gap: 268px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 39px 39px;
  }

  #recaptcha_widget {
    font-family: 'Arial', sans-serif; /* Cambia aquí la fuente */
    font-size: 14px;
    color: #333;
  }

  #recaptcha_response_field {
    font-family: 'Courier New', monospace;
  }

  .info-panel {
    flex: 0 0 523px;
    /* height: 690px; */
    height: 90vh;
    background-color: #007bff;
    border-radius: 24px;
    padding: 40px 40px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .info-panel-mobile {
    flex: 0px 0px 100px;
    /* height: 690px; */
    /* background-color: #007bff; */
    border-radius: 24px;
    padding: 40px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    display: none;
    flex-direction: column;
  }

  .info-panel__logo {
    width: 147px;
    height: 34px;
    margin-bottom: 99px;
  }

  .info-panel-mobile__logo {
    width: 120px;
    height: 96.288px;
    flex-shrink: 0;
    aspect-ratio: 120.00/96.29;
  }
  
  .info-panel__text-content {
    position: relative;
    z-index: 1;
	margin-bottom: 128px;
  }

  .info-panel__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 1.17;
    letter-spacing: 1.62px;
    margin: 0 0 12px 0;
  }

  .info-panel__description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.33;
    margin: 0;
  }
  
  .info-panel__title-frame {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
	/* font-style: normal; */
    line-height: normal;
    margin: 0 0 12px 0;
  }

  .info-panel__description-frame {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;  
	/* font-style: normal; */
	margin: 0;
  }  

  .info-panel__description strong {
    font-weight: 700;
  }

  .info-panel__bg {
    position: absolute;
    width: 480px;
    height: 480px;
    left: 22px;
    top: 183px;
    z-index: 0;
    pointer-events: none;
    flex-shrink: 0;
  }

  .form-panel {
    flex: 1;
    max-width: 332px;
    display: flex;
    flex-direction: column;
	/* justify-content: center; */
    align-items: center;
    /* gap: 24px; */
	gap: 64px;
	/* height: 100vh; */
  }
  
  .frame-1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
  }
  
  .frame-2 {
	display: flex;	
	flex-direction: column;
	align-items: flex-start;
	/* gap: 12px; */
	align-self: stretch;
  }
  
  .frame-3 {
	display: flex;
	flex-direction: column;	
	justify-content: center;
	align-items: center;
	gap: 12px;
  }
  
  .box {
	  padding: 20px;
	  background-color: #007bff;
	  color: white;
	  border-radius: 8px;
	}
 	  
  .form-header {
    /* margin-bottom: 24px; */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: flex-start; */
    gap: 6px;
	/* align-self: stretch; */
  }

  .form-greeting {
    color: #848D9A;
	/* font-family: Roboto; */
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0 0 6px 0;
  }

  .form-title {
    color: #000000;
    font-size: 24px;
	font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.75px;
    margin: 0;
  }

  .recovery-form {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    /* align-self: stretch; */
    /* margin-bottom: 8px; */
	/* justify-content: center; */
	/* margin-bottom: 64px; */
  }

  .frame-form {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 8px;
    /* align-self: stretch; */
	/* margin-bottom: 64px; */
  }

  .contenedor {
    /*width: 80%;*/ /* ancho del contenedor padre */
    /* padding: 20px; */
    gap: 89px;
  }

  .hijo {
    width: 100%; /* ocupa el 100% del contenedor padre */
    /* padding: 10px; */
  }

  .form-label {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33;
    margin-bottom: 5px;
  }

  .form-input {
    width: 100%;
    height: 37px;
    padding: 10px 8px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background-color: #ffffff;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
  }

  .form-input::placeholder {
    color: rgba(117, 117, 117, 0.41);
    font-weight: 400;
  }

  .submit-button {
    width: 100%;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    height: 28px;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-helper-text {
    color: #848d9a;
    font-size: 10px;
    line-height: 1.6;
    font-weight: 400;
    /* margin: 0 0 64px 0; */
  }

  .form-helper-text strong {
    font-weight: 700;
    color: #848d9a;
  }
  
  .recaptcha-container {
    display: flex;
	/* justify-content: center; */
	/* width: 100%; */
    /* text-align: center; */
  }

  .captcha-wrapper-001 {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
  
  .captcha-wrapper {
    transform: scale(0.85);   /* Cambia el tamaño: 0.85 = 85%, 1.2 = 120% */
    transform-origin: 0 0;    /* Fija el punto de anclaje arriba-izquierda */
    -webkit-transform: scale(0.85);
  }
  
  .captcha-wrapper iframe {
    height: 78px !important;  /* Para evitar cortes en algunos casos */
    width: 302px !important;
  }
  
  .error-captcha {
    font-size: 14px;
    color: #d9534f;
    font-weight: bold;
  }
  

  .support-link {
    color: #007bff;
    font-size: 12px;
    line-height: 1.33;
    font-weight: 400;
    text-decoration: none;
    margin: 0 auto;
    text-align: center;
  }
  
  .support-link:hover {
    text-decoration: underline;
  }

  @media (max-width: 992px) {
    .container {
      flex-direction: column;
      gap: 40px;
      padding: 20px;
    }

    .info-panel {
      flex-basis: auto;
      width: 100%;
      max-width: 523px;
      height: auto;
      min-height: 400px;
    }

    .form-panel {
      max-width: 400px;
      width: 100%;
      align-items: stretch;
    }

    .info-panel {
      display: none;
    }

    .info-panel-mobile {
      display: flex;
    }
  }