/* ── Espress web · marketing ─────────────────────────────────────────────────
   Portado de `Espress Web v2.dc.html` (597 líneas) del handoff de Claude Design.
   Los valores son los del export, verbatim; lo único que cambia es que salen de
   clases en vez de atributos `style`, porque 597 líneas de estilo en línea no se
   pueden mantener y el diseño está en los números, no en dónde viven.

   El export marca los hovers con un atributo propio (`style-hover`) que el
   navegador ignora: acá son `:hover` de verdad.

   TRES REGLAS DEL README QUE SE VEN EN ESTE ARCHIVO
   · Responsive sin media queries: `clamp()` para tipografía y gutters,
     `repeat(auto-fit,minmax())` para grillas, `flex-wrap` + `gap` para el resto.
   · `overflow-x: clip`, nunca `overflow: hidden` — un `hidden` en un ancestro
     mata en silencio el índice sticky de la página legal.
   · El hover de color va en el BOTÓN y la etiqueta hereda (`color: inherit`).
     Declarado en el span interno solo dispararía sobre los glyphs.
   ──────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#ffffff}
/* Erik, 2026-10-10 (iPhone): al estirar la página más allá del final, iOS Safari enseñaba blanco bajo
   el pie rojo. Las páginas que empiezan con la cabecera negra y terminan con el pie rojo (marketing,
   legal y cuenta: `class="ends-black-red"` en su <html>) pintan el lienzo negro arriba y rojo abajo;
   `body` sigue blanco y tapa el degradado en todo lo que es página, así que solo se ve al estirar.
   /c/ empieza y termina en blanco y se queda como está. */
html.ends-black-red{min-height:100%;background:var(--red-500) linear-gradient(to bottom,var(--black) 50%,var(--red-500) 50%) no-repeat}
/* Y no solo al estirar: con la barra inferior dinámica de iOS Safari, al llegar al final quedaba a la
   vista el fondo del documento bajo el último elemento — el `body` blanco. En estas tres páginas el
   `body` es del rojo del pie; todo lo que hay entre cabecera y pie vive dentro de `.page`, que es
   blanco, así que nada cambia salvo esa franja. El pie, además, se alarga lo que mida la zona segura
   de abajo (`viewport-fit=cover` en el <meta viewport> de las tres). */
html.ends-black-red body{background:var(--red-500)}
a{color:var(--red-500);text-decoration:none}
a:hover{color:var(--red-600)}
button{font-family:var(--font-body);transition:opacity 150ms,transform 150ms}
button:active{opacity:.7}
:focus-visible{outline:2.5px solid var(--red-500);outline-offset:3px;border-radius:6px}
img{max-width:100%}

@keyframes esmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes esbob{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.5}}

/* El marquee y la flecha son decoración pura: quien pidió menos movimiento no
   los necesita, y ninguno de los dos comunica nada que el texto no diga. */
@media (prefers-reduced-motion:reduce){
  .marquee-track,.scroll-arrow{animation:none}
}

.page{
  width:100%;
  background:var(--white);font-family:var(--font-body);color:var(--black);
  overflow-x:clip;
}

/* El gutter horizontal de todas las secciones, una sola vez. Tanda 43 · 5: la página ya
   no se detiene en 1280. Cada banda corre de borde a borde y la columna de contenido crece
   hasta 1440 y entonces se centra dentro de su banda; el padding es la fórmula del export
   verbatim. `--gut` se sustituye como texto, así que el `100%` se resuelve en cada sitio
   de uso igual que en el `style` en línea del export. Los topes de tipografía no cambian. */
:root{--gut:max(clamp(20px,4vw,60px),calc((100% - 1440px) / 2))}
.gutter{padding-left:var(--gut);padding-right:var(--gut)}

/* Los display van con `top:0.13em`: PP Monument se monta alto en su caja y el
   diseño lo compensa en cada etiqueta de botón. */
.optic{position:relative;top:.13em;display:block}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Tanda 52 (2026-10-09): la barra en negro (Web v2 38–55, README §Batch 52). La línea de abajo es
   el divisor del panel móvil, rgba(255,255,255,.14): sobre la franja roja no se ve y sobre el panel
   negro de Account es lo único que separa. */
