/* ============================================================
   PsicoAlianza — Landing Pruebas 2026
   Mobile-first. Breakpoints: 768px, 1024px, 1200px.
   ============================================================ */

:root {
  --c-primary:        #0071BC;
  --c-primary-700:    #0A0A21;
  --c-primary-500:    #0071BC;
  --c-primary-300:    #00A9E4;
  --c-accent:         #16BF9C;
  --c-accent-2:       #16BF9C;
  --c-bg:             #FFFFFF;
  --c-bg-soft:        #F5F6FA;
  --c-bg-dark:        #0A0A21;
  --c-text:           #1D1D1D;
  --c-text-muted:     #5C6478;
  --c-text-on-dark:   #E6ECFA;
  --c-border:         #E1E5EE;
  --c-purple:         #2A2A80;
  --c-blue-deep:      #003C6A;

  --g-hero:           linear-gradient(90deg, #2597C5 0%, #2A2A80 100%);
  --g-cta:            linear-gradient(90deg, #16BF9C 0%, #16BF9C 100%);
  --g-optimiza:       linear-gradient(90deg, #0071BC 0%, #16BF9C 100%);
  --g-dark:           linear-gradient(180deg, #0A0A21 0%, #0A0A21 100%);

  --font-sans:        'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius-card:      1rem;
  --radius-btn:       62.4375rem;
  --radius-sm:        0.5rem;

  --shadow-card:      0 0.375rem 1.5rem rgba(11, 25, 55, 0.08);
  --shadow-card-lg:   0 0.75rem 2.5rem rgba(11, 25, 55, 0.15);

  --container:        99rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Escalado proporcional desktop (canvas Figma 1920px) ----------
   1rem = (100vw / 1920) * 16  ->  16px exactos a 1920px, escala lineal sin tope.
   Todo el CSS está en rem, así que a cualquier ancho desktop el layout escala
   en bloque manteniendo posiciones/tamaños relativos (sin descuadre).
   Abajo de 1024px :root queda en 16px (default) -> reglas mobile intactas. */
@media (min-width: 1024px) {
  :root { font-size: calc(100vw / 1920 * 16); }
}

html,
body {
  /* `hidden` en body crea un scroll container que no scrollea (scrollea html) y
     eso rompe el position:sticky del header. `clip` recorta igual el desborde
     horizontal de los decorativos sin crear scroll container. El primer valor
     queda como fallback para navegadores sin soporte de clip. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; height: auto; }

/* Accesible solo para lectores de pantalla (labels visualmente ocultos, etc.) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* Padding unificado a 3rem en >=768px: un solo valor que escala parejo en
   desktop (evita el tirón en 1200px que tenía el override anterior 2rem→3rem). */
@media (min-width: 768px) { .container { padding: 0 3rem; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.0312rem;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--g-cta);
  color: #fff;
  border: 0.125rem solid #fff;
}
.btn--outline {
  background: transparent;
  color: var(--c-primary-500);
  border: 0.125rem solid var(--c-primary-500);
}
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 0.125rem solid rgba(255,255,255,0.6);
}
.btn--dark {
  background: var(--c-primary-700);
  color: #fff;
}

/* ---------- Headings & utilities ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
}
.h-section {
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}
.h-section strong { color: var(--c-primary-500); }
.lead {
  color: var(--c-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.text-center { text-align: center; }
@media (min-width: 768px) {
  .h-section { font-size: 2.25rem; }
  .lead { font-size: 1.0625rem; }
}
@media (min-width: 1200px) {
  .h-section { font-size: 2.75rem; }
}
/* ============================================================
   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 al 25%).
     Duplicada a propósito en assets/css/shared-sections.css: el home carga solo esta
     hoja y las otras 7 páginas solo aquella, así que ambas deben mantenerse en sync. */
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, .25);
}
.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 assets/css/shared-sections.css — mantener en sync. */
  padding-top: 1.25rem;
  padding-bottom: 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) ----
   El reset de <button> (background/border/padding) es obligatorio: sin él el navegador
   pinta su chrome gris por defecto alrededor de las barras. */
/* 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; }
.site-nav__list { display: flex; flex-direction: column; 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 on mobile */
.site-nav__sub {
  display: none;
  flex-direction: column;
  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. Mismo valor en el desplegable de "Ingresar a la plataforma". */
.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); }

/* ============================================================
   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);
  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 ----
   Espejo de assets/css/shared-sections.css — mantener ambos en sync. Las reglas de arriba
   describen la píldora compacta + tarjeta flotante del escritorio; aquí se reescriben para
   el panel, donde la tarjeta flotante se saldría por abajo: 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) {
  /* Mismo inset que el hero: logo alineado con el título de la Sección 1 */
  .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; }

  /* Inline nav bar. El botón de ingreso es hijo del <nav> (ver partials/header.php), así
     que el nav es la barra completa: 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 entre los dos. */
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: stretch;       /* nav ocupa toda la altura del header */
    flex: 1 1 auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav__list {
    flex: 1 1 auto;            /* llena el nav para que justify-content centre los items */
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 2.75rem;
    height: 100%;
  }
  .site-nav__item {
    border-bottom: 0;
    display: flex;
    align-items: center;       /* link centrado vertical; item full-height */
  }
  .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 (Figma 3142-3986) */
  .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;           /* 396px — 2 items */
    height: 4.5rem;            /* 72px */
    background: #fff;
    border-radius: 0 0 0.9375rem 0.9375rem; /* 15px solo abajo */
    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 */
  .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); }
}
/* ============================================================
   SECTION: HERO
   ============================================================ */
