/* ==========================================================================
   JOMMA — Just One More Marketing Agency
   Design system. Dark Mode Luxury + Data + Technology.
   Tokens first: ningun componente usa HEX crudo.
   ========================================================================== */

/* -------------------------------------------------- 0. COMPORTAMIENTO */
/* Reglas de plataforma, sin color. Vienen de la revision con las Web
   Interface Guidelines del 2026-08-28. */

/* Sin esto, un toque en movil espera 300ms por si es doble toque. */
a, button, summary, label, [role="button"], input[type="range"], input[type="checkbox"] {
  touch-action: manipulation;
  /* El resaltado azul por defecto no existe en esta paleta. El estado
     tactil lo dan los propios :active y :hover de cada componente. */
  -webkit-tap-highlight-color: transparent;
}

/* El nav va fijo: sin margen de scroll, cada ancla deja su titulo debajo
   de la barra y parece que el enlace no llevo a ningun lado. */
[id] { scroll-margin-top: clamp(4.5rem, 4rem + 3vw, 6.5rem); }

/* Recorte de pantalla y bordes redondeados: las secciones a sangre se
   meten debajo del notch si no se declara la zona segura. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: dark;

  /* Paleta oficial */
  --onyx: #0a0a0a;
  --midnight: #0f172a;
  --emerald: #0d4c3c;
  --gold: #c69b3c;
  --ivory: #faf0e6;

  /* Derivados de superficie */
  --surface-0: var(--onyx);
  --surface-1: #101010;
  --surface-2: #141414;
  --surface-deep: var(--midnight);
  --surface-deep-2: #131e35;

  /* Derivados de senal. El esmeralda y el oro de marca son demasiado
     oscuros para texto pequeno sobre onyx, asi que el texto usa las
     variantes claras y los rellenos usan las de marca. */
  --emerald-fill: var(--emerald);
  --emerald-signal: #35c99a;
  --emerald-dim: rgba(53, 201, 154, 0.14);
  --gold-fill: var(--gold);
  --gold-signal: #e2bb66;
  --gold-dim: rgba(198, 155, 60, 0.12);

  /* Texto */
  --text: var(--ivory);
  --text-muted: rgba(250, 240, 230, 0.66);
  /* 0.42 daba 3.74:1 sobre el fondo profundo, por debajo del minimo de
     4.5:1 que pide el texto pequeno. A 0.52 queda en 5.06:1. */
  --text-faint: rgba(250, 240, 230, 0.52);

  /* Lineas */
  --line: rgba(250, 240, 230, 0.1);
  --line-gold: rgba(198, 155, 60, 0.28);
  --line-strong: rgba(250, 240, 230, 0.2);

  /* Tipografia */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.42vw, 1.44rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.83vw, 1.94rem);
  --step-3: clamp(1.65rem, 1.38rem + 1.4vw, 2.75rem);
  --step-4: clamp(1.95rem, 1.45rem + 2.6vw, 3.9rem);
  --step-5: clamp(2.7rem, 1.63rem + 5.3vw, 5.8rem);
  --step-6: clamp(3.2rem, 1.2rem + 9.4vw, 9rem);

  /* Ritmo */
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.9rem + 4vw, 6.5rem);
  --max: 1240px;
  --max-narrow: 780px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t: 260ms;
  --t-slow: 620ms;

  /* Efectos */
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  --shadow-gold: 0 24px 60px -28px rgba(198, 155, 60, 0.4);
  --radius: 14px;
  --radius-lg: 22px;
}

/* ----------------------------------------------------------- 2. RESET BASE */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-signal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(198, 155, 60, 0.32); color: var(--ivory); }

/* ----------------------------------------------------- 3. TIPOGRAFIA BASE */
h1, h2, h3, h4, .cabh4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4, .cabh4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-signal);
  display: block;
  margin-bottom: 1.35rem;
}

.eyebrow--muted { color: var(--text-faint); }

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.gold { color: var(--gold-signal); }
.emerald { color: var(--emerald-signal); }

.disclaimer {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 68ch;
}

.pending {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold-signal);
  border: 1px dashed var(--line-gold);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  white-space: nowrap;
}

/* --------------------------------------------------------- 4. LAYOUT BASE */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

section { position: relative; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem); }
.section--deep { background: var(--surface-deep); }
.section--raise { background: var(--surface-1); }

.section-head { max-width: 74ch; margin-bottom: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); }
.section-head p { margin-top: 1.4rem; }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
  margin: 0;
}

.grid { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: 1.15rem; }

/* Textura de grano, muy sutil, solo donde aporta profundidad */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 5. BOTONES */
.btn {
  --btn-bg: linear-gradient(135deg, #e2bb66, #c69b3c 52%, #a07c2c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: #120d02;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-gold);
}

.btn--ghost:hover {
  border-color: var(--gold-signal);
  background: var(--gold-dim);
  box-shadow: none;
  filter: none;
}

.btn--sm { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.7rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-signal);
  padding-block: 0.4rem;
  transition: gap var(--t) var(--ease);
}

.link-arrow::after { content: "\2192"; transition: transform var(--t) var(--ease); }
.link-arrow:hover { gap: 0.8rem; }
.link-arrow:hover::after { transform: translateX(2px); }

/* ------------------------------------------------------------- 6. TARJETAS */
.card {
  position: relative;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}

.card--glass { backdrop-filter: blur(14px); }

.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  background: linear-gradient(158deg, rgba(198, 155, 60, 0.08), rgba(255, 255, 255, 0.014));
}

/* Filo de luz superior que solo aparece al interactuar */
.card--hover::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-signal), transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.card--hover:hover::before { opacity: 0.9; }

.card__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gold-signal);
}

.card h3 { margin-block: 0.9rem 0.7rem; }
.card p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.62; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chip--gold { border-color: var(--line-gold); color: var(--gold-signal); }
.chip--emerald { border-color: rgba(53, 201, 154, 0.3); color: var(--emerald-signal); }

.demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.demo-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-signal);
  opacity: 0.8;
}

/* ---------------------------------------------------------- 7. NAVEGACION */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

/* ------------------------------------------------------------- EL LOGO */
/* JOMMA es el acronimo de su propio nombre, asi que el logo no lo ilustra:
   lo abre. Cada inicial suelta su palabra debajo. Cerrado es exactamente el
   logotipo de siempre; abierto dice Just One More Marketing Agency.

   La bajada va en posicion absoluta a proposito: si ocupara sitio en el
   flujo, abrirse empujaria toda la barra hacia abajo. */
.brand {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  /* Exactamente la separacion del logotipo de siempre: 0.18em. Al pasar a
     columnas se habia colado un 0.42em, que separaba las letras 2.3 veces
     mas y hacia que el logo dejara de ser el mismo. */
  gap: 0.18em;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ivory);
  transition: gap 0.38s var(--ease);
}

/* Al abrirse, las letras se separan para dar sitio a sus palabras. Eso es
   parte del gesto: el logo no solo saca texto, se abre. */
.brand:hover,
.brand.is-abierto { gap: 0.78em; }

.brand__c { position: relative; display: block; }
.brand__c b { font-weight: 700; }
.brand__c--oro b { color: var(--gold-signal); }

.brand__c i {
  position: absolute;
  top: 1.12em;
  left: 0;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.26em;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
  pointer-events: none;
}

/* Escalonado: las palabras no salen todas de golpe, salen en orden, que es
   como se lee la frase. */
.brand__c:nth-child(1) i { transition-delay: 0ms; }
.brand__c:nth-child(2) i { transition-delay: 60ms; }
.brand__c:nth-child(3) i { transition-delay: 120ms; }
.brand__c:nth-child(4) i { transition-delay: 180ms; }
.brand__c:nth-child(5) i { transition-delay: 240ms; }

.brand:hover .brand__c i,
.brand:focus-visible .brand__c i,
.brand.is-abierto .brand__c i { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   El tamano manda: la bajada es 0.26 de la inicial, asi que con el logo a
   1.16rem la palabra saldria a 4.8 px, ilegible. Medido en el navegador:
   para que la bajada llegue a los 11 px minimos, la inicial tiene que
   medir 42 px. Ese es el piso de la version abierta.

   Consecuencia: en la barra el logo va cerrado y no se abre. Ahi no cabe,
   y forzarlo solo produciria una linea de texto que nadie puede leer. */
.nav .brand__c i { display: none; }

/* En el pie si hay sitio: el logo crece y la bajada se queda abierta. */
.footer__brand .brand { font-size: 2.6rem; letter-spacing: 0; gap: 0.78em; }
.footer__brand .brand__c i {
  opacity: 1;
  transform: none;
  transition: none;
  color: var(--text-faint);
}
/* La ultima palabra es la que puede salirse por la derecha: se alinea al
   final de su inicial en vez de al principio. */
.brand__c:last-child i { left: 0; right: auto; }

/* No se reduce en movil: a 375 la columna mide 305 px, mas que en
   escritorio, asi que el logo cabe y la bajada se mantiene en 10.8 px.
   Bajarlo a 2.1rem la dejaba en 8.7 px, por debajo de lo legible. */

.nav__links { display: flex; align-items: center; gap: 1.9rem; }

.nav__links a {
  font-size: 0.86rem;
  color: var(--text-muted);
  transition: color var(--t) var(--ease);
  position: relative;
  padding-block: 0.35rem;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}

.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--ivory);
  transform: translateX(-50%);
  transition: transform var(--t) var(--ease), opacity var(--t);
}

.nav__toggle span { top: 50%; margin-top: -0.75px; }
.nav__toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav__toggle span::after { content: ""; top: 6px; left: 0; transform: none; }

.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.2rem var(--gutter) 2rem;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .nav__links a { width: 100%; padding-block: 0.9rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__cta { display: none; }
  /* El color se repite a proposito. `.nav__links a` pesa mas que `.btn` en
     la cascada, asi que el boton del menu movil heredaba el crema del nav
     sobre su propio fondo dorado: 1.22:1, por debajo del minimo de 4.5:1,
     y es el CTA principal en telefono. En escritorio no se veia porque ahi
     este boton esta oculto y el que se muestra es `.nav__cta`. */
  .nav__links .btn { margin-top: 1.2rem; width: 100%; color: #120d02; }
}

@media (min-width: 941px) {
  .nav__links .btn { display: none; }
}

/* ----------------------------------------------------------- 8. REVELADOS */
/* El contenido solo se oculta cuando hay JS para volver a mostrarlo.
   Sin JS, o si algo falla, la pagina se lee completa. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* Mismo criterio para la secuencia del hero. */
.js .hero__frame { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.js .hero__frame.is-active { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- 9. HERO */
.hero { position: relative; }

.hero__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-block: 108px clamp(9rem, 7rem + 6vw, 12rem);
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 22% 30%, rgba(13, 76, 60, 0.4), transparent 70%),
    radial-gradient(46% 40% at 82% 68%, rgba(198, 155, 60, 0.16), transparent 72%);
}

.hero__frames {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  padding-inline: var(--gutter);
  display: grid;
  place-items: center;
}

.hero__frame {
  grid-area: auto;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translateY(14px);
  transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out);
}

.hero__frame.is-active { transform: none; }

/* Frame 1: lockup vertical */
.lockup { display: grid; gap: clamp(0.1rem, 0.4vw, 0.35rem); width: 100%; max-width: 780px; }

.lockup__row {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1rem + 7.4vw, 6.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.lockup__initial { color: var(--ivory); }

/* El resto de la palabra sale de la inicial y se apaga hacia la derecha */
.lockup__rest {
  color: var(--ivory);
  white-space: nowrap;
  transform-origin: left center;
  transform: translateX(-0.25em) scaleX(0.7);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .lockup__rest { opacity: 0; }
.hero__frame.is-active .lockup__rest { transform: none; opacity: 0.55; }

/* Frames de secuencia */
.hero__line {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero__word {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--ivory);
}

.hero__word small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-signal);
  margin-bottom: 1.4rem;
}

.hero__sign {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1.6rem;
}

/* El titular fijo del hero. Ocupa el lugar que tenia la secuencia de
   once cuadros, que desde el 2026-09-01 vive en el bloque de marca del
   cierre. Sin animacion a proposito: la portada tardaba 7.06 s en decir
   a que se dedica y ese es el unico espacio que se cobra por segundo. */
.hero__fijo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  padding-inline: var(--gutter);
  display: grid;
  place-items: center;
  text-align: center;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}

.hero__sub {
  max-width: 56ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
}

.hero__pie { font-size: var(--step--1); }

