/* HUNU — landing. Same "comprobante" design language as the app, standalone.
   No build step: plain CSS with the app's palette tokens. */

/* Bungee Inline (SIL Open Font License 1.1), servida desde el propio dominio.
   swap: el texto se ve de inmediato con el fallback y cambia al cargar. */
@font-face {
  font-family: 'Bungee Inline';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bungee-inline-latin.woff2') format('woff2');
}

:root {
  --paper: #f7f3e9;
  --paper-input: #fbf8f0;
  --desk: #e7decb;
  --ink: #1e1c17;
  --muted: #7c7159;
  --rule: #c9bd9c;
  --box: #dcd3bc;
  --green: #2e6b3e;
  --red: #b23a2e;
  /* Dientes del borde rasgado. En claro son el papel mismo. */
  --tear: #f7f3e9;
  /* Desglose por medio de pago. Con nombre propio (no --c1..--c4 posicionales)
     para que el color quede atado al medio y no se desordene al reordenar. */
  --pay-yape: #7c3aed;
  --pay-plin: #1d9e75;
  --pay-efectivo: #b9770e;
  --pay-tarjeta: #2563eb;
  /* El pizarrón usa --ink de fondo, o sea que invierte respecto de la página.
     Su verde tiene que invertirse también o el contraste se cae (2.2:1). */
  --green-on-ink: #6fae7f;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --display: 'Bungee Inline', ui-monospace, monospace;
  /* Misma familia que la app: el dashboard lee en sans y reserva el mono para
     las cifras. La landing hacía todo en mono y por eso parecía la pantalla de
     login, no el producto. */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Radios y sombras copiados de la app para que las tarjetas se sientan iguales. */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-card: 0 10px 28px rgb(30 28 23 / 0.07);
  --shadow-float: 0 16px 42px rgb(20 19 17 / 0.2);
  --wrap: 1080px;
}

.theme-noir {
  --paper: #1e1c17;
  --paper-input: #26231e;
  --desk: #141311;
  --ink: #edecea;
  --muted: #b8b3a6;
  --rule: #3d382f;
  --box: #2b2822;
  --green: #6fae7f;
  --red: #d9705c;
  /* En oscuro el troquelado va crema para que se recorte contra el fondo. */
  --tear: #e8e2d2;
  /* La rampa sube en luminancia para leerse sobre papel oscuro */
  /* Suben en luminancia para leerse sobre papel oscuro */
  --pay-yape: #a78bfa;
  --pay-plin: #3fbfa5;
  --pay-efectivo: #e0a458;
  --pay-tarjeta: #6ea8fe;
  /* En noir el pizarrón es casi blanco: necesita el verde oscuro */
  --green-on-ink: #2e6b3e;
}

/* ===== Paletas de color =====
   Las mismas ocho que trae la app en Ajustes › Apariencia. Los valores se copian
   de frontend/src/styles.css: si allá cambian, acá hay que regenerarlos.
   Se combinan con el modo: [data-color-theme] pisa los tokens de :root y
   .theme-noir[data-color-theme] pisa encima cuando además está en oscuro.

   Dos tokens son propios de la landing y se derivan, no se copian:
   --tear         los dientes del troquelado; en claro son el papel mismo, en
                  noir van claros para recortarse contra el fondo.
   --green-on-ink el pizarrón invierte el fondo, así que su verde tiene que
                  invertirse también o el contraste se cae. */


:root[data-color-theme='oceano'] {
  --paper: #f2f7f9;
  --paper-input: #f9fcfd;
  --desk: #dcebef;
  --ink: #18313a;
  --muted: #607880;
  --rule: #abc6ce;
  --box: #c9dde2;
  --green: #147a70;
  --red: #b94b42;
  --tear: #f2f7f9;
  --green-on-ink: #58b9a9;
}

:root.theme-noir[data-color-theme='oceano'] {
  --paper: #13252b;
  --paper-input: #192f36;
  --desk: #0c191e;
  --ink: #e8f2f4;
  --muted: #a8bec4;
  --rule: #35515a;
  --box: #203b43;
  --green: #58b9a9;
  --red: #e27d72;
  --tear: #f2f7f9;
  --green-on-ink: #147a70;
}

:root[data-color-theme='lavanda'] {
  --paper: #f7f3fa;
  --paper-input: #fcf9fd;
  --desk: #e8dff0;
  --ink: #30273a;
  --muted: #786b83;
  --rule: #c9b9d5;
  --box: #ddd1e5;
  --green: #52734f;
  --red: #a24f79;
  --tear: #f7f3fa;
  --green-on-ink: #8eb68a;
}

:root.theme-noir[data-color-theme='lavanda'] {
  --paper: #261f2d;
  --paper-input: #302638;
  --desk: #18131d;
  --ink: #f1eaf5;
  --muted: #c3b4cc;
  --rule: #4c3c58;
  --box: #382d42;
  --green: #8eb68a;
  --red: #dc7fa9;
  --tear: #f7f3fa;
  --green-on-ink: #52734f;
}

:root[data-color-theme='terracota'] {
  --paper: #faf2eb;
  --paper-input: #fff9f4;
  --desk: #ecdccd;
  --ink: #3b2b23;
  --muted: #806c60;
  --rule: #d0b6a3;
  --box: #e2ccbb;
  --green: #34705e;
  --red: #a34f2c;
  --tear: #faf2eb;
  --green-on-ink: #79b49f;
}

:root.theme-noir[data-color-theme='terracota'] {
  --paper: #2b211b;
  --paper-input: #352820;
  --desk: #1b1511;
  --ink: #f4eae2;
  --muted: #c7b2a4;
  --rule: #523f32;
  --box: #3e3027;
  --green: #79b49f;
  --red: #df825c;
  --tear: #faf2eb;
  --green-on-ink: #34705e;
}

:root[data-color-theme='bosque'] {
  --paper: #f0f5ed;
  --paper-input: #f8fbf6;
  --desk: #d8e4d2;
  --ink: #243429;
  --muted: #667565;
  --rule: #b2c5ae;
  --box: #ccd9c7;
  --green: #37633f;
  --red: #9a4f3e;
  --tear: #f0f5ed;
  --green-on-ink: #7bb487;
}

:root.theme-noir[data-color-theme='bosque'] {
  --paper: #1c291f;
  --paper-input: #243328;
  --desk: #111a13;
  --ink: #ebf1e9;
  --muted: #b2c0af;
  --rule: #3b5140;
  --box: #2b3c2f;
  --green: #7bb487;
  --red: #dc806e;
  --tear: #f0f5ed;
  --green-on-ink: #37633f;
}

:root[data-color-theme='citrico'] {
  --paper: #fff8df;
  --paper-input: #fffcf0;
  --desk: #efe4b9;
  --ink: #35301d;
  --muted: #7d7248;
  --rule: #d4c585;
  --box: #e5d9a8;
  --green: #52752d;
  --red: #b94f32;
  --tear: #fff8df;
  --green-on-ink: #9abd68;
}

:root.theme-noir[data-color-theme='citrico'] {
  --paper: #292617;
  --paper-input: #34301d;
  --desk: #19170e;
  --ink: #faf3d9;
  --muted: #c7bd93;
  --rule: #554d2c;
  --box: #3e3923;
  --green: #9abd68;
  --red: #e47d62;
  --tear: #fff8df;
  --green-on-ink: #52752d;
}

:root[data-color-theme='rosa'] {
  --paper: #fff2f6;
  --paper-input: #fff9fb;
  --desk: #efdbe4;
  --ink: #3b2932;
  --muted: #806873;
  --rule: #d3b2c1;
  --box: #e4ccd7;
  --green: #477258;
  --red: #9b3f68;
  --tear: #fff2f6;
  --green-on-ink: #82b394;
}

:root.theme-noir[data-color-theme='rosa'] {
  --paper: #2d2026;
  --paper-input: #38272f;
  --desk: #1d1419;
  --ink: #f7eaf0;
  --muted: #cab1bd;
  --rule: #583b49;
  --box: #422f38;
  --green: #82b394;
  --red: #df7da8;
  --tear: #fff2f6;
  --green-on-ink: #477258;
}

:root[data-color-theme='grafito'] {
  --paper: #f2f3f4;
  --paper-input: #fafafa;
  --desk: #dcdfe1;
  --ink: #252b30;
  --muted: #66717a;
  --rule: #b9c0c5;
  --box: #d0d5d8;
  --green: #426a57;
  --red: #8d4f55;
  --tear: #f2f3f4;
  --green-on-ink: #7daf96;
}