.header{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;padding-top:20px;padding-bottom:20px;background:var(--black);border-bottom:1px solid rgba(255,255,255,.14)}
.brand{display:flex;align-items:baseline;gap:13px;text-decoration:none;flex:none}
/* El wordmark de la RAÍZ del export (README 1057): ESPRESS a 27.9/19.9 con scaleX(1.28), tan
   alto como la taza y con el plato sobre su línea base. Hasta el 2026-10-01 esto seguía con el
   tratamiento viejo del espejo (19px plano, .6px), y Erik lo vio: la taza no alineaba con el texto. */
.brand img{width:38px;height:19.9px;display:block;object-fit:contain}
.brand-word{font-family:var(--font-body);font-weight:900;font-size:27.9px;line-height:19.9px;letter-spacing:.02em;color:var(--white);transform:scaleX(1.28);transform-origin:left center;margin-right:39px;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:12px clamp(14px,2.4vw,30px);flex:1 1 320px;justify-content:center}
.nav-link,.sign-in{font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--white);text-decoration:none;padding:8px 0;border-bottom:1.5px solid transparent}
.nav-link:hover,.sign-in:hover{color:var(--white);border-bottom-color:var(--red-500)}
.header-actions{display:flex;align-items:center;gap:16px;flex:none}
/* Tanda 52: píldora blanca con rótulo negro; hover rojo con el rótulo negro (el par de SEND CODE). */
.btn-app{height:42px;padding:0 26px;border-radius:21px;border:none;background:var(--white);cursor:pointer}
.btn-app:hover{background:var(--red-500)}
.btn-app span{font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:1.6px;color:var(--black)}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--red-550);overflow:hidden}
.strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;padding-top:15px;padding-bottom:15px}
.strip span{font-weight:700;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--black)}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* Media columna de la rejilla (tanda 44 · C1). Esta caja no es una banda de borde a borde: su
   `100%` es la mitad de la página, así que el export mide el borde EXTERIOR (el izquierdo)
   contra la página entera con `100vw` y deja el interior, que da al centro de la rejilla,
   en el gutter normal. Así el titular empieza donde empieza la cabecera. Las bandas de
   ancho completo siguen con `100%`. Hasta la tanda 43 esto era un desvío nuestro; ahora es
   el diseño y los valores son los del export verbatim. `100vw` incluye la barra de
   desplazamiento donde no es flotante: como mucho, 8px de desfase respecto a la cabecera. */
.hero-copy{padding:clamp(46px,6vw,70px) clamp(20px,4vw,60px) clamp(46px,5vw,64px) max(clamp(20px,4vw,60px),calc((100vw - 1440px) / 2))}
.hero-line{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,6.6vw,92px);line-height:.92;text-transform:uppercase;color:var(--black)}
.hero-line.on-red{color:var(--white)}
.hero-sub{margin:30px 0 0;max-width:460px;font-family:var(--font-display);font-weight:400;font-size:clamp(17px,2vw,21px);line-height:1.35;color:var(--white);text-wrap:pretty}
.store-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
/* Tanda 45 · D2. La insignia de Apple mide 144 × 48 (el mínimo de Apple son 40 de alto) y su espacio
   libre, 12px = ¼ del alto, va reservado como padding con el margen negativo que lo compensa: la
   insignia queda donde quedaría sin él y nada puede sentarse dentro de esa zona. Valores del export. */
.store-badge{display:block;flex:none;width:144px;height:48px;padding:12px;margin:-12px;box-sizing:content-box}
.store-badge img{display:block;width:144px;height:48px;max-width:none}
.store-badge[hidden]{display:none} /* `shown: false` en js/config.js */
/* Erik, 2026-10-10: Google Play al mismo alto; su proporción (238.96/70.87) da 162 de ancho. */
.store-badge--play,.store-badge--play img{width:162px}
.hero-terms{margin:24px 0 0;font-weight:500;font-size:13px;color:var(--white)}

.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:560px;padding:0;background:var(--red-550)}
.vignette{position:absolute;inset:0;overflow:hidden}
.vignette span{position:absolute;left:50%;top:50%;width:460px;height:460px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.14) 60%,rgba(0,0,0,0) 72%)}
/* Escritorio (batch 54 · 4, que recoge las decisiones de Erik del 2026-10-10 y reemplaza el carril del
   batch 53 §1): vuelve D3 — render CONTENIDO en un marco de 300 × 440 anclado abajo-centro, chips
   ancladas al MARCO a su ancho real (`max-content`, topes 210 / — / 200). Encima, lo que calcula
   js/site.js: en las CAJAS cada chip se desliza hacia fuera hasta montarse 8px como mucho sobre la
   silueta, y ninguna chip (caja o bolsa) sale de la columna (20px a la derecha; desvío del batch 54). Va en
   `--slide-id` / `--slide-roast` / `--slide-notes`. La sombra de suelo mide 1.18 × el ancho de la
   silueta y va centrada en ella (también la pone el JS; `.is-box` queda como respaldo sin JS).
   El relevo es el de siempre: el render se desvanece y baja 10px en --motion-reveal mientras las
   chips se desvanecen en --motion-colour; `.is-out` es `heroOut`. */
