/* ============================================================
   Isallabs — home (v3).
   Colores, tipografía, espaciado, forma y motion vienen de
   css/tokens.css (sistema de diseño v0.1, dirección Bosque).
   Aquí solo van reglas de layout y componente. Breakpoint: 768px.
   ============================================================ */

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

html {
  height: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  background: var(--background);
  font-family: var(--font-sans);
  color: var(--text);
  overflow-x: clip;
}

/* Montaje · papel: grano fino sobre toda la página. Va encima de todo (header incluido),
   no captura el puntero y es estático, así que no hay nada que apagar con reduced-motion.
   v6.1 (2026-09-04): se revirtió la fibra fotografiada de `assets/paper/tile.webp` en
   multiply — Mauricio: «el fondo estaba mejor blanco». Vuelve el ruido SVG a `--grain: 0.10`,
   que es lo que había antes de la v6. Los assets no se borran: siguen en `assets/paper/`. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }
a { color: inherit; }
b { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hairline { height: 0.5px; width: 100%; background: var(--border); }

/* ============ shared ============ */

.logo-btn { display: flex; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; }
.logo {
  display: inline-flex; align-items: center;
  font-size: 19px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); line-height: 1;
}
/* El isotipo delante del logotipo (2026-09-07). El aire va en el `margin` del ::before y NO
   en un `gap` del flex: con gap el flex tambien separaba `.logo__dot`, y el punto verde es
   parte del logotipo, no un elemento suelto. Va el vector y no la version facetada: a 21 px
   un raster de veinte caras se convierte en una mancha. */
.logo::before {
  content: ""; width: 21px; height: 21px; flex: none; margin-right: 9px;
  background: url("../assets/isotipo.svg") center / contain no-repeat;
}
@media (min-width: 768px) { .logo::before { width: 23px; height: 23px; } }
.logo__dot { color: var(--accent); }
.logo--sm { font-size: 17px; }

/* una sola tipografía en todo el sitio: el badge también va en Funnel Sans */
.mini-badge {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px; flex-shrink: 0;
  background: var(--text); color: var(--background);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: -0.12px;
  white-space: nowrap;
}
.mini-badge b { font-weight: 600; }
.mini-badge--counter::before {
  content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: var(--accent-400); flex-shrink: 0;
}

.btn-cta {
  display: flex; height: 36px; padding: 12px 16px; justify-content: center; align-items: center; gap: 10px;
  border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-cta:hover { background: var(--accent-hover); }
.btn-cta:active { transform: scale(0.98); background: var(--accent-800); }
.btn-cta--sm { padding: 0 14px; border-radius: 12px; letter-spacing: -0.14px; }
.btn-cta--lg { height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; }

.link-secondary {
  font-size: 15px; font-weight: 360; color: var(--text-muted); text-decoration: none;
  border-bottom: 1px dotted var(--text-faint); padding-bottom: 1px;
  transition: color 0.15s;
}
.link-secondary:hover { color: var(--text); }

/* pill con borde: el segundo botón del hero (el referente lleva dos botones, uno relleno y uno de línea) */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-size: 15px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: all 0.15s ease;
}
.btn-ghost:hover { background: var(--accent-soft); }

.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.cta-row--hero { gap: 12px; }

.glow {
  pointer-events: none; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--glow);
}

/* reveal genérico (IntersectionObserver añade .is-in) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.7s var(--ease-snap); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============ Montaje: papel fotografiado (fondo con profundidad) ============ */
/* Montaje v6 · papel fotografiado: la profundidad del fondo es una hoja real bajo luz de
   estudio (asset de image-2), nunca un degradado dibujado. Va debajo de todo en la sección
   (z -1) y se funde con el papel de la página con una máscara arriba y abajo. */
.paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.paper img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
}
/* El hero abre con el charco de luz: la hoja se ancla abajo para que la zona más clara caiga
   detrás de la ficha verde del nexo y le haga de halo. Arriba, en el titular, la hoja es más
   oscura — eso es la caída de luz, y por eso el texto se lee sobre papel y no sobre plano. */
.paper--hero img { mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); object-position: center bottom; }
.paper--hero { height: min(100%, 1180px); }
/* Secciones largas (`#que-hacemos`, `#servicios`): con una hoja 3:2 el `cover` recorta tanto
   a lo alto que solo se ven sus columnas centrales y la luz queda plana. La hoja 2:3 vertical
   se recorta a lo ancho y se ve entera de arriba abajo, así que la luz respira a lo largo de
   la sección. La máscara se estrecha porque hay más recorrido que fundir. */
.paper--tall img {
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
}

/* ============ header · mobile ============ */

.hdr-mobile { position: fixed; top: 24px; left: 16px; right: 16px; z-index: 100; }
@media (min-width: 768px) { .hdr-mobile { display: none; } }

.hdr-mobile__pill {
  display: flex; flex-direction: column; padding: 16px 0; border-radius: 20px; overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: var(--border-glass);
  box-shadow: var(--shadow-header-m);
}
.hdr-mobile__row { display: flex; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 16px; }
.hdr-mobile__left { display: flex; align-items: center; gap: 10px; }
.hdr-mobile__right { display: flex; align-items: center; gap: 8px; }
.hdr-mobile__burger {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--surface); border: 0.5px solid var(--surface); cursor: pointer;
  color: var(--text);
}
.hdr-mobile__drawer {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.35s var(--ease-soft), opacity 0.25s ease;
}
.hdr-mobile__pill.is-open .hdr-mobile__drawer { grid-template-rows: 1fr; opacity: 1; }
.hdr-mobile__drawer-clip { overflow: hidden; min-height: 0; }
.hdr-mobile__drawer-pad { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 0; }
.hdr-mobile__menu { border-radius: 12px; overflow: hidden; background: var(--surface); border: 0.5px solid var(--surface); }
.hdr-mobile__menu-inner { display: flex; flex-direction: column; padding: 18px; gap: 18px; }
.hdr-mobile__link {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; color: var(--text); text-decoration: none; letter-spacing: -0.14px;
  background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
}

/* ============ header · desktop ============ */

.hdr-desktop { display: none; }
@media (min-width: 768px) {
  .hdr-desktop {
    position: fixed; top: 40px; left: 0; right: 0; z-index: 50;
    display: flex; justify-content: center; padding: 0 24px;
  }
  .hdr-desktop__pill {
    display: flex; width: 100%; max-width: 1000px;
    padding: 20px 20px 20px 32px; justify-content: space-between; align-items: center;
    border-radius: 20px; border: var(--border-glass);
    background: var(--glass-bg);
    box-shadow: var(--shadow-header);
    backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  }
  .hdr-desktop__left { display: flex; align-items: center; gap: 16px; }
  .hdr-desktop__nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 360; color: var(--text-muted); }
  .hdr-desktop__nav a { text-decoration: none; transition: color 0.15s; }
  .hdr-desktop__nav a:hover { color: var(--text); }
}

/* ============ secciones y tipografía ============ */

/* position: relative para que el papel fotografiado (.paper, z -1) se ancle a la sección */
.section { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 140px; padding: 0 16px; scroll-margin-top: 96px; }
/* v7: el aire entre secciones baja de 200 a 160 px. A 200 la página se leía desconectada,
   no elegante: cada bloque parecía una página distinta. */
@media (min-width: 768px) { .section { margin-top: 160px; padding: 0 24px; scroll-margin-top: 120px; } }

/* el hero abre la página: el nexo, el desfile y el diagnóstico exprés viven dentro de la
   misma sección. En desktop el padding baja de 200 a 160 px: el nexo necesita el aire abajo */
.section--hero { margin-top: 0; padding-top: 152px; }
@media (min-width: 768px) { .section--hero { padding-top: 160px; } }
@media (max-height: 800px) and (min-width: 768px) { .section--hero { padding-top: 136px; } }

.section--sc { overflow-x: clip; }

.section-head { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; text-align: center; }
/* v7: el gap baja de 72 a 40. Con 72 y el eyebrow compensando a −48, entre el H2 y su
   bajada quedaban ~100 px de vacío. */
@media (min-width: 768px) { .section-head { gap: 40px; max-width: 1200px; } }

.section-head--hero { position: relative; z-index: 1; gap: 24px; }
@media (min-width: 768px) { .section-head--hero { gap: 32px; } }

/* capa Explica: el display va a peso 700 y tracking más cerrado — la fuerza la pone
   el peso, no un color de fondo */
.display {
  font-size: 32px; font-weight: var(--weight-display); text-align: center; color: var(--text);
  letter-spacing: -1.4px; line-height: 40px;
  max-width: var(--h2-max-m, 340px);
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .display { font-size: 76px; letter-spacing: -0.045em; line-height: 1.02; max-width: var(--h2-max, 1000px); }
}
.display--h1 { max-width: 330px; }
/* el hero va centrado (v6): el tope lo fija el rotador — ninguna de sus cinco líneas puede
   recortarse a 1024 / 1280 / 1440 (medido con Playwright en tools/probe-nexus.mjs) */
@media (min-width: 768px) {
  .display--h1 {
    font-size: min(68px, 4.9vw); line-height: 1.04;
    letter-spacing: -0.04em; max-width: 1000px;
  }
}
.lead {
  font-size: 14px; font-weight: 360; text-align: center; line-height: 20px;
  letter-spacing: -0.14px; color: var(--text-muted);
  max-width: var(--lead-max-m, 330px);
  margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) {
  .lead { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; max-width: var(--lead-max, 620px); }
}
.lead--hero { max-width: 378px; }
@media (min-width: 768px) { .lead--hero { max-width: 640px; } }

/* la oferta bajo los botones del hero: qué dura, qué cuesta y cuándo se cobra. El margen
   negativo se come parte del gap del head (24 / 32) y la deja pegada a los botones. */
.hero-note {
  font-size: 13.5px; font-weight: 400; letter-spacing: -0.13px;
  color: var(--text-faint); text-align: center; margin-top: -12px;
}
@media (min-width: 768px) { .hero-note { font-size: 14px; } }

/* kicker: la frase que abre la necesidad */
.kicker {
  font-size: 15px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.4;
  color: var(--text); text-align: center; max-width: 340px; margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 768px) { .kicker { font-size: 18px; max-width: 640px; } }

/* ============ capa Explica: marcador y eyebrow narrador ============ */
/* Semántica fija: ámbar = el problema (tú coordinando), verde = la solución
   (un solo responsable). No se usa en ningún otro sentido. */

/* el marcador es una franja de resaltador que barre de izquierda a derecha cuando el
   bloque entra: verde = la solución, ámbar = el dolor. Nunca color de texto. */
