/* ============================================================================
 * AE Soluciones Laborales · hoja principal
 * ============================================================================
 * Orden de bloques (igual al orden del HTML):
 *   01 reset y base           09 pista empresas · servicios
 *   02 layout                 10 pista empresas · proceso
 *   03 tipografía             11 pista empresas · plataforma
 *   04 botones y píldoras     12 pista empresas · nómina
 *   05 revelado por scroll    13 bisagra entre pistas
 *   06 header                 14 pista candidatos
 *   07 hero                   15 preguntas
 *   08 marquesina y cifras    16 contacto y pie
 * ========================================================================= */

/* ==========================================================================
 * 01 · RESET Y BASE
 * ======================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los anclajes no deben quedar debajo del header fijo. */
  scroll-padding-block-start: calc(var(--header-h) + var(--s6));
}

body {
  background-color: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  /* Evita el salto horizontal que provocan los elementos decorativos
     desbordados (auroras, marquesina) en móvil. */
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: var(--r-flush);
}

.is-dark :focus-visible {
  outline-color: var(--sand);
}

::selection {
  background: var(--sand);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 200;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-btn);
  background: var(--pine-abyss);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Barra de progreso de lectura. Da sensación de documento largo controlado. */
.progress {
  position: fixed;
  z-index: 120;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ==========================================================================
 * 02 · LAYOUT
 * ======================================================================= */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide {
  max-width: var(--measure-wide);
}

.shell--narrow {
  max-width: var(--measure-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint {
  background: linear-gradient(180deg, var(--paper) 0%, var(--pine-tint) 100%);
}

.section--flush-top {
  padding-block-start: 0;
}

/* Cabecera de sección. Etiqueta mono + titular display + entrada. */
.section__head {
  max-width: 54rem;
  margin-block-end: clamp(var(--s10), 5vw, var(--s20));
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--track-fg);
  text-wrap: balance;
}

.section__title em {
  font-style: italic;
  color: var(--track-accent);
}

.section__intro {
  max-width: 40rem;
  margin-block-start: var(--s5);
  font-size: var(--t-body-lg);
  color: var(--track-fg-muted);
  text-wrap: pretty;
}

.section__head--center .section__intro {
  margin-inline: auto;
}

/* Retícula asimétrica: contexto pegajoso a la izquierda, detalle a la derecha. */
.split {
  display: grid;
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .split__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s10));
  }

  .split--reverse .split__aside {
    order: 2;
  }
}

/* ==========================================================================
 * 03 · TIPOGRAFÍA
 * ======================================================================= */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--track-accent);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: currentcolor;
  opacity: 0.5;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.lede {
  font-size: var(--t-body-lg);
  color: var(--track-fg-muted);
  text-wrap: pretty;
}

/* Titular con degradado. Solo sobre fondo oscuro: sobre papel el degradado
   arena→verde no alcanza 4.5:1 en los tramos claros. */
.grad-text {
  background: var(--grad-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Etiquetas de honestidad. brand-spec.md: sin dato real va un marcador que lo
   dice. Se ven como metadato, no como error. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.2em 0.6em;
  border: 1px solid var(--track-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--track-fg-muted);
  vertical-align: middle;
}

.chip--demo {
  border-color: var(--sand);
  background: var(--sand-light);
  color: #6d5a3a;
}

.is-dark .chip--demo {
  background: var(--sand-a18);
  color: var(--sand-glow);
}

.note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--track-fg-muted);
}

/* ==========================================================================
 * 04 · BOTONES Y PÍLDORAS
 * ======================================================================= */

.btn {
  --btn-bg: var(--pine);
  --btn-fg: var(--paper);
  --btn-line: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* 44 px de alto mínimo: objetivo táctil accesible. */
  min-height: 2.875rem;
  padding: var(--s3) var(--s6);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

/* Brillo que barre el botón al pasar el cursor. No mueve el layout:
   es un pseudo-elemento con transform, no un cambio de tamaño. */
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 22%) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform var(--d-slow) var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(110%);
}

.btn--primary:hover {
  --btn-bg: var(--pine-deep);

  box-shadow: 0 8px 22px var(--pine-a24);
}

.btn--sand {
  --btn-bg: var(--sand);
  --btn-fg: var(--ink);
}

.btn--sand:hover {
  --btn-bg: var(--sand-glow);
}

.btn--paper {
  --btn-bg: var(--paper);
  --btn-fg: var(--pine-deep);
}

.btn--paper:hover {
  --btn-bg: #fff;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--track-fg);
  --btn-line: var(--track-line);
}

.btn--ghost:hover {
  --btn-line: var(--track-accent);
  --btn-fg: var(--track-accent);
}

.btn--sm {
  /* 44 px, no 40: el header cabe (min-height 72) y así ningún control del
     sitio queda por debajo del objetivo táctil accesible. */
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  font-size: var(--t-micro);
}

