/* ==============================================================
   TORTUGA · landing — stylesheet
   Static HTML in index.html · behavior in assets/app.js
   ============================================================== */

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

/* ---- palette ---- */
:root {
  --paper:#FFFFFF;
  --paper-deep:oklch(97.5% 0.010 256);
  --paper-warm:#E8EEF7;
  --ink:oklch(22% 0.04 256);
  --ink-soft:oklch(34% 0.038 256);
  --muted:oklch(46% 0.035 256);
  --subtle:oklch(49% 0.03 256); /* darkened for WCAG AA (~4.7:1 on paper) — was 62% */
  --quiet:oklch(78% 0.020 256);
  --hairline:oklch(88% 0.020 256);
  --hairline-strong:oklch(80% 0.028 256);
  --shell:oklch(48% 0.20 256);
  --shell-deep:color-mix(in oklab, var(--shell) 78%, #000);
  --shell-ink:oklch(20% 0.05 256);
  --shell-tint:oklch(96% 0.025 256);
  --danger:oklch(54% 0.21 25);
  --warn:oklch(66% 0.15 60);
  --ok:oklch(54% 0.14 158);
  --accent-vio:oklch(53% 0.17 300);
  --serif:"DM Serif Display", Georgia, serif;
  --sans:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* safety net: never let a stray long word/element cause horizontal scroll on
   mobile (clip, not hidden, so the sticky nav keeps working) */
html, body { overflow-x: clip; }
/* anti-FOUC de idioma: el ES está en el HTML y los scripts van con defer, así que
   un visitante en EN vería el español pintado antes del swap. El script inline del
   <head> pone esta clase SOLO si el idioma cacheado es "en"; applyI18n la quita al
   terminar (y hay un setTimeout de respaldo por si el JS no carga). El ES —idioma
   por defecto— no pasa por aquí y pinta directo. */
html.lang-pending body { visibility: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","kern","liga";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--shell); color: #fff; }
h1, h2, h3, h4, p { margin: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--shell);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- shared bits ---- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }
.wrap-1100 { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }
.wrap-1080 { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }
.wrap-980 { max-width: 980px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--shell);
  margin-bottom: 18px;
}
.eyebrow--lg { font-size: 13px; }
.eyebrow--gold { color: oklch(82% 0.08 90); }
.eyebrow--blue-dk { color: oklch(78% 0.10 256); }

.sec-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px,3.8vw,48px); line-height: 1.08;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.sec-sub {
  font-family: var(--sans); font-size: clamp(15px,1.5vw,17.5px);
  line-height: 1.55; color: var(--ink-soft); text-wrap: pretty;
}
em.accent { font-style: italic; color: var(--shell); }
.hl { color: var(--shell); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 13px 24px; border-radius: 9px; text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-shell { color: #fff; background: var(--shell); box-shadow: 0 10px 24px -14px var(--shell); }
.btn-shell:hover { background: var(--shell-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -14px var(--shell); }
.btn-ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ink { color: #fff; background: var(--ink); padding: 10px 18px; font-size: 14px; border-radius: 8px; }
.btn-ink:hover { background: var(--shell-ink); }
.btn-white { color: var(--ink); background: #fff; font-weight: 600; }
.btn-white:hover { background: oklch(92% 0.01 256); }
.btn-block { display: block; width: 100%; text-align: center; padding: 13px; }

/* segmented control (compare + chart tabs) */
.seg { display: inline-flex; gap: 4px; background: var(--paper-deep); border-radius: 12px; padding: 5px; }
.seg--on-deep { background: var(--paper); border-radius: 10px; padding: 4px; }
.seg-btn {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: 9px 20px; border-radius: 9px; color: var(--muted);
  transition: all .18s ease;
}
.seg--sm .seg-btn { font-size: 12.5px; padding: 7px 16px; border-radius: 8px; }
.seg-btn.is-active { background: var(--shell); color: #fff; box-shadow: 0 6px 16px -8px var(--shell); }

/* image placeholders (real captures wired in later) */
.img-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed color-mix(in oklab, var(--shell) 40%, transparent);
  border-radius: 10px; background: oklch(30% 0.04 256 / 0.25);
  color: oklch(80% 0.04 256); font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.03em; padding: 16px; line-height: 1.5; width: 100%;
}
.img-slot:has(img) { border: none; background: none; padding: 0; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: inherit; }
.slot-modal { aspect-ratio: 1254 / 930; }
.mw0 { min-width: 0; }

/* skip link */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  padding: 10px 16px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  border-radius: 6px; transition: top 160ms ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--shell); outline-offset: 2px; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid color-mix(in oklab, var(--hairline) 65%, transparent);
}
.nav-inner { height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 20px; letter-spacing: 0.03em; color: var(--ink); }
.brand .brand-logo { height: 30px; width: auto; }
.nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px,2vw,28px); white-space: nowrap; }
.nav-link { position: relative; font-size: 14px; color: var(--ink-soft); font-weight: 500; transition: color .16s; }
.nav-link:hover { color: var(--shell); }
.nav-link.is-current { color: var(--shell); }
.nav-link.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--shell); border-radius: 2px; }
.nav-right { display: flex; align-items: center; gap: 18px; flex: none; }
.lang { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; color: var(--subtle); transition: color .15s, background .15s; }
.lang-btn .flag { width: 27px; height: 18px; border-radius: 3px; display: block; opacity: .5; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent); transition: opacity .15s; }
.lang-btn:hover { color: var(--ink); }
.lang-btn:hover .flag { opacity: .85; }
.lang-btn.is-active { color: var(--shell); font-weight: 600; background: var(--shell-tint); }
.lang-btn.is-active .flag { opacity: 1; box-shadow: 0 0 0 1px color-mix(in oklab, var(--shell) 35%, transparent); }
/* mobile menu toggle (checkbox-hack — works with no JS) */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 10px; color: var(--ink); cursor: pointer; flex: none; }
.nav-burger:hover { background: var(--shell-tint); }
.nav-burger .ico-close { display: none; }