.bag{--slide-id:0px;--slide-roast:0px;--slide-notes:0px;position:relative;display:flex;align-items:flex-end;justify-content:center;flex:none;width:300px;height:440px}
.bag-sil{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.bag-shadow{position:absolute;left:50%;bottom:-13px;width:268px;height:30px;max-width:none;transform:translateX(-50%);display:block;opacity:.85;transition:width var(--motion-reveal)}
.bag.is-box .bag-shadow{width:320px}
.bag-img{position:relative;display:block;max-width:300px;max-height:440px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.35));opacity:1;transform:translateY(0);transition:opacity var(--motion-reveal),transform var(--motion-reveal)}
.bag.is-out .bag-img{opacity:0;transform:translateY(10px)}
.bag [hidden]{display:none}
.hero-chips{position:absolute;inset:0;display:block;opacity:1;transition:opacity var(--motion-colour)}
.bag.is-out .hero-chips{opacity:0}
.chip-id,.chip-roast,.chip-notes{position:absolute;display:block;box-sizing:border-box}
.chip-id{left:calc(-66px - var(--slide-id));top:118px;width:max-content;max-width:210px;padding:14px 20px 15px;background:var(--white);border-radius:22px}
.chip-id b{display:block;font-weight:900;font-size:15px;line-height:19px;text-transform:uppercase;color:var(--black)}
.chip-id i{display:block;margin-top:3px;font-style:normal;font-weight:500;font-size:11.5px;color:var(--gray-550)}
.chip-roast{right:calc(-104px - var(--slide-roast));top:56px;width:max-content;padding:11px 18px 12px;background:var(--white);border-radius:20px}
.chip-roast b{display:block;font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--black);white-space:nowrap}
.chip-roast i{display:block;margin-top:4px;font-style:normal;font-weight:500;font-size:11.5px;color:var(--gray-550)}
.chip-notes{right:calc(-84px - var(--slide-notes));bottom:92px;width:max-content;max-width:200px;padding:11px 18px 12px;background:var(--black);border-radius:20px}
.chip-notes i{display:block;font-style:normal;font-weight:500;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gray-400)}
.chip-notes b{display:block;margin-top:4px;font-weight:700;font-size:12.5px;line-height:17px;color:var(--white)}
/* Batch 54 · 5 (Erik, 2026-10-10: en el teléfono, ≤ 720, la forma decide). El render va contenido en
   un marco de 187 × 238 (el 85 % de los 220 × 280 del batch 53, px del JS), apoyado abajo-centro, con
   sombra de 1.18 × el ancho de la silueta y 24 de alto. Las chips, a los tamaños del teléfono:
   · BOLSA (`.is-around`): alrededor del paquete como en escritorio — tostador a la izquierda, tueste
     arriba a la derecha (si hay), notas abajo a la derecha —, a las alturas de D3 escaladas a 238/440
     y montadas sobre la silueta lo que monta D3 escalado (22.5 / 8 / 31.3). Todo lo posiciona el JS;
     tostador y notas parten líneas en el hueco que deja la columna (mínimos 140 / 130).
   · CAJA (`.is-stacked.is-phone-box`): solo la chip negra de notas, centrada 32px bajo el paquete.
     Tostador y tueste siguen en el DOM pero no se pintan: al lado de una caja no caben sin taparla
     (experimento del 2026-10-10), y el nombre del café ya va en el `alt` del render. */