.btn--lg {
  min-height: 3.25rem;
  padding: var(--s4) var(--s8);
  font-size: var(--t-body);
}

.btn--block {
  width: 100%;
}

.btn__arrow {
  transition: transform var(--d-base) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* Enlace de texto con subrayado que crece desde el inicio. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  color: var(--track-accent);
}

.link::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-base) var(--ease);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
}

.link-quiet {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--track-fg-muted);
  transition: color var(--d-fast) var(--ease);
}

.link-quiet:hover {
  color: var(--track-accent);
}

/* ==========================================================================
 * 05 · REVELADO POR SCROLL
 * ======================================================================= */

/* Se revela con @keyframes, no con transition, y el desplazamiento usa la
 * propiedad `translate` en lugar de `transform`. Dos razones concretas:
 *
 *  1. Varios componentes revelables (.card, .step, .gate__card) declaran su
 *     propio `transition` para el hover. Al tener la misma especificidad que
 *     .reveal, el último del archivo ganaba y mataba la transición de entrada.
 *     Una animación no compite con `transition`.
 *  2. `animation-fill-mode: forwards` fija el estado final. Si ese estado
 *     tocara `transform`, bloquearía el `translateY(-3px)` del hover de las
 *     tarjetas. `translate` es una propiedad independiente, así que conviven.
 */
.reveal {
  opacity: 1;
}

.js-reveal .reveal {
  opacity: 0;
}

.reveal.is-in {
  animation: reveal-in var(--d-reveal) var(--ease-out-soft) var(--reveal-delay, 0ms) forwards;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    translate: 0 26px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

/* Sin JS nadie añade .is-in: el contenido tiene que verse igual. */
.no-js .reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
  }
}

/* ==========================================================================
 * 06 · HEADER
 * ======================================================================= */

.site-header {
  position: sticky;
  z-index: 100;
  inset-block-start: 0;
  background: var(--paper-a70);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid transparent;
  transition:
    background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

.site-header.is-stuck {
  background: rgb(250 248 244 / 88%);
  border-block-end-color: var(--ink-a08);
  box-shadow: 0 1px 0 var(--ink-a06), 0 12px 28px rgb(28 36 32 / 4%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

/* brand-spec.md: en header va solo el emblema, nunca el lockup comprimido. */
.brand__mark {
  width: auto;
  height: 1.75rem;
  transition: transform var(--d-base) var(--ease);
}

.brand:hover .brand__mark {
  transform: rotate(-4deg) scale(1.04);
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name-strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.brand__name-soft {
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--s2);
  margin-inline-start: auto;
}

.site-nav a {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-btn);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-muted);
  transition:
    color var(--d-fast) var(--ease),
    background var(--d-fast) var(--ease);
}

.site-nav a:hover {
  background: var(--pine-a14);
  color: var(--pine-deep);
}

/* Conmutador de pista. Es el elemento que comunica que el sitio tiene dos
   mitades. El indicador se mueve con una variable escrita desde JS. */
.track-switch {
  position: relative;
  display: none;
  padding: 3px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  box-shadow: var(--e1);
}

.track-switch__thumb {
  position: absolute;
  z-index: 0;
  inset-block: 3px;
  inset-inline-start: 3px;
  width: var(--thumb-w, 50%);
  border-radius: var(--r-pill);
  background: var(--pine);
  transform: translateX(var(--thumb-x, 0));
  transition:
    transform var(--d-base) var(--ease),
    width var(--d-base) var(--ease);
}

/* padding-block s3 y no s2: con s2 el botón medía 37 px de alto y no alcanzaba
   el objetivo táctil de 44. Es el control que elige la audiencia del sitio, no
   conviene que sea el más difícil de acertar. */
.track-switch__btn {
  position: relative;
  z-index: 1;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--d-base) var(--ease);
}

.track-switch__btn[aria-current="true"] {
  color: var(--paper);
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--s4);
  flex: none;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: auto;
  border: var(--hairline);
  border-radius: var(--r-btn);
  background: var(--paper-raised);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-5px);
}