/* ---- section frame ---- */
.sec { padding: clamp(64px,8vw,108px) clamp(20px,5vw,32px); }
.sec--paper { background: var(--paper); }
.sec--deep { background: var(--paper-deep); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--shell-ink { background: var(--shell-ink); color: #fff; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,64px); align-items: start; }

/* ---- hero ---- */
/* Fondo del hero. La imagen es 16:9 con el centro casi blanco y el detalle (trazos
   y nodos azules) en las esquinas: por eso el texto sigue leyéndose encima sin
   necesidad de velo. Va el color de papel debajo como respaldo, para que si la
   imagen no carga el hero no cambie de aspecto.
   Sin background-attachment: fixed a propósito — el parallax rinde mal en móvil y
   el proyecto lo evita. */
.hero {
  padding: clamp(56px,8vw,92px) clamp(20px,5vw,32px) clamp(60px,8vw,100px);
  background: var(--paper) url(images/tortuga-landing-background.jpg) center / cover no-repeat;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(32px,4vw,56px); align-items: center; }
.hero-eyebrow { margin-bottom: 26px; }
.hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px,5.2vw,62px); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 24px; max-width: 15ch; text-wrap: balance; }
.hero-sub { font-size: clamp(16px,1.5vw,18.5px); line-height: 1.55; color: var(--ink-soft); margin-bottom: 22px; max-width: 46ch; text-wrap: pretty; }
.hero-benefits { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; }
.hero-benefits li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 450; color: var(--ink); letter-spacing: -0.005em; }
.hero-benefits li::before { content: ""; flex: none; width: 7px; height: 12px; margin: -3px 1px 0; border: solid var(--shell); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); animation: benefitShine 3.4s ease-in-out infinite; }
.hero-benefits li:nth-child(2)::before { animation-delay: .55s; }
.hero-benefits li:nth-child(3)::before { animation-delay: 1.1s; }
@keyframes benefitShine { 0%, 100% { border-color: var(--shell); } 50% { border-color: oklch(68% 0.21 256); } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 22px 36px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.hero-meta-item { display: flex; flex-direction: column; gap: 5px; }
.meta-k { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); }
.meta-v { font-size: 14px; font-weight: 600; color: var(--ink); }
.hero-panel-wrap { position: relative; }
.hero-panel { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -34px oklch(20% 0.06 256 / 0.55); }

/* hero mock — preview del panel "Mi estado" (decorativo, editable en HTML/CSS) */
.mock-app { position: relative; background: var(--paper); font-family: var(--sans); color: var(--ink); font-size: 11px; line-height: 1.3; }
.mock-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: var(--paper-deep); border-bottom: 1px solid var(--hairline); }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); }
.mock-bar-t { margin: 0 auto; padding-right: 21px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.mock-body { display: grid; grid-template-columns: 108px 1fr; }
.mock-side { background: var(--paper-deep); border-right: 1px solid var(--hairline); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.mock-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mock-brand .mock-logo { height: 18px; width: auto; flex: none; }
.mock-brand span { font-family: var(--serif); font-size: 12px; letter-spacing: 0.03em; color: var(--ink); }
.mock-side-lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); margin: 8px 0 2px; }
.mock-nav { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; font-size: 11px; color: var(--muted); }
.mock-nav svg { width: 14px; height: 14px; flex: none; }
.mock-nav.is-on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--shell); }
.mock-nav.is-on svg { color: var(--shell); }
.mock-shell { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, transparent); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); border-radius: 20px; padding: 4px 8px; }
.mock-shell-dot { position: relative; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.mock-shell-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: mockLive 2.6s ease-in-out infinite; pointer-events: none; }
.mock-ver { font-family: var(--mono); font-size: 8px; color: var(--subtle); margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.mock-pro { background: var(--shell); color: #fff; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.mock-main { padding: 17px 19px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mock-eyebrow { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shell); }
.mock-h { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); margin-top: -2px; }
.mock-cta-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-emg { font-size: 9px; font-weight: 600; color: #fff; background: var(--danger); border-radius: 20px; padding: 5px 10px; }
.mock-newblock { font-size: 9px; font-weight: 600; color: var(--shell); border: 1px solid color-mix(in oklab, var(--shell) 40%, transparent); border-radius: 20px; padding: 5px 10px; }
.mock-card { border: 1px solid var(--hairline); border-radius: 9px; padding: 11px 12px; }
.mock-card-lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.mock-card-h { font-family: var(--serif); font-size: 13px; color: var(--ink); margin: 3px 0 9px; }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-tile { border: 1px solid var(--hairline); border-radius: 8px; padding: 9px 10px; }
.mock-tile-n { font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--ink); }
.mock-tile-l { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 4px; line-height: 1.25; }
.mock-red { color: var(--danger); }
.mock-green { color: var(--ok); }
.mock-recovered { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; border: 1px solid var(--hairline); border-radius: 9px; padding: 11px 12px; }
.mock-big { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--shell); margin-top: 6px; }
.mock-big span { font-family: var(--sans); font-size: 9px; font-weight: 500; color: var(--muted); }
.mock-sub { font-family: var(--mono); font-size: 8px; color: var(--subtle); margin-top: 6px; }
.mock-recovered-side { display: flex; flex-direction: column; justify-content: center; gap: 10px; border-left: 1px solid var(--hairline); padding-left: 12px; }
.mock-mid { font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--ink); }
/* mock — alertas en vivo (esquina inferior derecha) + estado pulsante */
.mock-toast { position: absolute; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 9px; max-width: 76%; padding: 9px 12px 9px 10px; background: var(--ink); color: #fff; border-radius: 11px; box-shadow: 0 14px 32px -12px rgba(0,0,0,.55); opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
.mock-toast-ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.mock-toast-ic svg { width: 15px; height: 15px; }
.mock-toast-t { font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em; }
.mock-toast-d { font-family: var(--mono); font-size: 8px; color: oklch(80% 0.03 256); margin-top: 2px; }
.mock-toast--block .mock-toast-ic { background: color-mix(in oklab, var(--danger) 26%, transparent); }
.mock-toast--commit .mock-toast-ic { background: color-mix(in oklab, var(--shell) 30%, transparent); }
.mock-toast--block { animation: mockToast 11s ease-in-out infinite; }
.mock-toast--commit { animation: mockToast 11s ease-in-out infinite; animation-delay: 5.5s; }
@keyframes mockToast {
  0%, 3% { opacity: 0; transform: translateY(14px) scale(.98); }
  8%, 26% { opacity: 1; transform: translateY(0) scale(1); }
  32%, 100% { opacity: 0; transform: translateY(14px) scale(.98); }
}
@keyframes mockLive {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* ---- problema ---- */
.prob-quote { padding: 22px 26px; background: var(--shell-tint); border-left: 3px solid var(--shell); border-radius: 0 10px 10px 0; max-width: 46ch; }
.prob-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(16px,1.7vw,19px); line-height: 1.5; color: var(--shell-ink); text-wrap: pretty; }
.prob-h { font-family: var(--serif); font-weight: 400; font-size: clamp(27px,3.2vw,40px); line-height: 1.16; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 22px; max-width: 17ch; text-wrap: balance; }
.prob-lede { font-size: clamp(15px,1.5vw,17px); line-height: 1.6; color: var(--ink-soft); margin-bottom: 30px; max-width: 40ch; text-wrap: pretty; }
.prob-list { border-top: 1px solid var(--hairline-strong); }
.prob-item { padding: 20px 14px; margin: 0 -14px; border-radius: 8px; border-bottom: 1px solid var(--hairline); transition: background .15s ease; }
.prob-item:hover { background: var(--paper-deep); }
.prob-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.prob-toolwrap { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.prob-idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--shell); flex: none; }
.prob-tool { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.prob-fail { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--danger); flex: none; display: inline-flex; align-items: center; gap: 5px; }
.prob-line { font-size: 14.5px; line-height: 1.5; color: var(--muted); padding-left: 29px; text-wrap: pretty; }
.prob-more { margin-top: 4px; padding-top: 16px; font-weight: 400; font-size: clamp(15px,1.5vw,17px); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.prob-costs { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.prob-costs-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); margin-bottom: 18px; }
.prob-cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 16px; }
.prob-cost { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Color del punto, en el contenedor: el anillo del icono podría usar currentColor,
   pero el nombre es HERMANO del icono y no hereda su color. Con --cost aquí, anillo
   y texto beben del mismo sitio sin atarlo a la posición (un nth-child se rompería
   al reordenar los puntos). Los .prob-cost-ic--* siguen mandando en el icono. */
.prob-cost--amber  { --cost: var(--warn); }
.prob-cost--blue   { --cost: var(--shell); }
.prob-cost--red    { --cost: var(--danger); }
.prob-cost--violet { --cost: var(--accent-vio); }
.prob-cost-ic { position: relative; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.prob-cost-ic svg { display: block; width: 22px; height: 22px; }
.prob-cost-ic--blue   { color: var(--shell);      background: color-mix(in oklab, var(--shell) 9%, transparent);       box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--shell) 16%, transparent); }
.prob-cost-ic--amber  { color: var(--warn);       background: color-mix(in oklab, var(--warn) 13%, transparent);       box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 24%, transparent); }
.prob-cost-ic--red    { color: var(--danger);     background: color-mix(in oklab, var(--danger) 8%, transparent);      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 14%, transparent); }
.prob-cost-ic--violet { color: var(--accent-vio); background: color-mix(in oklab, var(--accent-vio) 10%, transparent);  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-vio) 18%, transparent); }
.prob-cost-txt { display: flex; flex-direction: column; gap: 3px; }
.prob-cost-lead { font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.prob-cost-sub { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted); text-wrap: pretty; }