.s-hero {
  background: var(--g-hero);
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 50.6875rem;
}
.s-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.s-hero__inner {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding-top: 3rem;
  padding-bottom: 3.75rem;
  min-height: inherit;
}
.s-hero__eyebrow {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
  opacity: 0.92;
}
.s-hero__title {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 900;
  /* Sin el párrafo lead (copy definitivo), el título queda pegado al botón */
  margin: 0 0 1.5rem;
}
.s-hero__title small {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  opacity: 1;
  margin-bottom: 0.75rem;
}
.s-hero__lead {
  font-size: 0.9375rem;
  opacity: 1;
  margin: 1.25rem 0 1.75rem;
  max-width: 33.75rem;
}
/* Enlace SEO in-content del lead (texto blanco sobre gradiente) */
.s-hero__lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1875rem; /* 3px */
}
.s-hero__disclaimer {
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-top: 0.875rem;
}
.s-hero__disclaimer--mobile { display: none; }
.s-hero__media {
  position: relative;
  min-height: 17.5rem;
  pointer-events: none;
}
.s-hero__person,
.s-hero__circle-person,
.s-hero__ai { display: block; }
.s-hero__person,
.s-hero__circle-person { width: 100%; height: auto; }
.s-hero__visual {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .s-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
  .s-hero__copy {
    align-self: center;
    margin-top: 0;
    max-width: 45rem;
  }
  .s-hero__title { font-size: 3rem; letter-spacing: -0.03rem; max-width: 45rem; }
  .s-hero__title small { font-size: 2rem; letter-spacing: -0.02rem; line-height: 1.05; margin-bottom: 1.25rem; }
  .s-hero__lead { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -0.0131rem; margin: 1.75rem 0 1.875rem; }
  .s-hero .btn { min-height: 3rem; padding: 0.5rem 2rem; font-size: 1.25rem; }
  .s-hero__disclaimer { font-size: 1rem; letter-spacing: -0.01rem; margin-top: 1.375rem; }
  .s-hero__media {
    display: block;
    width: min(100%, 41.25rem);
    min-height: 0;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .s-hero { min-height: 46.4375rem; }
  .s-hero .container {
    max-width: none;
    padding-left: clamp(3rem, 6vw, 10.125rem);
    padding-right: clamp(3rem, 6vw, 10.125rem);
  }
  .s-hero__inner {
    grid-template-columns: minmax(26.875rem, 41.9375rem) minmax(26.25rem, 50.9375rem);
    column-gap: clamp(1.75rem, 3vw, 4.5rem);
    justify-content: space-between;
    align-items: start;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 46.4375rem;
  }
  .s-hero__copy {
    align-self: center;
    margin-top: 0;
    max-width: 41.9375rem;
  }
  .s-hero__title {
    font-size: clamp(3rem, 5vw, 4.0625rem);
    line-height: 1.077;
    letter-spacing: -0.01em;
    max-width: 41.9375rem;
  }
  .s-hero__title small { font-size: 2.5rem; letter-spacing: -0.025rem; line-height: 1; margin-bottom: 1.5rem; }
  .s-hero__lead { font-size: clamp(1.3125rem, 2vw, 1.5rem); line-height: normal; letter-spacing: 0; margin: 1.875rem 0 1.875rem; max-width: 41.9375rem; }
  .s-hero .btn {
    width: min(100%, clamp(17.5rem, 28vw, 22.4375rem));
    min-height: 3.125rem;
    padding: 0.5rem 2rem;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1;
  }
  .s-hero__media {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    align-self: end;
    justify-self: end;
    width: 100%;
    max-width: 50.9375rem;
    height: auto;
    min-height: 0;
    margin-top: 0;
    transform: none;
  }
  .s-hero__visual {
    width: 100%;
    height: auto;
  }
  .s-hero__person {
    position: absolute;
    right: 0.9375rem;
    top: 0.375rem;
    width: 36.25rem;
    height: 41.5rem;
    object-fit: cover;
    object-position: center;
  }
  .s-hero__circle-person {
    position: absolute;
    left: 21.25rem;
    top: 15.1875rem;
    width: 9.4375rem;
    height: 9.4375rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 50%;
    background: #70bf54;
    box-shadow: 0 0 0 0.25rem #70bf54;
  }
  .s-hero__ai {
    position: absolute;
    right: 0.9375rem;
    top: 24.875rem;
    width: 12.5rem;
    height: 12.5rem;
    filter: drop-shadow(0 0 0.625rem rgba(0, 0, 0, 0.65));
  }
}
@media (min-width: 1200px) {
  .s-hero__title { font-size: 4.0625rem; }
}
@media (min-width: 1440px) {
  .s-hero__title {
    display: flex;
    align-items: center;
    min-height: 11.875rem;
  }
}
@media (min-width: 1024px) {
  /* Hero web 2026 — ajuste a Figma node 3001:11760 (canvas 1920px) */
  .s-hero { min-height: 43.75rem; }
  .s-hero__inner {
    grid-template-columns: minmax(0, 49rem) minmax(0, 49.4375rem);
    align-items: center;
    min-height: 43.75rem;
  }
  .s-hero__copy { max-width: 49rem; }
  /* H1 SEO sobre el titular (eyebrow). Visible pero secundario al titular grande. */
  .s-hero__eyebrow { font-size: 1.25rem; margin-bottom: 1rem; }
  .s-hero__title {
    /* Copy definitivo: el titular ahora es un párrafo largo — Figma lo baja a 36px */
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    min-height: 0;
    max-width: 49.0625rem;
    display: block;
    margin-bottom: 2.5rem;   /* Figma: ~40px entre titular y botón */
  }
  .s-hero__lead {
    font-size: 1.5rem;
    line-height: normal;
    max-width: 45.25rem;
    margin: 1.875rem 0;
  }
  .s-hero .btn {
    width: 28.875rem;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.5rem 2rem;
    font-size: 1.25rem;
    line-height: 1;
    border: 0.125rem solid #fff;
    border-radius: 5rem;
  }
  .s-hero__disclaimer { font-size: 1rem; opacity: 1; margin-top: 1.5rem; }
  /* Media pegado al borde inferior y derecho (Figma: visual bottom = section bottom) */
  .s-hero__media {
    max-width: 49.4375rem;
    align-self: end;
    justify-self: end;
  }
  .s-hero__visual { display: block; margin-bottom: -0.0625rem; }
  /* Marca de agua: isotipo PsicoAlianza (Figma 3001:11765) */
  .s-hero::before {
    background-image: url('../img/hero/iso-bg.svg');
    background-repeat: no-repeat;
    background-position: right -1.25rem top -7.5rem;
    background-size: auto 56rem;
  }
}

/* (Removido el override 1024–1199px de .s-hero__inner: con el escalado
   proporcional el layout base de 2 columnas escala en bloque sin necesidad
   de re-balancear las columnas a media resolución.) */

/* ---- pruebas-specific media: chips + AI graphic ---- */
.s-hero__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.s-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  background: #fff;
  color: var(--c-text);
  border: 0.0625rem solid var(--c-border);
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: var(--shadow-card);
}
.s-hero__chip img { width: 1.5rem; height: 1.5rem; }
@media (max-width: 1023px) {
  .s-hero__ai {
    width: 100%;
    max-width: 30rem;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .s-hero__chips {
    position: absolute;
    left: 0.9375rem;
    top: 4.9375rem;
    display: block;
    width: 35rem;
    height: 32.5rem;
    margin: 0;
    z-index: 2;
  }
  .s-hero__chips::before {
    content: "";
    position: absolute;
    left: -0.9375rem;
    top: -4.9375rem;
    width: 50.9375rem;
    height: 42.25rem;
    background: url('../img/hero/hero-blob.svg') center/contain no-repeat;
    opacity: 1;
    z-index: -1;
  }
  .s-hero__chip {
    position: absolute;
    min-height: 4.1875rem;
    padding: 0 1.375rem;
    border: 0;
    border-radius: 2.8125rem;
    box-shadow: none;
    color: #fff;
    font-size: 1.625rem;
    line-height: 1.5625rem;
    font-weight: 900;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }
  .s-hero__chip:nth-child(1) {
    top: 0;
    left: 9.125rem;
    width: 18.5rem;
    height: 5.125rem;
    background: url('../img/hero/chip-personalidad-bg.png') center/100% 100% no-repeat;
  }
  .s-hero__chip:nth-child(2) {
    top: 8.25rem;
    left: 1.5625rem;
    width: 18.75rem;
    height: 5.125rem;
    background: url('../img/hero/chip-valores-bg.png') center/100% 100% no-repeat;
  }
  .s-hero__chip:nth-child(3) {
    top: 16.5rem;
    left: 2.6875rem;
    width: 17.4375rem;
    height: 4.1875rem;
    background: url('../img/hero/chip-inteligencia-bg.png') center/100% 100% no-repeat;
  }
  .s-hero__chip:nth-child(4) {
    top: 23.75rem;
    left: 9.125rem;
    width: 25.5rem;
    height: 5.125rem;
    background: linear-gradient(270deg, #283c80 0%, #61308c 100%);
  }
  .s-hero__chip img {
    position: absolute;
    left: -1.6875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.3125rem;
    height: 3.3125rem;
  }
}

/* ============================================================
   SECTION: VIDEO (Figma node 3001:11792 — port de landing_ats)
   ============================================================ */
.s-video {
  background: var(--c-bg) url('../img/video/video-bg.svg') center/cover no-repeat;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.s-video__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.s-video__player {
  position: relative;
  border-radius: 0.9375rem;
  overflow: hidden;
  aspect-ratio: 1029 / 578;
  background: var(--c-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.s-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-video__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.s-video__play::before {
  content: "";
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 0.125rem solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease;
}
.s-video__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 1.375rem solid #fff;
  border-top: 0.875rem solid transparent;
  border-bottom: 0.875rem solid transparent;
  margin-left: 0.375rem;
}
.s-video__player:hover .s-video__play::before,
.s-video__player:focus-visible .s-video__play::before {
  background: rgba(255, 255, 255, 0.3);
}
.s-video__title {
  color: var(--c-primary);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.s-video__title strong { color: var(--c-primary); font-weight: 900; }
.s-video__rule {
  width: 8.5rem;
  height: 0.3125rem;
  background: var(--c-primary);
  margin: 0 0 1.5rem;
}
.s-video__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45rem;
  height: 0.625rem;
  border-radius: 0 6.25rem 6.25rem 0;
  background: linear-gradient(270deg, #A92345 1.46%, #8C2753 13.44%, #612C68 34.14%, #472F75 49.39%, #3D307A 59.19%, #343E84 68.99%, #1D619E 89.69%, #008EBF 110.38%);
}
@media (max-width: 767px) {
  /* Orden mobile (Figma): texto → video → botón. */
  .s-video__inner { display: flex; flex-direction: column; gap: 0; }
  .s-video__copy { display: contents; }
  /* Centrado (Figma 3044:8029): el bloque del título ocupa casi todo el ancho,
     así que sin text-align el texto se ve pegado a la izquierda. */
  .s-video__title { order: 1; margin-bottom: 0.75rem; text-align: center; }
  .s-video__rule { order: 2; margin-bottom: 1.5rem; }
  .s-video__player { order: 3; align-self: stretch; width: 100%; margin-bottom: 1.5rem; }
  .s-video__cta { order: 4; }
}
@media (min-width: 768px) {
  .s-video { padding: 4.5rem 0; }
  .s-video__inner { gap: 2rem; }
  .s-video__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .s-video { padding: 0; min-height: 43.75rem; }
  .s-video__inner {
    grid-template-columns: minmax(0, 50.3125rem) 31.25rem;
    gap: 9.1875rem;
    justify-content: center;
    align-items: center;
    min-height: 43.75rem;
  }
  .s-video__title { font-size: 2.8125rem; line-height: 1.08; margin-bottom: 1.75rem; }
  .s-video__rule { margin-bottom: 1.875rem; }
  .s-video .btn {
    width: auto;
    min-height: 3rem;
    padding: 0.5rem 2rem;
    font-size: 1.25rem;
    line-height: 1;
    border: 0.125rem solid #fff;
    border-radius: 5rem;
  }
}

/* ============================================================
   SECTION: STATS — impacto de malas decisiones (Figma 3028:3245)
   ============================================================ */
.s-stats {
  background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
/* Marca de agua: isotipo PsicoAlianza detrás de texto e imagen (Figma 3028:3146) */
.s-stats::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../img/stats/marca-agua.svg') no-repeat left top;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
}
.s-stats__inner { position: relative; z-index: 1; }
.s-stats__title {
  color: var(--c-primary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  max-width: 62rem;
  margin: 0 auto 2.5rem;
}
.s-stats__grid { display: grid; gap: 2rem; align-items: center; }
.s-stats__list { list-style: none; margin: 0; padding: 0; }
.s-stats__item {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 0;
  border-top: 0.0625rem solid #e2e2e2;
}
.s-stats__list .s-stats__item:last-child { border-bottom: 0.0625rem solid #e2e2e2; }
.s-stats__num { font-weight: 900; font-size: 3rem; line-height: 1; }
.s-stats__pre { display: block; font-size: 1.125rem; font-weight: 900; line-height: 1.1; }
.s-stats__desc { font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin: 0; }
.s-stats__cite { font-style: italic; font-size: 0.875rem; line-height: 1.3; color: var(--c-text); opacity: 0.5; margin: 0; }
.s-stats__item--1 .s-stats__num, .s-stats__item--1 .s-stats__desc { color: var(--c-primary-300); }
.s-stats__item--2 .s-stats__num, .s-stats__item--2 .s-stats__desc { color: var(--c-primary); }
.s-stats__item--3 .s-stats__num, .s-stats__item--3 .s-stats__desc { color: var(--c-purple); }
.s-stats__media img { display: block; width: 100%; max-width: 36.75rem; height: auto; margin: 0 auto; }
.s-stats__foot { margin-top: 2rem; display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.s-stats__note { font-size: 1.125rem; line-height: 1.35; margin: 0; color: var(--c-text); }
.s-stats__note strong { font-weight: 900; }
@media (min-width: 768px) {
  .s-stats__title { font-size: 2.25rem; }
  .s-stats__note { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .s-stats { padding: 0; min-height: 45.5625rem; display: flex; align-items: center; }
  .s-stats__inner { width: 100%; }
  .s-stats__grid {
    grid-template-columns: minmax(0, 49.1875rem) minmax(0, 36.75rem);
    justify-content: space-between;
    gap: 3rem;
  }
  .s-stats__item {
    grid-template-columns: 8.8125rem 16.0625rem 14.125rem;
    justify-content: start;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.25rem;
    padding: 0.9375rem 0;
  }
  .s-stats__num { font-size: 4.375rem; }
  .s-stats__pre { font-size: 1.25rem; }
  .s-stats__desc { font-size: 1.25rem; }
  .s-stats__cite { font-size: 1rem; }
  .s-stats__foot {
    grid-template-columns: minmax(0, 49.1875rem) minmax(0, 36.75rem);
    justify-content: space-between;
    gap: 3rem;
    align-items: center;
    margin-top: 1.5rem;
  }
  .s-stats .btn { font-size: 1.25rem; min-height: 3rem; padding: 0.5rem 2rem; border-radius: 5rem; }
}
/* Mobile/tablet: número a la izquierda, descripción + cita a la derecha (Figma mobile 3078:5221) */
@media (max-width: 1023px) {
  .s-stats__item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
  }
  .s-stats__num { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .s-stats__desc { grid-column: 2; grid-row: 1; align-self: end; }
  .s-stats__cite { grid-column: 2; grid-row: 2; align-self: start; }
}
/* Mobile: pie de la sección como el Figma 3078:5221 — nota un paso más chica y
   CTA en píldora delgada ajustada al texto, no el botón alto del desktop. */
@media (max-width: 767px) {
  .s-stats__note { font-size: 1rem; }
  .s-stats__cta { padding: 0.4375rem 1.25rem; font-size: 0.8125rem; }
}

/* ============================================================
   SECTION: CATEGORÍAS — soluciones (Figma 3028:3246)
   ============================================================ */
.s-categorias {
  background: var(--c-bg-soft);
  padding: 3.5rem 0;
}
.s-categorias__title {
  color: var(--c-primary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto 2.5rem;
}
.s-categorias__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-categorias__card { margin: 0 0 2rem; }
.s-categorias__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.s-categorias__media {
  display: block;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease;
}
.s-categorias__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 454 / 611;
  object-fit: cover;
}
/* En desktop el body (name + desc) no se muestra: ese copy vive en el overlay
   hover, que es aria-hidden. Se oculta con clip (no display:none) para que
   lectores de pantalla y SEO conserven el h3 y la descripción. */
.s-categorias__body {
  display: block;
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.s-categorias__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.s-categorias__desc {
  display: block;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  line-height: 1.45;
}
/* Tokens de tema por solución. --cat-grad = gradiente continuo de toda la card
   (muestreado del fondo de Figma, horizontal). Es UNA sola superficie detrás
   del tab activo, la gente y el texto → sin corte. --cat-color = color del
   icono del tab inactivo. */
.s-categorias [data-theme="seleccion"] {
  --cat-grad: linear-gradient(90deg, #343D83 0%, #493374 50%, #5F2B67 100%);
  /* Dirección y stops muestreados del hover de Figma (3044:12385): azul abajo-izq
     → púrpura arriba-der, con velo blanco 20% encima (los px del Figma coinciden
     con color+velo, por eso el velo se conserva). */
  --cat-grad-hover: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    linear-gradient(36deg, #343E84 0%, #612C68 100%);
  --cat-color: #472F75;
}
.s-categorias [data-theme="vocacional"] {
  --cat-grad: linear-gradient(90deg, #2889B8 0%, #2A5D9B 50%, #29317C 100%);
  /* Figma 3044:12386: cian abajo-izq → azul arriba-der */
  --cat-grad-hover: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    linear-gradient(36deg, #008EBF 0%, #343E84 100%);
  --cat-color: #0071BC;
}
.s-categorias [data-theme="organizacional"] {
  --cat-grad: linear-gradient(90deg, #AA2345 0%, #892654 50%, #4B2E73 100%);
  /* Figma 3044:12387: rojo arriba-DER → púrpura abajo-izq (eje invertido respecto
     a las otras dos) y el extremo púrpura es #612C68, no #4B2E73 */
  --cat-grad-hover: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    linear-gradient(216deg, #AA2345 0%, #612C68 100%);
  --cat-color: #A92345;
}
/* Elementos exclusivos de la variante "tabs" (mobile): ocultos en desktop */
.s-categorias__eyebrow,
.s-categorias__tabs,
.s-categorias__name-big,
.s-categorias__rule,
.s-categorias__cta { display: none; }
/* En desktop el wrapper es transparente al layout (la grid manda) */
.s-categorias__tabbed { display: contents; }

/* ----- Estado HOVER (desktop): overlay gradiente sobre la card (Figma 3044:12385-87).
   Cubre la MISMA caja que la card completa (foto + body de abajo) para que ambos
   estados midan igual; cross-fade puro, sin desplazamientos. ----- */
.s-categorias__link { position: relative; height: 100%; }
.s-categorias__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate; /* el blend de la gente no traspasa hacia la foto de abajo */
  background: var(--cat-grad-hover);
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.s-categorias__link:hover .s-categorias__hover,
.s-categorias__link:focus-visible .s-categorias__hover { opacity: 1; }
/* Coreografía del hover: título + línea + persona arrancan abajo (donde están
   horneados en la foto) y SUBEN a su posición; name/desc/cta aparecen desde
   abajo con un pequeño delay. Al salir, todo revierte suave. */
.s-categorias__hover-people,
.s-categorias__hover-title,
.s-categorias__hover-rule {
  transition: transform .5s ease;
}
.s-categorias__hover-title,
.s-categorias__hover-rule { transform: translateY(12.5rem); }
.s-categorias__hover-people { transform: translateY(5rem); }
.s-categorias__hover-name,
.s-categorias__hover-desc,
.s-categorias__hover-cta {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .4s ease .1s, transform .4s ease .1s;
}
.s-categorias__link:hover .s-categorias__hover-people,
.s-categorias__link:hover .s-categorias__hover-title,
.s-categorias__link:hover .s-categorias__hover-rule,
.s-categorias__link:focus-visible .s-categorias__hover-people,
.s-categorias__link:focus-visible .s-categorias__hover-title,
.s-categorias__link:focus-visible .s-categorias__hover-rule {
  transform: translateY(0); /* la persona conserva su opacity de capa (.5/.65) */
}
.s-categorias__link:hover .s-categorias__hover-name,
.s-categorias__link:hover .s-categorias__hover-desc,
.s-categorias__link:hover .s-categorias__hover-cta,
.s-categorias__link:focus-visible .s-categorias__hover-name,
.s-categorias__link:focus-visible .s-categorias__hover-desc,
.s-categorias__link:focus-visible .s-categorias__hover-cta {
  opacity: 1;
  transform: translateY(0);
}
/* Persona difuminada arriba: recorte con blend luminosity, se funde en el gradiente.
   Figma (3044:12385-87): la foto va a ANCHO COMPLETO de la card, anclada arriba,
   bien visible, y se desvanece llegando al título (~y 14rem). */
.s-categorias__hover-people {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20rem;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  mix-blend-mode: luminosity;
  opacity: .65;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
}
.s-categorias__card[data-theme="vocacional"] .s-categorias__hover-people {
  background-image: url('../img/categorias/people-vocacional.webp');
}
.s-categorias__card[data-theme="seleccion"] .s-categorias__hover-people {
  background-image: url('../img/categorias/people-seleccion.webp');
}
.s-categorias__card[data-theme="organizacional"] .s-categorias__hover-people {
  background-image: url('../img/categorias/people-organizacional.webp');
  opacity: .75;
}
.s-categorias__hover-title {
  position: relative;
  margin-top: 14.5rem;
  font-style: italic;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}
.s-categorias__hover-rule {
  position: relative;
  width: 83%;
  height: 0.125rem;
  margin-top: 1.75rem;
  background: #fff;
}
/* name/desc/cta con margin-top auto: el alto sobrante (la card completa es más
   alta que la foto) se reparte en partes iguales entre los tres bloques */
.s-categorias__hover-name {
  position: relative;
  max-width: 95%;
  margin-top: auto;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
}
.s-categorias__hover-name strong { font-weight: 900; }
.s-categorias__hover-desc {
  position: relative;
  max-width: 85%;
  margin-top: auto;
  font-size: 1.25rem;
  line-height: 1.35;
}
.s-categorias__hover-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 79%;
  min-height: 3.5rem;
  margin: auto 0 2.75rem;
  border: 0.15rem solid #fff;
  border-radius: 5rem;
  font-weight: 700;
  font-size: 1.3125rem;
  text-transform: uppercase;
}
/* Flecha inline (SVG con currentColor): no depende de mask CSS ni de cargar
   un asset aparte — máxima compatibilidad y portabilidad al copiar el bloque */
.s-categorias__hover-arrow {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

/* ----- Variante TABS (mobile / tablet < 1024px) ----- */
@media (max-width: 1023px) {
  /* Encabezado: eyebrow visible, el H2 largo queda accesible pero oculto */
  .s-categorias__eyebrow {
    display: block;
    margin: 0 0 1.5rem;
    color: #0071BC;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.2;
    text-align: center;
  }
  .s-categorias__title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }

  /* Contenedor con el gradiente del tema: el tab activo y su panel son
     transparentes y comparten este mismo fondo → continuo, sin división. */
  .s-categorias__tabbed {
    display: block;
    max-width: 26rem;
    margin: 0 auto;
    background: var(--cat-grad);
    border-radius: 0.75rem;
    overflow: hidden;
  }
  /* Barra de tabs */
  .s-categorias__tabs {
    display: flex;
  }
  /* Los 3 tabs con el MISMO tamaño: min-width:0 evita que el label largo
     ("Organizacional") ensanche su tab por min-content. */
  .s-categorias__tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 6.75rem;
    padding: 0.75rem 0.125rem;
    background: #ededed;
    border: 0;
    cursor: pointer;
    font: inherit;
  }
  .s-categorias__tab:not(:first-child):not(.is-active) {
    box-shadow: inset 1px 0 0 rgba(10, 10, 33, 0.06);
  }
  /* Icono del tab (isologo). mask-image explícito por modificador para máxima
     compatibilidad (Safari no resuelve var() dentro del shorthand mask). */
  .s-categorias__tab-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background-color: var(--cat-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .s-categorias__tab-icon--seleccion {
    -webkit-mask-image: url('../img/categorias/icon-seleccion.svg');
    mask-image: url('../img/categorias/icon-seleccion.svg');
  }
  .s-categorias__tab-icon--vocacional {
    -webkit-mask-image: url('../img/categorias/icon-vocacional.svg');
    mask-image: url('../img/categorias/icon-vocacional.svg');
  }
  .s-categorias__tab-icon--organizacional {
    -webkit-mask-image: url('../img/categorias/icon-organizacional.svg');
    mask-image: url('../img/categorias/icon-organizacional.svg');
  }
  .s-categorias__tab-label {
    font-weight: 900;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: #0a0a21;
    opacity: 0.5;
  }
  /* Tab activo transparente: muestra el gradiente del wrapper, el mismo que hay
     detrás de la gente y el texto → tab y contenido son una sola superficie. */
  .s-categorias__tab.is-active {
    background: transparent;
    box-shadow: none;
  }
  .s-categorias__tab.is-active .s-categorias__tab-icon { background-color: #fff; }
  .s-categorias__tab.is-active .s-categorias__tab-label { color: #fff; opacity: 1; }

  /* Panel activo (transparente: muestra el gradiente del wrapper) */
  .s-categorias__card {
    margin: 0;
    display: none;
  }
  .s-categorias__card.is-active { display: block; }
  .s-categorias__link {
    position: relative;
    isolation: isolate; /* ancla el z-index:-1 de la marca de agua a la card */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 2.5rem;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
    transition: none;
  }
  .s-categorias__link:hover { transform: none; }
  /* El overlay hover es exclusivo de desktop */
  .s-categorias__hover { display: none; }
  /* Marca de agua: isologo de cada solución, gigante y translúcido, detrás de
     la persona (Figma 3078:4698 / 3140:4199 / 3140:4200). La opacidad viene
     horneada en el SVG; z-index -1 la deja sobre el gradiente del wrapper pero
     debajo de la foto y los textos. Fade inferior como en Figma. */
  .s-categorias__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 46%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 46%);
  }
  .s-categorias__card[data-theme="vocacional"] .s-categorias__link::before {
    background-image: url('../img/categorias/wm-vocacional.svg');
    background-size: 81.5% auto;
    background-position: center top;
  }
  .s-categorias__card[data-theme="seleccion"] .s-categorias__link::before {
    background-image: url('../img/categorias/wm-seleccion.svg');
    background-size: 48.2% auto;
    background-position: center top;
  }
  .s-categorias__card[data-theme="organizacional"] .s-categorias__link::before {
    background-image: url('../img/categorias/wm-organizacional.svg');
    background-size: 73.7% auto;
    background-position: left 13% top 0.125rem;
  }
  /* La "foto" ahora es un recorte de gente TRANSPARENTE: se apoya sobre el
     gradiente del wrapper (mismo fondo continuo). Difuminado inferior para
     fundir la gente con el gradiente hacia el área de texto. */
  .s-categorias__media {
    width: 100%;
    height: 17rem;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .s-categorias__link:hover .s-categorias__media { box-shadow: none; }
  .s-categorias__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }
  /* El equipo (Organizacional) es un círculo cenital: se ve completo. */
  .s-categorias__card[data-theme="organizacional"] .s-categorias__media img {
    object-fit: contain;
    object-position: center top;
  }
  /* El título va DESPUÉS del fade de la foto, sobre gradiente limpio (como en
     Figma) — solapado con la foto se veía desvanecido/lavado. */
  .s-categorias__name-big {
    display: block;
    margin-top: 0.375rem;
    font-style: italic;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1;
    color: #fff;
  }
  .s-categorias__rule {
    display: block;
    width: calc(100% - 2.25rem);
    max-width: 23.5rem;
    height: 1px;
    margin: 2.375rem auto 2.125rem;
    background: rgba(255, 255, 255, 0.55);
  }
  /* Restaura el body clipeado del desktop: en mobile sí se muestra */
  .s-categorias__body {
    position: static;
    width: auto; height: auto;
    margin: 0; padding: 0 1.25rem;
    clip: auto; clip-path: none;
    overflow: visible; white-space: normal;
  }
  .s-categorias__name {
    color: #fff;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0 0 1.75rem;
  }
  .s-categorias__name strong { font-weight: 900; }
  .s-categorias__desc {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.35;
  }
  .s-categorias__cta {
    display: block;
    margin: 1.875rem 1.25rem 0;
    padding: 0.5rem 1.5rem;
    border: 2px solid #fff;
    border-radius: 5rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
  }
}
/* Mobile: la card tabulada va de borde a borde y cierra la sección abajo,
   sin franjas del fondo gris alrededor (Figma 3078:4746, gradiente full-bleed
   con solo las esquinas superiores redondeadas). */
@media (max-width: 767px) {
  .s-categorias { padding-bottom: 0; }
  .s-categorias__tabbed {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0.75rem 0.75rem 0 0;
  }
}
/* Slick dots (carrusel mobile <1024): tema claro, oculta los números crudos */
.s-categorias .slick-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 0.625rem; list-style: none; padding: 0; margin: 0.25rem 0 0;
}
.s-categorias .slick-dots li { width: auto; height: auto; margin: 0; }
.s-categorias .slick-dots button {
  width: 0.75rem; height: 0.75rem; padding: 0;
  border-radius: 50%; border: 0.125rem solid var(--c-border);
  background: transparent; color: transparent; font-size: 0; line-height: 0; cursor: pointer;
}
.s-categorias .slick-dots button::before { content: none; }
.s-categorias .slick-dots .slick-active button { background: var(--c-primary); border-color: var(--c-primary); }
@media (min-width: 768px) {
  .s-categorias__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .s-categorias { padding: 4.5rem 0; }
  .s-categorias .container { width: 100%; }
  .s-categorias__title { font-size: 2.25rem; margin-bottom: 3rem; }
  .s-categorias__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.5rem;
  }
  .s-categorias__card { margin: 0; }
}

/* ============================================================
   SECTION: PLATAFORMA — ecosistema 6 tabs (Figma 3003:5848 / variantes 3003:5849)
   Image-swap: el shot trae el layout; hotspots transparentes sobre los tabs.
   ============================================================ */
.s-plataforma {
  background: #fff;
  padding: 3.5rem 0;
}
/* Iconos de tabs/paneles: SVG del Figma (ico-*.svg) pintados vía mask para
   poder recolorearlos (azul inactivo / blanco en tab activo) sin duplicar assets. */
.s-plataforma__tab-ico--eco,    .plat-panel__icon--eco    { --plat-ico: url('../img/plataforma/ico-ecosistema.svg'); }
.s-plataforma__tab-ico--auto,   .plat-panel__icon--auto   { --plat-ico: url('../img/plataforma/ico-automatizacion.svg'); }
.s-plataforma__tab-ico--ia,     .plat-panel__icon--ia     { --plat-ico: url('../img/plataforma/ico-ia.svg'); }
.s-plataforma__tab-ico--vision, .plat-panel__icon--vision { --plat-ico: url('../img/plataforma/ico-vision.svg'); }
.s-plataforma__tab-ico--form,   .plat-panel__icon--form   { --plat-ico: url('../img/plataforma/ico-formacion.svg'); }
.s-plataforma__tab-ico--rep,    .plat-panel__icon--rep    { --plat-ico: url('../img/plataforma/ico-reportes.svg'); }
.s-plataforma__title {
  color: var(--c-primary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto 1.5rem;
}
.s-plataforma__stage { width: 100%; }

/* --- Nav de tabs (mobile: fila scrollable) --- */
.s-plataforma__tabs {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.s-plataforma__tabs::-webkit-scrollbar { display: none; }
.s-plataforma__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.625rem 1rem;
  background: #fff;
  border: 0.0625rem solid var(--c-border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
  color: var(--c-text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.s-plataforma__tab-ico {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  background-color: var(--c-primary);
  -webkit-mask: var(--plat-ico) no-repeat center / contain;
  mask: var(--plat-ico) no-repeat center / contain;
  transition: background-color .18s ease;
}
.s-plataforma__tab.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.s-plataforma__tab.is-active .s-plataforma__tab-ico { background-color: #fff; }
.s-plataforma__tab:focus-visible { outline: 0.1875rem solid var(--c-primary-300); outline-offset: 0.125rem; }

/* --- Paneles --- */
.s-plataforma__panels { position: relative; }
.plat-panel { display: none; }
.plat-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.plat-panel__body {
  background: #fff;
  border: 0.0625rem solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.5rem;
}
.plat-panel__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.875rem;
  background-color: var(--c-primary);
  -webkit-mask: var(--plat-ico) no-repeat center / contain;
  mask: var(--plat-ico) no-repeat center / contain;
}
.plat-panel__title {
  color: var(--c-text);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.plat-panel__lead { font-weight: 700; color: var(--c-text); margin: 0 0 0.75rem; line-height: 1.45; }
/* Párrafo plano de card (Figma 3003-5992, card Automatización): mismo cuerpo que
   los bullets pero sin check ni sangría */
.plat-panel__text { margin: 0 0 1rem; line-height: 1.5; color: var(--c-text); font-size: 1rem; }
.plat-panel__text:last-child { margin-bottom: 0; }
.plat-panel__lead--mixed { font-weight: 400; } /* solo el <strong> en negrita (Figma tab 4) */
.plat-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.plat-panel__list li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.5;
  color: var(--c-text);
  font-size: 1rem;
}
.plat-panel__list li strong { color: var(--c-text); }
.plat-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.4rem;
  height: 1.4rem;
  background: url("../img/plataforma/bullet-check.svg") center / contain no-repeat;
}
.plat-panel__list--compact { gap: 0.65rem; }
.plat-panel__list--compact li { font-weight: 400; color: var(--c-text); }
.plat-panel__foot { margin: 1rem 0 0; line-height: 1.5; color: var(--c-text); font-size: 1rem; }
.plat-panel__foot-accent { color: var(--c-primary); font-weight: 700; }
.plat-panel__shot { min-width: 0; }
.plat-panel__shot img { width: 100%; height: auto; border-radius: var(--radius-card); }

.s-plataforma__cta { display: flex; width: fit-content; margin: 1.75rem auto 0; }

/* Las flechas ‹ › solo existen en el layout mobile (bloque de abajo). */
.s-plataforma__arrow { display: none; }

/* --- Mobile (Figma 3044:8404): sin pills — una sola card blanca con flechas
   ‹ › a los lados del ícono, contenido centrado, imagen a ras del borde
   inferior de la card y CTA a todo el ancho debajo. --- */
@media (max-width: 767px) {
  .s-plataforma { padding: 2.1875rem 0 0.625rem; }        /* Figma 35 / 10 */
  .s-plataforma__title {
    font-size: 1.25rem;                                    /* Figma 20px Lato Black */
    font-weight: 900;
    letter-spacing: -0.0125rem;
    margin-bottom: 1.875rem;                               /* Figma gap 30 */
  }
  .s-plataforma__tabs { display: none; }
  .plat-panel.is-active {
    gap: 0;
    background: #fff;
    border-radius: 1.375rem;                               /* Figma 22px */
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, .3);
    overflow: hidden;                                      /* recorta la imagen en las esquinas */
  }
  .plat-panel__body {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* 42px laterales: deja la lista en los ~258px del Figma y despeja las flechas */
    padding: 1.875rem 2.625rem 0.625rem;
    text-align: center;
  }
  .plat-panel__icon {
    width: 3.9375rem;                                      /* Figma 63px */
    height: 3.9375rem;
    margin: 0 auto 0.625rem;
  }
  .plat-panel__title {
    font-size: 1.125rem;                                   /* Figma 18px */
    margin-bottom: 1.25rem;
  }
  .plat-panel__list { gap: 0.625rem; text-align: left; }
  .plat-panel__list li {
    font-size: 0.75rem;                                    /* Figma 12px */
    padding-left: 1.9375rem;                               /* check 20px + gap 11px */
  }
  .plat-panel__list li::before { width: 1.25rem; height: 1.25rem; }
  .plat-panel__lead, .plat-panel__text, .plat-panel__foot { font-size: 0.75rem; text-align: left; }
  .plat-panel__shot { margin-top: 0.625rem; }
  .plat-panel__shot img { display: block; border-radius: 0; }
  /* Flechas: aro azul + chevron (mismos SVG que testimonios, trazo horneado) */
  .s-plataforma__arrow {
    display: block;
    position: absolute;
    top: 3.5625rem;                                        /* Figma 57px, a la altura del ícono */
    width: 2rem;                                           /* Figma 31.8px */
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url('../img/carrusel/button.svg') center / contain no-repeat;
    cursor: pointer;
    z-index: 2;
  }
  .s-plataforma__arrow::before {
    content: "";
    position: absolute;
    left: 37.2%; top: 24.4%;                               /* proporciones del botón 78px */
    width: 25.6%; height: 51.3%;
    background: url('../img/carrusel/arrow-left.svg') center / contain no-repeat;
  }
  .s-plataforma__arrow--prev { left: 0.9375rem; }
  .s-plataforma__arrow--prev::before { transform: rotate(180deg); }
  .s-plataforma__arrow--next { right: 0.9375rem; }
  /* CTA único a todo el ancho (Figma); el secundario no existe en el diseño mobile */
  .s-plataforma__foot { margin-top: 1.25rem; }
  .s-plataforma__cta {
    width: 100%;
    margin-top: 0;
    font-size: 1rem;                                       /* Figma 16px */
    padding: 0.5rem 1.5rem;                                /* Figma 8/24 */
  }
  .s-plataforma__cta.btn--outline { display: none; }
}

@media (min-width: 768px) {
  .s-plataforma__title { font-size: 2.25rem; }
  .plat-panel__title { font-size: 1.625rem; }
  .plat-panel__list li, .plat-panel__foot, .plat-panel__text { font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
  .s-plataforma { padding: 4rem 0; }
  .s-plataforma .container { width: 100%; max-width: var(--container); }
  .s-plataforma__title { font-size: 2.5rem; margin-bottom: 2.5rem; } /* Figma 40px */
  .s-plataforma__stage {
    display: grid;
    /* Figma: lista 366px | gap 119px | card 1111px. La lista se ensancha a 390px
       (y el gap cede 24px) para que "Visión completa del candidato" en Lato Black
       20px (~275px) no quede debajo de la barra de acento del tab activo. */
    grid-template-columns: 24.375rem minmax(0, 1fr);
    gap: 5.9375rem;
    align-items: center;
  }
  /* Línea divisoria vertical + chevron entre la lista y la card (Figma) */
  .s-plataforma__panels::before {
    content: "";
    position: absolute;
    left: -3.875rem;                  /* Figma: línea a 62px del borde de la card */
    top: 0;
    bottom: 0;
    width: 1px;                        /* hairline, se queda en px */
    background: var(--c-border);
  }
  .s-plataforma__panels::after {
    content: "";
    position: absolute;
    left: -4.75rem;                    /* chevron centrado sobre la línea */
    top: 0.9375rem;                    /* Figma: 15px bajo el borde superior */
    width: 1.75rem;
    height: 2.6875rem;
    background: url('../img/plataforma/chevron-lista.svg') no-repeat center / contain;
  }
  /* Nav vertical en desktop */
  .s-plataforma__tabs {
    flex-direction: column;
    gap: 0.875rem;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .s-plataforma__tab {
    width: 100%;
    justify-content: flex-start;
    gap: 1.625rem;                     /* Figma 26px icono-label */
    min-height: 3.9375rem;             /* Figma 63px */
    padding: 0.625rem 1.0625rem;
    border: 0;
    border-radius: 0.625rem;           /* Figma 10px */
    /* Sombra azulada del Figma (0 0 8 rgba(0,113,188,.25)) */
    box-shadow: 0 0 0.5rem rgba(0, 113, 188, .25);
    font-size: 1.25rem;                /* Figma 20px */
    font-weight: 400;                  /* label regular; el activo pasa a Black */
    position: relative;
  }
  .s-plataforma__tab.is-active { font-weight: 900; }
  /* Barra de acento celeste en el borde derecho del tab activo (Figma) */
  .s-plataforma__tab.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    background: var(--c-primary-300);
    border-radius: 0 0.625rem 0.625rem 0;
  }
  .s-plataforma__tab-ico { width: 2.6665rem; height: 2.6665rem; }  /* Figma 42.66px */
  /* La card es el panel: [texto | imagen] adentro, esquinas e imagen recortadas */
  .plat-panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 0;
    border-radius: 1.375rem;        /* 22px */
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, .25);  /* Figma card */
    overflow: hidden;
  }
  .plat-panel__body {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* texto centrado vertical */
  }
  .plat-panel__icon { width: 4.3125rem; height: 4.3125rem; margin-bottom: 1.875rem; }  /* Figma 69px */
  .plat-panel__title { font-size: 1.375rem; margin-bottom: 1rem; } /* Figma 22px */
  .plat-panel__list li, .plat-panel__foot, .plat-panel__text { font-size: 1rem; }  /* Figma 16px */
  .plat-panel__shot {
    margin: 0;
    min-width: 0;
    display: flex;
  }
  .plat-panel__shot img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
  }
  /* Footer: línea gris a la izquierda + botón a la derecha, alineado con la card */
  .s-plataforma__foot {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
    margin-left: calc(22rem + 2.5rem); /* ancho de la columna de tabs + gap del stage */
  }
  .s-plataforma__foot::before {
    content: "";
    flex: 1 1 auto;
    height: 0.0625rem;
    background: var(--c-border);
  }
  .s-plataforma__cta {
    margin: 0;
    font-size: 1.25rem;
    min-height: 3rem;
    padding: 0.5rem 2rem;
    border-radius: 5rem;
  }
}

/* ============================================================
   SECTION: CTA BANNER — Empieza a tomar decisiones (Figma 3028:3247)
   ============================================================ */
.s-cta-banner {
  background: var(--c-blue-deep);
  color: #fff;
  padding: 3rem 0;
}
.s-cta-banner__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.s-cta-banner__media { text-align: center; }
.s-cta-banner__media img { display: inline-block; width: 100%; max-width: 29rem; height: auto; }
.s-cta-banner__title { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin: 0 0 1rem; }
.s-cta-banner__lead { font-size: 1.125rem; line-height: 1.4; margin: 0 0 1.5rem; color: #fff; }
.s-cta-banner__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.s-cta-banner__rule { display: none; height: 0.125rem; background: #fff; width: 23rem; max-width: 100%; }
/* --- Mobile (Figma 3140:3960): todo centrado en columna — título, texto,
   imagen (entre el texto y el botón) y CTA a todo el ancho. El copy pasa a
   display:contents para poder intercalar la imagen entre sus hijos. --- */
@media (max-width: 767px) {
  .s-cta-banner { padding: 2.5rem 0; }
  /* align-items:stretch pisa el center del grid base — sin él, los hijos
     (incluido el CTA) encogen a su contenido en vez de ocupar el ancho. */
  .s-cta-banner__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; }
  .s-cta-banner__copy { display: contents; }
  .s-cta-banner__title {
    order: 1;
    font-size: 1.25rem;              /* Figma 20px */
    text-align: center;
    max-width: 18.3125rem;           /* Figma 293px */
    margin: 0 auto;
  }
  .s-cta-banner__lead {
    order: 2;
    font-size: 1rem;                 /* Figma 16px */
    text-align: center;
    max-width: 21.4375rem;           /* Figma 343px */
    margin: 0 auto;
  }
  .s-cta-banner__media { order: 3; }
  .s-cta-banner__media img { max-width: 20.625rem; }   /* Figma ~330px */
  .s-cta-banner__actions { order: 4; justify-content: center; }
  .s-cta-banner .btn {
    width: 100%;
    font-size: 1rem;                 /* Figma 16px */
    padding: 0.5rem 1.5rem;
  }
}
@media (min-width: 768px) {
  .s-cta-banner__title { font-size: 2.25rem; }
  .s-cta-banner__lead { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .s-cta-banner { padding: 0; min-height: 31.5625rem; display: flex; align-items: center; }
  .s-cta-banner .container { width: 100%; }
  .s-cta-banner__inner {
    grid-template-columns: minmax(0, 30rem) minmax(0, 44rem);
    justify-content: space-between;
    gap: 4rem;
    min-height: 31.5625rem;
  }
  .s-cta-banner__title { font-size: 2.25rem; max-width: 34rem; }
  .s-cta-banner__lead { font-size: 1.5rem; max-width: 44rem; }
  .s-cta-banner__rule { display: block; }
  .s-cta-banner .btn { font-size: 1.25rem; min-height: 3rem; padding: 0.5rem 2rem; border-radius: 5rem; white-space: nowrap; }
}

/* ============================================================
   SECTION: ETAPAS — Evaluar nunca fue tan simple (Figma 3003:9267 / variantes 3003:2692)
   Carrusel image-swap: el shot se recorta a la banda de contenido; chrome en vivo.
   ============================================================ */
.s-etapas {
  background: var(--c-bg-dark);
  color: #fff;
  padding: 3rem 0;
  overflow: hidden;
  text-align: center;
  position: relative;
}
/* Marca de agua del Figma (3003-3594): círculos blancos al ~3% pegados al borde
   inferior de la sección, del ~16% al ~85% del ancho. El asset ya trae la
   opacidad horneada en el alfa. */
.s-etapas::before {
  content: "";
  position: absolute;
  left: 15.6%;
  bottom: 0;
  width: 69.5%;
  aspect-ratio: 1334 / 542;
  background: url('../img/etapas/marca-agua-etapas.webp') no-repeat bottom center / contain;
  pointer-events: none;
}
.s-etapas > .container { position: relative; z-index: 1; }
.s-etapas__title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.etapas-carousel { position: relative; margin: 0; }
.etapa-slide { display: grid !important; gap: 1.25rem; align-items: center; text-align: left; }
.etapa-slide__copy { padding: 0 0.25rem; }
.etapa-slide__tag {
  display: inline-block;
  padding: 0.4rem 1.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.etapa-slide__title { font-size: 1.875rem; font-weight: 300; line-height: 1.08; margin: 0 0 1rem; }
.etapa-slide__desc { font-size: 1rem; line-height: 1.5; max-width: 30rem; opacity: 0.95; margin: 0; }
.etapa-slide__shot {
  display: block;
  position: relative;
  /* Ventana del visual completo (bbox unión de las 8 variantes en el canvas
     1920×900: x 611-1597, y 174-755) — antes recortaba el header de los paneles */
  aspect-ratio: 986 / 581;
  overflow: hidden;
  border-radius: 0.75rem;
}
.etapa-slide__shot img {
  display: block;
  width: 194.74%;
  max-width: none;
  height: auto;
  transform: translate(-31.82%, -19.33%);
}
/* ----- Fila stepper + CTA (Figma 3003-9226/9456): la línea de progreso conecta
   los 8 dots y se "pinta" con el degradado de marca hasta la etapa activa; los
   dots pasados/actual van rellenos en blanco y los futuros como aro hueco.
   Slick vuelca los dots en .s-etapas__dots vía appendDots (app.js). ----- */
.s-etapas__footrow {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.s-etapas__dots { flex: 1; min-width: 0; }
.s-etapas__cta { margin: 0; flex: 0 0 auto; }
.s-etapas .slick-dots {
  position: static;
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.s-etapas .slick-dots li { display: flex; align-items: center; flex: 1; width: auto; height: auto; margin: 0; }
.s-etapas .slick-dots li:first-child { flex: 0 0 auto; }
/* Segmento de línea hacia el dot anterior. Los colores por segmento componen el
   degradado completo azul→púrpura→rojo del diseño (muestreado del Figma). */
.s-etapas .slick-dots li::before {
  content: "";
  flex: 1;
  height: 0.3125rem;   /* 5px Figma */
}
.s-etapas .slick-dots li:first-child::before { content: none; }
.s-etapas .slick-dots li:nth-child(2)::before { background: linear-gradient(90deg, #0A8FBE, #1D639E); }
.s-etapas .slick-dots li:nth-child(3)::before { background: linear-gradient(90deg, #1D639E, #2C4A8C); }
.s-etapas .slick-dots li:nth-child(4)::before { background: linear-gradient(90deg, #2C4A8C, #383380); }
.s-etapas .slick-dots li:nth-child(5)::before { background: linear-gradient(90deg, #383380, #4A2E73); }
.s-etapas .slick-dots li:nth-child(6)::before { background: linear-gradient(90deg, #4A2E73, #612C68); }
.s-etapas .slick-dots li:nth-child(7)::before { background: linear-gradient(90deg, #612C68, #86294F); }
.s-etapas .slick-dots li:nth-child(8)::before { background: linear-gradient(90deg, #86294F, #AA2345); }
/* Todo lo posterior a la etapa activa: línea gris y dot hueco */
.s-etapas .slick-dots .slick-active ~ li::before { background: #535363; }
.s-etapas .slick-dots button {
  width: 1.75rem; height: 1.75rem; padding: 0;
  border-radius: 50%; border: 0;
  background: #fff;
  color: transparent; font-size: 0; line-height: 0;
  cursor: pointer;
  position: relative; z-index: 1;
}
.s-etapas .slick-dots button::before { content: none; }
.s-etapas .slick-dots .slick-active ~ li button {
  background: transparent;
  border: 0.1875rem solid #848490;
}
/* QA: mismas flechas que testimonios (button.svg + arrow-left.svg de
   assets/img/carrusel/) pero en BLANCO. Los SVG traen el trazo azul horneado,
   así que se usan como máscara sobre pseudo-elementos pintados de blanco
   (la máscara solo usa el alfa). Van en ::after (aro) y ::before (flecha)
   porque una máscara sobre el botón recortaría también a su hijo. */
.s-etapas .slick-prev, .s-etapas .slick-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3.25rem; height: 3.25rem; z-index: 2;
  border: 0; border-radius: 0; background: transparent;
  font-size: 0; line-height: 0; color: transparent; /* texto Previous/Next de slick */
  cursor: pointer;
}
.s-etapas .slick-prev { left: 0; }
.s-etapas .slick-next { right: 0; }
.s-etapas .slick-prev::after, .s-etapas .slick-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  -webkit-mask: url('../img/carrusel/button.svg') center / contain no-repeat;
  mask: url('../img/carrusel/button.svg') center / contain no-repeat;
}
/* Flecha con offsets en % (proporciones del botón de 78px de testimonios:
   left 29/78, top 19/78, 20×40 de 78) para que escale con el tamaño del aro */
.s-etapas .slick-prev::before, .s-etapas .slick-next::before {
  content: "";
  position: absolute;
  left: 37.2%; top: 24.4%;
  width: 25.6%; height: 51.3%;
  background-color: #fff;
  -webkit-mask: url('../img/carrusel/arrow-left.svg') center / contain no-repeat;
  mask: url('../img/carrusel/arrow-left.svg') center / contain no-repeat;
  opacity: 1;
}
.s-etapas .slick-prev::before { transform: rotate(180deg); }
/* --- Mobile (Figma 3044:8034): todo centrado, flecha ⌄ entre el título y la
   etapa, flechas ‹ › chicas a la altura de la píldora "Etapa N", y el stepper
   a todo el ancho abajo — en este diseño el CTA no existe. --- */
@media (max-width: 767px) {
  .s-etapas { padding: 2.5rem 0 1.875rem; }
  .s-etapas__title {
    font-size: 1.25rem;                            /* Figma 20px Lato Black */
    font-weight: 900;
    letter-spacing: -0.0125rem;
    margin-bottom: 0;
  }
  /* Flecha ⌄ (asset del Figma; el SVG apunta ↑, se voltea). Mask + fondo blanco
     para no depender del color horneado. */
  .s-etapas__title::after {
    content: "";
    display: block;
    width: 1.5625rem;                              /* Figma 24.8px */
    height: 0.8125rem;
    margin: 0.625rem auto 1.875rem;
    background-color: #fff;
    -webkit-mask: url('../img/etapas/flecha-titulo.svg') center / contain no-repeat;
    mask: url('../img/etapas/flecha-titulo.svg') center / contain no-repeat;
    transform: rotate(180deg);
  }
  .etapa-slide { text-align: center; gap: 1rem; }
  .etapa-slide__copy { padding: 0 2rem; }          /* despeja las flechas laterales */
  .etapa-slide__tag {
    padding: 0.25rem 1.75rem;                      /* píldora 25px de alto (Figma) */
    margin-bottom: 0.75rem;
  }
  .etapa-slide__title {
    font-size: 1.625rem;                           /* Figma 26px Lato Light */
    letter-spacing: -0.0163rem;
    margin-bottom: 1rem;
  }
  /* Guion blanco bajo el título (Figma) */
  .etapa-slide__title::after {
    content: "";
    display: block;
    width: 1.5625rem;
    height: 0.3125rem;
    margin: 0.625rem auto 0;
    background: #fff;
  }
  .etapa-slide__desc {
    font-size: 0.75rem;                            /* Figma 12px */
    letter-spacing: -0.0075rem;
    max-width: 17.875rem;                          /* Figma 285px */
    margin: 0 auto;
  }
  .s-etapas .slick-prev, .s-etapas .slick-next {
    width: 1.75rem;                                /* Figma 28px */
    height: 1.75rem;
    top: 2.125rem;                                 /* a la altura píldora/título */
    transform: none;
  }
  .s-etapas__cta { display: none; }                /* sin botón en el diseño mobile */
  .s-etapas__footrow { margin-top: 1.875rem; }
  .s-etapas .slick-dots button { width: 1.25rem; height: 1.25rem; }  /* Figma 19.8px */
  .s-etapas .slick-dots .slick-active ~ li button { border-width: 0.125rem; }
}
@media (min-width: 768px) {
  .s-etapas__title { font-size: 2.25rem; }
  .etapa-slide__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .s-etapas { padding: 4rem 0; }
  .s-etapas .container { width: 100%; }
  .s-etapas__title { font-size: 2.25rem; margin-bottom: 2.5rem; }
  .etapas-carousel { padding: 0 4rem; }
  .etapa-slide { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 4rem; }
  /* Pill "Etapa N" medida del Figma 3003-2692: 169×56px, SIN relleno (solo aro
     blanco de 1.5px), texto 24 bold, y 53px de aire hasta el título */
  .etapa-slide__tag {
    padding: 0.8125rem 2.5rem;
    border: 1.5px solid #fff;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 3.3125rem;
  }
  /* Título 60px light + barra blanca de 51×10 debajo (Figma) */
  .etapa-slide__title { font-size: 3.75rem; line-height: 1.35; margin: 0; }
  .etapa-slide__title::after {
    content: "";
    display: block;
    width: 3.1875rem;
    height: 0.625rem;
    background: #fff;
    margin-top: 1.9375rem;
  }
  .etapa-slide__desc { font-size: 1.5rem; line-height: 1.35; max-width: 24rem; margin-top: 3.625rem; }
  /* Flechas al tamaño de las de testimonios (78px), y ancladas al viewport en
     las MISMAS coordenadas que aquellas (8rem del borde) para que las flechas
     de ambas secciones queden alineadas verticalmente al hacer scroll. */
  .s-etapas .slick-prev, .s-etapas .slick-next { width: 4.875rem; height: 4.875rem; }
  .s-etapas .slick-prev {
    left: 50%;
    right: auto;
    transform: translate(calc(-50vw + 8rem), -50%);
  }
  .s-etapas .slick-next {
    left: auto;
    right: 50%;
    transform: translate(calc(50vw - 8rem), -50%);
  }
  .s-etapas .btn { font-size: 1.25rem; min-height: 3rem; padding: 0.5rem 2rem; border-radius: 5rem; }
}

/* ============================================================
   SECTION: TESTIMONIOS (carrusel)
   ============================================================ */
.s-testimonios {
  padding: 4rem 0 3.5rem;
  background: var(--c-bg);
}
.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__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 aplica overflow:hidden en .slick-list y recorta el avatar (top:-76px)
   y el footer (bottom:-36px). Le damos padding interno con margen negativo
   para conservar el layout pero exponer esos elementos absolutos. */
.s-testimonios .slick-list {
  padding-top: 5rem;
  padding-bottom: 3.75rem;
  margin-top: -5rem;
  margin-bottom: -3.75rem;
}
@media (min-width: 768px) {
  .testimonios-grid { grid-template-columns: 1fr; }
}
.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;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: none;
  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;
}
.s-testimonios__arrow {
  position: absolute;
  top: 50%;
  width: 4.875rem;
  height: 4.875rem;
  border-radius: 0;
  background: url('../img/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('../img/carrusel/arrow-left.svg') center / contain no-repeat;
}
.s-testimonios__arrow--prev {
  left: max(0, calc((100vw - 112.75rem) / 2));
}
.s-testimonios__arrow--prev::before {
  transform: rotate(180deg);
}
.s-testimonios__arrow--next {
  right: max(0, calc((100vw - 112.75rem) / 2));
}
.s-testimonios__arrow--next::before {
  transform: none;
}
.testimonio-card__logo--wide {
  max-width: 10.625rem;
}
.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;
}
.testimonio-card__logo-wrap--compact {
  width: 6.875rem;
}
.testimonio-card__logo--seal {
  max-width: 4.875rem;
  max-height: 4.375rem;
}
@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 sobre el borde de la card que tocan (Figma 1738:11786):
     el centro del elemento queda exactamente sobre el borde (mitad dentro, mitad fuera). */
  .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; }
  /* Flechas separadas del borde de la pantalla (prototipo: ~60px sobre el canvas
     de 1920). Se posicionan respecto al centro del stage (≈ centro del viewport)
     y se empujan al borde con vw, dejando ese margen. En rem, que por encima de
     1024px escala igual que vw. */
  .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) {
  /* Título completo en negrita (Figma mobile 1716:15899) */
  .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;
  }

  /* Foto un poco más compacta para dejar espacio a las flechas a los lados.
     Centrada sobre el borde superior de la card (el centro queda sobre el borde,
     independiente de la altura de la imagen), igual que en desktop. */
  .testimonio-card__avatar { width: 7.5rem; top: 0; transform: translate(-50%, -50%); }
  /* Imagen 2 (Camila): por la composición de su retrato queda visualmente baja;
     se sube 10px respecto al centrado. */
  .testimonio-card__avatar[src$="testimonio-2.webp"] { transform: translate(-50%, calc(-50% - 0.625rem)); }

  /* Flechas visibles, flanqueando la foto y por encima de la card */
  .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); }

  /* Cards de igual altura: el min-height común lo calcula equalizeTestimonios() en JS
     (la altura de la card del testimonio más largo). El testimonio se centra con margin auto.
     Slick aplica `.slick-initialized .slick-slide{display:block}`, así que reforzamos el flex
     con un selector más específico para poder centrar verticalmente. */
  .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;
  }
}

/* ============================================================
   SECTION: LOGOS CLIENTES (banderas + carrusel)
   Ported from landing_ats/assets/css/styles.css:640-729
   ============================================================ */
/* Fondo por variables --sec-bg / --sec-watermark que inyecta partials/logos.php
   (mismo patrón que assets/css/shared-sections.css — mantener en sync): color gris
   + motivo de círculos en multiply, como plataforma-ats. QA: el fondo se veía
   blanco y sin marca de agua identificable. */
.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; }
.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; se muestra en desktop (≥1024px) */
  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('../img/logos/boton-flecha-2.svg') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.s-logos .slick-prev { left: -0.75rem; }
.s-logos .slick-next { right: -0.75rem; }
.s-logos .slick-prev { 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. Espejo de
   assets/css/shared-sections.css — mantener ambos en sync. */
.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;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}
.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,
  .s-logos .slick-next {
    width: 2.875rem;
    height: 2.875rem;
  }
  .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;
    /* Padding lateral del diseño de escritorio, el que tenía la regla base antes de
       estrecharlo para mobile. */
    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__flags-strip { width: min(100%, 74.8125rem); }
  .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) {
  /* Título mobile (Figma mobile 1716:20201): debe ocupar 2 líneas. El texto es largo,
     así que se le da más ancho (margen horizontal negativo) y un tamaño que entre en 2. */
  .s-logos__title { font-size: 1.1875rem; line-height: 1.25; margin-left: -0.5rem; margin-right: -0.5rem; }
  /* 3 logos por vista: menos padding lateral por slide para que quepan. */
  .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;
  }
  /* Mobile (Figma): el texto "Más de 3.750 empresas…" va entre los logos y las
     banderas, así que el caption se muestra antes de la tira de banderas. */
  .s-logos__caption {
    order: -1;
  }
  /* En mobile el carrusel de clientes no lleva flechas (Figma): solo swipe/autoplay.
     Slick fija display:inline-block inline en los botones, por eso se necesita !important. */
  .s-logos .slick-prev,
  .s-logos .slick-next {
    display: none !important;
  }
}

/* ============================================================
  SECTION: MAPA LATAM
============================================================ */
.s-mapa {
  position: relative;
  padding: 4rem 0;
  background: var(--c-primary);
  color: #FFFFFF;
  overflow: hidden;
}
/* Marca de agua: motivo de líneas del Figma (export del vector 3066:3663).
   En el diseño solo asoma un filo (~1.4rem) por el borde derecho — el resto
   queda fuera del canvas; QA pedía que el fondo se leyera azul limpio. */
.s-mapa::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -27.8rem;             /* 29.2rem de ancho - ~1.4rem visibles */
  transform: translateY(-50%);
  width: 29.2rem;              /* 467px */
  height: 34rem;               /* 545px */
  z-index: 0;
  pointer-events: none;
  background: url('../img/mapa/marca-agua-borde.webp') no-repeat center / contain;
}
.s-mapa > .container { position: relative; z-index: 1; }
.s-mapa__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.s-mapa__media {
  margin: 0 auto;
  max-width: 45rem;
  width: 100%;
}
.s-mapa__media img {
  width: 100%;
  height: auto;
  display: block;
}
.s-mapa__bullets {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 0 0 1.5rem;
}
.s-mapa__bullets li {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.s-mapa__bullets img {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}
.s-mapa__bullets p {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0;
  padding-top: 0.375rem;
}
.s-mapa__close {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0;
}
.s-mapa__close strong {
  font-weight: 900;
}

@media (min-width: 1024px) {
  .s-mapa {
    min-height: 39.6875rem;
    padding: 0;
  }
  .s-mapa .container {
    max-width: min(100.5rem, 100%);
    padding: 0;
  }
  .s-mapa__inner {
    grid-template-columns: minmax(0, 52.4375rem) minmax(29.375rem, 39.125rem);
    gap: clamp(3rem, 7vw, 8.4375rem);
    align-items: center;
    /* La sección no tiene padding: el grid debe medir el alto completo para que
       el visual pueda anclarse al borde inferior (QA: quedaba flotando) */
    min-height: 39.6875rem;
  }
  .s-mapa__media {
    max-width: none;
    width: 100%;
    overflow: hidden;
    align-self: end;   /* Figma: la foto toca el borde inferior de la sección */
  }
  .s-mapa__media img { margin-bottom: -0.125rem; }
  .s-mapa__copy {
    max-width: 39.125rem;
  }
  .s-mapa__bullets { gap: 1.875rem; margin-bottom: 1.875rem; }
  .s-mapa__bullets img { width: 4.125rem; height: 4.125rem; }
  .s-mapa__bullets li { gap: 1.5rem; }
  .s-mapa__bullets p { padding-top: 0.5rem; }
  .s-mapa__bullets p,
  .s-mapa__close { font-size: 1.375rem; line-height: normal; }
}

@media (min-width: 1200px) {
  .s-mapa__bullets p,
  .s-mapa__close { font-size: 1.5rem; }
}

/* (Removido el override 1024–1599px de .s-mapa: con el escalado proporcional
   el layout base de 2 columnas escala en bloque a todo ancho desktop.) */
/* ============================================================
   SECTION: CUMPLIMIENTO
   ============================================================ */
/* QA: el Figma (3344:8253) es tema CLARO — fondo #F5F5F5, título azul y texto
   oscuro; el fondo oscuro con imagen era de una versión anterior del diseño. */
.s-cumplimiento {
  background: #F5F5F5;
  color: var(--c-text);
  padding: 4rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.s-cumplimiento::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(45.0625rem, 42vw);
  height: 0.75rem;
  border-radius: 0 6.25rem 6.25rem 0;
  background: #FFFFFF;
}
.s-cumplimiento .container { position: relative; z-index: 1; }
.s-cumplimiento .h-section { color: var(--c-primary); }
.s-cumplimiento .lead { color: var(--c-text); }
.s-cumplimiento .lead strong { color: var(--c-text); font-weight: 900; }
.s-cumplimiento .cumplimiento-list li { color: var(--c-text); }
.cumplimiento-inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.cumplimiento-list { margin-top: 1rem; padding-left: 1.5rem; }
.cumplimiento-list li {
  position: relative;
  padding: 0.625rem 0 0.625rem 2rem;
  border-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.cumplimiento-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1rem;
  height: 1rem;
  /* El SVG viene con fill blanco (del tema oscuro anterior); se pinta azul vía mask */
  background-color: var(--c-primary);
  -webkit-mask: url('../img/cumplimiento/icono-bullet-normas.svg') center / contain no-repeat;
  mask: url('../img/cumplimiento/icono-bullet-normas.svg') center / contain no-repeat;
}
.cumplimiento-list li strong { font-weight: 900; }
.cumplimiento-badges {
  /* El panel claro y sus esquinas redondeadas vienen horneados en el export */
  background: transparent;
  border-radius: 1.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cumplimiento-badges img {
  background: transparent;
  border-radius: 0;
  padding: 0;
  max-height: none;
  object-fit: contain;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .s-cumplimiento {
    min-height: auto;
    padding: 5.125rem 0 4.375rem;
  }
  .cumplimiento-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  .s-cumplimiento .h-section {
    font-size: 2.625rem;
    font-weight: 900;
    letter-spacing: -0.0262rem;
    line-height: 1.02;
    margin-bottom: 1.75rem;
  }
  .s-cumplimiento .lead {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 1.875rem;
  }
  .s-cumplimiento .lead strong { font-weight: 900; }
  .cumplimiento-list li {
    font-size: 1.25rem;
    line-height: 1.2;
    padding-left: 3.875rem;
    margin: 1.3125rem 0;
  }
  .cumplimiento-list li::before {
    top: 0.25rem;
    left: 0;
    width: 1.0625rem;
    height: 1rem;
  }
  .cumplimiento-badges {
    justify-content: center;
    align-self: center;
    padding-bottom: 0;
    width: min(49.25rem, 100%);
    aspect-ratio: 788 / 421;
  }
  .cumplimiento-badges img {
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .s-cumplimiento {
    min-height: 42.875rem;
    padding: 0;
  }
  .cumplimiento-inner {
    width: min(99.75rem, calc(100% - 4rem));
    max-width: none;
    min-height: 42.875rem;
    padding: 0;
    grid-template-columns: minmax(26.875rem, 39.125rem) minmax(22.5rem, 49.25rem);
    gap: clamp(3rem, 9.48vw, 11.375rem);
    align-items: start;
    justify-content: center;
  }
  .cumplimiento-inner > div:first-child {
    padding-top: 6.25rem;
  }
  .s-cumplimiento .h-section {
    width: 34.75rem;
    max-width: 100%;
    margin-bottom: 2.25rem;
    font-size: 2.25rem;
    line-height: 1.01;
    letter-spacing: -0.0225rem;
  }
  .s-cumplimiento .lead {
    max-width: 39.125rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.22;
  }
  .cumplimiento-list {
    margin-top: 2rem;
    padding-left: 3.8125rem;
    max-width: 35.8125rem;
  }
  .cumplimiento-list li {
    padding: 0 0 0 2.75rem;
    margin: 0 0 1.3125rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }
  .cumplimiento-list li:nth-child(2) { margin-bottom: 0.8125rem; }
  .cumplimiento-badges {
    justify-content: center;
    align-self: start;
    margin-top: 8.3125rem;
    width: 100%;
    max-width: 49.25rem;
  }
}

/* ============================================================
   SECTION: FAQ
============================================================ */
.s-faq { padding: 5rem 0; background: #fff; }
.s-faq .h-section {
  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.
   Espejo de assets/css/shared-sections.css — mantener en sync. */
.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. Espejo de assets/css/shared-sections.css — el <picture> de
   partials/faq.php sirve ese asset por debajo de 1024px en las 6 páginas con FAQ. */
.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; }
}
/* ============================================================
   SECTION: FORM
   ============================================================ */
.s-form {
  background: var(--c-primary);
  color: #fff;
  padding: 3.125rem 0 3.625rem;
}
.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 .select {
  padding: 0;
  display: flex; align-items: center;
}
.demo-form .select .flag {
  margin-left: 0.875rem;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: linear-gradient(#f8d12f 0 50%, #1f54a8 50% 75%, #c92f36 75%);
}
.demo-form .select select {
  background: transparent;
  border: none;
  padding: 0 1rem;
  flex: 1;
}
.demo-form .select select:invalid { color: #9a9a9a; }
.demo-form .select select option { color: var(--c-text); }
.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;
}
.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); }
/* El texto va al lado del checkbox (toma el ancho restante y, si hace falta, hace
   wrap dentro de su propia columna en vez de bajar a una línea bajo el checkbox). */
.demo-form .checkbox > span:not(.demo-form__error) { flex: 1 1 auto; min-width: 0; }
/* ---- 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; }

/* ---- Field wrappers + inline validation errors ---- */
.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 .checkbox { flex-wrap: wrap; }
.demo-form .checkbox.has-error .demo-form__error { flex-basis: 100%; width: 100%; }
.demo-form__field.has-error .input,
.demo-form__field.has-error .select {
  outline: 0.125rem solid #ff6b6b;
  outline-offset: 0;
}

/* ---- Phone field (Figma 739:10350): UNA sola caja blanca con bandera + caret a la
   izquierda y el número a continuación; sin texto "+57" ni cajas separadas. ---- */
.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;
}
.demo-form .select--cargo { display: block; padding: 0; }
.demo-form .select--cargo select { width: 100%; padding: 0 1rem; }

/* ---- 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;
}
/* Figma: el selector muestra solo bandera + caret (sin el código "+57"). */
.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 (error de /api/contact) ---- */
.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; }
.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; }

.form-success {
  display: none;
  margin-top: 1rem;
  text-align: center;
  padding: 0.875rem 1.125rem;
  background: rgba(21,195,154,0.18);
  border: 0.0625rem solid rgba(21,195,154,0.5);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
.form-success.is-visible { display: block; }
@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: 0.75rem; }
  .demo-form__submit,
  .demo-form__btn-next {
    min-height: 3rem;
    font-size: 1.125rem;
  }
  .demo-form__btn-back { min-height: 3rem; }
  .form-success { order: 7; }
}

/* ============================================================
   FORM — landing_pruebas overrides (real flag <img> instead of CSS span)
   ============================================================ */
.demo-form .select img.flag {
  margin-left: 0.875rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: transparent;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   SUCCESS POPUP — Solicitud enviada (Figma 739:9584)
   ============================================================ */
.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;
}
.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;
}
.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>: esta hoja lo pone en 1.55 y sin
     regla para encabezados, mientras que las otras 7 páginas heredan el 1.5 / 1.2 de
     Bootstrap — el mismo partial salía 13px más alto aquí. Espejo en
     assets/css/shared-sections.css. */
  line-height: 1.5;
}
.site-footer h3 { line-height: 1.2; }
/* Contenedor propio del footer, espejo de assets/css/shared-sections.css: el .container
   global de esta hoja baja a 1rem de padding por debajo de 768px y las otras 7 páginas
   usan 1.25rem, así que el footer sangraba distinto en la home. Longhands -inline a
   propósito: el bloque legal lleva las dos clases y los atajos le borrarían su
   margin-top/padding-top. */
.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__brand span {
  font-size: 2rem;
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: 0.625rem;
}
.site-footer__brand strong {
  font-size: 2.75rem;
  letter-spacing: 0;
  font-weight: 900;
}
.site-footer h3 {
  font-size: 1.25rem;
  letter-spacing: 0;
  color: var(--c-primary-300);
  margin-bottom: 0.75rem;
  font-weight: 900;
}
.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;
}
/* 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 (antes el color solo estaba dentro del
   bloque móvil, así que en escritorio salían blancos).
   Selectores espejo de los de assets/css/shared-sections.css — mantener ambos en sync. */
.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. Las dos clases
   hacen falta — `.site-footer ul li` es (0,1,1) y le ganaba al (0,1,0) de la clase sola. */
.site-footer .site-footer__li--section { opacity: 1; }
.site-footer ul img {
  width: 1.125rem;
  height: 1.125rem;
}
.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. */
.socials a {
  width: 2rem; height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.socials a:hover { background: transparent; }
/* 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. */
.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;
}
/* Cierre a todo el ancho, solo en escritorio (el diseño móvil termina en "Términos y
   condiciones"). Espejo de assets/css/shared-sections.css. */
.site-footer__copy { display: none; }

/* ---------- 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;
  }
}
/* 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;
  }
  /* Espejo de assets/css/shared-sections.css — mantener ambos en sync (el footer es el
     mismo partial en las 8 páginas; la home es la única que no carga esa hoja).
     Anchos medidos contra lo que pide cada columna: marca 25.0625rem = ancho natural del
     logo; pruebas 19rem (el encabezado pide 16.68); contacto 17rem (15.30); redes 22.5rem
     (encabezado 21.39, íconos 21.69). Con los 20/13/16/18rem de antes, "Pruebas
     psicométricas" y "Síguenos en nuestras redes" se partían en dos líneas. */
  .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 (51px entre secciones, 45px entre las dos pruebas) y margen negativo
     para que el primer enlace arranque a la altura de los <h3> de las columnas vecinas. */
  .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. */
  .socials { gap: 1.75rem; }
  .socials a {
    width: 2.9375rem;
    height: 2.9375rem;
    background: transparent;
  }
  .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, para que "Política de tratamiento de datos"
     quede centrada respecto a la página y no en el hueco sobrante. Solo en escritorio: en
     móvil el bloque va en columna y un flex-basis de 0 aplicaría al alto.
     Espejo de assets/css/shared-sections.css — mantener ambos en sync. */
  .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;
    /* En las 7 páginas Bootstrap el reboot le da a este <p> 1rem de margen
       inferior; el reset global de esta hoja lo dejaba en 0 y el footer del
       home quedaba 1rem más corto. Igualado para que ambos se vean igual. */
    margin-bottom: 1rem;
  }
}

/* ============================================================
   GLOBAL: WhatsApp sticky
============================================================ */
/* whatsapp-sticky.svg ya trae su propio círculo de 88x88 con el degradado
   (#16BF9C -> #1BCE97 -> #007DAE), así que el botón NO lleva background: pintarlo
   aquí dibujaba un segundo círculo detrás del ícono (doble degradado + padding).
   El SVG va a sangre completa; 5.5rem = 88px, su tamaño nativo.
   Mismos valores en assets/css/estilos.css (las otras páginas) — mantener en sync. */
.wa-sticky {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  z-index: 90;
  transition: transform .15s ease;
}
.wa-sticky:hover { transform: scale(1.05); }
.wa-sticky img, .wa-sticky svg { width: 100%; height: 100%; display: block; }
/* El ícono mobile se queda oculto fuera de su breakpoint: sin esto heredaría el
   display:block de la regla de arriba y se dibujaría encima del de escritorio. */
.wa-sticky img.wa-sticky__icon--mobile { display: none; }

@media (max-width: 767px) {
  /* Pegado al borde derecho, sin margen — el diseño mobile lo pide a ras.
     Ancho/alto en auto: el ícono mobile ya no es un círculo (ver más abajo), así
     que el contenedor se ajusta a su forma en vez de imponerle una caja fija.
     border-radius y box-shadow fuera: eran para recortar y sombrear el círculo de
     escritorio; contra un PNG con su propio recorte (ver whatsapp-sticky.php) el
     box-shadow dibujaba un rectángulo detrás de una forma que no lo es. La sombra
     equivalente va como filter:drop-shadow en el ícono, que sí se calcula sobre su
     alfa real y no sobre la caja.
     Espejo de assets/css/estilos.css — mantener en sync. */
  .wa-sticky {
    width: auto; height: auto;
    bottom: 1rem; right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .wa-sticky img.wa-sticky__icon--desktop { display: none; }
  .wa-sticky img.wa-sticky__icon--mobile {
    display: block;
    width: 5.375rem; height: auto;
    filter: drop-shadow(0 0.375rem 0.75rem rgba(0, 0, 0, 0.2));
  }
}

/* ============================================================
   RESPONSIVE GUARDRAILS — Figma mobile node 1585:14353
   ------------------------------------------------------------
   The codebase is mobile-first: rules above are the mobile
   baseline; `@media (min-width: 768px|1024px)` scale UP to
   tablet/desktop. This block adds *additive* protections at
   narrow widths and locks desktop-only chrome (e.g. nav links)
   so it never leaks into mobile.
   Do NOT modify rules above this line — fix bugs in their
   section. This block is for cross-cutting overrides only.
============================================================ */

/* ---------- Tablet + mobile (≤ 1023px) ---------- */
@media (max-width: 1023px) {
  /* Logos flags: tighter wrap so banner row never overflows */
  .s-logos__flags { flex-wrap: wrap; gap: 0.5rem; }

  /* Mapa LATAM: stack vertical, image first then bullets */
  .s-mapa__inner { grid-template-columns: 1fr; }

  /* Cumplimiento: stack copy + badges, full-width grid item */
  .cumplimiento-inner { grid-template-columns: 1fr; }

  /* El form es el wizard de 3 pasos (columna única a cualquier ancho): no
     necesita overrides aquí. Los del formulario plano anterior (.demo-form__actions,
     .demo-form__captcha-wrap y el submit full-width) se quitaron porque rompían
     la fila "Atrás | Confirmar" de .demo-form__nav. */

  /* Footer: stack columns vertically. Solo las columnas — la separación entre bloques la
     fija el bloque móvil del footer (más arriba, "Footer — versión mobile"), que anula el
     row-gap para que "Habla con nosotros" siga el ritmo de la lista de secciones. Este
     media query va después, así que un `gap` aquí le ganaba por orden y dejaba el salto
     de 2rem solo en la home. */
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile only (≤ 767px) ---------- */
@media (max-width: 767px) {
  /* Tighter container padding edge-to-edge */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Mobile Figma: secciones de logos y mapa sin marca de agua de fondo. */
  .s-logos::before,
  .s-mapa::before {
    content: none;
  }

  /* Header mobile: logo izquierda + hamburguesa derecha (Figma 3044-8764). */
  .site-header__inner {
    height: 4.375rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .site-header__logo-img { width: 9rem; }

  /* Hero: Figma mobile composition isolated from the desktop artwork.
     El fondo conserva el gradiente azul de marca (Figma 3044:7999),
     no el sólido oscuro. */
  .s-hero {
    min-height: 37.5rem;
    background: var(--g-hero);
  }
  /* Marca de agua: lazos PSA tenues que sangran abajo-derecha
     (Figma 3044:8000 "Imagen"). */
  .s-hero::before {
    content: "";
    background-image: url('../img/hero/hero-watermark.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 125% auto;
  }
  .s-hero .container {
    padding-left: 2.125rem;
    padding-right: 2.125rem;
  }
  .s-hero__inner {
    display: flex;
    flex-direction: column;
    min-height: 37.5rem;
    padding-top: 3rem;
    padding-bottom: 0;
  }
  .s-hero__copy {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .s-hero__title {
    display: block;
    min-height: 0;
    max-width: 19.375rem;
    /* El 1.5rem inferior separa el título del botón (sin él quedan pegados,
       igual que avisa el comentario de la regla base). */
    margin: 0 auto 1.5rem;
    font-size: 1.75rem;
    line-height: 1.18;
  }
  .s-hero__lead {
    max-width: 20.375rem;
    margin: 0.9375rem auto 1rem;
    font-size: 0.75rem;
    line-height: 1.25;
  }
  .s-hero .btn {
    width: 100%;
    max-width: 21.5rem;
    min-height: 2.1875rem;
    padding: 0.375rem 1.25rem;
    font-size: 1rem;
    line-height: 1;
  }
  .s-hero__disclaimer--mobile {
    display: block;
    margin: 0.9375rem auto 0;
    font-size: 0.625rem;
    line-height: 1.2;
    opacity: 1;
  }
  .s-hero__media {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100vw;
    min-height: 0;
    margin-top: auto;
    margin-left: calc(50% - 50vw);
  }
  .s-hero__media::before {
    content: none;
  }
  .s-hero__visual {
    display: block;
    width: 100%;
    max-width: 25.75rem;
    height: auto;
    /* La figura queda pegada al borde inferior de la sección en cualquier
       ancho; el sobrante transparente del asset se recorta (overflow hidden). */
    margin: 0 auto -0.0625rem;
  }
  .s-hero__chips,
  .s-hero__person,
  .s-hero__circle-person,
  .s-hero__ai {
    display: none;
  }

  /* Logos: caption + flags stack */
  .s-logos__footer { text-align: center; }

  /* Mapa (Figma 3044:8035): texto arriba, imagen abajo a sangre completa y a
     ras del borde inferior de la sección (sin franja azul debajo); íconos y
     tipografía un paso más chicos que el desktop. */
  .s-mapa { padding: 2.5rem 0 0; }
  .s-mapa__copy { order: 1; }
  .s-mapa__media {
    order: 2;
    max-width: none;
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);   /* full-bleed, sale del container */
  }
  .s-mapa__bullets { gap: 1.25rem; margin-bottom: 1.25rem; }
  .s-mapa__bullets li { gap: 1rem; }
  .s-mapa__bullets img { width: 2.5rem; height: 2.5rem; }   /* Figma ~40px */
  .s-mapa__bullets p { font-size: 0.75rem; padding-top: 0; } /* Figma 12px */
  .s-mapa__close {
    font-size: 0.9375rem;                                    /* Figma 15px */
    text-align: center;
  }
  .s-mapa__close strong { display: block; }                  /* pregunta y respuesta en dos líneas */

  /* Cumplimiento: title scale + bottom-padding cushion under bg image */
  .s-cumplimiento {
    padding: 3.5625rem 0 4.375rem;
  }
  .s-cumplimiento::after {
    width: 70%;
    height: 0.5rem;
  }
  .s-cumplimiento .container {
    padding-left: 2.125rem;
    padding-right: 2.125rem;
  }
  .cumplimiento-inner {
    gap: 2.125rem;
    text-align: center;
  }
  .s-cumplimiento .h-section {
    max-width: 20rem;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
  }
  .s-cumplimiento .lead {
    max-width: 19.875rem;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.28;
    text-align: center;
  }
  .cumplimiento-list {
    max-width: 19.875rem;
    margin: 1.5rem auto 0;
    padding-left: 0;
    text-align: left;
  }
  .cumplimiento-list li {
    padding: 0.4375rem 0 0.4375rem 1.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
  }
  .cumplimiento-list li::before {
    top: 0.625rem;
    width: 0.875rem;
    height: 0.875rem;
  }
  .cumplimiento-badges {
    width: 100%;
    max-width: 19.875rem;
    margin: 0 auto;
    border-radius: 0.75rem;
  }

  /* FAQ question padding tighter on phones */
  .s-faq__item::after {
    left: -1rem;
    right: -1rem;
  }
  .s-faq__q {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    padding: 1rem 1.25rem;
    gap: 1.125rem;
  }

}