/* El cierre del cuestionario. El boton vive a 3.5 pantallas de scroll y
   detras de el hay dos pantallas mas que solo aparecen al pulsarlo: por
   eso se anuncia antes y ocupa el ancho completo. */
.pb__cierre {
  margin-top: 1.4rem;
  padding: clamp(1rem, .85rem + .6vw, 1.4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
}

.pb__cierre-t {
  margin-bottom: .9rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.pb__cierre-t b { color: var(--text); font-weight: 500; }

.pb__cierre-btn { width: 100%; justify-content: center; }


/* La unica prueba verificable del home. El sujeto de la frase es la
   persona, no la agencia: las cifras son de la trayectoria de Oscar y la
   regla 3 exige que se digan asi, con su nota al pie a la mano. */
.hero__prueba {
  max-width: 58ch;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}

.hero__prueba b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold-signal);
  font-variant-numeric: tabular-nums;
}

.notita { display: inline; }

.notita > summary {
  display: inline;
  cursor: pointer;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .92em;
}

.notita > summary::-webkit-details-marker { display: none; }
.notita[open] { display: block; margin-top: .6rem; color: var(--text-faint); font-size: .92em; }
.notita[open] > summary { display: block; margin-bottom: .3rem; }


/* El puente de credibilidad: una cifra al lado de su explicacion. La
   pieza suelta lleva su propio borde porque no viaja dentro de .metrics,
   que es una reja y con una sola celda dejaria hueco. */
.puente {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .puente { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}
.puente .metric {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}


.hero__foot {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.6rem, 1rem + 2vw, 3rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding-inline: var(--gutter);
}

.hero__progress {
  width: min(320px, 60vw);
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.hero__progress i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
}

.hero__hint {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Al terminar la secuencia, la barra cede su lugar a un control discreto. */
.hero__replay {
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}

.hero__replay:hover { color: var(--gold-signal); }
.hero__stage.is-done .hero__replay { opacity: 1; pointer-events: auto; }
.hero__stage.is-done .hero__progress { opacity: 0; }
.hero__progress { transition: opacity var(--t) var(--ease); }

/* Fondo abstracto de datos */
.data-bg { width: 100%; height: 100%; }
.data-bg .drift { animation: drift 26s linear infinite; }
.data-bg .drift-slow { animation: drift 44s linear infinite reverse; }
.data-bg .pulse { animation: pulse 4.5s ease-in-out infinite; }
.data-bg .trace { stroke-dasharray: 420; stroke-dashoffset: 420; animation: trace 9s var(--ease) infinite; }

@keyframes drift { to { transform: translateY(-36px); } }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } }
@keyframes trace { 0% { stroke-dashoffset: 420; } 55%, 100% { stroke-dashoffset: 0; } }

/* --------------------------------------------------------- 10. METRICAS */
/* Ocho cifras. El numero de columnas se fija a mano porque auto-fit
   resolvia cinco y dejaba dos celdas vacias, que se veian como huecos:
   el contenedor pinta la linea y una celda sin pieza no pinta nada. */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 780px)  { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.metric { background: var(--surface-0); padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); }
.section--deep .metric { background: var(--surface-deep); }

.metric__value {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold-signal);
  font-feature-settings: "tnum" 1;
}

.metric--growth .metric__value { color: var(--emerald-signal); }

.metric__label {
  margin-top: 0.85rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.45;
}

/* --------------------------------------------------- 11. CICLO DE DATOS */
.loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 1rem;
  counter-reset: loop;
}

.loop__node {
  position: relative;
  padding: 1.5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

.section--deep .loop__node { background: rgba(255, 255, 255, 0.025); }

.loop__node.is-lit {
  border-color: var(--line-gold);
  background: linear-gradient(160deg, rgba(198, 155, 60, 0.12), rgba(255, 255, 255, 0.02));
  transform: translateY(-3px);
}

.loop__node h4 {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.loop__node p { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-muted); }

.loop__node::before {
  counter-increment: loop;
  content: "0" counter(loop);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gold-signal);
  opacity: 0.55;
  display: block;
  margin-bottom: 0.9rem;
}

.loop__node.is-lit::before { opacity: 1; }

.loop__return {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.loop__return::before { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-gold), transparent); }

/* ------------------------------------------------------- 12. ECOSISTEMA */
/* Once pasos planos en un riel vertical no se sostienen de un vistazo y
   ocupaban casi mil pixeles. Ahora se agrupan en cinco fases y corren en
   horizontal: agrupar por proximidad es lo que vuelve legible una lista
   que plana no lo era, y el alto baja a la mitad. */

.eco { display: grid; gap: clamp(1.1rem, 0.9rem + 1vw, 1.7rem); }

.eco__pista {
  display: grid;
  grid-template-columns: repeat(5, minmax(158px, 1fr));
  gap: 0.55rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.3rem;
  scrollbar-width: none;
}
.eco__pista::-webkit-scrollbar { display: none; }

/* Cada fase es una region propia: eso es lo que hace legible el grupo. */
.eco__fase {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.7rem 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.eco__fase.is-on {
  border-color: var(--line-gold);
  background: rgba(198, 155, 60, 0.06);
}

/* Nivel primario de la seccion: la fase se lee antes que el paso. */
.eco__faseT {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0.4rem 0.35rem;
  transition: color var(--t) var(--ease);
}

.eco__fase.is-on .eco__faseT { color: var(--gold-signal); }

/* Nivel secundario: los pasos. Son botones de verdad, asi que responden
   al teclado. Antes eran div con listener y no habia forma de llegar. */
.eco__step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 34px;
  padding: 0.42rem 0.55rem;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  /* Atenuar hasta lo ilegible no es jerarquia, es esconder: 0.42 no
     alcanzaba para leer los diez pasos que no estaban activos. */
  opacity: 0.72;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), opacity var(--t) var(--ease);
}

.eco__step:hover { opacity: 1; background: rgba(255, 255, 255, 0.04); }
.eco__step:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: -2px; }

.eco__step.is-active {
  opacity: 1;
  border-color: var(--line-gold);
  background: rgba(198, 155, 60, 0.1);
}

.eco__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.eco__step.is-active .eco__dot { background: var(--gold-signal); box-shadow: 0 0 0 3px rgba(198, 155, 60, 0.16); }
.eco__step.is-done .eco__dot { background: var(--emerald-signal); }

.eco__name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.25;
}

/* El panel toma alto fijo para que la seccion no salte al cambiar de paso. */
.eco__panel {
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 34vh, 360px);
  padding: clamp(1.3rem, 1.05rem + 1.1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
}

.eco__panel[hidden] { display: none; }

/* Sin JS los pasos no se pueden pulsar, asi que diez de los once paneles
   quedarian inalcanzables. La regla del sitio es que sin JS la pagina se
   lee completa: se muestran todos y se retiran los controles que no
   funcionarian. */
html:not(.js) .eco__panel[hidden] { display: flex; }
html:not(.js) .eco__transport { display: none; }
html:not(.js) .eco__step { pointer-events: none; }
.eco__panel h3 { font-size: var(--step-2); }
.eco__panel p { margin-top: 1rem; color: var(--text-muted); max-width: 62ch; }

.eco__readout {
  margin-top: auto;
  padding-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.9rem;
}

.eco__stat {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}

.eco__stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold-signal);
}

.eco__stat span { font-size: 0.72rem; color: var(--text-faint); }

/* El aviso de ejemplo viaja con el panel: la etiqueta de la cabecera queda
   demasiado lejos cuando la secuencia va por el paso diez. */
.eco__demo {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  order: -1;
}

/* ---------------------------------------------------------- 13. TABS OS */
.os {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  overflow: hidden;
}

.os__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
}

.os__dots { display: flex; gap: 0.4rem; }
.os__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.os__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-muted); }
.os__title b { color: var(--text); font-weight: 500; }

.os__tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.7rem 0.7rem 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
}

/* La barra se agrupa como el centro de mando real: Operacion, Venta,
   Entrega y Dinero. La etiqueta va dentro del tablist como presentacion,
   asi el grupo se ve sin romper la semantica de pestanas. */
/* El modulo del agente: encabeza con su estado real, porque marcar como
   disponible algo que no lo esta es el error que ya se corrigio una vez
   en las integraciones. */
.agn__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.agn__intro p { flex: 1 1 20rem; font-size: var(--step--1); line-height: 1.55; }

.os__grupo {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0.55rem;
  padding-right: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-left: 1px solid var(--line);
  padding-left: 0.8rem;
}
.os__grupo:first-child { margin-left: 0; padding-left: 0; border-left: 0; }

.os__tab {
  flex: 0 0 auto;
  padding: 0.6rem 0.95rem;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.os__tab:hover { color: var(--text); }

.os__tab[aria-selected="true"] {
  color: var(--gold-signal);
  background: rgba(198, 155, 60, 0.09);
  border-color: var(--line-gold);
}

.os__panel { padding: clamp(1.1rem, 0.9rem + 1vw, 1.9rem); }
.os__panel[hidden] { display: none; }

.os__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 0.9rem; }

.tile {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
}

.tile span { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0.05em; }

.tile b {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ivory);
}

.tile i { font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; }
.tile i.up { color: var(--emerald-signal); }
.tile i.down { color: var(--gold-signal); }

/* Tabla operativa */
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { padding: 0.75rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }

.table th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

.table td { color: var(--text-muted); }
.table td.num { font-family: var(--font-mono); color: var(--text); text-align: right; font-feature-settings: "tnum" 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* Kanban */
.kanban { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.6rem; }
.kanban__col { flex: 0 0 190px; }

.kanban__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kanban__head b { color: var(--gold-signal); font-weight: 500; }

.kanban__body {
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  padding: 0.5rem;
  display: grid;
  gap: 0.5rem;
  min-height: 130px;
  background: rgba(0, 0, 0, 0.24);
}

.kanban__card {
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-deep-2);
  font-size: 0.78rem;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.kanban__card:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.kanban__card small { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); }
.kanban__card.won { border-color: rgba(53, 201, 154, 0.35); }

/* Barras y sparklines */
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 120px; }
.bars > i { flex: 1; background: linear-gradient(180deg, var(--gold-signal), rgba(198, 155, 60, 0.25)); border-radius: 3px 3px 0 0; height: var(--h, 40%); }
.bars > i.alt { background: linear-gradient(180deg, var(--emerald-signal), rgba(53, 201, 154, 0.2)); }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 10px; height: 3px; border-radius: 2px; background: var(--gold-signal); }
.legend i.alt { background: var(--emerald-signal); }

/* Cotizacion y factura */
.doc {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.doc__head { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.doc__head b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.06em; }
.doc__body { padding: 1.1rem 1.2rem; }

.doc__totals { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: 0.5rem; }
.doc__totals div { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); }
.doc__totals div.total { color: var(--gold-signal); font-size: 1.05rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }

.status {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.status--paid { color: var(--emerald-signal); border-color: rgba(53, 201, 154, 0.35); }
.status--due { color: var(--gold-signal); border-color: var(--line-gold); }
.status--late { color: #e0796b; border-color: rgba(224, 121, 107, 0.35); }

/* Cadena de automatizacion */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.flow__node {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  animation: flowpulse 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes flowpulse {
  0%, 82%, 100% { border-color: var(--line); color: var(--text-muted); }
  8%, 16% { border-color: var(--line-gold); color: var(--gold-signal); }
}

.flow__arrow { color: var(--text-faint); font-size: 0.8rem; }

/* -------------------------------------------------------- 14. SELECTORES */
.picker { display: grid; gap: clamp(1.2rem, 1rem + 1.4vw, 2.4rem); }
@media (min-width: 900px) { .picker { grid-template-columns: 0.95fr 1.05fr; align-items: stretch; } }

.picker__list { display: grid; gap: 0.6rem; }

.picker__item {
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.25rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--step-0);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

.picker__item:hover { color: var(--text); border-color: var(--line-strong); transform: translateX(3px); }

.picker__item[aria-selected="true"] {
  color: var(--text);
  border-color: var(--line-gold);
  background: linear-gradient(120deg, rgba(198, 155, 60, 0.1), rgba(255, 255, 255, 0.02));
}

.picker__panels { display: grid; }

.picker__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
}

.picker__panel[hidden] { display: none; }
.picker__panel .eyebrow { margin-bottom: 0.9rem; }
.picker__panel h3 { font-size: var(--step-2); }
.picker__panel p { margin-top: 0.9rem; color: var(--text-muted); }

.picker__meta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------------------------------------------------------- 15. PROCESO */
.steps { display: grid; gap: 0; counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 0.8rem + 1.4vw, 2.4rem);
  padding-block: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  border-top: 1px solid var(--line);
  transition: opacity var(--t) var(--ease);
}

.step:last-child { border-bottom: 1px solid var(--line); }

.step__num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  padding-top: 0.45rem;
  transition: color var(--t) var(--ease);
}

