/* Fuentes servidas desde la propia web (sin Google Fonts: ningún dato del visitante sale a terceros). OFL 1.1. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/sitio/fuentes/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/sitio/fuentes/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/sitio/fuentes/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/sitio/fuentes/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/sitio/fuentes/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/sitio/fuentes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/sitio/fuentes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap; src: url("/sitio/fuentes/literata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap; src: url("/sitio/fuentes/literata-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("/sitio/fuentes/literata-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/sitio/fuentes/literata-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 500; font-display: swap; src: url("/sitio/fuentes/literata-latin-500-italic.woff2") format("woff2"); }
/* Papyvo · web pública · «La página viva» (v2, 30 oct 2026)
   Marca: paleta P1 «Papiro vivo» (papyvo-marca/tokens.css). Hanken Grotesk para marca, titulares e interfaz;
   Literata para lo que escribe y lee el autor. Tema claro «papel» fijo. Sin dependencias de otros sistemas.
   Movimiento: CSS ligado al scroll con @supports; GSAP ScrollTrigger solo si el navegador no lo soporta.
   Con «reducir movimiento» todo queda visible y quieto. */

/* ——— Tipografía de respaldo ajustada (evita saltos al cargar las fuentes) ——— */
@font-face { font-family: "Hanken Respaldo"; font-weight: 100 549; src: local("Arial"), local("ArialMT"); size-adjust: 99.8%; ascent-override: 100.2%; descent-override: 30.1%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Respaldo"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 94.2%; ascent-override: 106.2%; descent-override: 31.8%; line-gap-override: 0%; }
@font-face { font-family: "Literata Respaldo"; src: local("Georgia"); size-adjust: 104.3%; ascent-override: 113.1%; descent-override: 29.7%; line-gap-override: 0%; }

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --trazo { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* ——— Tokens ——— */
:root {
  color-scheme: light;
  --papel: #f9f6eb; --papel: oklch(97.2% 0.014 95);
  --superficie: #f0ede0; --superficie: oklch(94.5% 0.018 95);
  --superficie-alta: #fdfcf6; --superficie-alta: oklch(99% 0.008 95);
  --hundido: #e7e3d4; --hundido: oklch(91.5% 0.02 95);
  --borde: #d5d1c3; --borde: oklch(86% 0.02 95);
  --borde-suave: #e3dfd1; --borde-suave: oklch(90.5% 0.018 95);
  --control: #7e7a72; --control: oklch(58% 0.012 85);
  --tinta: #211e17; --tinta: oklch(23.5% 0.014 85);
  --tinta-2: #59554d; --tinta-2: oklch(45% 0.014 85);
  --tinta-3: #66635c; --tinta-3: oklch(50% 0.012 85);
  --fantasma: #6c6861; --fantasma: oklch(52% 0.012 85);
  --acento: #376c32; --acento: oklch(48% 0.105 142);
  --acento-hover: #2b5d27; --acento-hover: oklch(43% 0.1 142);
  --acento-suave: #d9efd7; --acento-suave: oklch(93% 0.04 142);
  --sobre-acento: #fcfaf3; --sobre-acento: oklch(98.5% 0.01 95);
  --realce: #e6d271; --realce: oklch(86% 0.12 98);
  --sobre-realce: #211e17;
  --foco: #376c32; --foco: oklch(48% 0.105 142);
  --exito: #126b47; --exito: oklch(47% 0.1 160);
  --error: #ac312a; --error: oklch(50% 0.16 28);
  --error-suave: #ffe4e0; --error-suave: oklch(94% 0.03 28);
  --exito-suave: #d8f3e3; --exito-suave: oklch(94% 0.035 160);
  --aviso: #915c08; --aviso-suave: #fbe9ca;

  --fuente-ui: "Hanken Grotesk", "Hanken Respaldo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-display: "Plus Jakarta Sans", "Hanken Grotesk", "Hanken Respaldo", ui-sans-serif, system-ui, sans-serif;
  --fuente-lectura: "Literata", "Literata Respaldo", "Iowan Old Style", Georgia, serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-micro: 0.75rem; --t-pie: 0.875rem; --t-base: 1rem; --t-lectura: 1.1875rem;
  --t-h4: 1.25rem; --t-h3: 1.5625rem; --t-h2: clamp(1.95rem, 1.35rem + 2.2vw, 3rem); --t-display: clamp(2.6rem, 1.5rem + 3.9vw, 4.4rem);

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --seccion: clamp(88px, 6rem + 5vw, 168px);
  --radio-s: 4px; --radio-m: 8px; --radio-l: 14px;
  --angulo-calamo: 32deg;
  --bisel: 0.625em; /* desplazamiento horizontal del corte a 32° para un trazo de 0,39em: alto / tan(32°) */
  --ancho: 1200px;
  --margen: clamp(20px, 4.2vw, 48px);
  --barra: 64px;

  --dur-rapida: 140ms; --dur-ui: 220ms; --dur-narrativa: 600ms;
  --curva-salida: cubic-bezier(.22,.8,.24,1); --curva-tinta: cubic-bezier(.45,.05,.2,1);
  --sombra-hoja: 0 1px 0 rgb(33 30 23 / .04), 0 1px 2px rgb(33 30 23 / .06), 0 24px 48px -24px rgb(33 30 23 / .22), 0 60px 90px -60px rgb(33 30 23 / .18);
  --sombra-1: 0 1px 2px rgb(33 30 23 / .06), 0 2px 8px rgb(33 30 23 / .05);
  --grano: url("/sitio/img/grano.png");
  interpolate-size: allow-keywords;
}

/* Una banda en «tinta» (tema oscuro de la marca), solo para la sección de la IA */
.s-noche {
  color-scheme: dark;
  --papel: #15130d; --papel: oklch(18.5% 0.012 90);
  --superficie: #1e1c15; --superficie: oklch(22.5% 0.013 90);
  --superficie-alta: #27241c; --superficie-alta: oklch(26% 0.014 90);
  --borde: #38352d; --borde: oklch(33% 0.014 90);
  --borde-suave: #2c2a23; --borde-suave: oklch(28% 0.013 90);
  --control: #77746d;
  --tinta: #eceadf; --tinta: oklch(93.5% 0.014 95);
  --tinta-2: #adaba1; --tinta-2: oklch(74% 0.014 95);
  --tinta-3: #9b9890; --tinta-3: oklch(68% 0.012 90);
  --fantasma: #95928a;
  --acento: #8dca80; --acento: oklch(78% 0.12 140);
  --acento-hover: #a1d995;
  --acento-suave: #1d2e1b;
  --sobre-acento: #111810;
  --foco: #8dca80;
  background: var(--papel); color: var(--tinta);
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); color: var(--tinta); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: var(--peso, 400) var(--t-base)/1.55 var(--fuente-ui);
  background: var(--papel) var(--grano) repeat; background-size: 128px;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: 600 0.78em/1 var(--fuente-ui); letter-spacing: .01em; padding: .28em .42em .26em; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px; background: var(--superficie-alta); color: var(--tinta-2); white-space: nowrap; }
::selection { background: var(--realce); color: var(--sobre-realce); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.s-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.s-saltar { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radio-m); background: var(--tinta); color: var(--papel); font-weight: 600; text-decoration: none; }
.s-saltar:focus { top: 12px; }

.s-envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ——— Textos comunes ——— */
.s-antetitulo { display: flex; align-items: center; gap: 10px; font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.s-antetitulo .s-num { color: var(--acento); font-variant-numeric: tabular-nums; }
.s-h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.026em; }
.s-h2 .s-suave, .s-display .s-suave { color: var(--tinta-2); font-weight: 450; }
.s-entrada { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--tinta-2); max-width: 36em; }
.s-letra { font-size: var(--t-pie); color: var(--tinta-3); }
.s-cabeza { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 44rem; }
.s-cabeza--ancha { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 24px 64px; }
.s-cabeza--ancha .s-entrada { justify-self: end; }
@media (max-width: 860px) { .s-cabeza--ancha { grid-template-columns: 1fr; } .s-cabeza--ancha .s-entrada { justify-self: start; } }

