/* ─────────────────────────────── BookVault · web ───────────────────────────────
   Hoja compartida por index.html y privacy.html.

   Los tokens de color son los mismos valores que `ui/theme/Color.kt` de la app:
   papel cálido, tinta suave y rosa palo. Las tipografías también son las que la
   app empaqueta (Instrument Serif para los títulos, Figtree para la interfaz),
   así que la web y la app se leen como la misma cosa.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --paper:        #FAF5EE;
  --paper-canvas: #EAE3DA;
  --paper-tint:   #F1EAE1;
  --paper-reader: #F7F1E7;
  --paper-line:   #EDE4D9;
  --paper-border: #E5DBCF;
  --paper-soft:   #D8CCBF;
  --white:        #FFFCF7;

  --ink:       #241E1B;
  --ink-soft:  #3D342F;
  --ink-muted: #6B6058;
  --ink-faint: #8A7C72;
  --ink-ghost: #9A8C80;

  --rose:      #A0505F;
  --rose-deep: #7A3746;
  --rose-tint: #F1E4E6;
  --rose-pale: #F7E9EC;
  --rose-dark: #E7A9B4;
  --on-rose:   #FFF6F0;

  --honey:      #F3D9A0;
  --honey-deep: #9A7532;
  --sage:       #5F7254;
  --sage-soft:  #8FA37F;
  --sage-tint:  #E4EADD;
  --gold:       #C08A3E;
  --sand-tint:  #F6E9D2;
  --error:      #A8332B;

  --dark-bg:      #17130F;
  --dark-surface: #1F1A16;
  --dark-2:       #29231E;
  --dark-3:       #352E27;
  --dark-outline: #4A423A;
  --dark-ink:     #F0E7DC;
  --dark-muted:   #C3B7AA;
  --dark-faint:   #8F8478;

  --wood-light: #C79A62;
  --wood-face:  #B0834C;
  --wood-edge:  #8A6236;
  --panel-oak:  #4A382A;

  --spine-rose:  #A0505F;
  --spine-sage:  #C9D2BF;
  --spine-sand:  #E8D2A8;
  --spine-blush: #DCC7CB;
  --spine-stone: #CFC4BA;
  --spine-slate: #B7C4CE;

  --shadow-sm:   0 2px 8px rgba(36,30,27,0.06);
  --shadow-md:   0 10px 30px rgba(36,30,27,0.10);
  --shadow-lg:   0 24px 60px rgba(36,30,27,0.16);
  --shadow-rose: 0 10px 30px rgba(160,80,95,0.24);

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1140px;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--rose); color: var(--on-rose); }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }

/* Fondo: dos halos muy suaves y un grano de papel */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
}
.ambient::before {
  width: 55vw; height: 55vw; top: -18vw; right: -14vw;
  background: radial-gradient(circle, rgba(241,228,230,0.95), transparent 62%);
}
.ambient::after {
  width: 48vw; height: 48vw; bottom: -16vw; left: -16vw;
  background: radial-gradient(circle, rgba(246,233,210,0.9), transparent 62%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, nav, footer { position: relative; z-index: 2; }

/* ─────────────────────────── Tipografía ─────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.04; }
h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12; }
h3 { font-size: 21px; line-height: 1.25; }
.em { color: var(--rose); font-style: italic; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-ghost); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--paper-soft); }
.sub { color: var(--ink-muted); font-size: 17px; max-width: 56ch; }

/* ─────────────────────────── Nav ─────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(250,245,238,0.84);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--paper-line);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo .mark { width: 20px; color: var(--ink); }
.nav-logo .word { font-family: var(--serif); font-size: 23px; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--ink-muted); }
.nav-links a { position: relative; padding: 4px 0; transition: color .2s var(--ease-out); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--rose); transition: right .28s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }

.lang-wrap { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--paper-border); background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.lang-btn:hover { border-color: var(--paper-soft); box-shadow: var(--shadow-sm); }
.lang-btn .chev { font-size: 10px; color: var(--ink-faint); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 172px;
  background: var(--white); border: 1px solid var(--paper-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 6px; display: none; flex-direction: column; gap: 2px;
}
.lang-menu.open { display: flex; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-soft);
  transition: background .15s var(--ease-out);
}
.lang-menu button:hover { background: var(--paper-tint); }
.lang-menu button.active { background: var(--rose-tint); color: var(--rose-deep); font-weight: 600; }

.nav-cta {
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ─────────────────────────── Botones ─────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 26px; border-radius: var(--r-pill);
  background: var(--rose); color: var(--on-rose);
  box-shadow: var(--shadow-rose);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--rose-deep); box-shadow: 0 16px 40px rgba(160,80,95,0.30); }
.btn-primary svg { width: 22px; height: 22px; }
.btn-sub { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; font-size: 16px; text-align: left; }
.btn-sub .small { font-size: 11.5px; font-weight: 500; opacity: 0.78; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 24px; border-radius: var(--r-pill);
  border: 1px solid var(--paper-border); background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--paper-soft); transform: translateY(-1px); }

/* ─────────────────────────── Hero ─────────────────────────── */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 6vw, 68px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 .row { display: block; }
.hero h1 .muted { color: var(--ink-faint); }
.hero-sub { margin: 26px 0 34px; font-size: 18px; color: var(--ink-muted); max-width: 50ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.chip {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--paper-tint); border: 1px solid var(--paper-border);
  font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
}
.hero-note { margin-top: 18px; font-size: 13px; color: var(--ink-faint); max-width: 46ch; }

/* Estantería ilustrada */
.hero-visual { position: relative; }
.shelf-card {
  background: var(--white); border: 1px solid var(--paper-border);
  border-radius: var(--r-2xl); padding: 24px 24px 20px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.1deg);
}
.shelf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.shelf-card-head .name { font-family: var(--serif); font-size: 19px; }
.shelf-card-head .count { font-size: 11.5px; font-weight: 700; color: var(--ink-ghost); letter-spacing: 0.08em; text-transform: uppercase; }
.shelf-caption { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); text-align: center; font-style: italic; font-family: var(--serif); }