/* ---- cadena de los 4 costes ----
   Se leen como puntos conectados: un raíl fijo los une, una señal recorre el tramo
   y enciende el punto siguiente; del último vuelve al primero (es el ciclo, que
   reinicia). Todo con pseudo-elementos —sin nodos nuevos— y solo CSS, así que
   también anima sin JS y en file://. La pausa fuera de viewport la da .is-paused.
   Los keyframes empiezan Y acaban en reposo a propósito: con "reducir movimiento"
   el bloque global de abajo deja la animación congelada en su último fotograma. */
.prob-cost { --t: 0s; }                      /* turno de cada punto dentro del ciclo */
.prob-cost:nth-child(2) { --t: 1.5s; }
.prob-cost:nth-child(3) { --t: 3s; }
.prob-cost:nth-child(4) { --t: 4.5s; }
/* raíl: top 22px = centro del icono (44px); right -8px entra en el column-gap de
   16px para morir junto al icono siguiente */
.prob-cost::after { content: ""; position: absolute; top: 22px; left: 52px; right: -8px; height: 1px; background: var(--hairline); }
/* la señal que viaja por ese tramo */
.prob-cost::before { content: ""; position: absolute; top: 21px; left: 52px; right: -8px; height: 2px; border-radius: 2px; opacity: 0;
  background-image: linear-gradient(90deg, transparent, var(--shell), transparent); background-size: 45% 100%; background-repeat: no-repeat; background-position: -45% 0;
  animation: costSignal 6s calc(var(--t) + .5s) infinite; }
/* el último de la fila no lleva raíl: colgaría hacia el vacío */
.prob-cost:last-child::before, .prob-cost:last-child::after { content: none; }
/* anillo del icono, en el color del propio punto */
.prob-cost-ic::after { content: ""; position: absolute; inset: -3px; border-radius: 15px; box-shadow: 0 0 0 2px var(--cost, var(--shell)); opacity: 0; animation: costRing 6s var(--t) infinite; }
.prob-cost-ic { animation: costLift 6s var(--t) infinite; }
.prob-cost-lead { animation: costLead 6s var(--t) infinite; }
@keyframes costLift { 0% { transform: none; } 5%, 20% { transform: translateY(-2px); } 26%, 100% { transform: none; } }
@keyframes costRing { 0% { opacity: 0; transform: scale(.82); } 5% { opacity: .9; transform: scale(1); } 18% { opacity: .5; } 26% { opacity: 0; transform: scale(1.18); } 27%, 100% { opacity: 0; transform: scale(.82); } }
@keyframes costLead { 0% { color: var(--ink); } 5%, 20% { color: var(--cost, var(--shell)); } 30%, 100% { color: var(--ink); } }
@keyframes costSignal { 0% { opacity: 0; background-position: -45% 0; } 4% { opacity: 1; } 16% { opacity: 1; background-position: 145% 0; } 20% { opacity: 0; background-position: 145% 0; } 21%, 100% { opacity: 0; background-position: -45% 0; } }

@media (max-width: 680px) {
  .prob-cost-grid { grid-template-columns: repeat(2, 1fr); }
  /* a 2 columnas, el segundo de cada fila también queda al borde */
  .prob-cost:nth-child(2n)::before, .prob-cost:nth-child(2n)::after { content: none; }
  /* separador de la columna fija: sin él, el contenido aparece y desaparece bajo
     un borde invisible al deslizar la tabla */
  .ctable-feat, .ctable-rowlabel { box-shadow: 1px 0 0 var(--hairline); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .prob-costs[data-reveal] { opacity: 1; transform: none; }
  .js .prob-costs[data-reveal] .prob-cost { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1); }
  .js .prob-costs[data-reveal].is-in .prob-cost { opacity: 1; transform: none; }
  .prob-costs.is-in .prob-cost:nth-child(2) { transition-delay: .08s; }
  .prob-costs.is-in .prob-cost:nth-child(3) { transition-delay: .16s; }
  .prob-costs.is-in .prob-cost:nth-child(4) { transition-delay: .24s; }
}