:root.theme-noir[data-color-theme='grafito'] {
  --paper: #22272b;
  --paper-input: #2a3035;
  --desk: #15191c;
  --ink: #edf0f2;
  --muted: #b5bdc3;
  --rule: #424b52;
  --box: #31383e;
  --green: #7daf96;
  --red: #d48289;
  --tear: #f2f3f4;
  --green-on-ink: #426a57;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* El mono se gana su lugar, ya no se hereda: queda para lo que es "comprobante"
   —la boleta, el pizarrón, las cifras, los sellos y las etiquetas— mientras la
   prosa se lee en sans. Es el mismo reparto que hace el dashboard. */
.ticket,
.board,
.eyebrow,
.stamp,
.beta-stamp,
.seal,
.chip,
.amt,
.n,
.rate,
.timer-num,
.step-n,
.strip-total,
.wallet-bar,
.feat-demo,
.mini {
  font-family: var(--mono);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* La decoración no debe poder desplazar la página de lado: los sellos van
   rotados y la marca de agua entra con scale(1.79), y ambos se salían del
   viewport en móvil (77 px durante la animación, 10 px en reposo).
   Va en <main> y no en <body> a propósito: la barra de arriba es sticky y
   cualquier overflow en un ancestro suyo la rompería. `clip` en vez de `hidden`
   para no crear un contenedor de scroll. */
main { overflow-x: clip; }

/* ===== Ticket flotante (menú principal) =====================================
   Píldora fija arriba, centrada, que flota sobre el contenido. Trae su propia
   superficie clara, así que no depende del tema: se ve igual en claro y noir. */
.ticket-nav {
  position: fixed; top: 20px; left: 50%; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 22px;
  background: rgba(247, 244, 250, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(36, 29, 48, 0.1);
  border-radius: 999px;
  box-shadow: 0 18px 40px -26px rgba(36, 29, 48, 0.75);
  /* La entrada la dispara el JS; el translateX(-50%) del centrado tiene que
     estar en todos los estados o la píldora salta al animar. */
  transform: translateX(-50%) translateY(-16px) scale(0.97);
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1);
}
.ticket-nav.is-in { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* Al hacer scroll se compacta y se apoya más sobre el contenido. */
.ticket-nav.is-scrolled {
  background: rgba(247, 244, 250, 0.78);
  box-shadow: 0 22px 48px -24px rgba(36, 29, 48, 0.9);
  transition: opacity 240ms ease, transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.ticket-nav.is-in.is-scrolled { transform: translateX(-50%) translateY(0) scale(0.97); }

/* 1 · Wordmark, con el punteado de recibo como separador */
.tk-brand {
  font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: 0.3em;
  color: #241d30; text-decoration: none; white-space: nowrap;
  padding-right: 14px; border-right: 1px dashed rgba(36, 29, 48, 0.25);
}

/* 2 · Grupo de links + tinta deslizante */
.tk-links { position: relative; display: flex; align-items: center; gap: 2px; }
.tk-ink {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: rgba(36, 29, 48, 0.08); border-radius: 999px; pointer-events: none;
  transition: transform 380ms cubic-bezier(.16,1,.3,1), width 380ms cubic-bezier(.16,1,.3,1);
}
.tk-ink.no-anim { transition: none; }
.tk-link {
  position: relative; z-index: 1; white-space: nowrap; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px; color: #6f6580;
  transition: color 200ms ease;
}
.tk-link.is-active, .tk-link:hover { color: #241d30; }
.tk-link:focus-visible, .tk-cta:focus-visible, .tk-brand:focus-visible {
  outline: 2px solid #241d30; outline-offset: 2px;
}

/* 3 · CTA sólido */
.tk-cta {
  white-space: nowrap; text-decoration: none;
  background: #241d30; color: #f7f4fa;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 11px 18px; border-radius: 999px;
  transition: background 200ms ease;
}
.tk-cta:hover { background: #3b2f52; }
/* Tema: botón circular de solo ícono. El sello rotado con borde punteado venía
   de la estética de papel y peleaba con la píldora, que es toda curvas limpias;
   además "Modo auto" comía ~90px de un menú ya ancho. El significado vive en el
   aria-label. Usa la tinta de la píldora, no la del tema. */
.ticket-nav .tk-stamp {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  font-family: var(--mono); font-size: 14px; line-height: 1;
  color: #241d30; background: transparent;
  border: 1px solid rgba(36, 29, 48, 0.25); border-radius: 999px;
  transform: none; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.ticket-nav .tk-stamp:hover { background: rgba(36, 29, 48, 0.08); border-color: rgba(36, 29, 48, 0.45); color: #241d30; }
.ticket-nav .tk-stamp:focus-visible { outline: 2px solid #241d30; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ticket-nav { opacity: 1; transform: translateX(-50%); transition: none; }
  .ticket-nav.is-in, .ticket-nav.is-in.is-scrolled { transform: translateX(-50%); }
  .tk-ink { transition: none; }
}

/* ===== Menú móvil: hoja de recibo bajo la barra anclada ====================
   En desktop nada de esto existe: el contenedor se disuelve (display: contents)
   y el ticket conserva su posicionamiento propio. */
.nav-shell { display: contents; }
.nav-burger, .msheet, .ms-hint, .mveil { display: none; }

@media (max-width: 900px) {
  /* La barra y la hoja son hermanas dentro de un contenedor fijo, así la hoja
     cuelga con margin-top sin depender del alto exacto de la barra. */
  .nav-shell {
    display: block; position: fixed; top: 8px; left: 14px; right: 14px; z-index: 25;
  }

  /* Barra anclada: pierde el centrado en píldora y ocupa el ancho del contenedor. */
  .ticket-nav {
    position: static; left: auto; width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px 10px 18px;
    background: rgba(250, 248, 242, 0.96);
    border: 1px solid rgba(27, 26, 22, 0.1);
    border-radius: 20px;
    box-shadow: 0 14px 30px -22px rgba(27, 26, 22, 0.7);
  }
  /* El translateX(-50%) del centrado no aplica acá: sobreescribir los tres
     estados o la barra se iría media pantalla a la izquierda. */
  .ticket-nav, .ticket-nav.is-in, .ticket-nav.is-in.is-scrolled { transform: none; }
  .ticket-nav.is-scrolled { background: rgba(250, 248, 242, 0.96); }
  .tk-links, .tk-cta, .ticket-nav .tk-stamp { display: none; }
  .tk-brand {
    border-right: 0; padding-right: 0; margin-right: auto;
    font-size: 20px; font-weight: 400; letter-spacing: 0.32em; color: #1b1a16;
  }

  /* Hamburguesa */
  .nav-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0; flex: none; cursor: pointer;
    border: 1px solid rgba(27, 26, 22, 0.14); border-radius: 14px;
    background: rgba(27, 26, 22, 0.05);
  }
  .nav-burger span {
    display: block; width: 19px; height: 1.6px; background: #1b1a16; border-radius: 2px;
    transition: transform 320ms cubic-bezier(.16,1,.3,1), opacity 200ms ease;
  }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Hoja: abre creciendo en alto. El alto exacto lo pone el JS con scrollHeight. */
  .msheet {
    display: block; margin-top: 8px; height: 0; opacity: 0; overflow: hidden;
    background: #faf8f2; border: 1px solid rgba(27, 26, 22, 0.1);
    border-radius: 18px; box-shadow: 0 24px 44px -26px rgba(27, 26, 22, 0.8);
    transition: height 460ms cubic-bezier(.16,1,.3,1), opacity 300ms ease;
  }
  .msheet.is-open { opacity: 1; }

  .ms-head {
    display: flex; justify-content: space-between;
    padding: 14px 18px 9px; border-bottom: 1px dashed rgba(27, 26, 22, 0.22);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: #8a8577;
  }

  .ms-list { display: block; }
  /* Ítems: lista de recibo, sin flechas ni guías. Entran en cascada. */
  .ms-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 16px 18px; text-decoration: none;
    border-bottom: 1px dashed rgba(27, 26, 22, 0.14);
    opacity: 0; transform: translateY(-10px);
    transition: opacity 380ms ease, transform 460ms cubic-bezier(.16,1,.3,1);
  }
  .ms-row:last-child { border-bottom: 0; }
  .ms-row.is-in { opacity: 1; transform: translateY(0); }
  .ms-n { font-family: var(--mono); font-size: 10.5px; color: #a8a294; }
  .ms-name {
    font-family: var(--mono); font-size: 15.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #1b1a16;
  }
  .ms-row.is-here .ms-name { color: #8a8577; }

  /* Pie del recibo: Entrar y el tema. No son navegación, así que van separados
     por el doble filete, como el total de una boleta. Sin esto, "Entrar" y el
     cambio de tema no existirían en móvil. */
  .ms-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-top: 3px double rgba(27, 26, 22, 0.22);
    opacity: 0; transform: translateY(-10px);
    transition: opacity 380ms ease, transform 460ms cubic-bezier(.16,1,.3,1);
  }
  .ms-foot.is-in { opacity: 1; transform: translateY(0); }
  .ms-entrar {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: #8a8577; text-decoration: none;
  }
  .ms-theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: rgba(27, 26, 22, 0.05); border: 1px solid rgba(27, 26, 22, 0.14);
    border-radius: 999px; color: #1b1a16; font-size: 13px; line-height: 1;
  }

  /* Etiqueta bajo la hoja: aparece cuando el despliegue ya terminó. */
  .ms-hint {
    display: block; margin: 0; padding-top: 10px; text-align: center;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: #faf8f2;
    opacity: 0; transition: opacity 300ms ease 260ms;
  }
  .ms-hint.is-in { opacity: 1; }

  /* Velo: bajo la barra (z 25) para que la barra siga encima. */
  .mveil {
    display: block; position: fixed; inset: 0; z-index: 20;
    background: rgba(27, 26, 22, 0.3);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 320ms ease;
  }
  .mveil.is-open { opacity: 1; pointer-events: auto; }

  .nav-burger:focus-visible, .ms-row:focus-visible,
  .ms-entrar:focus-visible, .ms-theme:focus-visible {
    outline: 2px solid #1b1a16; outline-offset: 2px;
  }

  body.menu-open { overflow: hidden; }
}

/* Sin animaciones: todo cambia de estado al instante. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .msheet, .ms-row, .ms-foot, .ms-hint, .mveil, .nav-burger span { transition: none !important; }
}

/* Rubber-stamp theme toggle, same as the app */
.stamp {
  background: none; border: 1.5px solid var(--muted); color: var(--muted);
  font-family: var(--mono); font-size: .6rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 8px; cursor: pointer; transform: rotate(-4deg); border-radius: var(--radius-sm);
}
.stamp:hover { border-color: var(--ink); color: var(--ink); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-sm);
  padding: 14px 24px; font-family: var(--mono); font-size: .85rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .08s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-ghost { background: none; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-wa { background: var(--green); color: var(--paper); }

/* ===== Sections ===== */
section { padding: 84px 0; }
.eyebrow { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
h1, h2, h3 { font-weight: normal; margin: 0; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.12; letter-spacing: -.5px; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.2; margin-bottom: 14px; }
h3 { font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; }
/* --muted puro sobre --desk daba 3.6:1, por debajo del mínimo de 4.5. Se acerca
   a --ink, que siempre es el color de máximo contraste del tema: la mezcla sirve
   igual en claro (oscurece) que en noir (aclara), y en las ocho paletas, sin
   tener que calibrar ninguna a mano. */
.lead { font-size: clamp(1rem, 2vw, 1.15rem); color: color-mix(in srgb, var(--muted) 45%, var(--ink)); max-width: 60ch; }
.section-head { max-width: 62ch; margin-bottom: 40px; }

/* ===== Hero ===== */
/* El hero ocupa la pantalla completa: el ticket ahora flota (position: fixed) y
   ya no ocupa alto propio, así que no hay que restarle nada. El padding superior
   despeja la píldora para que no tape el contenido.
   En ≤860px se apila y vuelve a crecer con su contenido. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 0 12px;
  border-bottom: 1px solid var(--rule);
}
/* El resto de páginas también arranca bajo la píldora flotante. */
main > section:first-child:not(.hero) { padding-top: 124px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 span { font-family: var(--display); letter-spacing: 2px; }
.hero .lead { margin: 20px 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: .74rem; color: var(--muted); margin-top: 14px; }

/* ===== Entrada del hero =====================================================
   El texto aparece rápido (se lee de inmediato) y la boleta se "imprime" al
   costado. Todo con transiciones sobre clases que pone el JS, así nada queda
   escondido si el JS falla. */
.js .hero [data-in] { opacity: 0; transform: translateY(12px); }
.js .hero.play [data-in] {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.js .hero.play [data-in='1'] { transition-delay: .05s; }
.js .hero.play [data-in='2'] { transition-delay: .13s; }
.js .hero.play [data-in='3'] { transition-delay: .26s; }
.js .hero.play [data-in='4'] { transition-delay: .38s; }
.js .hero.play [data-in='5'] { transition-delay: .48s; }

/* "claras" se estampa como un sello de caucho */
.js .hero h1 .stamp-in { display: inline-block; opacity: 0; transform: scale(1.9) rotate(-6deg); }
.js .hero.play h1 .stamp-in {
  opacity: 1; transform: none;
  transition: opacity .28s ease .34s, transform .42s cubic-bezier(.2,1.5,.4,1) .34s;
}

/* ===== Ticket mockup (HTML recreation of the app UI) ===== */
.ticket-stage { perspective: 1200px; }
.ticket {
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.22));
  transform-style: preserve-3d;
  will-change: transform;
  /* Esquinas redondeadas: overflow recorta los dientes del zigzag en las puntas,
     así el contorno queda como tarjeta moderna sin perder el papel en el medio. */
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* El papel se alimenta desde arriba */
.js .ticket { clip-path: inset(0 0 100% 0); }
.js .hero.play .ticket {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.16,1,.3,1) .15s;
}

/* Cada bloque del recibo cae en secuencia, como líneas impresas */
.js .ticket [data-seq] { opacity: 0; transform: translateY(-8px); }
.js .hero.play .ticket [data-seq] {
  opacity: 1; transform: none;
  transition: opacity .34s ease, transform .44s cubic-bezier(.22,1,.36,1);
}
.js .hero.play .ticket [data-seq='1'] { transition: opacity .3s ease .85s, transform .45s cubic-bezier(.2,1.5,.4,1) .85s; transform-origin: center; }
.js .ticket [data-seq='1'] { transform: scale(1.8) rotate(-5deg); }
.js .hero.play .ticket [data-seq='2'] { transition-delay: 1.12s; }
.js .hero.play .ticket [data-seq='3'] { transition-delay: 1.24s; }
.js .hero.play .ticket [data-seq='4'] { transition-delay: 1.36s; }
.js .hero.play .ticket [data-seq='5'] { transition-delay: 1.5s; }
.js .hero.play .ticket [data-seq='6'] { transition-delay: 1.62s; }
.js .hero.play .ticket [data-seq='7'] { transition-delay: 1.78s; }
.js .hero.play .ticket [data-seq='8'] { transition-delay: 1.94s; }
.js .hero.play .ticket [data-seq='8']:nth-of-type(2) { transition-delay: 2.04s; }
.js .hero.play .ticket [data-seq='8']:nth-of-type(3) { transition-delay: 2.14s; }
.js .hero.play .ticket [data-seq='9'] { transition-delay: 2.3s; }

/* La doble regla se dibuja de izquierda a derecha */
.ticket .rule { border-bottom: 3px double var(--ink); margin: 8px 0 6px; }
.js .ticket .rule { transform: scaleX(0); transform-origin: left; }
.js .hero.play .ticket .rule { transform: scaleX(1); transition: transform .45s cubic-bezier(.22,1,.36,1) 1.12s, opacity .3s ease 1.12s; }

/* Sello BETA en la esquina */
.beta-stamp {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  border: 1.5px solid var(--red); color: var(--red);
  font-size: .52rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 7px; transform: rotate(-8deg);
}
.js .ticket .beta-stamp { transform: scale(2) rotate(-14deg); }
.js .hero.play .ticket .beta-stamp { transform: rotate(-8deg); transition: opacity .28s ease 2.45s, transform .4s cubic-bezier(.2,1.5,.4,1) 2.45s; }

/* El código de barras se "escanea" */
.js .ticket .barcode { clip-path: inset(0 100% 0 0); }
.js .hero.play .ticket .barcode { clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.4,0,.2,1) 2.3s, opacity .01s 2.3s; }

/* Indicador de scroll */
.scroll-hint { display: block; width: 22px; height: 34px; margin: 44px auto 0; border: 1px solid var(--rule); border-radius: 12px; position: relative; }
.scroll-hint span { position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; margin-left: -1.5px; background: var(--muted); border-radius: 2px; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%,100% { transform: translateY(0); opacity: .3 } 50% { transform: translateY(9px); opacity: 1 } }
/* Borde rasgado. Los dientes usan --tear, no --paper: en noir el papel (#1e1c17)
   y el escritorio (#141311) están a ~10 puntos de luminancia y el troquelado se
   volvía invisible. --tear le da un crema propio en oscuro. */
.zz {
  height: 12px; background-color: var(--desk);
  background-image:
    linear-gradient(45deg, transparent 33.33%, var(--tear) 33.33%, var(--tear) 66.67%, transparent 66.67%),
    linear-gradient(-45deg, transparent 33.33%, var(--tear) 33.33%, var(--tear) 66.67%, transparent 66.67%);
  background-size: 14px 28px;
}
.zz-top { transform: rotate(180deg); }
.ticket-body { background: var(--paper); padding: 20px 22px 22px; position: relative; }
.ticket-head { text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 12px; }
.ticket-head .wm { font-family: var(--display); font-size: 26px; letter-spacing: 6px; }
.ticket-head .tag { font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ticket-meta { display: flex; justify-content: space-between; font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 12px 0 14px; }
.kpi-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.kpi { background: var(--paper-input); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; }
.kpi .lbl { font-size: .56rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); display: block; }
.kpi .val { font-size: 1.5rem; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }
.kpi .val.neg { color: var(--red); }
.kpi-side { display: flex; flex-direction: column; gap: 10px; }
.kpi-side .kpi .val { font-size: .95rem; }
.goal { margin-top: 12px; background: var(--paper-input); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; }
.bar { height: 10px; background: var(--box); border-radius: 999px; overflow: hidden; margin-top: 7px; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; width: 0; transform-origin: left; }
.goal-meta { font-size: .6rem; color: var(--muted); margin-top: 6px; display: block; }
.rows { margin-top: 12px; border-top: 1px dashed var(--rule); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--rule); font-size: .78rem; }
.row:last-child { border-bottom: none; }
.chip { font-size: .6rem; padding: 2px 8px; border-radius: 999px; }
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.out { color: var(--red); }
.amt.in { color: var(--green); }
.ticket-foot { border-top: 1px dashed var(--rule); margin-top: 12px; padding-top: 12px; text-align: center; }
.barcode { height: 30px; width: 78%; margin: 0 auto; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
.rate { display: block; font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin-top: 8px; }

/* ===== Sección problema: papeles sobre el escritorio =======================
   El fondo del body ya es --desk, así que .zz (dientes de papel sobre desk)
   funciona tal cual y cada nota se lee como un comprobante tirado ahí. */
.papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; align-items: start; }
.note { background: var(--paper); box-shadow: 0 10px 26px rgba(0,0,0,.14); border-radius: var(--radius-md); overflow: hidden; }
.note-body { position: relative; padding: 18px 20px 34px; }
.note h3 { margin-bottom: 8px; }
.note p { color: var(--muted); font-size: .88rem; margin: 0; }
/* Sello de caucho rojo: hace el argumento sin una palabra extra */
.sello {
  position: absolute; right: 14px; bottom: 10px;
  border: 1.5px solid var(--red); color: var(--red);
  font-size: .56rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 7px; transform: rotate(-9deg);
}

/* Reposo: cada papel cae con su propio ángulo y altura */
/* Mismo orden de funciones que el estado inicial, para que interpole parejo */
.n1 { --rest: translateY(0) rotate(-2.2deg); }
.n2 { --rest: translateY(10px) rotate(1.4deg); }
.n3 { --rest: translateY(-4px) rotate(-1deg); }
.note { transform: var(--rest); }

/* Caen y se acomodan al entrar en pantalla */
.js .papers .note { opacity: 0; transform: translateY(-26px) rotate(0deg); }
.js .papers.in .note {
  opacity: 1; transform: var(--rest);
  transition: opacity .4s ease, transform .65s cubic-bezier(.2,1.15,.35,1);
}
.js .papers.in .n1 { transition-delay: .05s; }
.js .papers.in .n2 { transition-delay: .17s; }
.js .papers.in .n3 { transition-delay: .29s; }
/* El sello se estampa cuando el papel ya aterrizó */
.js .papers .sello { opacity: 0; transform: scale(1.9) rotate(-16deg); }
.js .papers.in .sello {
  opacity: 1; transform: rotate(-9deg);
  transition: opacity .25s ease, transform .38s cubic-bezier(.2,1.5,.4,1);
}
.js .papers.in .n1 .sello { transition-delay: .55s; }
.js .papers.in .n2 .sello { transition-delay: .67s; }
.js .papers.in .n3 .sello { transition-delay: .79s; }

/* ===== Comprobante comparativo (un solo papel, dos columnas) ===== */
.compare { max-width: 720px; margin: 40px auto 0; filter: drop-shadow(0 14px 32px rgba(0,0,0,.16)); border-radius: var(--radius-md); overflow: hidden; }
.compare-body { background: var(--paper); padding: 22px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.compare-col { padding: 0 18px; }
.compare-col + .compare-col { border-left: 1px dashed var(--rule); }
.compare-h { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.compare-h.bad { color: var(--red); }
.compare-h.good { color: var(--green); }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { position: relative; font-size: .85rem; line-height: 1.45; color: var(--muted); padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.compare li:last-child { border-bottom: none; }
.compare-col:last-child li { color: var(--ink); }
.compare-col:last-child li::before { content: '✓ '; color: var(--green); }

/* Tachado: usamos text-decoration real porque cruza correctamente los ítems de
   varias líneas (en móvil todos envuelven). Se anima text-decoration-color, que
   sí es animable, en vez de dibujar una línea con un pseudo-elemento. */
.compare li.strike {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: transparent;
}
.js .compare.in li.strike { text-decoration-color: var(--red); transition: text-decoration-color .45s ease; }
.js .compare.in li.strike:nth-child(1) { transition-delay: .15s; }
.js .compare.in li.strike:nth-child(2) { transition-delay: .3s; }
.js .compare.in li.strike:nth-child(3) { transition-delay: .45s; }
.js .compare.in li.strike:nth-child(4) { transition-delay: .6s; }

@media (max-width: 620px) {
  .compare-body { grid-template-columns: 1fr; }
  .compare-col { padding: 0; }
  .compare-col + .compare-col { border-left: none; border-top: 1px dashed var(--rule); margin-top: 16px; padding-top: 16px; }
}

/* ===== Cómo funciona: una sola tira de recibo ==============================
   Los pasos son ítems impresos de arriba abajo, así el orden lo comunica el
   papel y no hay que apoyarse en los números para indicar secuencia. */
/* ===== Cómo funciona: argumento + recibo, en un solo bloque ================
   El copy y la línea de tiempo a la izquierda; el recibo a la derecha, que se
   "imprime" al entrar. Colores propios de la sección: el recibo es papel claro
   siempre, así que no depende del tema. */
.proc {
  --pc-paper: var(--hn-paper);
  --pc-ink: var(--hn-ink);
  --pc-sec: var(--hn-sec);
  --pc-sec2: var(--hn-sec);
  --pc-mono: var(--hn-mute);
  --pc-num: var(--hn-mute);
  --pc-green: var(--green);
  --pc-heading: var(--hn-ink);
  /* El botón de paso es el mismo componente de "¿Te suena?", que toma sus
     colores de estas variables. Sin redefinirlas acá el fondo caía a
     transparente, porque sólo existían dentro de .familiar. */
  --fb-btn: var(--ink);
  --fb-btn-text: var(--paper);
}
/* Hover propio de esta sección (el de .familiar es lavanda). */
@media (hover: hover) {
  .proc .familiar-cta:hover { background: #332f26; }
}
.theme-noir .proc { --pc-heading: #f2efe6; --pc-sec: #b8b3a4; --pc-mono: #9d9788; }

.proc-head { position: relative; margin-bottom: 40px; }
.proc-kicker {
  margin: 0 0 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-mono);
}
.proc-title { margin: 0; font-size: 42px; font-weight: 600; letter-spacing: -0.025em; color: var(--pc-heading); }
.proc-replay {
  position: absolute; right: 0; top: 0; cursor: pointer;
  background: none; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 999px;
  padding: 8px 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pc-mono);
  transition: color 200ms ease, border-color 200ms ease;
}
.proc-replay:hover { color: var(--pc-heading); border-color: var(--pc-heading); }

/* Una sola columna: el recibo que iba a la derecha se retiró. El texto se acota
   para que siga siendo legible, pero la línea de tiempo usa el ancho completo:
   si no, quedaba media tarjeta vacía. */
.proc-grid { display: block; }
.proc-sub, .proc-lead, .proc-note { max-width: 54ch; }
.proc-sub { margin: 0 0 16px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--pc-heading); line-height: 1.1; }
.proc-lead { margin: 0 0 34px; font-size: 17px; max-width: 46ch; color: var(--pc-sec); line-height: 1.55; }
.proc-note { margin: 26px 0 0; font-size: 15px; color: var(--pc-mono); max-width: 46ch; line-height: 1.5; }

/* Contador + línea de tiempo */
.proc-timer { display: flex; align-items: flex-start; gap: 28px; }
.pt-count { display: flex; align-items: baseline; gap: 8px; margin: 0; flex: none; }
.pt-count span {
  font-family: var(--mono); font-size: 72px; font-weight: 700; line-height: 0.85;
  color: var(--pc-heading); display: inline-block; transition: transform 140ms ease;
}
.pt-count span.is-tick { transform: scale(1.16); }
.pt-count small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-mono); }

.pt-track { flex: 1; min-width: 0; padding-top: 10px; }
.pt-rail { position: relative; height: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.pt-fill { position: absolute; inset: 0 auto 0 0; width: 0; height: 2px; background: var(--pc-green); }
.pt-runner { position: absolute; top: 1px; left: 0; width: 0; height: 0; }
.pt-runner i {
  position: absolute; right: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pc-green); box-shadow: 0 0 0 5px rgba(61,107,63,0.18); opacity: 0;
}
.pt-runner.is-on i { opacity: 1; }
.js .pt-fill, .js .pt-runner { transition: width 2600ms cubic-bezier(.4,0,.2,1); }
.js .pt-runner i { transition: opacity 300ms ease; }

.pt-stops { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.pt-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pt-stop:first-child { align-items: flex-start; }
.pt-stop:last-child { align-items: flex-end; }
.pt-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #d8d2c2;
  border: 2px solid var(--desk); margin-top: -7px; margin-bottom: 6px;
  transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.pt-stop.is-on .pt-dot { background: var(--pc-green); }
.pt-stop.is-pop .pt-dot { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(61,107,63,0.16); }
.pt-stop b { font-size: 13px; font-weight: 500; color: var(--pc-heading); }
.pt-lbl { font-size: 12.5px; color: var(--pc-mono); }
.js .pt-stop b, .js .pt-stop .pt-lbl { opacity: 0.45; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms ease; }
.js .pt-stop.is-on b, .js .pt-stop.is-on .pt-lbl { opacity: 1; transform: none; }

/* Paso a la siguiente sección: reusa el botón magnético de "¿Te suena?" */
.proc-next { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.proc-siguelabel { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pc-mono); }

/* Los estilos del recibo (.proc-receipt, .pr-*) salieron con él. */

@media (max-width: 900px) {
  .proc-title { font-size: 32px; }
  .proc-sub { font-size: 26px; }
  .pt-count span { font-size: 56px; }
  .pt-lbl, .pt-stop b { font-size: 11px; }
  .proc-replay { position: static; margin-top: 14px; }
}

/* Sin animación: todo pintado en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .js .pt-fill { width: 100% !important; transition: none !important; }
  .js .pt-runner { display: none !important; }
  .js .pt-stop b, .js .pt-stop .pt-lbl { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pt-stop .pt-dot { background: var(--pc-green) !important; transition: none !important; }
  .pt-count span { transition: none !important; }
}

/* ===== Hecho para el Perú =====================================================
   Lienzo crema con aurora viva detrás: tres blobs que se mueven solos y un
   spotlight que sigue al cursor. Las tarjetas son superficies claras tipo glass.
   Las fuentes son las del sitio: el spec pedía Figtree y JetBrains Mono, pero
   traerlas de Google contradice la página de Privacidad, que promete que ni las
   tipografías vienen de afuera. */
.peru {
  --pe-ink: var(--hn-ink);
  --pe-sec: var(--hn-sec);
  --pe-mute: var(--hn-mute);
  --pe-paper: var(--hn-paper);
  /* Los medios de pago usan los tokens del sitio, que ya suben en luminancia
     cuando el tema es oscuro. */
  --pe-yape: var(--pay-yape);
  --pe-plin: var(--pay-plin);
  --pe-efectivo: var(--pay-efectivo);
  --pe-tarjeta: var(--pay-tarjeta);
  --pe-transf: var(--hn-mute);
  --pe-ok: var(--green);
  /* El CTA reusa el componente de "¿Te suena?", que toma sus colores de aquí. */
  --fb-btn: var(--ink);
  --fb-btn-text: var(--paper);
}
.pe-card {
  position: relative; overflow: hidden;
  background: var(--hn-canvas); border-radius: 26px; padding: 68px 72px 72px;
  box-shadow: 0 30px 70px -40px rgba(27,26,22,.5);
}
.pe-inner { position: relative; z-index: 1; }

/* Aurora de fondo */
.pe-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(13px); will-change: transform; }
.pe-blob-1 { width: 620px; height: 620px; top: -220px; left: -180px; background: radial-gradient(circle, rgba(106,79,189,.20), transparent 68%); }
.pe-blob-2 { width: 680px; height: 680px; bottom: -280px; right: -200px; background: radial-gradient(circle, rgba(47,125,99,.16), transparent 68%); }
.pe-blob-3 { width: 460px; height: 460px; top: 34%; right: 12%; background: radial-gradient(circle, rgba(176,125,42,.14), transparent 68%); }
.pe-spot {
  position: absolute; width: 720px; height: 720px; top: 0; left: 0; pointer-events: none;
  margin: -360px 0 0 -360px; opacity: 0; transition: opacity 420ms ease;
  background: radial-gradient(circle, rgba(255,255,255,.6), transparent 62%);
}
.pe-spot.is-on { opacity: 1; }

/* Encabezado */
.pe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.pe-head-copy { max-width: 62ch; }
.pe-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 60%, transparent); border: 1px solid var(--hn-border);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pe-mute);
}
.pe-flag {
  width: 20px; height: 13px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, #c8102e 0 33.33%, #faf8f2 33.33% 66.66%, #c8102e 66.66%);
}
.pe-title { margin: 0 0 42px; font-size: 52px; line-height: 1; letter-spacing: -.034em; font-weight: 600; color: var(--pe-ink); }
/* "traducida" lleva una barra que se traza sola. */
.pe-underline { position: relative; display: inline-block; }
.pe-underline i {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6a4fbd, #2f7d63);
  transform: scaleX(0); transform-origin: left;
}
.js .pe-underline.is-in i { transform: scaleX(1); transition: transform 760ms cubic-bezier(.16,1,.3,1); }
/* "Hunu" va con la tipografía del wordmark del menú. Bungee Inline corre grande,
   así que se baja un punto para que no domine sobre el resto del título. */
.pe-brand { font-family: var(--display); font-size: .88em; letter-spacing: .03em; }
/* La glosa va colgada de la palabra, no del título: alineada bajo "Hunu" se lee
   como su traducción, sin necesidad de explicarlo con una frase. */
/* La glosa va posicionada, pero en el flujo del texto queda pegada a "Hunu" y
   un lector de pantalla leía "Hunumillón" de corrido. Se oculta a la asistencia
   y el significado se ofrece aparte, separado por una coma. */
.solo-lectura {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pe-gloss {
  position: absolute; left: 0; top: 100%; margin-top: 10px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 400;
  letter-spacing: .18em; text-transform: lowercase; white-space: nowrap;
  color: var(--hn-mute-aa);
}
.pe-lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--pe-sec); }
.pe-replay {
  flex: none; cursor: pointer; background: color-mix(in srgb, var(--paper) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; padding: 9px 15px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pe-mute);
  transition: color 200ms ease, border-color 200ms ease;
}
.pe-replay:hover { color: var(--pe-ink); border-color: var(--pe-ink); }

.pe-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--hn-mute-aa);
}