/* El trazo del cálamo: subrayado con los extremos cortados a 32° */
.s-trazo { position: relative; white-space: nowrap; }
.s-trazo::after {
  content: ""; position: absolute; left: -0.02em; right: -0.04em; bottom: 0.03em; height: 0.09em; min-height: 3px;
  background: var(--acento);
  --off: calc(max(3px, 0.09em) / 0.6249);
  clip-path: polygon(var(--off) 0, max(var(--off), var(--trazo)) 0, max(0px, calc(var(--trazo) - var(--off))) 100%, 0 100%);
}
.s-trazo--realce::after { background: var(--realce); height: .32em; bottom: .02em; z-index: -1; --off: calc(.32em / .6249); }

/* ——— Botones y enlaces ——— */
.s-btn {
  --alto: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--alto); padding: 0 22px; border-radius: 10px; border: 1px solid transparent;
  background: var(--acento); color: var(--sobre-acento);
  font: 600 1rem/1 var(--fuente-ui); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-rapida) ease, transform var(--dur-rapida) ease, box-shadow var(--dur-ui) ease, border-color var(--dur-rapida) ease;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 1px 2px rgb(33 30 23 / .18);
  -webkit-tap-highlight-color: transparent;
}
.s-btn:hover { background: var(--acento-hover); }
.s-btn:active { transform: scale(.98); }
.s-btn--sec { background: transparent; color: var(--tinta); border-color: var(--control); box-shadow: none; }
.s-btn--sec:hover { background: color-mix(in oklab, var(--tinta) 5%, transparent); }
.s-btn--tinta { background: var(--tinta); color: var(--papel); }
.s-btn--tinta:hover { background: color-mix(in oklab, var(--tinta) 88%, var(--acento)); }
.s-btn--peq { --alto: 38px; padding: 0 14px; font-size: .9375rem; border-radius: 8px; }
.s-btn--ancho { width: 100%; }
.s-btn .s-flecha { width: 1em; height: 1em; transition: transform var(--dur-ui) var(--curva-salida); }
.s-btn:hover .s-flecha { transform: translateX(3px); }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.s-btn[aria-busy="true"] { cursor: progress; }

.s-enlace { --trazo: 0%; position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 600; text-decoration: none; padding: 6px 0; }
.s-enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--acento); --off: 3.2px; clip-path: polygon(var(--off) 0, max(var(--off), var(--trazo)) 0, max(0px, calc(var(--trazo) - var(--off))) 100%, 0 100%); transition: --trazo 360ms var(--curva-tinta); }
.s-enlace:hover, .s-enlace:focus-visible { --trazo: 100%; }
.s-texto a, .s-enlace-linea { color: var(--acento); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, var(--acento) 45%, transparent); }
.s-texto a:hover, .s-enlace-linea:hover { text-decoration-color: currentColor; }

