/* ============================================================
   PsicoAlianza — Secciones compartidas (header, FAQ, formulario,
   modal de éxito, footer)
   Portado desde el diseño original de
   paginas-anteriores/pagina_psicoalianza/assets/css/styles.css
   (líneas 163-439, 2672-3210, 3212-3315), usado ahora por
   partials/header.php, faq.php, form-demo.php, modal-exito.php
   y footer.php en TODAS las páginas del sitio.

   Notas de adaptación respecto al original:
   - El escalado fluido de :root font-size del original (línea 49-51)
     SÍ está portado, pero vive en estilos.css (bloque "Escalado
     proporcional desktop"), no aquí, porque aplica a todo el sitio.
     Todos los rem de este archivo escalan con él desde 1024px; abajo
     de eso valen 16px fijos. Por eso todo aquí debe ir en rem: un px
     suelto se quedaría sin escalar mientras lo de al lado crece.
   - No se copia el bloque :root completo — solo las 2 variables que
     faltan en estilos.css y sí se usan aquí. El resto de variables
     (--c-text, --c-text-muted, --c-border, --c-bg-soft, --radius-*,
     --shadow-card-lg) ya existen en estilos.css con valores compatibles.
   - .container se porta escopado (no global) para no chocar con el
     .container de Bootstrap usado en el resto del contenido de cada
     página.
   - .btn/.btn--primary NO se portan (chocan con el .btn de Bootstrap
     usado en el resto de cada página) — sus estilos base quedan
     incorporados directamente en .demo-form__submit y .s-success__btn.
   ============================================================ */

:root {
  --c-primary: #0071BC;
  --c-primary-300: #00A9E4;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  color: var(--c-text);
  /* Sombra permanente (Figma: X 0, Y 0, desenfoque 10, propagación 0, negro).
     El 25% de opacidad es el valor por defecto de Figma para sombra proyectada — el
     panel solo expone el hex. A negro puro el halo saldría muy marcado. */
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, .25);
}
.site-header .container {
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Solo aplica en mobile: desde 1024px el bloque de desktop lo pone a 0 y fija
     height: 7.25rem. Duplicado en el styles.css del home — mantener en sync. */
  padding: 1.25rem;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo-img {
  display: block;
  width: 6.5rem;
  height: auto;
}

/* ---- Hamburger (mobile only) ----
   IMPORTANTE: el reset de <button> (background/border/padding) es obligatorio aquí. Ni
   el reboot de Bootstrap ni este archivo lo traen, así que sin él el navegador pinta su
   chrome gris por defecto alrededor de las barras. El resto de botones del header
   (.site-nav__toggle, .login-menu__btn) sí lo declaran; este era el único que faltaba. */
/* 35x35 (2.1875rem): medida del ícono en el diseño. Antes eran 48x48, y como el botón es
   el elemento más alto de la barra, esos 13px de más también estiraban el header. */
.nav-toggle {
  width: 2.1875rem; height: 2.1875rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle .bar {
  display: block;
  position: relative;
  width: 2.1875rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute; left: 0;
  width: 2.1875rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease;
}
/* Separación proporcional al nuevo ancho (era 0.625rem sobre barras de 2.75rem). */
.nav-toggle .bar::before { top: -0.5rem; }
.nav-toggle .bar::after  { top:  0.5rem; }
.site-header.is-open .nav-toggle .bar { background: transparent; }
.site-header.is-open .nav-toggle .bar::before { transform: translateY(0.5rem) rotate(45deg); }
.site-header.is-open .nav-toggle .bar::after  { transform: translateY(-0.5rem) rotate(-45deg); }

/* ============================================================
   NAV — mobile-first: slide-down white panel
   ============================================================ */
.site-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card-lg);
  padding: 0.5rem 1.5rem 1.5rem;
  display: none;
}
.site-header.is-open .site-nav { display: block; }
/* list-style:none aquí y en .site-nav__sub: los <li> siguen siendo `display:list-item`
   aunque el <ul> sea flex, así que el navegador les dibuja la viñeta. En la home no se
   veía porque su styles.css resetea ul globalmente; en las siete páginas Bootstrap sí. */
/* padding/margin a 0: el reboot de Bootstrap le mete 2rem de sangría y 1rem de margen
   inferior, y el diseño alinea los items con el borde del panel (en la home no pasaba,
   su hoja resetea ul globalmente — de ahí que el menú sangrara distinto en cada página). */
.site-nav__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
/* El orden es el del HTML —Nosotros, Plataforma ATS, Pruebas, Vocacional, Blog—, igual que
   en el footer. Antes se reordenaba con `order` según un Figma anterior. La línea va bajo
   TODOS los items, incluido el último: cierra la lista contra el botón de ingreso. */
.site-nav__item { border-bottom: 1px solid var(--c-border); }
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-primary);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.site-nav__arrow { flex: 0 0 auto; color: var(--c-primary); }

/* Fila del item con submenú: el link navega, el botón solo despliega */
.site-nav__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.site-nav__row .site-nav__link { flex: 1 1 auto; width: auto; }
.site-nav__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0 0.75rem 0.75rem;
  background: none;
  border: 0;
  color: var(--c-primary);
  cursor: pointer;
}
.site-nav__chev {
  flex: 0 0 auto;
  color: inherit;
  transition: transform .2s ease;
}
.site-nav__item--has-sub.is-open .site-nav__chev { transform: rotate(180deg); }

/* Submenu (Pruebas) — inline accordion en mobile */
.site-nav__sub {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
}
.site-nav__item--has-sub.is-open .site-nav__sub { display: flex; }
/* Sangría de 4.5rem: en el diseño Selección/Organizacional entran bastante más que el
   texto de su item padre (no es el medio paso de antes). El mismo valor lo reusa el
   desplegable de "Ingresar a la plataforma" más abajo, para que las dos listas
   secundarias del panel arranquen en la misma vertical. */
.site-nav__sub a {
  display: block;
  padding: 0.25rem 0 0.25rem 4.5rem;
  font-size: 1rem;
  color: var(--c-text);
}
.site-nav__sub a:hover { color: var(--c-primary); }

/* Item activo dentro del submenú (Selección/Organizacional): negrita, sin
   línea aquí en mobile (la línea de degradado solo aplica al layout de
   escritorio, ver más abajo — en mobile ya hay suficiente contraste con
   el negrita dentro del acordeón). */
.site-nav__sub-item.is-current > a { font-weight: 700; color: var(--c-text); }

/* ============================================================
   LOGIN MENU (Ingresar a la plataforma)
   ============================================================ */
/* Sin `display: none` de partida: el botón ahora vive dentro del <nav>, que ya está oculto
   en mobile hasta que se abre el menú (.site-header.is-open .site-nav). */