.nav-toggle__bars::after {
  transform: translateY(5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

/* El atributo `hidden` viene del stylesheet del navegador, y cualquier regla
   de autor con `display` lo pisa. Sin esta línea el menú nunca se cerraría. */
.nav-movil[hidden] {
  display: none;
}

.nav-movil {
  display: grid;
  gap: var(--s1);
  padding: var(--s4) var(--gutter) var(--s8);
  border-block-start: var(--hairline);
  background: var(--paper-raised);
}

.nav-movil a:not(.btn) {
  padding: var(--s3) 0;
  border-block-end: 1px solid var(--ink-a06);
  font-size: var(--t-body-lg);
  font-weight: 500;
  color: var(--ink);
}

.nav-movil__group {
  margin-block-start: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pine);
}

.nav-movil .btn {
  margin-block-start: var(--s5);
}

@media (min-width: 60rem) {
  .site-nav,
  .track-switch,
  .site-header__actions {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-movil {
    display: none !important;
  }
}

/* ==========================================================================
 * 07 · HERO
 * ======================================================================= */

.hero {
  position: relative;
  padding-block: clamp(var(--s16), 9vw, var(--s32)) var(--section-y);
  overflow: hidden;
  isolation: isolate;
}

/* Aurora: tres manchas radiales en los hues de marca. Se mueven muy lento y
   siguen al cursor con --mx/--my. No es un degradado de plantilla morado. */
.aurora {
  position: absolute;
  z-index: -2;
  inset: -20% -10% auto;
  height: 120%;
  pointer-events: none;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.aurora span:nth-child(1) {
  inset-block-start: -6%;
  inset-inline-start: 4%;
  width: 42vw;
  min-width: 20rem;
  aspect-ratio: 1;
  background: var(--pine-glow);
  animation: drift-a 22s var(--ease) infinite alternate;
}

.aurora span:nth-child(2) {
  inset-block-start: 18%;
  inset-inline-end: 2%;
  width: 34vw;
  min-width: 17rem;
  aspect-ratio: 1;
  background: var(--sand);
  opacity: 0.5;
  animation: drift-b 27s var(--ease) infinite alternate;
}

.aurora span:nth-child(3) {
  inset-block-start: 46%;
  inset-inline-start: 34%;
  width: 30vw;
  min-width: 15rem;
  aspect-ratio: 1;
  background: var(--pine-tint);
  opacity: 0.75;
  animation: drift-c 19s var(--ease) infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(calc(var(--mx, 0) * 26px), calc(6% + var(--my, 0) * 18px), 0) scale(1.12);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(calc(var(--mx, 0) * -22px), calc(-5% + var(--my, 0) * -16px), 0) scale(1.08);
  }
}

@keyframes drift-c {
  to {
    transform: translate3d(calc(var(--mx, 0) * 18px), calc(-8% + var(--my, 0) * 12px), 0) scale(0.92);
  }
}

/* Grano y retícula fina: sacan el fondo del look "degradado plano". */
.grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--ink-a06) 1px, transparent 1px),
    linear-gradient(180deg, var(--ink-a06) 1px, transparent 1px);
  background-size: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper-a70);
  backdrop-filter: blur(8px);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-muted);
}

.hero__badge b {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.2em 0.7em;
  border-radius: var(--r-pill);
  background: var(--pine);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 20ch;
  margin-block: var(--s8) 0;
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}

.hero__title em {
  position: relative;
  font-style: italic;
  color: var(--pine);
}

/* Subrayado dibujado a mano alzada bajo la palabra clave del titular. */
.hero__title em::after {
  content: "";
  position: absolute;
  inset-block-end: -0.06em;
  inset-inline: 0;
  height: 0.5em;
  background: var(--sand);
  opacity: 0.34;
  border-radius: var(--r-pill);
  transform-origin: 0 50%;
  animation: swipe-in 900ms 500ms var(--ease-out-soft) both;
}

@keyframes swipe-in {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.hero__body {
  display: grid;
  gap: var(--s8);
  margin-block-start: var(--s8);
  max-width: 42rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* Puerta de entrada: las dos mitades del negocio, una al lado de la otra.
   Es el corazón de la arquitectura del sitio. */
.gate {
  display: grid;
  gap: var(--s5);
  margin-block-start: clamp(var(--s12), 6vw, var(--s20));
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .gate {
    grid-template-columns: 1fr 1fr;
  }
}

.gate__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: clamp(var(--s6), 3vw, var(--s10));
  border: var(--hairline);
  border-radius: var(--r-xl);
  background: var(--paper-raised);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

/* Foco que sigue al cursor. --px/--py los escribe JS. Puramente decorativo:
   si JS no corre, la tarjeta se ve completa igual. */
.gate__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    18rem circle at var(--px, 50%) var(--py, 0%),
    var(--gate-glow, var(--pine-a24)),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
}

.gate__card:hover {
  border-color: var(--gate-line, var(--pine));
  box-shadow: var(--e3);
  transform: translateY(-3px);
}

.gate__card:hover::before {
  opacity: 1;
}

.gate__card--dark {
  --gate-glow: var(--sand-a30);
  --gate-line: var(--sand);

  border-color: transparent;
  background: var(--pine-abyss);
  color: rgb(250 248 244 / 70%);
}

.gate__num {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pine);
}

.gate__card--dark .gate__num {
  color: var(--sand);
}

.gate__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.gate__card--dark .gate__title {
  color: var(--paper);
}

.gate__body {
  font-size: var(--t-body);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.gate__card--dark .gate__body {
  color: rgb(250 248 244 / 70%);
}

.gate__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-start: auto;
  padding-block-start: var(--s5);
}