/* Grilla principal. Quedó una sola tarjeta, así que va en una columna con un
   ancho máximo: estirada a todo lo ancho del lienzo se veía desangelada. */
.pe-grid { display: grid; grid-template-columns: minmax(0, 560px); gap: 24px; }

.pe-meta {
  background: linear-gradient(160deg, var(--hn-paper), color-mix(in srgb, var(--hn-paper) 82%, var(--desk)));
  border: 1px solid var(--hn-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease, border-color 320ms ease;
}

/* Cierra la tarjeta: cuánto falta, en palabras. */
.pe-meta-nota {
  margin: 18px 0 0; padding-top: 16px; font-size: 14.5px; line-height: 1.5;
  color: var(--hn-mute-aa); border-top: 1px solid var(--hn-border);
}
.pe-meta-nota strong {
  font-family: var(--mono); font-weight: 700; color: var(--hn-ink);
  font-variant-numeric: tabular-nums;
}
.pe-shine {
  position: absolute; top: 0; bottom: 0; left: -45%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.pe-shine.is-running { animation: pe-sweep 1200ms ease-out forwards; }
@keyframes pe-sweep {
  0% { left: -45%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Avance del objetivo de ahorro. Reemplaza a la tarjeta de medios de pago.
   El verde sale de --green, que ya sube en luminancia en tema oscuro. */
.pe-meta { border-radius: 20px; padding: 24px 26px; align-self: center; }
.pe-meta-barra { display: flex; align-items: center; gap: 16px; margin: 18px 0 20px; }
.pe-meta-riel {
  flex: 1; min-width: 0; height: 14px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.pe-meta-riel i {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 78%, var(--ink)), var(--green));
  transition: width 1400ms cubic-bezier(.16,1,.3,1);
}
.pe-meta-pct {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-family: var(--mono); font-size: 12px; color: var(--hn-sec);
}
.pe-meta-pct b { font-size: 15px; font-weight: 600; color: var(--hn-ink); font-variant-numeric: tabular-nums; }
.pe-meta-cifras { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pe-meta-cifras p { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pe-meta-cifras .is-der { text-align: right; }
.pe-meta-cifras strong {
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  color: var(--hn-ink); font-variant-numeric: tabular-nums;
}
.pe-meta-cifras .pe-label { display: inline; }

.pe-next { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* --hn-mute-aa y no --pe-mute: sobre el lienzo, --pe-mute daba 4.04 y no llega
   a AA. Es el mismo token que ya nos había fallado en los rótulos chicos. */
.pe-siguelabel { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--hn-mute-aa); }
@media (hover: hover) {
  .peru .familiar-cta:hover { background: #332f26; box-shadow: 0 20px 40px -18px rgba(27,26,22,.55); }
  .peru .familiar-cta:hover .fc-arrow { transform: translateX(6px); }
}

/* Reveal escalonado */
.js .peru [data-pe] { opacity: 0; transform: translateY(24px); }
.js .peru [data-pe].is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 780ms cubic-bezier(.16,1,.3,1);
}

@media (max-width: 900px) {
  .pe-card { padding: 36px 22px 44px; border-radius: 18px; }
  .pe-head { flex-direction: column; gap: 16px; }
  .pe-title { font-size: 34px; }
  .pe-grid { grid-template-columns: 1fr; gap: 18px; }
  .pe-blob, .pe-spot { display: none; }
}

/* Sin animación: todo en su estado final, sin loops. */
@media (prefers-reduced-motion: reduce) {
  .js .peru [data-pe] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .pe-underline i { transform: scaleX(1) !important; transition: none !important; }
  .pe-shine { animation: none !important; }
  .pe-shine { display: none !important; }
  .pe-meta-riel i { transition: none !important; }
  .pe-blob, .pe-spot { display: none !important; }
}

@media (max-width: 760px) {
  .peru-grid { grid-template-columns: 1fr; }
  .board { padding: 24px 22px; }
}

/* ===== Features: una destacada + el resto compacto =========================
   Seis tarjetas iguales daban el mismo peso a la conciliación (el
   diferenciador) y a exportar CSV. Acá la jerarquía la hace el tamaño, no el
   color: el bloque grande va en papel para no competir con el pizarrón. */
.feat-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.feat-main { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 26px 28px; }
.feat-main h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feat-main > p { color: var(--muted); font-size: .92rem; margin: 0 0 18px; max-width: 46ch; }

/* Mini demo del descuadre */
.feat-demo { background: var(--paper-input); border: 1px solid var(--rule); padding: 14px 16px; }
.feat-demo-label { display: block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.feat-demo-rows { margin: 0; }
.feat-demo-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--rule); font-size: .84rem; }
.feat-demo-rows dt { color: var(--muted); margin: 0; }
.feat-demo-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.feat-demo-rows .is-diff { border-bottom: none; border-top: 3px double var(--ink); margin-top: 4px; padding-top: 9px; }
.feat-demo-rows .is-diff dt { color: var(--ink); }
.feat-demo-rows .is-diff dd { color: var(--red); }

.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li { padding: 13px 0; border-bottom: 1px dashed var(--rule); }
.feat-list li:first-child { padding-top: 0; }
.feat-list li:last-child { border-bottom: none; }
.feat-list h3 { margin-bottom: 4px; }
.feat-list p { margin: 0; color: var(--muted); font-size: .84rem; }

/* Entrada: primero la destacada, luego la lista en cascada */
.js .feat-grid .feat-main,
.js .feat-grid .feat-list li { opacity: 0; transform: translateY(12px); }
.js .feat-grid.in .feat-main,
.js .feat-grid.in .feat-list li {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.js .feat-grid.in .feat-list li:nth-child(1) { transition-delay: .12s; }
.js .feat-grid.in .feat-list li:nth-child(2) { transition-delay: .2s; }
.js .feat-grid.in .feat-list li:nth-child(3) { transition-delay: .28s; }
.js .feat-grid.in .feat-list li:nth-child(4) { transition-delay: .36s; }
.js .feat-grid.in .feat-list li:nth-child(5) { transition-delay: .44s; }

@media (max-width: 760px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat-main { padding: 20px 20px; }
}

/* ===== "Sigue": el hilo entre páginas =====================================
   Al partir el scroll único, cada página terminaba en un callejón sin salida.
   Este bloque devuelve el recorrido que antes daba el propio scroll. */
.next { max-width: var(--wrap); margin: 0 auto; padding: 0 20px 72px; }
.next-link {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease;
}
.next-link:hover { border-color: var(--ink); transform: translateY(-2px); }
.next-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.next-title { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; }
.next-arrow { font-size: 1.3rem; color: var(--muted); }
.next-link:hover .next-arrow { color: var(--ink); }

/* El pie es el índice del sitio: arriba los enlaces se ocultan en móvil, así que
   sin esto no habría manera de moverse entre páginas desde un celular. */
.footer-map ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px dashed var(--rule); }
.footer-map a { color: var(--muted); text-decoration: none; font-size: .85rem; }
.footer-map a:hover { color: var(--ink); }
.footer-map [aria-current='page'] { color: var(--ink); font-weight: 600; font-size: .85rem; }
.nav-link.is-here { color: var(--ink); }

/* ===== Apariencia ============================================================
   Los colores de cada paleta van fijos a propósito: son datos, no tema. Tienen
   que mostrar a qué paleta llevan, no la que está puesta ahora mismo.
   El lienzo en cambio usa el token compartido —el spec lo pedía en #17131f
   fijo— porque tocar una paleta repinta la página de verdad, y con un lienzo
   fijo ese cambio no se vería: justamente lo que promete el lede. */
.apar[data-pal-view="hunu"] { --ap-bg: #f3efe4; --ap-accent: #3f6b46; --ap-second: #c0492f; }
.apar[data-pal-view="oceano"] { --ap-bg: #eaf2f5; --ap-accent: #2f7d8f; --ap-second: #1f5f7a; }
.apar[data-pal-view="lavanda"] { --ap-bg: #efeaf7; --ap-accent: #7a6bb5; --ap-second: #b06aa8; }
.apar[data-pal-view="terracota"] { --ap-bg: #f6ece2; --ap-accent: #c98a4b; --ap-second: #3f6b57; }
.apar[data-pal-view="bosque"] { --ap-bg: #eef3ea; --ap-accent: #4e7350; --ap-second: #b08a2a; }
.apar[data-pal-view="citrico"] { --ap-bg: #f7f3e2; --ap-accent: #7f9b3f; --ap-second: #d97b21; }
.apar[data-pal-view="rosa"] { --ap-bg: #f9edf1; --ap-accent: #c9557f; --ap-second: #6a4fbd; }
.apar[data-pal-view="grafito"] { --ap-bg: #f0eeee; --ap-accent: #6b6b73; --ap-second: #a35a63; }

/* El CTA reusa el componente de "¿Te suena?", que toma sus colores de estas
   variables: sin definirlas acá el fondo caía a transparente. El spec lo pedía
   claro sobre lienzo oscuro; como el lienzo sigue al tema, va oscuro como en el
   resto de las secciones. */
.apar { --fb-btn: var(--ink); --fb-btn-text: var(--paper); }
.ap-canvas { position: relative; }
/* Resplandor que sigue al acento de la paleta activa. */
.ap-glow {
  position: absolute; top: -220px; right: -160px; width: 640px; height: 640px;
  border-radius: 50%; pointer-events: none; filter: blur(10px);
  background: radial-gradient(circle, color-mix(in srgb, var(--ap-accent) 32%, transparent), transparent 68%);
  transition: background 500ms ease;
}

.ap-head { max-width: 60ch; margin-bottom: 38px; }
.ap-title { line-height: 1.02; margin-bottom: 16px; }
.ap-lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--hn-sec); }
.ap-note { margin: 22px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--hn-mute-aa); max-width: 52ch; }

.ap-grid { display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: start; }

/* Selector */
.ap-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
  padding: 15px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font: inherit; color: var(--hn-sec);
  transition: background 260ms ease, border-color 260ms ease, transform 260ms ease,
              box-shadow 260ms ease, color 260ms ease;
}
.ap-dots { display: inline-flex; flex: none; }
.ap-dots i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.ap-dots i + i { margin-left: -7px; }
.ap-name { font-size: 17px; }
@media (hover: hover) {
  .ap-opt:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-2px);
  }
}
.ap-opt[aria-pressed="true"] {
  color: var(--hn-ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 28%, transparent);
}
.ap-opt:focus-visible { outline: 2px solid var(--hn-ink); outline-offset: 2px; }

/* Vista previa: se retinta con la paleta activa. */
.ap-prev {
  background: var(--ap-bg); border-radius: 22px; padding: 24px;
  box-shadow: 0 28px 60px -34px rgba(0,0,0,.5);
  color: #17131f;
  transition: background 500ms ease, transform 420ms cubic-bezier(.16,1,.3,1);
}
.ap-prev.is-beat { transform: scale(.985); }
.ap-prev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ap-prev-lbl {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: color-mix(in srgb, #17131f 62%, var(--ap-bg));
}
.ap-prev-pill {
  font-family: var(--mono); font-size: 11px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--ap-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ap-accent) 34%, transparent);
  color: color-mix(in srgb, var(--ap-accent) 80%, #17131f);
  transition: background 500ms ease, border-color 500ms ease, color 500ms ease;
}
.ap-prev-amount {
  margin: 6px 0 20px; font-family: var(--mono); font-size: 34px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #17131f; line-height: 1;
}
.ap-prev-chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.ap-prev-chart i {
  display: block; flex: 1; height: 0; border-radius: 4px 4px 2px 2px;
  background: var(--ap-accent);
  transition: height 800ms cubic-bezier(.16,1,.3,1), background 500ms ease;
}
.ap-prev-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ap-prev-chips span {
  font-family: var(--mono); font-size: 11.5px; padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--ap-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ap-accent) 34%, transparent);
  color: color-mix(in srgb, var(--ap-accent) 78%, #17131f);
  transition: background 500ms ease, border-color 500ms ease, color 500ms ease;
}
/* El acento puro no alcanza AA con el texto claro: cinco de las ocho paletas
   quedaban entre 2.49 y 4.16:1, y ni cambiando el texto a tinta se arreglaba
   (Océano, Lavanda y Rosa siguen en luminancia media). Oscureciendo el acento al
   64% el peor caso sube a 4.79:1. Los chips y las barras conservan el acento
   puro, que ahí sí sirve. */
.ap-prev-btn {
  display: block; text-align: center; padding: 13px 18px; border-radius: 12px;
  background: color-mix(in srgb, var(--ap-accent) 64%, #17131f); color: var(--ap-bg);
  font-size: 15px; font-weight: 600;
  transition: background 500ms ease, color 500ms ease;
}

.ap-next { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Reveal */
.js .apar [data-ap] { opacity: 0; transform: translateY(22px); }
.js .apar [data-ap].is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 780ms cubic-bezier(.16,1,.3,1);
}
.js .ap-opt { opacity: 0; transform: translateY(12px) scale(.94); }
.js .ap-opt.is-in {
  opacity: 1; transform: none;
  transition: opacity 320ms ease, transform 460ms cubic-bezier(.34,1.5,.5,1);
}

@media (max-width: 900px) {
  .ap-grid { grid-template-columns: 1fr; gap: 28px; }
  .ap-opt { padding: 13px 15px; gap: 10px; }
  .ap-name { font-size: 15px; }
  .ap-glow { display: none; }
}
@media (max-width: 460px) { .ap-opts { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .js .apar [data-ap], .js .ap-opt { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ap-prev, .ap-prev-chart i, .ap-glow { transition: none !important; }
}


/* ===== Captura: el cronómetro =============================================
   Los 5 segundos del titular, desglosados. Las posiciones de los puntos son
   proporcionales al tiempo (0s=0%, 2s=40%, 4s=80%, 5s=100%), así la línea se
   lee como una escala real y no como una decoración. */
/* Los estilos del contador viejo (.timer) salieron con la fusión: el bloque
   nuevo usa .proc-timer/.pt-*. */

/* ===== Grids ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .9rem; margin: 0; }
.card .num { font-family: var(--display); font-size: 1.4rem; color: var(--muted); display: block; margin-bottom: 10px; }

/* Los tres pilares de confianza (sección 6). Van sobre el fondo oscuro de
   .privacy, así que heredan el papel como texto y el verde-sobre-tinta. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }
.pillar {
  padding: 24px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
}
.pillar-ico {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--paper) 10%, transparent); color: var(--green-on-ink);
}
.pillar-ico svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--paper); }
.pillar p { margin: 0; font-size: .9rem; line-height: 1.5; color: color-mix(in srgb, var(--paper) 72%, transparent); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* ===== Conoce a HUNU ==========================================================
   Lista numerada a la izquierda y card de reportes a la derecha. El spec traía
   colores fijos (#eae2f0 el lienzo, #241d30 la tinta, #4e7350 el verde); se
   mapean a los tokens del sitio para que la sección siga las ocho paletas y el
   modo oscuro, como el resto. El verde de datos usa --green, que ya sube en
   luminancia cuando el tema es oscuro. */
.conoce {
  --cn-ink: var(--hn-ink);
  --cn-sec: var(--hn-sec);
  --cn-mute: var(--hn-mute);
  --cn-paper: var(--hn-paper);
  --cn-green: var(--green);
  --cn-bar: color-mix(in srgb, var(--green) 42%, var(--hn-canvas));
  --fb-btn: var(--ink);
  --fb-btn-text: var(--paper);
}
.cn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.cn-title { max-width: 22ch; line-height: 1.02; }

.cn-grid { display: grid; grid-template-columns: 1fr 468px; gap: 44px; align-items: start; }

/* Lista numerada */
.cn-list { list-style: none; margin: 0; padding: 0; }
.cn-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  padding: 15px 10px 15px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 8px;
  transition: background 220ms ease, padding-left 220ms ease;
}
.cn-row:last-child { border-bottom: 0; }
.cn-i { font-family: var(--mono); font-size: 12px; color: var(--hn-mute-aa); transition: color 220ms ease; }
.cn-t { font-size: 17.5px; color: var(--cn-ink); line-height: 1.4; }
.cn-ok { color: var(--cn-green); font-size: 15px; }
@media (hover: hover) {
  .cn-row:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); padding-left: 10px; }
  .cn-row:hover .cn-i { color: var(--cn-green); }
}

/* Card de reportes */
.cn-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--cn-paper), color-mix(in srgb, var(--cn-paper) 80%, var(--hn-canvas)));
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 20px; padding: 22px 24px 20px;
  box-shadow: 0 22px 50px -34px rgba(36,29,48,.5);
}
.cn-card-head { display: flex; justify-content: space-between; gap: 12px; }
.cn-tag { color: var(--cn-green); }

/* Gráfico */
.cn-chart {
  position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  height: 186px; align-items: end; margin-top: 20px;
}
.cn-bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.cn-bar i {
  display: block; width: 100%; height: 0; background: var(--cn-bar);
  border-radius: 6px 6px 3px 3px; transform-origin: bottom;
  transition: height 900ms cubic-bezier(.16,1,.3,1), filter 220ms ease, transform 220ms ease;
}
.cn-bar.is-peak i { background: var(--cn-green); }
@media (hover: hover) {
  .cn-bar:hover i { filter: brightness(.92); transform: scaleY(1.03); }
  .cn-bar:hover .cn-tip { opacity: 1; transform: translateY(0); }
}
/* Tooltip del monto */
.cn-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
  background: var(--ink); color: var(--paper); border-radius: 8px;
  padding: 5px 9px; font-family: var(--mono); font-size: 11px; white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
/* Línea de meta */
.cn-goal {
  position: absolute; left: 0; right: 0; bottom: 74%; height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 34%, transparent);
  opacity: 0; transition: opacity 400ms ease;
}
.cn-goal.is-in { opacity: 1; }
/* A la izquierda: a la derecha la tapaba la barra de julio, que es la más alta. */
.cn-goal span {
  position: absolute; left: 0; bottom: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hn-mute-aa);
}