.login-menu { position: relative; flex: 0 0 auto; }
.login-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1.5rem;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--c-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.login-menu__chev { transition: transform .2s ease; }
.login-menu.is-open .login-menu__btn { background: var(--c-primary); color: #fff; }
.login-menu.is-open .login-menu__chev { transform: rotate(180deg); }
.login-menu__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-lg);
  /* Sin viñetas: es un menú, no una lista de contenido. Hace falta declararlo porque
     el padding de esta regla anula el padding-left del reboot de Bootstrap y los
     marcadores quedaban colgando fuera de la tarjeta blanca. Las otras dos listas del
     header (.site-nav__list y .site-nav__sub) no lo necesitan: son flex y el marcador
     no se dibuja. La home tampoco lo notaba, su styles.css resetea ul globalmente. */
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.login-menu.is-open .login-menu__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.login-menu__list a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  color: var(--c-text);
  white-space: nowrap;
}
.login-menu__list a:hover { background: var(--c-bg-soft); color: var(--c-primary); }

/* ---- "Ingresar a la plataforma" dentro del panel mobile ----
   Excepción al orden mobile-first del archivo: las reglas de arriba describen la píldora
   compacta + tarjeta flotante del escritorio, y aquí se reescriben para el panel. Se hace
   así, y no al revés, para no tocar el escritorio, que ya está aprobado.
   La tarjeta flotante no sirve dentro del panel (se saldría por abajo), así que las dos
   plataformas se despliegan en línea, con la misma sangría que Selección/Organizacional. */
@media (max-width: 1023.98px) {
  .login-menu__btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.625rem 1.5rem;
  }
  /* El diseño muestra solo el texto centrado. La píldora se invierte al abrirse
     (regla .login-menu.is-open de arriba), que es la señal de que despliega algo. */
  .login-menu__chev { display: none; }
  .login-menu__list {
    position: static;
    display: none;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0.5rem 0 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .login-menu.is-open .login-menu__list { display: block; }
  .login-menu__list a {
    padding: 0.25rem 0 0.25rem 4.5rem;
    font-size: 1rem;
  }
  .login-menu__list a:hover { background: none; }
}

/* ============================================================
   HEADER — desktop (>= 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .site-header .container {
    max-width: none;
    padding-left: clamp(3rem, 6vw, 10.125rem);
    padding-right: clamp(3rem, 6vw, 10.125rem);
  }
  .site-header__inner {
    height: 7.25rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .site-header__logo-img { width: 11.46rem; }
  .nav-toggle { display: none; }

  /* El botón de ingreso es hijo del <nav> (ver header.php), así que aquí el nav vuelve a
     ser la barra: lista centrada + botón a la derecha. `align-items: center` porque el
     nav se estira a toda la altura del header y el botón no debe hacerlo; el `gap` es el
     que antes ponía .site-header__inner cuando el botón era hermano del nav. */
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
    flex: 1 1 auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav__list {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    /* 2.75rem es la separación del diseño a 1920px; con 5 items se comprime
       en pantallas menores para que el nav no empuje al botón de ingreso. */
    gap: clamp(1rem, 2.2vw, 2.75rem);
    height: 100%;
  }
  .site-nav__item {
    border-bottom: 0;
    display: flex;
    align-items: center;
  }
  .site-nav__item--has-sub { position: relative; }
  .site-nav__link {
    width: auto;
    padding: 0;
    gap: 0.375rem;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--c-text);
    white-space: nowrap;
  }
  .site-nav__link:hover { color: var(--c-primary); }
  .site-nav__arrow { display: none; }

  .site-nav__row { width: auto; gap: 0.375rem; }
  .site-nav__toggle { padding: 0; }
  /* Página actual y submenú abierto comparten el resalte: azul + subrayado */
  .site-nav__item--active > .site-nav__link,
  .site-nav__item--active .site-nav__row .site-nav__link,
  .site-nav__item--has-sub.is-open .site-nav__link {
    color: var(--c-primary);
    font-weight: 700;
    box-shadow: inset 0 -0.125rem 0 0 currentColor;
  }
  .site-nav__item--active .site-nav__toggle,
  .site-nav__item--has-sub.is-open .site-nav__toggle { color: var(--c-primary); }

  /* Pruebas dropdown — barra horizontal pegada al header.
     Ancho para 2 items (original del diseño antiguo: 3 items / 37.125rem). */
  .site-nav__sub {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-0.375rem);
    width: 24.75rem;
    height: 4.5rem;
    background: #fff;
    border-radius: 0 0 0.9375rem 0.9375rem;
    box-shadow: var(--shadow-card-lg);
    padding: 0 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 60;
  }
  .site-nav__item--has-sub.is-open .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .site-nav__sub li { display: flex; flex: 0 0 auto; }
  /* Sin la barra de color inferior en cada prueba (ver header.php) */
  .site-nav__sub a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.125rem;
    color: var(--c-text);
    white-space: nowrap;
  }
  .site-nav__sub a:hover { color: var(--c-primary); }

  /* Item activo (Selección/Organizacional): negrita + línea con el gradiente
     de la línea de negocio correspondiente, pegada bajo el texto — colores
     verificados contra MATERIAL_PAGINAS/ORGANIZACIONAL/prototipo_desktop.png. */
  .site-nav__sub-item.is-current a { font-weight: 700; color: var(--c-text); }
  .site-nav__sub-item.is-current a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 0.125rem;
    border-radius: 50rem;
  }
  .site-nav__sub-item--seleccion.is-current a::after { background: var(--g-tema-seleccion); }
  .site-nav__sub-item--organizacional.is-current a::after { background: var(--g-tema-organizacional); }
}

/* ============================================================
   FAQ
   ============================================================ */
.s-faq { padding: 5rem 0; background: #fff; }
.s-faq .container {
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .s-faq .container { padding: 0 3rem; } }
.s-faq .h-section {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--c-primary);
}
.s-faq__list {
  max-width: 97.4375rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
.s-faq__item {
  position: relative;
  border: 0;
  background: transparent;
}
.s-faq__item::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 5.5rem;
  bottom: 0;
  height: 0.0625rem;
  background: #B0B0B0;
}
/* En teléfono las líneas separadoras van completas, de borde a borde del viewport:
   el desfase negativo cancela el padding de 1.25rem que .s-faq .container tiene en
   ese rango. El corte va en 767px y no en el 1024px del resto del bloque porque a
   partir de 768px ese padding pasa a 3rem (ver la regla de arriba) y el desfase ya
   no daría el borde. Es el mismo tratamiento que la home trae en su styles.css
   —allí el desfase es de 1rem porque su .container tiene otro padding en mobile—,
   así que esta regla la pone al día con esa hoja. */
@media (max-width: 767px) {
  .s-faq__item::after { left: -1.25rem; right: -1.25rem; }
}
.s-faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.125rem 1.25rem 1.125rem 2rem;
  text-align: left;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* La opacidad va en el span del texto, no en el botón: en el botón se le contagiaba
   a la flecha (opacity de un padre compone con sus hijos, no se puede "cancelar" con
   opacity:1 en el hijo), y la flecha debe verse a color completo. */
.s-faq__q span {
  display: block;
  max-width: 100%;
  opacity: 0.65;
}
/* Tamaño natural de faq-arrow-mobile.svg (24x23): así el trazo cae en los 3px con que
   está dibujado. Forzarlo a la caja cuadrada de 2rem que había antes —pensada para el
   chevron ancho y fino de escritorio— lo engordaba a 4px. El bloque de 1024px de más
   abajo devuelve la caja de 2.5rem para el asset de escritorio. */