/* ─────────────────────────── Cifras ─────────────────────────── */
.stats { padding: clamp(20px, 4vw, 40px) 0; }
.stats-inner {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}
.stats-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-faint); margin-bottom: 26px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat .num { font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); line-height: 1; }
.stat .unit { font-size: 14px; font-weight: 600; color: var(--honey); margin-left: 7px; }
.stat .cap { margin-top: 8px; font-size: 13.5px; color: var(--dark-muted); }

/* ─────────────────────────── Cómo funciona ─────────────────────────── */
.showcase { padding: clamp(52px, 8vw, 96px) 0; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.steps { margin-top: 32px; display: flex; flex-direction: column; }
.step { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--paper-line); }
.step:first-child { border-top: none; padding-top: 0; }
.step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rose-tint); color: var(--rose-deep);
  font-size: 13px; font-weight: 700;
}
.step h3 { margin-bottom: 5px; }
.step p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.step .kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 4px; }

/* Maqueta de teléfono */
.phone { width: min(290px, 82vw); margin-inline: auto; border-radius: 38px; padding: 10px; background: var(--ink); box-shadow: var(--shadow-lg); }
.phone-screen { border-radius: 29px; overflow: hidden; background: var(--paper-reader); aspect-ratio: 9 / 18.6; display: flex; flex-direction: column; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; font-size: 10px; font-weight: 800; color: var(--ink-ghost); letter-spacing: 0.1em; text-transform: uppercase; }
.phone-body { flex: 1; padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 11px; }
.reader-title { font-family: var(--serif); font-size: 21px; line-height: 1.2; margin-bottom: 4px; }
.reader-line { height: 7px; border-radius: 4px; background: var(--paper-border); }
.reader-line.w9 { width: 96%; } .reader-line.w8 { width: 87%; } .reader-line.w7 { width: 72%; }
.reader-line.mark { background: var(--honey); }
.reader-line.mark2 { background: var(--sage-tint); }
.reader-foot { margin-top: auto; }
.progress-track { height: 4px; border-radius: 2px; background: var(--paper-border); margin-bottom: 9px; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--rose); width: 62%; }
.reader-meta { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: 0.04em; }
.no-ads-badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--sage-tint); color: #33402C; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
}