.cn-months {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-family: var(--mono); font-size: 11px; color: var(--hn-mute-aa); text-align: center;
}
.cn-months .is-now { color: var(--cn-ink); }
.cn-bar:hover ~ .cn-months { }

/* Pie de la card */
.cn-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.cn-amount { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; }
.cn-amount > span:first-child {
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--cn-ink); line-height: 1;
}
.cn-badge {
  font-family: var(--mono); font-size: 11px; color: var(--cn-green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border-radius: 999px; padding: 4px 9px;
}
.js .cn-badge { opacity: 0; transform: scale(.85); }
.js .cn-badge.is-in { opacity: 1; transform: scale(1); transition: opacity 300ms ease, transform 460ms cubic-bezier(.34,1.5,.5,1); }
.cn-goalring { display: flex; align-items: center; gap: 12px; }
.cn-pct { margin: 4px 0 0; font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--cn-ink); font-variant-numeric: tabular-nums; }
.cn-ring { width: 48px; height: 48px; flex: none; transform: rotate(-90deg); }
.cn-ring-track { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
.cn-ring-fill { stroke: var(--cn-green); }

.cn-next { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (hover: hover) { .conoce .familiar-cta:hover { background: #332a44; box-shadow: 0 20px 40px -18px rgba(36,29,48,.6); } }

/* Entrada */
.js .conoce [data-cn] { opacity: 0; transform: translateY(22px); }
.js .conoce [data-cn].is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 780ms cubic-bezier(.16,1,.3,1);
}
.js .cn-row { opacity: 0; transform: translateX(-14px); }
.js .cn-row.is-in {
  opacity: 1; transform: none;
  transition: opacity 460ms cubic-bezier(.16,1,.3,1), transform 520ms cubic-bezier(.16,1,.3,1);
}
.js .cn-ok { opacity: 0; transform: scale(.4); display: inline-block; }
.js .cn-ok.is-in { opacity: 1; transform: scale(1); transition: opacity 240ms ease, transform 420ms cubic-bezier(.34,1.5,.5,1); }

@media (max-width: 900px) {
  .cn-head { flex-direction: column; gap: 16px; }
  .cn-grid { grid-template-columns: 1fr; gap: 28px; }
  .cn-chart { height: 150px; gap: 8px; }
  .cn-months { gap: 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .conoce [data-cn], .js .cn-row, .js .cn-ok, .js .cn-badge {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .cn-bar i, .cn-goal, .cn-ring-fill { transition: none !important; }
}

/* ¿Te suena familiar? (rediseño chat). Paleta propia lavanda; el fondo lo
   hereda de la página. Las burbujas son siempre claras (texto oscuro), pero el
   texto que va sobre el fondo (títulos, apoyo) se aclara en noir para no
   desaparecer sobre el fondo oscuro. */
.familiar {
  --fb-surface: #f7f4fa;
  --fb-border: rgba(43, 35, 56, 0.07);
  --fb-bubble-text: #241d30;
  --fb-heading: #241d30;
  --fb-secondary: #6f6580;
  --fb-mono-muted: #a294b5;
  --fb-btn: #241d30;
  --fb-btn-text: #f7f4fa;
}
.theme-noir .familiar { --fb-heading: #f2ecf7; --fb-secondary: #b9add0; }

/* Ritmo vertical constante entre bloques. */
.familiar-wrap { display: flex; flex-direction: column; gap: 52px; }

/* 1 · Encabezado a la izquierda */
.familiar-head { max-width: 620px; }
.familiar-kicker {
  margin: 0 0 18px; font-family: var(--mono); font-size: .72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fb-mono-muted);
}
.familiar-title {
  margin: 0; font-size: 60px; line-height: 1.02; letter-spacing: -0.025em;
  font-weight: 600; color: var(--fb-heading);
}

/* 2 · Hilo de burbujas */
.familiar-thread { display: flex; flex-direction: column; gap: 16px; }
.fb-row { display: flex; }
.fb-left { justify-content: flex-start; }
.fb-right { justify-content: flex-end; }
.fb-indent { padding-left: 56px; }
.fb-indent-r { padding-right: 40px; }
.fb {
  max-width: 620px; min-width: 0; padding: 22px 28px;
  background: var(--fb-surface); border: 1px solid var(--fb-border);
  color: var(--fb-bubble-text); font-size: 25px; font-weight: 500; line-height: 1.3;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.fb-left .fb { border-radius: 22px 22px 22px 6px; }
.fb-right .fb { border-radius: 22px 22px 6px 22px; }
@media (hover: hover) {
  .fb:hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 18px 34px -22px rgba(43, 35, 56, 0.7);
    border-color: rgba(91, 63, 168, 0.34);
  }
}

/* 3 · Puntos de "escribiendo…" */
.fb-typing { display: flex; gap: 6px; padding-left: 4px; }
.fb-typing span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fb-mono-muted);
  opacity: 0.3; transition: opacity 380ms ease, transform 380ms ease;
}
.fb-typing span.is-on { opacity: 1; transform: translateY(-3px); }

/* 4 · Cierre centrado */
.familiar-close { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.familiar-strong { margin: 0; font-size: 44px; font-weight: 600; color: var(--fb-heading); line-height: 1.05; text-transform: none; letter-spacing: -0.01em; }
.familiar-sub { margin: 0; max-width: 520px; font-size: 19px; color: var(--fb-secondary); line-height: 1.5; }
.familiar-cta-wrap { margin-top: 6px; }
.familiar-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 18px 32px; border-radius: 999px; background: var(--fb-btn); color: var(--fb-btn-text);
  font-family: var(--mono); font-size: .95rem; letter-spacing: .04em; text-decoration: none;
  transition: transform 120ms ease, background 260ms ease;
}
.familiar-cta .fc-arrow { transition: transform 260ms ease; }
@media (hover: hover) {
  .familiar-cta:hover { background: #3b2f52; }
  .familiar-cta:hover .fc-arrow { transform: translateX(5px); }
}
/* Destello que cruza en hover. */
.fc-shine {
  position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (hover: hover) {
  .familiar-cta:hover .fc-shine { animation: fc-sweep 700ms ease; }
}
@keyframes fc-sweep { from { left: -45%; } to { left: 110%; } }
.familiar-siguelabel {
  margin: 0; font-family: var(--mono); font-size: .72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fb-mono-muted);
}

/* Entrada: los bloques parten desplazados y aparecen al entrar en viewport.
   Las burbujas/CTA escalan un pelo; los textos solo suben. */
.familiar [data-anim] { opacity: 0; }
.familiar .fb-row, .familiar .fb-typing, .familiar .familiar-cta-wrap {
  transform: translateY(22px) scale(0.985);
  transition: opacity 620ms cubic-bezier(.16,1,.3,1), transform 620ms cubic-bezier(.16,1,.3,1);
}
.familiar .fb-text { transform: translateY(16px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.familiar [data-anim].is-in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .familiar-title { font-size: 40px; }
  .familiar-strong { font-size: 32px; }
  .fb-left, .fb-right { justify-content: flex-start; }
  .fb-indent, .fb-indent-r { padding-left: 0; padding-right: 0; }
  .fb { max-width: 100%; font-size: 20px; }
}

/* Con reduce: todo en su estado final, sin transiciones ni puntos animados. */
@media (prefers-reduced-motion: reduce) {
  .familiar [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fb-typing span { opacity: 0.6 !important; transform: none !important; transition: none !important; }
  .familiar-cta, .fc-shine, .fc-arrow { transition: none !important; animation: none !important; }
}

/* Peru section highlight */
/* La regla vieja pintaba .peru de otro color y su borde, así que al entrar a
   "Para Perú" cambiaba el fondo de la página. El color ahora lo pone el lienzo,
   igual que en las demás secciones. */
.flagline { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }

/* Privacy */
/* La sección invierte: su fondo es --ink, así que todo lo de adentro usa
   --paper para el texto y --green-on-ink para el verde. Con var(--green) el
   check quedaba ilegible en noir, donde este fondo es casi blanco. */
.privacy { background: var(--ink); color: var(--paper); }
.privacy h2, .privacy .eyebrow { color: var(--paper); }
.privacy .lead { color: color-mix(in srgb, var(--paper) 72%, transparent); }

.guarantee { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }

/* Sello de garantía */
.seal {
  flex: 0 0 auto; width: 172px; height: 172px; border-radius: 50%;
  border: 3px solid var(--green-on-ink); color: var(--green-on-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform: rotate(-6deg);
}
.seal-mark { font-family: var(--display); font-size: 1.35rem; letter-spacing: 2px; }
.seal-sub { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; line-height: 1.5; }

/* Se estampa al entrar */
.js .guarantee .seal { opacity: 0; transform: scale(1.7) rotate(-16deg); }
.js .guarantee.in .seal {
  opacity: 1; transform: rotate(-6deg);
  transition: opacity .3s ease .1s, transform .45s cubic-bezier(.2,1.5,.4,1) .1s;
}

.promises { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 260px; }
.promises li { padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--paper) 26%, transparent); }
.promises li:last-child { border-bottom: none; }
.promises b { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 3px; }
.promises span { color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: .88rem; }

.js .guarantee .promises li { opacity: 0; transform: translateY(10px); }
.js .guarantee.in .promises li {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.js .guarantee.in .promises li:nth-child(1) { transition-delay: .38s; }
.js .guarantee.in .promises li:nth-child(2) { transition-delay: .48s; }
.js .guarantee.in .promises li:nth-child(3) { transition-delay: .58s; }

@media (max-width: 620px) {
  .guarantee { gap: 26px; justify-content: center; }
  .seal { width: 140px; height: 140px; }
}

/* Detalle de datos: la boleta a dos columnas de la sección de privacidad. Sigue
   el molde de .strip (doble filete arriba y abajo, total al pie) porque es el
   mismo gesto: un comprobante que se lee de un vistazo. */
.ledger { max-width: 680px; margin: 48px auto 0; filter: drop-shadow(0 14px 32px rgba(0,0,0,.16)); border-radius: var(--radius-md); overflow: hidden; }
.ledger-body { background: var(--paper); color: var(--ink); padding: 20px 26px 22px; }
.ledger-head {
  margin: 0 0 6px; text-align: center;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  border-bottom: 3px double var(--ink); padding-bottom: 10px;
}
.ledger-cols { display: grid; grid-template-columns: 1fr 1fr; }
.ledger-col { padding: 14px 18px; }
.ledger-col + .ledger-col { border-left: 1px dashed var(--rule); }
.ledger-h { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.ledger-h.yes { color: var(--green); }
.ledger-h.no { color: var(--red); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
  font-size: .84rem; line-height: 1.45;
  /* --muted a secas se queda en 4.33:1 sobre el papel en modo claro, debajo del
     mínimo AA, en cinco de las ocho paletas. Se acerca a la tinta lo justo. */
  color: color-mix(in srgb, var(--muted) 70%, var(--ink));
  padding: 8px 0; border-bottom: 1px dashed var(--rule);
}
.ledger li:last-child { border-bottom: none; }
/* El signo hace el trabajo de la etiqueta: se entiende sin leer el encabezado. */
.ledger-col:first-child li::before { content: '+ '; color: var(--green); }
.ledger-col:last-child li::before { content: '− '; color: var(--red); }
.ledger-total {
  display: flex; justify-content: space-between; gap: 12px; margin: 0;
  border-top: 3px double var(--ink); padding-top: 12px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}

/* Va sobre el fondo oscuro de .privacy, así que hereda el papel, no la tinta. */
.privacy-note {
  max-width: 680px; margin: 22px auto 0; text-align: center;
  font-size: .84rem; line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

@media (max-width: 620px) {
  .ledger-cols { grid-template-columns: 1fr; }
  .ledger-col { padding: 14px 0; }
  .ledger-col + .ledger-col { border-left: none; border-top: 1px dashed var(--rule); }
}

/* FAQ */
.faq details { border-bottom: 1px dashed var(--rule); padding: 16px 0; }
.faq summary { cursor: pointer; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--muted); font-size: .9rem; margin: 10px 0 0; max-width: 68ch; }

/* Waitlist form */
.waitlist { max-width: 520px; }
.field { display: flex; gap: 10px; flex-wrap: wrap; }
.field input {
  flex: 1; min-width: 220px; font-family: var(--mono); font-size: .95rem;
  color: var(--ink); background: var(--paper-input); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 14px;
}
.field input:focus { outline: none; border-color: var(--ink); }
.consent { font-size: .72rem; color: var(--muted); margin: 12px 0 0; }
.consent a { color: inherit; }
.form-msg { font-size: .82rem; margin: 12px 0 0; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--red); }

/* Footer */
.footer { border-top: 1px solid var(--rule); padding: 36px 0; font-size: .78rem; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer a { color: var(--muted); }

/* Scroll reveal — sólo oculta si hay JS (.js lo pone el script del <head>).
   Si el JS falla o está desactivado, el contenido se ve igual. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  section { padding: 60px 0; }
  .nav-link.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar i { transition: none; }
  /* Sin animación de entrada: todo visible de una */
  .js .hero [data-in],
  .js .ticket [data-seq],
  .js .hero h1 .stamp-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .ticket,
  .js .ticket .barcode { clip-path: none !important; transition: none !important; }
  .js .ticket .rule { transform: scaleX(1) !important; }
  .scroll-hint span { animation: none; }
  /* Papeles y comparación: en reposo, sin caída ni tachado animado */
  .js .papers .note { opacity: 1 !important; transform: var(--rest) !important; transition: none !important; }
  .js .papers .sello { opacity: 1 !important; transform: rotate(-9deg) !important; transition: none !important; }
  .js .compare li.strike { text-decoration-color: var(--red) !important; transition: none !important; }
  .js .strip .step,
  .js .strip .strip-total { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .wallet .wallet-bar i { transform: scaleX(1) !important; transition: none !important; }
  .js .feat-grid .feat-main,
  .js .feat-grid .feat-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .guarantee .seal { opacity: 1 !important; transform: rotate(-6deg) !important; transition: none !important; }
  .js .guarantee .promises li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .timer .timer-line::after { transform: scaleX(1) !important; transition: none !important; }
  .js .timer .timer-line i { background: var(--green) !important; transition: none !important; }
  .js .timer .timer-steps li { opacity: 1 !important; transition: none !important; }
  .board-live.is-live::before { animation: none; }
}

/* ===== Sistema visual compartido de las secciones ===========================
   Las secciones se fueron construyendo por separado y quedaron con tres escalas
   de título, dos paletas y un solo lienzo. Esto las unifica sobre el
   tratamiento de "Para Perú": lienzo crema con aurora, kicker en píldora y una
   sola escala tipográfica. */
/* Derivados de los tokens del tema, no colores fijos: si no, las ocho paletas y
   el modo claro/oscuro dejan de repintar las secciones, que es justo lo que
   promete la página de Apariencia. */
:root {
  --hn-canvas: color-mix(in srgb, var(--paper) 25%, var(--desk));
  --hn-paper: var(--paper-input);
  --hn-ink: var(--ink);
  --hn-sec: color-mix(in srgb, var(--muted) 55%, var(--ink));
  --hn-mute: var(--muted);
  /* Para etiquetas y cifras chicas: --muted a secas se queda en 3.77:1 sobre el
     lienzo en claro, debajo del mínimo AA, en las ocho paletas. */
  --hn-mute-aa: color-mix(in srgb, var(--muted) 45%, var(--ink));
  --hn-border: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Lienzo: la tarjeta que envuelve cada sección. */
.hn-canvas {
  position: relative; overflow: hidden;
  background: var(--hn-canvas); border-radius: 26px;
  padding: 68px 72px 72px;
  box-shadow: 0 30px 70px -40px rgba(27,26,22,.5);
}
.hn-inner { position: relative; z-index: 1; }

/* Aurora: mismos tres blobs en todas. El JS los mueve. */
.hn-canvas .pe-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(13px); will-change: transform; }
.hn-canvas .pe-blob-1 { width: 620px; height: 620px; top: -220px; left: -180px; background: radial-gradient(circle, rgba(106,79,189,.20), transparent 68%); }
.hn-canvas .pe-blob-2 { width: 680px; height: 680px; bottom: -280px; right: -200px; background: radial-gradient(circle, rgba(47,125,99,.16), transparent 68%); }
.hn-canvas .pe-blob-3 { width: 460px; height: 460px; top: 34%; right: 12%; background: radial-gradient(circle, rgba(176,125,42,.14), transparent 68%); }

/* Una sola escala de títulos y un solo kicker para todas las secciones. */
.familiar-title, .proc-title, .pe-title, .hero h1 {
  font-size: 52px; line-height: 1; letter-spacing: -.034em; font-weight: 600;
}
.familiar-kicker, .proc-kicker, .pe-eyebrow, .hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  border: 1px solid var(--hn-border);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  /* --muted a secas se queda en 3.77:1 sobre el lienzo en claro, debajo del
     mínimo AA para texto chico, en las ocho paletas. */
  text-transform: uppercase; color: color-mix(in srgb, var(--muted) 45%, var(--ink));
}
.pe-eyebrow { padding-left: 10px; }

/* Paleta unificada: "¿Te suena?" venía en lavanda y las demás en crema. */
.familiar {
  --fb-surface: var(--hn-paper);
  --fb-border: var(--hn-border);
  --fb-bubble-text: var(--hn-ink);
  --fb-heading: var(--hn-ink);
  --fb-secondary: var(--hn-sec);
  --fb-mono-muted: var(--hn-mute);
  --fb-btn: var(--ink);
  --fb-btn-text: var(--paper);
}
/* Sin forzados de color por tema: --hn-ink ya se invierte solo en noir. */

@media (max-width: 900px) {
  .hn-canvas { padding: 36px 22px 44px; border-radius: 18px; }
  .familiar-title, .proc-title, .pe-title, .hero h1 { font-size: 34px; }
  .hn-canvas .pe-blob { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-canvas .pe-blob { display: none !important; }
}


/* ===== Confianza ==========================================================
   Rediseño de la antigua "Privacidad". El spec traía colores fijos
   (#e8eeec de lienzo, #10221f de tinta, #2f7d63 de acento). No van fijos acá:
   el sitio repinta con ocho paletas y modo oscuro, y ya nos pasó que una
   sección con valores clavados se quedara de otro color que el resto. Se
   mapean a los tokens equivalentes, así que en la paleta por defecto y en
   claro se ve lo que pide el spec, y en las otras siete acompaña.
   Geometría, tamaños, tiempos y curvas sí van tal cual. */
.confianza {
  --cf-ink: var(--hn-ink);
  --cf-sec: var(--hn-sec);
  --cf-mute: var(--hn-mute-aa);
  --cf-acento: var(--green);
  /* El recibo invierte el fondo, igual que el pizarrón. Su verde y su rojo
     tienen que invertirse también o el contraste se cae. */
  --cf-si: var(--green-on-ink);
  /* El verde puro sobre el lienzo daba 4.32 en océano, lavanda, cítrico y rosa:
     bajo AA, y la bajada del sello es de 8.5px. Empujado hacia la tinta sube sin
     dejar de ser verde, y se corrige solo en oscuro (ahí --ink es el claro). */
  --cf-sello-txt: color-mix(in srgb, var(--green) 74%, var(--ink));
  --cf-no: color-mix(in srgb, var(--red) 58%, var(--paper));
  /* El CTA reusa el componente de "¿Te suena?", que toma sus colores de aquí. */
  --fb-btn: var(--ink);
  --fb-btn-text: var(--paper);
}
.cf-canvas { padding: 58px 62px 54px; box-shadow: 0 30px 70px -40px rgba(16, 42, 38, .45); }

/* Luz que sigue al cursor. */
.cf-luz {
  position: absolute; top: 0; left: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 62%);
  transition: opacity 320ms ease;
}
.cf-luz.is-on { opacity: 1; }

.cf-head { max-width: 64ch; margin-bottom: 44px; }
.cf-kicker {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cf-mute);
}
.cf-title {
  margin: 0 0 16px; font-size: 50px; line-height: 1.02; letter-spacing: -.032em;
  font-weight: 600; color: var(--cf-ink); text-transform: none;
}
.cf-lede { margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-sec); }

.cf-grid { display: grid; grid-template-columns: 1fr 452px; gap: 52px; align-items: start; }

/* ── Lista numerada ──────────────────────────────────────────────────────── */
.cf-list { list-style: none; margin: 0; padding: 0; }
.cf-row {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px;
  padding: 18px 10px 18px 0; border-bottom: 1px solid var(--hn-border);
  border-radius: 10px;
  transition: background 240ms ease, padding-left 240ms cubic-bezier(.16, 1, .3, 1);
}
.cf-row:last-child { border-bottom: 0; }
.cf-i { font-family: var(--mono); font-size: 12px; color: var(--cf-mute); transition: color 220ms ease; }
.cf-t { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--cf-ink); text-transform: none; }
.cf-d { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cf-sec); }
@media (hover: hover) {
  .cf-row:hover { background: rgba(255, 255, 255, .55); padding-left: 10px; }
  .cf-row:hover .cf-i { color: var(--cf-acento); }
}

.cf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; }
.cf-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--cf-acento) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cf-acento) 22%, transparent);
  color: var(--hn-mute-aa);
}

