/* Backy, sitio de negocios. Una sola capa de tokens para es y en. */

:root {
  /* Paleta: tinta, hoja, papel */
  --ink: #1c1b16;
  --ink-hover: #36342b;
  --ink-soft: #545046;
  --paper: #f5f0e6;
  --paper-deep: #ece5d6;
  --paper-press: #e0d8c5;
  --card: #fffcf5;
  --line: #d8cfbc;
  --line-strong: #8a8371;
  --leaf: #3d9a32;
  --leaf-bright: #5cb848;
  --leaf-ink: #2a7a24;
  --leaf-wash: #e3edd3;
  --leaf-on-ink: #8fd06c;
  --stain: #8a5a2b;
  --on-ink: #f5f0e6;
  --on-ink-soft: #c9c2b2;
  --focus: #2a7a24;

  /* Tipografía */
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-text: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-h3: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --t-h2: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);
  --t-display: clamp(2.2rem, 1rem + 7vw, 5.6rem);
  --t-huge: clamp(5.5rem, 3rem + 12vw, 12rem);

  /* Espacio, base 4px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: 20px;
  --section: clamp(80px, 9vw + 40px, 152px);
  --wrap: 1200px;

  /* Forma */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-phone: 42px;
  --r-screen: 33px;
  --r-pill: 999px;

  /* Profundidad */
  --sh-paper: 0 1px 0 rgba(28, 27, 22, 0.05), 0 22px 40px -26px rgba(60, 45, 20, 0.45);
  --sh-lift: 0 2px 0 rgba(28, 27, 22, 0.04), 0 34px 60px -34px rgba(40, 30, 10, 0.55);
  --sh-note: 0 1px 2px rgba(28, 27, 22, 0.08), 0 10px 24px -14px rgba(28, 27, 22, 0.3);

  /* Movimiento */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.22, 1.18, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-glass: 320ms;
  --dur-stamp: 420ms;
  --dur-note: 640ms;
  --dur-sweep: 1800ms;

  /* Vidrio líquido: el material de la app Backy.
     --fill is the tint over the refracted backdrop; the -strong step is what a
     browser without backdrop-filter gets, the -lite step weak phones and
     prefers-reduced-transparency. Blur is never animated. */
  --sun: #efc06a;
  --glass-fill: rgba(252, 249, 242, 0.58);
  --glass-fill-lite: rgba(250, 247, 240, 0.86);
  --glass-fill-strong: rgba(250, 247, 240, 0.92);
  --glass-fill-leaf: rgba(229, 240, 218, 0.9);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-rim-soft: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;
  --glass-blur-lite: 6px;
  --glass-sat: 1.6;
  --sh-glass: 0 1px 1px rgba(28, 27, 22, 0.05), 0 16px 34px -18px rgba(40, 30, 10, 0.5);

  /* Textura de papel */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) { :root { --gutter: 32px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: decorative stamps may spill past the edge, but a clipped
   root is not a scroll container, so the sticky story section keeps working. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: "tnum" 0;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--s-3); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }

/* Tipos */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 17ch;
  text-wrap: balance;
}
.h2.wide { max-width: 22ch; }
h3 { font-size: var(--t-h3); line-height: 1.25; font-weight: 600; }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
.caption { font-size: var(--t-sm); color: var(--ink-soft); max-width: 60ch; }
.ico { width: 20px; height: 20px; flex: none; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 2px solid transparent;
  font-family: var(--f-text); font-size: var(--t-base); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-hover); }
.btn-ink:focus-visible { outline-color: var(--focus); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--on-ink); }
.btn-leaf { background: var(--leaf-on-ink); color: var(--ink); }
.btn-leaf:hover { background: var(--card); }
.btn-leaf:focus-visible { outline-color: var(--leaf-on-ink); }
.btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn-lg { min-height: 60px; padding: 0 var(--s-8); font-size: var(--t-lg); }

/* Cabecera */
/* Transparent over the hero; once the page scrolls, a glass pill (.header-glass)
   fades in behind the row and the page passes underneath it. The header itself
   carries no filter or opacity, so it is not a backdrop root for the pill. */