/* ——— Barra ——— */
.s-barra {
  position: sticky; top: 0; z-index: 50; height: var(--barra);
  background: color-mix(in oklab, var(--papel) 93%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
.s-barra > .s-envoltura { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.s-marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--tinta); border-radius: 6px; view-transition-name: marca; }
.s-marca svg, .s-marca img { height: 30px; width: auto; overflow: visible; }
.s-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-size: .9375rem; font-weight: 500; }
.s-nav a:not(.s-btn) { color: var(--tinta-2); text-decoration: none; padding: 8px 0; transition: color var(--dur-rapida); }
.s-nav a:not(.s-btn):hover { color: var(--tinta); }
.s-nav .s-btn { --alto: 40px; padding: 0 16px; font-size: .9375rem; }
@media (max-width: 760px) { .s-nav .s-ancla { display: none; } }
@media (max-width: 380px) { .s-marca svg, .s-marca img { height: 26px; } .s-nav { gap: 12px; } .s-nav .s-btn { padding: 0 12px; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-barra { animation: barra-filete linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    @keyframes barra-filete { to { border-bottom-color: var(--borde-suave); } }
  }
}

/* Logo que se escribe solo (mismas máscaras que papyvo-marca/logo-animado.html) */
.pv-ink { fill: var(--tinta); } .pv-acc { fill: var(--acento); }
.pv-s1, .pv-s2 { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.pv-dot { transform-box: fill-box; transform-origin: 50% 50%; }
.pv-wipe, .pv-wipe-line { transform-box: fill-box; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .pv-play .pv-s1 { animation: pv-draw .62s var(--curva-tinta) .15s both; }
  .pv-play .pv-s2 { animation: pv-draw .7s var(--curva-tinta) .65s both; }
  .pv-play .pv-dot { animation: pv-dot .42s cubic-bezier(.2,.9,.3,1.25) 1.3s both; }
  .pv-play .pv-wipe-line { animation: pv-wipe .8s var(--curva-salida) 1.57s both; }
  .pv-play .pv-wipe { animation: pv-wipe .95s var(--curva-salida) 1.45s both; }
}
@keyframes pv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pv-dot { 0% { transform: scale(.1); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pv-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ——— Héroe ——— */
.s-heroe { position: relative; padding: clamp(40px, 7vh, 96px) 0 clamp(72px, 10vh, 128px); }
.s-heroe > .s-envoltura { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.s-heroe__texto { display: grid; gap: 28px; align-content: center; }
.s-display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.034em; font-weight: 600; }
.s-display > span { display: block; }
.s-display .s-trazo::after { --trazo: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .s-display .s-trazo::after { animation: trazo-entra 900ms var(--curva-tinta) 2.1s both; }
}
@keyframes trazo-entra { from { --trazo: 0%; } to { --trazo: 100%; } }
.s-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.s-sello { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-pie); color: var(--tinta-2); }
.s-sello li { position: relative; padding-left: 17px; }
.s-sello li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 3px; background: var(--acento); clip-path: polygon(4.8px 0, 100% 0, calc(100% - 4.8px) 100%, 0 100%); }
@media (max-width: 960px) {
  .s-heroe > .s-envoltura { grid-template-columns: 1fr; }
  .s-heroe__texto { max-width: 40rem; }
}

/* La hoja de papiro (demo del héroe) */
.s-hoja-marco { position: relative; display: grid; gap: 14px; }
.s-hoja {
  position: relative; isolation: isolate;
  padding: clamp(24px, 3.2vw, 44px) clamp(22px, 3.4vw, 48px) clamp(18px, 2.4vw, 28px);
  background-color: var(--superficie-alta);
  background-image:
    var(--grano),
    repeating-linear-gradient(90deg, rgb(110 96 50 / .028) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(110 96 50 / .022) 0 1px, transparent 1px 9px);
  background-size: 128px, auto, auto;
  border: 1px solid var(--borde-suave); border-radius: 3px;
  box-shadow: var(--sombra-hoja);
  font-family: var(--fuente-lectura); font-size: var(--t-lectura); line-height: 1.62; font-variant-numeric: oldstyle-nums;
  color: var(--tinta);
}
.s-hoja__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; font: 600 var(--t-micro)/1.2 var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.s-musa { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--acento-suave); color: var(--acento-hover); letter-spacing: .02em; text-transform: none; font-size: .75rem; font-weight: 600; }
.s-musa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.s-hoja__titulo { font: 600 clamp(1.4rem, 1.1rem + 1vw, 1.75rem)/1.15 var(--fuente-lectura); letter-spacing: -0.01em; margin-bottom: 18px; font-variant-numeric: lining-nums; }
.s-hoja p + p, .s-hoja p + .s-escritura { margin-top: .9em; }
.s-hoja p:first-of-type::first-letter { font-weight: 600; }
.s-escritura { position: relative; display: grid; min-height: calc(1.62em * 3 + 4px); border-radius: 4px; margin-inline: -8px; padding: 2px 8px; transition: box-shadow var(--dur-ui); }
.s-escritura:has(textarea:focus-visible) { box-shadow: 0 0 0 2px var(--superficie-alta), 0 0 0 4px color-mix(in oklab, var(--foco) 70%, transparent); }
.s-escritura > * { grid-area: 1 / 1; margin: 0; padding: 0; font: inherit; line-height: inherit; letter-spacing: inherit; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; hyphens: none; font-variant-numeric: inherit; text-align: left; }
.s-espejo { color: transparent; pointer-events: none; user-select: none; -webkit-user-select: none; }
.s-espejo .s-fantasma { color: var(--fantasma); }
.s-espejo::after { content: "\200b"; }
.s-escritura textarea { width: 100%; height: 100%; min-height: 1.62em; border: 0; outline: 0; background: transparent; resize: none; overflow: hidden; color: var(--tinta); caret-color: var(--acento); z-index: 1; }
.s-escritura textarea::placeholder { color: var(--fantasma); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .s-fantasma { animation: fantasma-entra 420ms var(--curva-salida) both; }
}
@keyframes fantasma-entra { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
.s-hoja__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--borde-suave); font: 500 var(--t-pie)/1.3 var(--fuente-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.s-hoja__acciones { display: flex; gap: 8px; }
.s-hoja__acciones .s-btn { --alto: 36px; padding: 0 12px; font-size: .875rem; gap: 8px; }
.s-hoja__acciones .s-btn kbd { font-size: .72rem; padding: .2em .38em; background: transparent; border-color: currentColor; color: inherit; opacity: .8; }
.s-hoja__acciones .s-btn--sec { border-color: var(--borde); }
.s-hoja-nota { font-size: var(--t-pie); color: var(--tinta-3); padding-inline: 4px; }
.s-hoja-nota b { color: var(--tinta-2); font-weight: 600; }
@media (max-width: 480px) { .s-hoja__acciones { width: 100%; } .s-hoja__acciones .s-btn { flex: 1; } }

/* ——— Secciones ——— */
.s-seccion { padding-block: var(--seccion); position: relative; }
.s-seccion--filete { border-top: 1px solid var(--borde-suave); }

/* ——— La historia: la página se convierte en libro ——— */
.s-historia-intro { padding-top: var(--seccion); }
.s-historia { position: relative; view-timeline-name: --historia; view-timeline-axis: block; }
.s-historia > .s-envoltura { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.s-pasos { display: grid; }
.s-paso { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; gap: 14px; padding-block: 8vh; }
.s-paso > h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.s-paso > p:not(.s-antetitulo) { color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.6; max-width: 30em; }
.s-paso .s-antetitulo .s-num::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--borde); }
.s-escena-col { position: relative; }
.s-escenario {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  container-type: size; container-name: escenario;
  padding-top: var(--barra);
  --a: clamp(0, (var(--p) - .04) / .2, 1);
  --b: clamp(0, (var(--p) - .30) / .2, 1);
  --b2: clamp(0, (var(--p) - .40) / .14, 1);
  --c: clamp(0, (var(--p) - .55) / .2, 1);
  --d: clamp(0, (var(--p) - .80) / .17, 1);
  --ea: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
  --eb: calc(var(--b) * var(--b) * (3 - 2 * var(--b)));
  --ec: calc(var(--c) * var(--c) * (3 - 2 * var(--c)));
  --ed: calc(var(--d) * var(--d) * (3 - 2 * var(--d)));
}
.s-lienzo { position: relative; width: 100%; height: 100%; container-type: size; }
.s-lienzo {
  --alto: min(76cqh, 64cqw, 640px);
  --pag: calc(var(--alto) / 1.5);
  --fs: calc(var(--alto) * .029);
  --dx: -25cqw; --dy: 0px; --escala: .64;
}
@container (max-width: 640px) { .s-lienzo { --alto: min(70cqh, 66cqw); --dx: -27cqw; --escala: .56; } }
@container (max-width: 460px) { .s-lienzo { --alto: min(72cqh, 68cqw); --dx: -33cqw; --dy: -2cqh; --escala: .5; } }

.s-libro { position: absolute; left: 50%; top: 50%; width: var(--pag); height: var(--alto); margin: calc(var(--alto) / -2) 0 0 calc(var(--pag) / -2);
  transform: translate(calc(var(--ec) * var(--dx)), calc(var(--ec) * var(--dy))) scale(calc(1 - var(--ec) * (1 - var(--escala))));
  transform-origin: 50% 50%; font-size: var(--fs); }
.s-pliego { position: absolute; inset: 0; transform: translateX(calc((var(--ea) - var(--eb)) * 50%)); transform-style: preserve-3d; perspective: calc(var(--alto) * 4); }
.s-pag { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background-color: var(--superficie-alta); background-image: var(--grano); background-size: 128px; box-shadow: var(--sombra-hoja); font-family: var(--fuente-lectura); color: var(--tinta); }
.s-pag--izq { transform-origin: 100% 50%; translate: calc(var(--ea) * -100%) 0; opacity: calc(var(--a) * 3); transform: rotateY(calc(var(--eb) * 180deg)); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset -18px 0 24px -20px rgb(33 30 23 / .35), var(--sombra-hoja); }
.s-pag--der { box-shadow: inset 18px 0 24px -20px rgb(33 30 23 / calc(.35 * var(--ea) * (1 - var(--eb)))), var(--sombra-hoja); }

/* Manuscrito (estado 1) */
.s-ms { position: absolute; inset: 0; padding: 9% 10%; opacity: calc(1 - var(--a) * 2.2); font-size: 1em; line-height: 1.55; }
.s-ms__cabeza { display: flex; justify-content: space-between; font: 600 .62em/1 var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 1.4em; }
.s-ms__titulo { font: 600 1.45em/1.15 var(--fuente-lectura); margin-bottom: .8em; }
.s-ms p + p { margin-top: .7em; }
.s-ms .s-fantasma { color: var(--fantasma); animation: none; }
.s-ms__pie { position: absolute; left: 10%; right: 10%; bottom: 6%; display: flex; justify-content: space-between; font: 500 .62em/1 var(--fuente-ui); color: var(--tinta-3); border-top: 1px solid var(--borde-suave); padding-top: .9em; }
.s-cursor { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--acento); }

