/* ---CONFIGURACIÓN GLOBAL */
:root{
  --color-background-dark:#121212;
  --color-background-light:#2c3e50;
  --color-text-on-dark:#e6ecec; /* mejor contraste sobre fondo oscuro */
  --color-text-muted:#95a5a6;
  --color-text-on-light:#5a6767;
  --color-primary:#e74c3c;
  --color-input-bg:#f5f5f5;
  --color-input-border:#bdc3c7;

  --font-family-sans:'Roboto',sans-serif;

  /* Layout */
  --header-width:250px;
  --content-max-width:1200px;
  --gutter:40px;

  /* Logo */
  --logo-max-width:180px;
}

/* Reset básico */
*{box-sizing:border-box;margin:0;padding:0;}
img{max-width:100%;height:auto;display:block;}

html,body{
  min-height:100%;
  font-family:var(--font-family-sans);
  background-color:var(--color-background-dark);
  color:var(--color-text-on-dark);
  line-height:1.6;
  overflow-x:hidden;
}

/* --- ENCABEZADO Y NAVEGACIÓN (Desktop: sidebar) --- */
.main-header{
  background-color:var(--color-background-dark);
  width:var(--header-width);
  position:fixed;
  top:0;
  left:0;
  height:100vh;                 /* antes 70% (podía cortar / dejar vacío) */
  padding:40px 24px 16px 24px;   /* padding más seguro para pantallas chicas */
  z-index:1000;
}

.main-header nav{width:100%;}
.logo-link{
  display:block;
  max-width:var(--logo-max-width);
}
.main-header img{
  width:100%;
}

/* --- CONTENIDO PRINCIPAL --- */
.registration-page-content{
  margin-left:var(--header-width);
  padding:80px var(--gutter);
  width:100%;
}

.registration-page-content > *{
  max-width:var(--content-max-width);
}

/* --- TITULO PRINCIPAL --- */
.main-title{
  font-size:clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:700;
  margin-bottom:40px;
  color:#fff;
  max-width:800px;
}
.main-title .highlight{
  color:var(--color-primary);
}

/* --- Formulario y Beneficios --- */
.form-benefits-wrapper{
  display:flex;
  gap:40px;
  align-items:flex-start;
  flex-wrap:wrap; /* evita overflow en anchos intermedios */
  width:100%;
}

/* Formulario */
.form-container{
  background-color:#fff;
  padding:36px;
  border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,.2);

  /* Responsive sizing */
  width:100%;
  max-width:480px;
  flex:0 1 480px;
  min-width:280px;
}

.registration-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

.input-group label{
  display:block;
  font-size:.95em;
  font-weight:400;
  color:var(--color-text-on-light);
  margin-bottom:6px;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="date"],
.input-group input[type="tel"]{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--color-input-border);
  border-radius:6px;
  font-size:16px; /* evita zoom en iOS */
  background-color:var(--color-input-bg);
  color:#000;
  transition:border-color .2s, box-shadow .2s;
}

.input-group input:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(231,76,60,.18);
}

.checkbox-group{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:6px 0 10px 0;
  font-size:.95em;
  color:var(--color-text-on-light);
  flex-wrap:wrap;
  line-height:1.4;
}
.checkbox-group input[type="checkbox"]{
  width:18px;
  height:18px;
  min-width:18px;
  margin-top:2px;
  accent-color:var(--color-primary);
}
.checkbox-group a{
  color:var(--color-primary);
  text-decoration:none;
  font-weight:700;
}
.checkbox-group a:hover{ text-decoration:underline; }

.register-button{
  background-color:var(--color-primary);
  color:#fff; /* antes usaba texto gris con bajo contraste */
  padding:14px 22px;
  border:none;
  border-radius:6px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:background-color .2s, transform .08s;
  box-shadow:0 4px 0 #b3392c;
}
.register-button:hover{ background-color:#c0392b; }
.register-button:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #b3392c;
}

.privacy-note{
  font-size:.85em;
  text-align:center;
  color:var(--color-text-muted);
  margin-top:14px;
}
.privacy-note i{ margin-right:6px; }

/* reCAPTCHA: evita overflow en pantallas muy angostas */
.g-recaptcha{
  margin:16px 0;
  max-width:100%;
  overflow:hidden;
  --recaptcha-scale:1;
  transform:scale(var(--recaptcha-scale));
  transform-origin:left top;
}
@media (max-width: 400px){
  .g-recaptcha{ --recaptcha-scale:.93; }
}
@media (max-width: 340px){
  .g-recaptcha{ --recaptcha-scale:.88; }
}