.site-header { position: sticky; top: 0; z-index: 30; }
.header-glass {
  position: absolute; z-index: -1; pointer-events: none;
  inset: 6px max(10px, calc((100% - var(--wrap)) / 2 - 16px));
  border-radius: var(--r-pill);
  --fill: rgba(247, 243, 234, 0.78);
  --gb: var(--glass-blur); --gb-lq: 10px;
  --spec-size: 34% 170%;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985);
  transition: opacity var(--dur-glass) var(--ease-out), transform var(--dur-glass) var(--ease-out), visibility 0s linear var(--dur-glass);
}
.site-header.is-scrolled .header-glass {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-glass) var(--ease-out), transform var(--dur-glass) var(--ease-out), visibility 0s;
}
.site-header.is-scrolled .main-nav a { color: var(--ink); }
.header-row { display: flex; align-items: center; gap: var(--s-4); min-height: 68px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.brand-logo { width: 92px; height: auto; }
.main-nav { display: none; gap: var(--s-1); margin-left: var(--s-8); }
.main-nav a, .lang a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover, .lang a:hover { color: var(--ink); background: var(--paper-deep); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.lang { display: flex; }
.lang a { min-width: 44px; justify-content: center; padding: 0 var(--s-2); }
.lang a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 380px) { .site-header .btn-sm span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-header .btn-sm { width: 44px; padding: 0; } }
@media (min-width: 960px) { .main-nav { display: flex; } }

/* 1. Hero */
.hero { padding-block: var(--s-8) var(--s-20); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.hero-copy { display: grid; gap: var(--s-5); align-content: start; }
.hero-copy .display { max-width: 13ch; }
:lang(en) .hero-copy .display { max-width: 15ch; font-size: clamp(2.2rem, 1rem + 6.2vw, 5rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero-play { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hint" "card"; }
.hero-play .hint { grid-area: hint; position: relative; z-index: 2; }
.hero-play .stampcard, .hero-field { grid-area: card; }
.hero-play .stampcard { z-index: 1; }
.hint { display: flex; align-items: flex-end; gap: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--leaf-ink); margin-bottom: var(--s-3); }
.hint-arrow { display: none; width: 96px; color: var(--leaf-ink); }

@media (max-width: 767px) {
  .hero { padding-top: var(--s-6); }
  .hero-grid { gap: var(--s-6); }
  .hero-copy { display: contents; }
  .hero-copy .display { order: 1; }
  .hero-copy .lede { order: 2; font-size: var(--t-base); }
  .hero-play { order: 3; }
  .hero-actions { order: 4; margin-top: 0; }
  .hero-actions .btn { flex: 1 1 100%; }
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-16) var(--s-24); }
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: var(--s-12); }
  .hero-play .hint { position: absolute; left: 0; top: -92px; }
  .hint-arrow { display: block; transform: translateY(30px) rotate(6deg); }
}
/* Tablet: the card column was too narrow, the shop name broke into three lines. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
/* Short laptop screens (1536x713, 1280x720): keep the hero buttons above the fold.
   Same line breaks, the title only scales with the screen height. */
@media (min-width: 768px) and (max-height: 820px) {
  .hero { padding-top: var(--s-6); }
  .hero-copy .display { font-size: min(var(--t-display), 12vh); }
  :lang(en) .hero-copy .display { font-size: min(clamp(2.2rem, 1rem + 6.2vw, 5rem), 10vh); }
}

/* Tarjeta de sellos */
.stampcard {
  position: relative;
  background-color: var(--card);
  background-image: var(--grain);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-lift);
  transform: rotate(-1.5deg);
  max-width: 460px;
  isolation: isolate;
}
.stampcard.is-hit { animation: card-hit 240ms var(--ease-out); }
@keyframes card-hit { 0% { transform: rotate(-1.5deg) translateY(0); } 35% { transform: rotate(-1.5deg) translateY(3px) scale(0.995); } 100% { transform: rotate(-1.5deg) translateY(0); } }
@media (min-width: 768px) { .stampcard { padding: var(--s-6) var(--s-8) var(--s-8); transform: rotate(2deg); margin-left: auto; max-width: 540px; } .stampcard.is-hit { animation-name: card-hit-lg; } }
@media (min-width: 768px) and (max-width: 1023px) { .stampcard { padding-inline: var(--s-5); } }
@keyframes card-hit-lg { 0% { transform: rotate(2deg); } 35% { transform: rotate(2deg) translateY(3px) scale(0.995); } 100% { transform: rotate(2deg); } }