.mk {
  font-style: normal; color: inherit;
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat; background-size: 0% 0.4em; background-position: 0 90%;
  padding: 0 0.06em; margin: 0 -0.06em; border-radius: 2px;
  transition: background-size 0.75s var(--ease-snap) 0.25s;
}
.mk--warn { background-image: linear-gradient(var(--marker-warn), var(--marker-warn)); }
.kicker .mk { font-weight: 600; }
.is-in .mk, .mk.is-in { background-size: 100% 0.4em; }
/* en el hero no hay reveal: barre solo al cargar */
.section-head--hero .mk { animation: mkIn 0.7s var(--ease-snap) 0.9s forwards; }
.rotator__word .mk { background-size: 100% 0.36em; animation: none; }
@keyframes mkIn { to { background-size: 100% 0.4em; } }

/* eyebrow narrador: rótulo corto que dice qué explica el bloque. Nunca uppercase.
   El margen negativo compensa el gap del .section-head (24 / 40 px desde la v7). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: -8px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.14px; color: var(--accent-800);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: var(--accent); }
@media (min-width: 768px) { .eyebrow { font-size: 15px; margin-bottom: -16px; } }

/* rotador de la última línea del h1 */
.rotator { display: block; overflow: hidden; height: 1.25em; }
.rotator__track { display: block; transition: transform 520ms var(--ease-snap); }
.rotator__word {
  display: block; white-space: nowrap; height: 1.25em; line-height: 1.25;
  opacity: 0; transition: opacity 300ms;
}
.rotator__word.is-active { opacity: 1; }
@media (min-width: 768px) {
  .rotator { height: 1.06em; }
  .rotator__word { height: 1.06em; line-height: 1.06; }
}

/* ============ hero: entrada orquestada al cargar ============ */