/* ── Recibo ──────────────────────────────────────────────────────────────── */
.cf-recibo-caja { position: relative; }
.cf-recibo {
  position: relative; background: var(--ink); color: var(--paper);
  border-radius: 4px; padding: 30px;
  box-shadow: 0 30px 60px -30px rgba(16, 34, 31, .75);
  font-family: var(--mono);
}
/* Dentado. El spec pedía un repeating-linear-gradient a 45°, pero con una
   banda de 8px y periodo de 14 eso sale como franja rayada en diagonal, no
   como diente: se leía igual que una cinta de peligro. Se hace con el mismo
   par de gradientes que ya usa el troquelado de la boleta del hero, que sí
   dibuja triángulos, conservando los 8px de alto y los 14 de periodo. */
.cf-zz {
  position: absolute; left: 0; right: 0; height: 8px;
  background-image:
    linear-gradient(45deg, transparent 33.33%, var(--ink) 33.33%, var(--ink) 66.67%, transparent 66.67%),
    linear-gradient(-45deg, transparent 33.33%, var(--ink) 33.33%, var(--ink) 66.67%, transparent 66.67%);
  background-size: 14px 16px;
}
.cf-zz-top { top: -7px; transform: rotate(180deg); }
.cf-recibo > .cf-zz:not(.cf-zz-top) { bottom: -7px; }