/* Maqueta (estado 2) */
.s-mq { position: absolute; inset: 0; padding: 12% 12.5% 13%; opacity: calc(var(--a) * 2.2 - 1.1); font-size: .93em; line-height: 1.5; text-align: justify; hyphens: auto; -webkit-hyphens: auto; font-variant-numeric: oldstyle-nums; }
.s-mq__cabecera { position: absolute; top: 5.5%; left: 0; right: 0; text-align: center; font: 400 .6em/1 var(--fuente-lectura); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.s-mq__folio { position: absolute; bottom: 5.5%; left: 0; right: 0; text-align: center; font-size: .7em; color: var(--tinta-3); }
.s-mq__cap { margin-top: 18%; text-align: center; font: 400 .66em/1 var(--fuente-lectura); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.s-mq__titulo { text-align: center; font: italic 400 1.5em/1.15 var(--fuente-lectura); margin: .5em 0 1.6em; }
.s-mq p { text-indent: 1.2em; }
.s-mq p.s-mq__primero { text-indent: 0; }
.s-capitular { float: left; font-size: 3.3em; line-height: .8; padding: .04em .07em 0 0; margin-top: .02em; font-weight: 500; color: var(--tinta); }
.s-mq__primero .s-versal { font-variant-caps: all-small-caps; letter-spacing: .04em; }
.s-mq--izq { opacity: 1; display: grid; place-content: center; text-align: center; padding: 14%; }
.s-mq--izq blockquote { font: italic 400 1.05em/1.5 var(--fuente-lectura); color: var(--tinta-2); max-width: 15em; margin-top: -10%; }
.s-mq--izq cite { display: block; margin-top: 1em; font: normal .7em/1 var(--fuente-lectura); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }

/* Portada (estado 3): la tinta se extiende desde la gota */
.s-portada {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr auto; padding: 11% 10% 9%;
  background: #325654 url("/sitio/img/v3/portada-480.webp") center / cover no-repeat;
  background-image: linear-gradient(180deg, rgb(20 38 37 / .55), rgb(20 38 37 / .12) 34%, transparent 52%, transparent 78%, rgb(16 30 28 / .45)), image-set(url("/sitio/img/v3/portada-480.avif") type("image/avif") 1x, url("/sitio/img/v3/portada.avif") type("image/avif") 2x, url("/sitio/img/v3/portada-480.webp") type("image/webp") 1x);
  color: #fbf6e6; text-shadow: 0 1px 14px rgb(14 28 27 / .45);
  --r: calc(var(--b2) * 160%);
  -webkit-mask-image: radial-gradient(circle at 14% 92%, #000 calc(var(--r) - 3%), transparent var(--r));
  mask-image: radial-gradient(circle at 14% 92%, #000 calc(var(--r) - 3%), transparent var(--r));
  font-family: var(--fuente-ui);
}
.s-portada__autora { font: 600 .64em/1 var(--fuente-ui); letter-spacing: .3em; text-transform: uppercase; color: #f3dc8a; }
.s-portada__titulo { margin-top: .5em; max-width: 6.2em; font: 500 2.7em/.96 var(--fuente-lectura); letter-spacing: -0.03em; }
.s-portada__titulo em { display: block; font-style: italic; font-weight: 400; font-size: .62em; line-height: 1.25; letter-spacing: -0.01em; color: #f3dc8a; }
.s-portada__lema { margin-top: .9em; max-width: 16em; font: italic 400 .74em/1.35 var(--fuente-lectura); color: rgb(251 246 230 / .92); }
.s-portada__sello { grid-row: 5; align-self: end; font: 600 .56em/1 var(--fuente-ui); letter-spacing: .3em; text-transform: uppercase; color: rgb(251 246 230 / .85); }
.s-canto { position: absolute; top: 1.2%; bottom: 1.2%; right: calc(-1 * var(--alto) * .022); width: calc(var(--alto) * .022); border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(90deg, #ece6d3 0 1px, #fbf8ee 1px 2px); box-shadow: 1px 1px 0 rgb(33 30 23 / .12);
  opacity: var(--b2); transform: scaleX(var(--b2)); transform-origin: 0 50%; }

/* Ficha de tienda (estado 4) */
.s-ficha, .s-lista { position: absolute; top: 50%; left: calc(50% + var(--dx) + var(--pag) * var(--escala) / 2 + clamp(16px, 4cqw, 44px)); width: min(46cqw, 380px); translate: 0 -50%; font-family: var(--fuente-ui); }
.s-ficha { opacity: calc(clamp(0, (var(--c) - .45) * 2.4, 1) - clamp(0, var(--d) * 2.6, 1)); transform: translateY(calc((1 - var(--ec)) * 24px)); pointer-events: none; }
.s-ficha__meta { font: 600 11px/1 var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.s-ficha__titulo { font: 600 clamp(18px, 3.4cqw, 28px)/1.1 var(--fuente-ui); letter-spacing: -0.02em; margin-top: 10px; }
.s-ficha__autora { font-size: 14px; color: var(--tinta-2); margin-top: 6px; }
.s-ficha__autora b { color: var(--acento); font-weight: 600; }
.s-formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.s-formato { border: 1px solid var(--borde); border-radius: 8px; padding: 9px 11px; background: var(--superficie-alta); font-size: 13px; line-height: 1.3; }
.s-formato b { display: block; font-size: 15px; font-variant-numeric: tabular-nums lining-nums; }
.s-formato--activo { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta) inset; }
.s-ficha__desc { margin-top: 16px; font: 400 14px/1.55 var(--fuente-lectura); color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-ficha__datos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-suave); display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Lista de KDP (estado 5) */
.s-lista { opacity: clamp(0, (var(--d) - .38) * 2.6, 1); transform: translateY(calc((1 - var(--ed)) * 24px)); background: var(--superficie-alta); border: 1px solid var(--borde-suave); border-radius: var(--radio-l); padding: clamp(16px, 3cqw, 26px); box-shadow: var(--sombra-1); }
.s-lista__titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 clamp(16px, 2.6cqw, 21px)/1.1 var(--fuente-ui); letter-spacing: -0.015em; }
.s-lista__estado { font: 600 11px/1 var(--fuente-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--exito); background: var(--exito-suave); border-radius: 999px; padding: 6px 9px; opacity: clamp(0, (var(--d) - .9) * 12, 1); }
.s-lista ul { margin-top: 14px; display: grid; }
.s-lista li { --i: clamp(0, (var(--d) - .42 - var(--n) * .1) / .14, 1); display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--borde-suave); font-size: 13.5px; line-height: 1.35; opacity: calc(.35 + var(--i) * .65); }
.s-lista li small { display: block; color: var(--tinta-3); font-size: 12px; margin-top: 2px; }
.s-lista li svg { width: 20px; height: 20px; }
.s-lista li .s-check-caja { fill: none; stroke: var(--borde); stroke-width: 1.5; }
.s-lista li .s-check { fill: none; stroke: var(--exito); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--i)); }
@container (max-width: 640px) {
  .s-ficha, .s-lista { width: min(52cqw, 330px); }
  .s-formatos { grid-template-columns: 1fr; }
  .s-ficha__desc { -webkit-line-clamp: 2; }
}
@container (max-width: 460px) {
  .s-ficha, .s-lista { left: auto; right: 0; width: 61cqw; }
  .s-lista { padding: 12px; }
  .s-lista li { font-size: 12px; padding: 6px 0; grid-template-columns: 18px 1fr; gap: 7px; }
  .s-lista li small { display: none; }
  .s-lista li svg { width: 17px; height: 17px; }
  .s-ficha__titulo { font-size: 18px; }
  .s-ficha__autora { font-size: 12.5px; }
  .s-formato { padding: 6px 8px; font-size: 11.5px; } .s-formato b { font-size: 13px; }
  .s-ficha__desc { font-size: 12.5px; }
  .s-ficha__datos { display: none; }
}

/* Barra de progreso de la historia */
.s-progreso { position: absolute; left: 50%; bottom: clamp(16px, 4cqh, 36px); translate: -50% 0; display: flex; gap: 6px; }
.s-progreso i { --k: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--borde); overflow: hidden; position: relative; }
.s-progreso i::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(clamp(0, (var(--p) - var(--k) * .25 + .125) * 8, 1)); }

/* Móvil: el escenario queda arriba y los pasos pasan por debajo */
@media (max-width: 820px) {
  .s-historia > .s-envoltura { grid-template-columns: 1fr; }
  .s-escena-col, .s-pasos { grid-area: 1 / 1; }
  .s-escena-col { z-index: 2; pointer-events: none; }
  .s-escenario { top: var(--barra); height: 58vh; height: 58svh; padding-top: 0; background: var(--papel) var(--grano); background-size: 128px; box-shadow: 0 1px 0 var(--borde-suave); }
  .s-pasos { position: relative; z-index: 1; }
  .s-paso { min-height: 100svh; align-content: end; padding: 0 0 7svh; }
  .s-paso > * { position: relative; }
  .s-paso > h3 { font-size: 1.375rem; }
  .s-paso > p:not(.s-antetitulo) { font-size: 1rem; }
  .s-progreso { bottom: 6px; }
}

/* Movimiento ligado al scroll (CSS nativo) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-escenario { animation: historia-p linear both; animation-timeline: --historia; animation-range: contain 0% contain 100%; }
    @media (min-width: 821px) { .s-paso > * { animation: paso-foco linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; } }
  }
}
@keyframes historia-p { from { --p: 0; } to { --p: 1; } }
.s-historia[data-forzado] .s-escenario { animation: none; } /* prueba del plan B (?sin-css-scroll) */
@keyframes paso-foco { 0% { opacity: .18; translate: 0 18px; } 30%, 70% { opacity: 1; translate: 0 0; } 100% { opacity: .18; translate: 0 -12px; } }

/* Versión estática (reducir movimiento o sin JS y sin soporte): cada paso con su fotograma */
.s-historia[data-estatica] .s-escena-col { display: none; }
.s-historia[data-estatica] > .s-envoltura { grid-template-columns: 1fr; }
.s-historia[data-estatica] .s-paso { min-height: 0; padding-block: 40px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; column-gap: 48px; border-top: 1px solid var(--borde-suave); }
.s-historia[data-estatica] .s-paso { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 14px; }
.s-historia[data-estatica] .s-paso > :not(.s-fotograma) { grid-column: 1; }
.s-historia[data-estatica] .s-paso > :nth-child(1) { grid-row: 2; } .s-historia[data-estatica] .s-paso > :nth-child(2) { grid-row: 3; } .s-historia[data-estatica] .s-paso > :nth-child(3) { grid-row: 4; }
.s-historia[data-estatica] .s-fotograma { grid-column: 2; grid-row: 1 / -1; height: clamp(300px, 46vw, 520px); position: relative; padding: 0; }
.s-historia[data-estatica] .s-fotograma .s-escenario { position: relative; top: 0; height: 100%; padding-top: 0; margin: 0; animation: none; background: none; }
@media (max-width: 820px) {
  .s-historia[data-estatica] .s-paso { grid-template-columns: 1fr; grid-template-rows: none; }
  .s-historia[data-estatica] .s-paso > * { grid-row: auto !important; }
  .s-historia[data-estatica] .s-fotograma { grid-column: 1; grid-row: auto; height: 62vw; min-height: 260px; margin-top: 12px; }
}

/* ——— Qué hace: cinco herramientas con micro-demos ——— */
.s-herramientas { display: grid; border-top: 1px solid var(--borde); }
.s-herramienta { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px clamp(24px, 4vw, 64px); padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--borde); align-items: center; }
.s-herramienta__num { align-self: start; font: 500 var(--t-pie)/1.6 var(--fuente-ui); color: var(--acento); font-variant-numeric: tabular-nums; padding-top: .35em; }
.s-herramienta__texto { display: grid; gap: 12px; align-self: start; }
.s-herramienta h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); line-height: 1.12; letter-spacing: -0.02em; }
.s-herramienta p { color: var(--tinta-2); line-height: 1.6; }
.s-herramienta small { display: block; color: var(--tinta-3); font-size: var(--t-pie); }
@media (max-width: 900px) {
  .s-herramienta { grid-template-columns: 1fr; gap: 20px; }
  .s-herramienta__num { padding: 0; }
}
.s-demo { position: relative; border-radius: var(--radio-l); background: var(--superficie); border: 1px solid var(--borde-suave); padding: clamp(18px, 2.4vw, 28px); min-height: 220px; display: grid; align-content: center; gap: 14px; overflow: hidden; }
.s-demo__rotulo { position: absolute; top: 14px; left: 18px; font: 600 11px/1 var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.s-demo--rotulo { padding-top: 44px; }

/* demo 1: caminos cuando te atascas */
.s-atasco { display: grid; gap: 12px; font-family: var(--fuente-lectura); }
.s-atasco__frase { font-size: 1.0625rem; line-height: 1.55; }
.s-atasco__frase .s-cursor { animation: none; }
.s-caminos { display: grid; gap: 8px; }
.s-camino { display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie-alta); font: 400 .9375rem/1.4 var(--fuente-ui); color: var(--tinta-2); transition: border-color var(--dur-rapida), background-color var(--dur-rapida), color var(--dur-rapida); }
.s-camino b { font-weight: 600; color: var(--tinta-3); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; min-width: 4.4em; }
.s-camino:hover { border-color: var(--control); color: var(--tinta); }
.s-camino[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); color: var(--tinta); }
.s-camino[aria-pressed="true"] b { color: var(--acento-hover); }
.s-atasco__nota { font: 500 var(--t-pie)/1.4 var(--fuente-ui); color: var(--tinta-3); min-height: 1.4em; }