.bag.is-stacked{flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:auto}
.bag.is-stacked .bag-sil{position:relative;inset:auto;display:block;flex:none}
.bag.is-stacked .hero-chips{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;margin-top:32px}
.bag.is-stacked .chip-id,.bag.is-stacked .chip-roast,.bag.is-stacked .chip-notes{position:static;width:auto;max-width:100%}
.bag.is-phone-box .chip-id,.bag.is-phone-box .chip-roast{display:none}
.bag.is-around{display:block;flex:none}
.bag.is-around .bag-sil{position:absolute;inset:auto;display:block}
.bag.is-around .hero-chips{position:static;inset:auto;display:block}
.bag.is-around .chip-id,.bag.is-around .chip-roast,.bag.is-around .chip-notes{position:absolute;left:auto;right:auto;top:auto;bottom:auto;width:max-content;max-width:none}
.bag.is-stacked .bag-shadow,.bag.is-around .bag-shadow{transform:none;bottom:-10px;height:24px;transition:none}
.bag.is-stacked .bag-img,.bag.is-around .bag-img{position:absolute;max-width:none;max-height:none}
.bag.is-stacked .chip-id,.bag.is-around .chip-id{padding:12px 18px 13px;border-radius:20px}
.bag.is-stacked .chip-id b,.bag.is-around .chip-id b{font-size:13px;line-height:17px}
.bag.is-stacked .chip-id i,.bag.is-around .chip-id i{margin-top:2px;font-size:11px}
.bag.is-stacked .chip-roast,.bag.is-around .chip-roast{padding:10px 16px 11px;border-radius:18px}
.bag.is-stacked .chip-roast b,.bag.is-around .chip-roast b{font-size:10px;letter-spacing:1.2px}
.bag.is-stacked .chip-roast i,.bag.is-around .chip-roast i{margin-top:3px;font-size:11px}
.bag.is-stacked .chip-notes,.bag.is-around .chip-notes{padding:10px 16px 11px;border-radius:18px}
.bag.is-stacked .chip-notes i,.bag.is-around .chip-notes i{font-size:10px}
.bag.is-stacked .chip-notes b,.bag.is-around .chip-notes b{margin-top:3px;font-size:12px;line-height:16px}
/* Tanda 53 · 2. En el teléfono la columna pierde el alto mínimo de 560 y lleva 36 / 20 / 48. Y la
   franja SCROLL TO EXPLORE · 7 days FREE desaparece: el hero ya pasa de la primera pantalla, así que
   la flecha nunca se vería donde apunta, y "7 days free" ya es la línea bajo las insignias. */
@media (max-width:720px){
  .hero-stage{min-height:0;padding:36px 20px 48px}
  .hero>.hero-foot{display:none} /* `.hero>`: la regla base de `.hero-foot` va después en el archivo */
}

.hero-foot{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;padding-top:18px;padding-bottom:18px}
.scroll-cue{display:flex;align-items:center;gap:12px}
.scroll-arrow{display:block;animation:esbob 1.9s ease-in-out infinite}
.scroll-cue span{font-weight:700;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--black)}
.stats{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3.5vw,48px)}
.stat{display:flex;align-items:baseline;gap:8px}
.stat b{font-family:var(--font-display);font-weight:900;font-size:19px;color:var(--white)}
.stat span{font-weight:700;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--black)}

/* ── Marquee ──────────────────────────────────────────────────────────────── */
.marquee{background:var(--black);padding:26px 0;overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:esmarquee 42s linear infinite}
.marquee-item{display:flex;align-items:center;gap:34px;padding-right:34px;white-space:nowrap}
.marquee-item b{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:1.4px;text-transform:uppercase;color:var(--white)}
.marquee-item.alt b{color:var(--red-500)}
.marquee-dot{width:6px;height:6px;border-radius:3px;background:var(--red-500)}

/* ── Encabezados de sección ───────────────────────────────────────────────── */
.eyebrow{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--red-500)}

/* ── How it works ─────────────────────────────────────────────────────────── */
.how{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(52px,6vw,78px);background:var(--white)}
.how-grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:26px}
.how-card{background:var(--card);border-radius:34px;padding:38px 34px 40px}
.how-num{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;color:var(--red-500)}
.how-title{margin-top:22px;font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.1;text-transform:uppercase}
.how-card p{margin:14px 0 0;font-size:15px;line-height:22px;color:var(--gray-550);text-wrap:pretty}

/* ── Gold (tanda 43 · A) ───────────────────────────────────────────────────── */
.gold{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(60px,7vw,92px);background:var(--off-white)}
/* Tanda 45 · D4: toda sección llena la columna de 1440 de borde a borde. El texto arranca en el borde
   izquierdo y el objeto (tarjeta, panel) termina en el derecho (`space-between`); los bloques de
   texto crecen a 640 para que el hueco no sea un vacío. Valores del export. */