/* ---- bridge ---- */
.bridge { background: var(--paper); padding: clamp(8px,2vw,20px) 0 clamp(56px,7vw,84px); }
.bridge .wrap-1080 { padding-top: clamp(40px,5vw,56px); border-top: 1px solid var(--hairline); }
.bridge-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px,5vw,72px); align-items: start; }
.bridge-lead { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,2.4vw,28px); line-height: 1.3; color: var(--ink); max-width: 22ch; text-wrap: pretty; }
.bridge-punch { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,4.2vw,50px); line-height: 1.07; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 24px; text-wrap: balance; }
.bridge-support { font-size: clamp(15px,1.5vw,17px); line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; max-width: 54ch; text-wrap: pretty; }
.bridge-sign { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--subtle); padding-top: 18px; border-top: 1px solid var(--hairline); display: inline-block; }
.bridge-invest { margin-top: clamp(24px,3.5vw,36px); font-size: clamp(16px,1.7vw,19px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }

/* ---- cómo funciona ---- */
.how-head { margin-bottom: clamp(44px,5vw,60px); }
.how-head .sec-title { margin-bottom: 16px; }
.how-head .sec-sub { max-width: 64ch; }
.how-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px,5vw,60px); align-items: start; margin-bottom: clamp(40px,5vw,56px); }
.layer { display: grid; grid-template-columns: 46px 1fr; gap: 20px; }
.layer-rail { display: flex; flex-direction: column; align-items: center; }
.layer-num { width: 46px; height: 46px; border-radius: 13px; background: var(--shell-tint); border: 1px solid color-mix(in oklab, var(--shell) 22%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 19px; color: var(--shell); flex: none; }
.layer-conn { width: 2px; flex: 1; margin-top: 10px; border-radius: 1px; background: linear-gradient(180deg, color-mix(in oklab, var(--shell) 35%, transparent), color-mix(in oklab, var(--shell) 12%, transparent)); }
.layer:last-child .layer-conn { background: transparent; }
.layer-body { padding: 2px 0 30px; }
.layer-title { font-family: var(--serif); font-size: clamp(20px,2.2vw,24px); line-height: 1.18; color: var(--ink); margin-bottom: 8px; text-wrap: balance; }
.layer-desc { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 14px; max-width: 42ch; text-wrap: pretty; }
.chip-tech { display: inline-block; font-family: var(--mono); font-size: 11.5px; background: var(--shell-tint); color: var(--shell-ink); padding: 5px 11px; border-radius: 6px; letter-spacing: 0.02em; border: 1px solid color-mix(in oklab, var(--shell) 16%, transparent); }
.sticky-84 { position: sticky; top: 84px; }

/* viz panel */
.viz { background: var(--ink); border-radius: 16px; padding: clamp(24px,3vw,32px); position: sticky; top: 84px; box-shadow: 0 24px 60px -34px oklch(20% 0.06 256 / 0.7); overflow: hidden; }
.viz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%, oklch(40% 0.14 256 / 0.32), transparent 72%); pointer-events: none; }
.viz-in { position: relative; }
.viz-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.viz-head h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(72% 0.04 256); font-weight: 500; }
.viz-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: oklch(74% 0.14 158); letter-spacing: 0.08em; text-transform: uppercase; }
.viz-live i { width: 7px; height: 7px; border-radius: 50%; background: oklch(74% 0.14 158); box-shadow: 0 0 0 3px oklch(54% 0.14 158 / 0.22); display: block; animation: blinkDot 2.4s infinite; }
.viz-browser { background: oklch(26% 0.04 256); border: 1px solid oklch(42% 0.08 256 / 0.5); border-radius: 11px; overflow: hidden; }
.viz-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid oklch(40% 0.06 256 / 0.5); }
.viz-bdots { display: flex; gap: 5px; flex: none; }
.viz-bdots span { width: 8px; height: 8px; border-radius: 50%; background: oklch(50% 0.06 256); display: block; }
.viz-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; background: oklch(19% 0.03 256); border-radius: 7px; padding: 6px 11px; }
.viz-url > svg, .viz-shield-h > svg { flex: none; }
.viz-url .u { font-family: var(--mono); font-size: 13px; color: #fff; display: inline-flex; align-items: center; }
.viz-typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: typeUrl 3s steps(13,end) infinite; }
.viz-caret { display: inline-block; width: 6px; height: 14px; background: oklch(76% 0.13 256); margin-left: 2px; animation: caretBlink 1.1s step-end infinite; }
.viz-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--sans); font-size: 11px; font-weight: 600; color: oklch(80% 0.10 25); background: oklch(40% 0.12 25 / 0.3); border: 1px solid oklch(54% 0.16 25 / 0.45); padding: 4px 9px; border-radius: 20px; animation: blockGlow 3s ease-in-out infinite; }
.viz-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.viz-meta .a { color: oklch(60% 0.04 256); } .viz-meta .b { color: oklch(70% 0.10 256); }
.viz-conn { position: relative; height: 58px; display: flex; justify-content: center; --fall: 50px; }
.viz-conn .line { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, oklch(50% 0.08 256 / 0.6) 0 5px, transparent 5px 11px); }
.viz-pkt { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; border-radius: 50%; background: oklch(78% 0.14 256); box-shadow: 0 0 12px oklch(70% 0.16 256); transform: translateX(-50%); animation: pktFall 3s cubic-bezier(.5,0,.6,1) infinite; }
.viz-shield { position: relative; background: oklch(26% 0.045 256); border: 1px solid oklch(50% 0.12 256 / 0.45); border-radius: 13px; padding: 18px; }
.viz-ring { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--danger); transform: translate(-50%,-50%) scale(.6); opacity: 0; animation: ringPulse 3s ease-out infinite; pointer-events: none; }
.viz-shield-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.viz-shield-h span { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: #fff; }
.viz-steps { display: flex; flex-direction: column; gap: 9px; }
.viz-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11.5px; }
.viz-step .k { display: inline-flex; align-items: center; gap: 8px; color: oklch(82% 0.02 256); }
.viz-step .k i { width: 6px; height: 6px; border-radius: 50%; background: oklch(74% 0.14 158); display: block; }
.viz-step .v { color: oklch(64% 0.04 256); }
.viz-conn2 { height: 22px; display: flex; justify-content: center; }
.viz-conn2 .line { width: 2px; height: 100%; background: linear-gradient(180deg, oklch(50% 0.12 25 / 0.5), oklch(54% 0.21 25 / 0.7)); }
.viz-result { display: flex; align-items: center; gap: 14px; background: oklch(30% 0.10 25 / 0.35); border: 1px solid oklch(54% 0.18 25 / 0.5); border-radius: 13px; padding: 16px 18px; animation: blockGlow 3s ease-in-out infinite; }
.viz-result .ic { width: 38px; height: 38px; border-radius: 10px; background: oklch(54% 0.20 25 / 0.25); display: flex; align-items: center; justify-content: center; flex: none; }
.viz-result .t { font-family: var(--serif); font-size: 19px; color: #fff; line-height: 1.1; }
.viz-result .s { font-size: 12.5px; color: oklch(78% 0.06 25 / 0.8); margin-top: 3px; }

/* anti-trampa card */
.tamper { margin-top: clamp(40px,5vw,60px); background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 48px -34px oklch(40% 0.08 256 / 0.5); }
.tamper-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.tamper-left { padding: clamp(28px,3.4vw,42px); }
.tamper-kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--shell); }
.tamper-h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px,2.3vw,27px); line-height: 1.18; color: var(--ink); margin: 8px 0; text-wrap: balance; }
.tamper-row { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; padding: clamp(16px,1.8vw,20px) 0; border-bottom: 1px solid var(--hairline); }
.tamper-row:last-of-type { border-bottom: none; }
.tamper-chip { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; --ic: var(--shell); background: var(--shell-tint); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--shell) 12%, transparent); }
.tamper-chip svg { display: block; }
.tamper-th { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.tamper-th .t { font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.tamper-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 5px; white-space: nowrap; color: var(--muted); background: var(--paper-deep); border: 1px solid var(--hairline); }
.tamper-line { font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.tamper-more { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.tamper-more span { font-size: 14px; font-weight: 600; color: var(--shell); }
.tamper-more .arr { font-size: 16px; line-height: 1; }
.tamper-right { padding: clamp(28px,3.4vw,42px); background: var(--paper-deep); display: flex; flex-direction: column; }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.chart-range { font-family: var(--mono); font-size: 11px; color: var(--subtle); letter-spacing: 0.04em; }
.chart-title { font-family: var(--serif); font-size: 18px; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 22px; }
.chart-plot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: clamp(134px,15vw,170px); margin-bottom: 14px; }
.bar-lane { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill { width: 16px; max-width: 66%; min-height: 7px; border-radius: 999px; background: var(--quiet); transition: background .2s; }
.bar-fill.peak { background: var(--shell); box-shadow: 0 0 0 5px color-mix(in oklab, var(--shell) 11%, transparent), 0 8px 18px -5px color-mix(in oklab, var(--shell) 50%, transparent); }
.chart-plot.month .bar-fill { width: 8px; }
.chart-labels { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.chart-labels .peak { color: var(--shell); font-weight: 700; }
.chart-stats { display: flex; gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.chart-stat { flex: 1; }
.stat-num { font-family: var(--serif); font-size: clamp(28px,3.4vw,36px); color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.stat-label { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-wrap: pretty; }
.chart-note { margin-top: auto; display: flex; gap: 14px; align-items: flex-start; padding: 19px 21px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--shell); border-radius: 10px; }
.chart-note svg { flex: none; margin-top: 3px; }
.chart-note-lead { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 6px; letter-spacing: -0.005em; }
.chart-note p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }

/* ---- modo compromiso ---- */
.commit { padding: clamp(72px,9vw,120px) clamp(20px,5vw,32px); }
.commit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px,5vw,72px); align-items: center; }
.commit-title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px,4.4vw,54px); line-height: 1.04; letter-spacing: -0.01em; color: #fff; margin-bottom: 20px; text-wrap: balance; }
.commit-title em { font-style: italic; color: oklch(76% 0.13 256); }
.commit-sub { font-size: clamp(15px,1.5vw,17.5px); line-height: 1.6; color: oklch(88% 0.015 256 / 0.8); margin-bottom: 30px; max-width: 44ch; text-wrap: pretty; }
.commit-pick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(70% 0.04 256); margin-bottom: 12px; }
.dur-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dur-pill { font-family: var(--sans); font-size: 14.5px; font-weight: 600; padding: 10px 20px; border-radius: 30px; color: oklch(82% 0.02 256 / 0.8); background: transparent; border: 1px solid oklch(50% 0.06 256 / 0.4); transition: all .15s; }
.dur-pill.is-active { background: var(--shell); color: #fff; border-color: var(--shell); }
.dur-hint { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 32px; min-height: 2.6em; }
.dur-hint .arr { color: oklch(76% 0.13 256); font-size: 15px; line-height: 1.45; flex: none; }
.dur-hint p { font-size: 14.5px; line-height: 1.45; color: oklch(86% 0.02 256 / 0.85); text-wrap: pretty; }
.commit-exit { border-left: 2px solid oklch(60% 0.18 256 / 0.6); padding-left: 20px; margin-bottom: 20px; }
.commit-exit p { font-size: 15.5px; line-height: 1.6; color: oklch(90% 0.015 256 / 0.9); text-wrap: pretty; }
.commit-contrast { font-size: 13.5px; line-height: 1.55; color: oklch(74% 0.025 256 / 0.7); text-wrap: pretty; }
.modal-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 15px; overflow: hidden; box-shadow: 0 34px 80px -36px #000; }

/* ---- por dentro (carrusel) ---- */
.showcase-head { margin-bottom: clamp(36px,4.5vw,54px); }
.showcase-head .sec-title { margin-bottom: 14px; }
.showcase-head .sec-sub { max-width: 58ch; }
.gallery { position: relative; max-width: 900px; margin: 0 auto; }
.gallery-stage { position: relative; }
.gallery-viewport { overflow: hidden; padding-bottom: 36px; }
.gallery-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.gslide { flex: 0 0 100%; min-width: 0; }
.shot-frame { aspect-ratio: 1254 / 930; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 0 22px 54px -34px oklch(20% 0.06 256 / 0.5); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery-arrow { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: color-mix(in oklab, var(--paper) 86%, transparent); border: 1px solid var(--hairline); box-shadow: 0 8px 22px -10px oklch(20% 0.06 256 / 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .15s, transform .15s; }
.gallery-arrow:hover { background: var(--paper); transform: translateY(-50%) scale(1.07); }
.gallery-arrow--prev { left: 14px; }
.gallery-arrow--next { right: 14px; }
.gallery-caps { position: relative; text-align: center; min-height: 3.8em; }
.gcap { display: none; }
.gcap.is-active { display: block; }
.gcap .shot-t { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.005em; }
.gcap .shot-d { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 52ch; margin: 0 auto; text-wrap: pretty; }
.gallery-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.gdot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); transition: all .2s; }
.gdot::after { content: ""; position: absolute; top: -16px; bottom: -16px; left: -4px; right: -4px; } /* ~44px tall tap target */
.gdot:hover { background: var(--subtle); }
.gdot.is-active { background: var(--shell); width: 22px; border-radius: 4px; }

/* ---- comparativa ---- */
.cmp-head { margin-bottom: clamp(40px,5vw,52px); }
.cmp-head .sec-title { max-width: 26ch; }
.cmp-tabs { margin-bottom: 26px; }
.tab-panel[hidden] { display: none; }
/* La tabla no cabe en un móvil (520px la de Free/Pro, 900px la de rivales), así que
   se desliza. Dos ayudas para que eso no sea un problema:
   1) sombra en el borde derecho que aparece SOLO si queda contenido por ver y se
      apaga al llegar al final. Truco de gradientes: la capa `local` (papel) viaja
      con el contenido y tapa la sombra `scroll`, que está fija al contenedor.
   2) la primera columna se queda fija (más abajo). */
.ctable-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to left, var(--paper) 45%, transparent) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 14%, transparent), transparent) right center / 13px 100% no-repeat scroll;
}
.ctable { min-width: 520px; }
.ctable--rivals { min-width: 900px; }
.ctable-head { display: flex; border-bottom: 2px solid var(--hairline-strong); }
.ctable-row { display: flex; border-bottom: 1px solid var(--hairline); transition: background .15s ease; }
.ctable-row:hover { background: var(--paper-deep); }
/* Primera columna fija al deslizar: sin esto, en el móvil te quedas mirando una
   fila de ✓ y ✕ sin saber qué función estás comparando. Además, como Tortuga es
   la columna inmediatamente siguiente, al fijarla siempre se ve "fila + nuestro
   valor" y se desliza solo para mirar a los rivales.
   Necesitan fondo opaco: si no, el contenido pasa por debajo y se lee doble. */