.step__num::before { content: "0" counter(step); }
.step.is-in .step__num { color: var(--gold-signal); }
.step h3 { font-size: var(--step-3); }
.step p { margin-top: 0.85rem; color: var(--text-muted); max-width: 60ch; }

/* --------------------------------------------------------- 16. FORMULARIO */
.form { display: grid; gap: 1.1rem; }
.form--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* El asterisco de campo obligatorio: en oro, que es el color con el que el
   sitio senala lo que importa, y con su nota al pie del formulario. Un
   asterisco sin leyenda no dice nada a quien no conoce la convencion. */
.req { color: var(--gold-signal); font-weight: 600; }
.form__nota {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* El navegador marca el campo invalido solo despues de intentar enviar, que
   es cuando el visitante ya se frustro. Esto lo senala en cuanto sale del
   campo, y nunca mientras escribe. */
.field input:not(:placeholder-shown):invalid {
  border-color: var(--fuga);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: rgba(250, 240, 230, 0.3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--line-gold); background: rgba(0, 0, 0, 0.5); }
.field .hint { font-size: 0.76rem; color: var(--text-faint); }

.field--full { grid-column: 1 / -1; }

/* Casillas y opciones visuales */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.6rem; }

.opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  font-size: var(--step--1);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.opt:hover { border-color: var(--line-strong); }

.opt__box {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  position: relative;
}

.opt__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: var(--emerald-signal);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { border-color: rgba(53, 201, 154, 0.4); background: var(--emerald-dim); }
.opt:has(input:checked) .opt__box { border-color: var(--emerald-signal); }
.opt:has(input:checked) .opt__box::after { opacity: 1; }
.opt:has(input:focus-visible) { outline: 2px solid var(--gold-signal); outline-offset: 2px; }
.opt--radio .opt__box { border-radius: 50%; }
.opt--radio .opt__box::after { border-radius: 50%; }

/* Zonas de carga y color */
.drop {
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.014);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.drop:hover { border-color: var(--line-gold); background: var(--gold-dim); }
.drop b { display: block; color: var(--text); font-weight: 500; margin-bottom: 0.4rem; }
.drop small { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-faint); }

.swatches { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.swatch { display: grid; gap: 0.5rem; justify-items: center; }
.swatch i { width: 54px; height: 54px; border-radius: 12px; border: 1px solid var(--line-strong); display: block; }
.swatch span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.06em; }

/* Progreso por pasos */
.progress { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

.progress__step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.progress__step b { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-weight: 500; font-size: 0.66rem; }
.progress__step.is-active { color: var(--gold-signal); }
.progress__step.is-active b { border-color: var(--gold-signal); background: var(--gold-dim); }
.progress__sep { flex: 1 1 20px; height: 1px; background: var(--line); min-width: 16px; }

/* ------------------------------------------------------------- 17. CIERRE */
.litany { display: grid; gap: 0.4rem; }

.litany p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--text-faint);
  transition: color var(--t-slow) var(--ease);
}

.litany p.is-in { color: var(--text); }
.litany p:last-child { color: var(--gold-signal); }

/* -------------------------------------------------------------- 18. FOOTER */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) 2.5rem; background: var(--surface-0); }
/* Cinco bloques: la marca y cuatro listas. Las columnas se fijan a mano en
   vez de dejarlas a auto-fit, porque la marca necesita mas ancho que las
   otras cuatro: el logo desplegado mide 215 px y con reparto parejo le
   tocaban 196. Es la misma leccion de las otras rejas del sitio. */
.footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 1.4rem + 2vw, 3rem); }
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .footer__grid { grid-template-columns: 1.8fr repeat(4, minmax(0, 1fr)); } }
.footer__grid h5, .footer__t { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: 1.1rem; }
.footer__grid ul { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.footer__grid a { font-size: 0.9rem; color: var(--text-muted); transition: color var(--t) var(--ease); }
.footer__grid a:hover { color: var(--gold-signal); }
/* 34ch, no 30: el logo desplegado mide 215 px y a 30ch la ultima palabra
   se salia de su columna. Medido en el navegador a 768 y 1280. */
.footer__brand { max-width: 34ch; }
.footer__brand p { margin-top: 1rem; font-size: var(--step--1); color: var(--text-faint); }
.footer__base { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.78rem; color: var(--text-faint); }

/* ------------------------------------------------------- 19. PAGINA INT. */
.page-head { padding-block: clamp(8rem, 6rem + 8vw, 12rem) clamp(3rem, 2.4rem + 3vw, 5rem); position: relative; overflow: hidden; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 15% 0%, rgba(13, 76, 60, 0.34), transparent 70%);
  pointer-events: none;
}
.page-head .wrap { position: relative; }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 1.6rem; }

.crumbs { display: flex; gap: 0.5rem; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.6rem; flex-wrap: wrap; }
.crumbs a { transition: color var(--t) var(--ease); }
.crumbs a:hover { color: var(--gold-signal); }
.crumbs span[aria-current] { color: var(--text-muted); }

/* Cuatro celdas. Con auto-fit la banda de tres columnas dejaba dos huecos
   en la segunda fila, y el fondo de linea los delata. Uno, dos y cuatro
   dividen a cuatro; tres no. */
.mech {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .mech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .mech { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mech__cell { background: var(--surface-1); padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem); }
.mech__cell span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-signal); }
.mech__cell p { margin-top: 0.8rem; font-size: var(--step--1); color: var(--text-muted); }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: var(--step-1); color: var(--text); }
.faq__q::after { content: "+"; font-family: var(--font-mono); color: var(--gold-signal); transition: transform var(--t) var(--ease); }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 70ch; }
.faq__a[hidden] { display: none; }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; }
.post { display: flex; flex-direction: column; height: 100%; }
.post__cat { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-signal); }
.post h3 { font-size: var(--step-1); margin-block: 0.8rem 0.6rem; }
.post__meta { margin-top: auto; padding-top: 1.2rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.08em; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.4rem; }
.filters button { padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.filters button:hover { color: var(--text); border-color: var(--line-strong); }
.filters button[aria-pressed="true"] { color: var(--gold-signal); border-color: var(--line-gold); background: var(--gold-dim); }

/* Admin */
.admin { display: grid; gap: 1.2rem; }
@media (min-width: 1000px) { .admin { grid-template-columns: 320px 1fr; align-items: start; } }
.admin__list { display: grid; gap: 0.6rem; }
.admin__lead { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); cursor: default; }
.admin__lead.is-active { border-color: var(--line-gold); background: linear-gradient(140deg, rgba(198, 155, 60, 0.09), transparent); }
.admin__lead b { display: block; font-size: 0.95rem; }
.admin__lead span { font-size: 0.76rem; color: var(--text-faint); }
.admin__lead .chip { margin-top: 0.6rem; }

/* ------------------------------------------------------- 20. UTILIDADES */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--gold);
  color: #120d02;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.skip:focus { left: 1rem; top: 1rem; }

.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;
}

.center { text-align: center; }
.center .lead, .center .disclaimer { margin-inline: auto; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: 2.5rem; }

/* ------------------------------------------------- Secuencias automaticas */
/* Se reproducen solas, como un video, con transporte discreto para
   pausar o saltar de cuadro. */
.seq-stage { position: relative; overflow: hidden; }

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

.seq__frames {
  display: grid;
  min-height: clamp(300px, 46vh, 440px);
  align-content: center;
}

.seq__frame {
  grid-area: 1 / 1;
  animation: seqIn 460ms var(--ease-out) both;
}

.seq__frame[hidden] { display: none; }

@keyframes seqIn {
  from { opacity: 0; transform: translateY(1.4rem); }
  to { opacity: 1; transform: none; }
}

.seq__transport {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

.seq__dots { display: flex; gap: 0.45rem; }

.seq__dot {
  width: 26px;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--t) var(--ease), width var(--t) var(--ease);
}

.seq__dot.is-active { background: var(--gold-signal); width: 42px; }
.seq__dot.is-done { background: var(--emerald-signal); }

.seq__bar {
  flex: 1 1 120px;
  min-width: 80px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.seq__bar i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
  transition: width 620ms linear;
}

.seq__toggle,
.eco__toggle {
  border: 1px solid var(--line);
  background: none;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.seq__toggle:hover,
.eco__toggle:hover { color: var(--text); border-color: var(--line-gold); }

/* Transporte del ecosistema, bajo el riel de pasos. */
.eco__transport {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.eco__bar {
  flex: 1 1 80px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.eco__bar i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
  transition: width 620ms linear;
}

/* Los pasos del ecosistema ahora son pulsables. */
.eco__step { cursor: pointer; }

/* Arte de fondo detras de una secuencia: no compite con el texto. */
.seq__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.32;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 78%);
}

.seq__art .art {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  aspect-ratio: auto;
}

.seq__art .art::after { display: none; }

/* ====================================================== 29. CUESTIONARIO
   El formulario a la izquierda y, a la derecha, lo que el visitante va
   construyendo. Ver el resultado mientras se llena sostiene el esfuerzo.
   ========================================================================== */

.pb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(1.6rem, 1.2rem + 2vw, 3.2rem);
  align-items: start;
}

@media (max-width: 980px) {
  .pb { grid-template-columns: 1fr; }
  .pb__side { order: -1; }
}

.pb__sticky { position: sticky; top: 96px; display: grid; gap: 0.6rem; }

/* Boceto que se remarca con lo que el visitante sube. */
.mock {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
}

.mock__bar b {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-signal, var(--gold-signal));
  transition: color var(--t) var(--ease);
}

.mock__logo { height: 18px; width: auto; max-width: 80px; object-fit: contain; display: none; }
.mock__logo.is-on { display: block; }

.mock__body { padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }

.mock__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mock__h {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mock__btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: var(--accent-fill, var(--gold-fill));
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--t) var(--ease);
}

.mock__row {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mock__tile {
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.mock__tile i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

.mock__tile small { display: block; margin-top: 0.2rem; font-size: 0.58rem; color: var(--text-faint); letter-spacing: 0.06em; }

/* Galeria de imagenes que sube el visitante. */
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.gal__item {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.gal__item img { width: 100%; height: 100%; object-fit: cover; }

.gal__x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 10, 10, 0.82);
  color: var(--ivory);
  font-size: 0.76rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.gal__item:hover .gal__x, .gal__x:focus-visible { opacity: 1; }

/* La zona de carga multiple es una etiqueta, no un div decorativo. */
.drop { position: relative; display: block; cursor: pointer; }
.drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

/* ==================================================== 28. SISTEMA DE BUCLES
   El mapa muestra lo que se compra y lo que se compone. Un canal en cero
   se apaga; un bucle apagado no se dibuja. La ausencia se ve.
   ========================================================================== */

.lp {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  align-items: start;
}

@media (max-width: 940px) { .lp { grid-template-columns: 1fr; } }

.lp__controls {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
}

.lp__field { display: grid; gap: 0.4rem; }

.lp__field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.lp__hint { text-transform: none; letter-spacing: 0.02em; font-size: 0.62rem; opacity: 0.7; }

.lp__field output {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: var(--gold-signal);
  font-feature-settings: "tnum" 1;
}

.lp__field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
  cursor: pointer;
}

.lp__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--onyx);
  box-shadow: 0 0 0 1px var(--gold-signal);
  cursor: grab;
}

.lp__field input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--onyx);
  box-shadow: 0 0 0 1px var(--gold-signal);
}

.lp__field input[type="range"]:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 6px; }

.lp__stage { display: grid; gap: 1.1rem; }

.lp__map {
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  overflow-x: auto;
}

.lp__map svg { width: 100%; min-width: 520px; height: auto; display: block; }

/* Cajas del mapa */
.lp__chan rect, .lp__core rect, .lp__leakbox rect {
  fill: rgba(255, 255, 255, 0.035);
  stroke: var(--line);
  stroke-width: 1;
  transition: fill var(--t) var(--ease), stroke var(--t) var(--ease), opacity var(--t) var(--ease);
}

.lp__chan text, .lp__core text, .lp__leakbox text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--text-faint);
}

.lp__n { font-size: 13px !important; fill: var(--text) !important; letter-spacing: 0.02em !important; }