/* ── Móvil animado: tres escenas, una por paso ── */
.phone { --d: 5.5s; }
.phone-screen { position: relative; }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s;
}
.phone[data-scene="0"] .scene-import,
.phone[data-scene="1"] .scene-shelf,
.phone[data-scene="2"] .scene-read { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.tap {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(36,30,27,0.18); opacity: 0; pointer-events: none;
}
@keyframes tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

/* Escena 1 · chat y «Abrir con» */
.scene-import { background: var(--paper-tint); }
.chat { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bubble {
  max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--white); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 1.4; color: var(--ink-soft);
}
.bubble-file { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; }
.file-ic {
  flex: none; padding: 7px 6px; border-radius: 6px; background: var(--rose); color: var(--on-rose);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
}
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 11px; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 22px;
  background: var(--white); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(36,30,27,0.12);
  transform: translateY(110%);
}
.sheet::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--paper-soft); margin: -6px auto 12px; }
.sheet-title { font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 12px; }
.sheet-apps { display: flex; justify-content: space-around; }
.app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.app-ic { width: 40px; height: 40px; border-radius: 11px; display: block; box-shadow: var(--shadow-sm); }
.app-ic-files { background: linear-gradient(135deg, var(--sage-soft), var(--sage)); }
.app-ic-drive { background: linear-gradient(135deg, var(--spine-slate), #7F93A3); }
.toast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap;
  padding: 9px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 700; box-shadow: var(--shadow-md);
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheet { 0%, 30% { transform: translateY(110%); } 38%, 66% { transform: none; } 73%, 100% { transform: translateY(110%); } }
@keyframes appPick { 0%, 50% { background: transparent; } 54%, 66% { background: var(--rose-tint); } 70%, 100% { background: transparent; } }
@keyframes toast { 0%, 72% { opacity: 0; transform: translate(-50%, 12px); } 78%, 100% { opacity: 1; transform: translateX(-50%); } }
.phone[data-scene="0"] .bubble { animation: bubbleIn .5s var(--ease-out) .25s both; }
.phone[data-scene="0"] .bubble-file { animation-delay: .7s; }
.phone[data-scene="0"] .tap-file { animation: tap .6s ease-out 1.35s both; }
.phone[data-scene="0"] .sheet { animation: sheet var(--d) var(--ease-out) both; }
.phone[data-scene="0"] .app-balda { animation: appPick var(--d) linear both; }
.phone[data-scene="0"] .tap-app { animation: tap .6s ease-out 2.8s both; }
.phone[data-scene="0"] .toast { animation: toast var(--d) var(--ease-out) both; }

/* Escena 2 · estantería con dos baldas */
.lib { width: 220px; margin: 6px auto 0; display: flex; flex-direction: column; }
.lib-name { height: 26px; display: flex; align-items: center; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.lib-name-b { margin-top: 12px; }
.lib-row {
  height: 92px; display: flex; align-items: flex-end; gap: 5px; padding: 0 10px;
  background: linear-gradient(#3B2C21, #4A382A); border-radius: 8px 8px 0 0;
}
.lib-board { height: 10px; border-radius: 0 0 3px 3px; background: linear-gradient(var(--wood-light), var(--wood-face) 45%, var(--wood-edge)); }
.sp { flex: none; position: relative; width: var(--w); height: var(--h); border-radius: 2px; background: var(--c); }
.sp::after { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 6px; background: rgba(255,255,255,0.35); }
.slot { flex: none; width: 24px; height: 74px; border-radius: 2px; border: 1.5px dashed var(--wood-edge); opacity: 0; }
/* Al final queda en la balda de arriba: 50px a la derecha y una balda (140px) más arriba */
.drag-book { z-index: 2; transform: translate(50px, -140px); }
.finger {
  position: absolute; left: 50%; bottom: 12px; width: 24px; height: 24px; margin-left: -12px;
  border-radius: 50%; background: rgba(255,252,247,0.55); border: 2px solid rgba(255,252,247,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); opacity: 0;
}
@keyframes dragBook {
  0%, 20%  { transform: none; box-shadow: none; }
  27%      { transform: translateY(-8px) scale(1.08) rotate(-3deg); box-shadow: 0 10px 18px rgba(0,0,0,0.35); }
  60%      { transform: translate(50px, -148px) scale(1.08) rotate(4deg); box-shadow: 0 10px 18px rgba(0,0,0,0.35); }
  67%, 100% { transform: translate(50px, -140px); box-shadow: none; }
}
@keyframes finger { 0%, 15% { opacity: 0; transform: scale(1.4); } 21%, 61% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes slot { 0%, 58% { opacity: .9; } 66%, 100% { opacity: 0; } }
.phone[data-scene="1"] .drag-book { animation: dragBook var(--d) var(--ease-out) both; }
.phone[data-scene="1"] .finger { animation: finger var(--d) linear both; }
.phone[data-scene="1"] .slot { animation: slot var(--d) linear both; }

/* Escena 3 · lector: subraya, lee en voz alta y avanza */
.tts { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 10px; border-radius: var(--r-pill); background: var(--rose-tint); color: var(--rose-deep); font-size: 10.5px; font-weight: 800; }
.tts-play { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.tts-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 2.5px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; transform: scaleY(.45); }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes markIn { from { transform: scaleX(0); } to { transform: none; } }
@keyframes speak { 0% { background: var(--paper-border); } 6%, 16% { background: var(--rose-dark); } 22%, 100% { background: var(--paper-border); } }
@keyframes progress { from { width: 58%; } to { width: 62%; } }
.reader-line { transform-origin: left center; }
.phone[data-scene="2"] .eq i { animation: eq .9s ease-in-out infinite; }
.phone[data-scene="2"] .eq i:nth-child(2) { animation-delay: -.3s; }
.phone[data-scene="2"] .eq i:nth-child(3) { animation-delay: -.6s; }
.phone[data-scene="2"] .eq i:nth-child(4) { animation-delay: -.15s; }
.phone[data-scene="2"] .tts { animation: bubbleIn .5s var(--ease-out) .2s both; }
.phone[data-scene="2"] .speak { animation: speak var(--d) linear both; }
.phone[data-scene="2"] .speak:nth-of-type(3) { animation-delay: .8s; }
.phone[data-scene="2"] .speak:nth-of-type(6) { animation-delay: 2.6s; }
.phone[data-scene="2"] .speak:nth-of-type(7) { animation-delay: 3.4s; }
.phone[data-scene="2"] .mark { animation: markIn .6s var(--ease-out) 1.7s both; }
.phone[data-scene="2"] .mark + .mark { animation-delay: 2.2s; }
.phone[data-scene="2"] .mark2 { animation: markIn .6s var(--ease-out) 4.2s both; }
.phone[data-scene="2"] .progress-fill { animation: progress var(--d) linear both; }

/* Pasos enlazados al móvil */
.steps.demo .step { position: relative; cursor: pointer; opacity: .55; transition: opacity .3s var(--ease-out); }
.steps.demo .step:hover, .steps.demo .step.is-active { opacity: 1; }
.step-num { transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.steps.demo .step.is-active .step-num { background: var(--rose); color: var(--on-rose); }
.step-bar { display: none; }
.steps.demo .step-bar { display: block; position: absolute; left: 52px; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.step-bar i { display: block; height: 100%; background: var(--rose); transform: scaleX(0); transform-origin: left; }
.steps.demo.playing .step.is-active .step-bar i { animation: markIn var(--d, 5.5s) linear both; }

/* Libro del hero: sale de la mano, entra en el hueco y vuelve a empezar */
.hero-book { transform-box: fill-box; transform-origin: 0 0; animation: heroBook 8s var(--ease-out) infinite; }
.hero-slot { animation: heroSlot 8s linear infinite; }
@keyframes heroBook {
  0%, 10%  { transform: translate(44px, -28px) rotate(7deg); }
  5%       { transform: translate(44px, -33px) rotate(7deg); }
  15%      { transform: translate(47px, -38px) rotate(5deg); }
  40%      { transform: translate(0, -6px) rotate(0); }
  46%, 80% { transform: none; }
  88%      { transform: translate(0, -10px); }
  100%     { transform: translate(44px, -28px) rotate(7deg); }
}
@keyframes heroSlot { 0%, 38% { opacity: .75; } 45%, 80% { opacity: 0; } 90%, 100% { opacity: .75; } }

/* ─────────────────────────── Funciones ─────────────────────────── */
.features { padding: clamp(52px, 8vw, 96px) 0; }
.features-head { max-width: 58ch; margin-bottom: 44px; }
.features-head h2 { margin-bottom: 16px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.f-card {
  background: var(--white); border: 1px solid var(--paper-border);
  border-radius: var(--r-xl); padding: 28px 26px 30px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.f-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--paper-soft); }
.icon-wrap {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--rose-tint); color: var(--rose-deep);
}
.icon-wrap svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-card.acc-sage  .icon-wrap { background: var(--sage-tint); color: #33402C; }
.f-card.acc-honey .icon-wrap { background: var(--sand-tint); color: var(--honey-deep); }
.f-card.acc-ink   .icon-wrap { background: var(--paper-canvas); color: var(--ink); }
.f-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 9px; }
.f-card h3 { margin-bottom: 9px; }
.f-card p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }

/* ─────────────────────────── Formatos ─────────────────────────── */
.formats { padding: clamp(36px, 6vw, 72px) 0; }
.formats-wrap { background: var(--paper-tint); border: 1px solid var(--paper-border); border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 48px); }
.formats-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.formats-head h2 { max-width: 18ch; }
.formats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fmt { background: var(--white); border: 1px solid var(--paper-border); border-radius: var(--r-lg); padding: 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.fmt .tag { font-family: var(--serif); font-size: 26px; line-height: 1; }
.fmt .what { font-size: 13px; color: var(--ink-muted); }
.fmt.soon { background: transparent; border-style: dashed; }
.fmt.soon .tag, .fmt.soon .what { color: var(--ink-faint); }
.formats-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-faint); max-width: 76ch; }

/* ─────────────────────────── Privacidad ─────────────────────────── */
.privacy { padding: clamp(52px, 8vw, 96px) 0; }
.privacy-wrap { background: var(--ink); color: var(--paper); border-radius: var(--r-2xl); padding: clamp(32px, 5vw, 64px); box-shadow: var(--shadow-lg); }
.privacy-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.privacy-wrap .eyebrow { color: var(--dark-faint); }
.privacy-wrap .eyebrow::before { background: var(--dark-outline); }
.privacy-wrap h2 { color: var(--paper); }
.privacy-wrap .em { color: var(--rose-dark); }
.privacy-wrap .sub { color: var(--dark-muted); }
.check-grid { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--paper-soft); }
.tick { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(143,163,127,0.22); color: var(--sage-soft); margin-top: 1px; }
.tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
  font-size: 15px; font-weight: 600; color: var(--rose-dark);
  border-bottom: 1px solid rgba(231,169,180,0.35); padding-bottom: 3px;
  transition: gap .2s var(--ease-out);
}
.more:hover { gap: 13px; }
.vault { display: grid; place-items: center; }
.vault-ring {
  width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(231,169,180,0.16), transparent 62%);
  border: 1px solid var(--dark-3);
}
.vault-inner { width: 63%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--dark-outline); }
.vault-core { width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; background: var(--dark-2); border: 1px solid var(--dark-outline); color: var(--rose-dark); }
.vault-core svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────── CTA final ─────────────────────────── */
.bigcta { padding: clamp(36px, 6vw, 88px) 0 clamp(52px, 8vw, 100px); }
.bigcta-wrap {
  text-align: center; display: flex; flex-direction: column; align-items: center;
  background: var(--white); border: 1px solid var(--paper-border);
  border-radius: var(--r-2xl); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  box-shadow: var(--shadow-md);
}
.bigcta-wrap .mark { width: 44px; color: var(--ink); margin-bottom: 22px; }
.bigcta-wrap h2 { margin-bottom: 14px; }
.bigcta-wrap p { color: var(--ink-muted); font-size: 16.5px; max-width: 48ch; margin: 0 0 32px; }