.stampcard-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding-bottom: var(--s-4); border-bottom: 1px dashed var(--line); }
.shop-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-family: var(--f-display); font-size: var(--t-xl); }
.shop-name { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; }
.shop-rule { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.sample-tag { align-self: start; font-size: var(--t-xs); color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px var(--s-2); }

.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); padding-block: var(--s-6); }
.slot { position: relative; aspect-ratio: 1; border: 2px dashed var(--line-strong); border-radius: 50%; display: grid; place-items: center; }
.slot-n { font-family: var(--f-text); font-weight: 500; font-size: var(--t-lg); color: var(--ink-soft); transition: opacity var(--dur) var(--ease-out); }
.slot.is-stamped .slot-n { opacity: 0; }
.slot .stamp { position: absolute; inset: -14%; width: 128%; height: 128%; color: var(--leaf); filter: url(#ink); mix-blend-mode: multiply; transform: rotate(var(--rot, 0deg)); }
.slot .stamp.is-new { animation: stamp-in var(--dur-stamp) var(--ease-out) both; }
.slot .stamp.is-new::after { content: none; }
.slot .splash { position: absolute; inset: 8%; border-radius: 50%; background: var(--leaf); opacity: 0; mix-blend-mode: multiply; animation: splash 520ms var(--ease-out) both; pointer-events: none; }
@keyframes stamp-in {
  0% { opacity: 0; transform: translateY(-14px) scale(1.7) rotate(calc(var(--rot, 0deg) - 12deg)); }
  55% { opacity: 1; transform: translateY(0) scale(0.92) rotate(var(--rot, 0deg)); }
  75% { transform: scale(1.03) rotate(var(--rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}
@keyframes splash { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 0.18; } 100% { opacity: 0; transform: scale(1.5); } }

.gift {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: grid; justify-items: center; gap: var(--s-1);
  padding: var(--s-3) var(--s-6) var(--s-4);
  border: 4px solid var(--ink); outline: 1.5px solid var(--ink); outline-offset: 4px;
  border-radius: var(--r-sm);
  color: var(--ink); background: rgba(255, 252, 245, 0.9);
  filter: url(#ink);
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: 0; visibility: hidden; pointer-events: none;
  text-align: center;
  /* Rotated, it is wider than its box: keep it inside the card at mid widths. */
  max-width: 82%;
  box-sizing: border-box;
}
.gift-word { font-family: var(--f-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); line-height: 1; }
.gift-sub { font-size: var(--t-sm); font-weight: 600; }
.stampcard.is-full .gift { opacity: 1; visibility: visible; animation: gift-in 460ms var(--ease-out) both; }
@keyframes gift-in { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(1.8); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(0.94); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }

.stampcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.stamp-status { font-size: var(--t-base); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) { .stamp-status { font-size: var(--t-sm); } .stamp-btn { min-width: 0; padding: 0 var(--s-5); font-size: var(--t-base); } }
.stamp-status [data-count] { font-weight: 700; font-size: var(--t-xl); color: var(--ink); }
.stamp-btn { min-width: 148px; min-height: 56px; font-size: var(--t-lg); white-space: nowrap; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .slot .stamp.is-new, .slot .splash, .stampcard.is-hit, .stampcard.is-full .gift { animation: none !important; }
  .slot .splash { display: none; }
}

/* 2. Historia */
.story { background: var(--paper-deep); padding-block: var(--section); overflow-x: clip; }
.story-inner { display: grid; gap: var(--s-10); }
.story-body { display: grid; gap: var(--s-10); }
.story-steps { display: grid; gap: var(--s-6); counter-reset: st; }
.story-step { font-size: var(--t-xl); line-height: 1.35; max-width: 30ch; padding-left: var(--s-10); position: relative; }
.story-step::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0.1em; font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink-soft); }
.story-step-final::before { content: ""; width: 22px; height: 22px; top: 0.25em; background: var(--leaf); border-radius: 2px 60% 2px 60%; }
.story-step-final strong { font-weight: 600; }

.story-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; justify-items: center; }
.paper-card {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1.62;
  background-color: #efe3c8;
  background-image: var(--grain), linear-gradient(transparent 49.5%, rgba(120, 90, 40, 0.12) 50%, transparent 50.5%);
  border-radius: var(--r-xs);
  box-shadow: var(--sh-paper);
  padding: var(--s-4);
  transform: rotate(-4deg);
  display: grid; align-content: space-between;
}
.paper-shop { font-family: var(--f-display); font-size: var(--t-lg); color: #4c3f28; }
.paper-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.paper-slot { aspect-ratio: 1; border: 1.5px solid rgba(76, 63, 40, 0.5); border-radius: 50%; position: relative; }
.paper-slot svg { position: absolute; inset: -12%; width: 124%; height: 124%; color: #2f6b8a; filter: url(#ink); mix-blend-mode: multiply; opacity: 0.85; }
.paper-slot:nth-child(2) svg { transform: rotate(24deg); }
.paper-slot:nth-child(3) svg { transform: rotate(-30deg); }
.paper-stain { position: absolute; width: 58%; right: -10%; top: -18%; color: var(--stain); opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; }
.paper-fold { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 48%, transparent 56%); pointer-events: none; opacity: 0.6; }

/* Phones: smoked-glass body with a light rim. ::before is the fixed glare on the
   cover glass, ::after the specular spot, moved with transform only (JS writes
   --px/--py from the pointer or the scroll position). The tilt uses the
   individual `rotate` property, so the authored `transform` stays untouched. */
.phone {
  position: relative; border-radius: var(--r-phone); padding: 9px;
  background: linear-gradient(155deg, #4a473e 0%, var(--ink) 34%, #0f0e0b 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1.5px 0 rgba(255, 255, 255, 0.32), var(--sh-lift);
  width: 100%;
  overflow: hidden; isolation: isolate;
  rotate: var(--ax, 0) var(--ay, 1) 0 var(--ta, 0deg);
}
.phone img { width: 100%; border-radius: var(--r-screen); background: var(--card); }
.phone::before, .phone::after { content: ""; position: absolute; pointer-events: none; }
.phone::before {
  inset: 0; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.09) 41%, rgba(255, 255, 255, 0) 53%);
}
.phone::after {
  left: 0; top: 0; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0));
  translate: calc(var(--px, 0.22) * 112% - 45%) calc(var(--py, 0.12) * 240% - 45%);
}
.caja-phones, .styles-phone, .onecode-grid, .trust { perspective: 1100px; }
.story-phone { max-width: 230px; }

@media (min-width: 900px) {
  .story-inner { grid-template-columns: 1fr; }
  .story-body { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-16); }
  .paper-card { max-width: 360px; }
  .story-phone { max-width: 270px; }
}

/* Modo animado: lo activa app.js si hay GSAP y movimiento permitido */
.story.is-anim { padding-block: 0; height: 340svh; }
.story.is-anim .story-inner { position: sticky; top: 0; height: 100svh; }
.story.is-anim .story-inner { align-content: center; padding-top: calc(68px + var(--s-6)); padding-bottom: var(--s-8); gap: var(--s-6); }
.story.is-anim .story-body { grid-template-columns: 1fr; gap: var(--s-6); }
.story.is-anim .story-steps { display: grid; grid-template-areas: "s"; min-height: 8.5em; }
.story.is-anim .story-step { grid-area: s; opacity: 0; font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; max-width: 22ch; }
.story.is-anim .story-step strong { font-weight: 400; color: var(--leaf-ink); }
.story.is-anim .story-step:first-child { opacity: 1; }
.story.is-anim .story-stage { grid-template-columns: 1fr; grid-template-areas: "x"; min-height: 300px; }
.story.is-anim .paper-card, .story.is-anim .story-phone { grid-area: x; }
.story.is-anim .story-phone { opacity: 0; max-width: 190px; }
.story.is-anim .paper-stain { opacity: 0; }
@media (min-width: 900px) {
  .story.is-anim .story-body { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-16); }
  .story.is-anim .story-steps { min-height: 7em; }
  .story.is-anim .story-stage { min-height: 600px; }
  .story.is-anim .story-phone { max-width: 280px; }
  .story.is-anim .paper-card { max-width: 460px; }
}
/* Short laptop screens: the pinned frame was taller than the window, so the title
   slid under the header and the phone was cut at the bottom. Size the stage and
   the phone by the window height. */
