/* ============================================================================
   NOLO personal — design system (site.css)
   ----------------------------------------------------------------------------
   Same brand as landing.nolo-app.com (identical colour tokens and typefaces),
   deliberately a DIFFERENT site: this one reads like a dated document, not like
   a product launch. No preloader, no custom cursor, no floating orbs. Left
   aligned, hairline rules, monospace labels with dates, one accent glow saved
   for the call to action.

   ── PASO DE AIRE (2026-09-04) ───────────────────────────────────────────────
   La primera versión era correcta y agobiaba: párrafos largos sobre un fondo
   casi negro, y siete tratamientos de caja distintos peleando por el mismo
   metro cuadrado (ficha, límites, tabla, plan, aviso, índice, acordeón). Tres
   cambios, en orden de efecto:

     1. Menos cajas. `.limits` y `.toc` pierden el marco y pasan a bloques
        separados por filete. Un borde dice "objeto aparte"; siete bordes
        seguidos no dicen nada y cansan.
     2. Suelo alterno. Las secciones de lectura larga se levantan a `--bg-1` en
        vez de quedarse en el casi negro. Separa sin dibujar nada y descansa.
     3. Aire y renglón. Sección de 110 px, cuerpo a 1,06 rem con interlínea
        1,78 y la línea de texto acotada a 58-62 caracteres.

   Las fuentes se sirven desde /fonts. La landing general se las sigue pidiendo
   a Google, que es una petición a Google antes de pintar una letra en una
   página sobre no ser rastreado. Aquí no.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root {
  color-scheme: dark;

  --bg-0: #050308;   /* el suelo más bajo: hero, cierres, footer */
  --bg-1: #0a0612;   /* suelo levantado: secciones de lectura larga */
  --bg-2: #120a1f;   /* superficies elevadas dentro de una sección */
  --ink: #f5efff;
  --muted: #b3aac7;  /* subido desde #a89fbf: el cuerpo largo pedía un punto más */
  --quiet: #756c8f;
  --line: rgba(167,139,250,.11);
  --line-2: rgba(167,139,250,.24);
  --acc: #8b5cf6;
  --acc-2: #a78bfa;
  --acc-3: #c4b5fd;
  --acc-deep: #4c1d95;
  --acc-glow: rgba(139,92,246,.42);
  --good: #3ddba4;
  --warn: #fbbf24;
  --bad: #fb7185;
  --ease: cubic-bezier(.2,.85,.2,1);
  --wrap: 1080px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de espacio. Que exista evita el goteo de márgenes a ojo que era
     medio problema del agobio. */
  --s1: 8px; --s2: 14px; --s3: 22px; --s4: 34px; --s5: 56px; --s6: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-0);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.6;
}
::selection { background: var(--acc); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { max-width: 100%; }
svg { stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 3px; border-radius: 4px; }

/* Un lavado quieto y fijo. Sin seguir al ratón y sin orbes animados: este sitio
   tiene que estarse quieto. */
.wash {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(139,92,246,.14), transparent 62%),
    radial-gradient(820px 520px at -10% 26%, rgba(76,29,149,.12), transparent 60%);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--acc); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; z-index: 999; }
.skip:focus { left: 0; }

/* ---------- shell ---------- */
.wrap { width: min(var(--wrap), calc(100% - 44px)); margin: 0 auto; }