.section-head--hero > * { opacity: 0; transform: translateY(14px); animation: heroIn 0.7s var(--ease-snap) forwards; }
.section-head--hero > :nth-child(1) { animation-delay: 0.05s; }
.section-head--hero > :nth-child(2) { animation-delay: 0.15s; }
.section-head--hero > :nth-child(3) { animation-delay: 0.28s; }
.section-head--hero > :nth-child(4) { animation-delay: 0.40s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ============ hero ============ */

.hero-stage {
  position: relative; width: 100%; max-width: 1400px;
  display: grid; gap: 40px; justify-items: center;
}

/* ============ Montaje: collage ============ */
/* La firma de la marca: torso B/N sin cabeza, las funciones donde iría la cabeza y una
   sola forma plana detrás. Gramática y semántica en context/09-visual.md. */

/* el recorte: foto B/N. El filtro unifica recortes de tiradas distintas */
.cut { filter: grayscale(1) contrast(1.04); }
/* silueta desplazada en ámbar: el eco del dolor cuando no hay sitio para una forma */
.cut--warn { filter: grayscale(1) contrast(1.04) drop-shadow(var(--cut-offset) var(--cut-offset) 0 var(--shape-warn)); }

.collage { position: relative; width: 100%; aspect-ratio: 1 / 1.08; }
/* la forma: una sola, plana, sin sombra */
.collage__shape {
  position: absolute; left: 12%; top: 3%; width: 76%; aspect-ratio: 1; border-radius: 50%;
  background: var(--shape); transform-origin: center;
}
/* la figura: el torso fotorrealista de 700×1200 encuadrado al torso, para que el corte del
   cuello caiga en el tercio alto de la caja y la cadera sea el borde inferior.
   Se centra con left/right, no con translateX(-50%): `collageNotes` mide con offsets de
   layout (no lee transforms), y con la traslación la caja de la figura salía desplazada
   media anchura y se comía las líneas de anotación de la derecha. */
.collage__cut {
  position: absolute; left: 19%; right: 19%; bottom: 0; width: 62%;
  aspect-ratio: 700 / 800; object-fit: cover; object-position: top center;
}
.collage__objs { position: absolute; inset: 0; }
.collage__obj {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto;
  transform: rotate(var(--r));
  filter: drop-shadow(0 10px 14px rgba(10, 10, 10, 0.16));
}
.collage__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.collage__lines path { fill: none; stroke: var(--ink-line); stroke-width: 1; stroke-linecap: round; }
.collage__note {
  position: absolute; left: var(--x); top: var(--y);
  font-size: 13px; font-weight: 500; letter-spacing: -0.13px; line-height: 1.2; color: var(--text);
  white-space: nowrap;
}
/* en mobile no hay sitio para las anotaciones */
.collage__note, .collage__lines { display: none; }
@media (min-width: 768px) { .collage__note { display: block; } .collage__lines { display: block; } }

/* entrada al cargar, en el mismo orden que el texto: forma → recorte → objetos → anotaciones */
.collage__shape { animation: collageShape 0.8s var(--ease-snap) 0.35s both; }
.collage__cut { animation: collageCut 0.8s var(--ease-snap) 0.5s both; }
.collage__obj { opacity: 0; animation: collageObj 0.6s var(--ease-snap) calc(0.75s + var(--i) * 0.08s) forwards, collageFloat 5.6s ease-in-out calc(1.4s + var(--i) * 0.45s) infinite alternate; }
.collage__note, .collage__lines { opacity: 0; animation: heroIn 0.5s ease 1.35s forwards; }
@keyframes nexusBreath { 0%, 100% { scale: 1; } 78% { scale: 1.018; } }
@keyframes collageShape { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes collageCut { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes collageObj { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes collageFloat { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Montaje · eco 2: las cinco manos sobre el círculo verde. Desde el 2026-09-03 la
   composición ya no lleva cifra: el mensaje es que el trabajo esté bien hecho, no cuánta
   gente somos. Las manos van centradas sobre la forma, no ancladas al borde inferior.
   `.five__num` se elimina con el número. */
.five__visual { position: relative; width: 280px; height: 280px; margin: -8px 0; }
@media (min-width: 768px) { .five__visual { width: 380px; height: 380px; margin: -12px 0; } }
/* El disco pasa a CREMA con las manos del material (2026-09-07). Se probo dejarlo verde,
   que era la regla original, y no funciona: dos de las cuatro mangas son verdes y
   desaparecen contra el disco. Es el mismo choque que obliga a la regla del unico verde,
   solo que aqui el verde ya viene dentro de la pieza. El crema es el tono de las caras
   interiores del material, asi que no introduce un color nuevo. */
.five__shape {
  position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: var(--material-face); transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  transition: transform 0.8s var(--ease-snap), opacity 0.45s ease;
}
/* la sombra va en CSS y no pegada en la imagen: asi se adapta al fondo real de la pagina */
.five__cut {
  position: absolute; left: 50%; top: 50%; width: 92%;
  filter: drop-shadow(0 16px 22px rgba(10, 10, 10, 0.18));
  transform: translate(-50%, calc(-50% + 16px));
  opacity: 0; transition: transform 0.8s var(--ease-snap) 0.35s, opacity 0.5s ease 0.35s;
}
.five__visual.is-in .five__shape { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.five__visual.is-in .five__cut { transform: translate(-50%, -50%); opacity: 1; }

/* `.hero-stage` y `.collage--hero` quedan definidos aunque el hero ya no los use: la firma
   "el jefe" sigue viva en la og-image y en las plantillas de RRSS. Nada se borra. */
.collage--hero { max-width: 320px; }
@media (min-width: 768px) { .hero-stage { gap: 56px; } .collage--hero { max-width: 480px; } }
@media (min-width: 1024px) {
  .lead--hero { max-width: 560px; }
  .collage--hero { max-width: 500px; }
}

/* ============ hero: el nexo ============ */
/* Seis funciones conectadas al isotipo: un abanico de rutas finas que converge en la ficha
   verde del centro, con las fichas de objeto apoyadas sobre sus rutas. Las rutas y las
   posiciones se trazan desde app.js (módulo nexus); aquí solo van la caja, la forma de las
   fichas y el motion. Semántica Montaje: los objetos en B/N, una sola forma de color —la
   ficha del isotipo—, y el verde que viaja son los pulsos. */

/* Full-bleed como el desfile; el alto lo fija el aspect (2.8/1 desde 768). Sube por detrás
   de los botones (margin negativo) para que el abanico nazca debajo del titular, como en el
   referente; las líneas no capturan el puntero. */
/* en mobile el margen negativo también es -56: sube el abanico lo justo para que la ficha
   de abajo a la derecha quede por encima del botón flotante de WhatsApp */
.nexus { position: relative; width: 100vw; aspect-ratio: 1.2 / 1; margin-top: -56px; overflow: hidden; }
/* mobile: fichas y núcleo más chicos (los tokens grandes entran desde 768) */
@media (max-width: 767.98px) { .nexus { --tile-lg: var(--tile-lg-m); --tile: var(--tile-m); --core: var(--core-m); } }
@media (min-width: 768px) { .nexus { aspect-ratio: 2.8 / 1; max-height: 560px; margin-top: -56px; } }
/* pantallas bajas (1366×768 y compañía): el abanico se achata y sube, y el hero pierde algo
   de aire arriba, para que las seis fichas quepan enteras en el primer viewport */
@media (max-height: 800px) and (min-width: 768px) { .nexus { aspect-ratio: 3.4 / 1; margin-top: -88px; } }
/* las rutas se apagan contra los bordes; en mobile la caída es más corta (6 %) porque las
   fichas de los extremos quedan más cerca del borde y su ruta tiene que llegar hasta ellas */
.nexus__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
@media (min-width: 768px) {
  .nexus__lines {
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
}
/* la línea base: tinta neutra de 1 px. Las seis que llevan ficha van un punto más marcadas */
.nexus__lines path { fill: none; stroke: var(--nexus-line); stroke-opacity: var(--nexus-line-alpha); stroke-width: 1; stroke-linecap: round; }
.nexus__lines path.is-route { stroke-opacity: var(--nexus-route-alpha); }
.nexus__lines path.is-route.is-hot { stroke-opacity: 0.7; }

/* EL FLUJO — el efecto que pidió Mauricio: «que sea un flujo, todo hacia Isallabs».
   Cada media línea está dibujada del borde AL centro, así que un dash que avanza por el
   path (dashoffset hacia −100) viaja hacia el isotipo en los dos lados a la vez y se
   apaga detrás de la ficha verde. Con `pathLength="100"` el dash se mide en % del
   recorrido, así que la velocidad no depende del largo de la línea.
   Va desfasado por línea (`--i`) para que sea una corriente continua, no un latido. */
.nexus__lines path.nexus__flow {
  stroke: var(--nexus-flow); stroke-opacity: 0; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 13 87;
  /* `--d` (0.82…1.18, lo pone app.js) le da a cada línea su propio ritmo: con todas al
     mismo periodo el conjunto se lee como un bucle de máquina. El ease acelera hacia el
     centro: la corriente se deja caer dentro del isotipo en vez de avanzar a ritmo fijo. */
  animation: nexusFlow calc(var(--dur-flow) * var(--d, 1)) cubic-bezier(0.3, 0.05, 0.62, 0.55)
             calc(0.8s + var(--i) * (var(--dur-flow) / 9)) infinite;
}
.nexus__lines path.nexus__flow.is-main { stroke-width: 1.8; }
.nexus__lines path.nexus__flow.is-hot { animation-duration: calc(var(--dur-flow) / 2); }
/* nace tenue y largo en el borde, llega marcado y corto al centro: el trazo se comprime
   como un cometa al caer, que es lo que hace que se lea la dirección */
/* El trazo NO se apaga al final: termina detrás de la ficha del isotipo, que lo tapa.
   Apagarlo antes hacía que el flujo se desvaneciera justo en el tramo que tiene que
   contar —la llegada— y medimos 0 % de presencia en el tercio central. */
@keyframes nexusFlow {
  0%   { stroke-dashoffset: 0;    stroke-opacity: 0;                          stroke-dasharray: 13 87; }
  12%  { stroke-opacity: calc(var(--nexus-flow-alpha) * 0.30); }
  55%  { stroke-opacity: calc(var(--nexus-flow-alpha) * 0.70); }
  88%  { stroke-opacity: var(--nexus-flow-alpha);                             stroke-dasharray: 5 95; }
  100% { stroke-dashoffset: -100; stroke-opacity: var(--nexus-flow-alpha);    stroke-dasharray: 4 96; }
}
/* dibujo inicial: las líneas nacen del centro y se abren hacia los bordes. Como el path va
   del borde al centro, revelar desde el final (offset −100 → 0) es dibujar centro → borde. */
.nexus__lines path:not(.nexus__flow) { stroke-dasharray: 100 100; stroke-dashoffset: -100; animation: nexusDraw 0.9s var(--ease-snap) 0.55s forwards; }
@keyframes nexusDraw { to { stroke-dashoffset: 0; } }
.nexus.is-ready .nexus__lines path:not(.nexus__flow) { animation: none; stroke-dashoffset: 0; }

.nexus__core, .nexus__tile { position: absolute; translate: -50% -50%; }
/* El destino al que convergen las plataformas ES la marca. Desde que existe el isotipo
   (2026-09-07) se le quita el fondo y la sombra de ficha: el isotipo es una silueta y se
   sostiene solo sobre el papel. Antes era una ficha verde con una «i» interina. */
.nexus__core {
  z-index: 2; width: var(--core); aspect-ratio: 1; border-radius: 50%; background: transparent;
  display: grid; place-items: center;
  opacity: 0;
  /* el destino no puede estar muerto: respira en el periodo del flujo (1 → 1.018),
     lo justo para que se lea que recibe sin convertirse en un latido */
  animation: collageShape 0.5s var(--ease-snap) 0.95s forwards,
             nexusBreath var(--dur-flow) ease-in-out 1.6s infinite;
}
/* marca interina: la minúscula del logotipo, no una inicial suelta. El `translate` baja el
   glifo un pelo para que el punto de la i no quede pegado al borde de la ficha. */
.nexus__mark {
  font-size: calc(var(--core) * 0.62); font-weight: 800; line-height: 0.9;
  color: var(--on-accent); letter-spacing: -0.02em; translate: 0 -3%;
}
.nexus__mark-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(10, 10, 10, 0.16));
}
.nexus__tile {
  z-index: 1; width: var(--tile); aspect-ratio: 1; border-radius: 25%;
  background: var(--surface); border: 0.5px solid var(--border); box-shadow: var(--shadow-chip);
  display: grid; place-items: center;
  opacity: 0;
  animation: collageObj 0.6s var(--ease-snap) calc(1.05s + var(--k) * 0.06s) forwards,
             nexusFloat 5.6s ease-in-out calc(1.8s + var(--k) * 0.45s) infinite alternate;
  transition: box-shadow 0.25s ease, translate 0.25s var(--ease-snap);
}
.nexus__tile--lg { width: var(--tile-lg); }
/* los logos necesitan más aire que una fotografía: ocupan la mitad de la ficha */
.nexus__tiles { position: absolute; inset: 0; }
.nexus__tile img { width: 48%; height: auto; }
@media (max-width: 767.98px) { .nexus__tile img { width: 52%; } }
/* la flotación va en margin-top: `translate` lo ocupa el centrado y `scale` la entrada.
   Nunca más de 4 px: la ruta pasa por el centro de la ficha. */
@keyframes nexusFloat { from { margin-top: 0; } to { margin-top: -4px; } }
@media (hover: hover) and (pointer: fine) {
  .nexus__tile:hover { box-shadow: var(--shadow-slide); translate: -50% calc(-50% - 3px); }
}

/* ============ prueba social (hero) ============ */
/* v7: los tres testimonios reales suben del FAQ al hero. Vive dentro de la sección hero,
   así que NO entra en el reveal genérico: aparece con la misma entrada `heroIn` que el
   resto del hero, un paso después del nexo. Las frases y las atribuciones son textuales. */

.proof {
  /* z-index 20, no 1: `.gap` también era z-index 1 y, al ir después en el DOM, se pintaba
     encima y se comía el clic sobre un logo. Por debajo del botón de WhatsApp (90) y del
     menú (100). */
  position: relative; z-index: 20; width: 100%; max-width: 1100px; margin-top: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; animation: heroIn 0.8s var(--ease-snap) 0.9s forwards;
}
@media (min-width: 768px) { .proof { margin-top: 0; gap: 18px; } }
.proof__lead {
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.13px;
  color: var(--text-muted); text-align: center;
}
@media (min-width: 768px) { .proof__lead { font-size: 14.5px; } }

/* Desde la v7.1 los testimonios son burbujas: una por cliente, con su logo. Desde la v8.1
   son el disparador de la pantalla de caso y no despliegan nada bajo el hero.
   Sin verde a propósito: el isotipo del nexo, un bloque más arriba, es el único acento del
   hero. Aquí el logo bajo el cursor se marca con tinta, elevación y opacidad. */
.proof__group { position: relative; display: flex; flex-direction: column; align-items: center; }
.proof__bubbles { display: flex; align-items: center; justify-content: center; gap: 12px; }
@media (min-width: 768px) { .proof__bubbles { gap: 16px; } }
.proof__bubble {
  width: 48px; height: 48px; padding: 0; flex: none; cursor: pointer;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface); border: 0.5px solid var(--border);
  box-shadow: var(--shadow-faq); opacity: 0.55;
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-pill) var(--ease-snap),
              box-shadow var(--dur-pill) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
@media (min-width: 768px) { .proof__bubble { width: 56px; height: 56px; } }
/* Gocash trae su propio fondo y tapa la baldosa; Sur Oeste viene con alfa y se apoya en ella */
.proof__bubble img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof__bubble--mono {
  background: var(--surface-2);
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--text-muted);
}
.proof__bubble:hover { opacity: 1; }
.proof__bubble:hover, .proof__bubble:focus-visible {
  opacity: 1; transform: translateY(-3px) scale(1.06);
  border-color: var(--border-strong); box-shadow: var(--shadow-card);
}

/* Las burbujas no despliegan nada: abren la pantalla de caso. Se fueron con ella
   `.proof__stage`, `.proof__pop`, `.proof__deck` y toda la coreografía de la ficha
   (v8.1, 2026-09-08). Con eso desaparece también la regla que la sostenía —«nada que se
   abra sobre el pliegue puede ocupar alto»—: ya no se abre nada aquí. */
@media (prefers-reduced-motion: reduce) {
  .proof__bubble { transition-duration: 1ms; }
}
.proof__note {
  font-size: 12.5px; font-weight: 360; line-height: 1.6; letter-spacing: -0.12px;
  color: var(--text-faint); text-align: center; max-width: 560px;
  transition: opacity var(--dur-pill) var(--ease-out);
}

/* ============ diagnóstico exprés (tags) ============ */

.gap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin-top: 56px; width: 100%;
}
@media (min-width: 768px) { .gap { margin-top: 64px; gap: 22px; } }
.gap__q { font-size: 14px; font-weight: 360; color: var(--text-muted); letter-spacing: -0.14px; text-align: center; }
.gap__q b { color: var(--text); }
@media (min-width: 768px) { .gap__q { font-size: 16px; } }

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 620px; }
@media (min-width: 768px) { .tags { gap: 10px; max-width: 860px; } }
.tags button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 0.5px solid var(--surface); color: var(--text-muted);
  font-size: 13.5px; font-weight: 400; letter-spacing: -0.14px; white-space: nowrap;
  box-shadow: var(--shadow-chip);
  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.45s var(--ease-snap),
              background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (min-width: 768px) { .tags button { padding: 11px 18px; font-size: 15px; } }
.tags button.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.tags button.is-hot { background: var(--accent-soft); color: var(--accent-700); border-color: var(--accent-200); }
.tags button:hover { background: var(--accent-soft); color: var(--accent-800); border-color: var(--accent-200); }
.tags button[aria-pressed="true"],
.tags button[aria-pressed="true"]:hover { background: var(--text); color: var(--background); border-color: var(--text); }
.tags button[aria-pressed="true"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-400);
}

.gap__result { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 64px; }
.gap__line {
  font-size: 15px; font-weight: 360; line-height: 22px; letter-spacing: -0.15px;
  color: var(--text-muted); text-align: center; max-width: 540px; text-wrap: balance;
  transition: opacity 0.25s ease;
}
@media (min-width: 768px) { .gap__line { font-size: 17px; line-height: 25px; } }
.gap__line b { color: var(--text); }
.gap__line.is-swapping { opacity: 0; }
.gap__cta { height: 42px; border-radius: 999px; padding: 0 22px; font-size: 15px; }
.gap__cta[hidden] { display: none; }

/* ============ board + convergencia ============ */

.board {
  position: relative; isolation: isolate;
  width: 100%; max-width: 960px;
  border-radius: 20px; border: 0.5px solid var(--surface); background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .board { border-radius: 24px; } }

