/* ==========================================================================
   Bëne Ambassadors — Sistema visual
   Implementa el sistema de Prójimo · Dirección Creativa, verificado contra
   BËNE_LANDING AMBASS.png (2953×4326).

   Este archivo es **el mismo sistema que Bëne Professionals**: se mantiene en
   paridad con `bene-professionals/mockups/assets/bene.css`. Cualquier cambio
   estructural debe portarse a los dos. Lo único propio de Ambassadors son los
   bloques marcados abajo: el reparto del titular, los fundidos de la foto del
   hero y los componentes de la cuenta del embajador.

   Escala derivada del mockup (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)

   Medición del mockup: #FFFFFF 62.5 % · #9B1B2F 19.4 % · resto, fotografía.
   Cero grises de interfaz. No introducir un tercer color, un tercer grosor
   de línea, un radio > 0 ni una sombra de caja.
   ========================================================================== */

@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);
  /* PROPIO DE AMBASSADORS: el acento de arena de la barra de navegación.
     No es un gris de interfaz nuevo — ver el bloque NAVEGACIÓN más abajo. */
  --arena: #C2B8AC;

  /* ── 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
   Ver MOTION.md. 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));
}
/* MOTION.md corta el stagger 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;
  /* PROPIO DE AMBASSADORS: el titular es más largo que el de Professionals.
     Con un <br> fijo se rompía a tres líneas desparejas, así que se deja que
     el navegador reparta. */
  text-wrap: balance;
}
.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;
  /* MOTION.md: --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, "Recibimos tu aplicación" 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.
   MOTION.md 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; }

/* ── PROPIO DE AMBASSADORS ─────────────────────────────────────────────────
   La barra de Ambassadors va sobre arena con los títulos en blanco; la de
   Professionals es blanca. No es un gris inventado: es el acento que Prójimo
   entregó para diferenciar los dos portales. Medido sobre
   BËNE_LANDING AMBASS.png — la barra ocupa 91 px de artboard (÷1.538 ≈ 59 px)
   y lleva por debajo el hairline de 2 px del rojo, que ya da .nav.
   Verificación: la barra de Ambassadors mide #C2B8AC al 97 %; la de
   Professionals, #FFFFFF al 100 %.

   ⚠️ CONTRASTE: blanco sobre arena mide 1.95:1 y NO cumple AA. Se implementa
   así por fidelidad al mockup. Pendiente de resolver con Prójimo — las dos
   salidas son oscurecer la arena o pasar los títulos a rojo (4.15:1).
   Los dos CTA viven en .nav-acciones y conservan el rojo a propósito. */
.nav { background: var(--arena); }
.nav .wrap { min-height: 59px; }
.nav-links > a { color: var(--blanco); }
.nav-toggle span { background: var(--blanco); }

/* ==========================================================================
   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;
}
/* Alterna el lado de la imagen: la columna de media va primera en el HTML y
   el reparto se invierte. En móvil el orden lo resuelve .col-media { order: 2 }. */
.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. */
/* PROPIO DE AMBASSADORS: la foto del hero se muestra completa, sin fundidos
   ni horneados en el archivo ni máscara en CSS. */
/* ── 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; el archivo es 4:5, casi la proporción de
   la mitad en escritorio, así que el recorte es mínimo). 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 - 61px), 880px);
}
.hero-media { position: relative; overflow: hidden; }
.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.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 {
  filter: drop-shadow(0 34px 30px rgba(90, 60, 55, 0.22));
  width: 82%;
  margin-inline: auto;
}

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

/* ── 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 1100 px y no 900: con el logo al centro, los
   links (≈410 px) y los CTA (≈350 px) necesitan ≈1110 px de barra para no
   chocar con él. Entre 901 y 1100 se usa la hamburguesa. */