/* ---------- nav ----------
   Fija, a todo el ancho, con filete abajo. No es la píldora flotante de la
   landing general a propósito: son dos sitios distintos y no se pueden
   confundir de un vistazo. */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(5,3,8,.85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.nav-in { display: flex; align-items: center; gap: var(--s3); height: 66px; }
.mark { font-weight: 700; letter-spacing: -.05em; font-size: 1.24rem; display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.mark .tag {
  font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc-2);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 7px; transform: translateY(-2px);
}
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: .92rem; color: var(--muted); }
.nav-links a { transition: color .2s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-cta {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 10px 17px; border-radius: 10px; font-weight: 600; font-size: .88rem; color: #fff;
  background: linear-gradient(135deg, var(--acc-2), var(--acc) 60%, var(--acc-deep));
  box-shadow: 0 10px 26px var(--acc-glow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px var(--acc-glow); }
.nav-links + .nav-cta { margin-left: var(--s1); }
.nav-links:not(:last-child) { margin-left: auto; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-in { gap: var(--s2); } .mark { margin-right: auto; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 12px; font-weight: 600; font-size: .98rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn.primary {
  background: linear-gradient(135deg, var(--acc-2), var(--acc) 58%, var(--acc-deep));
  color: #fff; box-shadow: 0 16px 40px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px var(--acc-glow); }
.btn.ghost { border: 1px solid var(--line-2); background: rgba(139,92,246,.05); color: var(--ink); }
.btn.ghost:hover { background: rgba(139,92,246,.12); border-color: var(--acc-2); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.play { display: inline-flex; align-items: center; gap: 11px; padding: 12px 22px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.play:hover { border-color: var(--acc-2); background: rgba(139,92,246,.09); }
/* La etiqueta son dos líneas de peso distinto, así que la regla de versalitas
   tiene que ir al span de dentro: `.play span` también cazaba al envoltorio y
   encogía el botón entero a 11 px gris. */
.play .txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.play .txt > span { font-family: var(--mono); font-size: .6rem; color: var(--quiet); letter-spacing: .13em; text-transform: uppercase; }
.play .txt > b { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

/* ---------- shared type ---------- */
.kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc-2); display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3);
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.h1 { font-size: clamp(2.35rem, 6vw, 4.1rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.04; margin: 0 0 var(--s3); text-wrap: balance; }
.h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.14; margin: 0 0 var(--s3); text-wrap: balance; }
.h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.lead { font-size: 1.12rem; color: var(--muted); line-height: 1.72; max-width: 58ch; margin: 0 0 var(--s4); }
.hl { background: linear-gradient(135deg, var(--acc-3), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0 0 var(--s3); }
.note { font-size: .88rem; color: var(--quiet); line-height: 1.7; max-width: 74ch; }
.note a { color: var(--acc-3); text-decoration: underline; text-underline-offset: 3px; }
.stamp { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; color: var(--quiet); }

/* ---------- sections ----------
   El suelo alterno hace la separación. Donde dos secciones comparten suelo se
   añade el filete; donde cambia, el cambio ya se ve y el filete sobra. */
.sec { padding: var(--s6) 0; background: var(--bg-0); }
.sec.alt { background: var(--bg-1); }
.sec + .sec:not(.alt) { border-top: 1px solid var(--line); }
.sec-head { max-width: 62ch; margin-bottom: var(--s5); }
.sec-head .lead { margin-bottom: 0; }
.sec-foot { margin-top: var(--s4); }

/* ---------- hero ---------- */
.hero { padding: var(--s6) 0 calc(var(--s6) - 12px); }
.hero .h1 { max-width: 15ch; }
.hero .lead { font-size: 1.18rem; max-width: 56ch; margin-bottom: var(--s2); }
.hero .lead + .lead { margin-bottom: var(--s4); }
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s4);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-3); border: 1px solid var(--line-2); background: rgba(139,92,246,.06);
  border-radius: 999px; padding: 8px 16px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-2); box-shadow: 0 0 9px var(--acc-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }

/* ---------- ledger: el bloque de firma ----------
   Dos columnas, una casi vacía. La idea de marca es "dibujar la ausencia como
   forma sólida", así que el lado vacío lleva borde y etiqueta, no un
   desvanecido. Es la única pareja de fichas del sitio: por eso puede permitirse
   el marco. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.led {
  border: 1px solid var(--line); border-radius: 18px; padding: var(--s4) var(--s4) calc(var(--s4) + 4px);
  background: rgba(5,3,8,.5);
}
.led.ours { border-color: var(--line-2); background: linear-gradient(168deg, rgba(139,92,246,.09), rgba(0,0,0,0) 70%), rgba(18,10,31,.6); }
.led-h { font-family: var(--mono); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s3); display: block; }
.led.ours .led-h { color: var(--acc-2); }
.led ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.led li { display: flex; gap: var(--s2); align-items: flex-start; font-size: .97rem; color: var(--muted); line-height: 1.65; }
.led li b { color: var(--ink); font-weight: 600; }
.led .ic { flex: none; width: 17px; height: 17px; margin-top: 4px; opacity: .9; }
.led.theirs .ic { color: var(--bad); }
.led.ours .ic { color: var(--good); }
.led code, .mcard code, .prose code, .faq code {
  font-family: var(--mono); font-size: .85em; color: var(--acc-3);
  background: rgba(139,92,246,.09); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}

/* ---------- scenario rows ----------
   Sin marco y sin fondo: solo filete y mucho aire. Ocho fichas seguidas eran
   ocho objetos; ocho renglones son una lista. */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.row q { font-size: 1.15rem; color: var(--ink); font-style: italic; display: block; letter-spacing: -.018em; line-height: 1.5; quotes: '“' '”'; }
.row .why { color: var(--muted); font-size: .97rem; line-height: 1.7; }
.row .why .tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.row .why a { color: var(--acc-3); text-decoration: underline; text-underline-offset: 3px; }
.pill {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 5px; padding: 4px 8px; color: var(--acc-3);
  background: rgba(139,92,246,.06); white-space: nowrap;
}
.pill.free { color: var(--good); border-color: rgba(61,219,164,.28); background: rgba(61,219,164,.06); }

/* ---------- mechanism cards ----------
   Estas sí son objetos discretos: cuatro pasos paralelos que se comparan entre
   sí. Se quedan con marco, con más aire dentro. */
.mech { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.mcard {
  border: 1px solid var(--line); border-radius: 18px; padding: var(--s4);
  background: rgba(5,3,8,.45);
  display: flex; flex-direction: column;
}
.mcard .num { font-family: var(--mono); font-size: .68rem; letter-spacing: .17em; color: var(--acc-2); margin-bottom: var(--s3); }
.mcard p { color: var(--muted); font-size: .97rem; line-height: 1.7; margin: 0 0 var(--s2); }
.mcard p:last-of-type { margin-bottom: 0; }
.mcard .fact {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--quiet); letter-spacing: .02em; line-height: 1.75;
}
.mcard .fact b { color: var(--acc-3); font-weight: 500; }

/* ---------- limits ----------
   Antes iba dentro de una caja con borde, que es justo el gesto que hacía que
   la sección más importante del sitio pareciera una nota al pie con marco.
   Ahora son bloques con filete y aire, y se lee como lo que es: una lista de
   cosas que decimos en voz alta. */
.limits { display: grid; gap: 0; max-width: 74ch; }
.limits div { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.limits div:first-child { border-top: 0; padding-top: 0; }
.limits dt { font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); margin-bottom: 10px; }
.limits dd { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.limits dl { margin: 0; display: contents; }

/* ---------- comparison table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(5,3,8,.45); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 780px; font-size: .92rem; }
table.cmp th, table.cmp td { padding: var(--s2) 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--quiet); font-weight: 500; padding-top: 18px; padding-bottom: 18px; }
table.cmp thead th.us { color: var(--acc-2); }
table.cmp tbody th { font-weight: 500; color: var(--ink); width: 28%; line-height: 1.5; }
table.cmp td { color: var(--muted); }
table.cmp td.us { color: var(--ink); background: rgba(139,92,246,.055); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
.yes { color: var(--good); font-weight: 600; }
.no { color: var(--bad); font-weight: 600; }
.part { color: var(--warn); font-weight: 600; }
.cmp small { display: block; color: var(--quiet); font-size: .78rem; margin-top: 5px; line-height: 1.5; }
.cmp caption { text-align: left; padding: 18px 18px 4px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: var(--s4); background: rgba(5,3,8,.45); display: flex; flex-direction: column; }
.plan.mid { border-color: var(--acc); background: linear-gradient(168deg, rgba(139,92,246,.11), rgba(0,0,0,0) 72%), rgba(18,10,31,.6); }
.plan .pname { font-family: var(--mono); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--acc-2); margin-bottom: var(--s3); }
.plan .price { font-size: 2.2rem; font-weight: 700; letter-spacing: -.045em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.plan .price sub { font-size: .8rem; font-weight: 400; color: var(--quiet); letter-spacing: 0; vertical-align: baseline; }
.plan .for { color: var(--muted); font-size: .95rem; margin-bottom: var(--s3); }
.plan ul { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: .95rem; color: var(--muted); }
.plan li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.plan li::before { content: '—'; color: var(--acc-2); flex: none; }
.plan .btn { margin-top: auto; width: 100%; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s3) 44px var(--s3) 0; position: relative;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--acc-2); border-bottom: 2px solid var(--acc-2);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .ans { padding: 0 0 var(--s4); color: var(--muted); font-size: 1rem; line-height: 1.78; max-width: 70ch; }
.faq .ans p { margin-bottom: var(--s2); }
.faq .ans p:last-child { margin-bottom: 0; }
.faq .ans a { color: var(--acc-3); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- article prose ---------- */
.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); font-weight: 600; letter-spacing: -.035em; margin: var(--s6) 0 var(--s3); line-height: 1.2; }
.prose h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.02em; margin: var(--s4) 0 var(--s2); }
.prose p { color: var(--muted); font-size: 1.06rem; line-height: 1.8; margin: 0 0 var(--s3); }
.prose p b, .prose li b { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { color: var(--muted); font-size: 1.06rem; line-height: 1.78; padding-left: var(--s3); margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.prose li::marker { color: var(--acc-2); }
.prose a { color: var(--acc-3); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: var(--s4) 0; padding: var(--s3) 0 var(--s3) var(--s4); border-left: 2px solid var(--acc);
  color: var(--ink); font-size: 1.14rem; line-height: 1.65; letter-spacing: -.012em;
}
.prose blockquote p { color: inherit; font-size: inherit; line-height: inherit; margin-bottom: 0; }

/* El aviso destacado: fondo tenue y sin borde. Un borde más en una página que
   ya tiene índice, tabla y acordeón era una caja de más. */
.callout {
  border-radius: 16px; padding: var(--s4); margin: var(--s5) 0;
  background: linear-gradient(168deg, rgba(139,92,246,.1), rgba(139,92,246,.03));
  border-left: 2px solid var(--acc);
}
.callout .led-h { margin-bottom: var(--s2); color: var(--acc-2); }
.callout p { color: var(--muted); margin-bottom: var(--s2); font-size: 1rem; line-height: 1.75; }
.callout p:last-child { margin-bottom: 0; }
.callout .btn { margin-top: var(--s2); }

/* El índice: sin marco. Es una lista de enlaces, no un objeto. */
.toc { padding: var(--s3) 0 var(--s4); margin: 0 0 var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc .led-h { margin-bottom: var(--s2); }
.toc ol { margin: 0; padding-left: var(--s3); color: var(--muted); font-size: .97rem; line-height: 2; }
.toc li::marker { color: var(--quiet); }
.toc a { transition: color .2s var(--ease); }
.toc a:hover { color: var(--ink); }

/* ---------- cta band ---------- */
.band { border-top: 1px solid var(--line); padding: var(--s6) 0; text-align: center; background: var(--bg-0); }
.band .h2 { max-width: 20ch; margin-inline: auto; }
.band .lead { margin-inline: auto var(--s4); margin-inline: auto; margin-bottom: var(--s4); text-align: center; }
.band-cta { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s4); color: var(--muted); font-size: .9rem; background: var(--bg-0); }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3, auto); gap: var(--s4) var(--s5); align-items: start; }
.foot-col { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.foot-col a { color: var(--muted); transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--ink); }
.foot .led-h { margin-bottom: 2px; }
.foot-legal { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between; color: var(--quiet); font-size: .84rem; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* La primera pantalla no espera al JavaScript. El h1 es el pintado más grande
   de cada página, y un elemento a opacidad 0 hasta que site.js le pone una
   clase no cuenta como pintado: el revelado estaba retrasando el LCP el tiempo
   del script más el de la transición. Por debajo del pliegue se queda, que ahí
   no cuesta nada medible. */
.hero .rv,
main > article.sec:first-child > .wrap > .rv { opacity: 1; transform: none; transition: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .mech, .ledger { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: var(--s2); }
}
@media (max-width: 880px) {
  .plans { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --s5: 40px; --s6: 62px; }
  body { font-size: 16px; }
  .wrap { width: calc(100% - 36px); }
  .hero { padding: var(--s5) 0 var(--s6); }
  .hero .h1 { max-width: none; }
  .hero .lead { font-size: 1.1rem; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn, .hero-cta .play, .band-cta .btn { width: 100%; }
  .row { padding: var(--s3) 0; }
  .row q { font-size: 1.08rem; }
  /* "NO ACCOUNT · NO EMAIL · NO PHONE NUMBER" no cabe en una línea a 340 px, y
     una píldora partida en dos renglones se ve rota. Se le quita la cápsula y
     pasa a ser lo que ya era: una etiqueta encima del titular. */
  .badge { border: 0; background: none; padding: 0; border-radius: 0; font-size: .64rem; letter-spacing: .1em; line-height: 1.7; }
  .prose h2 { margin-top: var(--s5); }
  .callout { padding: var(--s3); margin: var(--s4) 0; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

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