.ctable-feat, .ctable-rowlabel { position: sticky; left: 0; z-index: 2; background: var(--paper); }
.ctable-row:hover .ctable-rowlabel { background: var(--paper-deep); }
.ctable-feat { flex: 1.4; padding: 16px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; }
.ctable-rowlabel { flex: 1.4; padding: 15px 14px; font-size: 14px; font-weight: 500; color: var(--ink); display: flex; align-items: center; }
.ctable-rowlabel--rivals { padding: 17px 14px; }
.ctable-h { flex: 1; padding: 16px 12px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--muted); }
.ctable-h--us { color: var(--shell); background: var(--shell-tint); border-radius: 8px 8px 0 0; }
.ctable-cell { flex: 1; padding: 15px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; font-size: 13.5px; line-height: 1.35; color: var(--muted); font-weight: 600; }
.ctable-cell--us { background: var(--shell-tint); }
.ctable-cell.plain { font-weight: 400; }
.c-pos { color: var(--ok); } .c-neg { color: var(--danger); } .c-soon { color: var(--warn); } .c-strong { color: var(--ink); }
.ctable-more { margin: 16px auto 0; max-width: 62ch; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.cmp-close { margin-top: 26px; padding: clamp(26px,3vw,38px) clamp(26px,3vw,40px); background: var(--shell-tint); border-radius: 14px; }
.cmp-close-lead { font-family: var(--serif); font-size: clamp(22px,2.7vw,32px); line-height: 1.16; letter-spacing: -0.01em; color: var(--shell-ink); margin-bottom: 12px; max-width: 24ch; text-wrap: balance; }
.cmp-close-lead em { font-style: italic; }
.cmp-close-sub { font-size: clamp(14px,1.45vw,16.5px); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; }

/* ---- precio ---- */
.price-head { margin-bottom: clamp(40px,5vw,52px); }
.price-head .sec-title { margin-bottom: 14px; }
.price-head .sec-sub { max-width: 62ch; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pcard { position: relative; border-radius: 16px; padding: clamp(28px,3.4vw,38px); display: flex; flex-direction: column; }
.pcard-free { background: var(--paper); border: 1px solid var(--shell); box-shadow: 0 20px 50px -28px oklch(48% 0.16 256 / 0.4); }
.pcard-pro { background: var(--ink); border: 1px solid var(--ink); }
.pcard-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pcard-name { font-family: var(--serif); font-size: 26px; }
.pcard-free .pcard-name { color: var(--ink); } .pcard-pro .pcard-name { color: #fff; }
.pcard-flag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shell); background: var(--shell-tint); padding: 4px 10px; border-radius: 20px; }
.pcard-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(78% 0.10 256); }
.pcard-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: oklch(70% 0.18 60); box-shadow: 0 0 0 3px oklch(70% 0.18 60 / 0.18); margin-right: 7px; }
.pcard-price { font-family: var(--serif); font-size: 40px; line-height: 1; margin: 10px 0 6px; }
.pcard-free .pcard-price { color: var(--ink); } .pcard-pro .pcard-price { color: #fff; }
.pcard-pricerow { display: flex; align-items: baseline; gap: 13px; margin: 10px 0 6px; }
.pcard-pricerow .pcard-price { margin: 0; }
.pcard-old { font-family: var(--serif); font-size: 22px; color: oklch(70% 0.025 256 / 0.7); text-decoration: line-through; text-decoration-color: oklch(75% 0.13 60); text-decoration-thickness: 2px; }
.pcard-cur { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: oklch(80% 0.03 256); align-self: center; }
.pcard-note { font-size: 13px; margin-bottom: 24px; }
.pcard-free .pcard-note { color: var(--muted); } .pcard-pro .pcard-note { color: oklch(82% 0.015 256 / 0.75); }
.pcard-reassure { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--shell); background: var(--shell-tint); border-radius: 9px; padding: 11px 14px; margin-bottom: 24px; text-wrap: pretty; }
.pcard-div { height: 1px; margin-bottom: 24px; }
.pcard-free .pcard-div { background: var(--hairline); } .pcard-pro .pcard-div { background: oklch(40% 0.10 256 / 0.45); }
.pcard-feats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; flex: 1; }
.pcard-feat { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 14px; line-height: 1.45; align-items: start; }
.pcard-free .pcard-feat { color: var(--ink-soft); } .pcard-pro .pcard-feat { color: oklch(88% 0.015 256 / 0.85); }
.pcard-feat .ck { font-weight: 600; }
.pcard-free .pcard-feat .ck { color: var(--shell); } .pcard-pro .pcard-feat .ck { color: oklch(76% 0.13 256); }
.pcard-noscript { margin-top: 12px; font-size: 12.5px; line-height: 1.5; text-align: center; color: oklch(82% 0.015 256 / 0.85); }
.pcard-noscript a { color: #fff; text-decoration: underline; }
.pcard-foot { text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 14px; }
.pcard-free .pcard-foot { color: var(--muted); } .pcard-pro .pcard-foot { color: oklch(78% 0.04 256); }

/* ---- descarga + faq ---- */
.dl-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(40px,5vw,56px); align-items: center; }
.dl-h { font-family: var(--serif); font-weight: 400; font-size: clamp(32px,4vw,48px); line-height: 1.05; letter-spacing: -0.01em; color: #fff; margin-bottom: 16px; text-wrap: balance; }
.dl-sub { font-size: 16px; line-height: 1.6; color: oklch(85% 0.015 256 / 0.72); max-width: 48ch; text-wrap: pretty; }
.dl-card { background: oklch(22% 0.05 256); border: 1px solid oklch(40% 0.12 256 / 0.4); border-radius: 14px; padding: 26px 24px; }
.dl-ver { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(78% 0.10 256); margin-bottom: 6px; }
.dl-os { font-family: var(--serif); font-size: 23px; color: #fff; margin-bottom: 6px; }
.dl-specs { font-family: var(--mono); font-size: 11.5px; color: oklch(78% 0.025 256 / 0.7); margin-bottom: 22px; letter-spacing: 0.03em; }
.dl-warn { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; padding: 14px; background: oklch(26% 0.05 256 / 0.5); border: 1px solid oklch(55% 0.12 60 / 0.45); border-radius: 8px; }
.dl-warn .bang { font-family: var(--mono); font-size: 12px; color: oklch(82% 0.12 60); flex: none; font-weight: 600; }
.dl-warn p { font-size: 12.5px; line-height: 1.55; color: oklch(84% 0.06 60); text-wrap: pretty; }
.faq-wrap { margin-top: clamp(56px,7vw,84px); display: grid; grid-template-columns: 0.68fr 1.32fr; gap: clamp(36px,5vw,72px); align-items: start; }
.faq-aside { position: sticky; top: 84px; }
.faq-aside h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,3.2vw,40px); line-height: 1.06; color: #fff; margin-bottom: 16px; }
.faq-aside p { font-size: 15px; line-height: 1.6; color: oklch(82% 0.015 256 / 0.7); max-width: 32ch; text-wrap: pretty; }
.faq-list { border-top: 1px solid oklch(42% 0.08 256 / 0.45); }
.faq-item { border-bottom: 1px solid oklch(42% 0.08 256 / 0.45); }
.faq-q { width: 100%; display: grid; grid-template-columns: 36px 1fr 26px; align-items: baseline; gap: 16px; padding: 24px 2px; text-align: left; }
.faq-q .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: oklch(78% 0.10 256); }
.faq-q .q { font-family: var(--serif); font-size: clamp(18px,2vw,22px); line-height: 1.2; color: #fff; }
.faq-q .ic { font-family: var(--sans); font-size: 24px; font-weight: 300; line-height: 1; color: oklch(78% 0.10 256); transition: transform .2s; }
.faq-item.is-open .faq-q .ic { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; }
.faq-item.is-open .faq-a { max-height: none; animation: faqIn 0.28s cubic-bezier(0.19,1,0.22,1); }
.faq-a-in { padding: 0 26px 26px 52px; }
.faq-a-in p { font-size: 15px; line-height: 1.62; color: oklch(85% 0.015 256 / 0.78); max-width: 62ch; text-wrap: pretty; }

/* ---- footer ---- */
.footer { background: var(--paper); border-top: 1px solid var(--hairline); padding: clamp(48px,6vw,64px) clamp(20px,5vw,32px) clamp(28px,4vw,40px); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px 32px; }
.footer-brand { max-width: 30ch; }
.footer-brand .b { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .b span { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.footer-brand .brand-logo { height: 28px; width: auto; }
.footer-brand p { font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.foot-col .foot-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin-bottom: 14px; }
.foot-col div { display: flex; flex-direction: column; gap: 9px; }
.foot-link { font-size: 13.5px; color: var(--ink-soft); transition: color .16s; overflow-wrap: anywhere; }
.foot-link:hover { color: var(--shell); }
.footer-bottom { max-width: 1100px; margin: clamp(40px,5vw,52px) auto 0; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--subtle); }
.footer-bottom .q { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 13px; letter-spacing: 0; }

/* ---- fab ---- */
.fab { position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.45); opacity: 0.9; transition: opacity .2s, background .2s; }
.fab:hover { opacity: 1; background: var(--shell-ink); }

/* ---- noscript ---- */
.noscript { max-width: 640px; margin: 12vh auto; padding: 0 24px; text-align: center; }
.noscript .ns-title { font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--ink); margin: 0 0 12px; }
.noscript p { color: var(--ink-soft); line-height: 1.6; }
.noscript a { color: var(--shell); }
.noscript .ns-small { font-size: 13px; }