.lp__chan rect { stroke: rgba(53, 201, 154, 0.35); }
.lp__chan--loop rect { stroke: var(--line-gold); }
.lp__core rect { fill: rgba(53, 201, 154, 0.1); stroke: rgba(53, 201, 154, 0.45); }
.lp__core--win rect { fill: rgba(198, 155, 60, 0.14); stroke: var(--line-gold); }
.lp__leakbox rect { fill: rgba(224, 121, 107, 0.1); stroke: rgba(224, 121, 107, 0.35); }
.lp__leakbox text { fill: rgba(224, 121, 107, 0.85); }

/* Un canal apagado se ve apagado: la ausencia comunica. */
.lp__chan.is-off rect { fill: rgba(255, 255, 255, 0.015); stroke: var(--line); }
.lp__chan.is-off text { fill: rgba(250, 240, 230, 0.22); }

/* Flujos */
.lp__flow {
  fill: none;
  stroke: url(#lp-in);
  stroke-width: 1.6;
  transition: opacity var(--t) var(--ease);
}

.lp__flow--loop { stroke: url(#lp-loop); }
.lp__flow.is-off { opacity: 0.12; }

.lp__leak {
  fill: none;
  stroke: rgba(224, 121, 107, 0.5);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

/* Los bucles solo existen cuando estan encendidos. */
.lp__loop-line {
  fill: none;
  stroke: url(#lp-loop);
  stroke-width: 1.8;
  stroke-dasharray: 6 5;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}

.lp__loop-line.is-on { opacity: 0.95; animation: lpDash 2.4s linear infinite; }

@keyframes lpDash { to { stroke-dashoffset: -44; } }

.lp__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  fill: var(--gold-signal);
  opacity: 0;
  transition: opacity 520ms var(--ease);
}

.lp__tag.is-on { opacity: 0.9; }

/* --------------------------------------------- El sistema, lo interactivo */
/* Tres formas de mover el modelo: los escenarios de un clic, los bloques del
   mapa y los controles finos. El pulso sobre los trazos es el volumen hecho
   movimiento: un diagrama quieto no se siente un sistema. */

.lp__escena {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-bottom: 0.3rem;
}

.lp__escbtns { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.lp__esc {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.lp__esc:hover { color: var(--text); border-color: var(--line-strong); }
.lp__esc.is-on {
  color: var(--onyx);
  background: var(--gold-signal);
  border-color: var(--gold-signal);
}
.lp__esc:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 3px; }

.lp__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold-signal);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.lp__play:hover { background: var(--gold-dim); }
.lp__play svg { width: 11px; height: 11px; }
.lp__play:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 3px; }

.lp__pista {
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  color: var(--text-faint);
  line-height: 1.45;
}

/* El pulso: guiones que recorren el mismo trazo del flujo. La duracion la
   pone el JS a partir del volumen, asi que la velocidad es informacion. */
.lp__pulso {
  fill: none;
  stroke: var(--emerald-signal);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 2.5 13;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  animation: lpFluir 2s linear infinite;
}
.lp__pulso--oro { stroke: var(--gold-signal); }

@keyframes lpFluir { to { stroke-dashoffset: -155; } }

/* Los bloques del mapa se pueden apagar con un clic. */
.lp__chan, .lp__tagbtn { cursor: pointer; }
.lp__chan rect { transition: fill var(--t) var(--ease), stroke var(--t) var(--ease); }
.lp__chan:hover rect { fill: rgba(250, 240, 230, 0.07); }
.lp__chan:focus-visible rect, .lp__tagbtn:focus-visible text {
  outline: none;
  stroke: var(--gold-signal);
  stroke-width: 1.6;
}
.lp__tagbtn:hover .lp__tag { opacity: 1; }
.lp__tagbtn .lp__tag.is-off { opacity: 0.28; text-decoration: line-through; }

/* Al pasar por un canal, su camino se separa del resto. */
.lp__map.is-aislado .lp__chan:not(.is-hi),
.lp__map.is-aislado .lp__flow:not(.is-hi),
.lp__map.is-aislado .lp__pulso:not(.is-hi) { opacity: 0.14; }

/* La caja acusa el golpe cuando su cifra cambia de verdad. */
.lp__core.is-golpe rect { animation: lpGolpe 620ms var(--ease); }
@keyframes lpGolpe {
  0% { stroke-width: 1; }
  35% { stroke-width: 2.6; }
  100% { stroke-width: 1; }
}

/* La barra del indicador principal: el porcentaje también se ve. */
.lp__barra {
  display: block;
  margin-top: 0.7rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(250, 240, 230, 0.1);
  overflow: hidden;
}
.lp__barra > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
  transition: width 620ms var(--ease);
}

/* Indicadores */
.lp__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0.7rem;
}

.lp__kpi {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.lp__kpi span { display: block; font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.05em; }

.lp__kpi b {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gold-signal);
}

.lp__kpi small { display: block; margin-top: 0.35rem; font-size: 0.62rem; color: var(--text-faint); line-height: 1.4; }

/* El indicador que cuenta la historia ocupa mas espacio. */
.lp__kpi--hero {
  grid-column: 1 / -1;
  border-color: var(--line-gold);
  background: linear-gradient(120deg, var(--gold-dim), transparent 70%);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.lp__kpi--hero b { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1; }

.lp__kpi--hero.is-strong {
  border-color: rgba(53, 201, 154, 0.5);
  background: linear-gradient(120deg, var(--emerald-dim), transparent 70%);
}

.lp__kpi--hero.is-strong b { color: var(--emerald-signal); }

.lp__diag {
  padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.7rem);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--gold-dim), transparent 78%);
  transition: border-color var(--t) var(--ease);
}

.lp__diag.is-ok { border-color: rgba(53, 201, 154, 0.4); background: linear-gradient(180deg, var(--emerald-dim), transparent 78%); }
.lp__diag.is-warn { border-color: rgba(224, 121, 107, 0.45); background: linear-gradient(180deg, rgba(224, 121, 107, 0.12), transparent 78%); }
.lp__diag h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.lp__diag p { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 0.8rem; }
.lp__diag [data-loopdiag][hidden] { display: none; }

/* Etapa a la que pertenece cada pieza de estrategia. */
.card__stage {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-signal);
  border: 1px solid rgba(53, 201, 154, 0.3);
  border-radius: 100px;
  padding: 0.16rem 0.6rem;
}

/* Saludo que confirma que el paso 1 no se perdio. */
.pb__saludo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--emerald-signal);
  margin-bottom: 0.8rem;
}

/* ============================================================= 27. BLOG
   Un articulo con pagina propia vale mas que doce tarjetas sin destino.
   La estructura sirve al lector y a los motores de respuesta a la vez.
   ========================================================================== */

.posts--feature { display: grid; gap: 1rem; }

.post--big { padding: 0; }
.post__link { display: block; padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.6rem); }
.post--big h2 { font-size: var(--step-3); margin-block: 0.9rem 0.8rem; }
.post--big p { color: var(--text-muted); max-width: 62ch; }

.post__meta {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.post--big .link-arrow { margin-top: 1.2rem; }

/* Temas por escribir. Se enuncian, no se fingen publicados. */
.next { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.next__list {
  margin-top: 1.2rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.6rem;
}

.next__list li {
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* ------------------------------------------------------------- Articulo */
.post-full { display: block; }

.post-meta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* El bloque de respuesta: lo primero que lee una persona con prisa y lo
   primero que extrae un motor de respuesta. */
.answer {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--gold-dim), transparent 75%);
  padding: clamp(1.2rem, 1rem + 1vw, 1.9rem);
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}

.answer .eyebrow { margin-bottom: 0.8rem; }
.answer p { font-size: var(--step-1); line-height: 1.5; color: var(--text); }

.post-full h2 {
  font-size: var(--step-2);
  margin-top: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.post-full h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.post-full p { margin-bottom: 1.1rem; color: var(--text-muted); line-height: 1.72; }
.post-full p strong { color: var(--text); font-weight: 500; }

.list { margin: 0 0 1.4rem; padding-left: 1.2rem; color: var(--text-muted); line-height: 1.7; }
.list li { margin-bottom: 0.6rem; }
.list li strong { color: var(--text); font-weight: 500; }
.list--num { padding-left: 1.35rem; }

.callout {
  margin: clamp(2rem, 1.6rem + 1.4vw, 3rem) 0;
  padding: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  border-left: 2px solid var(--gold-signal);
  background: linear-gradient(90deg, var(--gold-dim), transparent 80%);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.faq { display: grid; gap: 0.9rem; }

.faq__item {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.faq__item p { margin: 0; font-size: var(--step--1); }

.post-cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  border-top: 1px solid var(--line);
}

.sources {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.sources .list { font-size: var(--step--1); color: var(--text-faint); }

/* ============================================================== 26. ARTE
   Composiciones vectoriales en la paleta de marca. Cada una vive en un
   contenedor de proporcion fija para que sustituirla por fotografia
   despues no mueva el layout.
   ========================================================================== */

.art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-deep), var(--surface-0));
  border: 1px solid var(--line);
}

.art svg { width: 100%; height: 100%; display: block; }

/* Tinte de marca sobre la composicion, como el que Netflix aplica a su media. */
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--emerald-fill);
  opacity: 0.05;
  pointer-events: none;
}

.art--tall { --ar: 4 / 5; }
.art--wide { --ar: 21 / 9; }


/* Trazos que se dibujan solos al entrar en pantalla. */
/* El recorrido lo escribe el JS en linea, porque necesita el largo real
   de cada trazo. Aqui solo vive la transicion. */
.art [data-draw] {
  transition: stroke-dashoffset 1.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Nodos que se encienden en cadena. */
.art [data-node] {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.art.is-in [data-node] { opacity: 1; transform: scale(1); }

/* Particulas que ascienden por la trayectoria. */
.art [data-rise] { animation: rise 5.5s linear infinite; animation-delay: var(--d, 0s); opacity: 0; }

@keyframes rise {
  0% { opacity: 0; transform: translateY(14px); }
  12%, 78% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Barras que crecen desde la base. */
.art [data-grow] {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.art.is-in [data-grow] { transform: scaleY(1); }

/* ------------------------------------------- Revelado dentro del titular */
/* El recurso mas reconocible de la referencia: la imagen aparece dentro
   del trazo del texto conforme avanza el scroll. */
.reveal-mask {
  position: relative;
  display: block;
  background-image: var(--fill, linear-gradient(120deg, var(--emerald-signal), var(--gold-signal)));
  background-size: 200% 100%;
  background-position: var(--bp, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 120ms linear;
}

html:not(.js) .reveal-mask { color: var(--text); background: none; }

/* ------------------------------------------------------ Capas en paralaje */
.layer { will-change: transform; transition: transform 120ms linear; }

/* --------------------------------------------- Acento que muda por scroll */
/* Netflix rota el fondo de la pagina entre siete tonos. Aqui el fondo se
   queda en onyx, que es la identidad, y lo que muda es el acento. */
[data-tint] { transition: --tint-mix 600ms var(--ease); }

/* ============================================================ 22. MOVIMIENTO
   Vocabulario de scroll: palabras que suben detras de una mascara,
   secciones que se fijan mientras el scroll las recorre, y un halo de
   color que respira detras del contenido.
   Sin librerias. Solo CSS + IntersectionObserver + progreso de scroll.
   ========================================================================== */

/* Palabras que suben detras de una mascara. El wrapper corta, la palabra sube. */
.words { display: inline; }

.words__w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-right: 0.14em;
  margin-right: -0.14em;
}

.words__i {
  display: inline-block;
  transform: translateY(102%);
  transition: transform 900ms cubic-bezier(0.33, 0, 0.2, 1);
  transition-delay: var(--wd, 0ms);
}

.words.is-in .words__i { transform: translateY(0); }

/* Titular de escala editorial. La identidad es Inter Tight, no una
   condensada negra, asi que se compensa con tracking y altura de linea. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 11.5vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display--sm { font-size: clamp(1.9rem, 7vw, 4.6rem); line-height: 0.9; }

/* Halo de color detras del contenido. Hereda el acento de la seccion. */
.orb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(var(--orb-s, 0.85));
  background: radial-gradient(circle, var(--accent-fill, var(--emerald-fill)) 0%, transparent 58%);
  opacity: var(--orb-o, 0.16);
  filter: blur(60px);
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
}

/* Seccion fijada: el contenedor da la pista de scroll, el inner se queda
   quieto mientras el progreso avanza de 0 a 1 en --p. */
.pin { position: relative; }
.pin__inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 900px;
}

.pin__stage { position: relative; z-index: 1; width: 100%; }

/* Cuadros que se relevan dentro de una seccion fijada. */
.js .pin__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.2rem) scale(0.985);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), visibility 700ms;
}