/* la respuesta va pegada al diagnóstico: menos aire que entre las demás secciones */
.section--converge { margin-top: 88px; }
@media (min-width: 768px) { .section--converge { margin-top: 120px; } }
.converge { width: 100%; max-width: 960px; margin-top: 40px; }
@media (min-width: 768px) { .converge { margin-top: 56px; } }
.converge__stage { position: relative; width: 100%; }

.board--converge { transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.board--converge.is-done { border-color: var(--accent-200); box-shadow: var(--shadow-deep); }
.board__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 0.5px solid var(--border);
}
@media (min-width: 768px) { .board__bar { padding: 18px 24px; } }
.board__bar .mini-badge { opacity: 0; transform: translateX(6px); transition: opacity 0.4s ease, transform 0.4s var(--ease-snap); }
.board--converge.is-done .board__bar .mini-badge { opacity: 1; transform: none; }

.cv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
@media (min-width: 768px) { .cv-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px; } }
.cv-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  aspect-ratio: 1 / 1.12; border-radius: 14px; padding: 10px 6px;
  background: var(--surface); border: 0.5px solid var(--border);
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
@media (min-width: 768px) { .cv-slot { border-radius: 18px; padding: 12px 10px; gap: 8px; aspect-ratio: 1 / 0.94; } }
.cv-slot__ph { width: 62%; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--surface-2); transition: background-color 0.4s ease; }
.cv-slot.is-on .cv-slot__ph { background: transparent; }
.cv-slot.is-on { border-color: var(--border-strong); }
.cv-slot__label {
  font-size: 11.5px; font-weight: 400; letter-spacing: -0.1px; color: var(--text-muted); text-align: center;
  white-space: nowrap; opacity: 0; transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-snap), color 0.3s ease;
}
@media (min-width: 768px) { .cv-slot__label { font-size: 13.5px; } }
.cv-slot.is-on .cv-slot__label { opacity: 1; transform: none; color: var(--text); }

.cv-objects { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cv-obj { position: absolute; left: 0; top: 0; width: 100px; will-change: transform; pointer-events: auto; }
.cv-obj img {
  width: 100%; height: auto;
  filter: drop-shadow(0 8px 10px rgba(10, 10, 10, 0.16));
  transition: transform 0.25s var(--ease-snap);
}
.cv-obj:hover img { transform: translateY(-6px) scale(1.06); }

/* de dónde sale hoy cada grupo de cuatro funciones: la caja se apaga cuando el grupo se vacía */
.cv-groups { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cv-group {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  border-radius: 18px; background: var(--surface);
  border: 1px dashed var(--border-strong); box-shadow: var(--shadow-chip);
}
.cv-group__label {
  font-size: 11.5px; font-weight: 500; letter-spacing: -0.11px; color: var(--text-muted); white-space: nowrap;
}
@media (min-width: 768px) { .cv-group { border-radius: 22px; } .cv-group__label { font-size: 13px; } }

/* el mapa: tres rutas punteadas que bajan desde las cajas de origen hasta "Tú".
   Las rutas se dibujan desde app.js (placeGroups) y se apagan con la primera caja. */
.cv-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv-map path {
  fill: none; stroke: var(--line-dots); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 2 7; animation: dotsFlow 1.4s linear infinite;
}
@keyframes dotsFlow { to { stroke-dashoffset: -18; } }
.cv-you {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* el círculo negro original: sin uso desde que el nodo es un recorte, se conserva por si vuelve */
.cv-you__dot {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--text); color: var(--background);
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px; box-shadow: var(--shadow-chip);
}
.cv-you__cut { width: 104px; height: auto; }
.cv-you__label { font-size: 12.5px; font-weight: 500; letter-spacing: -0.12px; color: var(--text-muted); white-space: nowrap; }
.cv-you__label b { color: var(--text); font-weight: 700; }
.cv-map, .cv-you { display: none; }
@media (min-width: 768px) { .cv-map, .cv-you { display: block; } .cv-you { display: flex; } }

/* la leyenda vive dentro del stage: se ve mientras la sección está fijada.
   Los dos estados se apilan en la misma celda y se cruzan por opacidad. */
.cv-caption { display: grid; margin-top: 22px; text-align: center; padding: 0 16px; }
.cv-caption > p {
  grid-area: 1 / 1;
  font-size: 15px; font-weight: 360; letter-spacing: -0.15px;
  color: var(--text-muted); transition: opacity 0.35s ease;
}
.cv-caption__b { opacity: 0; }
/* el narrador remata en negrita (la especificidad tiene que ganarle a .cv-caption > p) */
.cv-caption > .cv-caption__b { color: var(--text); font-weight: 600; }
@media (min-width: 768px) { .cv-caption { margin-top: 28px; } .cv-caption > p { font-size: 17px; } }

/* pantallas medianas (1440×900 y similares): el board se achata lo justo para caber
   fijado bajo el header. Va antes del bloque de 840px, que es más específico en altura. */
@media (min-width: 768px) and (max-height: 980px) {
  .cv-slot { aspect-ratio: 1 / 0.82; padding: 10px 10px; gap: 6px; }
  .cv-slot__ph { width: 54%; }
  .cv-grid { gap: 12px; padding: 16px; }
  .cv-caption { margin-top: 20px; }
}

/* pantallas bajas (laptop de 768px de alto): el board y su leyenda se achatan para caber
   fijados bajo el header. Va después de todo lo que pisa, o el cascade lo ignora. */
@media (min-width: 768px) and (max-height: 840px) {
  .cv-slot { aspect-ratio: 1 / 0.70; padding: 8px 10px; gap: 4px; }
  .cv-slot__ph { width: 46%; }
  .cv-grid { gap: 10px; padding: 14px; }
  .board__bar { padding: 12px 20px; }
  .cv-caption { margin-top: 16px; }
  .cv-caption > p { font-size: 14px; }
  /* el recorte del nodo "Tú" también se achata: el bloque tiene que caber dentro del board */
  .cv-you__cut { width: 84px; }
}

/* ============ cinco frentes (explorador) ============ */

/* Los cinco frentes: matriz de capacidades. Las treinta a la vista, sin clics.
   Reemplazó a un explorador de pestañas donde el objeto medía 434 px y los seis ítems del
   frente activo 79 —cinco veces y media más decoración que argumento, con veinticinco de los
   treinta escondidos—. Pero la primera matriz quedó sin vida: solo listas. Ahora cada frente
   es una tarjeta con peso propio, el objeto flota, y al pasar el cursor aparece **un** halo
   verde detrás de él: un solo acento por composición, el del frente que estás mirando. */
/* Bajo 1000 px es un carril que se arrastra con el dedo, con imán a la tarjeta: apilados,
   los cinco frentes gastaban 1.558 px de alto. El corte está en 1000 y no en el 768 de la
   casa a propósito — entre medio los cinco no caben en una fila y sobraría una tarjeta sola
   en la última, que es peor que deslizar. La siguiente tarjeta asoma: ese es el aviso de que
   hay más. */
.pillars {
  /* el ancho de la tarjeta manda: el relleno lateral se calcula desde él para que la primera
     y la última también puedan quedar centradas, y no pegadas al borde */
  --card: min(72vw, 300px);
  margin-top: 32px;
  display: flex; gap: 12px; align-items: stretch;
  /* la sección ya centra a sus hijos, así que un hijo de 100vw sangra solo y por igual a
     los dos lados. Con `margin-left: calc(50% - 50vw)` encima el desplazamiento se sumaba
     dos veces y la tarjeta quedaba 8 px a la izquierda del centro. */
  width: 100vw;
  padding: 4px calc((100vw - var(--card)) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pillars::-webkit-scrollbar { display: none; }
/* imán al CENTRO, no al borde: la tarjeta queda en mitad de pantalla y asoman las dos
   vecinas, que es lo que dice que el carril sigue para los dos lados */
.frente { flex: 0 0 var(--card); scroll-snap-align: center; }

@media (min-width: 1000px) {
  .pillars {
    width: 100%; max-width: 1100px; margin-top: 52px; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
    overflow: visible;
  }
  .frente { flex: none; }
}

/* En el carril las tarjetas NO se ocultan esperando su reveal. El observador mira la ventana,
   no el carril: una tarjeta que arranca fuera de pantalla puede quedarse en opacidad 0 —y de
   hecho se queda si el usuario pasa de largo sin detenerse en ella—. Contenido esperando a un
   observador es un contenido que puede no aparecer nunca. En desktop, donde las cinco están a
   la vista, el escalonado sí funciona y se queda. */
@media (max-width: 999.98px) {
  .frente.reveal { opacity: 1; transform: none; }
}

.frente {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  align-items: center; text-align: center;
  padding: 28px 20px 24px; border-radius: var(--radius-card-m);
  background: var(--surface); border: 0.5px solid var(--border);
  box-shadow: var(--shadow-faq);
  transition: transform var(--dur-pill) var(--ease-snap),
              box-shadow var(--dur-pill) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.frente:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card); border-color: var(--border-strong);
}

/* el objeto, con su halo detrás */
.frente__fig {
  position: relative; width: 86px; height: 86px; margin-bottom: 16px;
  display: grid; place-items: center; flex: none;
}
.frente__halo {
  position: absolute; left: 50%; top: 50%; width: 86px; height: 86px;
  margin: -43px 0 0 -43px; border-radius: var(--radius-full);
  background: var(--neutral-200);   /* el pergamino de la rampa: separa el objeto del papel sin meter un segundo verde */
  transition: background var(--dur-pill) var(--ease-out), transform var(--dur-pill) var(--ease-snap);
}
/* La medalla se queda NEUTRA: el verde ya viene dentro de la foto (una pieza verde entre
   grises). Ponerle además un disco verde daría dos acentos y se comería el twist. */
.frente:hover .frente__halo { background: var(--neutral-300); transform: scale(1.08); }
.frente__obj {
  /* contain, no el `fill` por defecto: los objetos del material se recortan al alfa y no
     son cuadrados, asi que en una caja cuadrada se estirarian */
  position: relative; width: 82px; height: 82px; object-fit: contain; filter: var(--shadow-fan);
  animation: frenteFloat 6.4s var(--ease-soft) infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
  transition: transform var(--dur-pill) var(--ease-snap);
}
.frente:hover .frente__obj { transform: scale(1.08); }
/* la vida en reposo: sin esto la sección se lee como cinco listas y nada más */
@keyframes frenteFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -6px; rotate: -1.4deg; }
}

.frente__name {
  font-size: 24px; font-weight: 600; letter-spacing: -0.9px; color: var(--text);
  line-height: 1.1; text-wrap: balance;
}
@media (min-width: 1000px) { .frente__name { font-size: 25px; letter-spacing: -0.95px; } }
.frente__sub {
  margin-top: 7px; font-size: 13px; font-weight: 360; line-height: 1.45;
  letter-spacing: -0.13px; color: var(--text-muted); text-wrap: balance;
}
/* Sin viñetas: centradas, los puntos quedarían descolgados a la izquierda de cada línea.
   La separación la hace el aire, y `text-wrap: balance` reparte las que se van a dos líneas
   para que no quede una palabra sola debajo. */
.frente__items {
  list-style: none; width: 100%; margin-top: 18px; padding-top: 18px;
  border-top: 0.5px solid var(--border);
  display: grid; gap: 11px;
}
.frente__items li {
  font-size: 13.5px; font-weight: 360; line-height: 1.4;
  letter-spacing: -0.13px; color: var(--text); text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .frente, .frente__obj, .frente__halo { transition-duration: 1ms; animation: none; }
}

/* ============ somos cinco: tesis, mecanismo y cupos ============ */

.five { margin-top: 96px; width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
@media (min-width: 768px) { .five { margin-top: 120px; gap: 56px; } }
.five__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 768px) { .five__head { gap: 22px; } }
.five__head .eyebrow { margin-bottom: 0; }
.display--h3 { font-size: 30px; letter-spacing: -1.2px; line-height: 1.1; max-width: 340px; }
@media (min-width: 768px) { .display--h3 { font-size: 44px; letter-spacing: -0.035em; line-height: 1.06; max-width: 760px; } }

/* el mecanismo: tres entradas que convergen, por rutas punteadas, en una salida */
.mech { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mech__map { display: none; }
.mech__in { list-style: none; width: 100%; display: grid; gap: 10px; }
/* en mobile la ficha es icono + (título sobre bajada): con flex los tres hijos quedarían
   en una misma fila, así que el carril de texto se arma con grid */
.mech__node {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 0.5px solid var(--border); box-shadow: var(--shadow-faq);
}
.mech__node img { grid-row: span 2; width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(10, 10, 10, 0.14)); }
.mech__node b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }
.mech__node span { display: block; font-size: 13.5px; font-weight: 360; letter-spacing: -0.13px; line-height: 1.35; color: var(--text-muted); }
.mech__out {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 22px; border-radius: 999px;
  background: var(--text); color: var(--background); text-align: center;
}
.mech__out b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.mech__out span { font-size: 13px; font-weight: 400; letter-spacing: -0.13px; opacity: 0.75; }
@media (min-width: 768px) {
  .mech { gap: 0; padding-bottom: 8px; }
  .mech__map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .mech__map path { fill: none; stroke: var(--line-dots); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; animation: dotsFlow 1.4s linear infinite; }
  .mech__in { grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; }
  /* las tres tarjetas se leen centradas: imagen, título y bajada al eje del contenedor */
  .mech__node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 22px; border-radius: 20px; }
  .mech__node img { width: 64px; height: 64px; }
  .mech__out { position: relative; z-index: 1; margin-top: 96px; padding: 16px 28px; }
  .mech__out b { font-size: 17px; }
}