/* demo 2: fases de Génesis */
.s-fases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; counter-reset: fase; }
.s-fase { display: grid; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--tinta-2); }
.s-fase::before { content: ""; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--acento) var(--relleno, 100%), var(--borde) 0); }
.s-fase b { font-weight: 600; color: var(--tinta); display: block; font-size: 13px; }
.s-coste { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: var(--superficie-alta); border: 1px solid var(--borde-suave); font-size: var(--t-pie); color: var(--tinta-2); }
.s-coste b { font-size: 1.0625rem; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.s-borrador-nota { font-size: var(--t-pie); color: var(--tinta-3); }
@media (max-width: 520px) { .s-fases { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-fase::before { animation: fase-llena linear both; animation-timeline: --fases; animation-range: entry 60% cover 50%; }
    .s-fases { view-timeline-name: --fases; }
    .s-fase:nth-child(1)::before { animation-range: entry 70% cover 32%; }
    .s-fase:nth-child(2)::before { animation-range: cover 32% cover 36%; }
    .s-fase:nth-child(3)::before { animation-range: cover 36% cover 40%; }
    .s-fase:nth-child(4)::before { animation-range: cover 40% cover 44%; }
    .s-fase:nth-child(5)::before { animation-range: cover 44% cover 48%; }
    .s-fase:nth-child(6)::before { animation-range: cover 48% cover 52%; }
  }
}
@property --relleno { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes fase-llena { from { --relleno: 0%; } to { --relleno: 100%; } }

/* demo 3: tamaño de libro */
.s-tamanos { display: flex; flex-wrap: wrap; gap: 6px; }
.s-segmento { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--hundido); gap: 2px; }
.s-segmento button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums lining-nums; transition: background-color var(--dur-rapida), color var(--dur-rapida), box-shadow var(--dur-rapida); }
.s-segmento button:hover { color: var(--tinta); }
.s-segmento button[aria-pressed="true"] { background: var(--superficie-alta); color: var(--tinta); box-shadow: var(--sombra-1); font-weight: 600; }
.s-maqueta-demo { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.s-minipag { --w: 6; --h: 9; height: 190px; aspect-ratio: var(--w) / var(--h); position: relative; background: var(--superficie-alta) var(--grano); background-size: 128px; box-shadow: var(--sombra-hoja); border-radius: 2px; view-transition-name: minipagina; }
::view-transition-group(minipagina) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22,.8,.24,1); }
.s-minipag::before { content: ""; position: absolute; inset: 10% 13% 11% 15%; border: 1px dashed color-mix(in oklab, var(--acento) 55%, transparent); }
.s-minipag i { position: absolute; left: 15%; right: 13%; height: 2px; background: color-mix(in oklab, var(--tinta) 22%, transparent); }
.s-minipag i:first-child { width: 28%; left: 36%; top: 17%; background: color-mix(in oklab, var(--tinta) 45%, transparent); height: 3px; }
.s-datos { display: grid; gap: 10px; font-size: var(--t-pie); color: var(--tinta-2); }
.s-datos div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--borde-suave); padding-bottom: 8px; }
.s-datos b { color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
@media (max-width: 460px) { .s-maqueta-demo { grid-template-columns: 1fr; justify-items: center; } .s-datos { width: 100%; } }

/* demo 4: cubierta con lomo */
.s-cubierta { display: flex; justify-content: center; align-items: stretch; height: 150px; filter: drop-shadow(0 14px 18px rgb(33 30 23 / .18)); }
.s-cubierta > div { position: relative; width: 100px; background: #2c4c49; color: #fbf6e6; }
.s-cubierta .s-contra { opacity: .92; border-radius: 2px 0 0 2px; padding: 12px; display: grid; align-content: start; gap: 5px; }
.s-cubierta .s-contra i { height: 2px; background: rgb(246 241 223 / .3); }
.s-cubierta .s-contra i:nth-child(3) { width: 70%; }
.s-cubierta .s-delantera { border-radius: 0 2px 2px 0; padding: 11px 10px; display: grid; align-content: start; gap: 5px; text-shadow: 0 1px 8px rgb(14 28 27 / .5);
  background: #325654 url("/sitio/img/v3/portada-480.webp") center / cover; background-image: linear-gradient(180deg, rgb(20 38 37 / .5), transparent 55%), image-set(url("/sitio/img/v3/portada-480.avif") type("image/avif"), url("/sitio/img/v3/portada-480.webp") type("image/webp")); }
.s-cubierta .s-delantera span { font: 600 5.5px/1 var(--fuente-ui); letter-spacing: .26em; text-transform: uppercase; color: #f3dc8a; }
.s-cubierta .s-delantera b { font: 500 15px/.98 var(--fuente-lectura); letter-spacing: -0.02em; }
.s-cubierta .s-delantera em { display: block; font-style: italic; font-weight: 400; font-size: .64em; line-height: 1.3; color: #f3dc8a; }
.s-cubierta .s-lomo { width: calc(var(--lomo, .42) * 16.667px); min-width: 2px; background: #24403d; display: grid; place-items: center; overflow: hidden; border-inline: 1px dashed rgb(230 210 113 / .55); transition: width var(--dur-ui) var(--curva-salida); }
.s-cubierta .s-lomo span { writing-mode: vertical-rl; font: 600 min(9px, calc(var(--lomo, .42) * 13px))/1 var(--fuente-ui); letter-spacing: .06em; white-space: nowrap; color: #f6f1df; }
.s-cubierta[data-sin-texto] .s-lomo span { visibility: hidden; }
.s-rango { display: grid; gap: 8px; }
.s-rango label { display: flex; justify-content: space-between; font-size: var(--t-pie); color: var(--tinta-2); }
.s-rango label b { color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; accent-color: var(--acento); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--borde); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--borde); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--superficie-alta); border: 2px solid var(--acento); box-shadow: var(--sombra-1); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--superficie-alta); border: 2px solid var(--acento); }
.s-resultado { font-size: var(--t-pie); color: var(--tinta-2); }
.s-resultado b { color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }

/* demo 5: ficha y promoción */
.s-claves { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.s-clave { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--superficie-alta); border: 1px solid var(--borde-suave); font-size: .875rem; color: var(--tinta-2); min-width: 0; }
.s-clave span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-clave b { font: 600 11px/1 var(--fuente-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.s-contador { display: flex; justify-content: space-between; font-size: var(--t-pie); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.s-contador b { color: var(--exito); font-weight: 600; }
.s-redes { display: flex; gap: 8px; }
.s-redes i { flex: 1; aspect-ratio: 1; border-radius: 6px; background: oklch(26% 0.035 140); position: relative; overflow: hidden; }
.s-redes i:nth-child(2) { aspect-ratio: 9/16; flex: .56; background: var(--tinta); }
.s-redes i:nth-child(3) { background: var(--realce); }
.s-redes i::after { content: ""; position: absolute; left: 14%; bottom: 14%; width: 40%; height: 4px; background: #e6d271; clip-path: polygon(6.4px 0, 100% 0, calc(100% - 6.4px) 100%, 0 100%); }
.s-redes i:nth-child(3)::after { background: var(--tinta); }

/* ——— Para quién ——— */
.s-encaje { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.s-encaje__col { display: grid; align-content: start; gap: 8px; }
.s-encaje__titulo { font-size: var(--t-h4); letter-spacing: -0.01em; padding-bottom: 16px; border-bottom: 2px solid var(--tinta); }
.s-encaje__col--no .s-encaje__titulo { border-bottom-color: var(--borde); color: var(--tinta-2); }
.s-encaje li { display: grid; grid-template-columns: 28px 1fr; gap: 6px 12px; padding: 20px 0; border-bottom: 1px solid var(--borde-suave); }
.s-encaje li::before { content: ""; grid-row: span 2; width: 18px; height: 4px; margin-top: .62em; background: var(--acento); clip-path: polygon(6.4px 0, 100% 0, calc(100% - 6.4px) 100%, 0 100%); }
.s-encaje__col--no li::before { background: var(--control); width: 14px; height: 2px; clip-path: none; margin-top: .72em; }
.s-encaje li b { font-weight: 600; line-height: 1.4; }
.s-encaje li span { color: var(--tinta-2); line-height: 1.55; }
@media (max-width: 760px) { .s-encaje { grid-template-columns: 1fr; } }

/* ——— Precios ——— */
.s-precios-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.s-garantia { font-size: var(--t-pie); color: var(--tinta-2); }
.s-garantia b { color: var(--tinta); }
.s-periodo { display: inline-flex; align-items: center; gap: 12px; }
.s-ahorro { font: 600 var(--t-micro)/1 var(--fuente-ui); letter-spacing: .04em; color: var(--acento-hover); background: var(--acento-suave); padding: 6px 9px; border-radius: 999px; }
.s-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; container-type: inline-size; }
.s-plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: 28px 26px 26px; border-radius: var(--radio-l); background: var(--superficie-alta); border: 1px solid var(--borde); }
.s-plan--destacado { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), var(--sombra-hoja); }
.s-plan__nombre { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.s-plan__nombre h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.s-plan__marca { font: 600 11px/1 var(--fuente-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-acento); background: var(--acento); padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.s-plan__precio { display: flex; align-items: baseline; gap: 6px; font: 600 3rem/1 var(--fuente-ui); letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; }
.s-plan__precio small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.s-plan__nota { font-size: var(--t-pie); color: var(--tinta-3); min-height: 1.45em; margin-top: -8px; }
.s-plan ul { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.s-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); }
.s-plan li::before { content: ""; width: 12px; height: 3px; margin-top: .68em; background: var(--acento); clip-path: polygon(4.8px 0, 100% 0, calc(100% - 4.8px) 100%, 0 100%); }
.s-plan li b { color: var(--tinta); font-weight: 600; }
.s-plan .s-btn { width: 100%; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .s-plan__precio[data-cambia] { animation: cifra 380ms var(--curva-salida); }
}
@keyframes cifra { from { opacity: .2; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 980px) { .s-planes { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .s-plan--destacado { order: -1; } }
.s-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.s-extra { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 24px; border-radius: var(--radio-l); border: 1px dashed var(--borde); }
.s-extra b { display: block; margin-bottom: 4px; }
.s-extra span { font-size: var(--t-pie); color: var(--tinta-2); }
.s-extra strong { font-size: 1.375rem; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 980px) { .s-extras { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.s-letra-precios { margin-top: 28px; font-size: var(--t-pie); color: var(--tinta-3); max-width: 60em; }

/* ——— IA a la vista ——— */
.s-ia > .s-envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.s-ia .s-h2 { margin-top: 18px; }
.s-ia .s-entrada { margin-top: 22px; }
.s-ia .s-letra { margin-top: 22px; }
.s-ia .s-letra a { color: var(--acento); }
.s-registro { border-radius: var(--radio-l); border: 1px solid var(--borde); background: var(--superficie); overflow: hidden; font-variant-numeric: tabular-nums lining-nums; }
.s-registro__cabeza { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borde); font: 600 var(--t-micro)/1.2 var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.s-registro dl { display: grid; }
.s-registro dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--borde-suave); }
.s-registro dt { color: var(--tinta-2); font-size: .9375rem; }
.s-registro dt em { font-style: normal; color: var(--tinta-3); }
.s-registro dd { font-weight: 600; font-size: 1.0625rem; }
.s-registro__final { background: var(--superficie-alta); }
.s-registro__final dd { color: var(--acento); }
@media (max-width: 900px) { .s-ia > .s-envoltura { grid-template-columns: 1fr; } }

/* ——— Preguntas ——— */
.s-faq-env { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.s-faq-env .s-cabeza { position: sticky; top: calc(var(--barra) + 32px); margin: 0; }
@media (max-width: 900px) { .s-faq-env { grid-template-columns: 1fr; } .s-faq-env .s-cabeza { position: static; } }
.s-faq { border-top: 1px solid var(--borde); }
.s-faq details { border-bottom: 1px solid var(--borde); }
.s-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.005em; border-radius: 4px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--tinta-2) 0 0) center / 14px 1.5px no-repeat, linear-gradient(var(--tinta-2) 0 0) center / 1.5px 14px no-repeat; transition: transform var(--dur-ui) var(--curva-salida); }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq summary:hover { color: var(--acento-hover); }
.s-faq details > p { padding: 0 48px 24px 0; color: var(--tinta-2); line-height: 1.65; max-width: 44em; }
.s-faq details > p a { color: var(--acento); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .s-faq details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--curva-salida), content-visibility 320ms allow-discrete; }
    .s-faq details[open]::details-content { block-size: auto; }
  }
}

/* ——— Cierre ——— */
.s-cierre { padding-block: var(--seccion); text-align: center; border-top: 1px solid var(--borde-suave); }
.s-cierre > .s-envoltura { display: grid; justify-items: center; gap: 24px; }
.s-cierre__simbolo { width: clamp(64px, 8vw, 96px); height: auto; overflow: visible; }
.s-cierre .s-h2 { max-width: 16em; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); letter-spacing: -0.032em; line-height: 1.02; }
.s-cierre p { color: var(--tinta-2); font-size: 1.125rem; max-width: 34em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-cierre__simbolo .pv-s1 { animation: pv-draw linear both; animation-timeline: --cierre; animation-range: entry 40% cover 35%; }
    .s-cierre__simbolo .pv-s2 { animation: pv-draw linear both; animation-timeline: --cierre; animation-range: cover 30% cover 45%; }
    .s-cierre__simbolo .pv-dot { animation: pv-dot linear both; animation-timeline: --cierre; animation-range: cover 44% cover 50%; }
    .s-cierre__simbolo { view-timeline-name: --cierre; }
  }
}

/* ——— Pie ——— */
.s-pie { padding: 56px 0 40px; border-top: 1px solid var(--borde); font-size: var(--t-pie); color: var(--tinta-2); }
.s-pie > .s-envoltura { display: grid; grid-template-columns: auto 1fr; gap: 28px 48px; align-items: start; }
.s-pie__marca img { height: 26px; width: auto; }
.s-pie nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 24px; }
.s-pie nav a { text-decoration: none; color: var(--tinta-2); }
.s-pie nav a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }
.s-pie__legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--borde-suave); color: var(--tinta-3); line-height: 1.6; max-width: 70em; }
@media (max-width: 680px) { .s-pie > .s-envoltura { grid-template-columns: 1fr; } .s-pie nav { justify-content: flex-start; } }