.js .pin__frame.is-on { opacity: 1; visibility: visible; transform: none; }

/* Sin JS la seccion se lee completa, un cuadro debajo del otro. */
html:not(.js) .pin__inner { position: static; min-height: auto; padding: var(--section-y) 0; }
html:not(.js) .pin__frame { margin-bottom: 3rem; }

.pin__rail {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  gap: 0.7rem;
}

.pin__dot {
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--line);
  transition: background var(--t) var(--ease), height var(--t) var(--ease);
}

.pin__dot.is-on { background: var(--accent-signal, var(--gold-signal)); height: 40px; }

/* Barra de progreso del recorrido fijado. */
.pin__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--line);
  z-index: 4;
}

.pin__bar i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
}

@media (max-width: 860px) {
  .pin__rail { display: none; }
  .pin__inner { min-height: auto; padding: var(--section-y) 0; position: static; }
  .pin__frame { position: static; opacity: 1; visibility: visible; transform: none; margin-bottom: 3rem; }
}

/* ====================================================== 23. VISUALIZADOR
   La demo deja de ser una captura: el visitante escribe su negocio,
   arma una cotizacion, mueve una oportunidad y cambia una cobranza.
   ========================================================================== */

/* ---------------------------------------------------- Panel de tu negocio */
.biz {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-deep), var(--surface-1));
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.8rem);
  position: relative;
  overflow: hidden;
}

.biz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-signal, var(--gold-signal)), transparent);
  opacity: 0.6;
}

.biz__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; }
.biz__head h3 { font-size: var(--step-1); }

.biz__grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0.8rem;
}

.biz__field { display: grid; gap: 0.35rem; }

.biz__field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.biz__field input,
.biz__field select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-0);
  color: var(--text);
  font-size: var(--step--1);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.biz__field input:focus-visible,
.biz__field select:focus-visible {
  border-color: var(--accent-signal, var(--gold-signal));
  outline: none;
  background: var(--surface-2);
}

.biz__field select { appearance: none; cursor: pointer; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Selector de color de marca del visitante. */
.biz__colors { display: flex; flex-wrap: wrap; gap: 0.42rem; align-items: center; }

/* Seis muestras no caben en una columna del ancho minimo, y partidas en
   dos filas se ven descuidadas. El campo toma dos columnas cuando hay. */
.biz__field--colors { grid-column: span 2; }

@media (max-width: 560px) { .biz__field--colors { grid-column: auto; } }

.biz__color {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(250, 240, 230, 0.18);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.biz__color:hover { transform: scale(1.12); }
.biz__color[aria-pressed="true"] { border-color: var(--ivory); transform: scale(1.12); }

.biz__note { margin-top: 0.9rem; font-size: var(--step--1); color: var(--text-faint); }

/* ------------------------------------------------- Cabecera del panel demo */
.os__title b { color: var(--accent-signal, var(--gold-signal)); transition: color var(--t) var(--ease); }

.os__meta {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.os__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* En pantallas chicas el nombre de la cuenta ya ocupa la barra. */
@media (max-width: 620px) { .os__meta { display: none; } }

.os__live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-signal);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Filtro de rango: cambia los numeros del panel. */
.os__range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
  margin-bottom: 0.2rem;
}

.os__range button {
  border: 1px solid var(--line);
  background: none;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.7rem;
  border-radius: 100px;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.os__range button:hover { color: var(--text); }

.os__range button[aria-pressed="true"] {
  color: var(--onyx);
  background: var(--accent-signal, var(--gold-signal));
  border-color: var(--accent-signal, var(--gold-signal));
}

/* Las cifras cambian con una transicion corta para que se note el cambio. */
.tile b { transition: color 320ms var(--ease); }
.tile.is-fresh b { color: var(--accent-signal, var(--gold-signal)); }

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

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-fill, var(--gold-fill));
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms var(--ease);
}

.tile.is-fresh::after { opacity: 0.07; transition-duration: 90ms; }

/* --------------------------------------------------------- Cotizador vivo */
.qb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }

@media (max-width: 900px) { .qb { grid-template-columns: 1fr; } }

.qb__cat { display: grid; gap: 0.5rem; margin-top: 0.8rem; }

.qb__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.qb__row:hover { border-color: var(--line-strong); }

.qb__row:has(input:checked) {
  border-color: rgba(53, 201, 154, 0.42);
  background: var(--emerald-dim);
}

.qb__row:has(input:focus-visible) { outline: 2px solid var(--gold-signal); outline-offset: 2px; }
.qb__row input { position: absolute; opacity: 0; pointer-events: none; }

.qb__box {
  width: 17px; height: 17px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  position: relative;
  flex: none;
  transition: border-color var(--t) var(--ease);
}

.qb__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--emerald-signal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.qb__row:has(input:checked) .qb__box { border-color: var(--emerald-signal); }
.qb__row:has(input:checked) .qb__box::after { opacity: 1; }

.qb__name { font-size: var(--step--1); line-height: 1.3; }
.qb__name small { display: block; color: var(--text-faint); font-size: 0.68rem; margin-top: 0.15rem; }
.qb__price { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }

.qb__opts { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1rem; }

.qb__disc { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--text-muted); }
.qb__disc input {
  width: 68px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

/* El documento se arma en vivo. Al generarlo, entra con un barrido. */
.doc { position: relative; transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.doc.is-building { opacity: 0.45; transform: translateY(6px); }

.doc__stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 4vw, 1.9rem);
  letter-spacing: 0.2em;
  color: var(--emerald-signal);
  border: 3px solid var(--emerald-signal);
  border-radius: 10px;
  padding: 0.4rem 1.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 520ms var(--ease);
  z-index: 5;
}

.doc.is-sent .doc__stamp {
  opacity: 0.92;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.04);
}

.doc__track {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
}

.doc__track div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: var(--td, 0ms);
}

.doc.is-sent .doc__track div { opacity: 1; transform: none; }
.doc__track b { color: var(--emerald-signal); font-weight: 400; }

/* Fila que aparece al agregarse a la cotizacion. */
.qb__line { animation: lineIn 340ms var(--ease) both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.qb__empty { color: var(--text-faint); font-size: var(--step--1); padding: 1.4rem 0; text-align: center; }

/* ------------------------------------------------------------- Personal */
.people { display: grid; gap: 0.7rem; }

.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.person:hover { border-color: var(--line-gold); transform: translateX(2px); }

@media (max-width: 720px) {
  .person { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.6rem; }
  .person__load, .person__act { grid-column: 1 / -1; }
}

.person__av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
  background: var(--accent-fill, var(--emerald-fill));
  border: 1px solid var(--line-strong);
  flex: none;
  transition: background var(--t) var(--ease);
}

.person__id b { display: block; font-weight: 500; font-size: var(--step--1); }
.person__id small { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.66rem; }

.person__load { display: grid; gap: 0.3rem; }

.person__load span {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--text-faint);
}

.person__bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }

.person__bar i {
  display: block;
  height: 100%;
  width: var(--l, 50%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
  transition: width 620ms var(--ease);
}

.person__bar.is-over i { background: linear-gradient(90deg, var(--gold-signal), #e0796b); }

.person__act {
  border: 1px solid var(--line);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.person__act:hover { color: var(--text); border-color: var(--line-strong); }

/* --------------------------------------------------- Acciones del panel */
.os__act {
  border: 1px solid var(--line-gold);
  background: var(--gold-dim);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}

.os__act:hover { background: var(--gold-signal); color: var(--onyx); }
.os__act:active { transform: scale(0.97); }
.os__act[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Aviso efimero cuando una accion ocurre. */
.os__toast {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 1.4rem);
  z-index: 20;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--line-gold);
  background: rgba(10, 10, 10, 0.94);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.os__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.os { position: relative; }

/* Kanban con tarjetas que avanzan de etapa. */
.kanban__card { cursor: pointer; position: relative; }
.kanban__card:active { transform: scale(0.98); }

.kanban__card.is-moving { animation: cardMove 460ms var(--ease) both; }
@keyframes cardMove {
  from { opacity: 0; transform: translateX(-14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.kanban__card::after {
  content: "\2192";
  position: absolute;
  right: 0.55rem;
  top: 0.5rem;
  color: var(--text-faint);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.kanban__card:hover::after { opacity: 1; }
.kanban__card.won::after { content: ""; }

/* Estados de cobranza que cambian al hacer clic. */
.status--btn { cursor: pointer; border-style: solid; background: none; font: inherit; font-family: var(--font-mono); }
.status--btn:hover { filter: brightness(1.25); }

/* Franja de contexto del negocio del visitante dentro del panel. */
.ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.ctx span {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.25rem 0.62rem;
}

.ctx span b { color: var(--accent-signal, var(--gold-signal)); font-weight: 400; }


/* ------------------------------------------------ Servicios complementarios */
/* Seis complementarios. Mismo caso que las cifras: auto-fit resolvia
   cuatro columnas y dejaba dos huecos en la segunda fila. Tres divide a
   seis; cuatro no. */
.svcs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 620px)  { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc {
  background: var(--surface-0);
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
  transition: background var(--t) var(--ease);
}

.section--deep .svc { background: var(--surface-deep); }

.svc:hover { background: var(--surface-2); }
.section--deep .svc:hover { background: var(--surface-deep-2); }

.svc h3 {
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.svc p {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------------------- Nota al pie de cifras */
/* El respaldo legal completo, sin que interrumpa la lectura. Va en el HTML,
   asi que los buscadores lo leen aunque este plegado. */
.factnote {
  margin-top: 1.6rem;
  max-width: 68ch;
  border-left: 1px solid var(--line);
  padding-left: 1rem;
}

.factnote summary {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
  transition: color var(--t) var(--ease);
}

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

.factnote summary::before {
  content: "+";
  font-size: 0.85rem;
  line-height: 1;
  color: var(--gold-signal);
  transition: transform var(--t) var(--ease);
}

.factnote[open] summary::before { content: "\2212"; }
.factnote summary:hover { color: var(--text-muted); }

.factnote p {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-faint);
}

/* ======================================================= 24. BETA JUGABLE
   El visitante sube su marca y ve el panel con ella. Lo que arma es,
   del lado de JOMMA, un prospecto con contexto completo.
   ========================================================================== */

.beta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--gold-signal);
  border-radius: 3px;
  padding: 0.14rem 0.42rem;
  vertical-align: middle;
}

.beta--ghost {
  color: var(--gold-signal);
  background: none;
  border: 1px solid var(--line-gold);
}

/* ------------------------------------------------------- Carga del logo */
.biz__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.biz__drop {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: var(--surface-0);
  cursor: pointer;
  font-size: 0.76rem;
  color: var(--text-faint);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}

.biz__drop:hover,
.biz__drop.is-over {
  border-color: var(--accent-signal, var(--gold-signal));
  background: var(--gold-dim);
  color: var(--text);
}

.biz__drop input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.biz__drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.biz__thumb {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: contain;
  padding: 3px;
  display: none;
}

.biz__thumb.is-on { display: block; }

.biz__clear {
  flex: none;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-faint);
  border-radius: 100px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  display: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.biz__clear.is-on { display: block; }
.biz__clear:hover { color: var(--text); border-color: var(--line-strong); }

/* Selector de color libre, junto a las muestras. */
.biz__pick {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.biz__pick::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  pointer-events: none;
}

.biz__pick input {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

.biz__pick.is-set::after { content: ""; }
.biz__pick.is-set { border-style: solid; border-color: var(--ivory); }

/* El logo del visitante dentro del panel y del documento. */
.os__logo,
.doc__logo {
  height: 20px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: none;
}

.os__logo.is-on,
.doc__logo.is-on { display: block; }

.doc__logo { height: 28px; max-width: 130px; }
.doc__head { align-items: center; }

/* --------------------------------------------- Resumen de lo capturado */
.capture {
  margin-top: 1.4rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--gold-dim), transparent 70%);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.8rem);
}

.capture__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  justify-content: space-between;
}

.capture__head h4 { font-size: var(--step-1); }

.capture__grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 0.7rem;
}

.capture__item {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
}

.capture__item span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.capture__item b {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.capture__item b.faint { color: var(--text-faint); font-weight: 400; }

.capture__body { display: none; }
.capture.is-open .capture__body { display: block; animation: capIn 420ms var(--ease) both; }

@keyframes capIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ 26. FOTOGRAFIA Y FILAS */
/* La foto de archivo se vuelve propia con un duotono de la paleta: el piso
   de sombras es el azul de la marca y el techo de luces es el oro. Sin ese
   grado cualquier agencia podria estar usando la misma imagen, que es justo
   lo que la prueba de especificidad no permite. El color completo aparece
   en un solo momento: cuando el visitante toca la imagen. */

:root {
  --duo-sombra: #060e1b;
  --duo-luz: #d9b978;
}

.ph {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--duo-sombra);
}


.ph > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  filter: grayscale(1) contrast(1.16) brightness(0.88);
  transition: filter 720ms var(--ease), transform 1100ms var(--ease);
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--duo-luz);
  mix-blend-mode: multiply;
  transition: opacity 720ms var(--ease);
}

/* Proporcion fija: sustituir una foto no mueve el layout. */
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--2x3  { aspect-ratio: 2 / 3; }
.ph--fill { position: absolute; inset: 0; }

/* Revelado por barrido: la imagen se descubre de abajo hacia arriba. */
.js .ph--barre > img { clip-path: inset(0 0 100% 0); }
.js .ph--barre.is-in > img { clip-path: inset(0 0 0 0); transition: clip-path 1150ms var(--ease-out), filter 720ms var(--ease), transform 1100ms var(--ease); }

/* Deriva lenta, como una toma sostenida. */
@keyframes ph-deriva {
  from { transform: scale(1.1) translate3d(5%, 3.2%, 0); }
  to   { transform: scale(1.34) translate3d(-6.5%, -4.8%, 0); }
}
/* Lineal a proposito: con la curva del sitio la imagen frenaba en los dos
   extremos y pasaba la mayor parte del ciclo parada, asi que parecia una
   foto fija. En lineal el movimiento se percibe todo el tiempo. */
.ph--deriva > img { animation: ph-deriva 2s linear infinite alternate; }

/* Fondos que cambian de imagen. Tres fotografias apiladas que se relevan en
   ciclo: cada una entra, se pasea con la deriva y cede el turno. Las tres
   comparten duracion de deriva, asi que se mueven al mismo ritmo. */
.ph--rota { position: relative; }
.ph--rota > img {
  position: absolute;
  inset: 0;
  /* Estado base: la primera se ve. Si la animacion no corre, por movimiento
     reducido o por lo que sea, el fondo sigue siendo una fotografia y no un
     rectangulo negro. */
  opacity: 0;
  animation:
    ph-deriva 2s linear infinite alternate,
    ph-releva 6s ease-in-out infinite;
}
.ph--rota > img:first-child { opacity: 1; }
/* Retardo negativo en la primera: arranca ya dentro de su tramo visible,
   asi la seccion nunca aparece en negro esperando a que entre la imagen.
   Una animacion gana a las reglas normales de la cascada, de modo que el
   estado inicial hay que resolverlo aqui y no con un selector. */
.ph--rota > img:nth-child(1) { animation-delay: 0s, -0.47s; }
.ph--rota > img:nth-child(2) { animation-delay: 0s, 1.53s; }
.ph--rota > img:nth-child(3) { animation-delay: 0s, 3.53s; }

@keyframes ph-releva {
  0%      { opacity: 0; }
  3%, 30% { opacity: 1; }
  36%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ------------------------------------------------------------- BILLBOARD */
/* La banda a sangre completa. Es el recurso que Netflix usa para abrir un
   bloque: una sola imagen, un titular corto y nada mas compitiendo. */
.billboard {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(400px, 66vh, 660px);
  overflow: hidden;
  background: var(--onyx);
}

/* En la banda el velo es grueso, asi que la imagen tiene que llegar con
   mas luz o no queda nada debajo. */
.billboard .ph > img,
.page-head--foto .ph > img { filter: grayscale(1) contrast(1.12) brightness(1.14); }

/* Encuadre: la parte que importa no siempre esta al centro. */
.ph--enc-der > img { object-position: 68% 42%; }
.ph--enc-alto > img { object-position: 50% 26%; }

.billboard__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--onyx) 2%, rgba(10, 10, 10, 0.82) 26%, rgba(10, 10, 10, 0.3) 62%, rgba(10, 10, 10, 0.6) 100%),
    linear-gradient(to right, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.1) 62%);
}