@media (min-width: 900px) and (max-height: 900px) {
  .story.is-anim .story-stage { min-height: min(600px, calc(100svh - 300px)); }
  .story.is-anim .story-phone { max-width: min(280px, calc((100svh - 330px) * 0.45)); }
  .story.is-anim .paper-card { max-width: min(460px, calc((100svh - 300px) * 1.3)); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .story.is-anim .story-title { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.4rem); }
  .story.is-anim .story-step { font-size: var(--t-lg); }
  .story.is-anim .story-phone { max-width: 170px; }
}

/* 3. Caja */
.caja-grid { display: grid; gap: var(--s-12); }
.caja-phones { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; max-width: 520px; padding-bottom: var(--s-8); }
.caja-phones .phone { width: 100%; max-width: 250px; }
.phone-front { grid-column: 1 / 2; grid-row: 1; z-index: 1; transform: rotate(-3deg); margin-top: var(--s-12); }
.phone-back { grid-column: 2 / 3; grid-row: 1; transform: rotate(4deg) translateX(-14%); }
.caja-phones .caption { grid-column: 1 / -1; margin-top: var(--s-6); }
.caja-copy { display: grid; gap: var(--s-8); align-content: start; }
.steps { display: grid; gap: var(--s-6); }
.steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-4); row-gap: var(--s-1); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.step-n { grid-row: span 2; font-family: var(--f-text); font-weight: 700; font-size: 2.75rem; line-height: 0.9; letter-spacing: -0.03em; color: var(--leaf-ink); }
.steps p { color: var(--ink-soft); max-width: 46ch; }
.needs { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); max-width: 56ch; color: var(--ink-soft); }
.needs strong { color: var(--ink); }
@media (max-width: 899px) { .caja-phones { order: 2; } }
@media (min-width: 900px) {
  .caja-grid { grid-template-columns: 5fr 7fr; gap: var(--s-16); align-items: center; }
}

/* 4. Mecánica */
.mech { border-top: 1px solid var(--line); }
.mech-grid { display: grid; gap: var(--s-12); margin-top: var(--s-12); }
.mech-defs { display: grid; gap: var(--s-8); }
.mech-defs dt { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; margin-bottom: var(--s-3); }
.mech-defs dd { font-size: var(--t-lg); color: var(--ink-soft); max-width: 44ch; }
.mech-note { font-size: var(--t-base); max-width: 52ch; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.receipt-fig { display: grid; gap: var(--s-5); justify-items: start; }
.receipt {
  width: 100%; max-width: 320px;
  background-color: var(--card); background-image: var(--grain);
  padding: var(--s-6) var(--s-5) var(--s-8);
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--t-sm); line-height: 1.7; color: var(--ink);
  transform: rotate(1.8deg);
  filter: drop-shadow(0 18px 22px rgba(60, 45, 20, 0.22));
  --zig: radial-gradient(circle at 8px 0, transparent 7px, #000 7.5px) 0 0 / 16px 100%;
  -webkit-mask: linear-gradient(#000, #000) center / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom / 14px 8px repeat-x, radial-gradient(circle at 50% 0, transparent 6px, #000 6.5px) top / 14px 8px repeat-x;
          mask: linear-gradient(#000, #000) center / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom / 14px 8px repeat-x, radial-gradient(circle at 50% 0, transparent 6px, #000 6.5px) top / 14px 8px repeat-x;
}
.r-head { text-align: center; font-weight: 700; }
.r-sub { text-align: center; color: var(--ink-soft); padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom: 1px dashed var(--line-strong); }
.r-line { display: flex; justify-content: space-between; gap: var(--s-4); }
.r-total { font-weight: 700; padding-top: var(--s-2); margin-top: var(--s-2); border-top: 1px dashed var(--line-strong); }
.r-ok { color: var(--leaf-ink); font-weight: 700; margin-top: var(--s-3); }
.r-no { color: var(--ink-soft); }
.r-no span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.receipt-fig figcaption { max-width: 38ch; color: var(--ink-soft); }
.receipt-fig figcaption strong { color: var(--ink); display: block; font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--s-1); }
@media (min-width: 900px) {
  .mech-grid { grid-template-columns: 7fr 5fr; gap: var(--s-16); }
  .mech-defs { grid-template-columns: 1fr 1fr; column-gap: var(--s-10); row-gap: var(--s-10); align-content: start; }
  .mech-note { grid-column: 1 / -1; }
  .receipt-fig { justify-items: center; margin-top: calc(var(--s-12) * -1); }
}

/* 5. Avisos */
.push { background: var(--leaf-wash); }
.push-grid { display: grid; gap: var(--s-12); }
.push-copy { display: grid; gap: var(--s-8); align-content: start; }
.push-list { display: grid; gap: var(--s-4); }
.push-list > div { display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: 1px solid rgba(42, 122, 36, 0.22); }
.push-list dt { font-weight: 600; font-size: var(--t-lg); }
.push-list dd { color: var(--ink-soft); max-width: 46ch; }
.quiet { display: flex; gap: var(--s-3); align-items: flex-start; max-width: 52ch; color: var(--ink); }
.quiet .ico { margin-top: 3px; color: var(--leaf-ink); }
.notes { position: relative; display: grid; gap: var(--s-3); align-content: center; max-width: 440px; width: 100%; justify-self: center; }
/* The wallpaper sits in rows 1-3 behind the three notes, never behind the caption. */
.notes > .note, .notes-cap { grid-column: 1; }
.notes .n1 { grid-row: 1; } .notes .n2 { grid-row: 2; } .notes .n3 { grid-row: 3; } .notes .notes-cap { grid-row: 4; margin-top: var(--s-8); }
.notes-wall {
  grid-row: 1 / 4; grid-column: 1; margin: calc(var(--s-6) * -1) calc(var(--s-4) * -1) calc(var(--s-5) * -1);
  position: relative; overflow: hidden; border-radius: var(--r-phone);
  background: linear-gradient(165deg, var(--leaf-ink) 0%, var(--leaf) 52%, #6fae4f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--sh-lift);
}
.wall-sun { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); left: -9%; top: -14%; }
.wall-leaf { position: absolute; width: 58%; right: -8%; top: 16%; color: var(--leaf-on-ink); rotate: -12deg; }
.wall-ring { position: absolute; width: 40%; left: 30%; top: 30%; color: rgba(255, 252, 245, 0.5); }
@media (min-width: 900px) { .notes-wall { margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) calc(var(--s-6) * -1); } }
.note { background: var(--card); border-radius: var(--r-lg); padding: var(--s-4) var(--s-4) var(--s-4) 64px; position: relative; z-index: 1; box-shadow: var(--sh-note); font-size: var(--t-sm); line-height: 1.4; }
.note-app { position: absolute; left: var(--s-4); top: var(--s-4); width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--ink) url("favicon.svg") center / 100% no-repeat; }
.note-top { display: flex; justify-content: space-between; gap: var(--s-2); margin-bottom: 2px; }
.note-top span { color: var(--ink-soft); font-size: var(--t-xs); }
.n1 { transform: translateX(-2%) rotate(-1.2deg); z-index: 3; }
.n2 { transform: translateX(2%); z-index: 2; }
@media (min-width: 900px) { .n1 { transform: translateX(-5%) rotate(-1.2deg); } .n2 { transform: translateX(7%); } }
.n3 { transform: translateX(-1%) rotate(0.8deg); }
.notes-cap { margin-top: var(--s-3); text-align: center; }
@media (min-width: 900px) { .push-grid { grid-template-columns: 6fr 5fr; gap: var(--s-16); align-items: center; } }

