/* ==========================================================================
   Bëne Professionals — Sistema visual
   Implementa Bene-Professionals_Guia-de-Estilo.pdf (Prójimo · Dirección Creativa)

   Escala derivada del mockup BËNE_LANDING-PRO.jpg (lienzo 2953 px ≈ 1.54× de 1920):
     contenedor 1694 → 1100 px · H1 ~74 → 48 px · H2 ~49 → 32 px · cuerpo ~28 → 18 px
     línea regular 2 px @artboard → 1.3 CSS px  (guía: 1–1.6 pt)

   Este archivo es **el mismo sistema que Bëne Ambassadors**: se mantiene en
   paridad con `bene-ambassadors/mockups/assets/bene.css`. Cualquier cambio
   estructural debe portarse a los dos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
  /* ── Color: el sistema completo son dos valores ── */
  --rojo:   #9B1B2F;
  --blanco: #FFFFFF;
  /* Único derivado permitido: el rojo rebajado de la línea hiperdelgada */
  --rojo-hairline: rgba(155, 27, 47, 0.28);

  /* ── Tipografía ── */
  --font: "Poppins", "Century Gothic", "Avenir Next", sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;   /* botones y navegación */
  --fw-bold:    700;   /* titulares y kickers */

  --fs-hero:   clamp(2rem, 1.35rem + 2.6vw, 3rem);        /* 32 → 48 */
  --fs-h2:     clamp(1.5rem, 1.22rem + 1.15vw, 2rem);     /* 24 → 32 */
  --fs-h3:     clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
  --fs-body:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
  --fs-small:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-kicker: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-btn:    clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --fs-nav:    clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);

  --tracking-caps: 0.14em;
  --lh-titulo: 1.18;
  --lh-cuerpo: 1.62;

  /* ── Líneas: dos grosores, ni uno más ── */
  --linea-regular: 1.5px;
  --linea-hiper:   1px;

  /* ── Geometría ── */
  --radio: 0;                       /* esquinas rectas en todo el sistema */
  --contenedor: 1100px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* ── Ritmo vertical ── */
  --bloque-y: clamp(4rem, 8vw, 7.5rem);   /* sin líneas divisorias, el aire separa */

  /* ── Movimiento: un solo easing, tres duraciones. No agregar curvas. ── */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-quick: .15s;   /* color, border-color, estados de input */
  --dur-base:  .4s;    /* transform y opacity — el 90% de todo */
  --dur-slow:  .5s;    /* transiciones de color en bloques grandes */
  --offset:    .1s;    /* desfase entre transform y opacity */
  --stagger:   .09s;   /* separación entre hermanos de un grupo */
  --reveal-y:  24px;   /* distancia de entrada vertical */
}

/* ── Reset mínimo ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--rojo);              /* TODO el texto es rojo. Sin excepciones. */
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-cuerpo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
/* ol incluido: los pasos ya llevan su número dentro del título, el marcador
   nativo los duplicaba. */
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

/* ── Contenedor ── */
.wrap {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   MOVIMIENTO — reveal on scroll
   Portado tal cual de Bëne Ambassadors (commit b3a4110). Las reglas viven en
   estos comentarios y en assets/motion.js. El patrón central: transform y
   opacity NO corren juntos. En la entrada arranca opacity y transform la
   alcanza con --offset.

   El estado oculto vive detrás de .motion, que pone un script en el <head>.
   Si el JS no corre, la clase no existe y NADA se esconde nunca: el contenido
   se ve igual. Con prefers-reduced-motion el script retira la clase, así que
   los elementos quedan visibles y sin transform, no invisibles.

   Se usa la forma larga de transition a propósito: con el atajo no se puede
   sobreescribir sólo el delay por hermano sin repetir toda la declaración.
   ========================================================================== */

.motion .reveal,
.motion .reveal-grupo > * {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition-property: opacity, transform;
  transition-duration: var(--dur-base), var(--dur-base);
  transition-timing-function: var(--ease), var(--ease);
  transition-delay: 0s, var(--offset);
}
.motion .reveal.is-visible,
.motion .reveal-grupo.is-visible > * {
  opacity: 1;
  transform: none;
}

/* .is-mount no cambia el aspecto, sólo le dice a motion.js que este grupo no
   espera al scroll: el hero ya está en viewport al cargar. El estilo es el
   mismo que el de cualquier reveal. */

/* Stagger entre hermanos. Los dos valores del delay mapean, en orden, a las
   dos propiedades de transition-property: primero opacity, luego transform. */
.motion .reveal-grupo > :nth-child(2) {
  transition-delay: var(--stagger),
                    calc(var(--stagger) + var(--offset));
}
.motion .reveal-grupo > :nth-child(3) {
  transition-delay: calc(var(--stagger) * 2),
                    calc(var(--stagger) * 2 + var(--offset));
}
/* El stagger se corta en 4 hermanos: más allá, el último se siente roto en
   vez de coreografiado. Del cuarto en adelante todos comparten su retraso,
   así que un grupo mal armado se aplana en lugar de descolgarse. */
.motion .reveal-grupo > :nth-child(n + 4) {
  transition-delay: calc(var(--stagger) * 3),
                    calc(var(--stagger) * 3 + var(--offset));
}

/* ==========================================================================
   TIPOGRAFÍA — una familia, cinco roles
   ========================================================================== */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-titulo);
  letter-spacing: -0.005em;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-titulo);
  letter-spacing: -0.005em;
}
.body { font-size: var(--fs-body); font-weight: var(--fw-regular); }
.body-sm { font-size: var(--fs-small); font-weight: var(--fw-regular); }