.s-faq__q img {
  width: 1.5rem;
  height: 1.4375rem;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.s-faq__item.is-open .s-faq__q img {
  transform: rotate(180deg);
}
.s-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 1.25rem 0 2rem;
}
.s-faq__item.is-open .s-faq__a {
  max-height: 31.25rem;
  padding: 0 1.25rem 1.25rem 2rem;
}
.s-faq__a p { color: var(--c-text-muted); margin: 0; }
@media (min-width: 1024px) {
  .s-faq .h-section {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.0225rem;
  }
  .s-faq__q {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    font-size: 1.5rem;
    padding: 1.375rem 1.25rem 1.375rem 9.75rem;
  }
  .s-faq__item::after {
    left: 9.75rem;
    right: 5.75rem;
  }
  .s-faq__q img { width: 2.5rem; height: 2.5rem; }
  .s-faq__a,
  .s-faq__item.is-open .s-faq__a { padding-left: 9.75rem; padding-right: 5.75rem; }
}

/* ============================================================
   FORMULARIO DE DEMO
   ============================================================ */
.s-form {
  background: var(--c-primary);
  color: #fff;
  padding: 3.125rem 0 3.625rem;
}
.s-form .container {
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .s-form .container { padding: 0 3rem; } }
.s-form .h-section {
  color: #fff;
  text-align: center;
  max-width: 21.25rem;
  margin: 0 auto 0.75rem;
  font-size: 1.5rem;
  line-height: 1.17;
  font-weight: 900;
}
.s-form .lead {
  color: rgba(255,255,255,0.9);
  text-align: center;
  margin-inline: auto;
  max-width: 21.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 300;
}
.demo-form {
  margin-top: 0;
  display: grid;
  gap: 1.25rem;
  max-width: 21.25rem;
  margin-inline: auto;
}
.demo-form .input,
.demo-form .select,
.demo-form .select select {
  width: 100%;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 0;
  background: #fff;
  color: var(--c-text);
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 300;
  line-height: normal;
}
.demo-form .input::placeholder {
  color: #9a9a9a;
  opacity: 1;
  font-weight: 300;
}
.demo-form .checkbox {
  display: flex; align-items: flex-start; gap: 0.625rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 300;
  opacity: 1;
  flex-wrap: wrap;
}
.demo-form .checkbox a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.demo-form .checkbox input {
  appearance: none;
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.0625rem;
  border: 0.0938rem solid #fff;
  border-radius: 0.1875rem;
  background: transparent;
  display: grid;
  place-items: center;
}
.demo-form .checkbox input::after {
  content: "";
  width: 0.4375rem;
  height: 0.25rem;
  border-left: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.demo-form .checkbox input:checked::after { transform: rotate(-45deg) scale(1); }
.demo-form .checkbox > span:not(.demo-form__error) { flex: 1 1 auto; min-width: 0; }
.demo-form .checkbox.has-error .demo-form__error { flex-basis: 100%; width: 100%; }
/* ---- Wizard: barra de progreso (3 pasos) ---- */
.demo-form__progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.demo-form__progress-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
/* Conector entre el dot anterior y el propio (los items miden lo mismo) */
.demo-form__progress-item::before {
  content: "";
  position: absolute;
  top: 0.8125rem;
  right: 50%;
  left: -50%;
  height: 0.125rem;
  background: rgba(255, 255, 255, 0.35);
  transition: background .45s ease;
}
.demo-form__progress-item:first-child::before { display: none; }
.demo-form__progress-dot {
  position: relative;
  z-index: 1;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-primary);
  border: 0.125rem solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
  transition: background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
}
.demo-form__progress-item.is-active { color: #fff; }
.demo-form__progress-item.is-active .demo-form__progress-dot {
  background: #fff;
  border-color: #fff;
  color: var(--c-primary);
  box-shadow: 0 0 0 0.375rem rgba(255, 255, 255, 0.18);
  /* Pop con rebote al volverse el paso actual */
  animation: demo-dot-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes demo-dot-pop {
  from { transform: scale(0.7); }
  to   { transform: none; }
}
.demo-form__progress-item.is-done { color: rgba(255, 255, 255, 0.9); }
.demo-form__progress-item.is-done .demo-form__progress-dot {
  background: var(--c-accent, var(--c-green));
  border-color: var(--c-accent, var(--c-green));
}
.demo-form__progress-item.is-done::before,
.demo-form__progress-item.is-active::before { background: rgba(255, 255, 255, 0.9); }

/* ---- Wizard: pasos apilados en la misma celda con transición de "página".
   El alto de .demo-form__steps lo fija syncHeight() en psa.js (alto del paso
   activo) para que lo de abajo no salte al paso más alto.
   Curva compartida del wizard: easeOutQuint (arranca rápido, frena suave). ---- */
.demo-form__steps {
  display: grid;
  transition: height .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-form__step {
  grid-area: 1 / 1;
  /* start = alto natural del paso; con el stretch por defecto todos los pasos
     medirían el alto de la caja y syncHeight() nunca podría encogerla */
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(3.5rem);
  /* Salida: se desvanece antes de terminar de deslizar (visibility corta a .45s) */
  transition:
    opacity .4s ease,
    transform .55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .45s;
}
/* Los pasos ya recorridos aparcan a la izquierda: al retroceder entran/salen
   por el lado correcto según la dirección (lo alterna showStep() en psa.js). */
.demo-form__step.is-behind { transform: translateX(-3.5rem); }
.demo-form__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Entrada: leve delay para que la salida despeje, y frenada larga */
  transition:
    opacity .45s ease .08s,
    transform .65s cubic-bezier(0.22, 1, 0.36, 1) .08s;
}
.demo-form__step > * + * { margin-top: 0.875rem; }

/* Cascada de entrada: el contenido del paso activo sube escalonado.
   `backwards` mantiene cada pieza invisible durante su delay. */
@keyframes demo-step-child {
  from { opacity: 0; transform: translateY(0.875rem); }
  to   { opacity: 1; transform: none; }
}
.demo-form__step.is-active > * {
  animation: demo-step-child .55s cubic-bezier(0.22, 1, 0.36, 1) .12s backwards;
}
.demo-form__step.is-active > :nth-child(3) { animation-delay: .22s; }
.demo-form__step.is-active > :nth-child(4) { animation-delay: .32s; }
.demo-form__step.is-active > :nth-child(5) { animation-delay: .42s; }
/* En el paso de confirmación las filas del resumen aterrizan una a una
   (el <dl> no anima como bloque para no duplicar el movimiento). */
.demo-form__step--confirm.is-active > .demo-form__summary { animation: none; }
.demo-form__step--confirm.is-active .demo-form__summary-row {
  animation: demo-step-child .5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.demo-form__step--confirm.is-active .demo-form__summary-row:nth-child(1) { animation-delay: .2s; }
.demo-form__step--confirm.is-active .demo-form__summary-row:nth-child(2) { animation-delay: .3s; }
.demo-form__step--confirm.is-active .demo-form__summary-row:nth-child(3) { animation-delay: .4s; }
.demo-form__step--confirm.is-active .demo-form__summary-row:nth-child(4) { animation-delay: .5s; }
.demo-form__step--confirm.is-active > .checkbox { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .demo-form__steps { transition: none; }
  .demo-form__step { transition: opacity .01s linear, visibility 0s; transform: none !important; }
  .demo-form__step.is-active > *,
  .demo-form__step--confirm.is-active .demo-form__summary-row,
  .demo-form__progress-item.is-active .demo-form__progress-dot { animation: none !important; }
}
.demo-form__step-title {
  margin: 0;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 900;
  text-align: center;
}

/* ---- Wizard: resumen del paso de confirmación ---- */
.demo-form__summary {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.demo-form__summary-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 0.0625rem solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.875rem;
}
.demo-form__summary-row dt {
  flex: 0 0 auto;
  width: 4.5rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
}
.demo-form__summary-row dd {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.demo-form__summary-edit {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  cursor: pointer;
}

/* ---- Wizard: navegación (Atrás / Siguiente / Confirmar y enviar) ---- */
.demo-form__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Los botones son inline-flex y le ganarían al [hidden] del UA stylesheet */
.demo-form__nav [hidden] { display: none !important; }
.demo-form__btn-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.375rem;
  background: transparent;
  border: 0.125rem solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-btn);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.demo-form__btn-back:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.demo-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.demo-form__error {
  display: none;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #ffd2d2;
  font-weight: 700;
}
.demo-form__field.has-error .demo-form__error,
.demo-form__captcha-wrap.has-error .demo-form__error,
.demo-form .checkbox.has-error .demo-form__error {
  display: block;
}
.demo-form__field.has-error .input,
.demo-form__field.has-error .select {
  outline: 0.125rem solid #ff6b6b;
  outline-offset: 0;
}

.demo-form__phone {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 0.5rem;
  height: 2.75rem;
}
.demo-form .demo-form__phone .demo-form__phone-number {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0 1rem 0 0.125rem;
}

/* ---- Dropdown de código de país con bandera (.phone-cc) ---- */
.phone-cc { position: relative; flex: 0 0 auto; min-width: 0; }
.phone-cc__btn {
  display: flex; align-items: center; gap: 0.5rem;
  height: 100%; min-height: 2.75rem;
  padding: 0 0.5rem 0 0.875rem;
  background: transparent;
  border: 0;
  border-radius: 0.5rem 0 0 0.5rem;
  color: var(--c-text);
  font-size: 0.9375rem;
  font-weight: 300;
  font-family: inherit;
  cursor: pointer;
}
.phone-cc__flag {
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.phone-cc__code { display: none; }
.phone-cc__caret {
  margin-left: 0;
  width: 0; height: 0;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.375rem solid #5a5a5a;
  transition: transform .15s ease;
}
.phone-cc.is-open .phone-cc__caret { transform: rotate(180deg); }
.phone-cc__menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 30;
  min-width: 15.625rem;
  max-height: 17.5rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.375rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-card-lg);
  display: none;
}
.phone-cc.is-open .phone-cc__menu { display: block; }
.phone-cc__opt {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--c-text);
  font-size: 0.875rem;
  font-weight: 300;
  white-space: nowrap;
}
.phone-cc__opt:hover { background: var(--c-bg-soft); }
.phone-cc__opt.is-selected { background: rgba(0, 113, 188, 0.08); }
.phone-cc__opt img {
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.phone-cc__opt-name { flex: 1 1 auto; }
.phone-cc__opt-code { color: var(--c-text-muted); font-weight: 700; }

/* ---- Captcha: Google reCAPTCHA v2 INVISIBLE ----
   Sin widget en el form. La insignia flotante se oculta (permitido por Google
   solo si el aviso .demo-form__recaptcha-note queda visible en el flujo). */
.grecaptcha-badge { visibility: hidden; }
.demo-form__recaptcha-note {
  margin: -0.375rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}
.demo-form__recaptcha-note a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* ---- Mensaje de estado del envío ---- */
.demo-form__status {
  display: none;
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 700;
  color: #ffd2d2;
}
.demo-form__status.is-error { display: block; }

/* .btn/.btn--primary base (Bootstrap ya define .btn en el resto de cada
   página — no se porta esa clase, sus propiedades quedan incorporadas
   aquí directamente). Aplica a los 2 botones primarios del wizard:
   "Siguiente" (pasos 1-2) y "Confirmar y enviar" (paso 3). */
.demo-form__submit,
.demo-form__btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-btn);
  text-transform: uppercase;
  letter-spacing: 0;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space: nowrap;
  background: linear-gradient(90deg, #16BF9C 0%, #16BF9C 100%);
  color: #fff;
  border: 0.125rem solid #fff;
  font-family: inherit;
  /* Dentro de .demo-form__nav (flex) ocupan el espacio libre junto a "Atrás" */
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.demo-form__submit:hover,
.demo-form__btn-next:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.15); }
.demo-form__submit:active,
.demo-form__btn-next:active { transform: translateY(0); }
.demo-form__submit:disabled,
.demo-form__btn-next:disabled { opacity: 0.7; cursor: default; transform: none; }