/* cifras del producto (hechos, no resultados): cuentan al entrar */

/* ============ primeros casos = cupos fundador ============ */

.founders {
  margin-top: 8px; width: 100%; max-width: 960px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
@media (min-width: 768px) { .founders { margin-top: 16px; gap: 24px; } }
.founders__title { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; text-align: center; }
@media (min-width: 768px) { .founders__title { font-size: 22px; letter-spacing: -0.7px; } }
.founders__slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.founders__slots > :last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 768px) {
  .founders__slots { grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 12px; }
  .founders__slots > :last-child:nth-child(odd) { grid-column: auto; }
}
.slot {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 118px; padding: 16px; border-radius: 16px;
  border: 1px dashed var(--border-strong); text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.slot__n { font-size: 13px; font-weight: 500; letter-spacing: -0.13px; color: var(--text-faint); text-transform: none; }
.slot__status { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -0.14px; color: var(--text); }
.slot--open .slot__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-200); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-200); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.slot--taken { border-style: solid; border-color: var(--border); background: var(--surface); }
.slot--taken .slot__status { color: var(--text-muted); }
/* Cupo ya tomado: el sello del caso. Va sólido y con el logo del cliente EN SU COLOR
   —en una ficha de caso el logo es del cliente, no una versión nuestra en tinta—, para
   que el cupo ocupado se distinga de un vistazo de los cuatro que siguen libres.
   `button.slot--published` y no `.slot--published`: el reset de más abajo pone
   `button.slot { background: transparent }` y le ganaría por especificidad. */
button.slot--published {
  border-style: solid; border-color: var(--border); background: var(--surface);
  cursor: pointer;
}
button.slot--published:hover,
button.slot--published:focus-visible { transform: translateY(-3px); border-color: var(--accent); }
.slot__seal { display: flex; align-items: center; gap: 9px; min-width: 0; }
.slot__seal img { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.slot__mono {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--ink-50, var(--border));
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px; color: var(--text-muted);
}
.slot__seal b {
  font-size: 15px; font-weight: 600; letter-spacing: -0.25px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot__status--case { color: var(--accent); gap: 6px; }
.slot__status--case::after {
  content: ""; width: 6px; height: 6px; margin-top: -1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.2s var(--ease-snap);
}
button.slot--published:hover .slot__status--case::after { transform: rotate(-45deg) translate(2px, -2px); }

/* Caso publicado: tarjeta ancha, encima de los cupos. Va con <details>, así que abre y
   cierra sin JS. El logo se muestra en SU color: en una tarjeta de caso el logo es del
   cliente, no una versión nuestra en tinta. */
.slot--case {
  display: block; width: 100%; padding: 0; min-height: 0;
  border-style: solid; border-color: var(--border); background: var(--surface);
}
.slot--case[open] { border-color: var(--border-strong); }
.slot--case > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.slot--case > summary::-webkit-details-marker { display: none; }
.case__logo { width: 44px; height: 44px; border-radius: 12px; flex: none; }
@media (min-width: 768px) { .case__logo { width: 52px; height: 52px; border-radius: 14px; } }
.case__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.case__name { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }
@media (min-width: 768px) { .case__name { font-size: 18px; } }
.case__kind { font-size: 12.5px; font-weight: 360; letter-spacing: -0.12px; color: var(--text-muted); }
.case__more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; letter-spacing: -0.13px; color: var(--accent); white-space: nowrap;
}
.case__more::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s var(--ease-snap);
}
.slot--case[open] .case__more::after { transform: rotate(-135deg) translate(-2px, -2px); }
.case__body { padding: 2px 16px 18px; }
.case__lead { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--text); margin-bottom: 12px; }
.case__list { list-style: none; display: grid; gap: 7px; }
@media (min-width: 768px) { .case__list { grid-template-columns: 1fr 1fr; gap: 8px 28px; } }
.case__list li {
  position: relative; padding-left: 18px;
  font-size: 14px; font-weight: 360; line-height: 20px; letter-spacing: -0.1px; color: var(--text-muted);
}
.case__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-300);
}
.founders__note {
  font-size: 13px; font-weight: 360; line-height: 1.6; letter-spacing: -0.13px;
  color: var(--text-faint); text-align: center; max-width: 520px; padding: 0 16px;
}

/* ============ la tira rasgada (precio) ============ */
/* Banda full-bleed que cruza por detrás del precio y se rasga de izquierda a derecha con el
   scroll. Un hijo de `100vw` sangra solo y por igual a los dos lados —`.sc-price` ya centra a
   los suyos—: nada de `margin-left: calc(50% - 50vw)`, que en la v7.9 sangró dos veces y
   descuadró un carril 8 px.

   El div va en el flujo con ALTO CERO y la imagen cuelga centrada de él. Así la banda cae
   donde se la pone en el markup sin empujar nada, y el bloque del precio no cambia de alto
   tenga o no tenga banda.

   Opacidad baja a propósito: el papel de la tira es verde oscuro (#155937) y el precio va en
   tinta. A plena opacidad esto se convertía en una sección oscura, que es justo la dirección
   que se descartó en la v4. */
.tira {
  position: relative; z-index: 0; width: 100vw; height: 0; pointer-events: none;
  /* --rip lo mueve el scroll de 0 % a 100 %. Los deltas por vértice dan el borde dentado:
     sin ellos el frente de la rasgadura se lee como un barrido recto, no como un papel que
     se rompe. Y va a 104 %, no a 100: los vertices se desvian hasta 12 px, asi que parando
     justo en el borde quedaba una muesca sin rasgar. */
  --rip: 104%;
}
.tira img {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 100%; height: auto; display: block;
  /* En movil la banda es la misma tira a 390 px: 84 px de alto, un hilo que pasa por encima
     del numero en vez de cruzarlo. Se le fija alto y se recorta a lo ancho con `cover`, que
     conserva los dos bordes rasgados —que es lo unico que hay que ver de esta pieza—. */
  opacity: var(--tira-op, 0.22);
  clip-path: polygon(
    0% 0%,
    calc(var(--rip) + 7px) 0%,
    calc(var(--rip) - 10px) 14%,
    calc(var(--rip) + 12px) 29%,
    calc(var(--rip) - 6px) 43%,
    calc(var(--rip) + 9px) 58%,
    calc(var(--rip) - 11px) 72%,
    calc(var(--rip) + 5px) 87%,
    calc(var(--rip) - 8px) 100%,
    0% 100%
  );
}

@media (max-width: 767.98px) { .tira img { height: 136px; object-fit: cover; } }

/* Sin JS, sin GSAP o con reduced motion la banda se ve entera: es fondo, no información. */
@media (prefers-reduced-motion: reduce) {
  .tira { --rip: 104% !important; }
}

/* ============ cómo funciona ============ */

/* la ruta punteada va fuera del <ol> (un <svg> como primer hijo rompería la lista) */
.steps-wrap { position: relative; width: 100%; max-width: 960px; margin-top: 40px; }
@media (min-width: 768px) { .steps-wrap { margin-top: 56px; } }
.steps-wrap .steps { margin-top: 0; }
.steps__path { display: none; }
@media (min-width: 768px) {
  .steps__path {
    /* un svg es elemento reemplazado: con left+right no se estira, hay que darle el ancho */
    display: block; position: absolute; left: 28px; top: 46px; height: 4px; width: calc(100% - 56px);
    clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-soft) 0.2s;
  }
  .steps-wrap.is-in .steps__path { clip-path: inset(0); }
  .steps__path path { fill: none; stroke: var(--line-dots); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; animation: dotsFlow 1.4s linear infinite; }
  .step { position: relative; z-index: 1; }   /* la ruta se ve solo en los huecos entre tarjetas */
}