/* 6. Más ventas: índice */
.index { margin-top: var(--s-12); border-top: 2px solid var(--ink); }
.index li { display: grid; gap: var(--s-2); padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.index h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.05; }
.index p { color: var(--ink-soft); max-width: 52ch; }
.index .index-eg { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: var(--t-sm); color: var(--leaf-ink); }
@media (min-width: 900px) {
  .index li { grid-template-columns: 4fr 6fr 2.4fr; gap: var(--s-8); align-items: baseline; padding-block: var(--s-8); }
  .index .index-eg { text-align: right; }
}

/* 7. Estilos */
.styles { background: var(--card); border-block: 1px solid var(--line); }
.styles-grid { display: grid; gap: var(--s-10); justify-items: center; text-align: center; }
.styles-copy { display: grid; gap: var(--s-5); justify-items: center; }
.styles-copy .h2 { max-width: 20ch; }
.styles-copy p { color: var(--ink-soft); max-width: 50ch; font-size: var(--t-lg); }
.switches { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--paper-deep); border: 1px solid var(--line); }
.seg button {
  min-height: 44px; min-width: 96px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-soft); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg button:hover { color: var(--ink); background: var(--paper-press); }
.seg button[aria-pressed="true"]:hover { background: var(--ink-hover); color: var(--on-ink); }
.seg button:active { transform: scale(0.98); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* width: 100% so the phone is 300px before its lazy image loads too (it took the
   width of the caption, and the section grew by 47px under the reader). */
.styles-phone { display: grid; gap: var(--s-4); justify-items: center; width: 100%; }
.phone-lg { max-width: 300px; }
.phone-lg img { transition: opacity var(--dur) var(--ease-out); }
.phone-lg img.is-swapping { opacity: 0.2; }

/* 8. Un código */
.onecode-grid { display: grid; gap: var(--s-8); align-items: center; }
.onecode-num { font-family: var(--f-text); font-weight: 700; font-size: var(--t-huge); line-height: 0.8; letter-spacing: -0.04em; color: var(--leaf); }
.onecode-copy { display: grid; gap: var(--s-5); }
.onecode-copy p { color: var(--ink-soft); font-size: var(--t-lg); max-width: 44ch; }
.onecode-phone { max-width: 260px; transform: rotate(3deg); justify-self: center; }
@media (min-width: 900px) {
  /* The phone column has a fixed width: as an auto column it was 0px wide until the
     lazy image loaded, and the page grew by 266px under a reader who had just
     jumped to #calculadora or #demo. */
  .onecode-grid { grid-template-columns: auto 1fr 260px; gap: var(--s-12); }
  .onecode-num { align-self: start; margin-top: -0.06em; }
}

/* 9. Panel */
.panel { border-top: 1px solid var(--line); }
.browser { margin-top: var(--s-10); border-radius: var(--r-md); overflow: hidden; background: #0f1422; box-shadow: var(--sh-lift); border: 1px solid #262c3b; }
.browser-bar { display: flex; gap: 6px; padding: 10px 14px; background: #1a2030; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a4256; }
.browser img { width: 100%; }
.panel-list { display: grid; gap: 0; margin-top: var(--s-10); }
.panel-list > div { padding-block: var(--s-4); border-bottom: 1px solid var(--line); display: grid; gap: 2px; align-content: start; }
.panel-list dt { font-weight: 600; font-size: var(--t-lg); }
.panel-list dd { color: var(--ink-soft); max-width: 48ch; }
@media (min-width: 768px) { .panel-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-12); } }
.trust { display: grid; gap: var(--s-8); margin-top: var(--section); align-items: center; }
.trust-quote p { font-family: var(--f-display); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.3rem); line-height: 1.1; max-width: 18ch; text-wrap: balance; }
.trust-quote p::before { content: "«"; color: var(--leaf); }
.trust-quote p::after { content: "»"; color: var(--leaf); }
.trust-copy { display: grid; gap: var(--s-4); color: var(--ink-soft); max-width: 46ch; }
.trust-phone { max-width: 240px; justify-self: center; transform: rotate(-2deg); }
@media (min-width: 900px) {
  .trust { grid-template-columns: 6fr 4fr 3fr; gap: var(--s-10); }
}