.gold-wrap{display:flex;flex-wrap:wrap;gap:44px clamp(32px,5vw,70px);align-items:center;justify-content:space-between}
.gold-copy{flex:1 1 400px;min-width:0;max-width:640px}
.gold-line{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,5vw,64px);line-height:.94;text-transform:uppercase;color:var(--black);white-space:nowrap}
.gold-line.first{margin-top:22px}
.gold-line.red{color:var(--red-500)}
.gold-lead{margin:26px 0 0;font-size:16px;line-height:24px;color:var(--black);text-wrap:pretty}
.gold-note{margin:14px 0 0;font-size:14px;line-height:21px;color:var(--gray-550);text-wrap:pretty}
.gold-btc{margin-top:22px;display:flex;align-items:flex-start;gap:12px}
.gold-btc-dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:5px;background:var(--btc-500)}
.gold-btc p{margin:0;font-size:14px;line-height:21px;color:var(--black);text-wrap:pretty}
.gold-btc strong{font-weight:700}
.gold-card{flex:0 1 400px;min-width:0;background:var(--black);border-radius:34px;padding:36px clamp(24px,3vw,36px) 32px;display:flex;flex-direction:column;align-items:center}
.gold-ring{position:relative;display:block;width:min(220px,100%);aspect-ratio:1}
.gold-ring>svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.gold-cup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gold-cup svg{display:block;overflow:visible}
.gold-count{margin-top:20px;font-size:13.5px;line-height:19px;color:var(--white);text-align:center}
.gold-stars{margin-top:14px;display:flex;gap:5px}
.gold-stars svg{display:block}
.gold-levels{width:100%;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gold-level{display:flex;flex-direction:column;align-items:center;gap:8px}
.gold-pill{display:flex;align-items:center;height:28px;padding:0 13px;border-radius:14px;background:var(--red-500)}
.gold-pill.btc{background:var(--btc-500)}
.gold-pill span{font-family:var(--font-display);position:relative;top:.1em;font-weight:400;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--white);white-space:nowrap}
.gold-pill.btc span{color:var(--on-btc)}
.gold-via{font-size:11.5px;line-height:16px;color:var(--gray-400);text-align:center}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.pricing{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(64px,7vw,96px);background:var(--black)}
.pricing-head{display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;gap:26px 40px}
.pricing-title{margin-top:18px;font-family:var(--font-display);font-weight:900;font-size:clamp(40px,6.4vw,64px);line-height:.95;text-transform:uppercase;color:var(--white)}
.pricing-title.red{margin-top:0;color:var(--red-500)}
.pricing-note{max-width:340px;margin:0 0 8px;font-size:15px;line-height:22px;color:var(--gray-400);text-wrap:pretty}
.plans{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:stretch}
.plan{background:#1a1a1a;border-radius:34px;padding:38px 34px 34px;display:flex;flex-direction:column}
.plan.btc{position:relative;background:var(--red-500)}
.plan-name{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:1.6px;text-transform:uppercase;color:var(--white)}
.plan-head{display:flex;align-items:center;gap:10px}
.badge{height:20px;padding:0 9px;border-radius:10px;background:var(--red-500);display:flex;align-items:center;white-space:nowrap;font-weight:700;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--white)}
.badge-best{position:absolute;right:28px;top:-11px;height:22px;padding:0 12px;border-radius:11px;background:var(--black);display:flex;align-items:center;white-space:nowrap;font-weight:700;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--white)}
.price-row{margin-top:26px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.plan.btc .price-row{gap:4px 10px}
.price{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,4.4vw,60px);line-height:1;color:var(--white)}
.plan.btc .price{color:var(--black)}
.per{white-space:nowrap;font-weight:500;font-size:14px;color:var(--gray-400)}
.was{white-space:nowrap;font-weight:500;font-size:16px;color:var(--white);text-decoration:line-through}
.plan p{margin:18px 0 0;font-size:14px;line-height:20px;color:var(--gray-400)}
.plan.btc p{color:var(--white)}
.plan-spacer{flex:1;min-height:26px}
.plan-cta{height:52px;border-radius:26px;border:1px solid var(--white);background:transparent;cursor:pointer}
.plan-cta span{font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:1.4px;color:var(--white)}
.plan-cta.solid{border:none;background:var(--black)}
/* Tanda 53 · 3. START FREE TRIAL de Monthly y Yearly: antes del lanzamiento, y en cualquier escritorio,
   el botón se cambia AHÍ MISMO por las dos insignias (las mismas medidas y el mismo aire de 12px del
   hero), centradas en el alto del botón (52). */
.plan-stores{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:52px}
.plan-stores[hidden],.plan-cta[hidden]{display:none}