@media (min-width: 768px) {
  .s-form {
    min-height: 37.8125rem;
    padding: 6.6875rem 0 5.125rem;
  }
  .s-form .h-section {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 900;
    max-width: none;
    margin-bottom: 1.375rem;
  }
  .s-form .lead {
    max-width: 51.3125rem;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 2.625rem;
  }
  /* Wizard: columna única centrada (los pasos tienen 2 campos c/u) */
  .demo-form {
    gap: 1.75rem;
    max-width: 33.75rem;
    margin-top: 0;
  }
  .demo-form .input,
  .demo-form .select,
  .demo-form .select select {
    height: 3rem;
    padding: 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 300;
  }
  .demo-form .demo-form__phone { height: 3rem; }
  .demo-form .demo-form__phone .demo-form__phone-number { padding: 0 1.25rem 0 0.25rem; }
  .phone-cc__btn {
    padding-left: 1rem;
    font-size: 1.125rem;
  }
  .phone-cc__flag {
    width: 1.75rem;
    height: 1.75rem;
  }
  .demo-form__progress-dot {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .demo-form__progress-item { font-size: 0.9375rem; gap: 0.5rem; }
  .demo-form__progress-item::before { top: 1.0625rem; }
  .demo-form__step-title { font-size: 1.375rem; }
  .demo-form__step > * + * { margin-top: 1rem; }
  .demo-form__summary-row { font-size: 1rem; padding: 0.625rem 1rem; }
  .demo-form__summary-row dt { width: 5.75rem; }
  .demo-form .checkbox {
    font-size: 0.9375rem;
    line-height: 1.25;
    font-weight: 300;
  }
  .demo-form .checkbox input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
  }
  .demo-form__recaptcha-note { font-size: 1rem; }
  .demo-form__submit,
  .demo-form__btn-next {
    min-height: 3rem;
    font-size: 1.125rem;
  }
  .demo-form__btn-back { min-height: 3rem; }
}