.gate__list li {
  padding: 0.3em 0.75em;
  border: 1px solid var(--ink-a12);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-muted);
}

.gate__card--dark .gate__list li {
  border-color: var(--sand-a18);
  color: rgb(250 248 244 / 72%);
}

.gate__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s6);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--pine);
}

.gate__card--dark .gate__cta {
  color: var(--sand-glow);
}

.gate__cta svg {
  transition: transform var(--d-base) var(--ease);
}

.gate__card:hover .gate__cta svg {
  transform: translateX(4px);
}

/* ==========================================================================
 * 08 · MARQUESINA Y CIFRAS
 * ======================================================================= */

.marquee {
  padding-block: var(--s5);
  border-block: var(--hairline);
  background: var(--paper-raised);
  overflow: hidden;
  /* Difumina los extremos para que el bucle no se vea cortado. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--s10);
  animation: slide 38s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes slide {
  to {
    /* -50 % porque el contenido está duplicado: el bucle es invisible. */
    transform: translateX(-50%);
  }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.marquee__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sand);
}

.stats {
  display: grid;
  gap: 1px;
  margin-block-start: var(--s8);
  border: var(--hairline);
  border-radius: var(--r-card);
  background: var(--ink-a12);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 52rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: clamp(var(--s5), 2.5vw, var(--s8));
  background: var(--paper-raised);
  transition: background var(--d-base) var(--ease);
}

.stat:hover {
  background: var(--pine-tint);
}

.stat dt {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat dd small {
  font-family: var(--font-body);
  font-size: 0.35em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pine);
  vertical-align: super;
}

/* ==========================================================================
 * 09 · PISTA EMPRESAS · SERVICIOS
 * ======================================================================= */

/* Marca visual de pista: una barra vertical que corre por el costado de la
   sección. Le dice al ojo "sigues en el mismo lado del sitio". */
.track {
  position: relative;
}

/* z-index explícito: las secciones hijas son position:relative y, al venir
   después en el árbol, pintarían encima del riel y lo taparían. */
.track::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--track-rail, var(--grad-brand));
  pointer-events: none;
}

.track__label {
  display: none;
}

/* Solo cuando hay margen exterior donde colocar la etiqueta: la retícula mide
   1240 px, así que por debajo de 82rem se encimaría con el contenido. */
@media (min-width: 82rem) {
  .track__label {
    display: block;
    position: sticky;
    z-index: 4;
    inset-block-start: calc(var(--header-h) + var(--s4));
    /* Altura 0: la etiqueta no debe empujar el contenido hacia abajo. */
    height: 0;
    pointer-events: none;
  }

  .track__label span {
    display: block;
    width: max-content;
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: var(--pine);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--t-nano);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    transform: translateX(calc(-100% - var(--s6)));
  }

  .is-dark .track__label span {
    background: var(--sand);
    color: var(--ink);
  }
}

/* Bento de servicios: la primera tarjeta ocupa dos columnas y hereda el
   fondo oscuro, para que la jerarquía se lea sin numerar en voz alta. */
.bento {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento__item--wide {
    grid-column: span 2;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--s5), 2.6vw, var(--s8));
  border: 1px solid var(--track-line);
  border-radius: var(--track-radius);
  background: var(--track-surface);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    14rem circle at var(--px, 50%) var(--py, 0%),
    var(--card-glow, var(--pine-a14)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
}

.card:hover {
  border-color: var(--track-accent);
  box-shadow: var(--track-shadow);
  transform: translateY(-3px);
}

.card:hover::before {
  opacity: 1;
}

.card--feature {
  background: var(--pine-abyss);
  border-color: transparent;
  color: rgb(250 248 244 / 70%);

  --card-glow: var(--sand-a18);
}

.card--feature .card__title {
  color: var(--paper);
}

.card--feature .card__num {
  color: var(--sand);
}

.card--feature .card__body {
  color: rgb(250 248 244 / 72%);
}

.card--feature .tags li {
  border-color: var(--sand-a18);
  color: rgb(250 248 244 / 74%);
}

.card__num {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  color: var(--track-accent);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: var(--s5);
  border-radius: var(--r-btn);
  background: var(--pine-tint);
  color: var(--pine-deep);
}

.card--feature .card__icon {
  background: var(--sand-a18);
  color: var(--sand-glow);
}

.card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card__title {
  margin-block: var(--s4) var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--track-fg);
}

.card__body {
  font-size: var(--t-small);
  color: var(--track-fg-muted);
  text-wrap: pretty;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-start: auto;
  padding-block-start: var(--s6);
}

/* --t-micro (13 px) y no --t-nano: las etiquetas se leen, no solo se ven.
   --t-nano queda reservado para metadatos decorativos (chips, url del marco). */
.tags li {
  padding: 0.25em 0.7em;
  border: 1px solid var(--track-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--track-fg-muted);
}

/* ==========================================================================
 * 10 · PISTA EMPRESAS · PROCESO
 * ======================================================================= */