/* ── Pay with bitcoin ─────────────────────────────────────────────────────── */
.btc-section{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(64px,7vw,96px);background:var(--white)}
.btc-wrap{display:flex;flex-wrap:wrap;gap:44px clamp(32px,5vw,70px);align-items:flex-start;justify-content:space-between}
.btc-copy{flex:1 1 420px;min-width:0;max-width:640px}
.btc-title{margin-top:20px;font-family:var(--font-display);font-weight:900;font-size:clamp(36px,5.6vw,54px);line-height:.95;text-transform:uppercase}
.btc-title.red{margin-top:0;color:var(--red-500)}
.btc-copy>p{margin:26px 0 0;font-size:16px;line-height:24px;color:var(--gray-550);text-wrap:pretty}
.btc-points{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.point{display:flex;gap:14px;align-items:flex-start}
.point-dot{width:9px;height:9px;border-radius:5px;background:var(--red-500);flex:none;margin-top:7px}
.point-body{flex:1}
.point-body b{display:block;font-weight:700;font-size:15px}
.point-body span{display:block;margin-top:3px;font-size:14px;line-height:20px;color:var(--gray-550)}

.btc-panel{flex:1 1 340px;min-width:0;max-width:420px;background:var(--card);border-radius:34px;padding:36px clamp(20px,3vw,36px) 34px}
.rail{display:flex;gap:8px;padding:4px;background:var(--line-strong);border-radius:22px}
.rail button{display:flex;align-items:center;justify-content:center;flex:1;height:38px;border-radius:19px;border:none;cursor:pointer;background:transparent;color:var(--black);font-weight:700;font-size:13px;transition:background var(--motion-colour)}
.rail button span{display:block;line-height:1;position:relative;top:.128em;color:inherit}
.rail button[aria-selected="true"]{background:var(--red-500);color:var(--white)}
.invoice-slot{margin-top:26px;display:flex;justify-content:center}
.locked{position:relative;width:232px;height:232px;background:var(--white);border:1px dashed var(--gray-400);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 30px;text-align:center}
.locked b{display:block;font-weight:700;font-size:12.5px;line-height:18px;color:var(--black);text-wrap:pretty}
.locked span{display:block;font-size:11.5px;line-height:16px;color:var(--gray-550);text-wrap:pretty}
.amount{margin-top:22px;text-align:center}
.amount b{display:block;font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1}
.amount span{display:block;margin-top:6px;font-weight:500;font-size:13px;color:var(--gray-550)}
.steps{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-strong);display:flex;flex-direction:column;gap:16px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{flex:none;width:22px;font-family:var(--font-display);font-weight:900;font-size:12px;line-height:19px;color:var(--red-500)}
.step-body{flex:1}
.step-body b{display:block;font-weight:700;font-size:13.5px;line-height:19px;color:var(--black)}
.step-body span{display:block;margin-top:3px;font-size:13px;line-height:19px;color:var(--gray-550);text-wrap:pretty}
.pay-cta{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:24px;border-radius:26px;background:var(--red-500);text-decoration:none}
.pay-cta:hover{background:var(--red-600)}
.pay-cta span{font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:1.4px;color:var(--white)}
.pay-foot{margin-top:12px;text-align:center;font-size:11.5px;line-height:17px;color:var(--gray-550);text-wrap:pretty}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{padding-top:clamp(52px,6.5vw,80px);padding-bottom:clamp(60px,7vw,90px);background:var(--off-white)}
/* Tanda 45 · D4: una sección sin objeto parte su lista en dos columnas desde ~1100px
   (`columns: 2 460px` del export). `break-inside:avoid` es nuestro: sin él, una respuesta abierta
   podría partirse entre las dos columnas. */
.faq-list{margin-top:30px;columns:2 460px;column-gap:clamp(32px,5vw,70px)}
.faq-item{border-top:1px solid var(--line-strong);break-inside:avoid}
.faq-item:last-child{border-bottom:1px solid var(--line-strong)}
.faq-q{display:flex;align-items:center;gap:24px;width:100%;padding:26px 0;background:none;border:none;cursor:pointer;text-align:left;color:var(--black)}
.faq-q[aria-expanded="true"]{color:var(--red-500)}
.faq-q>span:first-child{flex:1;font-weight:900;font-size:18px;text-transform:uppercase;color:inherit}
.faq-sign{position:relative;width:20px;height:20px;flex:none}
.faq-sign::before{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor}
.faq-sign::after{content:"";position:absolute;left:9px;top:0;width:2px;height:20px;background:currentColor}
.faq-q[aria-expanded="true"] .faq-sign::after{display:none}
.faq-a{margin:0;padding:0 60px 28px 0;font-size:15px;line-height:23px;color:var(--gray-550);text-wrap:pretty}
.faq-a[hidden]{display:none}

/* ── Cierre + footer ──────────────────────────────────────────────────────── */
.closer{padding-top:clamp(60px,7vw,92px);padding-bottom:clamp(56px,6vw,84px);background:var(--black)}
.closer-wrap{display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;gap:32px 60px}
.closer-line{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,7vw,76px);line-height:.94;text-transform:uppercase;color:var(--white)}
.closer-line.red{color:var(--red-500)}
.closer-cta{flex:none;height:64px;padding:0 40px;border-radius:32px;border:none;background:var(--red-500);color:var(--white);cursor:pointer;margin-bottom:10px}
.closer-cta:hover{background:var(--white);color:var(--black)}
.closer-cta span{font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:1.6px;color:inherit}