/* ——— Páginas de cuenta (alta, entrar, contraseña) ——— */
.s-acceso { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; }
.s-acceso main { display: grid; place-items: center; padding: clamp(24px, 6vh, 72px) var(--margen); }
.s-tarjeta { width: min(100%, 440px); display: grid; gap: 22px; padding: clamp(28px, 5vw, 44px); background: var(--superficie-alta) var(--grano); background-size: 128px; border: 1px solid var(--borde-suave); border-radius: 4px; box-shadow: var(--sombra-hoja); }
.s-tarjeta h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.08; letter-spacing: -0.028em; }
.s-tarjeta h1 + p { color: var(--tinta-2); margin-top: -10px; line-height: 1.55; }
.s-tarjeta form { display: grid; gap: 16px; }
.s-tarjeta form[hidden] { display: none; }
.s-campo { display: grid; gap: 7px; }
.s-campo__etiqueta { font-size: .9375rem; font-weight: 600; }
.s-opcional { font-weight: 400; color: var(--tinta-3); }
.s-input { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--control); background: var(--papel); color: var(--tinta); font-size: 1rem; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.s-input:hover { border-color: var(--tinta-2); }
.s-input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 22%, transparent); }
.s-input:user-invalid { border-color: var(--error); }
.s-ayuda { font-size: var(--t-pie); color: var(--tinta-3); }
.s-casilla { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .9375rem; color: var(--tinta-2); line-height: 1.5; }
.s-casilla input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.s-casilla a { color: var(--acento); }
.s-error { color: var(--error); font-size: var(--t-pie); min-height: 1.2em; }
.s-error:empty { min-height: 0; }
.s-ok { padding: 12px 14px; border-radius: 10px; background: var(--exito-suave); color: var(--exito); font-size: .9375rem; }
.s-ok[hidden] { display: none; }
.s-tarjeta .s-btn { width: 100%; }
.s-otros { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding-top: 18px; border-top: 1px solid var(--borde-suave); font-size: .9375rem; color: var(--tinta-2); }
.s-otros a { color: var(--acento); font-weight: 600; text-decoration: none; }
.s-otros a:hover { text-decoration: underline; text-underline-offset: .2em; }
.s-pie-mini { padding: 24px var(--margen) 32px; text-align: center; font-size: var(--t-pie); color: var(--tinta-3); }
.s-pie-mini a { color: var(--tinta-2); }