.steps { list-style: none; margin-top: 40px; width: 100%; max-width: 960px; display: grid; gap: 12px; }
@media (min-width: 768px) { .steps { margin-top: 72px; grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.step {
  display: flex; gap: 16px; padding: 22px; border-radius: 20px;
  background: var(--surface); border: 0.5px solid var(--border); box-shadow: var(--shadow-faq);
}
@media (min-width: 768px) { .step { flex-direction: column; gap: 22px; padding: 28px; } }
.step__head { display: flex; align-items: center; gap: 10px; }
/* en mobile el número va a la izquierda del cuerpo: el día cae bajo el número */
/* en mobile la tarjeta se apila: fila número + día arriba, texto abajo (el día no cabe en una columna de 36px) */
@media (max-width: 767px) { .step { flex-direction: column; gap: 14px; } }
.step__day { font-size: 13px; font-weight: 500; letter-spacing: -0.13px; color: var(--text-muted); }
.step__n {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--background);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
.step:nth-child(2) .step__n { background: var(--accent); color: var(--on-accent); }
/* el objeto del paso: cierra la fila de cabecera por la derecha. Los tres pasos eran tres
   tarjetas de texto y son la sección que vende el producto. */
.step__obj {
  margin-left: auto; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 6px 10px rgba(10, 10, 10, 0.14));
}
@media (min-width: 768px) { .step__obj { width: 84px; height: 84px; margin-top: -10px; margin-right: -6px; } }
.step__title { font-size: 19px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 6px; }
@media (min-width: 768px) { .step__title { font-size: 21px; margin-bottom: 8px; } }
.step__text { font-size: 14.5px; font-weight: 360; line-height: 21px; letter-spacing: -0.14px; color: var(--text-muted); }

/* el entregable del día 7 se muestra, no solo se enumera: el dossier a la izquierda y la
   lista a la derecha. En mobile se apilan, con el objeto centrado arriba. */
.receipt {
  margin-top: 16px; width: 100%; max-width: 760px; padding: 22px 24px;
  border-radius: 20px; background: var(--surface-2); border: 0.5px solid var(--surface);
  display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center;
}
@media (min-width: 768px) {
  .receipt {
    margin-top: 24px; grid-template-columns: 168px 1fr; gap: 28px;
    align-items: center; justify-items: start; padding: 26px 34px 26px 26px;
  }
}
.receipt__obj { width: 120px; height: auto; filter: drop-shadow(0 10px 14px rgba(10, 10, 10, 0.16)); }
@media (min-width: 768px) { .receipt__obj { width: 168px; } }
.receipt__body { width: 100%; }
.receipt__title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.3px;
  text-transform: none; color: var(--text); margin-bottom: 14px;
}
.receipt__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.receipt__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; letter-spacing: -0.15px; }
.receipt__check {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--surface);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.receipt__check::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform 0.3s var(--ease-snap);
}
.receipt.is-on .receipt__check { background: var(--accent); border-color: var(--accent); }
.receipt.is-on .receipt__check::after { transform: rotate(45deg) scale(1); }
.receipt.is-on li:nth-child(1) .receipt__check, .receipt.is-on li:nth-child(1) .receipt__check::after { transition-delay: 0.1s; }
.receipt.is-on li:nth-child(2) .receipt__check, .receipt.is-on li:nth-child(2) .receipt__check::after { transition-delay: 0.3s; }
.receipt.is-on li:nth-child(3) .receipt__check, .receipt.is-on li:nth-child(3) .receipt__check::after { transition-delay: 0.5s; }
.receipt.is-on li:nth-child(4) .receipt__check, .receipt.is-on li:nth-child(4) .receipt__check::after { transition-delay: 0.7s; }

/* ============ cta inline ============ */

.cta-inline { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; }
@media (min-width: 768px) { .cta-inline { margin-top: 56px; } }
.cta-inline__note { font-size: 13.5px; font-weight: 360; letter-spacing: -0.13px; color: var(--text-faint); padding: 0 16px; }

/* ============ para quién es (cualificación) ============ */
/* Dos columnas y un objeto en medio: a la izquierda quién debería entrar, a la derecha
   quién todavía no. Filtra y demuestra criterio, que es lo que da confianza en B2B. */

.fit { width: 100%; max-width: 960px; margin-top: 40px; display: grid; gap: 12px; }
@media (min-width: 768px) {
  .fit { margin-top: 56px; grid-template-columns: 1fr 220px 1fr; gap: 20px; align-items: stretch; }
}
.fit__col {
  padding: 24px; border-radius: 20px;
  background: var(--surface); border: 0.5px solid var(--border); box-shadow: var(--shadow-faq);
}
@media (min-width: 768px) { .fit__col { padding: 28px; } }
.fit__col--yes { border-color: var(--accent-200); background: var(--accent-50); }
.fit__title { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 14px; }
.fit__list { list-style: none; display: grid; gap: 10px; }
.fit__list li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; font-weight: 400; line-height: 21px; letter-spacing: -0.14px; color: var(--text);
}
/* el punto verde entra, la raya neutra no: la marca dice la respuesta antes que el texto */
.fit__col--yes .fit__list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.fit__col--no .fit__list li { color: var(--text-muted); }
.fit__col--no .fit__list li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; border-radius: 1px;
  background: var(--text-faint);
}
/* en mobile no hay sitio para el objeto entre las dos columnas */
.fit__visual { display: none; }
@media (min-width: 768px) {
  .fit__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 0; }
  .fit__visual img { width: 100%; max-width: 200px; height: auto; filter: drop-shadow(0 12px 16px rgba(10, 10, 10, 0.16)); }
}
.fit__caption {
  font-size: 13px; font-weight: 500; letter-spacing: -0.13px;
  color: var(--text-muted); text-align: center;
}

/* ============ faq ============ */

.faq { margin-top: 40px; width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) { .faq { margin-top: 56px; } }

.faq__item {
  border-radius: 16px; background: var(--surface-2); border: 0.5px solid var(--surface);
  box-shadow: var(--shadow-faq);
  overflow: hidden;
}
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: 18px 48px 18px 22px; position: relative;
  font-size: 15px; font-weight: 500; letter-spacing: -0.2px; color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: 20px; font-weight: 300; color: var(--text-faint);
  transition: transform 0.25s var(--ease-snap);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--text); }
.faq__item p {
  padding: 0 22px 20px; font-size: 14px; font-weight: 360; line-height: 21px;
  color: var(--text-muted); letter-spacing: -0.1px; max-width: 640px;
}

/* separador dentro del FAQ: de las preguntas a los testimonios.
   SIN USO DESDE LA v7: los testimonios viven en `.proof`, en el hero. Nada se borra. */
.faq__split {
  display: flex; align-items: center; gap: 14px; margin: 22px 2px 4px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.13px; color: var(--text-muted);
}
.faq__split::after { content: ""; flex: 1; height: 0.5px; background: var(--border); }

/* Testimonios reales. La frase clave va en el resumen —para que se lea sin tener que
   abrir— y dentro está la cita completa con su atribución, textual.
   SIN USO DESDE LA v7: los testimonios viven en `.proof`, en el hero. Nada se borra —
   `.faq__item--quote`, `.quote*` y `.faq__note` se conservan por si vuelven al FAQ. */
.faq__item--quote summary { font-style: italic; color: var(--text); font-weight: 400; }
.quote { padding: 0 22px 20px; }
.quote__text {
  font-size: 14px; font-weight: 360; line-height: 21px; letter-spacing: -0.1px;
  color: var(--text-muted); max-width: 640px;
}
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.quote__logo {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  /* los logos con fondo transparente se apoyan en esta baldosa; los que ya traen
     su propio fondo (Gocash) la tapan por completo */
  background: var(--surface-2); border: 0.5px solid var(--border); object-fit: contain;
}
.quote__logo--mono {
  display: grid; place-items: center; background: var(--surface-2); border: 0.5px solid var(--border);
  font-size: 13px; font-weight: 600; letter-spacing: -0.2px; color: var(--text-muted);
}
.quote__id { display: flex; flex-direction: column; gap: 1px; }
.quote__id b { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--text); }
.quote__id span { font-size: 12.5px; font-weight: 360; letter-spacing: -0.12px; color: var(--text-muted); }
.faq__note {
  margin: 6px 2px 0; font-size: 12.5px; font-weight: 360; line-height: 1.6;
  letter-spacing: -0.12px; color: var(--text-faint);
}

/* ============ precio + cierre ============ */

.sc-price {
  /* relative + z-index: el texto va por encima de la tira rasgada, que es su fondo */
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px;
  width: 100%; text-align: center;
}
/* ...pero los hijos tienen que subir tambien: la tira crea contexto dentro del mismo flex */
.sc-price > :not(.tira) { position: relative; z-index: 1; }
@media (min-width: 768px) { .sc-price { margin-top: 56px; } }
.sc-price__list { font-size: 14px; font-weight: 360; color: var(--text-muted); letter-spacing: -0.14px; }
.sc-price__list s { text-decoration-thickness: 1px; }
.sc-price__big { font-size: 56px; font-weight: 600; letter-spacing: -2.24px; line-height: 1; color: var(--text); white-space: nowrap; }
@media (min-width: 768px) { .sc-price__big { font-size: 72px; letter-spacing: -3px; } }
.sc-price__big span { font-size: 20px; font-weight: 360; letter-spacing: -0.2px; color: var(--text-muted); }
.sc-price__clp { font-size: 14px; font-weight: 360; color: var(--text-muted); letter-spacing: -0.14px; }
/* la condición de cobro es el argumento de confianza: va como anotación sobre el número */
.sc-price__row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.annot {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 0.5px solid var(--accent-200); color: var(--accent-800);
  font-size: 14px; font-weight: 500; letter-spacing: -0.14px; white-space: nowrap;
}
.annot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) {
  /* a la derecha del número, con guía punteada que apunta al precio. Va absoluta: así el
     número queda centrado en la sección y la anotación cuelga sin moverlo. */
  .sc-price__annot { position: absolute; left: calc(100% + 34px); top: 50%; transform: translateY(-50%); }
  .sc-price__annot::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: 34px; height: 0;
    border-top: 2px dotted var(--line-dots-on);
  }
}
.mini-badge--counter { margin-top: 8px; }
.mini-badge--counter b { color: var(--background); }
.sc-price__why {
  margin-top: 8px; font-size: 13px; font-weight: 360; line-height: 19px;
  color: var(--text-faint); max-width: 330px; letter-spacing: -0.13px;
}
@media (min-width: 768px) { .sc-price__why { font-size: 14px; line-height: 20px; max-width: 480px; } }