.billboard__body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.billboard__body > * { max-width: 40ch; }

.billboard h2,
.billboard h3 {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0;
}

.billboard p { color: var(--text-muted); margin-top: 0.85rem; }

.billboard--corto { min-height: clamp(300px, 42vh, 420px); }

/* Sangrado completo para una banda que si vive dentro de una canaleta.
   Se descuenta el ancho de la barra de desplazamiento: 100vw la incluye y
   sin ese descuento la pagina gana unos pixeles de arrastre lateral. */
.bleed {
  width: calc(100vw - (100vw - 100%));
  max-width: none;
  margin-inline: calc(50% - 50% - var(--gutter));
}

/* --------------------------------------------------------------- FIGURA */
/* Foto con pie, para cuando la imagen acompana un argumento y no lo abre. */
.figura { display: grid; gap: 0.85rem; }
.figura figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.duo-par {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .duo-par { grid-template-columns: 1fr 1fr; }
  .duo-par--ancha { grid-template-columns: 1.15fr 0.85fr; }
}

/* ----------------------------------------------------------------- FILA */
/* La fila horizontal. La tarjeta bajo el cursor crece, las demas se apagan
   y se despliega un panel solido debajo de la imagen. El detalle no se
   pone encima de la foto: sobre una toma clara no se lee. */
.fila-zona { position: relative; }

.fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  align-items: start;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* El relleno le da aire a la tarjeta que crece, para que no se recorte. */
  padding: 30px var(--gutter) 132px;
  margin: -30px calc(var(--gutter) * -1) -132px;
  scrollbar-width: none;
}
.fila::-webkit-scrollbar { display: none; }

/* Cuatro a la vista y dos fuera: es lo que le da sentido a los controles.
   Una fila donde cabe todo no es una fila, es una reja. */
@media (min-width: 700px)  { .fila { grid-auto-columns: minmax(292px, 1fr); } }
@media (min-width: 1060px) { .fila { grid-auto-columns: calc(25% - 9px); } }

.fila__card {
  position: relative;
  scroll-snap-align: center;
  border-radius: var(--radius);
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
  will-change: transform;
}

.fila__link {
  display: block;
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-1);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fila__link:hover { text-decoration: none; }

.fila__marco { position: relative; display: block; }

.fila__vel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 8, 12, 0.95) 4%, rgba(6, 8, 12, 0.62) 40%, rgba(6, 8, 12, 0.06) 78%);
}

.fila__idx {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--gold-signal);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.fila__t {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: block;
  padding: 0 1.05rem 0.95rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

/* El detalle plegado: de 0fr a 1fr es la unica forma de animar un alto
   automatico sin medirlo en JS. */
.fila__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
}
.fila__moreinner { overflow: hidden; min-height: 0; }

.fila__panel {
  display: block;
  padding: 0.95rem 1.05rem 1.05rem;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.fila__d {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}

.fila__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold-signal);
  letter-spacing: 0.02em;
}
.fila__cta::after { content: "\2192"; transition: transform var(--t) var(--ease); }

@media (hover: hover) and (min-width: 700px) {
  .fila:hover .fila__card,
  .fila:focus-within .fila__card { opacity: 0.46; transform: scale(0.975); }

  .fila .fila__card:hover,
  .fila .fila__card:focus-within {
    opacity: 1;
    transform: scale(1.055);
    z-index: 5;
  }

  .fila__card:hover .fila__more,
  .fila__card:focus-within .fila__more { grid-template-rows: 1fr; }

  .fila__card:hover .fila__link,
  .fila__card:focus-within .fila__link {
    border-color: var(--line-gold);
    box-shadow: var(--shadow);
  }

  .fila__card:hover .ph > img,
  .fila__card:focus-within .ph > img {
    filter: grayscale(0) contrast(1.04) saturate(1.04) brightness(0.94);
    transform: scale(1.06);
  }

  .fila__card:hover .ph::after,
  .fila__card:focus-within .ph::after { opacity: 0; }

  .fila__card:hover .fila__cta::after { transform: translateX(4px); }
}

/* Sin cursor el detalle no se puede plegar: se muestra siempre. */
@media (hover: none), (max-width: 699px) {
  .fila__more { grid-template-rows: 1fr; }
  .fila { padding-bottom: 30px; margin-bottom: -30px; }
}

/* Los controles de la fila. Solo existen si el JS los enciende. */
.fila__nav {
  position: absolute;
  top: calc(50% - 46px);
  z-index: 6;
  display: none;
  place-items: center;
  width: 42px;
  height: 62px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.fila-zona.is-nav .fila__nav { display: grid; }
.fila__nav:hover { background: rgba(10, 10, 10, 0.94); border-color: var(--line-gold); }
.fila__nav[disabled] { opacity: 0.22; cursor: default; }
.fila__nav--prev { left: calc(var(--gutter) * -1 + 2px); }
.fila__nav--next { right: calc(var(--gutter) * -1 + 2px); }
.fila__nav svg { width: 16px; height: 16px; }

@media (max-width: 699px) { .fila-zona.is-nav .fila__nav { display: none; } }

/* El cierre con la toma final detras del litany. */
.cierre-foto { position: relative; overflow: hidden; }
.cierre-foto > .ph--fill { opacity: 0.34; }
.cierre-foto__vel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(64% 60% at 50% 50%, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.93) 76%),
    linear-gradient(to bottom, var(--onyx), transparent 26%, transparent 74%, var(--onyx));
}
.cierre-foto > .wrap { position: relative; z-index: 2; }

/* ------------------------------------------------------- FOTO EN EL HERO */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}
.hero__foto > img { filter: grayscale(1) contrast(1.1) brightness(0.72); }
.hero__foto::after { opacity: 0.72; }

.hero__vel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 50% 46%, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.88) 78%),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.72), transparent 22%, transparent 62%, var(--onyx) 98%);
}

/* Cabecera de pagina interna con foto detras del titular. */
.page-head--foto { position: relative; overflow: hidden; }
.page-head--foto .ph--fill { opacity: 0.42; }
.page-head--foto .page-head__vel {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--onyx) 4%, rgba(10, 10, 10, 0.82) 44%, rgba(10, 10, 10, 0.52)),
    linear-gradient(to right, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.06) 58%);
}
.page-head--foto > .wrap { position: relative; z-index: 2; }

/* ----------------------------------------------- El asomo del visualizador */
/* En las paginas publicas JOMID se muestra asomado. Los nueve modulos siguen
   ahi y siguen respondiendo con la empresa de ejemplo: la barra de modulos
   queda completa y se recorta solo el alto del panel activo. Armarlo con la
   marca propia es lo que se gana al dejar los datos, y ese trabajo vive en
   el cuestionario. Sin esto el visitante se lleva su maqueta y JOMMA no se
   queda con nada, que es justo el problema que habia que resolver. */

.os--asomo { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.os--asomo .os__panel {
  position: relative;
  max-height: clamp(230px, 36vh, 350px);
  overflow: hidden;
}

.os--asomo .os__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 132px;
  pointer-events: none;
  background: linear-gradient(to top, var(--surface-deep) 10%, rgba(15, 23, 42, 0.88) 44%, rgba(15, 23, 42, 0));
}

.asomo {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  margin-top: -1px;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem) var(--gutter) clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  border: 1px solid var(--line-gold);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    linear-gradient(to bottom, rgba(198, 155, 60, 0.08), transparent 68%),
    var(--surface-1);
}

.asomo__leyenda {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.asomo__sub {
  margin: 0;
  max-width: 54ch;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}

.asomo .btn { margin-top: 0.55rem; }

.asomo__pie {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ------------------------------------------------- 27. LA PIEZA DE CIFRAS */
/* Jerarquia explicita, que es lo que faltaba: la cifra elegida domina por
   tamano y color, su grafica la explica debajo, y las otras siete esperan
   a un lado atenuadas pero legibles. Antes eran cuatro bloques del mismo
   peso apilados y el ojo no tenia por donde entrar. */

.cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  align-items: stretch;
}

@media (min-width: 900px) {
  .cifras { grid-template-columns: minmax(0, 266px) minmax(0, 1fr); }
}

/* ---- Nivel 4: el selector ---- */
.cifras__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  align-content: start;
}

@media (min-width: 900px) { .cifras__lista { grid-template-columns: minmax(0, 1fr); } }

.cifras__op {
  display: grid;
  gap: 0.15rem;
  min-height: 52px;
  padding: 0.7rem 0.95rem;
  text-align: left;
  background: var(--surface-deep);
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
  /* 0.62 sobre --text-faint dejaba la etiqueta en 2.20:1. Con 0.88 y el
     tono medio queda en 6.01:1, y la seleccion se sigue distinguiendo por
     fondo y borde, que es lo que debia distinguirla desde el principio. */
  opacity: 0.88;
}