/* 10. Calculadora */
.calc { background: var(--leaf-wash); }
.calc-grid { display: grid; gap: var(--s-10); }
.calc-intro { display: grid; gap: var(--s-4); }
.calc-intro p { color: var(--ink-soft); font-size: var(--t-lg); max-width: 44ch; }
.calc-form { display: grid; gap: var(--s-6); }
.field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-1) var(--s-4); }
.field label { font-weight: 600; }
.field output { font-weight: 700; font-size: var(--t-xl); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.field input { grid-column: 1 / -1; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--ink) var(--fill, 50%), rgba(28, 27, 22, 0.16) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: rgba(28, 27, 22, 0.16); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(28, 27, 22, 0.25); transition: transform var(--dur-fast) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.95); background: var(--leaf-wash); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--focus); }
input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }

.calc-result { background: var(--card); border-radius: var(--r-lg); padding: var(--s-8) var(--s-6); box-shadow: var(--sh-paper); display: grid; gap: var(--s-2); align-content: center; }
.calc-label { font-size: var(--t-lg); font-weight: 600; }
.calc-big { font-family: var(--f-text); font-weight: 700; font-size: clamp(5rem, 3rem + 9vw, 9rem); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.calc-big span { text-decoration: underline; text-decoration-color: var(--leaf-bright); text-decoration-thickness: 0.07em; text-underline-offset: 0.08em; text-decoration-skip-ink: none; }
.calc-big { margin-bottom: var(--s-2); }
.calc-sub { color: var(--ink-soft); }
.calc-formula { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: var(--t-sm); color: var(--ink-soft); padding-top: var(--s-3); margin-top: var(--s-2); border-top: 1px dashed var(--line-strong); overflow-wrap: anywhere; }
.calc-note { font-size: var(--t-sm); color: var(--ink-soft); max-width: 62ch; }
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 6fr 5fr; column-gap: var(--s-16); row-gap: var(--s-10); }
  .calc-intro { grid-column: 1 / -1; }
  .calc-form { align-content: center; }
  .calc-note { grid-column: 1 / -1; }
}

/* 11. Demo */
.demo-grid { display: grid; gap: var(--s-10); align-items: center; }
.demo-qr { display: none; }
.demo-copy { display: grid; gap: var(--s-5); }
.demo-copy > p { color: var(--ink-soft); max-width: 46ch; }
.demo-copy .demo-mobile { margin-top: var(--s-1); }
.demo-link a, .demo-own a { color: var(--leaf-ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; padding-block: 10px; }
.demo-link a:hover, .demo-own a:hover { color: var(--ink); }
.demo-link { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .demo-grid { grid-template-columns: auto 1fr; gap: var(--s-16); }
  .demo-qr { display: grid; justify-items: center; gap: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--sh-paper); }
  .qr { width: 300px; height: 300px; }
  .qr-label { font-family: var(--f-display); font-size: var(--t-xl); max-width: 16ch; text-align: center; line-height: 1.2; }
  .demo-mobile { display: none; }
  .demo-link { display: block; }
}