/* Kicker: bold, mayúsculas, tracking, con regla corta debajo */
.kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  padding-bottom: 0.55em;
  border-bottom: var(--linea-regular) solid var(--rojo);
}

/* ==========================================================================
   LÍNEAS
   ========================================================================== */
.hairline {
  border: 0;
  border-top: var(--linea-hiper) solid var(--rojo-hairline);
  margin: 0;
}
.rule-regular {
  border: 0;
  border-top: var(--linea-regular) solid var(--rojo);
  margin: 0;
}

/* ==========================================================================
   BOTÓN — dos estados del mismo objeto: ghost (secundario) y sólido (primario).
   Resuelve la decisión abierta §8.3 de la guía: sí existe versión sólida para
   la acción primaria. El primario NACE en sólido y al hover pasa a ghost —
   invierte el secundario, que nace ghost y al hover pasa a sólido. Los dos
   estados finales son los mismos; lo que cambia es de dónde parte cada uno.
   ========================================================================== */
.btn {
  display: inline-block;
  border: var(--linea-regular) solid var(--rojo);
  border-radius: var(--radio);
  background: transparent;
  color: var(--rojo);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-btn);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  text-align: center;
  padding: 0.95em 2.1em;
  cursor: pointer;
  /* --dur-quick para color, --dur-base para transform. */
  transition: background-color var(--dur-quick) var(--ease),
              color            var(--dur-quick) var(--ease),
              transform        var(--dur-base)  var(--ease);
}
.btn:focus-visible { background: var(--rojo); color: var(--blanco); }

/* Acción primaria: sólido de origen. Es el único relleno del sistema fuera
   del bloque de cierre, y existe para que el CTA no compita de tú a tú con
   la acción secundaria. */
.btn.is-primary { background: var(--rojo); color: var(--blanco); }
.btn.is-primary:focus-visible { background: transparent; color: var(--rojo); }

/* Sobre el fondo rojo del bloque de cierre se invierte */
.cierre .btn { border-color: var(--blanco); color: var(--blanco); }
.cierre .btn:focus-visible { background: var(--blanco); color: var(--rojo); }
.cierre .btn.is-primary { background: var(--blanco); color: var(--rojo); }
.cierre .btn.is-primary:focus-visible { background: transparent; color: var(--blanco); }

/* Los cuatro estados de hover del botón, juntos y tras la guarda. Los
   :focus-visible de arriba quedan deliberadamente FUERA: si se encerraran
   aquí, quien navega con teclado en un táctil se quedaría sin estilo de
   foco. El desplazamiento de 2px es el único transform de hover del sistema
   — nada de scale en botones. */
@media (hover: hover) {
  .btn:hover { background: var(--rojo); color: var(--blanco); transform: translateY(-2px); }
  .btn.is-primary:hover { background: transparent; color: var(--rojo); }
  .cierre .btn:hover { background: var(--blanco); color: var(--rojo); }
  .cierre .btn.is-primary:hover { background: transparent; color: var(--blanco); }
}