/* ---- animations ---- */
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blinkDot { 0%,55% { opacity: 1; } 56%,100% { opacity: 0.25; } }
@keyframes pktFall { 0% { transform: translate(-50%,0); opacity: 0; } 10% { opacity: 1; } 54% { transform: translate(-50%,var(--fall,50px)); opacity: 1; } 62% { transform: translate(-50%,var(--fall,50px)) scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes ringPulse { 0%,52% { transform: translate(-50%,-50%) scale(.55); opacity: 0; } 62% { opacity: .5; } 88% { transform: translate(-50%,-50%) scale(2); opacity: 0; } 100% { opacity: 0; } }
@keyframes blockGlow { 0%,56% { opacity: .4; transform: scale(.985); } 66% { opacity: 1; transform: scale(1); } 100% { opacity: .62; transform: scale(1); } }
@keyframes caretBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes typeUrl { 0% { width: 0; } 44% { width: 13ch; } 90% { width: 13ch; } 100% { width: 0; } }

/* reveal-on-scroll — only hides when JS is active so no-JS still shows content */
[data-anim="hero"], [data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js [data-anim="hero"], .js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-anim="hero"].is-in, .js [data-reveal].is-in { opacity: 1; transform: none; }

/* pause decorative loops when their container scrolls out of view (toggled by app.js) */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .hero-grid, .two-col, .how-grid, .bridge-grid, .commit-grid, .dl-grid, .faq-wrap, .tamper-grid, .price-grid { grid-template-columns: 1fr; }
  .sticky-84, .viz, .faq-aside { position: static; }
  .hero-panel-wrap { max-width: 560px; margin-inline: auto; }
}
/* mobile nav: brand + burger on the bar, links/lang/CTA drop into a panel */
@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
  .nav-inner { flex-wrap: wrap; height: auto; min-height: 64px; column-gap: 12px; row-gap: 0; justify-content: space-between; }
  .nav-links, .nav-right { display: none; flex: 0 0 100%; width: 100%; flex-direction: column; align-items: stretch; }
  .nav-links { gap: 2px; margin-top: 8px; padding-top: 10px; padding-bottom: 6px; border-top: 1px solid var(--hairline); justify-content: flex-start; }
  .nav-link { padding: 12px 6px; font-size: 15px; }
  .nav-link.is-current::after { display: none; }
  .nav-right { gap: 14px; padding-bottom: 16px; }
  .nav-right .lang { align-self: flex-start; }
  .nav-right .btn-ink { align-self: stretch; text-align: center; }
  .nav-toggle:checked ~ .nav-links,
  .nav-toggle:checked ~ .nav-right { display: flex; }
  .nav-toggle:checked ~ .nav-burger .ico-open { display: none; }
  .nav-toggle:checked ~ .nav-burger .ico-close { display: inline; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--shell); outline-offset: 2px; }
}
@media (max-width: 680px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mock-tiles { grid-template-columns: repeat(2, 1fr); }
  /* opaque nav on mobile: blur/saturate compositing is costly on low-end GPUs */
  .nav, .legal-nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 520px) {
  /* el eyebrow del hero lleva las keywords ("Tortuga · Bloqueador para Windows"):
     en mono, mayúsculas y .18em se pasa de ancho en pantallas de 360px y cae a dos
     líneas. Aflojando el espaciado entra en una sola, sin tocar el desktop. */
  .hero-eyebrow { letter-spacing: 0.10em; }
  .footer-grid { grid-template-columns: 1fr; }
  .mock-body { grid-template-columns: 1fr; }   /* drop the fixed 108px sidebar */
  .mock-side { display: none; }
  .mock-tile-l { font-size: 8px; }
  .chart-plot { gap: 2px; }                     /* 28 month bars fit without collapsing */
  .chart-plot.month .bar-fill { width: 4px; min-height: 5px; }
}
/* bigger tap targets on touch devices (min ~44px height) */
@media (pointer: coarse) {
  .btn-ink { padding-top: 13px; padding-bottom: 13px; }
  .seg-btn, .seg--sm .seg-btn { padding-top: 11px; padding-bottom: 11px; }
  .lang-btn { padding-top: 10px; padding-bottom: 10px; }
}

