/* ============================================================
   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. */
.nav-toggle {
  width: 3rem; height: 3rem;
  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.75rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute; left: 0;
  width: 2.75rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle .bar::before { top: -0.625rem; }
.nav-toggle .bar::after  { top:  0.625rem; }
.site-header.is-open .nav-toggle .bar { background: transparent; }
.site-header.is-open .nav-toggle .bar::before { transform: translateY(0.625rem) rotate(45deg); }
.site-header.is-open .nav-toggle .bar::after  { transform: translateY(-0.625rem) 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í. */
.site-nav__list { display: flex; flex-direction: column; list-style: none; }
.site-nav__item { border-bottom: 1px solid var(--c-border); }
.site-nav__item:nth-child(1) { order: 5; border-bottom: 0; } /* Nosotros (último visual) */
.site-nav__item:nth-child(2) { order: 3; }                   /* Plataforma ATS */
.site-nav__item:nth-child(3) { order: 1; }                   /* Pruebas */
.site-nav__item:nth-child(4) { order: 2; }                   /* Vocacional */
.site-nav__item:nth-child(5) { order: 4; }                   /* Blog */
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1.125rem 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;
  padding: 0 0 0.75rem;
}
.site-nav__item--has-sub.is-open .site-nav__sub { display: flex; }
.site-nav__sub a {
  display: block;
  padding: 0.5rem 0 0.5rem 1.25rem;
  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)
   ============================================================ */
.login-menu { position: relative; flex: 0 0 auto; display: none; }
.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); }

/* ============================================================
   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; }
  .login-menu { display: block; }

  .site-nav {
    position: static;
    display: flex;
    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:nth-child(n) { order: 0; }
  .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;
}
.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;
}
.s-faq__q img {
  width: 2rem;
  height: 2rem;
  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); }
/* Plataforma ATS / Blog / Nosotros no cuelgan de "Pruebas psicotécnicas": son secciones
   por derecho propio 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;
}
.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__inner > div:nth-child(2) h3 { font-size: 1.625rem; }
  .site-footer ul li { font-size: 1.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
   (contacto -> enlaces -> marca -> redes), promueve Plataforma ATS / Blog / Nosotros a
   aspecto de encabezado de sección, oculta el título de redes y centra marca, redes y
   legales bajo una línea azul.
   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; }
  .site-footer__inner { gap: 2rem; }

  .site-footer__col--contact { order: 1; }
  .site-footer__col--links   { 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;
  padding: 0.75rem 1.5rem;
}
.logo-item img { max-height: 3rem; width: auto; 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); }
  .logo-item { width: 100%; height: 4.8125rem; border-radius: 1rem; }
  .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; }
}