.footer{background:var(--red-500);padding:clamp(40px,5vw,56px) var(--gut) calc(46px + env(safe-area-inset-bottom))}
.footer-top{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;gap:34px 40px}
.footer-brand{display:flex;align-items:baseline;gap:14px}
.footer-brand img{width:44px;height:23.31px;display:block;object-fit:contain}
.footer-brand span{font-family:var(--font-body);font-weight:900;font-size:32.1px;line-height:22.9px;letter-spacing:.02em;color:var(--white);transform:scaleX(1.28);transform-origin:left center;margin-right:45px;white-space:nowrap}
.footer-blurb{margin:16px 0 0;max-width:300px;font-size:13px;line-height:19px;color:var(--white)}
.footer-cols{display:flex;flex-wrap:wrap;gap:28px clamp(30px,5vw,60px)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col b{font-weight:700;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--black)}
.footer-col a{font-size:13px;color:var(--white)}
.footer-col a:hover{color:var(--black)}
.footer-legal{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35);display:flex;flex-direction:column;gap:12px;font-size:11.5px;color:var(--white)}
.footer-legal-row{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}
/* Tanda 45 · D2: la atribución de Apple, en la línea legal a 10.5/15. */
.footer-attrib{margin:0;max-width:720px;font-size:10.5px;line-height:15px;color:var(--white);text-wrap:pretty}
.footer-legal a{color:var(--white);text-decoration:underline}
.footer-legal a:hover{color:var(--black)}

/* Tanda 45 · D6: las cinco anclas del marketing dejan 88px sobre su título a TODO ancho (hasta la
   tanda 44 solo en teléfono). En escritorio la cabecera no es fija; el hueco es el del export. */
.how,.gold,.pricing,.btc-section,.faq{scroll-margin-top:88px}
/* La fila de insignias del hero es destino de GET THE APP desde legal (`/#get-app`): el mismo hueco. */
#get-app{scroll-margin-top:24px}
@media (max-width:720px){#get-app{scroll-margin-top:88px}} /* `showBadges(…, phone ? 88 : 24)` del batch 54 */

/* ── Header de teléfono (tanda 43 · 5) ───────────────────────────────────────
   Hasta 720px: una fila de 64px, sticky — marca (taza 30, ESPRESS 21) a la izquierda y
   una píldora MENU de 44px a la derecha. MENU abre un panel negro debajo con la
   navegación en display con líneas finas y, al final, Sign in y GET THE APP lado a lado.
   El export elige el header con matchMedia('(max-width: 720px)'); acá lo elige CSS, y el
   script solo abre y cierra el panel. `position:sticky` funciona porque `.page` usa
   `overflow-x: clip`, no `hidden`. Las tres páginas lo repiten idéntico. */
.m-head{display:none}
@media (max-width:720px){
  .header{display:none}
  .m-head{display:block;position:sticky;top:0;z-index:30;background:var(--black);border-bottom:1px solid rgba(255,255,255,.14)}
  /* Anclas bajo la fila fija (tanda 44 · C2): 88px = los 64 de la cabecera + 24 de aire, el
     mismo número que las anclas de legal. Lo usan los enlaces del menú y del pie, y el botón
     PAY WITH BITCOIN, cuyo script lee este valor (site.js). */
  section[id]{scroll-margin-top:88px}
}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 20px}
.m-brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex:none}
.m-brand img{width:30px;height:15.7px;display:block;object-fit:contain}
.m-brand span{font-family:var(--font-body);font-weight:900;font-size:21px;line-height:15.7px;letter-spacing:.02em;color:var(--white);transform:scaleX(1.28);transform-origin:left center;margin-right:30px;white-space:nowrap}
/* Tanda 53 · 5. MENU → X (`menuButton()` del export). Cerrado: la píldora con borde, dos líneas de
   14 × 1.8 a ±2.9px (5.8 entre ellas) y MENU. Abierto (`.is-open`): un disco blanco de 44 con una X
   negra — las líneas se juntan, giran ±45° y se alargan ×1.15 — y la etiqueta se pliega (ancho 48 → 0,
   margen 10 → 0, opacidad 1 → 0). Abrir: las líneas se juntan en --dur-fast --ease-out y giran en
   --motion-indicator (420ms, spring t120 f9) a partir de los 150ms; padding y etiqueta en
   --motion-indicator; relleno y borde en --motion-colour. Cerrar (220ms, --ease-in): desgiran 0–120ms,
   se separan 120–220ms, píldora y relleno en --motion-collapse, la etiqueta vuelve en --dur-fast tras
   70ms. Cada estado declara la transición con la que SE LLEGA a él. */