/* ---- honor reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim="hero"], [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- legal pages (privacy / terms) ---- */
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }
.legal-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid color-mix(in oklab, var(--hairline) 65%, transparent); }
.legal-nav-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* selector de idioma + "volver al inicio", juntos a la derecha (reusa .lang/.lang-btn del nav de index) */
.legal-nav-right { display: flex; align-items: center; gap: 14px; }
.legal-back { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); transition: color .16s; }
.legal-back:hover { color: var(--shell); }
.legal-page { padding: clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px); }
.legal-head { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); }
.legal-head .eyebrow { margin-bottom: 14px; }
.legal-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4.6vw,52px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; }
.legal-meta { font-family: var(--mono); font-size: 12px; color: var(--subtle); letter-spacing: 0.06em; }
/* Nota de prevalencia del español al pie de privacy/terms (el texto vinculante es
   el ES; la traducción es cortesía). Discreta a propósito: es una nota, no una
   sección. */
.legal-prevail { margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: var(--subtle); font-style: italic; }
.legal-body { max-width: 70ch; }
.legal-body h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 44px 0 16px; color: var(--ink); letter-spacing: -0.005em; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; }
.legal-body ul { list-style: none; padding: 0; margin: 12px 0 20px; }
.legal-body li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.legal-body li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--shell); font-weight: 600; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body code, .ver-notes code { font-family: var(--mono); font-size: 13px; background: var(--paper-deep); color: var(--shell-ink); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--hairline); word-break: break-word; }
.legal-body a { color: var(--shell); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--shell-deep); }
.legal-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline); font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); }
.legal-footer { border-top: 1px solid var(--hairline); padding: 28px 0; }
.legal-footer-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--subtle); letter-spacing: 0.04em; }
.legal-footer-in a { color: var(--ink-soft); transition: color .16s; }
.legal-footer-in a:hover { color: var(--shell); }