/* Foco visible — el sistema no lo definía.
   Fuera los tabindex="-1": son paneles de resultado que el script enfoca para
   que el lector de pantalla los anuncie, no algo que el usuario alcance con
   el tabulador. Con el anillo, el panel de resultado salía enmarcado. */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--linea-regular) solid var(--rojo);
  outline-offset: 3px;
}
.cierre :where(a, button):focus-visible { outline-color: var(--blanco); }

/* ==========================================================================
   NAVEGACIÓN
   Patrón IM8: títulos de sección a la izquierda, logo al centro y los dos
   CTA a la derecha. En móvil: hamburguesa, logo y panel (ver RESPONSIVE).
   ========================================================================== */
.nav {
  border-bottom: var(--linea-regular) solid var(--rojo);
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
}
.nav .wrap {
  max-width: 1320px;   /* más ancha que el contenedor: tres grupos en una fila */
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  min-height: 64px;
}
/* La barra es flex: sin esto los títulos quedan separados solo por el espacio
   en blanco del HTML, que es lo que los hacía verse apelmazados. */
.nav-links {
  display: flex; align-items: center; flex: 1;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
/* Los dos CTA se leen como un grupo aparte de los títulos de sección */
.nav-acciones {
  display: flex; align-items: center;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  margin-left: auto;   /* empuja los CTA al extremo derecho */
}
.nav a {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  white-space: nowrap;
}
/* Solo los títulos de sección: los CTA son botones y no llevan ni el padding
   vertical ni el subrayado de hover. */
.nav-links > a { padding: 0.5rem 0; }
/* Sin hover real —táctiles— el estado se queda pegado tras el toque.
   El sistema de movimiento pide la guarda en todo hover. */
@media (hover: hover) {
  .nav-links > a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
/* Botón de la barra: mismo objeto, escala de navegación */
.nav .btn-nav { font-size: var(--fs-nav); padding: 0.78em 1.6em; }

/* Botón hamburguesa (solo móvil): 3 líneas centradas, sin logotipo */
.nav-toggle {
  display: none;
  margin-inline: auto;
  background: none; border: 0; padding: 12px;
  cursor: pointer; line-height: 0;
}
.nav-toggle span {
  display: block; width: 30px; height: 3px;
  background: var(--rojo); margin: 5px 0;
}
/* Logo al centro de la barra — centrado en la barra entera, no en el hueco
   entre links y botones, que no mide lo mismo de cada lado. */
.nav-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.nav-logo img { height: 42px; width: auto; }

/* La barra de Professionals es blanca: Ambassadors la pone sobre arena con
   los títulos en blanco. Es la única diferencia cromática entre los dos
   portales y viene del entregable de Prójimo (ver DESIGN-SYSTEM.md). */

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.section { padding-block: var(--bloque-y); }

/* Rejilla de dos columnas: contenido + imagen */
.split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.split.media-left { grid-template-columns: 45fr 55fr; }
/* min-width:auto en hijos de grid deja que un contenido ancho (p. ej. una
   tabla) infle la columna y desborde el viewport. */
.split > * { min-width: 0; }

/* Fotografía: SIN degradados. La guía de Prójimo pedía que la foto se
   disolviera hacia el blanco, pero Bëne pidió expresamente no usar fundidos y
   mostrar la imagen completa. Se retiran las máscaras (.foto-flotante ya no
   la usaba ninguna pantalla). */
/* ── Hero: patrón IM8 ──
   Dos mitades a sangre. La foto llena su mitad a todo el alto de la pantalla
   menos la barra (object-fit: cover). En Professionals el archivo es 16:9:
   el encuadre se centra en la doctora y los envases, que viven en el lado
   derecho de la foto. El texto se alinea
   con el borde derecho del contenedor de 1100, igual que el resto. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(560px, calc(100svh - 66px), 880px);  /* barra blanca de 64 px + línea */
}
.hero-media { position: relative; overflow: hidden; }
.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}
.hero-texto {
  display: flex; align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: clamp(2rem, 4.5vw, 4.5rem)
    max(var(--gutter), calc((100% * 2 - var(--contenedor)) / 2));
}
.hero-texto > div { max-width: 36rem; }
@media (max-width: 900px) {
  /* Móvil: foto arriba pegada a la barra, texto centrado debajo */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { aspect-ratio: 1 / 1; }
  .hero-texto {
    padding: clamp(2.25rem, 8vw, 3rem) var(--gutter) clamp(3rem, 10vw, 4rem);
    text-align: center;
    justify-content: center;
  }
  .hero-texto .medida { margin-inline: auto; }
  .hero-texto .acciones { justify-content: center; }
}