.cf-r-head {
  margin: 0 0 16px; padding-bottom: 14px; text-align: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.cf-r-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cf-r-col { padding: 0 14px; }
.cf-r-col:first-child { padding-left: 0; }
.cf-r-col + .cf-r-col { padding-right: 0; border-left: 1px dotted color-mix(in srgb, var(--paper) 30%, transparent); }
.cf-r-h {
  display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
}
.cf-r-h.is-si { color: var(--cf-si); }
.cf-r-h.is-no { color: var(--cf-no); }
.cf-recibo ul { list-style: none; margin: 0; padding: 0; }
.cf-linea {
  padding: 8px 0; font-size: 11.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px dotted color-mix(in srgb, var(--paper) 28%, transparent);
}
.cf-linea:last-child { border-bottom: 0; }
.cf-r-col:first-child .cf-linea::before { content: '+ '; color: var(--cf-si); }
.cf-r-col + .cf-r-col .cf-linea::before { content: '− '; color: var(--cf-no); }
/* El padding izquierdo no es capricho: el sello entra 70px dentro del recibo
   justo por esta esquina y tapaba la palabra "Total". */
.cf-r-total {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 18px 0 0; padding: 14px 0 0 76px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}

/* ── Sello ───────────────────────────────────────────────────────────────── */
.cf-sello {
  position: absolute; left: -74px; bottom: -56px; z-index: 2;
  width: 132px; height: 132px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 2px solid var(--cf-acento); background: var(--hn-canvas);
  color: var(--cf-sello-txt); text-align: center;
  transform: rotate(-12deg);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.cf-sello-mark { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.cf-sello-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; max-width: 96px; }
@media (hover: hover) {
  .cf-sello:hover { transform: rotate(-4deg) scale(1.06); }
}

.cf-next { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── Entrada ─────────────────────────────────────────────────────────────── */
.js .confianza [data-cf] { opacity: 0; transform: translateY(22px); }
.js .confianza [data-cf].is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 780ms cubic-bezier(.16, 1, .3, 1);
}
.js .cf-row { opacity: 0; transform: translateX(-14px); }
.js .cf-row.is-in {
  opacity: 1; transform: none;
  transition: opacity 460ms cubic-bezier(.16, 1, .3, 1), transform 520ms cubic-bezier(.16, 1, .3, 1);
}
.js .cf-chip { opacity: 0; transform: translateY(8px) scale(.9); }
.js .cf-chip.is-in {
  opacity: 1; transform: none;
  transition: opacity 300ms ease, transform 460ms cubic-bezier(.34, 1.5, .5, 1);
}
/* Las líneas del recibo se "imprimen": bajan desde arriba, una por una. */
.js .cf-linea, .js .cf-r-h { opacity: 0; transform: translateY(-6px); }
.js .cf-linea.is-in, .js .cf-r-h.is-in {
  opacity: 1; transform: none;
  transition: opacity 260ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1);
}
.js .cf-sello { opacity: 0; transform: rotate(-26deg) scale(1.5); }
.js .cf-sello.is-in {
  opacity: 1; transform: rotate(-12deg) scale(1);
  transition: opacity 240ms ease, transform 620ms cubic-bezier(.3, 1.6, .5, 1);
}

@media (max-width: 1040px) {
  .cf-grid { grid-template-columns: 1fr; gap: 40px; }
  .cf-recibo-caja { max-width: 452px; }
  .cf-sello { left: auto; right: -18px; bottom: -46px; }
}
@media (max-width: 900px) {
  .cf-canvas { padding: 36px 22px 44px; }
  .cf-title { font-size: 34px; }
  .cf-luz { display: none; }
  .cf-r-cols { grid-template-columns: 1fr; gap: 22px; }
  .cf-r-col, .cf-r-col:first-child { padding: 0; }
  .cf-r-col + .cf-r-col { border-left: 0; border-top: 1px dotted color-mix(in srgb, var(--paper) 30%, transparent); padding-top: 18px; }
  .cf-sello { width: 108px; height: 108px; right: -6px; bottom: -40px; }
  .cf-sello-mark { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .confianza [data-cf], .js .cf-row, .js .cf-chip, .js .cf-linea, .js .cf-r-h, .js .cf-sello {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .cf-sello.is-in { transform: rotate(-12deg) !important; }
  .cf-row, .cf-sello, .cf-luz { transition: none !important; }
}