.steps {
  display: grid;
  gap: var(--s4);
  counter-reset: paso;
}

.step {
  position: relative;
  display: grid;
  gap: var(--s5);
  align-items: start;
  padding: clamp(var(--s5), 2.4vw, var(--s8));
  border: var(--hairline);
  border-radius: var(--r-card);
  background: var(--paper-raised);
  grid-template-columns: auto 1fr;
  transition:
    border-color var(--d-base) var(--ease),
    background var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

.step:hover {
  border-color: var(--pine);
  box-shadow: var(--e2);
}

/* Línea que une los pasos. Se dibuja desde el número, no con un borde falso. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(clamp(var(--s5), 2.4vw, var(--s8)) + 3.25rem);
  inset-inline-start: calc(clamp(var(--s5), 2.4vw, var(--s8)) + 1.5rem);
  width: 1px;
  height: calc(100% - 3.25rem);
  background: linear-gradient(180deg, var(--sand), transparent);
}

.step__num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--pine-tint);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--pine-deep);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.step:hover .step__num {
  background: var(--pine);
  color: var(--paper);
}

.step__title {
  margin-block-end: var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.step p {
  font-size: var(--t-small);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.step__proof {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pine);
}

/* ==========================================================================
 * 11 · PISTA EMPRESAS · PLATAFORMA
 * ======================================================================= */

.frame {
  margin: 0;
  border: 1px solid var(--track-line);
  border-radius: var(--track-radius);
  background: var(--track-surface);
  overflow: hidden;
  box-shadow: var(--track-shadow);
}

.frame--wide {
  margin-block-end: var(--s4);
}

.frame__chrome {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-block-end: 1px solid var(--track-line);
  background: var(--paper);
}

.is-dark .frame__chrome {
  background: var(--dark-surface-2);
}

.frame__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--track-line);
}

.frame__url {
  margin-inline-start: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  color: var(--track-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frame figcaption {
  padding: var(--s4) var(--s5);
  border-block-start: 1px solid var(--track-line);
  font-size: var(--t-small);
  color: var(--track-fg-muted);
}

.frame-pair {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .frame-pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* Marcador de captura pendiente. Honesto pero presentable: retícula tenue en
   vez de caja punteada gris. */
.ph {
  display: grid;
  place-content: center;
  gap: var(--s2);
  padding: var(--s8) var(--s5);
  background:
    linear-gradient(90deg, var(--ink-a06) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(180deg, var(--ink-a06) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--pine-tint);
  text-align: center;
}

.is-dark .ph {
  background:
    linear-gradient(90deg, var(--sand-a10) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(180deg, var(--sand-a10) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--dark-surface-2);
}

.ph--16x9 {
  aspect-ratio: 16 / 9;
}

.ph--4x3 {
  aspect-ratio: 4 / 3;
}

.ph__label {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pine);
}

.is-dark .ph__label {
  color: var(--sand-glow);
}

.ph__desc {
  font-size: var(--t-small);
  color: var(--track-fg-muted);
}

/* ==========================================================================
 * 12 · PISTA EMPRESAS · NÓMINA Y CUMPLIMIENTO
 * ======================================================================= */

.compliance {
  display: grid;
  gap: 1px;
  border: var(--hairline);
  border-radius: var(--r-card);
  background: var(--ink-a12);
  overflow: hidden;
}

.compliance li {
  display: grid;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s5) clamp(var(--s5), 2.4vw, var(--s6));
  background: var(--paper-raised);
  grid-template-columns: 1fr;
  transition: background var(--d-base) var(--ease);
}

.compliance li:hover {
  background: var(--pine-tint);
}

@media (min-width: 40rem) {
  .compliance li {
    grid-template-columns: 7.5rem 1fr;
  }
}

.compliance__key code {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: var(--r-flush);
  background: var(--pine);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.06em;
}

.compliance h3 {
  margin-block-end: var(--s1);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--ink);
}

.compliance p {
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.callout {
  margin-block-start: var(--s4);
  padding: clamp(var(--s5), 2.4vw, var(--s8));
  border: 1px solid var(--sand);
  border-inline-start-width: 3px;
  border-radius: var(--r-card);
  background: var(--sand-light);
}

.callout__title {
  margin-block-end: var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
}

.callout p {
  font-size: var(--t-small);
  color: #4a4232;
}

.callout strong {
  color: var(--ink);
}

/* ==========================================================================
 * 13 · BISAGRA ENTRE PISTAS
 * ======================================================================= */

/* Transición explícita: el sitio anuncia que se cambia de mitad.
   Evita que el lector piense que se topó con otra página. */
/* El fondo es sólido y la transición clara→oscura vive en un ::before cuya
   altura es exactamente el padding superior. Antes esto era un degradado sobre
   toda la sección y el contraste del titular dependía de la altura final del
   bloque: en pantallas cortas el texto claro caía sobre la zona clara. Con la
   banda acotada al padding, el texto siempre queda sobre --pine-abyss. */
.hinge {
  --hinge-pad: clamp(var(--s16), 8vw, var(--s24));

  position: relative;
  padding-block: var(--hinge-pad);
  background: var(--pine-abyss);
  overflow: hidden;
  text-align: center;
}

.hinge::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--hinge-pad);
  background: linear-gradient(180deg, var(--pine-tint) 0%, var(--pine-abyss) 100%);
}

.hinge__inner {
  position: relative;
  z-index: 1;
}

.hinge__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  /* Arena, no pino: sobre --pine-abyss el pino no llega a 4.5:1. */
  color: var(--sand);
}