.waitlist-form {
  margin-top: 32px; display: flex; min-height: 76px; width: 100%; max-width: 460px;
  flex-direction: column; align-items: center; gap: 14px;
}
@media (min-width: 768px) { .waitlist-form { margin-top: 40px; } }
.waitlist-form__row { display: flex; width: 100%; justify-content: center; }
.waitlist-field {
  height: 48px; width: 100%; max-width: 320px; border-radius: 999px; background: var(--surface);
  padding: 0 20px; font-size: 16px; color: var(--text); line-height: 20px; outline: none;
  font-family: inherit; border: 1px solid var(--border-strong); transition: border-color 0.15s;
}
.waitlist-field:focus { border-color: var(--text); }
.waitlist-field::placeholder { color: var(--text-faint); }
.waitlist-form__submit {
  display: flex; height: 48px; width: 100%; max-width: 320px; flex-shrink: 0;
  align-items: center; justify-content: center; border-radius: 999px; border: 0;
  background: var(--accent); padding: 0 24px; font-size: 16px; line-height: 18px; color: var(--on-accent);
  cursor: pointer; transition: all 0.15s;
}
.waitlist-form__submit:hover { background: var(--accent-hover); }
.waitlist-form__submit:active { transform: scale(0.98); background: var(--accent-800); }
.waitlist-form__error { min-height: 20px; font-size: 13px; font-weight: 360; line-height: 20px; letter-spacing: -0.13px; color: var(--danger-strong); }
.waitlist-form__alt { font-size: 13.5px; font-weight: 360; color: var(--text-muted); text-align: center; }

.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-trigger {
  cursor: pointer; border: 0; background: transparent; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline dotted; text-underline-offset: 4px;
  transition: opacity 0.15s;
}
.tooltip-trigger:hover { opacity: 0.7; }
.tooltip {
  pointer-events: none; position: absolute; top: -38px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; border-radius: 8px; background: var(--text); padding: 6px 10px;
  font-size: 12px; line-height: 18px; color: var(--background); opacity: 0;
  transition: opacity 0.15s;
}
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { opacity: 1; }

/* abanico (idéntico al modelo) */
.fan { position: relative; width: 100%; max-width: 340px; margin-top: 16px; aspect-ratio: 960 / 490; }
@media (min-width: 768px) { .fan { max-width: 960px; margin-top: 24px; } }
.fan-card {
  position: absolute; width: 31.875%; aspect-ratio: 306 / 210;
  transition: transform 0.7s var(--ease-fan);
  will-change: transform; backface-visibility: hidden;
}
/* la tarjeta es HTML, no una imagen: así hereda Funnel Sans.
   En el abanico abierto cada tarjeta solo deja ver su banda superior: el nombre
   va arriba y la descripción queda para lectores de pantalla (.sr-only). */
.pieza {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  width: 100%; height: 100%; padding: 6% 8%;
  border-radius: 10px; background: var(--surface); border: 0.5px solid var(--border);
  box-shadow: none; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
@media (min-width: 768px) { .pieza { border-radius: 20px; gap: 4px; } }
.pieza__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pieza__mark { flex-shrink: 0; width: 14px; height: 4px; border-radius: 2px; background: var(--accent); }
.pieza__kind {
  font-size: 9px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza__line { margin-top: 6px; height: 0; border-top: 0.5px solid var(--border); width: 70%; }
@media (min-width: 768px) {
  .pieza__kind { font-size: 17px; letter-spacing: -0.4px; }
  .pieza__line { margin-top: 10px; }
}
/* en mobile la banda visible de cada tarjeta es de ~14px y la frontal arranca fuera del
   viewport (left: -18.75%): no hay dónde leer un nombre. El abanico es textura pura, sin
   texto. visibility (no display) para que la geometría de la tarjeta no cambie; los
   nombres siguen en el DOM vía .pieza__desc.sr-only. */
@media (max-width: 767px) {
  .fan-card .pieza__head,
  .fan-card .pieza__line { visibility: hidden; }
}
.fan-card:nth-child(1) { left: -18.75%;   top: 57.1429%; z-index: 7; transform: translate3d(165.686%, -66.667%, 0); }
.fan-card:nth-child(2) { left: -3.6607%;  top: 48.9796%; z-index: 6; transform: translate3d(118.347%, -47.619%, 0); }
.fan-card:nth-child(3) { left: 11.4286%;  top: 40.8163%; z-index: 5; transform: translate3d(71.008%,  -28.571%, 0); }
.fan-card:nth-child(4) { left: 26.5179%;  top: 32.6531%; z-index: 4; transform: translate3d(23.669%,  -9.524%,  0); }
.fan-card:nth-child(5) { left: 41.6071%;  top: 24.4898%; z-index: 3; transform: translate3d(-23.669%, 9.524%,   0); }
.fan-card:nth-child(6) { left: 56.6964%;  top: 16.3265%; z-index: 2; transform: translate3d(-71.008%, 28.571%,  0); }
.fan-card:nth-child(7) { left: 71.7857%;  top: 8.1633%;  z-index: 1; transform: translate3d(-118.347%, 47.619%, 0); }
.fan-card:nth-child(8) { left: 86.875%;   top: 0%;       z-index: 0; transform: translate3d(-165.686%, 66.667%, 0); }
.fan-card:nth-child(1) { transition-delay: 0ms; }
.fan-card:nth-child(2) { transition-delay: 40ms; }
.fan-card:nth-child(3) { transition-delay: 80ms; }
.fan-card:nth-child(4) { transition-delay: 120ms; }
.fan-card:nth-child(5) { transition-delay: 160ms; }
.fan-card:nth-child(6) { transition-delay: 200ms; }
.fan-card:nth-child(7) { transition-delay: 240ms; }
.fan-card:nth-child(8) { transition-delay: 280ms; }
.fan.is-open .fan-card { transform: translate3d(0, 0, 0); }
.fan.is-open .fan-card .pieza { box-shadow: var(--shadow-slide); }
.fan.is-open .fan-card:hover .pieza { transform: translateY(-8px); box-shadow: var(--shadow-deep); }

.proof-status {
  margin-top: 24px; font-size: 13px; font-weight: 360;
  letter-spacing: -0.13px; color: var(--text-faint); text-align: center;
  padding: 0 24px; line-height: 1.7; font-style: italic;
}

/* ============ footer ============ */

.footer {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  margin-top: 120px; padding: 0 16px 40px;
}
@media (min-width: 768px) { .footer { margin-top: 140px; padding: 0 24px 56px; gap: 28px; } }
.footer .hairline { max-width: 960px; }

.footer__inner {
  width: 100%; max-width: 960px;
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 900px) {
  .footer__inner { flex-direction: row; justify-content: space-between; gap: 48px; }
}

/* la marca y lo que somos, en una línea */
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 320px; }
.footer__claim {
  font-size: 15px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.35; color: var(--text);
}
.footer__place {
  font-size: 13px; font-weight: 360; line-height: 1.6; letter-spacing: -0.13px; color: var(--text-muted);
}

.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
@media (min-width: 560px) { .footer__cols { grid-template-columns: repeat(3, auto); gap: 48px; } }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer__h {
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text-faint);
  margin-bottom: 2px;
}
.footer__col a {
  font-size: 13.5px; font-weight: 360; letter-spacing: -0.13px; color: var(--text-muted);
  text-decoration: none; transition: color 0.15s;
}
.footer__col a:hover { color: var(--text); }
.btn-cta--foot { height: 40px; border-radius: 999px; padding: 0 18px; font-size: 14px; }
.footer__fine {
  font-size: 12.5px; font-weight: 360; line-height: 1.55; letter-spacing: -0.12px;
  color: var(--text-faint); max-width: 210px;
}
.footer__fine b { color: var(--text-muted); font-weight: 600; }

.footer__base {
  width: 100%; max-width: 960px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between;
}
.footer__base span, .footer__base a {
  font-size: 12.5px; font-weight: 360; letter-spacing: -0.12px; color: var(--text-faint);
  text-decoration: none;
}
.footer__base-links { display: flex; gap: 18px; }
.footer__base a:hover { color: var(--text-muted); }

/* ============ whatsapp fab ============ */

.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--text); color: var(--background);
  box-shadow: var(--shadow-fab);
  transition: transform 0.2s var(--ease-snap), background-color 0.15s;
}
.wa-fab:hover { transform: translateY(-3px); background: var(--neutral-900); }
@media (min-width: 768px) { .wa-fab { right: 24px; bottom: 24px; } }

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fan-card, .rotator__track, .tags button, .reveal,
  .cv-slot, .cv-slot__label, .cv-caption > p, .receipt__check, .receipt__check::after { transition: none; }
  .slot--open .slot__status::before { animation: none; }
  .section-head--hero > *, .proof { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  /* capa Explica: los resaltadores y las rutas quedan quietos, pero visibles */
  .mk, .steps__path { transition: none; }
  .cv-map path, .steps__path path, .mech__map path { animation: none; }
  .section-head--hero .mk { animation: none; background-size: 100% 0.4em; }
  .section-head--hero .rotator__word .mk { background-size: 100% 0.36em; }
  /* el nexo: rutas dibujadas, fichas puestas, sin pulsos, sin flotación, sin latido */
  .nexus__lines path { animation: none; stroke-dashoffset: 0; }
  .nexus__flow { display: none; }
  .nexus__core, .nexus__tile { animation: none; opacity: 1; scale: none; }
  .nexus__tiles { }
  /* Montaje: el collage se muestra montado y quieto */
  .collage__shape, .collage__cut, .collage__obj, .collage__note, .collage__lines { animation: none; opacity: 1; transform: none; scale: none; translate: none; }
  .collage__obj { transform: rotate(var(--r)); }
  .five__shape, .five__cut { transition: none; opacity: 1; }
  .five__shape { transform: translate(-50%, -50%) scale(1); }
  .five__cut { transform: translate(-50%, -50%); }
}

/* ============ comparación con las alternativas ============ */
/* Una columna se levanta del resto: el panel de acento va detrás de las celdas .is-us
   (ancho = 1.15fr de 5.5fr = 20.909 %) y sobresale arriba y abajo de la tabla. */