/* Producto flotante con sombra suave proyectada.
   Ancho < 100% a propósito: al rotar, el bounding box crece ~14 % y con el
   producto a ancho completo desbordaba el viewport en móvil. */
.producto {
  filter: drop-shadow(0 34px 30px rgba(90, 60, 55, 0.22));
  width: 82%;
  margin-inline: auto;
}

/* ── Recorte de producto de la carpeta COMBINACIONES ──────────────────────
   El mismo archivo y el mismo tamaño que en Ambassadors: 1080x1930_volando
   compuesto sobre blanco puro (prod-combinacion.jpg). Es opaco, así que el
   drop-shadow de .producto sombrearía el rectángulo en vez del envase. */
.producto.is-combinacion {
  filter: none;              /* la sombra ya viene horneada sobre blanco */
  /* El blanco del JPG no debe tapar el texto que la imagen cruza por la
     izquierda: multiply deja el blanco transparente sobre la página blanca. */
  mix-blend-mode: multiply;
  width: 118%;
  max-width: none;
  /* Sale de su columna hacia la izquierda y se cruza con los bloques de arriba
     y de abajo. El desbordamiento va sólo hacia dentro del contenedor, nunca
     hacia el borde del viewport, para no crear scroll horizontal. */
  margin-inline-start: -18%;
  margin-block: clamp(-7rem, -5vw, -2.5rem);
}
/* Móvil: el recorte vuelve a su caja. Va DESPUÉS de la regla base a
   propósito: en Ambassadors la regla móvil está antes y la base la pisa, y en
   móvil la imagen se sale 65 px por la izquierda. */
@media (max-width: 900px) {
  .producto.is-combinacion { width: 72%; margin-inline: auto; margin-block: 0; }
}

/* ── Beneficios: 2 columnas SIN línea, solo espacio en blanco ── */
.beneficios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4.5rem);
}
.beneficio h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin-bottom: 0.35em;
}

/* ── Beneficios con foto: patrón de la sección "Perks" de IM8 ──
   Titular centrado y cuatro tarjetas en fila: foto vertical 3:4, título y
   texto centrados debajo. Esquinas rectas: el sistema no admite radio, así
   que las fotos van en rectángulo limpio, sin marco ni sombra. */
.perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  text-align: center;
}
.perk-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.perk h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 1.4rem 0 0.55em;
  text-wrap: balance;
}
.perk p { max-width: 30ch; margin-inline: auto; }
@media (max-width: 900px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.75rem; } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } .perk-foto { aspect-ratio: 4 / 5; } }

/* ── Pasos: numerales grandes unidos por una línea (patrón IM8) ──
   El número es rojo al 14 %: el único "tono claro" del sistema sale del
   mismo rojo, no de un gris. La línea hiperdelgada va del centro de un paso
   al del siguiente; el número lleva fondo blanco para cortarla limpio. */
.pasos {
  --paso-gap: clamp(1.5rem, 3vw, 2.75rem);
  --paso-num: clamp(3rem, 2.2rem + 3vw, 4.75rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--paso-gap);
  text-align: center;
}
.paso { position: relative; }
.paso:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--paso-num) / 2);
  left: 50%;
  width: calc(100% + var(--paso-gap));
  border-top: var(--linea-hiper) solid var(--rojo-hairline);
}
.paso-num {
  position: relative; z-index: 1;
  display: inline-block;
  padding-inline: 0.3em;
  background: var(--blanco);
  font-size: var(--paso-num);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(155, 27, 47, 0.14);
  font-variant-numeric: tabular-nums;
}
.paso h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 1.1rem 0 0.6em;
}
.paso p { max-width: 30ch; margin-inline: auto; }

/* ==========================================================================
   BLOQUE DE CIERRE — el único fondo rojo a sangre completa
   ========================================================================== */