.hinge__title {
  max-width: 30ch;
  margin: var(--s5) auto 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--paper);
  text-wrap: balance;
}

.hinge__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: var(--s10) auto 0;
  border: 1px solid var(--sand-a30);
  border-radius: 50%;
  color: var(--sand);
  animation: bob 2.4s var(--ease) infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

/* ==========================================================================
 * 14 · PISTA CANDIDATOS
 * ======================================================================= */

/* La pista de candidatos hereda el lenguaje formal de la app: fondo oscuro,
   radios de 20 px y elevación real. No es un capricho: es la misma decisión
   documentada en candidatos_app/app/assets/css/main.css. La audiencia es una
   persona con su teléfono en la mano, no un director evaluando proveedores. */
.track--candidatos {
  --track-rail: linear-gradient(180deg, var(--sand), var(--pine-glow));

  position: relative;
  overflow: hidden;
}

.track--candidatos::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: -10%;
  inset-inline-end: -12%;
  width: 46vw;
  min-width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pine);
  filter: blur(110px);
  opacity: 0.34;
  pointer-events: none;
}

.track--candidatos > * {
  position: relative;
  z-index: 1;
}

/* Tira de tres pasos. Contrapunto horizontal a los pasos verticales de
   empresas: la misma información, otro ritmo. */
.ribbon {
  display: grid;
  gap: var(--s4);
  margin-block-end: clamp(var(--s10), 5vw, var(--s16));
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .ribbon {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ribbon__item {
  position: relative;
  padding: var(--s6);
  border: var(--hairline-dark);
  border-radius: var(--r-lg);
  background: rgb(250 248 244 / 4%);
  backdrop-filter: blur(6px);
}

.ribbon__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--sand);
}

.ribbon__item h3 {
  margin-block: var(--s4) var(--s2);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--paper);
}

.ribbon__item p {
  font-size: var(--t-small);
  color: rgb(250 248 244 / 68%);
}

/* Etiqueta de tiempo: el dato que más pesa en la decisión del candidato. */
.ribbon__time {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s4);
  padding: 0.25em 0.7em;
  border-radius: var(--r-pill);
  background: var(--sand-a18);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand-glow);
}

/* Bento de candidatos. Dos tarjetas grandes (CV y kit de plataformas) porque
   son las que venden; tres normales para el resto del embudo. */
.bento--candidatos .card {
  background: rgb(250 248 244 / 5%);
  backdrop-filter: blur(8px);

  --card-glow: var(--sand-a18);
}

.bento--candidatos .card:hover {
  background: rgb(250 248 244 / 8%);
}

/* Simulación de la pantalla del kit. Comunica el producto sin necesitar una
   captura real, y se declara como demostración en el HTML. */
.kit-demo {
  display: grid;
  gap: var(--s2);
  margin-block-start: var(--s6);
  padding: var(--s4);
  border: var(--hairline-dark);
  border-radius: var(--r-card);
  background: var(--pine-abyss);
}

.kit-demo__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-flush);
  background: rgb(250 248 244 / 5%);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: rgb(250 248 244 / 72%);
}

.kit-demo__row b {
  margin-inline-start: auto;
  color: var(--sand-glow);
  font-weight: 500;
}

.kit-demo__bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgb(250 248 244 / 10%);
  overflow: hidden;
}

.kit-demo__bar i {
  display: block;
  width: var(--fill, 60%);
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pine-glow), var(--sand));
}

/* Promesas. Tres afirmaciones en negativo: lo que NO hacemos. Es el tono que
   ya usa la app y es lo que desarma la objeción de un candidato. */
.promises {
  display: grid;
  gap: var(--s4);
  margin-block-start: clamp(var(--s10), 5vw, var(--s16));
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .promises {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promise {
  display: grid;
  gap: var(--s3);
  padding: var(--s6);
  border-block-start: 2px solid var(--sand);
  background: rgb(250 248 244 / 4%);
}

.promise h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper);
}

.promise p {
  font-size: var(--t-small);
  color: rgb(250 248 244 / 68%);
}