/* 12. Planes */
.plans { border-top: 1px solid var(--line); }
.plans-grid { display: grid; gap: var(--s-5); margin-top: var(--s-12); }
.plan { border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.plan-name { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); line-height: 1; }
.plan-for { color: var(--ink-soft); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.ph { font-family: var(--f-display); font-size: var(--t-xl); }
.per { font-size: var(--t-sm); color: var(--ink-soft); }
.plan-list { display: grid; gap: var(--s-2); }
.plan-list li { position: relative; padding-left: var(--s-6); }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 12px; background: var(--leaf); border-radius: 2px 60% 2px 60%; }
.dev { display: inline-block; font-size: var(--t-xs); font-weight: 600; border: 1px solid currentColor; border-radius: var(--r-pill); padding: 0 var(--s-2); margin-left: var(--s-1); color: var(--ink-soft); }
.plan .btn { justify-self: start; margin-top: var(--s-2); }
.plan-pro { background: var(--ink); color: var(--on-ink); padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.plan-pro .btn { margin-top: auto; align-self: flex-start; }
.plan-pro .plan-list { gap: var(--s-3); font-size: var(--t-lg); margin-bottom: var(--s-4); }
.plan-pro .plan-for, .plan-pro .per { color: var(--on-ink-soft); }
.plan-pro .plan-name { font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); }
.plan-pro .ph { font-size: var(--t-xl); }
.plan-pro .plan-list li::before { background: var(--leaf-on-ink); }
.plan-flag { font-size: var(--t-sm); font-weight: 600; color: var(--leaf-on-ink); }
.plan-side { background: var(--card); border: 1px solid var(--line); }
.plans-note { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .plans-grid { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  .plan-pro { grid-row: span 2; padding: var(--s-12); }
}

/* 13. Preguntas */
.faq { background: var(--paper-deep); }
.faq-grid { display: grid; gap: var(--s-8); }
.faq-list { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 64px; padding-block: var(--s-4); font-weight: 600; font-size: var(--t-lg); line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--leaf-ink); }
.faq summary .ico { transition: transform var(--dur) var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding-bottom: var(--s-5); color: var(--ink-soft); max-width: 60ch; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 4fr 7fr; gap: var(--s-16); } .faq .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } }

/* 14. Cierre */
.final { padding-block: var(--section); position: relative; overflow: hidden; }
.final-grid { display: grid; gap: var(--s-8); align-items: center; }
.final-grid > div { display: grid; gap: var(--s-5); justify-items: start; }
.final-title { max-width: 14ch; }
.wa-num { font-size: var(--t-sm); color: var(--ink-soft); }
.final-stamp { width: min(70vw, 360px); color: var(--leaf); filter: url(#ink); transform: rotate(-14deg); justify-self: center; opacity: 0.9; mix-blend-mode: multiply; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 1fr auto; } }

/* Pie */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-10) calc(var(--s-10) + 76px); font-size: var(--t-sm); color: var(--ink-soft); }
.footer-row { display: grid; gap: var(--s-2); }
.footer-row p { max-width: 60ch; }
.footer-logo { width: 84px; color: var(--ink); margin-bottom: var(--s-2); }
.site-footer a { color: var(--ink); display: inline-block; padding-block: 10px; }
.site-footer a:hover { color: var(--leaf-ink); }
@media (min-width: 900px) { .site-footer { padding-bottom: var(--s-10); } .footer-row { grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s-8); } .footer-logo { margin: 0; } }

/* Barra fija en el celular */
/* A floating glass capsule under the button, like the header pill. */
.sticky-cta {
  position: fixed; z-index: 40;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px; border-radius: var(--r-pill);
  --gb: 14px; --gb-lq: 8px; --spec-size: 40% 180%;
  transform: translateY(calc(100% + 24px)); transition: transform var(--dur) var(--ease-out);
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- Vidrio líquido ----------
   One material, four places: header pill, hero lens, notifications, sticky CTA.
   Layers of the material, bottom to top:
   1. backdrop: blur + saturate everywhere backdrop-filter exists; Chromium also
      gets url(#lq-N), a per-element SVG filter app.js builds (edge-lens
      displacement map + feTurbulence -> feDisplacementMap). Safari and Firefox
      never receive url(), so nothing in them depends on it.
   2. tint (--fill) with a specular spot whose position is --sx/--sy.
   3. rim: inner top light, hairline, soft floating shadow. */
.header-glass, .lens, .notes .note, .sticky-cta {
  background: var(--fill-now, var(--glass-fill-strong));
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-rim-soft), inset 0 -1px 1px rgba(28, 27, 22, 0.05), var(--sh-glass);
  overflow: hidden;
}
/* The specular spot: a pane-sized layer whose centre is moved to (--sxn, --syn)
   with translate only, under the pane's content, clipped by its radius. */