/* ——— Páginas legales ——— */
.s-legal { padding-block: clamp(40px, 7vw, 88px) var(--seccion); }
.s-legal > .s-envoltura { max-width: 46rem; }
.s-legal h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.03em; margin-top: 28px; }
.s-legal .s-fecha { margin-top: 14px; font-size: var(--t-pie); color: var(--tinta-3); }
.s-indice-legal { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 48px; padding-bottom: 28px; border-bottom: 1px solid var(--borde); }
.s-indice-legal a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borde); font-size: var(--t-pie); text-decoration: none; color: var(--tinta-2); }
.s-indice-legal a:hover { border-color: var(--control); color: var(--tinta); }
.s-indice-legal a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.s-legal h2 { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; margin: 2.4em 0 .7em; }
.s-legal h3 { font-size: 1.0625rem; margin: 1.8em 0 .5em; }
.s-legal p, .s-legal li { font-family: var(--fuente-lectura); font-size: 1.0625rem; line-height: 1.7; color: var(--tinta); font-variant-numeric: oldstyle-nums; }
.s-legal p + p, .s-legal p + ul, .s-legal ul + p, .s-legal p + ol, .s-legal ol + p { margin-top: 1em; }
.s-legal ul, .s-legal ol { padding-left: 1.4em; display: grid; gap: .45em; }
.s-legal ul { list-style: none; padding-left: 1.4em; }
.s-legal ul > li { position: relative; }
.s-legal ul > li::before { content: ""; position: absolute; left: -1.25em; top: .78em; width: 10px; height: 3px; background: var(--acento); clip-path: polygon(4.8px 0, 100% 0, calc(100% - 4.8px) 100%, 0 100%); }
.s-legal ol { list-style: decimal; }
.s-legal a { color: var(--acento); text-underline-offset: .18em; }
.s-legal b, .s-legal strong { font-weight: 600; }
.s-legal code { font-family: var(--fuente-mono); font-size: .86em; padding: .1em .35em; border-radius: 4px; background: var(--hundido); }
.s-borrador { display: grid; gap: 4px; padding: 14px 18px; border-radius: 10px; background: var(--aviso-suave); color: #5f3c05; font-size: var(--t-pie); line-height: 1.5; border: 1px solid color-mix(in oklab, var(--aviso) 30%, transparent); }
.s-borrador b { color: #4a2f04; }
.s-hueco { font-family: var(--fuente-ui); font-size: .8em; font-weight: 600; padding: .05em .4em; border-radius: 4px; background: var(--realce); color: var(--sobre-realce); }
.s-tabla { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-alta); }
.s-tabla table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }
.s-tabla th, .s-tabla td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--borde-suave); line-height: 1.5; }
.s-tabla th { font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); background: var(--superficie); }
.s-tabla tr:last-child td { border-bottom: 0; }
.s-legal .s-tabla td { font-family: var(--fuente-ui); }

/* ——— Transiciones entre páginas ——— */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
}

/* ——— Reducir movimiento: todo visible y quieto ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .s-trazo::after, .s-enlace::after { transition: none; }
}

/* Display y titulares en Plus Jakarta Sans (31 oct 2026). */
/* Con :where la regla general no pesa nada: los títulos de la hoja de muestra (Literata) conservan su letra. */
:where(h1, h2, h3) { font-family: var(--fuente-display); }
.s-plan__precio { font-family: var(--fuente-display); }