/* ---- recibo digital (gracias.html) ---- */
.receipt { max-width: 64ch; border: 1px solid var(--hairline); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ink) 40%, transparent), 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent); overflow: hidden; }
.receipt-loading { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 0; padding: clamp(22px,4vw,34px); }
.receipt-ready { padding: clamp(22px,4vw,34px); }

.receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.receipt-brand { display: flex; align-items: center; gap: 12px; }
.receipt-logo { width: 38px; height: 38px; border-radius: 9px; }
.receipt-brandname { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); line-height: 1.1; }
.receipt-doctype { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin-top: 3px; }
.receipt-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, var(--paper)); border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.receipt-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 9px; line-height: 1; }

.receipt-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 22px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.receipt-prod { display: block; font-family: var(--serif); font-size: 23px; color: var(--ink); line-height: 1.15; }
.receipt-prodsub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.receipt-amount { font-family: var(--serif); font-size: 30px; color: var(--ink); white-space: nowrap; }

.receipt-rows { padding: 8px 0 4px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; }
.receipt-row span:first-child { color: var(--muted); }
.receipt-row span:last-child { color: var(--ink); font-weight: 500; text-align: right; }
.receipt-ref { font-family: var(--mono) !important; font-size: 12.5px; color: var(--subtle) !important; font-weight: 400 !important; word-break: break-all; }

.receipt-keylabel { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin-bottom: 9px; }
.receipt-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--shell-tint); border: 1px solid color-mix(in oklab, var(--shell) 30%, var(--hairline)); border-radius: 11px; padding: 14px 16px; }
.receipt-key code { font-family: var(--mono); font-size: 15px; color: var(--shell-ink); word-break: break-all; flex: 1 1 220px; min-width: 0; }
.receipt-copy { font-family: var(--mono); font-size: 13px; color: #fff; background: var(--shell); padding: 9px 15px; border-radius: 8px; white-space: nowrap; transition: background .16s; }
.receipt-copy:hover { background: var(--shell-deep); }

.receipt-how { margin-top: 24px; }
.receipt-how p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }
.receipt-how a { color: var(--shell); text-decoration: underline; text-underline-offset: 2px; }
.receipt-muted { color: var(--subtle); font-size: 13px; }
.receipt-pending { padding: clamp(22px,4vw,34px); }
.receipt-pending p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.receipt-pending a { color: var(--shell); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 520px) {
  .receipt-hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .receipt-amount { font-size: 26px; }
}

/* ---- versiones (changelog) ---- */
.ver-list { border-top: 1px solid var(--hairline); }
.ver-item { border-bottom: 1px solid var(--hairline); }
.ver-sum { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 20px 2px; }
.ver-sum::-webkit-details-marker { display: none; }
.ver-sum:hover .ver-num { color: var(--shell); }
.ver-num { font-family: var(--serif); font-size: clamp(20px,2.4vw,26px); line-height: 1; color: var(--ink); transition: color .16s; }
.ver-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shell); background: var(--shell-tint); border: 1px solid color-mix(in oklab, var(--shell) 16%, transparent); padding: 3px 8px; border-radius: 20px; }
.ver-date { font-family: var(--mono); font-size: 12px; color: var(--subtle); letter-spacing: 0.04em; margin-left: auto; }
.ver-chevron { font-family: var(--sans); font-size: 24px; font-weight: 300; line-height: 1; color: var(--shell); transition: transform .2s ease; flex: none; }
.ver-item[open] .ver-chevron { transform: rotate(45deg); }
.ver-notes { padding: 2px 2px 24px; }
.ver-lead { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.ver-notes ul { list-style: none; padding: 0; margin: 0; }
.ver-cat { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shell); margin: 14px 0 10px; }
.ver-notes li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }
.ver-notes li:last-child { margin-bottom: 0; }
.ver-notes li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--shell); font-weight: 600; }
/* tabs Free/Pro dentro de una versión (CSS puro vía :has) */
.ver-tabin { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ver-tabbar { display: inline-flex; gap: 4px; background: var(--paper-deep); border-radius: 10px; padding: 4px; margin: 6px 0 16px; }
.ver-tab { font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 7px 18px; border-radius: 7px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.ver-tab--free { background: var(--shell); color: #fff; }
.ver-tabs:has(.ver-pro:checked) .ver-tab--free { background: transparent; color: var(--muted); }
.ver-tabs:has(.ver-pro:checked) .ver-tab--pro { background: var(--shell); color: #fff; }
.ver-tabs:has(.ver-free:focus-visible) .ver-tab--free,
.ver-tabs:has(.ver-pro:focus-visible) .ver-tab--pro { outline: 2px solid var(--shell); outline-offset: 2px; }
.ver-panel { display: none; }
.ver-panel--free { display: block; }
.ver-tabs:has(.ver-pro:checked) .ver-panel--free { display: none; }
.ver-tabs:has(.ver-pro:checked) .ver-panel--pro { display: block; }
/* fallback for browsers without :has() — tabs can't switch, so hide them and show both panels */
@supports not selector(:has(*)) {
  .ver-tabbar { display: none; }
  .ver-panel { display: block; }
}
.ver-incl { font-size: 14px; font-style: italic; color: var(--muted); margin-bottom: 12px; }