@media (max-width: 1100px) {
  /* 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;
  }
  /* En el panel blanco los títulos vuelven al rojo del sistema */
  .nav .nav-links > a {
    color: var(--rojo);
    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; }

  /* 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. (Portar a Professionals.) */
  .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); }
  /* El recorte de producto vuelve a su caja: en una sola columna, desbordar
     hacia los lados sí sacaría scroll horizontal. */
  .producto.is-combinacion {
    width: 72%; margin-inline: auto; margin-block: 0;
  }

  /* Galería: el pie se apila y la navegación pasa a la izquierda */
  .galeria-pie { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  /* 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; }
  .paso h3 { 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.
   MOTION.md 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: 52px; width: auto; }  /* era 38: se perdía */
.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.
   MOTION.md 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.
   MOTION.md 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; }
}
/* Teléfono: las cifras se quedan en 2×2. En una sola columna las cuatro
   ocupaban la primera pantalla entera antes de llegar a la bandeja. */
@media (max-width: 520px) {
  .cifra { padding: 0 0 0 1rem; }
  .cifra:nth-child(odd) { padding-left: 0; }
  .cifra:nth-child(n + 3) { border-top: var(--linea-hiper) solid var(--rojo-hairline); padding-top: 1.1rem; }
  .cifras { gap: 1.1rem 0; }
}
/* ==========================================================================
   COMPONENTES DE AMBASSADORS
   Lo que Professionals no necesitaba: el código de referido, el avance de
   University y la lista de retos. Mismas reglas que todo lo anterior.
   ========================================================================== */

/* ── Recorte de producto de la carpeta COMBINACIONES ──────────────────────
   Estos archivos ya traen la sombra horneada sobre blanco y son opacos, así
   que el drop-shadow de .producto sombrearía el rectángulo en vez del envase.
   Son además verticales (1:1.79), no cuadrados como los recortes anteriores. */
.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);
}

/* ── Galería ──────────────────────────────────────────────────────────────
   Las fotos del shooting son verticales (2:3). Una sola a todo el ancho no
   cabría en pantalla, así que el visor es una tira: tres fotos a la vista en
   escritorio, dos en tableta, una y un poco de la siguiente en móvil. El JS
   la desplaza con transform y el visor recorta lo que queda fuera.
   Los controles NO van encima de la foto: harían falta un velo para leerlos
   sobre cualquier imagen, y un velo es un degradado. */
.galeria-visor { overflow: hidden; touch-action: pan-y; }  /* el swipe horizontal lo toma el JS */
.galeria-tira {
  --gal-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --gal-n: 3;
  display: flex;
  gap: var(--gal-gap);
  transition: transform .6s var(--ease);
}
.galeria-img {
  flex: 0 0 calc((100% - var(--gal-gap) * (var(--gal-n) - 1)) / var(--gal-n));
  min-width: 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) { .galeria-tira { --gal-n: 2; } }
@media (max-width: 560px) { .galeria-tira { --gal-n: 1.25; } }
@media (prefers-reduced-motion: reduce) { .galeria-tira { transition: none; } }

.galeria-pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: 1.1rem;
}
.galeria-texto {
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-medium);
  margin: 0;
}
.galeria-nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.1rem); }
.galeria-flecha {
  background: none; border: 0; padding: 0 0.1em;
  color: var(--rojo); cursor: pointer;
  font-family: var(--font); font-weight: var(--fw-regular);
  font-size: var(--fs-h2); line-height: 1;
}
/* Antes cambiaba el font-weight, que mueve el layout y hace saltar las
   flechas. MOTION.md sólo admite transform y color en hover. */