.m-toggle{display:flex;align-items:center;box-sizing:border-box;height:44px;padding:0 18px;border-radius:22px;border:1px solid rgba(255,255,255,.4);background-color:transparent;cursor:pointer;transition:background-color var(--motion-collapse),border-color var(--motion-collapse),padding var(--motion-collapse)}
.m-toggle.is-open{padding:0 14px;border-color:var(--white);background-color:var(--white);transition:background-color var(--motion-colour),border-color var(--motion-colour),padding var(--motion-indicator)}
.m-bars{position:relative;display:block;flex:none;width:14px;height:14px}
.m-bar{position:absolute;left:0;top:6.1px;display:block;width:14px;height:1.8px;transition:transform 100ms var(--ease-in) 120ms}
.m-bar:first-child{transform:translateY(-2.9px)}
.m-bar:last-child{transform:translateY(2.9px)}
.m-toggle.is-open .m-bar{transform:translateY(0);transition:transform var(--dur-fast) var(--ease-out)}
.m-bar span{display:block;width:14px;height:1.8px;border-radius:1px;background-color:var(--white);transform:rotate(0deg) scaleX(1);transition:transform 120ms var(--ease-in),background-color var(--motion-collapse)}
.m-toggle.is-open .m-bar span{background-color:var(--black);transition:transform var(--motion-indicator) var(--dur-fast),background-color var(--motion-colour)}
.m-toggle.is-open .m-bar:first-child span{transform:rotate(45deg) scaleX(1.15)}
.m-toggle.is-open .m-bar:last-child span{transform:rotate(-45deg) scaleX(1.15)}
.m-label{display:block;overflow:hidden;white-space:nowrap;max-width:48px;margin-left:10px;opacity:1;transition:max-width var(--motion-collapse),margin-left var(--motion-collapse),opacity var(--dur-fast) var(--ease-out) 70ms}
.m-toggle.is-open .m-label{max-width:0;margin-left:0;opacity:0;transition:max-width var(--motion-indicator),margin-left var(--motion-indicator),opacity var(--dur-fast) var(--ease-out)}
.m-label span{font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--white)}
/* Reduce Motion: ninguna transición en el botón (`tr = v => rm ? 'none' : v`). */
@media (prefers-reduced-motion:reduce){
  .m-toggle,.m-toggle *{transition:none!important} /* !important: los estados abiertos pesan más */
}
.m-panel{background:var(--black);padding:6px 20px 26px;flex-direction:column}
.m-panel:not([hidden]){display:flex}
.m-link{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.6px;text-transform:uppercase;color:var(--white)}
.m-link:hover{color:var(--white)}
.m-chev{font-family:var(--font-body);font-weight:400;font-size:20px;color:var(--gray-400)}
.m-actions{margin-top:24px;display:flex;gap:10px}
.m-signin{flex:1;display:flex;align-items:center;justify-content:center;height:50px;border-radius:25px;border:1px solid rgba(255,255,255,.4);color:var(--white)}
.m-signin:hover{color:var(--white)}
.m-signin span{font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:inherit}
.m-get{flex:1;height:50px;border-radius:25px;border:none;background:var(--red-500);cursor:pointer}
.m-get span{display:block;font-family:var(--font-display);position:relative;top:.13em;font-weight:900;font-size:11px;letter-spacing:1.4px;color:var(--white)}