.header-glass::after, .lens::after, .notes .note::after, .sticky-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(var(--spec-size, 70% 120%) at 50% 50%, rgba(255, 255, 255, var(--spec, 0.6)), rgba(255, 255, 255, 0) 70%);
  translate: calc((var(--sxn, 0.28) - 0.5) * 100%) calc((var(--syn, 0) - 0.5) * 100%);
}
.glass-live .header-glass::after, .glass-live .lens::after, .glass-live .notes .note::after, .glass-live .sticky-cta::after { will-change: translate; }
.lens { z-index: 0; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-glass, .lens, .notes .note, .sticky-cta {
    --fill-now: var(--fill, var(--glass-fill));
    -webkit-backdrop-filter: blur(var(--gb, var(--glass-blur))) saturate(var(--gs, var(--glass-sat)));
            backdrop-filter: blur(var(--gb, var(--glass-blur))) saturate(var(--gs, var(--glass-sat)));
  }
  /* Only Chromium gets this class (app.js), and only on capable devices. */
  .glass-liquid .header-glass, .glass-liquid .lens, .glass-liquid .notes .note, .glass-liquid .sticky-cta {
    backdrop-filter: blur(var(--gb-lq, 8px)) var(--lf, blur(0px)) saturate(var(--gs, var(--glass-sat)));
  }
  /* The oldest notification stays a lite pane: three refracting notes plus the
     header and the CTA would exceed the four-layer budget on a phone. It sits
     on the calm end of the wallpaper, so the difference does not show. */
  .notes .n3, .glass-liquid .notes .n3 {
    --fill-now: var(--glass-fill-leaf);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Hero: brand shapes drift behind the stamp card, a glass lens floats over them. */
.hero-field { position: relative; z-index: 0; pointer-events: none; margin: -26px calc(var(--gutter) * -1) -30px; }
.shape { position: absolute; display: block; }
.shape-leaf { width: 44%; max-width: 240px; right: -6%; top: -12%; color: var(--leaf); rotate: -16deg; opacity: 0.8; }
.shape-ring { width: 36%; max-width: 200px; left: -7%; bottom: -10%; color: var(--leaf-on-ink); opacity: 0.85; }
.shape-sun { width: 30%; max-width: 160px; aspect-ratio: 1; border-radius: 50%; background: var(--sun); right: 10%; bottom: -8%; opacity: 0.85; }
.lens {
  position: absolute; width: 32%; max-width: 170px; aspect-ratio: 1; border-radius: 50%;
  right: 7%; top: -15%;
  --fill: rgba(255, 252, 245, 0.06); --gb: 5px; --gb-lq: 0.6px; --gs: 1.12; --spec: 0.5; --spec-size: 56% 40%; --syn: 0.06;
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-rim-soft), inset 0 -12px 22px -14px rgba(28, 27, 22, 0.28), inset 0 12px 20px -12px rgba(255, 255, 255, 0.7), var(--sh-glass);
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.glass-ready .lens { opacity: 1; }
@media (max-width: 767px) {
  /* Room under the card for the shapes; they stay inside it, clear of the buttons. */
  .hero-play { padding-bottom: var(--s-6); }
  .hero-field { margin-bottom: 0; }
  .shape-leaf { top: -9%; right: -15%; }
  .shape-ring { width: 34%; bottom: 0; left: -9%; }
  /* At phone width the lens had no room beside the card and read as clutter:
     the shapes alone peek out, the lens is a desktop-width moment. */
  .shape-sun, .lens { display: none; }
}
@media (min-width: 768px) { .hero-field { margin: -60px -56px -64px -24px; } }

/* Notifications: glass panes over the wallpaper. Text stays ink; contrast is
   measured against the darkest wallpaper pixel behind each pane. */
.notes .note { --fill: rgba(252, 249, 242, 0.7); --gb: 18px; --gb-lq: 10px; --spec-size: 60% 140%; border-radius: var(--r-lg); }
.notes .note-top span { color: var(--ink-soft); }
.notes.is-armed:not(.is-in) .note { opacity: 0; translate: 0 -18px; scale: 0.96; }
.notes.is-in .note {
  transition: opacity 360ms var(--ease-out) var(--d, 0ms), translate var(--dur-note) var(--ease-spring) var(--d, 0ms), scale var(--dur-note) var(--ease-spring) var(--d, 0ms);
}
.notes .n3 { --d: 0ms; } .notes .n2 { --d: 170ms; } .notes .n1 { --d: 340ms; }

/* Pro: a glass edge (static light rim) and a highlight that runs once around
   it when the card comes into view, and again on hover. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: -60deg; }
.plan-pro { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--sh-lift); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 28%), var(--ink); }
.plan-pro::before, .plan-pro::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plan-pro::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0) 55%, rgba(143, 208, 108, 0.4) 100%); }
.plan-pro::after {
  background: conic-gradient(from var(--sweep), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.5) 14deg, #fff 30deg, rgba(143, 208, 108, 0.85) 44deg, rgba(255, 255, 255, 0) 72deg, rgba(255, 255, 255, 0) 360deg);
  opacity: 0;
}
.plan-pro.is-lit::after { animation: pro-sweep var(--dur-sweep) var(--ease-in-out) 1 both; }
@keyframes pro-sweep { 0% { --sweep: -60deg; opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { --sweep: 300deg; opacity: 0; } }

/* Lite material: weak phones, data saver, no backdrop-filter, or the reader
   asked for less transparency. Same layout, denser tint, a small blur at most,
   no displacement, nothing drifting. */
.glass-lite .header-glass, .glass-lite .lens, .glass-lite .notes .note, .glass-lite .sticky-cta { --fill-now: var(--glass-fill-lite); --gb: var(--glass-blur-lite); }
.glass-lite .lens { --fill-now: rgba(255, 252, 245, 0.34); --gb: 4px; }
.glass-lite .notes .note { --fill-now: var(--glass-fill-leaf); }
@media (prefers-reduced-transparency: reduce) {
  .header-glass, .lens, .notes .note, .sticky-cta { --fill-now: var(--glass-fill-lite) !important; -webkit-backdrop-filter: blur(var(--glass-blur-lite)) !important; backdrop-filter: blur(var(--glass-blur-lite)) !important; }
  .lens { --fill-now: rgba(255, 252, 245, 0.5) !important; }
}

/* Movimiento reducido: sin desplazamientos, solo cambios de color */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn, .seg button, .main-nav a, .lang a, .faq summary { transition-property: background-color, color, border-color; }
  .btn:active, .seg button:active { transform: none; }
  .faq summary .ico, .phone-lg img, input[type="range"]::-webkit-slider-thumb { transition: none; }
  /* Glass stays, still: the pill only fades, notes are simply there, no sweep or tilt. */
  .header-glass, .site-header.is-scrolled .header-glass { transform: none; transition: opacity var(--dur-glass) linear, visibility 0s; }
  .notes .note, .notes.is-in .note { transition: none; }
  .plan-pro.is-lit::after { animation: none; }
  .phone { rotate: none; }
}
@media (max-width: 599px) { .plan .btn, .plan-pro .btn { width: 100%; align-self: stretch; } }