.cifras__op b {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold-signal);
  font-feature-settings: "tnum" 1;
}

.cifras__op--alza b { color: var(--emerald-signal); }

.cifras__op span {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.cifras__op:hover { opacity: 1; background: rgba(255, 255, 255, 0.03); }

.cifras__op[aria-selected="true"] {
  opacity: 1;
  background: rgba(198, 155, 60, 0.1);
  border-left-color: var(--gold-signal);
}

.cifras__op--alza[aria-selected="true"] {
  background: rgba(53, 201, 154, 0.1);
  border-left-color: var(--emerald-signal);
}

.cifras__op:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: -3px; }

/* ---- Niveles 1 a 3: el escenario ---- */
.cifras__escena {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  min-height: clamp(400px, 48vh, 480px);
}

.cifras__escena:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 3px; }

/* Nivel 1: manda. */
.cifras__valor {
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 1.9rem + 4vw, 5rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--gold-signal);
  font-feature-settings: "tnum" 1;
  transition: color var(--t) var(--ease);
}

.cifras.is-alza .cifras__valor { color: var(--emerald-signal); }

/* Nivel 3: la explica sin competirle. */
.cifras__label {
  margin-top: 0.55rem;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--text);
  max-width: 34ch;
}

.cifras__nota {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
}

/* ---- Nivel 2: la grafica ---- */
.cifras__viz { margin-top: auto; padding-top: 1.6rem; }
.viz[hidden] { display: none; }

/* Para las cifras de volumen: la misma cifra escrita completa. Una barra
   habria dibujado lo mismo para las tres, asi que no contaba nada. */
.viz--vol { display: grid; gap: 0.45rem; }

.viz__exp {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--gold-signal);
}

.viz__pie {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* La escala, para las cifras de mejora. Un indice de 100 a 115 no dice
   nada: el visitante pone la cifra de partida y ve que tamano tiene el
   cambio sobre un negocio real. La cifra base la pone el, asi que no se
   inventa ningun dato. */
.viz--esc { display: grid; gap: 1rem; }

.esc__ctl { display: grid; gap: 0.5rem; }

.esc__lbl {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.esc__rango {
  width: 100%;
  height: 26px;
  appearance: none;
  background: none;
  cursor: pointer;
}

.esc__rango::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
}

.esc__rango::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-signal), var(--gold-signal));
}

.esc__rango::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--onyx);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  cursor: grab;
}

.esc__rango::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--onyx);
  cursor: grab;
}

.esc__rango:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 6px; }

.esc__lectura {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.7rem, 0.5rem + 1vw, 1.4rem);
}

.esc__lado { display: grid; gap: 0.2rem; }

.esc__pie {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.esc__num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

.esc__lado--on .esc__num { color: var(--emerald-signal); }
.esc__uni { font-size: var(--step--1); color: var(--text-muted); line-height: 1.3; }
.esc__flecha { font-size: 1.3rem; color: var(--emerald-signal); }

/* La diferencia es lo que un dueno de negocio de verdad lee. */
.esc__dif {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--gold-signal);
}

/* ---- Nivel 5: el contexto, compacto ---- */
.marcas { margin-top: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }

.marcas__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 760px) { .marcas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.marca { display: grid; gap: 0.35rem; padding: 1rem 1.15rem; background: var(--surface-deep); }
.marca b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.marca span { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }

/* --------------------------------------------- 28. EL EMBUDO CON FUGAS */
/* Sustituye al embudo dibujado de Soluciones. La logica de color es en si
   misma el argumento: esmeralda es el flujo pagado que avanza, oxido es
   fuga, oro es la recuperacion que se compra. */

:root { --fuga: #e0796b; }

.fg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.3rem, 1rem + 1.4vw, 2.3rem);
  align-items: start;
}

/* Una sola columna a proposito: lo primero que se ve es el campo y la
   frase. Los controles y el porque viven en plegados, cerrados. */

.fg__controls {
  display: grid;
  gap: 0.95rem 1.6rem;
  padding: clamp(1rem, 0.9rem + 0.7vw, 1.4rem);
}
@media (min-width: 760px) { .fg__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fg__controls .fg__sup { grid-column: 1 / -1; }

/* Los dos plegados: cerrados de entrada, y cada uno con la pregunta que
   haria alguien que no sabe nada de esto. */
.fg__mas {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  overflow: hidden;
}
.fg__mas > summary {
  padding: 0.95rem clamp(1rem, 0.9rem + 0.7vw, 1.4rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-signal);
  cursor: pointer;
  list-style: none;
}
.fg__mas > summary::-webkit-details-marker { display: none; }
.fg__mas > summary::before { content: "+ "; }
.fg__mas[open] > summary::before { content: "\2212 "; }
.fg__mas[open] > summary { border-bottom: 1px solid var(--line); }
.fg__mas .fg__stage { padding: clamp(1rem, 0.9rem + 0.7vw, 1.4rem); }

/* La pregunta de arranque y sus botones. */
.coh__escena { display: grid; gap: 0.5rem; }
.coh__preg {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.coh__escbtns { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.fg__field { display: grid; gap: 0.35rem; }

.fg__field label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fg__ref { text-transform: none; letter-spacing: 0.02em; font-size: 0.6rem; color: var(--text-faint); }
.fg__ref sup { color: var(--gold-signal); }

.fg__field output {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

.fg__field input[type="range"] {
  width: 100%;
  height: 22px;
  appearance: none;
  background: none;
  cursor: pointer;
}
.fg__field input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
.fg__field input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
.fg__field input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%;
  background: var(--ivory); border: 3px solid var(--onyx); cursor: grab;
}
.fg__field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); border: 3px solid var(--onyx); cursor: grab;
}
.fg__field input[type="range"]:focus-visible { outline: 2px solid var(--gold-signal); outline-offset: 5px; }

/* Los supuestos se abren, no se esconden. */
.fg__sup { margin-top: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.9rem; display: grid; gap: 0.85rem; }
.fg__sup summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-signal);
}
.fg__sup summary::-webkit-details-marker { display: none; }
.fg__sup summary::before { content: "+ "; }
.fg__sup[open] summary::before { content: "\2212 "; }

.fg__stage { display: grid; gap: 1.1rem; }

/* La escalera. Sustituyo al Sankey el 2026-08-27: aquel dibujaba barras de
   12px y cintas que adelgazaban, con rotulos de 10px que en movil quedaban
   en 4px reales. Bonito y ilegible. Aqui cada etapa es una caja con su
   nombre y su cifra dentro, y de cada una cuelga lo que se quedo en el
   camino: se lee de corrido, de arriba abajo, y el texto siempre es texto. */
/* La cohorte. Cien puntos que representan a la gente que va a hacer clic
   este mes, y que avanzan etapa por etapa: los que se caen se apagan y
   bajan al suelo, bajo la fuga que se los quedo. Es la cuarta version del
   dibujo, despues del Sankey (ilegible), la escalera (legible pero
   quieta) y el pipeline. La diferencia es que aqui no se representa una
   proporcion: se ve caer a la gente. */
.coh {
  padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  display: grid;
  gap: 0.9rem;
}

.coh__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; }

.coh__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.coh__play:hover { background: var(--gold-signal); color: var(--bg-deep); }
.coh__play svg { width: 10px; height: 10px; }
.coh__pie { font-size: var(--step--1); color: var(--text-muted); }
.coh__pie b { color: var(--text); font-family: var(--font-mono); }
.coh__nota { display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-faint); line-height: 1.5; }

/* El embudo. Cono que se cierra en un cuello estrecho y un tubo de salida:
   sin el tubo y con el cuello ancho era un trapecio, no un embudo. */
.emb {
  --lado: clamp(6rem, 24vw, 10.5rem);
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
@media (max-width: 1023px) { .emb { --lado: 2.4rem; aspect-ratio: 4 / 5; } }

.emb__silueta {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--lado); right: var(--lado);
  width: auto; height: auto;
}
.emb__pared { fill: none; stroke: var(--line-strong); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.emb__nivel { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.emb__boca { fill: none; stroke: var(--gold-signal); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* MONIGOTES. Cabeza y cuerpo: una figura de persona se lee sola, sin
   leyenda. Los que se pierden caen tumbados. */
.coh__p {
  position: absolute;
  width: 7px;
  height: 9px;
  border-radius: 3.5px 3.5px 1.5px 1.5px;
  background: var(--emerald-signal);
  transform: translate(-50%, -50%);
  transition: left 620ms var(--ease), top 620ms var(--ease), background 320ms linear, transform 420ms var(--ease);
}
.coh__p::before {
  content: "";
  position: absolute;
  left: 50%; top: -5.5px;
  width: 5.5px; height: 5.5px;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%);
}
.coh__p.is-muerto { background: var(--fuga); transform: translate(-50%, -50%) rotate(90deg); }
.coh__p.is-cliente { background: var(--gold-signal); filter: drop-shadow(0 0 6px rgba(226, 187, 102, 0.9)); }

.emb__puntos { position: absolute; top: 0; bottom: 0; left: var(--lado); right: var(--lado); z-index: 2; }

/* Las cifras de cada altura, dentro del embudo. */
.emb__et {
  position: absolute;
  left: 50%;
  top: var(--y);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.emb__et i {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-style: normal;
  white-space: nowrap;
}
.emb__et b {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--emerald-signal);
  font-feature-settings: "tnum" 1;
}
.emb__et--fin { top: var(--y); }
.emb__et--fin b { color: var(--gold-signal); font-size: var(--step-1); }
.emb__et--fin i { color: var(--text); }

/* Lo que se derrama. En pantalla ancha flota a los costados del embudo,
   con su flecha saliendo de la pared. En un telefono no hay costados que
   valgan: se lee como lista debajo. */
.embw { position: relative; }

.emb__fuga {
  display: grid;
  gap: 0.05rem;
  border-radius: var(--radius);
  transition: background var(--t) var(--ease);
}
.emb__fuga svg { width: 22px; height: 9px; fill: none; stroke: var(--fuga); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.emb__fuga i {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.3;
}
.emb__fuga b { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fuga); font-feature-settings: "tnum" 1; }
.emb__fuga em { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fuga); font-style: normal; font-feature-settings: "tnum" 1; }
.emb__fuga.is-hi { background: rgba(224, 121, 107, 0.14); }

@media (min-width: 1024px) {
  .emb__derrames { position: absolute; inset: 0; pointer-events: none; }
  .emb__fuga {
    position: absolute;
    top: var(--y);
    width: calc(var(--lado) - 5.4rem);
    padding: 0.3rem 0.4rem;
  }
  .emb__fuga--izq { left: 0.2rem; text-align: right; justify-items: end; }
  .emb__fuga--der { right: 0.2rem; text-align: left; justify-items: start; }
}

@media (max-width: 1023px) {
  .emb__derrames { display: grid; gap: 0.3rem; margin-top: 2.6rem; }
  .emb__fuga {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    text-align: left;
  }
  .emb__fuga svg { transform: rotate(-90deg); align-self: center; }
  .emb__fuga em { justify-self: end; }
}

.coh__vuelve, .coh__mas { font-size: var(--step--1); color: var(--gold-signal); line-height: 1.5; }
.coh__vuelve b, .coh__mas b { font-family: var(--font-mono); }
.coh__vuelve[hidden], .coh__mas[hidden] { display: none; }

.fg__escala { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-faint); line-height: 1.5; }

/* La identidad del dinero, escrita para que se pueda comprobar. */
.fg__cuadre {
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--gold-dim);
}
.fg__cuadre p { margin-top: 0.3rem; font-size: var(--step--1); color: var(--text); line-height: 1.55; }

.fg__kpi { padding: 0.9rem 1rem; background: var(--surface-deep); }
.fg__kpi span { display: block; font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.04em; }
.fg__kpi b { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--gold-signal); }
.fg__kpi small { display: block; margin-top: 0.4rem; font-size: 0.66rem; color: var(--text-muted); line-height: 1.45; }

.fg__kpi--hero { border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(140deg, rgba(224, 121, 107, 0.12), rgba(255, 255, 255, 0.02)); }
.fg__kpi--hero b { font-size: var(--step-2); color: var(--fuga); font-family: var(--font-display); letter-spacing: -0.02em; }