/* Cierre de la pista: banda con el CTA a la app. */
.applink {
  display: grid;
  gap: var(--s6);
  align-items: center;
  margin-block-start: clamp(var(--s12), 6vw, var(--s20));
  padding: clamp(var(--s6), 3vw, var(--s10));
  border: var(--hairline-dark);
  border-radius: var(--r-xl);
  background: linear-gradient(118deg, var(--dark-surface) 0%, var(--pine-deep) 100%);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .applink {
    grid-template-columns: 1fr auto;
    gap: var(--s10);
  }
}

.applink__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper);
}

.applink p {
  margin-block-start: var(--s2);
  font-size: var(--t-small);
  color: rgb(250 248 244 / 70%);
}

.applink__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* ==========================================================================
 * 15 · PREGUNTAS
 * ======================================================================= */

/* Pestañas: las preguntas de una empresa y las de un candidato no se mezclan.
   Es la tercera vez que el sitio repite la división, y a propósito. */
.tabs {
  display: inline-flex;
  gap: var(--s1);
  margin-block-end: var(--s8);
  padding: 4px;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
}

.tabs__btn {
  padding: var(--s2) var(--s5);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-muted);
  transition:
    background var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.tabs__btn[aria-selected="true"] {
  background: var(--pine);
  color: var(--paper);
}

.faq {
  display: grid;
  border-block-start: var(--hairline);
}

/* Igual que en el menú móvil: `display: grid` de autor pisa a [hidden]. */
.faq[hidden] {
  display: none;
}

.qa {
  border-block-end: var(--hairline);
}

.qa summary {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--d-fast) var(--ease);
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary:hover {
  color: var(--pine);
}

.qa summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid currentcolor;
  border-block-end: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-base) var(--ease);
}

.qa[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.qa__body {
  padding-block-end: var(--s6);
  max-width: 46rem;
}

.qa__body p + p {
  margin-block-start: var(--s3);
}

.qa__body p {
  font-size: var(--t-body);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.qa__pending {
  padding: var(--s4) var(--s5);
  border-inline-start: 2px solid var(--sand);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--sand-light);
  font-size: var(--t-small);
  color: #4a4232;
}

.qa__pending .chip {
  margin-inline-end: var(--s2);
}

/* ==========================================================================
 * 16 · CONTACTO Y PIE
 * ======================================================================= */

.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  width: 60vw;
  min-width: 24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pine);
  filter: blur(120px);
  opacity: 0.3;
  transform: translateX(-50%);
  pointer-events: none;
}

.cta__grid {
  position: relative;
  display: grid;
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .cta__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-list {
  display: grid;
  gap: 1px;
  margin-block-start: var(--s10);
  border-block-start: var(--hairline-dark);
}

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s4);
  border-block-end: var(--hairline-dark);
}

.contact-list__key {
  min-width: 7rem;
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sand);
}

.form {
  padding: clamp(var(--s6), 3vw, var(--s8));
  border: var(--hairline-dark);
  border-radius: var(--r-lg);
  background: rgb(250 248 244 / 5%);
  backdrop-filter: blur(10px);
}

.form__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-block-end: var(--s6);
  font-size: var(--t-micro);
  color: rgb(250 248 244 / 66%);
}

.field {
  display: grid;
  gap: var(--s2);
  margin-block-end: var(--s4);
}

.field label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgb(250 248 244 / 80%);
}

.field__opt {
  font-weight: 400;
  color: rgb(250 248 244 / 50%);
}

.field input,
.field select,
.field textarea {
  min-height: 2.875rem;
  padding: var(--s3) var(--s4);
  border: var(--hairline-dark);
  border-radius: var(--r-btn);
  background: rgb(22 38 29 / 60%);
  color: var(--paper);
  font-size: var(--t-small);
  transition:
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgb(250 248 244 / 38%);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sand);
  box-shadow: 0 0 0 3px var(--sand-a18);
}

.field-row {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.consent {
  display: grid;
  gap: var(--s3);
  align-items: start;
  margin-block: var(--s6);
  grid-template-columns: auto 1fr;
}

.consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2rem;
  accent-color: var(--sand);
}

.consent label {
  font-size: var(--t-micro);
  color: rgb(250 248 244 / 70%);
}

.consent a {
  color: var(--sand-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:disabled::after {
  display: none;
}

/* ── Pie ── */

.site-footer {
  padding-block: var(--s16) var(--s8);
  border-block-start: 1px solid var(--sand-a18);
  background: #0f1c15;
  color: rgb(250 248 244 / 62%);
}

.site-footer__top {
  display: grid;
  gap: clamp(var(--s8), 4vw, var(--s16));
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
}

.site-footer__brand img {
  width: 11rem;
  /* El logo no tiene variante para fondo oscuro (pendiente 4 de brand-spec).
     Se aísla en una placa clara en vez de recolorearlo, que está prohibido. */
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--paper);
}

.site-footer__tag {
  margin-block-start: var(--s5);
  max-width: 24rem;
  font-size: var(--t-small);
}

.site-footer__cols {
  display: grid;
  gap: var(--s8);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.site-footer__cols h2 {
  margin-block-end: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sand);
}

.site-footer__cols li + li {
  margin-block-start: var(--s3);
}

.site-footer__cols a {
  font-size: var(--t-small);
  transition: color var(--d-fast) var(--ease);
}

.site-footer__cols a:hover {
  color: var(--paper);
}

.legal-slot {
  margin-block-start: var(--s16);
  padding: var(--s6);
  border: 1px dashed var(--sand-a30);
  border-radius: var(--r-card);
}

.legal-slot__label {
  margin-block-end: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sand);
}