.cierre {
  background: var(--rojo);
  color: var(--blanco);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(1.75rem, 3vw, 2.5rem);
}
.cierre-cuerpo > * + * { margin-top: 1.6rem; }
/* Kicker sin marco: con recuadro se leía como un botón junto al CTA real */
.cierre-kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
/* Titular a dos líneas: la segunda es el tagline de marca, en peso regular.
   El contraste es de peso y no de color — el sistema sólo tiene rojo y blanco. */
.cierre-titulo {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.cierre-titulo span { font-weight: var(--fw-regular); }
.cierre-texto { max-width: 52ch; margin-inline: auto; opacity: 0.92; }
.cierre-cuerpo .btn { margin-top: 0.6rem; }
/* Pie: logo y aviso legal, separados del cuerpo por una línea blanca tenue */
.cierre-pie { margin-top: clamp(4rem, 8vw, 6.5rem); }
.cierre-pie::before {
  content: ""; display: block;
  border-top: var(--linea-hiper) solid rgba(255, 255, 255, 0.28);
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}
.cierre-pie img { height: clamp(40px, 4vw, 54px); width: auto; margin-inline: auto; }
.cierre-aviso {
  max-width: 88ch;
  margin: 1.25rem auto 0;
  font-size: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
  line-height: 1.6;
  opacity: 0.8;
}

/* ── Utilidades ── */
.hide-sm { }

/* ── Utilidades de ritmo ── */
.stack-xs > * + * { margin-top: 0.5rem; }
.stack-sm > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.6rem; }
.stack-lg > * + * { margin-top: 2.5rem; }
.acciones { display: flex; gap: 1rem; flex-wrap: wrap; }
.centrado { text-align: center; }
.medida { max-width: 46ch; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .hide-sm { display: none !important; }
}

/* Navegación compacta hasta 1240 px. Ambassadors la corta en 1100, pero con
   el cuarto link (FAQs) el grupo de la izquierda crece ~70 px y, con el logo
   centrado, "FAQs" se le encimaba: -14 px a 1116 y 8 px a 1180. A 1241 px
   quedan ~30 px libres a cada lado del logo. */
@media (max-width: 1240px) {
  /* Navegación: hamburguesa pegada a la izquierda y logo centrado. El logo
     se centra en la barra, no en el espacio que deja el botón. */
  /* La barra crece para que el logo vaya a 64 px, el tamaño que tenía el
     lockup del hero en móvil. */
  .nav { --nav-h: 84px; }
  .nav .wrap { position: relative; justify-content: flex-start; min-height: var(--nav-h); }
  .nav-toggle { display: block; margin: 0 0 0 -12px; }  /* -12px: las líneas, no el padding, tocan el gutter */
  .nav-logo img { height: 64px; }

  /* Panel: entra desde la izquierda y cubre la pantalla bajo la barra, que
     se queda visible para cerrar. visibility acompaña al transform para que
     los links no reciban foco con el panel fuera de pantalla. */
  .nav .nav-links {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(var(--nav-h) + var(--linea-regular));
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--blanco);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .nav .nav-links.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-base) var(--ease), visibility 0s;
  }
  .nav .nav-links > a {
    width: 100%;
    padding: 1.1rem 0;
    font-size: var(--fs-h3);
    border-bottom: var(--linea-hiper) solid var(--rojo-hairline);
  }
  .nav .nav-acciones {
    flex-direction: column; width: 100%;
    margin: 2rem 0 0; gap: 0.75rem;
  }
  .nav .nav-acciones .btn { width: 100%; }
  /* Sólo en <html>: si body también lleva overflow:hidden se vuelve su propio
     contenedor de scroll con scrollTop 0, y la barra sticky salta a su sitio
     original arriba de la página — fuera de pantalla, con la X dentro. */
  .nav-abierto { overflow: hidden; }
  /* Los anclas del menú aterrizan bajo la barra sticky: en móvil el aire de
     la sección (64 px) es menor que la barra (84 px) y el titular quedaba
     tapado. En escritorio el aire ya supera a la barra de 64 px.
     84 px fijo y no var(--nav-h): esa variable vive en .nav, no en <html>. */
  html { scroll-padding-top: calc(84px + var(--linea-regular)); }

  /* Hamburguesa → X al abrir */
  .nav-toggle span { transition: transform var(--dur-base) var(--ease), opacity var(--dur-quick) var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .nav .nav-links, .nav .nav-links.is-open, .nav-toggle span { transition: none; }
  }
}