.compare { width: 100%; max-width: 960px; margin-top: 56px; padding: 16px 0; overflow-x: auto; scrollbar-width: thin; }
@media (min-width: 768px) { .compare { margin-top: 64px; padding: 20px 0; } }
.compare__inner {
  position: relative; min-width: 720px; border-radius: 20px;
  border: 0.5px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-faq);
}
.compare__hl {
  position: absolute; right: 0; top: -14px; bottom: -14px; width: 20.909%;
  border-radius: 20px; background: var(--accent-50);
  border: 1px solid var(--accent-200); box-shadow: var(--shadow-card);
  pointer-events: none;
}
@media (min-width: 768px) { .compare__hl { top: -18px; bottom: -18px; border-radius: 22px; } }
.compare__row {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1.15fr;
}
.compare__row > span {
  position: relative; z-index: 1;
  padding: 16px 16px; font-size: 13.5px; font-weight: 360; letter-spacing: -0.13px; line-height: 19px;
  color: var(--text-muted); transition: background-color 0.15s ease;
}
@media (min-width: 768px) { .compare__row > span { padding: 20px 20px; font-size: 14.5px; line-height: 21px; } }
/* la línea divisoria no cruza la columna levantada */
.compare__row:not(.compare__row--head) > span:not(.is-us) { border-top: 0.5px solid var(--border); }
.compare__row:not(.compare__row--head) > span.is-us::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 0.5px; background: var(--accent-200);
}
.compare__row > span[role="rowheader"] { color: var(--text); font-weight: 500; }
.compare__row--head > span {
  padding-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: -0.13px;
  color: var(--text-muted); text-transform: none;
}
@media (min-width: 768px) { .compare__row--head > span { padding-bottom: 14px; } }
.compare__eyebrow { color: var(--text-muted); }
.compare__row--head > span.is-us { display: flex; align-items: flex-start; }
.compare__row--head > span.is-us .logo { font-size: 16px; }
.compare__row > span.is-us { color: var(--text); font-weight: 500; }
.compare__row:last-child > span.is-us { padding-bottom: 22px; }
/* en mobile la primera columna queda fija y el borde derecho se desvanece: se ve que hay más */
@media (max-width: 767px) {
  .compare__row > span:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 8px 0 12px -10px rgba(10, 10, 10, 0.25); }
  .compare { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
}
/* la fila se resalta completa al pasar el cursor (solo con puntero real) */
@media (hover: hover) {
  .compare__row:not(.compare__row--head):hover > span { background: var(--surface-2); }
  .compare__row:not(.compare__row--head):hover > span.is-us { background: var(--accent-100); }
  .compare__row:not(.compare__row--head):hover > span:first-child { background: var(--surface-2); }
}
/* en mobile la columna nuestra va segunda: es lo que hay que leer sin desplazarse.
   Las celdas son ítems de grid, así que basta reordenarlas con `order`; los carriles
   cambian de reparto para que la nuestra conserve su ancho (1.15 / 5.5 = 20.909 %) y
   el panel levantado arranque donde ahora empieza (1.35 / 5.5 = 24.545 %). */
@media (max-width: 767px) {
  .compare__row { grid-template-columns: 1.35fr 1.15fr 1fr 1fr 1fr; }
  .compare__row > span:first-child { order: -2; }
  .compare__row > span.is-us { order: -1; }
  .compare__hl { right: auto; left: 24.545%; }
}

/* cupo abierto como botón */
button.slot { background: transparent; font: inherit; text-align: left; cursor: pointer; }
.slot--open:hover { border-color: var(--accent); background: var(--accent-50); }

/* ============ pantalla de cliente ============
   Se abre desde una burbuja de testimonio. Es una capa sobre el sitio, con su propio
   scroll: no cambia de página, no toca la URL. El hover sigue mostrando solo la cita —una
   pantalla completa disparada por el cursor se abriría sin querer todo el rato—, así que
   el gesto que la abre es el clic.
   Mismo papel, misma tipografía, mismo verde una sola vez. */

.caso { position: fixed; inset: 0; z-index: 400; }
.caso__velo {
  position: absolute; inset: 0; background: var(--text); opacity: 0;
  transition: opacity var(--dur-drawer) var(--ease-out);
}
.caso.is-on .caso__velo { opacity: 0.28; }

.caso__panel {
  position: absolute; left: 50%; bottom: 0; width: min(920px, 100%);
  max-height: 92vh; display: flex; flex-direction: column;
  background: var(--background);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-deep);
  transform: translateX(-50%) translateY(28px); opacity: 0;
  transition: transform var(--dur-drawer) var(--ease-snap), opacity var(--dur-pill) var(--ease-out);
}
@media (min-width: 768px) {
  /* en desktop la capa se centra y flota; en mobile sube desde abajo, que es el gesto
     que ya conoce el pulgar */
  .caso__panel {
    top: 50%; bottom: auto; max-height: 88vh;
    border-radius: var(--radius-card);
    transform: translate(-50%, calc(-50% + 20px)) scale(0.985);
  }
}
.caso.is-on .caso__panel { transform: translateX(-50%) translateY(0); opacity: 1; }
@media (min-width: 768px) {
  .caso.is-on .caso__panel { transform: translate(-50%, -50%) scale(1); }
}

/* El panel recibe el foco al abrirse (para que el teclado entre dentro), pero no lleva
   anillo: la regla global :focus-visible le dibujaba un marco verde alrededor de toda la
   capa. El foco sí se ve en los controles de dentro, que es donde importa. */
.caso__panel:focus, .caso__panel:focus-visible { outline: none; }

.caso__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-full); color: var(--text-muted);
  background: var(--surface); border: 0.5px solid var(--border);
  transition: color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.caso__x:hover { color: var(--text); background: var(--surface-2); }

.caso__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 30px 22px 34px; }
@media (min-width: 768px) { .caso__scroll { padding: 44px 48px 48px; } }

/* --- encabezado --- */
.caso__head { display: flex; align-items: center; gap: 14px; }
/* El objeto del caso, a la derecha de la cabecera: la misma pieza que se ve en la ficha
   del hero, para que se reconozca de dónde se viene. Se encoge antes que el nombre. */
.caso__obj { width: 72px; height: 72px; margin-left: auto; flex: none; object-fit: contain; }
@media (min-width: 768px) { .caso__obj { width: 104px; height: 104px; } }
.caso__logo {
  width: 52px; height: 52px; flex: none; border-radius: var(--radius-full);
  display: grid; place-items: center; overflow: hidden; object-fit: cover;
  background: var(--surface-2); border: 0.5px solid var(--border);
  font-size: 16px; font-weight: 600; letter-spacing: -0.3px; color: var(--text-muted);
}
.caso__name { font-size: 26px; font-weight: 600; letter-spacing: -1px; color: var(--text); line-height: 1.1; }
@media (min-width: 768px) { .caso__name { font-size: 32px; letter-spacing: -1.3px; } }
.caso__kind { margin-top: 3px; font-size: 13px; font-weight: 360; letter-spacing: -0.13px; color: var(--text-muted); }
.caso__lead {
  margin-top: 18px; font-size: 17px; font-weight: 400; line-height: 1.45;
  letter-spacing: -0.4px; color: var(--text); max-width: 30em;
}
@media (min-width: 768px) { .caso__lead { font-size: 19px; } }

/* --- rótulo de sección: la anotación fina del sistema --- */
.caso__sec {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 16px;
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.12px; color: var(--text-muted);
}
.caso__sec::after { content: ""; flex: 1; height: 0.5px; background: var(--border); }

/* --- qué operamos: la capacidad, que es lo que sí podemos mostrar --- */
.caso__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.caso__op {
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 0.5px solid var(--border);
  font-size: 13.5px; font-weight: 400; letter-spacing: -0.13px; color: var(--text);
}

/* --- el trabajo: un objeto real por bloque --- */
.caso__work { display: grid; gap: 14px; }
@media (min-width: 640px) { .caso__work { grid-template-columns: 1fr 1fr; } }
.caso__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--radius-card-m);
  background: var(--surface); border: 0.5px solid var(--border);
}
.caso__item img { width: 54px; height: 54px; flex: none; filter: var(--shadow-fan); }
.caso__it { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }
.caso__id {
  margin-top: 5px; font-size: 13.5px; font-weight: 360; line-height: 1.5;
  letter-spacing: -0.13px; color: var(--text-muted);
}

/* --- la cita, con la misma barra verde del hero --- */
.caso__quote {
  display: grid; grid-template-columns: 4px 1fr; column-gap: 20px; align-items: start;
}
.caso__quote > span { background: var(--accent); border-radius: 2px; align-self: stretch; }
.caso__qt {
  margin: 0; font-size: 19px; font-weight: 400; line-height: 1.45;
  letter-spacing: -0.5px; color: var(--text); text-indent: -0.42em; text-wrap: pretty;
}
@media (min-width: 768px) { .caso__qt { font-size: 22px; letter-spacing: -0.7px; } }
.caso__qw { margin-top: 12px; font-size: 13.5px; letter-spacing: -0.13px; color: var(--text-muted); }
.caso__qw b { font-weight: 600; color: var(--text); }

/* --- cifras: solo si el cliente las autorizó (CONFIG.clients[].datos) --- */
.caso__datos { display: grid; gap: 12px; }
@media (min-width: 640px) { .caso__datos { grid-template-columns: repeat(3, 1fr); } }
.caso__dato {
  padding: 18px; border-radius: var(--radius-card-m);
  background: var(--surface); border: 0.5px solid var(--border);
}
.caso__dv { font-size: 30px; font-weight: 600; letter-spacing: -1.2px; color: var(--accent); line-height: 1; }
.caso__dv span { font-size: 17px; letter-spacing: -0.5px; }
.caso__dl { margin-top: 7px; font-size: 13px; font-weight: 360; letter-spacing: -0.13px; color: var(--text-muted); }
.caso__barra { margin-top: 12px; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.caso__barra i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }

/* --- la nota honesta cuando no hay cifras publicadas --- */
.caso__nota {
  padding: 18px 20px; border-radius: var(--radius-card-m);
  background: var(--surface-2); border: 0.5px solid var(--border);
  font-size: 13.5px; font-weight: 360; line-height: 1.6;
  letter-spacing: -0.13px; color: var(--text-muted);
}

.caso__cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.caso__fine { font-size: 12.5px; font-weight: 360; letter-spacing: -0.12px; color: var(--text-faint); }

/* el contenido entra escalonado, como el resto del sitio */
.caso__in { opacity: 0; transform: translateY(12px); }
.caso.is-on .caso__in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-drawer) var(--ease-snap);
  transition-delay: calc(60ms + var(--i, 0) * 55ms);
}

body.caso-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .caso__velo, .caso__panel, .caso__in { transition-duration: 1ms; }
}