.fg__diag { padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.fg__diag [data-fgdiag][hidden] { display: none; }
.fg__diag h3 { font-size: var(--step-1); }
.fg__diag p { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.fg__diag .link-arrow { margin-top: 0.5rem; }

/* Las cuatro fugas, cada una con su costo y su enlace a lo que la tapa. */
.fg__tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(1.3rem, 1rem + 1.2vw, 2.2rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 620px)  { .fg__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .fg__tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fgc { display: grid; align-content: start; gap: 0.5rem; padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem); background: var(--surface-0); transition: background var(--t) var(--ease); }
.fgc.is-mayor { background: linear-gradient(160deg, rgba(224, 121, 107, 0.1), rgba(255, 255, 255, 0.015)); }
.fgc__cif { font-family: var(--font-mono); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.03em; color: var(--fuga); font-feature-settings: "tnum" 1; }
.fgc h3 { font-size: var(--step-0); line-height: 1.3; }
.fgc p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.fgc p sup { color: var(--gold-signal); }

.fgc__chip {
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fgc__chip--no { color: var(--fuga); border-color: rgba(224, 121, 107, 0.4); }
.fgc__chip--ret { color: var(--gold-signal); border-color: var(--line-gold); }
.fgc__chip--seg { color: var(--emerald-signal); border-color: rgba(53, 201, 154, 0.35); }

/* Escenarios de un clic. Cambian la conclusion de la pieza, no solo los
   numeros: cada uno deja una etapa floja distinta. */
.fg__escena { display: grid; gap: 0.5rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--line); }
.fg__escbtns { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.fg__esc {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.fg__esc:hover { color: var(--text); border-color: var(--line-gold); }
.fg__esc[aria-pressed="true"] { color: var(--gold-signal); border-color: var(--line-gold); background: var(--gold-dim); }

/* El diagnostico dice cuantos clientes mas darias arreglando una tasa.
   Este boton lo aplica y lo demuestra, en vez de pedir que se crea. */
.fg__fix {
  justify-self: start;
  margin-top: 0.7rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.fg__fix:hover { background: var(--gold-signal); color: var(--bg-deep); }
.fg__fix[hidden] { display: none; }

/* Resaltado cruzado: pasar por una tarjeta enciende su fuga en el mapa, y
   al reves. La informacion completa vive en la tarjeta, asi que el mapa no
   necesita foco de teclado propio. */
.fgc.is-hi { background: linear-gradient(160deg, rgba(224, 121, 107, 0.16), rgba(255, 255, 255, 0.02)); }
.fgc:focus-within { background: linear-gradient(160deg, rgba(224, 121, 107, 0.16), rgba(255, 255, 255, 0.02)); }

/* ------------------------------------------------------------- 24b CINTA */
/* Desplazamiento continuo. El set se duplica por JS y la pista recorre
   exactamente el ancho de un set, asi que el corte nunca se ve. */
.cinta {
  padding-block: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  border-block: 1px solid var(--line);
  background: var(--surface-deep);
  overflow: hidden;
  position: relative;
}
.cinta::before, .cinta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(3rem, 8vw, 9rem);
  z-index: 2;
  pointer-events: none;
}
.cinta::before { left: 0; background: linear-gradient(to right, var(--surface-deep), transparent); }
.cinta::after { right: 0; background: linear-gradient(to left, var(--surface-deep), transparent); }

.cinta__via { display: flex; width: max-content; animation: cintaCorre var(--dur, 46s) linear infinite; }
.cinta:hover .cinta__via,
.cinta.is-quieta .cinta__via { animation-play-state: paused; }

/* Un movimiento que corre solo mas de cinco segundos necesita un control
   de verdad: con el raton se pausa, pero en un telefono y con teclado no
   habia forma de pararlo. */
.cinta__pausa {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-0);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.cinta:hover .cinta__pausa,
.cinta__pausa:focus-visible,
.cinta.is-quieta .cinta__pausa { opacity: 1; }
.cinta__pausa:hover { color: var(--gold-signal); border-color: var(--line-gold); }
.cinta__pausa svg { width: 11px; height: 11px; fill: currentColor; }
@media (hover: none) { .cinta__pausa { opacity: 1; } }

.cinta__set { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; }
.cinta__set span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.cinta__set span:hover { color: var(--text); }
.cinta__set i { color: var(--gold-signal); font-style: normal; font-size: 1.1rem; }

@keyframes cintaCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--paso, 50%))); }
}

/* ------------------------------------------------------------ 24c TUNEL */
/* Sticky a 100vh con perspectiva y el scroll gobernando un travelling en
   Z, que es el mecanismo de la referencia. Sin JS y sin movimiento las
   capas se leen apiladas en flujo normal: la clase is-3d solo la pone el
   motor cuando puede animarlas, asi nadie se queda con una pantalla en
   blanco. */
.tunel { position: relative; background: var(--surface-0); }

/* Fondo fotografico en deriva, igual que el hero, la banda y el cierre: es
   la misma gramatica de imagen viva del resto del home. */
.tunel__foto { position: absolute; inset: 0; z-index: 0; opacity: 0.46; }
.tunel__vel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--surface-0) 0%, rgba(10, 10, 10, 0.55) 30%, rgba(10, 10, 10, 0.55) 70%, var(--surface-0) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.85));
}
.tunel__pista { position: relative; }
.tunel__fijo { position: relative; padding-block: var(--section-y); }

.tunel__escena { display: grid; gap: 1.6rem; max-width: var(--max-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.tunel__capa {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  text-align: center;
}

.tunel__n {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-signal);
}
.tunel__t {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  max-width: 16ch;
}
.tunel__d { font-size: var(--step-0); color: var(--text-muted); max-width: 42ch; line-height: 1.55; }
.tunel__capa--fin .tunel__t { color: var(--gold-signal); }

.tunel__barra { display: none; }

/* Modo travelling: lo enciende el motor. */
.tunel.is-3d .tunel__pista { height: auto; }
.tunel.is-3d .tunel__fijo {
  position: relative;
  height: clamp(420px, 68vh, 620px);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 760px;
  perspective-origin: 50% 50%;
}
.tunel.is-3d .tunel__foto,
.tunel.is-3d .tunel__vel { position: absolute; inset: 0; }
.tunel.is-3d .tunel__escena {
  position: relative;
  width: 100%;
  display: block;
  transform-style: preserve-3d;
}
.tunel.is-3d .tunel__capa {
  position: absolute;
  inset: 0;
  align-content: center;
  padding-inline: var(--gutter);
  transform: translateZ(var(--z, 0px));
  opacity: var(--o, 0);
  filter: blur(var(--bl, 0px));
  pointer-events: none;
  will-change: transform, opacity;
}

/* La capa de luz, tomada del video con mezcla de la referencia: aqui es un
   gradiente que gira de tono con el avance, sin pedir un archivo de video. */
.tunel.is-3d .tunel__luz {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(42% 42% at 50% 50%, rgba(53, 201, 154, 0.5), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(70px) hue-rotate(var(--hue, 0deg));
  opacity: 0.5;
}

.tunel.is-3d .tunel__barra {
  display: block;
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 4vh, 3rem);
  transform: translateX(-50%);
  width: min(220px, 42vw);
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.tunel.is-3d .tunel__barra i { display: block; height: 100%; width: var(--p, 0%); background: var(--gold-signal); }

/* ---------------------------------------------------- 24d PREGUNTAS */
/* Dos columnas: el titulo se queda fijo mientras se recorren las
   respuestas, que es lo que hace que un bloque largo de texto no se sienta
   una lista interminable. */
.faqx { display: grid; gap: clamp(1.6rem, 1.2rem + 2vw, 3.4rem); }
@media (min-width: 900px) {
  .faqx { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); align-items: start; }
  .faqx__lado { position: sticky; top: calc(var(--nav-h, 4.5rem) + 2rem); }
}
.faqx__lado h2 { margin-top: 0.7rem; }
.faqx__lado .lead { margin-top: 1rem; }
.faqx__lado .link-arrow { display: inline-flex; }

/* Numeradas: dan sensación de recorrido y ayudan a volver a una. */
.faq--num { counter-reset: faq; }
.faq--num .faq__item { counter-increment: faq; position: relative; }
.faq--num .faq__q { padding-left: 2.6rem; }
.faq--num .faq__q::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-signal);
  padding-top: 0.35rem;
}
.faq--num .faq__a { padding-left: 2.6rem; }
.faq--num .faq__item:has(.faq__q[aria-expanded="true"]) { background: linear-gradient(90deg, var(--gold-dim), transparent 70%); }

/* --------------------------------------------- 25. MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .reveal { opacity: 1; transform: none; }
  .words__i { transform: none; }
  .pin__frame { position: static; opacity: 1; visibility: visible; transform: none; margin-bottom: 3rem; }
  .pin__inner { min-height: auto; position: static; padding: var(--section-y) 0; }
  .orb::before { transition: none; }
  .os__live i { animation: none; opacity: 1; }
  .doc__track div { opacity: 1; transform: none; }
  .capture.is-open .capture__body { animation: none; }
  .art [data-draw] { stroke-dashoffset: 0 !important; }
  .art [data-node] { opacity: 1; transform: none; }
  .art [data-rise] { animation: none; opacity: 0.7; }
  .art [data-grow] { transform: none; }
  .reveal-mask { color: var(--text); background: none; }
  .layer { transform: none !important; }
  .seq__frame { animation: none; }
  .lp__loop-line.is-on { animation: none; }
  .coh__p { transition: none; }
  .cinta__via { animation: none; }
  /* Sin relevo: se queda la primera fotografia, quieta y visible. */
  .ph--rota > img { opacity: 0 !important; }
  .ph--rota > img:first-child { opacity: 1 !important; }
  /* El tunel nunca entra en modo travelling: se queda apilado y legible. */
  .tunel__capa { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fg__esc, .fg__fix, .fgc { transition: none; }
  .lp__pulso { animation: none; opacity: 0 !important; }
  .lockup__rest { transform: none; opacity: 0.55; }
  /* La especificidad importa aqui: `.js .hero__frame` pesa (0,2,0) y esta
     regla pesaba (0,1,0), asi que `grid-area: 1 / 1` seguia ganando y los
     once cuadros quedaban uno encima de otro. Con el JS en modo reducido
     los once llevan `is-active`, asi que se pintaban los once a la vez en
     una celda de 522 px con 2262 px de contenido: ilegible.
     Lo encontro el agente de Lovable leyendo la hoja, el 2026-09-01. */
  .hero__frames { gap: 2.5rem; }
  .js .hero__frame,
  .js .hero__frame.is-active { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
  .eco__step, .loop__node { opacity: 1; }
  .viz__barra > i { transition: none; }
  .cifras__op { opacity: 1; }
  .ph > img { animation: none; transform: none; clip-path: none !important; }
  .fila { scroll-behavior: auto; }
  .fila__more { grid-template-rows: 1fr; }
  .fila:hover .fila__card, .fila:focus-within .fila__card { opacity: 1; transform: none; }
  .fila .fila__card:hover, .fila .fila__card:focus-within { transform: none; }
}

/* ------------------------------------------------- AREA TACTIL MINIMA */
/* Auditoria del 2026-08-31: cuatro controles de las piezas vivas median por
   debajo de los 44 x 44 px recomendados en telefono. El de la cinta era el
   peor, 30 x 30, y es el unico modo de pararla sin raton.
   Lo que crece es el area que responde al dedo, no lo que se ve: un
   pseudoelemento invisible por encima del boton. El diseno no cambia. */
.cinta__pausa::before,
.hero__replay::before,
.seq__toggle::before,
.coh__play::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.hero__replay,
.seq__toggle,
.coh__play { position: relative; }
.cinta__pausa::before { inset: -7px; border-radius: 50%; }

/* La lista corta de complementarios del home. El bloque con descripciones
   vive solo en soluciones.html: tenerlo dos veces palabra por palabra ponia
   a dos paginas del mismo sitio a competir por el mismo texto. */
.svcs-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.svcs-lista li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* El pie arranca cerrado y abre al entrar en pantalla: sin esto las
   palabras ya estan puestas antes de que nadie las vea, y el gesto que
   explica el nombre se pierde. */
.footer__brand .brand.is-cerrado { gap: 0.18em; }
.footer__brand .brand.is-cerrado .brand__c i {
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.footer__brand .brand .brand__c i {
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.footer__brand .brand__c:nth-child(1) i { transition-delay: 0ms; }
.footer__brand .brand__c:nth-child(2) i { transition-delay: 90ms; }
.footer__brand .brand__c:nth-child(3) i { transition-delay: 180ms; }
.footer__brand .brand__c:nth-child(4) i { transition-delay: 270ms; }
.footer__brand .brand__c:nth-child(5) i { transition-delay: 360ms; }