@media (max-width: 900px) {
  /* Hero y bloques: columna única, texto y CTA centrados */
  .split, .split.media-left { grid-template-columns: 1fr; }
  .split .col-texto { text-align: center; }
  .split .col-texto .kicker { display: inline-block; }
  .split .col-texto .medida { margin-inline: auto; }
  /* img es display:block por la regla global, así que text-align no centra el
     lockup del hero: hay que hacerlo explícito. */
  .split .col-texto > img { margin-inline: auto; }
  .split .acciones { justify-content: center; }
  /* En móvil la foto va a ancho completo, debajo del texto */
  .split .col-media { order: 2; margin-inline: calc(var(--gutter) * -1); }

  /* Beneficios: lista vertical, un ítem tras otro */
  .beneficios { grid-template-columns: 1fr; }

  /* Pasos: apilados y centrados; la línea que une los números se retira
     porque ya no hay otro número al lado con quien unirse. */
  .pasos { grid-template-columns: 1fr; gap: 2.25rem; }
  .paso:not(:last-child)::before { display: none; }
  .paso h3 { margin-top: 0.6rem; margin-bottom: 0.5em; }
}

@media (max-width: 560px) {
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   COMPONENTES DE APLICACIÓN
   La guía cubre la landing. Todo lo de abajo es extrapolación, sujeta a las
   mismas reglas: solo rojo y blanco, dos grosores de línea, radio 0, sin
   rellenos salvo la inversión a rojo sólido.

   Sustituciones respecto a un sistema de UI convencional:
     tarjeta        → bloque separado por hairline
     campo en caja  → campo con subrayado
     badge de color → relleno sólido vs. contorno vs. contorno rebajado
     barra negra    → barra blanca con línea regular
   ========================================================================== */

/* ── Cabecera de pantalla interna ── */
.topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.25rem;
  border-bottom: var(--linea-regular) solid var(--rojo);
}
.topline img { height: clamp(48px, 4.6vw, 60px); width: auto; }  /* era 34→44: se perdía */
.topline a {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: var(--fs-nav); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  text-decoration: underline; text-underline-offset: 4px; white-space: nowrap;
}

/* ── Progreso: pista hiperdelgada, avance sólido ── */
.pbar { height: 3px; background: var(--rojo-hairline); }
.pbar > i { display: block; height: 100%; background: var(--rojo); transition: width .35s ease; }
.pmeta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-kicker); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  margin-top: 0.65rem;
}
.pmeta > :last-child { white-space: nowrap; }  /* "~5 min" no se parte */

/* ── Campos: subrayado, no caja ── */
.field { display: flex; flex-direction: column; }
.field > label {
  font-size: var(--fs-kicker); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-regular);
  color: var(--rojo); background: transparent;
  border: 0; border-bottom: var(--linea-regular) solid var(--rojo);
  border-radius: var(--radio); padding: 0.55rem 0; width: 100%;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--rojo); opacity: 0.42; }
.field select { appearance: none; cursor: pointer; }
.field .hint { font-size: var(--fs-kicker); opacity: 0.72; margin-top: 0.45rem; }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.fgrid .full { grid-column: 1 / -1; }

/* ── Casilla y opción: cuadradas, se rellenan al activarse ── */
.box {
  width: 20px; height: 20px; flex-shrink: 0;
  border: var(--linea-regular) solid var(--rojo); border-radius: var(--radio);
  position: relative; margin-top: 2px;
}
.check { display: flex; gap: 0.85rem; align-items: flex-start; cursor: pointer; position: relative; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check:has(input:checked) .box { background: var(--rojo); }
.check:has(input:checked) .box::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 5px; height: 11px;
  border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check:has(input:focus-visible) .box { outline: var(--linea-regular) solid var(--rojo); outline-offset: 3px; }

/* Opción del test: contorno; seleccionada = rojo sólido */
.opt {
  display: flex; align-items: center; gap: 0.9rem;
  border: var(--linea-regular) solid var(--rojo); border-radius: var(--radio);
  padding: 0.95rem 1.15rem; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease),
              color            var(--dur-quick) var(--ease);
}
/* Sin hover real —táctiles— el estado se queda pegado tras el toque.
   El sistema de movimiento pide la guarda en todo hover. */