/* ─────────────────────────── Footer ─────────────────────────── */
footer { border-top: 1px solid var(--paper-line); background: var(--paper-tint); }
.footer-inner {
  width: min(100% - 40px, var(--container)); margin-inline: auto;
  padding: 38px 0 44px; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .mark { width: 22px; color: var(--ink); }
.footer-brand .word { font-family: var(--serif); font-size: 20px; }
.footer-brand .tag { font-size: 12.5px; color: var(--ink-faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--ink-muted); }
.footer-links a:hover { color: var(--rose); }
.footer-copy { font-size: 12.5px; color: var(--ink-ghost); width: 100%; }

/* ─────────────────────────── Reveal ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone *, .hero-book, .hero-slot { animation: none !important; }
  .hero-slot { opacity: 0; }
  .scene { transition: none; }
}

/* ═══════════════════════ Página de política ═══════════════════════ */
.policy-hero { padding: clamp(44px, 7vw, 84px) 0 clamp(28px, 4vw, 48px); }
.policy-hero .container { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.policy-hero h1 { font-size: clamp(36px, 5vw, 62px); }
.policy-hero .hero-sub { font-size: 17px; margin: 22px 0 24px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-faint); }
.hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--paper-soft); }
.tldr-card { background: var(--white); border: 1px solid var(--paper-border); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-md); }
.tldr-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 14px; }
.tldr-label .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-tint); color: #33402C; }
.tldr-label .ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tldr-card p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.doc { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.doc-grid { width: min(100% - 40px, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 232px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.toc { position: sticky; top: 104px; }
.toc-label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-faint); transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.toc a .n { font-variant-numeric: tabular-nums; color: var(--paper-soft); font-weight: 700; }
.toc a:hover { background: var(--paper-tint); color: var(--ink-soft); }
.toc a.active { background: var(--rose-tint); color: var(--rose-deep); font-weight: 600; }
.toc a.active .n { color: var(--rose); }

.sections { display: flex; flex-direction: column; gap: 44px; max-width: 76ch; }
.sec { scroll-margin-top: 104px; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-num { font-family: var(--serif); font-size: 15px; color: var(--rose); font-variant-numeric: tabular-nums; }
.sec-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); }
.sec h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 14px; }
.sec p { font-size: 15.5px; color: var(--ink-muted); margin: 0 0 14px; }
.sec p:last-child { margin-bottom: 0; }
.bullets { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bullets li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-muted); }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-tint); border: 1px solid var(--rose); }
.callout {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--sage-tint); border: 1px solid rgba(95,114,84,0.22); border-radius: var(--r-lg);
  padding: 16px 18px; margin: 0 0 16px;
}
.callout .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(95,114,84,0.18); color: var(--sage); }
.callout .ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.callout .text { font-size: 14.5px; color: #33402C; }
.callout.warn { background: var(--sand-tint); border-color: rgba(192,138,62,0.28); }
.callout.warn .ic { background: rgba(192,138,62,0.18); color: var(--honey-deep); }
.callout.warn .ic svg { stroke-width: 2.2; }
.callout.warn .text { color: #5C4517; }
.nope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.nope { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border: 1px solid var(--paper-border); border-radius: var(--r-md); font-size: 14px; color: var(--ink-muted); }
.nope .x { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(168,51,43,0.10); color: var(--error); font-size: 11px; font-weight: 800; }
.perms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.perm { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: var(--white); border: 1px solid var(--paper-border); border-radius: var(--r-md); }
.perm .key { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.perm .key .ic { flex: none; width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper-tint); color: var(--ink-muted); }
.perm .key .ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.perm .desc { font-size: 14px; color: var(--ink-muted); }
.link-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.link-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--paper-border);
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.link-pill::after { content: "↗"; font-size: 11px; color: var(--ink-faint); }
.link-pill:hover { border-color: var(--rose); color: var(--rose); }
.email-block { display: inline-flex; align-items: center; gap: 11px; padding: 14px 20px; background: var(--ink); color: var(--paper); border-radius: var(--r-pill); font-size: 15px; font-weight: 600; }
.email-block .ic { display: grid; place-items: center; color: var(--rose-dark); }
.email-block .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.email-block a:hover { color: var(--rose-dark); }

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (max-width: 980px) {
  .hero-grid, .showcase-grid, .privacy-grid, .policy-hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; margin-inline: auto; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .formats-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .doc-grid { grid-template-columns: 1fr; }
  .toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--paper-line); }
  .toc ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc a { background: var(--white); border: 1px solid var(--paper-border); }
  .perm { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
  .check-grid, .nope-grid { grid-template-columns: 1fr; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .nav-cta { display: none; }
  .formats-grid { grid-template-columns: 1fr 1fr; }
}