.legal-slot__list {
  display: grid;
  gap: var(--s3);
}

.legal-slot__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  font-size: var(--t-small);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  margin-block-start: var(--s10);
  padding-block-start: var(--s6);
  border-block-start: 1px solid var(--sand-a18);
  font-size: var(--t-micro);
}

/* Botón de volver arriba. Aparece cuando ya hay scroll suficiente. */
.to-top {
  position: fixed;
  z-index: 90;
  inset-block-end: var(--s6);
  inset-inline-end: var(--s6);
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: var(--pine-abyss);
  color: var(--sand);
  box-shadow: var(--e3);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  background: var(--pine-deep);
}

.contact-email { overflow-wrap: anywhere; }

/* Vistas ilustrativas de la plataforma. */
.preview-disclaimer { margin: 1.5rem auto 0; color: var(--sand-glow); font-size: .875rem; }
.product-preview { background: #f5f7f4; color: #203b31; padding: clamp(1.25rem, 3vw, 2.5rem); }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.preview-kicker { font-size: .75rem; letter-spacing: .14em; color: #4f685c; margin-bottom: .5rem; }
.preview-heading h3 { font-family: var(--font-body); font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.3; }
.preview-heading p:not(.preview-kicker) { color: #56675e; font-size: .875rem; margin-top: .5rem; }
.preview-tag { display: inline-flex; align-items: center; padding: .35rem .65rem; border: 1px solid #cedcd1; border-radius: 6px; background: #edf3ee; color: #3c6557; font-size: .875rem; white-space: nowrap; }
.preview-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.preview-column { background: #e9eee8; border: 1px solid #dce4da; border-radius: 8px; padding: .85rem; min-height: 230px; }
.preview-column h4 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .875rem; font-weight: 600; margin-bottom: 1rem; }
.preview-column h4 > span { font-size: .75rem; border-radius: 5px; background: #d9e3da; padding: .1rem .4rem; }
.preview-person { display: flex; gap: .65rem; align-items: center; padding: .9rem .7rem; margin-top: .6rem; background: #fff; border: 1px solid #dfe5dd; border-radius: 6px; box-shadow: 0 3px 10px #203b3106; }
.preview-avatar { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #eee6d5; color: #5e5947; font-size: .75rem; }
.preview-person strong, .preview-event strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.preview-person small, .preview-event small { display: block; font-size: .75rem; color: #56675e; line-height: 1.5; margin-top: .2rem; }
.product-preview--compact { min-height: 390px; }
.preview-week { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; margin-bottom: 1.25rem; }
.preview-week > span { padding: .55rem; border-radius: 6px; text-align: center; color: #56675e; font-size: .875rem; }
.preview-week small { display: block; font-size: 1rem; margin-top: .3rem; }
.preview-week .is-selected { background: #3c6557; color: white; }
.preview-event { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto; gap: .6rem; align-items: center; padding: .85rem 0; border-top: 1px solid #dce4da; }
.preview-event time { font-size: .875rem; color: #56675e; }
.preview-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin-bottom: 1.5rem; }
.preview-stats > div { background: #fff; border: 1px solid #dce4da; border-radius: 6px; padding: .9rem .7rem; }
.preview-stats strong { font-size: 1.8rem; line-height: 1.2; font-weight: 500; display: block; }
.preview-stats span { font-size: .875rem; color: #56675e; display: block; margin-top: .4rem; }
.preview-summary h4 { font-size: .875rem; font-weight: 600; margin-bottom: .6rem; }
.preview-summary > div { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .85rem 0; border-top: 1px solid #dce4da; font-size: .875rem; }
@media (max-width: 64rem) { .preview-board { grid-template-columns: repeat(2,minmax(0,1fr)); } .preview-column { min-height: 180px; } }
@media (max-width: 35rem) { .preview-board { grid-template-columns: 1fr; } .preview-column { min-height: 0; } .preview-heading { align-items: flex-start; } .preview-event { grid-template-columns: 3rem minmax(0,1fr); } .preview-event > .preview-tag { grid-column: 2; justify-self: start; } .preview-summary > div { align-items: flex-start; flex-direction: column; } .preview-stats > div { padding: .75rem .5rem; } .product-preview--compact { min-height: 0; } }