@media (hover: hover) {
  .opt:hover { background: var(--rojo); color: var(--blanco); }
}
.opt .dot {
  width: 16px; height: 16px; flex-shrink: 0;
  border: var(--linea-regular) solid currentColor; border-radius: 50%;
}
.opt[aria-checked="true"] { background: var(--rojo); color: var(--blanco); }
.opt[aria-checked="true"] .dot { background: var(--blanco); }

/* ── Estado: relleno = resuelto · contorno = en curso · rebajado = descartado ── */
.chip {
  display: inline-block; font-size: var(--fs-kicker); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  border: var(--linea-hiper) solid var(--rojo); border-radius: var(--radio);
  padding: 0.28em 0.85em; white-space: nowrap;
}
.chip.is-solid { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
.chip.is-muted { border-color: var(--rojo-hairline); opacity: 0.62; }

/* ── Tabla: solo hairlines, sin fondos ni cebra ── */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; font-size: var(--fs-kicker); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 0 1rem 0.75rem 0; border-bottom: var(--linea-regular) solid var(--rojo);
}
.tabla td {
  padding: 1.05rem 1rem 1.05rem 0; vertical-align: top;
  border-bottom: var(--linea-hiper) solid var(--rojo-hairline);
  font-size: var(--fs-small);
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla .nombre { font-weight: var(--fw-bold); }
.tabla .sub { opacity: 0.72; }
.tabla-scroll { overflow-x: auto; }

/* ── Panel de back office: barra blanca con línea regular, no negra ── */
.panel { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.panel-side {
  border-right: var(--linea-regular) solid var(--rojo);
  padding: 1.75rem 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; background: var(--blanco);
}
.panel-side .marca { padding: 0 1.5rem 1.5rem; border-bottom: var(--linea-hiper) solid var(--rojo-hairline); }
.panel-side .marca img { height: 38px; width: auto; }
.panel-side .marca .tag {
  display: block; margin-top: 0.6rem; font-size: var(--fs-kicker);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); opacity: 0.72;
}
.panel-nav { padding: 1rem 0.75rem; }
.panel-nav a {
  display: block; padding: 0.7rem 0.75rem; text-decoration: none;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}
/* Sin hover real —táctiles— el estado se queda pegado tras el toque.
   El sistema de movimiento pide la guarda en todo hover. */
@media (hover: hover) {
  .panel-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.panel-nav a.is-active { background: var(--rojo); color: var(--blanco); font-weight: var(--fw-bold); }
.panel-side .pie { margin-top: auto; padding: 1.25rem 1.5rem 0; border-top: var(--linea-hiper) solid var(--rojo-hairline); }
.panel-main { min-width: 0; display: flex; flex-direction: column; }
.panel-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: var(--linea-regular) solid var(--rojo); position: sticky; top: 0;
  background: var(--blanco); z-index: 20;
}
.panel-top h1 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.panel-body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.panel-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0; }
.panel-toggle span { display: block; width: 26px; height: 3px; background: var(--rojo); margin: 4px 0; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(155,27,47,0.28); z-index: 90; }
.scrim.is-open { display: block; }

/* ── Cifras del panel ── */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cifra { padding: 0 1.5rem; }
.cifra + .cifra { border-left: var(--linea-hiper) solid var(--rojo-hairline); }
.cifra:first-child { padding-left: 0; }
.cifra .n { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: var(--fw-bold); line-height: 1; }
.cifra .l { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: 0.5rem; }

/* ── Cajón lateral de detalle ── */
.drawer {
  position: fixed; inset-block: 0; right: 0; width: 470px; max-width: 92vw;
  background: var(--blanco); border-left: var(--linea-regular) solid var(--rojo);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease);
  z-index: 210; display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer-head { padding: 1.5rem; border-bottom: var(--linea-regular) solid var(--rojo); display: flex; justify-content: space-between; gap: 1rem; }