@media (hover: hover) {
  .galeria-flecha:hover { transform: translateY(-2px); }
}
.galeria-flecha { transition: transform var(--dur-base) var(--ease); }
.galeria-cuenta {
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1;
  margin-left: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* ── Bloque a sangre (hero y beneficios) ─────────────────────────────────────────
   La imagen sale del contenedor de 1100 y llega al borde del viewport; el
   texto se queda alineado con el resto de la página. Son tres columnas: un
   margen que replica el de .wrap, el texto, y la media.

   El margen se calcula con % del propio contenedor de rejilla y NO con 100vw:
   100vw incluye la barra de scroll, y en un Chrome con barra visible eso
   saca scroll horizontal. Con % se mide el ancho real del bloque. */
.bloque-ancho {
  display: grid;
  align-items: center;
  grid-template-columns:
    max(var(--gutter), calc((100% - var(--contenedor)) / 2 + var(--gutter)))
    1fr
    1.3fr;
}
.bloque-ancho > .col-texto {
  grid-column: 2;
  padding-inline-end: clamp(2rem, 4vw, 4rem);
}
.bloque-ancho > .col-media { grid-column: 3; }

/* Espejo: la media se va al borde izquierdo */
.bloque-ancho.media-izq {
  grid-template-columns:
    1.3fr
    1fr
    max(var(--gutter), calc((100% - var(--contenedor)) / 2 + var(--gutter)));
}
.bloque-ancho.media-izq > .col-media { grid-column: 1; }
.bloque-ancho.media-izq > .col-texto {
  grid-column: 2;
  padding-inline: clamp(2rem, 4vw, 4rem) 0;
}

/* Los bloques ya pesan por sí solos: no necesitan el ritmo completo */
.sec-beneficio { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Móvil. Va aquí y no en el bloque RESPONSIVE de arriba: las reglas base de
   .bloque-ancho se declaran en esta sección, que viene después en el
   archivo, así que allí arriba las pisaría el orden de cascada. */
@media (max-width: 900px) {
  .bloque-ancho,
  .bloque-ancho.media-izq { grid-template-columns: 1fr; }
  .bloque-ancho > .col-texto,
  .bloque-ancho.media-izq > .col-texto {
    grid-column: 1;
    padding-inline: var(--gutter);
    text-align: center;
  }
  .bloque-ancho > .col-media,
  .bloque-ancho.media-izq > .col-media { grid-column: 1; order: 2; }
  .bloque-ancho .medida { margin-inline: auto; }
  .bloque-ancho .kicker { display: inline-block; }
}

/* ── Fotografía de los bloques de beneficio ──────────────────────────────
   Las tomas de evento vienen en 2:3 y a ese alto un solo bloque ocupaba la
   pantalla entera. Se recortan a 4:5 en el archivo, no por CSS. */
.foto-beneficio { width: 100%; }

/* ── Marco del video del movimiento ──────────────────────────────────────
   El máster es 4:3. Se contiene en vez de ir a sangre: a ancho completo, un
   4:3 domina la página entera. Línea regular alrededor, radio 0, sin sombra. */
.video-marco {
  border: var(--linea-regular) solid var(--rojo);
}
.video-marco img,
.video-marco video { width: 100%; display: block; }

/* ── Lista genérica separada por hairlines (University, retos, actividad) ── */
.lista > li { padding-block: 1.15rem; }
.lista > li + li { border-top: var(--linea-hiper) solid var(--rojo-hairline); }
.lista > li:first-child { padding-top: 0; }
.fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(0.85rem, 2.5vw, 1.75rem); flex-wrap: wrap;
}
.fila .t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.3; }
.fila .s { font-size: var(--fs-small); opacity: 0.8; margin-top: 0.25rem; }
.fila .aparte { flex-shrink: 0; display: flex; align-items: center; gap: 0.85rem; }

/* Título de bloque dentro de una pantalla de aplicación */
.bloque-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: var(--linea-regular) solid var(--rojo);
}
.bloque-h h2 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.bloque-h a { font-size: var(--fs-kicker); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  text-decoration: underline; text-underline-offset: 4px; }

/* Rejilla de dos columnas para el cuerpo del dashboard */
.dos-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.dos-col > * { min-width: 0; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }

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