/* ============================================================
   MODAL DE ÉXITO (popup propio, no modal de Bootstrap)
   ============================================================ */
.s-success { position: fixed; inset: 0; z-index: 1000; }
.s-success[hidden] { display: none; }
body.is-modal-open { overflow: hidden; }
.s-success__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 33, 0.55);
}
.s-success__card {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(60.4375rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #f5f5f5;
  border-radius: 1.25rem;
  padding: 3.5rem 4rem 3rem;
  text-align: center;
  box-shadow: var(--shadow-card-lg);
}
.s-success__close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.s-success__icon { display: inline-flex; margin-bottom: 1rem; }
.s-success__icon svg { display: block; }
.s-success__title {
  color: #16bf9c;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1.125rem;
}
.s-success__text {
  color: #1d1d1d;
  font-size: 1.125rem;
  line-height: 1.4;
  max-width: 52.9375rem;
  margin: 0 auto 1.125rem;
}
.s-success__note {
  color: #1d1d1d;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  line-height: 1.4;
  max-width: 39.0625rem;
  margin: 0 auto 1.875rem;
}
.s-success__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.s-success__btn {
  min-height: 3rem;
  border-radius: 5rem;
  padding: 0.5rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.0312rem;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.s-success__btn:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.15); }
.s-success__btn:active { transform: translateY(0); }
.s-success__btn--ghost { background: #fff; color: #0071bc; }
.s-success__btn--solid { background: #16bf9c; color: #fff; border: 0.125rem solid #fff; }

@media (max-width: 767px) {
  .s-success__card { padding: 2.75rem 1.375rem 2rem; }
  .s-success__title { font-size: 1.25rem; }
  .s-success__text { font-size: 1rem; }
  .s-success__note { font-size: 0.875rem; }
  .s-success__actions { flex-direction: column; }
  .s-success__btn { width: 100%; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #000;
  color: #fff;
  padding: 3rem 0 1.75rem;
  /* Interlineado fijado aquí, no heredado del <body>: Bootstrap lo pone en 1.5 (y en 1.2
     para h1-h6) y la hoja de la home en 1.55 sin regla para encabezados, así que el mismo
     partial salía 13px más alto en la home. Espejo en
     paginas-anteriores/pagina_psicoalianza/assets/css/styles.css. */
  line-height: 1.5;
}
.site-footer h3 { line-height: 1.2; }
/* Longhands -inline y NO los atajos `margin`/`padding`: el bloque legal lleva las dos
   clases (<div class="container site-footer__legal">), y `.site-footer .container` es
   (0,2,0) contra los (0,1,0) de `.site-footer__legal`. Con los atajos, el margin-top de
   9.0625rem y el padding-top de 1.375rem que separan la línea azul del resto se perdían
   en las 7 páginas — el footer medía 362px aquí y 500px en la home, que sí lo respeta
   porque su hoja heredada usa longhands. Esta es la razón de que el footer no se viera
   igual en todas las páginas. */
.site-footer .container {
  width: 100%;
  max-width: 99rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 1024px) { .site-footer .container { padding-inline: 3rem; } }
.site-footer__inner {
  display: grid;
  gap: 1.75rem;
}
.site-footer__brand {
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 700; font-size: 1.125rem;
}
.site-footer__brand img { width: min(25.0625rem, 100%); height: auto; }
.site-footer h3 {
  font-size: 1.25rem;
  letter-spacing: 0;
  color: var(--c-primary-300);
  margin-bottom: 0.75rem;
  font-weight: 900;
}
/* Sin viñetas y sin sangría de <ul>: el diseño alinea cada ítem con su <h3>.
   Hace falta declararlo porque estas 7 páginas van sobre Bootstrap, que no resetea
   list-style ni el padding de las listas; la home no lo necesita porque su hoja
   heredada ya trae `ul { list-style: none; padding: 0; margin: 0 }` en el reset global.
   Sin esta regla el footer —que es el MISMO partial en las 8 páginas— salía con
   bullets y 24px de desplazamiento aquí, y limpio en la home. */
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li {
  padding: 0.25rem 0;
  font-size: 0.875rem;
  opacity: 0.85;
}
.site-footer ul a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
}
.site-footer ul a:hover { color: var(--c-primary-300); }
/* Nosotros / Plataforma ATS / Pruebas psicométricas / Vocacional / Blog son secciones por
   derecho propio —solo Selección y Organizacional cuelgan de "Pruebas psicométricas"— y van
   en el azul de marca + negrita en TODOS los anchos.
   Lleva .site-footer delante a propósito: `.site-footer__li--section a` por sí solo es
   (0,1,1) y perdía contra `.site-footer ul a` (0,1,2), así que el color quedaba en blanco.
   Con las dos clases sube a (0,2,1) y gana sin necesidad de !important. */
.site-footer .site-footer__li--section a {
  color: var(--c-primary-300);
  font-weight: 900;
}
/* A plena opacidad: son el equivalente a un encabezado, no ítems de lista. También aquí
   hacen falta las dos clases — `.site-footer ul li` es (0,1,1) y le gana al (0,1,0) de
   `.site-footer__li--section`, motivo por el cual el `opacity: 1` del bloque móvil de más
   abajo nunca llegó a aplicarse (su `padding-top` sigue igual de anulado, y así se queda:
   el interlineado móvil es el aprobado). */
.site-footer .site-footer__li--section { opacity: 1; }
.site-footer ul img {
  width: 1.125rem;
  height: 1.125rem;
}
.site-footer .socials {
  display: flex; gap: 0.75rem;
  margin-top: 0.25rem;
  /* Si la columna se queda corta, que bajen de línea en vez de desbordar
     (los ítems ya no encogen — ver flex-shrink abajo). */
  flex-wrap: wrap;
}
/* flex: 0 0 auto — el <a> es ítem flex de .socials y por defecto encogería,
   deformando el ícono a lo ancho cuando la columna es estrecha. */
.site-footer .socials a {
  width: 2rem; height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Lo mismo para el <img>, que es ítem flex del <a> (inline-flex).
   object-fit: contain le garantiza la proporción aunque la caja no sea cuadrada. */
.site-footer .socials img {
  width: 1.125rem; height: 1.125rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.site-footer__legal {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 0.0625rem solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.75rem; opacity: 0.7;
}
.site-footer__legal a { color: #fff; }
/* Cierre a todo el ancho. Va oculto por defecto y solo aparece en escritorio: el diseño
   móvil termina en "Términos y condiciones". flex-basis 100% lo baja a su propia línea
   dentro del mismo contenedor flex. */
.site-footer__copy { display: none; }
/* Corte en 1024px, no en el md de Bootstrap (768px): por debajo de 1024px el root sigue
   fijo en 16px, así que los rem del grid pasan a ser píxeles literales y el footer se
   desbordaba en todo el rango 768-1023px. Desde 1024px el root escala con el viewport
   y el grid encaja. */
@media (min-width: 1024px) {
  .site-footer {
    min-height: 28.625rem;
    padding: 6.0625rem 0 3.5625rem;
  }
  /* Anchos medidos contra lo que pide cada columna, no a ojo — con los de antes
     (20/13/16/18rem) dos encabezados se partían en dos líneas y el diseño los lleva
     en una, y el logo salía recortado:
       · marca   25.0625rem = el ancho natural del logo (lo topaba la columna de 20rem).
       · pruebas 19rem   — "Pruebas psicométricas" pide 16.68rem a 1.625rem de fuente.
       · contacto 17rem  — "Habla con nosotros" pide 15.30rem.
       · redes   22.5rem — el encabezado pide 21.39rem y los 5 íconos 21.69rem.
     Total 83.5625 + 3 gaps de 4.5 = 97.06rem, dentro de los 99rem del contenedor. */
  .site-footer__inner {
    grid-template-columns: 25.0625rem 19rem 17rem 22.5rem;
    justify-content: start;
    column-gap: 4.5rem;
    row-gap: 2rem;
    align-items: start;
  }
  .site-footer__brand { gap: 1.5rem; }
  .site-footer h3 { font-size: 1.75rem; margin-bottom: 1.375rem; }
  .site-footer ul li { font-size: 1.375rem; }
  /* El 1.625rem que tenía el <h3> de la columna de enlaces se queda con las secciones:
     ahora "Pruebas psicométricas" es un ítem más de la lista y las cinco van al mismo
     tamaño, un escalón por encima de Selección / Organizacional. */
  .site-footer .site-footer__li--section { font-size: 1.625rem; }
  /* Ritmo del diseño, medido sobre el prototipo: 51px entre secciones y 45px entre las
     dos pruebas (con los 0.25rem de la regla general salían 47 y 41, apretados).
     El margen negativo sube la lista los 10px de medio interlineado + padding que la
     separaban del <h3> de las columnas vecinas: en el diseño el primer enlace y los dos
     encabezados arrancan en la misma línea. */
  .site-footer__col--links ul { margin-top: -0.625rem; }
  .site-footer__col--links ul li { padding-block: 0.375rem; }
  .site-footer ul img {
    width: 1.75rem;
    height: 1.75rem;
  }
  /* Tamaño y separación del diseño. Estaban rebajados a 2.5/1.25rem porque no cabían
     en la columna de 18rem; con los 22.5rem de ahora sí (5 x 2.9375 + 4 x 1.75 =
     21.69rem), así que vuelven a su valor. */
  .site-footer .socials { gap: 1.75rem; }
  .site-footer .socials a {
    width: 2.9375rem;
    height: 2.9375rem;
  }
  .site-footer .socials img { width: 2.9375rem; height: 2.9375rem; }
  .site-footer__legal {
    /* QA/Figma 3001-12549: del último link a la línea divisoria hay 78px, no 145 */
    margin-top: 4.875rem;
    padding-top: 1.375rem;
    border-top: 0.1875rem solid var(--c-primary-300);
    font-size: 1.125rem;
    opacity: 1;
  }
  /* Tercios iguales en vez de space-between: con anchos distintos, space-between deja el
     enlace del medio centrado en el hueco sobrante, no en la página (se iba unos 70px a
     la derecha). Con flex:1 1 0 las tres cajas miden lo mismo, así que la del medio queda
     centrada respecto al contenedor y su texto con ella.
     Solo aquí: en móvil el bloque es flex-direction:column y un flex-basis de 0 aplicaría
     al ALTO, aplastando las tres líneas. */
  .site-footer__legal > span,
  .site-footer__legal > a { flex: 1 1 0; }
  .site-footer__legal > :nth-child(2) { text-align: center; }
  .site-footer__legal > :nth-child(3) { text-align: right; }
  .site-footer__copy {
    display: block;
    flex: 0 0 100%;
    text-align: center;
    margin-top: 1rem;
  }
}


/* ---------- Footer — versión mobile (< 1024px) ----------
   El diseño móvil no es el de escritorio apilado: reordena los bloques
   (enlaces -> contacto -> marca -> redes), oculta el título de redes y centra marca, redes
   y legales bajo una línea azul. "Habla con nosotros" queda al final de la lista de
   secciones y con su mismo aspecto, así que el bloque se lee como una sola columna.
   Va en su propio media query (el bloque de escritorio arranca en 1024px) para que nada
   de esto se filtre al layout grande. El reordenado es solo visual: el HTML conserva el
   orden de escritorio, que es el correcto semánticamente. */
@media (max-width: 1023.98px) {
  .site-footer { padding: 2.5rem 0 1.5rem; }
  /* Sin row-gap y con la separación devuelta a marca y redes: en el diseño móvil la lista
     de secciones y "Habla con nosotros" son un bloque continuo —el encabezado de contacto
     cae en el mismo ritmo que Vocacional o Blog—, así que el salto de 2rem del grid solo
     debe existir de ahí para abajo. */
  .site-footer__inner { gap: 0; }
  .site-footer__col--brand,
  .site-footer__col--social { margin-top: 2rem; }
  /* "Habla con nosotros" es un <h3> —interlineado 1.2 y sin el padding vertical de los
     <li>—, así que sin este empujón queda 6px más pegado a "Blog" que el resto de la
     lista y se rompe el ritmo que el diseño mantiene parejo. */
  .site-footer__col--contact { margin-top: 0.375rem; }

  .site-footer__col--links   { order: 1; }
  .site-footer__col--contact { order: 2; }
  .site-footer__col--brand   { order: 3; }
  .site-footer__col--social  { order: 4; }

  /* Contacto y las 3 pruebas van sangrados: son hijos de su encabezado. */
  .site-footer__col--contact ul li,
  .site-footer__col--links ul li { padding-left: 2.25rem; }

  /* Estos tres toman el mismo tratamiento que un h3. El color y la negrita ya vienen
     de la regla base (aplica en todos los anchos); aquí solo el tamaño y el sangrado,
     que sí son propios del layout móvil. */
  .site-footer__li--section { padding-left: 0 !important; padding-top: 0.75rem; opacity: 1; }
  .site-footer__li--section a { font-size: 1.25rem; }

  /* Marca centrada, precedida por la línea azul que separa del bloque de enlaces. */
  .site-footer__col--brand { text-align: center; }
  .site-footer__brand { flex-direction: column; justify-content: center; }
  .site-footer__brand::before {
    content: "";
    width: 7.75rem; height: 0.1875rem;
    margin: 0 auto 1.5rem;
    background: var(--c-primary-300);
  }
  .site-footer__brand img { width: 16rem; margin-inline: auto; }

  /* Redes: el diseño móvil no muestra el título, y los íconos van a tamaño completo —
     el ícono ya ES el círculo, así que a 1.125rem se veía a media asta dentro
     de su contenedor de 2rem. */
  .site-footer__col--social h3 { display: none; }
  .site-footer .socials { justify-content: center; gap: 1rem; margin-top: 0; }
  .site-footer .socials img { width: 2rem; height: 2rem; }

  /* Legales: tres líneas centradas. Sin regla superior — ya la hace la línea azul. */
  .site-footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    border-top: 0;
    margin-top: 1.25rem;
    padding-top: 0;
  }
}

/* ============================================================
   TESTIMONIOS — portado de la página antigua (styles.css 1853-2179).
   Fondo y marca de agua parametrizables por página vía variables
   inline (patrón tomado de .ats-sec2-bg de plataforma-ats):
     --sec-bg         color de fondo
     --sec-watermark  imagen de marca de agua (o `none`)
   ============================================================ */
.s-testimonios {
  padding: 4rem 0 3.5rem;
  background-color: var(--sec-bg, var(--c-bg));
  background-image: var(--sec-watermark, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  background-blend-mode: multiply;
}
@media (max-width: 991.98px) { .s-testimonios { background-image: none; } }
.s-testimonios .container {
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .s-testimonios .container { padding: 0 3rem; } }
.s-testimonios .h-section {
  text-align: center;
  color: var(--c-primary);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 43.75rem;
}
.s-testimonios .h-section strong { display: inline; font-weight: 900; }
.s-testimonios__subtitle {
  text-align: center;
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0.75rem auto 0;
  max-width: 50rem;
}
.s-testimonios__stage { position: relative; margin-top: 4.75rem; }
.testimonios-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 76.8125rem;
  margin-left: auto;
  margin-right: auto;
}
/* Slick recorta con overflow:hidden en .slick-list el avatar y el footer
   (ambos absolutos y fuera de la card): padding + margen negativo los expone. */
.s-testimonios .slick-list {
  padding-top: 5rem;
  padding-bottom: 3.75rem;
  margin-top: -5rem;
  margin-bottom: -3.75rem;
}
.testimonio-card {
  position: relative;
  background: #fff;
  border: 0.125rem solid #0071BC;
  border-radius: 1rem;
  padding: 6.25rem 4rem 4rem;
  min-height: 18.125rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* QA: centrar la cita verticalmente; con citas cortas quedaba pegada a la foto */
  justify-content: center;
}
/* Slick pisa el display de los slides (`.slick-initialized .slick-slide { display: block }`,
   especificidad 0,2,0) y desactiva el flex de arriba. Se re-declara con la misma
   especificidad y solo post-init para no mostrar las cards apiladas antes de slick. */
.slick-initialized .testimonio-card { display: flex; }
.testimonio-card__avatar {
  position: absolute;
  top: -5.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 9.5rem;
  height: auto;
  object-fit: contain;
  object-position: center;
  z-index: 3;
}
.testimonio-card__quote {
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.22;
  color: var(--c-text);
  opacity: 0.5;
  letter-spacing: 0.045rem;
  margin: 0 auto 2.125rem;
  max-width: 63.25rem;
}
.testimonio-card__quote-mark {
  position: absolute;
  left: calc(50% + 5.75rem);
  top: -1.625rem;
  width: 3.5rem;
  height: 3.3125rem;
  pointer-events: none;
  opacity: 0.95;
}
.testimonio-card__footer {
  position: absolute;
  left: 50%;
  bottom: -2.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 1.25rem;
  color: var(--c-text);
  white-space: nowrap;
}
.testimonio-card__country {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0.375rem #fff;
  position: relative;
  z-index: 1;
}
.testimonio-card__name {
  color: var(--c-primary);
  font-size: 1.5rem;
  font-weight: 400;
  background: #fff;
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
}
.testimonio-card__name strong { font-weight: 900; }
.testimonio-card__divider {
  display: inline-block;
  width: 0.0625rem;
  height: 2rem;
  background: rgba(0, 113, 188, 0.55);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1.125rem #fff;
}
.testimonio-card__role {
  color: var(--c-text);
  font-weight: 400;
  background: #fff;
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
}
.testimonio-card__role strong { color: var(--c-text); font-weight: 900; }
.testimonio-card__logo-wrap {
  width: 13.125rem;
  height: 4.8125rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.5rem;
  overflow: hidden;
}
.testimonio-card__logo { max-height: 3.75rem; max-width: 7.5rem; width: auto; object-fit: contain; }
.testimonio-card__footer--no-logo { bottom: -1.3125rem; }
.testimonio-card__logo-wrap--asset {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  width: 13.125rem;
  height: auto;
}
.testimonio-card__logo--card { width: 13.125rem; height: auto; max-width: none; max-height: none; }
.s-testimonios__arrow {
  position: absolute;
  top: 50%;
  width: 4.875rem;
  height: 4.875rem;
  border-radius: 0;
  background: url('/assets/img/shared/carrusel/button.svg') center / contain no-repeat;
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 2;
}
.s-testimonios__arrow::before {
  content: "";
  position: absolute;
  left: 1.8125rem;
  top: 1.1875rem;
  width: 1.25rem;
  height: 2.5rem;
  background: url('/assets/img/shared/carrusel/arrow-left.svg') center / contain no-repeat;
}
.s-testimonios__arrow--prev { left: max(0px, calc((100vw - 112.75rem) / 2)); }
.s-testimonios__arrow--prev::before { transform: rotate(180deg); }
.s-testimonios__arrow--next { right: max(0px, calc((100vw - 112.75rem) / 2)); }
.s-testimonios__arrow--next::before { transform: none; }

@media (min-width: 1024px) {
  .s-testimonios { min-height: 41.5625rem; padding: 3.875rem 0 3.5625rem; }
  .s-testimonios .h-section { font-size: 2.25rem; line-height: 1.18; }
  /* Avatar y footer centrados exactamente sobre el borde de la card */
  .testimonio-card__avatar { top: 0; transform: translate(-50%, -50%); }
  .testimonio-card__footer { bottom: 0; transform: translate(-50%, 50%); }
  /* El borde azul de la card cruza por detrás de bandera/nombre/cargo/empresa.
     Los fondos blancos sueltos de __name/__role y los box-shadow de __country y
     __divider lo tapaban solo debajo de cada elemento, dejando el borde a la
     vista en los gap del flex y en las zonas transparentes del logo. Esta capa
     lo tapa de un solo trazo, pintando blanco desde arriba hasta el borde
     inferior de la card.
     El corte va en calc(50% + 0.125rem), no en 50%: con bottom:0 el footer se
     alinea contra la caja de padding de la card, así que su centro cae en el
     filo *superior* del borde de 0.125rem: cortar en 50% no taparía ni un píxel.
     Los 0.125rem extra lo cruzan entero y dejan el corte blanco/fondo justo
     donde terminaba el borde, sin escalón.
     Se pinta con degradado y no con height:50% porque el footer es absolute de
     alto automático: contra él un alto en % no resuelve y la capa quedaría en 0.
     z-index 0 para quedar sobre el borde de la card pero bajo el texto. */
  .testimonio-card__footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      #fff calc(50% + 0.125rem + 1px),
      transparent calc(50% + 0.125rem + 1px)
    );
    z-index: 0;
  }
  /* Nombre, cargo, bandera y separador ya son relative + z-index 1, así que
     quedan sobre la capa anterior. El logo no está posicionado: sin esto pinta
     por debajo (la capa es z-index 0) y se le come la mitad de arriba. */
  .testimonio-card__logo-wrap { position: relative; z-index: 1; }
  /* Separación de las flechas respecto al borde de la pantalla (prototipo: ~60px
     sobre el canvas de 1920). En rem, que por encima de 1024px escala igual que
     vw; el clamp anterior solo servía para acotar valores que aquí no aplican. */
  .s-testimonios__arrow--prev {
    left: 50%; right: auto;
    transform: translate(calc(-50vw + 8rem), -50%);
  }
  .s-testimonios__arrow--next {
    left: auto; right: 50%;
    transform: translate(calc(50vw - 8rem), -50%);
  }
}
@media (max-width: 1023px) {
  .s-testimonios .h-section {
    max-width: none;
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    font-size: 1.1875rem;
    line-height: 1.18;
    font-weight: 900;
  }
  .testimonio-card__avatar { width: 7.5rem; top: 0; transform: translate(-50%, -50%); }
  .testimonio-card__avatar[src$="testimonio-2.webp"] { transform: translate(-50%, calc(-50% - 0.625rem)); }
  .s-testimonios__stage { margin-top: 5.75rem; }
  .s-testimonios__arrow {
    display: block !important;
    top: -4.375rem;
    bottom: auto;
    transform: none;
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid #0475A4;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
  }
  .s-testimonios__arrow::before {
    content: "";
    left: 50%;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    background: transparent;
    border-top: 0.25rem solid #0475A4;
    border-right: 0.25rem solid #0475A4;
    transform: translate(-60%, -50%) rotate(45deg);
  }
  .s-testimonios__arrow--prev { left: clamp(0.625rem, calc(50% - 10.75rem), 1.5rem); right: auto; }
  .s-testimonios__arrow--prev::before { transform: translate(-40%, -50%) rotate(225deg); }
  .s-testimonios__arrow--next { right: clamp(0.625rem, calc(50% - 10.75rem), 1.5rem); left: auto; }
  .s-testimonios__arrow--next::before { transform: translate(-60%, -50%) rotate(45deg); }
  /* Slick fuerza display:block en .slick-slide; se refuerza el flex para centrar */
  .s-testimonios .slick-slide.testimonio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.5rem 3rem;
  }
  .testimonio-card__quote {
    font-size: 1.125rem;
    letter-spacing: 0;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
  }
  .testimonio-card__footer {
    position: static;
    transform: none;
    flex-wrap: wrap;
    margin-top: 0;
    white-space: normal;
  }
  .testimonio-card__logo-wrap { margin-left: 0; }
}

/* ============================================================
   LOGOS DE CLIENTES — portado de la página antigua (styles.css 2181-2385).
   Mismos parámetros de fondo/marca de agua que testimonios.
   ============================================================ */
.s-logos {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 4rem;
  background-color: var(--sec-bg, #fff);
  background-image: var(--sec-watermark, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  background-blend-mode: multiply;
}
@media (max-width: 991.98px) { .s-logos { background-image: none; } }
.s-logos > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .s-logos > .container { padding: 0 3rem; } }
.s-logos__title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 0.75rem;
}
.s-logos__title strong { font-weight: 700; }
.s-logos__subtitle {
  display: none; /* oculto en mobile; visible en desktop */
  text-align: center;
  color: #1d1d1d;
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 auto 1.5rem;
  max-width: 45rem;
}
.logos-carousel { margin: 0 -0.5rem 1.75rem; }
.logos-carousel .slide { padding: 0 1rem; }
.s-logos .slick-slider { position: relative; }
.s-logos .slick-prev,
.s-logos .slick-next {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('/assets/img/shared/logos-clientes/boton-flecha-2.svg') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.s-logos .slick-next { right: -0.75rem; }
.s-logos .slick-prev { left: -0.75rem; transform: translateY(-50%) rotate(180deg); }
.s-logos .slick-prev:hover,
.s-logos .slick-next:hover { opacity: 0.82; }
.logo-item {
  height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 0.75rem;
  /* 0.625rem de padding lateral en mobile (el de escritorio, 1.5rem, vuelve en el bloque
     de 768px): con 3 logos por vista, en un teléfono de 320-390px la caja interior se
     quedaba en 13-58px y el logo no tenía dónde dibujarse. */
  padding: 0.75rem 0.625rem;
}
/* object-fit + max-width son los que evitan la deformación: el <img> es ítem flex y por
   defecto encoge, y al encoger solo le quitaba ANCHO —el alto seguía clavado en el
   max-height—, así que los logos salían aplastados en pantallas pequeñas (a 320px se
   pintaban 35x48 con una proporción real de 2.7:1). Con object-fit el dibujo conserva su
   proporción aunque la caja se estreche. */
.logo-item img {
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.s-logos__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
  text-align: center;
}
.s-logos__flags { display: flex; align-items: center; justify-content: center; width: 100%; }
.s-logos__flags-strip { width: min(100%, 74.8125rem); height: auto; object-fit: contain; }
.s-logos__caption { color: #1d1d1d; font-size: 0.8125rem; margin: 0; opacity: 0.7; }
.s-logos__caption strong { color: inherit; font-weight: 700; }

@media (min-width: 768px) {
  .s-logos { padding: 5.125rem 0 4.75rem; }
  .s-logos__title { font-size: 2.5rem; letter-spacing: -0.025rem; margin-bottom: 1rem; }
  .s-logos__subtitle {
    display: block;
    font-size: 1.75rem;
    line-height: normal;
    letter-spacing: -0.0175rem;
    margin-bottom: 3rem;
    max-width: 75rem;
  }
  .logos-carousel { margin-bottom: 2.375rem; }
  .logos-carousel .slide { padding: 0 1.75rem; }
  .s-logos .slick-prev { left: clamp(-2.625rem, calc((100vw - 80rem) / -2), -1rem); }
  .s-logos .slick-next { right: clamp(-2.625rem, calc((100vw - 80rem) / -2), -1rem); }
  /* Padding lateral del diseño de escritorio, el que tenía la regla base antes de
     estrecharlo para mobile. */
  .logo-item { width: 100%; height: 4.8125rem; border-radius: 1rem; padding: 0.75rem 1.5rem; }
  .s-logos__footer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin-top: 2.75rem;
    text-align: left;
  }
  .s-logos__flags { flex: 0 0 50%; max-width: 50%; justify-content: flex-end; padding-right: 1.375rem; }
  .s-logos__caption {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 1.375rem;
    font-size: 1.25rem;
    font-style: italic;
    opacity: 0.7;
  }
}
@media (max-width: 767px) {
  .s-logos__title { font-size: 1.1875rem; line-height: 1.25; margin-left: -0.5rem; margin-right: -0.5rem; }
  .logos-carousel .slide { padding: 0 0.5rem; }
  .s-logos__footer { flex-direction: column; gap: 0.875rem; text-align: center; }
  .s-logos__flags,
  .s-logos__caption { flex: none; max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
  .s-logos__flags { justify-content: center; }
  /* En mobile el caption va entre los logos y las banderas */
  .s-logos__caption { order: -1; }
  /* Sin flechas en mobile: solo swipe/autoplay. Slick las fija inline, de ahí el !important */
  .s-logos .slick-prev,
  .s-logos .slick-next { display: none !important; }
}