/* Beneficios */
.benefits-container{
  flex:1 1 320px;
  min-width:260px;
  padding-top:8px;
  color:var(--color-text-on-dark);
}
.benefits-container h2{ margin:0; }
.benefits-container ul{
  list-style:none;
  padding:0;
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.benefits-container li{
  display:flex;
  align-items:flex-start;
  gap:18px;
  font-size:clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight:300;
}
.benefits-container li i{
  margin-top:4px;
  color:var(--color-primary);
}
.benefits-container li span{
  color:var(--color-primary);
  border-bottom:3px solid var(--color-primary);
  padding-bottom:2px;
}

/* --- PIE DE PÁGINA --- */
.main-footer{
  margin-left:var(--header-width);  /* alinea con el contenido cuando hay sidebar */
  padding:20px var(--gutter);
  background-color:var(--color-background-dark);
  border-top:1px solid #34495e;
  font-size:1em; /* antes 1.8em (demasiado grande) */
  color:var(--color-text-muted);
}

.gobernanza{
  text-align:center;
  padding:10px 0 20px 0;
  max-width:var(--content-max-width);
  margin:0 auto;
}
.gobernanza img{
  max-width:100%;
  height:auto;
  margin:0 auto;
}

/* Accesibilidad */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.honeypot-group{ display:none; visibility:hidden; }

/* Caja de errores */
#errorBox{
  color:#c00;
  font-weight:600;
  margin-top:10px;
  line-height:1.45;
  word-break:break-word;
}
#errorBox div{ margin-bottom:5px; }

/* Ocultar el hidden checkbox de Salesforce */
#00NWC000002fKrF{ display:none; }

/* --- PAGINAS DE RESULTADO (RegistroExitoso / YaRegistrado) --- */
.message-card{
  text-align:center;
  max-width:100%;
  flex:1 1 100%;
  padding:60px 36px;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.message-icon{
  font-size:4rem;
  margin-bottom:24px;
}
.message-icon--success{ color:#27ae60; }
.message-icon--info{ color:#2980b9; }
.message-title{
  font-size:clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:700;
  color:#fff;
  margin-bottom:22px;
}
.message-text{
  font-size:clamp(1.05rem, 1.4vw, 1.2rem);
  color:var(--color-text-on-dark);
  margin-bottom:16px;
  line-height:1.7;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}
.message-text a{
  color:var(--color-primary);
  text-decoration:none;
  font-weight:700;
}
.message-text a:hover{ text-decoration:underline; }
.message-social{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:30px;
}
.message-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background-color:var(--color-primary);
  color:#fff;
  font-size:1.3rem;
  transition:background-color .2s, transform .1s;
}
.message-social a:hover{
  background-color:#c0392b;
  transform:scale(1.1);
}
.back-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:32px;
  padding:12px 28px;
  border:2px solid var(--color-text-muted);
  border-radius:6px;
  color:var(--color-text-on-dark);
  text-decoration:none;
  font-size:1rem;
  font-weight:400;
  transition:border-color .2s, color .2s;
}
.back-button:hover{
  border-color:#fff;
  color:#fff;
}

/* --- Breakpoint: tablets y menores (cambiamos a header superior) --- */
@media (max-width: 992px){
  :root{ --gutter:20px; }

  .main-header{
    position:static;
    width:100%;
    height:auto;
    padding:12px var(--gutter);
    border-bottom:1px solid #34495e;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-link{
    position:relative;
    overflow:hidden;
    width:150px;   /* 124px × 1.21 */
    height:104px;  /* 86px  × 1.21 */
    margin:0 auto;
    max-width:none;
  }
  .main-header img{
    position:absolute;
    width:605px;   /* 500px × 1.21 */
    max-width:none;
    height:auto;
    left:-70px;    /* -58px × 1.21 */
    top:-73px;     /* -60px × 1.21 */
    max-height:none;
  }

  .registration-page-content{
    margin-left:0;
    padding:40px var(--gutter);
  }

  .form-benefits-wrapper{
    flex-direction:column;
    gap:26px;
    align-items:stretch;
  }

  .form-container{
    max-width:640px;
    margin:0 auto;
    padding:28px 20px;
  }

  .benefits-container{
    max-width:640px;
    margin:0 auto;
  }
  .benefits-container ul{ margin-top:20px; }

  .main-footer{
    margin-left:0;
    padding:16px var(--gutter);
  }
}

/* Breakpoint: móviles */
@media (max-width: 480px){
  .main-title{ margin-bottom:26px; }
  .form-container{ padding:22px 16px; }
  .benefits-container ul{ gap:22px; }
}