.drawer-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 1.25rem 1.5rem; border-top: var(--linea-regular) solid var(--rojo); }
.drawer-close { background: none; border: 0; cursor: pointer; color: var(--rojo); font-size: 1.5rem; line-height: 1; padding: 0.25rem 0.5rem; }
.dato + .dato { margin-top: 1.1rem; }
.dato .k { font-size: var(--fs-kicker); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.dato .v { font-size: var(--fs-small); }

/* ── Línea de tiempo del estatus ── */
.ruta { display: grid; gap: 0; }
.hito { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.hito:last-child { padding-bottom: 0; }
.hito::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: var(--linea-hiper); background: var(--rojo-hairline); }
.hito:last-child::before { display: none; }
.hito .marca-hito {
  width: 24px; height: 24px; border: var(--linea-regular) solid var(--rojo);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: var(--fw-bold); background: var(--blanco); z-index: 1;
}
.hito.is-done .marca-hito { background: var(--rojo); color: var(--blanco); }
.hito.is-next .marca-hito { border-color: var(--rojo-hairline); opacity: 0.6; }
.hito h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.hito p { font-size: var(--fs-small); opacity: 0.8; }

/* ── Zona de carga de archivo ── */
.drop {
  display: block; border: var(--linea-regular) dashed var(--rojo); border-radius: var(--radio);
  padding: 1.5rem; text-align: center; cursor: pointer;
}
/* Sin hover real —táctiles— el estado se queda pegado tras el toque.
   El sistema de movimiento pide la guarda en todo hover. */
@media (hover: hover) {
  .drop:hover { background: rgba(155,27,47,0.04); }
}
.drop input { display: none; }
.drop .t { font-weight: var(--fw-bold); font-size: var(--fs-small); }
.drop .s { font-size: var(--fs-kicker); opacity: 0.75; margin-top: 0.3rem; }
.drop.is-filled { border-style: solid; }
.drop.is-filled .s { opacity: 1; font-weight: var(--fw-medium); }

/* ── Aviso ── */
.aviso {
  border-left: var(--linea-regular) solid var(--rojo);
  padding: 0.9rem 1.1rem; font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
  .panel-side {
    position: fixed; z-index: 100; width: 250px;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease);
  }
  .panel-side.is-open { transform: none; }
  .panel-toggle { display: block; }
  .fgrid { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .cifra:nth-child(odd) { padding-left: 0; }
  .cifra:nth-child(3) { border-left: 0; }
  .tabla-wide { min-width: 720px; }
}
@media (max-width: 520px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { padding-left: 0; border-left: 0 !important; }
  .cifra + .cifra { border-top: var(--linea-hiper) solid var(--rojo-hairline); padding-top: 1.1rem; }
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────
   Patrón de la referencia de IM8: columna angosta, <details> nativo separado
   por hairlines y un + que gira 45° hasta volverse ×. Traducido al sistema:
   rojo único, hairline como separador, respuesta al 80 % como .fila .s. */
.faq { max-width: 800px; }
.faq > .h2 { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.faq-item { border-bottom: var(--linea-hiper) solid var(--rojo-hairline); }
.faq-item:first-child { border-top: var(--linea-hiper) solid var(--rojo-hairline); }

.faq-pregunta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-pregunta::-webkit-details-marker { display: none; }
.faq-pregunta::marker { content: ""; }
.faq-pregunta:focus-visible { outline: var(--linea-regular) solid var(--rojo); outline-offset: 4px; }

/* El + se dibuja con dos trazos del grosor regular; al abrir gira a ×. */
.faq-icono {
  position: relative; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  transition: transform var(--dur-base) var(--ease);
}
.faq-icono::before,
.faq-icono::after {
  content: ""; position: absolute; inset: 50% 0 auto;
  height: var(--linea-regular); margin-top: calc(var(--linea-regular) / -2);
  background: var(--rojo);
}
.faq-icono::after { transform: rotate(90deg); }
.faq-item[open] .faq-icono { transform: rotate(45deg); }

.faq-respuesta {
  padding: 0 3rem 1.75rem 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  opacity: 0.8;
}
.faq-respuesta > * + * { margin-top: 0.75rem; }
/* Pasos y viñetas dentro de una respuesta: sangría corta, sin tercer color */
.faq-respuesta ul { list-style: disc; padding-left: 1.25rem; }
.faq-respuesta ol { list-style: decimal; padding-left: 1.25rem; }
.faq-respuesta li + li { margin-top: 0.4rem; }
.faq-respuesta li::marker { font-weight: var(--fw-medium); }
.faq-respuesta a { text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) {
  .faq-pregunta span:first-child { transition: opacity var(--dur-quick) var(--ease); }
  .faq-pregunta:hover span:first-child { opacity: 0.7; }
}
@media (max-width: 560px) {
  .faq-pregunta { padding: 1.25rem 0; }
  .faq-respuesta { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq-icono { transition: none; } }