/* ============================================================
   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. */
.nav-toggle {
  width: 3rem; height: 3rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle .bar {
  display: block;
  position: relative;
  width: 2.75rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute; left: 0;
  width: 2.75rem; height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle .bar::before { top: -0.625rem; }
.nav-toggle .bar::after  { top:  0.625rem; }
.site-header.is-open .nav-toggle .bar { background: transparent; }
.site-header.is-open .nav-toggle .bar::before { transform: translateY(0.625rem) rotate(45deg); }
.site-header.is-open .nav-toggle .bar::after  { transform: translateY(-0.625rem) rotate(-45deg); }

/* ============================================================
   NAV — mobile-first: slide-down white panel
   ============================================================ */
.site-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card-lg);
  padding: 0.5rem 1.5rem 1.5rem;
  display: none;
}
.site-header.is-open .site-nav { display: block; }
.site-nav__list { display: flex; flex-direction: column; }
.site-nav__item { border-bottom: 1px solid var(--c-border); }
/* Orden del menú mobile (Figma 3083-6873): Pruebas, Plataforma ATS, Blog, Nosotros */
.site-nav__item:nth-child(1) { order: 5; border-bottom: 0; } /* Nosotros (último visual) */
.site-nav__item:nth-child(2) { order: 3; }                   /* Plataforma ATS */
.site-nav__item:nth-child(3) { order: 1; }                   /* Pruebas */
.site-nav__item:nth-child(4) { order: 2; }                   /* Vocacional */
.site-nav__item:nth-child(5) { order: 4; }                   /* Blog */
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1.125rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-primary);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.site-nav__arrow { flex: 0 0 auto; color: var(--c-primary); }

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

/* Submenu (Pruebas) — inline accordion on mobile */
.site-nav__sub {
  display: none;
  flex-direction: column;
  padding: 0 0 0.75rem;
}
.site-nav__item--has-sub.is-open .site-nav__sub { display: flex; }
.site-nav__sub a {
  display: block;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-size: 1rem;
  color: var(--c-text);
}
.site-nav__sub a:hover { color: var(--c-primary); }

/* ============================================================
   LOGIN MENU (Ingresar a la plataforma)
   ============================================================ */
.login-menu { position: relative; flex: 0 0 auto; display: none; }
.login-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1.5rem;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--c-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.login-menu__chev { transition: transform .2s ease; }
.login-menu.is-open .login-menu__btn { background: var(--c-primary); color: #fff; }
.login-menu.is-open .login-menu__chev { transform: rotate(180deg); }
.login-menu__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-lg);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.login-menu.is-open .login-menu__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.login-menu__list a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  color: var(--c-text);
  white-space: nowrap;
}
.login-menu__list a:hover { background: var(--c-bg-soft); color: var(--c-primary); }

/* ============================================================
   HEADER — desktop (>= 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  /* 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; }
  .login-menu { display: block; }

  /* Inline nav bar */
  .site-nav {
    position: static;
    display: flex;
    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:nth-child(n) { order: 0; } /* anula el order del menú mobile */
  .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; }
  .s-video__title { order: 1; margin-bottom: 0.75rem; }
  .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; }
}

/* ============================================================
   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;
  }
}
/* 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; }

@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 (con línea divisoria adentro) | card 1111px */
    grid-template-columns: 22.875rem minmax(0, 1fr);
    gap: 7.4375rem;
    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%; }
@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); }
@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;
  padding: 0.75rem 1.5rem;
}
.logo-item img {
  max-height: 3rem;
  width: auto;
  filter: none;
  opacity: 1;
}
.s-logos__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
  text-align: center;
}
.s-logos__flags {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.s-logos__flags-strip {
  width: min(100%, 74.8125rem);
  height: auto;
  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;
  }
  .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;
}
.s-faq__q img {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.s-faq__item.is-open .s-faq__q img {
  transform: rotate(180deg);
}
.s-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 1.25rem 0 2rem;
}
.s-faq__item.is-open .s-faq__a {
  max-height: 31.25rem;
  padding: 0 1.25rem 1.25rem 2rem;
}
.s-faq__a p { color: var(--c-text-muted); margin: 0; }
@media (min-width: 1024px) {
  .s-faq .h-section {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.0225rem;
  }
  .s-faq__q {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    font-size: 1.5rem;
    padding: 1.375rem 1.25rem 1.375rem 9.75rem;
  }
  .s-faq__item::after {
    left: 9.75rem;
    right: 5.75rem;
  }
  .s-faq__q img { width: 2.5rem; height: 2.5rem; }
  .s-faq__a,
  .s-faq__item.is-open .s-faq__a { padding-left: 9.75rem; padding-right: 5.75rem; }
}
/* ============================================================
   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;
}
/* Plataforma ATS / Blog / Nosotros no cuelgan de "Pruebas psicotécnicas": son secciones
   por derecho propio y van en el azul de marca + negrita en TODOS los anchos (antes el
   color solo estaba dentro del bloque móvil, así que en escritorio salían blancos).
   Selector espejo del 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;
}
.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
   (contacto -> enlaces -> marca -> redes), promueve Plataforma ATS / Blog / Nosotros a
   aspecto de encabezado de sección, oculta el título de redes y centra marca, redes y
   legales bajo una línea azul.
   Va en su propio media query (el bloque de escritorio arranca en 1024px) para que nada
   de esto se filtre al layout grande. El reordenado es solo visual: el HTML conserva el
   orden de escritorio, que es el correcto semánticamente. */
@media (max-width: 1023.98px) {
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .site-footer__inner { gap: 2rem; }

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

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

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

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

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

  /* Legales: tres líneas centradas. Sin regla superior — ya la hace la línea azul. */
  .site-footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    border-top: 0;
    margin-top: 1.25rem;
    padding-top: 0;
  }
}
/* 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__inner > div:nth-child(2) h3 { font-size: 1.625rem; }
  .site-footer ul li { font-size: 1.375rem; }
  .site-footer ul img {
    width: 1.75rem;
    height: 1.75rem;
  }
  /* Tamaño y separación del diseño. Estaban rebajados a 2.5/1.25rem porque no cabían
     en la columna de 18rem; con los 22.5rem de ahora sí (5 x 2.9375 + 4 x 1.75 =
     21.69rem), así que vuelven a su valor. */
  .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;
  }
}

/* ============================================================
   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 */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- 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;
    margin: 0 auto;
    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 bullets: tighter gap to keep section short on mobile */
  .s-mapa__copy { order: 1; }
  .s-mapa__media { order: 2; }
  .s-mapa__bullets { gap: 1rem; }

  /* 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) 2.125rem;
    padding: 1rem 1.25rem;
    gap: 1.125rem;
  }
  .s-faq__q img {
    width: 2.125rem;
    height: 2.125rem;
  }

}