/* =========================================================
   R.Almenar · IMAGEN & SOFTWARE · www.almenar.info
   Sistema: "el garabato y la regla". Dos temas (paper / ink),
   un acento (REC). Todo color viene de tokens.
   ========================================================= */

/* ---------- Fuentes autoalojadas ---------- */
@import url("/fonts/fonts.css");

@font-face { font-family: "Archivo Fallback"; src: local("Arial Black"), local("Arial-BoldMT"), local("Helvetica Neue Bold"); size-adjust: 96%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 99%; ascent-override: 94%; descent-override: 23%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); size-adjust: 96%; }

/* ---------- Tokens ---------- */
:root {
  --paper: #F2EEE6; --tinta: #0B0B0C; --hueso: #E6E0D4; --sombra: #161618;
  --gris: #7C7B77; --rec: #FF3B2F; --leak: #E0A050;
  --f-display: "Archivo", "Archivo Fallback", "Arial Black", sans-serif;
  --f-body: "Instrument Sans", "Instrument Fallback", Arial, sans-serif;
  --f-mono: "JetBrains Mono", "Mono Fallback", Menlo, Consolas, monospace;
  --mx: 8vw;            /* margen lateral desktop */
  --hilo-x: 4vw;        /* calle del hilo */
  --maxw: 1440px;
  --gap: 24px;
  --nav-h: 76px;
  --ease-hand: cubic-bezier(.45,0,.55,1);
  --ease-move: cubic-bezier(.65,0,.35,1);
  --ease-stamp: cubic-bezier(.16,1,.3,1);
}
@media (max-width: 1023px) { :root { --mx: max(9vw, 32px); --hilo-x: 3.5vw; --nav-h: 64px; } }

body, body[data-theme="paper"] {
  --bg: var(--paper); --ink: var(--tinta); --surface: var(--hueso);
  --muted: var(--gris); --muted-strong: #5E5D59; --hilo: var(--tinta);
  --line: rgba(11,11,12,.18); --grain: url("/assets/tex/grain-paper.png");
  --surface-2: #DDD6C8;
}
body[data-theme="ink"] {
  --bg: var(--tinta); --ink: var(--paper); --surface: var(--sombra);
  --muted: var(--gris); --muted-strong: #9A9994; --hilo: var(--paper);
  --line: rgba(242,238,230,.16); --grain: url("/assets/tex/grain-ink.png");
  --surface-2: #1F1F22;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: auto; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: clamp(1.0625rem, 1.05vw + .8rem, 1.25rem); line-height: 1.5;
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color 0s, color 0s; /* los temas cambian por corte */
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--rec); color: var(--paper); }
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; box-shadow: 0 0 0 5px var(--bg); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--ink); color: var(--bg); padding: .7em 1.1em; font-family: var(--f-mono); font-size: .8125rem; }
.skip:focus { left: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Grano: capa fija, sin blend, barata */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; background-image: var(--grain); background-size: 192px 192px; opacity: .38; }
@media (min-resolution: 1.5dppx) { .grain { background-size: 96px 96px; } }

/* ---------- Tipografía ---------- */
.t-scene { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(4rem, 14vw, 13rem); line-height: .85; }
.t-h1 { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: clamp(2.4rem, 7.2vw, 6.8rem); line-height: .95; letter-spacing: -.01em; }
.t-h2 { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.8rem, 3.8vw, 3.6rem); line-height: 1; letter-spacing: -.01em; }
.t-h3 { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.t-h3.lc { text-transform: none; font-stretch: 125%; font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -.005em; }
.t-big { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.05; }
.eyebrow { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: .8125rem; color: var(--muted-strong); }
.mono { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; }
.mono.up { text-transform: uppercase; }
.mono.muted { color: var(--muted-strong); }
.lead { font-size: clamp(1.125rem, 1.2vw + .85rem, 1.375rem); }
.max { max-width: 62ch; }
.rec { color: var(--rec); }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--rec); vertical-align: middle; margin-right: .5em; }
.dot.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 0%,66% { opacity: 1 } 67%,100% { opacity: 0 } }
em.obj { font-style: italic; font-weight: 400; }
strong { font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--mx), var(--maxw)); margin-inline: auto; position: relative; }
.section { position: relative; padding-block: clamp(9vh, 13vh, 18vh); overflow-x: clip; }
.section > .wrap { z-index: 2; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.head .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; max-width: none; }
.scene-title { position: relative; white-space: nowrap; margin: 0 0 .25rem -.04em; }
.stack > * + * { margin-top: 1.25rem; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .9em 1.4em; border: 2px solid var(--ink); font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: .9375rem; line-height: 1; white-space: nowrap; position: relative; }
.btn::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--rec); opacity: 0; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--bg); }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid::before { opacity: 1; }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn.solid:hover::before { opacity: 0; }
.btn .arr { font-family: var(--f-body); font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-dot { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .35em; }
.micro { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; color: var(--muted-strong); margin-top: .75rem; max-width: 60ch; }
.stamp { will-change: transform; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; padding-inline: var(--mx); gap: 24px; border-bottom: 1px solid transparent; background: transparent; }
.nav.is-scrolled { border-bottom-color: var(--line); background: var(--bg); }
@supports (background: color-mix(in srgb, red 50%, blue)) { .nav.is-scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); } }
.nav .brand { display: flex; align-items: center; gap: 14px; color: inherit; }
.nav .brand .sig { width: 112px; height: auto; }
.nav .brand .lock { display: grid; font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; line-height: 1.25; border-left: 1px solid var(--line); padding-left: 14px; }
.nav .brand .lock b { font-weight: 900; color: var(--rec); }
.nav .links { display: flex; gap: clamp(14px, 1.8vw, 30px); margin-inline: auto; }
.nav .links a { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; position: relative; padding: 6px 0; }
.nav .links a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); transform: translateY(-50%) scale(0); }
.nav .links a.is-active::before { transform: translateY(-50%) scale(1); }
.nav .links a.lang { margin-left: 4px; padding-inline: 8px; border: 1px solid var(--line); border-radius: 2px; }
.nav .links a.lang::before { display: none; }
.foot-links a.lang, .menu-foot a.lang { text-decoration: underline; text-underline-offset: .2em; }
.nav .cta { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; display: inline-flex; align-items: center; gap: .5em; border: 2px solid var(--ink); padding: .65em 1em; }
.nav .cta:hover { background: var(--ink); color: var(--bg); }
.nav .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; }
.nav .burger span { display: block; width: 22px; height: 2px; background: var(--ink); box-shadow: 0 -7px 0 var(--ink), 0 7px 0 var(--ink); }
.nav.hero-mode .brand { visibility: hidden; }
@media (max-width: 1023px) {
  .nav .links, .nav .cta { display: none; }
  .nav .burger { display: inline-flex; }
  .nav .brand .sig { width: 92px; }
  .nav .brand .lock { display: none; }
}
.menu { position: fixed; inset: 0; z-index: 55; background: var(--tinta); color: var(--paper); display: none; flex-direction: column; padding: calc(var(--nav-h) + 8px) var(--mx) 32px; }
.menu.is-open { display: flex; }
.menu a.big { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 11vw, 4rem); line-height: 1.05; }
.menu .menu-foot { margin-top: auto; display: grid; gap: 12px; }
.menu .close { position: absolute; top: 10px; right: var(--mx); width: 44px; height: 44px; font-family: var(--f-mono); font-size: 1.5rem; color: var(--paper); }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--bg); display: none; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.fab .dot { margin: 0; width: 10px; height: 10px; }
.fab.is-visible { display: inline-flex; }
@media (min-width: 1024px) { .fab { display: none !important; } }

/* ---------- Firma (SVG) ---------- */
.sig { color: var(--ink); fill: currentColor; overflow: visible; }
.sig .sig-glyph { visibility: hidden; }
.sig.is-done .sig-glyph, .sig.static .sig-glyph { visibility: visible; }
.sig-wrap, .sig-hero-wrap { position: relative; display: block; }
.sig-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ---------- El hilo ---------- */
#hilo { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 3; overflow: visible; }
#hilo path { fill: none; stroke: var(--hilo); stroke-width: 2px; stroke-linecap: butt; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#hilo .dotted { stroke-dasharray: 2 8; }

/* ---------- Hero ---------- */
#hero { min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--nav-h) + 4vh); padding-bottom: 8vh; }
#hero .sig-hero-wrap { width: min(60vw, 900px); margin-left: -1.5vw; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); position: relative; }
#hero .sig-hero { width: 100%; height: auto; }
#hero .lockup { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: clamp(.9rem, 1.4vw, 1.25rem); display: flex; gap: .35em; align-items: baseline; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); margin-left: calc(min(60vw, 900px) * 0.44 - 1.5vw); }
#hero .lockup b { font-weight: 900; color: var(--rec); font-size: 1.15em; display: inline-block; transform-origin: 50% 60%; }
#hero .t-h1 { max-width: 12ch; margin-bottom: clamp(1.2rem, 2vw, 1.75rem); }
#hero .lead { color: var(--muted-strong); max-width: 60ch; margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
#hero .third { margin-top: 14px; display: grid; gap: 6px; }
#hero .third .reply { color: var(--muted-strong); }
@media (hover: hover) { #hero .third .reply { visibility: hidden; } #hero .third:hover .reply, #hero .third:focus-within .reply { visibility: visible; } }
#hero .foot { position: absolute; left: var(--mx); bottom: 22px; display: flex; gap: .8em; align-items: center; color: var(--muted-strong); }
@media (max-width: 1023px) { #hero .sig-hero-wrap { width: calc(100% + 4vw); margin-left: -2vw; } #hero .t-h1 { max-width: 9ch; } #hero .lockup { margin-left: calc((100% + 4vw) * 0.44 - 2vw); } }

/* ---------- Manifiesto ---------- */
#manifiesto .grid { align-items: start; }
#manifiesto .txt { grid-column: 1 / span 6; }
#manifiesto .visor-col { grid-column: 8 / span 5; position: sticky; top: calc(var(--nav-h) + 4vh); }
#manifiesto .visor { width: 100%; height: auto; overflow: visible; }
#manifiesto .visor .frame { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
#manifiesto .visor .inner { fill: var(--surface); }
#manifiesto .visor .leak { opacity: 1; }
#manifiesto .visor .corner { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
#manifiesto .visor .af { fill: var(--muted); }
#manifiesto .visor .ui { fill: var(--surface-2); opacity: 0; }
#manifiesto .visor .notch { fill: var(--ink); opacity: 0; }
#manifiesto .visor .reclbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; fill: var(--muted-strong); }
#manifiesto .visor .recdot { fill: var(--rec); }
#manifiesto .cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted-strong); }
#manifiesto .cap-top { color: var(--muted-strong); margin-bottom: 10px; }
#manifiesto .close { margin-top: clamp(2rem, 4vw, 3.5rem); }
#manifiesto .close .sig-small { width: 200px; margin-top: 18px; }
#manifiesto .close .sig-wrap { width: 200px; margin-top: 18px; }
#manifiesto .close .sig-wrap .sig-small { margin-top: 0; width: 100%; }
@media (max-width: 1023px) {
  #manifiesto .txt { grid-column: 1 / -1; order: 2; }
  #manifiesto .visor-col { grid-column: 1 / -1; order: 1; position: sticky; top: calc(var(--nav-h) + 8px); width: 100%; background: var(--bg); padding-bottom: 12px; z-index: 2; margin-bottom: 24px; }
  #manifiesto .visor { width: min(100%, 52vh); margin-inline: auto; }
}

/* ---------- Imagen ---------- */
.reel { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; margin-inline: auto; background: var(--surface); overflow: hidden; margin-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.reel canvas, .reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .lbl { position: absolute; left: 16px; bottom: 14px; color: var(--muted-strong); }
.reel video { background: #0B0B0C; }
.reel-more a { white-space: nowrap; }
.reel-more { max-width: none; color: var(--muted-strong); margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) 0 clamp(2rem, 5vw, 4rem); }
.reel:has(video, img) .lbl, .reel:has(video, img) canvas { display: none; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 1023px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); padding: clamp(1.25rem, 2.2vw, 2rem); display: grid; gap: .9rem; align-content: start; position: relative; }
.card .num { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; color: var(--muted-strong); display: flex; justify-content: space-between; }
.card .t-h3 { margin-top: .2rem; }
.card ul { display: grid; gap: .25rem; color: var(--muted-strong); font-size: .95em; }
.card ul li::before { content: "· "; }
.card .meta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); line-height: 1.6; }
.card .price { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; }
.card .btn { justify-self: start; margin-top: .3rem; }
.objecion { margin-top: clamp(3rem, 6vw, 5rem); max-width: 62ch; display: grid; gap: .4rem; }
.objecion em { font-size: 1.25em; }
.objecion p { font-weight: 500; }

.carrete-head { display: flex; justify-content: space-between; align-items: end; margin-top: clamp(3rem, 7vw, 6rem); margin-bottom: 1rem; }
.carrete { --fh: clamp(300px, 52vh, 560px); position: relative; margin-inline: calc(-1 * var(--mx)); padding-inline: var(--mx); padding-block: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; display: flex; gap: 14px; scrollbar-width: none; }
.carrete::-webkit-scrollbar { display: none; }
.carrete::before, .carrete::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 30px); opacity: .9; }
.carrete::before { top: 6px; } .carrete::after { bottom: 6px; }
.fot { flex: 0 0 auto; margin: 0; height: var(--fh); aspect-ratio: 4 / 5; scroll-snap-align: center; background: var(--surface); position: relative; display: grid; align-content: end; padding: 1.25rem; overflow: hidden; }
.fot.txt { align-content: center; gap: .6rem; }
.fot.txt .t-h3 { max-width: 12ch; }
.fot.cta { background: var(--ink); color: var(--bg); align-content: center; gap: 1rem; }
.fot.cta .btn { border-color: var(--bg); color: var(--bg); justify-self: start; }
.fot.cta .btn:hover { background: var(--bg); color: var(--ink); }
.fot .lbl { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); line-height: 1.5; position: relative; z-index: 1; max-width: 26ch; }
.fot .tex { position: absolute; inset: 0; }
.fot .tex.gray::before { content: ""; position: absolute; inset: 18%; background: rgba(124,123,119,.2); }
.fot .tex.gray::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size: 33.34% 33.34%; }
.fot .tex.swirl svg { position: absolute; width: 260%; left: -70%; top: -40%; color: var(--ink); opacity: .08; }
.fot:has(img, video) .tex, .fot:has(img, video) .lbl { display: none; }
.fot img, .fot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fot .cap { position: absolute; left: 14px; top: 12px; z-index: 1; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.page .prose figure.foto { margin: 1.75rem 0 2.25rem; }
.page .prose figure.foto img { display: block; width: 100%; height: auto; }
.page .prose figure.foto figcaption { margin-top: .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); }
.hover-lbl { display: none; }
.fot:hover .lbl .a, .fot:focus-within .lbl .a { display: none; }
.fot:hover .lbl .hover-lbl, .fot:focus-within .lbl .hover-lbl { display: inline; }
.section-end { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- ¡Corten! ---------- */
#corten { min-height: 60vh; display: grid; align-content: center; text-align: center; padding-block: 10vh; }
#corten .eyebrow { margin-bottom: 1.4rem; }
.clap { width: min(540px, 86vw); margin: 0 auto; text-align: left; position: relative; }
.clap .arm { height: 46px; background: repeating-linear-gradient(-45deg, var(--paper) 0 26px, var(--tinta) 26px 52px); border: 2px solid var(--ink); border-bottom: 0; transform-origin: 0 100%; transform: rotate(-24deg); will-change: transform; }
.clap .body { background: var(--tinta); color: var(--paper); border: 2px solid var(--ink); padding: 18px 22px 16px; display: grid; gap: 6px; }
.clap .row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.clap .row span:last-child { color: var(--paper); }
.clap .big { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(3.6rem, 12vw, 8rem); line-height: .9; margin: 8px 0 6px; color: var(--paper); letter-spacing: .01em; }
#corten .after { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1rem; justify-items: center; }
#corten .after .t-h2 { max-width: 16ch; text-align: center; }
.cutfx { position: fixed; inset: 0; z-index: 58; background: var(--tinta); opacity: 0; pointer-events: none; }
.cutfx.paper { background: var(--paper); }

/* ---------- Software ---------- */
#software .intro-grid { display: grid; gap: 1rem; }
#software .intro-grid .t-big { max-width: 24ch; }
.block { margin-top: clamp(4rem, 9vw, 8rem); display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: center; }
.block.rev { grid-template-columns: 7fr 5fr; }
.block > .copy { display: grid; gap: .9rem; align-content: start; }
.block .plazo { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); }
.block .copy .btn { justify-self: start; margin-top: .4rem; }
@media (max-width: 1023px) { .block, .block.rev { grid-template-columns: 1fr; } .block > .copy { order: 1; } .block > .demo { order: 2; } }
.code { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--muted-strong); }

/* cuaderno → app */
.cuaderno-app { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
.cuaderno { background: var(--paper); color: var(--tinta); padding: 22px 22px 22px 34px; position: relative; min-height: 340px; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(11,11,12,.14) 31px 32px); background-position: 0 22px; border-radius: 2px; box-shadow: 8px 8px 0 rgba(0,0,0,.35); }
.cuaderno::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 1px; background: rgba(255,59,47,.5); }
.cuaderno .nline { font-family: var(--f-body); font-style: italic; font-size: 1.05rem; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuaderno .nline.tachado { text-decoration: line-through; color: #8a8580; }
.cuaderno .nline.duda::after { content: " ??"; color: var(--rec); }
.cuaderno .ntitle { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #8a8580; line-height: 32px; }
.phone { --w: 240px; width: var(--w); aspect-ratio: 9 / 19.5; background: var(--sombra); border: 2px solid var(--line); border-radius: 34px; padding: 14px; position: relative; margin-inline: auto; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; width: 84px; height: 22px; background: var(--tinta); border-radius: 12px; transform: translateX(-50%); }
.phone .scr { background: var(--paper); color: var(--tinta); height: 100%; border-radius: 22px; padding: 44px 14px 14px; display: grid; align-content: start; gap: 8px; overflow: hidden; }
.phone .scr .hdr { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.phone .scr .hdr small { white-space: nowrap; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .08em; color: #5E5D59; }
.phone .scr .row { background: var(--hueso); padding: 9px 10px; font-size: .78rem; line-height: 1.3; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border-radius: 4px; }
.phone .scr .row b { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; }
.phone .scr .row .al { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 3px; border-radius: 50%; border: 1px solid currentColor; font: 700 .55rem/1 var(--f-mono); font-style: normal; vertical-align: middle; opacity: .8; }
.phone .scr .row.primary { background: var(--tinta); color: var(--paper); font-family: var(--f-display); font-stretch: 62%; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; grid-template-columns: 1fr; text-align: center; }
.phone .scr .row.warn { border-left: 3px solid var(--rec); }
.phone .tag { position: absolute; top: -12px; right: 14px; background: var(--bg); color: var(--muted-strong); padding: 2px 6px; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .1em; }
.phone.wire { border-style: dashed; }
.phone.glow { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(255,59,47,.18), 0 0 120px rgba(255,59,47,.12); }
.phone.dark .scr { background: #121214; color: var(--paper); }
.phone.dark .scr .row { background: #1E1E22; color: var(--paper); }
.phone.dark .scr .hdr small { color: var(--gris); }
.phone.dark .scr .row.primary { background: var(--paper); color: var(--tinta); }
.phone .scr.chat { display: flex; flex-direction: column; gap: 8px; }
.phone .scr.chat .hdr { margin-bottom: 4px; }
.msg { max-width: 84%; padding: 8px 10px; border-radius: 12px; font-size: .78rem; line-height: 1.3; position: relative; }
.msg.in { background: var(--hueso); color: var(--tinta); align-self: flex-start; border-bottom-left-radius: 3px; }
.msg.out { background: var(--tinta); color: var(--paper); align-self: flex-end; border-bottom-right-radius: 3px; }
.msg .t { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .06em; opacity: .55; margin-top: 3px; text-align: right; }
.msg.note { align-self: center; background: none; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: #5E5D59; margin-top: 4px; text-align: center; }
.chat .msg { opacity: 0; }
.chat.is-live .msg, .chat.static .msg { opacity: 1; }
.phone.dark .scr .row .big { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 1.4rem; line-height: 1; }
@media (max-width: 1023px) { .cuaderno-app { grid-template-columns: 1fr; } .phone { --w: 220px; } }

/* excel → panel */
.excel-panel { display: grid; gap: 22px; }
.excel { background: var(--paper); color: var(--tinta); border: 1px solid #c8c2b6; font-family: var(--f-mono); font-size: .75rem; position: relative; overflow: hidden; }
.excel .cells { display: grid; grid-template-columns: 34px repeat(4, 1fr); }
.excel .cells div { border-right: 1px solid #d5cfc3; border-bottom: 1px solid #d5cfc3; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 30px; }
.excel .cells .h { background: #E6E0D4; color: #5E5D59; font-weight: 700; }
.excel .cells .err { color: var(--rec); }
.excel .tabs { display: flex; gap: 4px; padding: 6px 8px 0; background: #E6E0D4; border-top: 1px solid #c8c2b6; overflow: hidden; }
.excel .tabs span { background: var(--paper); border: 1px solid #c8c2b6; border-bottom: 0; padding: 4px 10px; font-size: .7rem; transform-origin: 50% 100%; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.panel .kpi { background: var(--surface); border: 1px solid var(--line); padding: 14px; display: grid; gap: 4px; }
.panel .kpi small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); }
.panel .kpi b { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 1.8rem; line-height: 1; }
.panel .chart { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); padding: 10px 14px; }
.panel .chart svg { width: 100%; height: 70px; }
.panel .chart path { fill: none; stroke: var(--hilo); stroke-width: 2; vector-effect: non-scaling-stroke; }
.panel .chart .ex { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .1em; color: var(--muted-strong); text-transform: uppercase; display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .panel { grid-template-columns: repeat(2, 1fr); } }

/* webs: peso */
.peso { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: .6rem; }
.peso b { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .9; }
.peso small { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); line-height: 1.6; max-width: 34ch; }

.promesas { margin-top: clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 22px; }
.promesas li { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: .6em; align-items: center; }
.promesas .dot { flex: none; margin: 0; }
@media (max-width: 1023px) { .promesas { grid-template-columns: 1fr; } }

/* ---------- Plantilla (tabla) ---------- */
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 20px 14px; border-bottom: 1px solid var(--line); }
.cmp th { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--muted-strong); }
.cmp th.si { color: var(--ink); }
.cmp td.lbl { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; color: var(--muted-strong); width: 18%; }
.cmp td.no { color: var(--muted-strong); width: 36%; }
.cmp td.si { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.cmp td.si .cell { display: flex; gap: 12px; align-items: flex-start; }
.seal { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rec); color: var(--paper); display: inline-grid; place-items: center; font-family: var(--f-mono); font-size: .9rem; font-weight: 700; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.cmp tr:hover td.no { opacity: .55; }
@media (max-width: 767px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .cmp tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); padding-block: 14px; }
  .cmp td { border: 0; padding: 4px 0; width: auto !important; }
  .cmp td.no::before { content: "LA PLANTILLA · "; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; }
}
.asterisco { margin-top: 2rem; display: grid; gap: 0; }
.asterisco button { font-family: var(--f-mono); font-size: 1.05rem; letter-spacing: .04em; text-align: left; display: inline-flex; gap: .5em; align-items: baseline; justify-self: start; }
.asterisco button .rec { font-size: 1.3em; }
.asterisco .note { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease-move); }
.asterisco .note[data-open="true"] { grid-template-rows: 1fr; }
.asterisco .note > div { overflow: hidden; }
.asterisco .note p { background: var(--paper); color: var(--tinta); padding: 18px 20px; margin: 14px 0 0; max-width: 56ch; box-shadow: 6px 6px 0 rgba(0,0,0,.35); }

/* ---------- Casos ---------- */
.ficha { margin-top: clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: start; }
.ficha.rev { grid-template-columns: 5fr 7fr; }
.ficha.rev > .copy { order: 2; }
.ficha .copy { display: grid; gap: 1rem; }
.ficha .datos { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); display: flex; flex-wrap: wrap; gap: 6px 0; }
.ficha .datos span + span::before { content: "|"; margin-inline: .8em; color: var(--muted); }
.ficha .res { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.15; max-width: 22ch; }
.ficha .media { display: grid; gap: 18px; justify-items: center; }
.slot-foto { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; background: var(--surface); position: relative; }
.slot-foto img { width: 100%; height: 100%; object-fit: cover; }
.slot-foto .lbl { position: absolute; left: 12px; bottom: 10px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); }
.slot-foto:has(img) .lbl { display: none; }
@media (max-width: 1023px) { .ficha, .ficha.rev { grid-template-columns: 1fr; } .ficha.rev > .copy { order: 0; } }

.demo { margin-top: clamp(2rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.1rem; position: relative; overflow: hidden; }
.demo fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.demo legend { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-strong); padding: 0; margin-bottom: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label, .chip span.l { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; cursor: pointer; user-select: none; }
.chip input:checked + label { background: var(--ink); color: var(--bg); }
.chip input:focus-visible + label { outline: 2px solid var(--rec); outline-offset: 3px; }
.chip input:disabled + label { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.demo .ok { display: grid; gap: .4rem; }
.demo .ok b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 1.2rem; }
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confeti span { position: absolute; top: -30px; font-size: 22px; color: var(--ink); }

/* ---------- Proceso ---------- */
.tl { position: relative; margin-top: clamp(2rem, 5vw, 4rem); }
.tl .track { position: relative; height: 2px; background: var(--line); margin: 20px 0 34px; }
.tl .head-rec { position: absolute; top: -8px; left: 0; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--rec); transform: translateX(-50%); }
.tl .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.tl .step { position: relative; display: grid; gap: .6rem; align-content: start; }
.tl .step .rombo { position: absolute; top: -44px; left: 0; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); transform-origin: 50% 50%; }
.tl .step .n { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 4rem; line-height: 1; color: var(--muted-strong); opacity: .7; }
.tl .step .t { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: 1.35rem; line-height: 1; }
.tl .step .dur { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-strong); }
.tl .step p { font-size: .95em; }
@media (max-width: 1023px) {
  .tl .track { display: none; }
  .tl .steps { grid-template-columns: 1fr; gap: 2rem; padding-left: 28px; border-left: 2px solid var(--line); }
  .tl .step .rombo { top: 6px; left: -35px; }
}

/* ---------- Oferta ---------- */
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.poster { background: var(--surface); border: 1px solid var(--ink); min-height: 400px; padding: clamp(1.25rem, 2vw, 1.75rem); display: grid; grid-template-rows: auto 1fr auto auto; gap: .8rem; position: relative; overflow: hidden; }
.poster .n { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(4rem, 7vw, 7rem); line-height: .85; }
.poster .t { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1; }
.poster p { font-size: .95em; }
.poster .price { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); line-height: 1.6; }
.poster .btn { justify-self: start; }
.poster.amp::before { content: "&"; position: absolute; right: -6%; bottom: -14%; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: 26rem; line-height: 1; color: var(--rec); opacity: .12; pointer-events: none; }
.poster:hover { transform: translateY(-6px); }
@media (max-width: 1023px) { .posters { grid-template-columns: 1fr; } .poster { min-height: 0; } }
.never { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.never h3 { margin-bottom: 1rem; }
.never ul { display: grid; gap: .6rem; }
.never li { font-family: var(--f-mono); font-size: .875rem; letter-spacing: .06em; position: relative; display: inline-block; justify-self: start; }
.never li s { text-decoration: none; }
.never li svg { position: absolute; left: -2%; top: 50%; width: 104%; height: 10px; transform: translateY(-50%); overflow: visible; }
.never li svg path { fill: none; stroke: var(--hilo); stroke-width: 2; }
.never li.is-struck s { color: var(--muted-strong); }
.never li.multi svg { display: none; }
.never li.multi.is-struck s { text-decoration: line-through; text-decoration-color: var(--hilo); text-decoration-thickness: 2px; }
.never .always li { display: flex; align-items: center; gap: .6em; text-transform: uppercase; }
@media (max-width: 767px) { .never { grid-template-columns: 1fr; } }

/* ---------- Preguntas ---------- */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 72ch; }
.faq .q { border-bottom: 1px solid var(--line); }
.faq button { width: 100%; display: grid; grid-template-columns: 3rem 1fr 2rem; gap: 12px; align-items: baseline; text-align: left; padding: 20px 0; }
.faq .num { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 1.6rem; color: var(--muted-strong); line-height: 1; }
.faq .qt { font-family: var(--f-display); font-stretch: 62%; font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.1; }
.faq .qt::before { content: "— "; color: var(--rec); }
.faq .pm { font-family: var(--f-mono); font-size: 1.4rem; text-align: right; line-height: 1; transition: transform .2s; }
.faq button[aria-expanded="true"] .pm { transform: rotate(45deg); }
.faq .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease-move); }
.faq .a[data-open="true"] { grid-template-rows: 1fr; }
.faq .a > div { overflow: hidden; }
.faq .a p { padding: 0 0 22px 3.75rem; margin: 0; }
mark.u { background: none; color: inherit; background-image: linear-gradient(var(--hilo), var(--hilo)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size .5s var(--ease-hand) .15s; }
.a[data-open="true"] mark.u { background-size: 100% 2px; }
@media (max-width: 767px) { .faq button { grid-template-columns: 2.2rem 1fr 1.6rem; } .faq .a p { padding-left: 0; } }

/* ---------- Para ti (configurador) ---------- */
.cfg { display: grid; gap: 1.2rem; }
.cfg .row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.cfg .open-line { max-width: 60ch; margin: .4rem 0 0; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: .6rem; }
.ideas .k { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-strong); margin-right: 4px; }
.ideas span:not(.k) { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; border: 1px solid var(--line); padding: 5px 9px; color: var(--muted-strong); }
.ideas span a { color: inherit; text-decoration: none; }
.ideas span a:hover { text-decoration: underline; text-underline-offset: .2em; }
.ficha .copy p.mono { margin-top: -.4rem; }
.ideas .more { border-color: var(--ink); color: var(--ink); }
.cfg .row .k { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-strong); }
@media (max-width: 767px) { .cfg .row { grid-template-columns: 1fr; } }
.ticket-grid { display: grid; grid-template-columns: 420px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 1023px) { .ticket-grid { grid-template-columns: 1fr; } }
.ticket { background: var(--hueso); color: var(--tinta); padding: 28px 26px 30px; position: relative; box-shadow: 10px 12px 0 rgba(11,11,12,.12); clip-path: polygon(0 6px, 3% 0, 6% 6px, 9% 0, 12% 6px, 15% 0, 18% 6px, 21% 0, 24% 6px, 27% 0, 30% 6px, 33% 0, 36% 6px, 39% 0, 42% 6px, 45% 0, 48% 6px, 51% 0, 54% 6px, 57% 0, 60% 6px, 63% 0, 66% 6px, 69% 0, 72% 6px, 75% 0, 78% 6px, 81% 0, 84% 6px, 87% 0, 90% 6px, 93% 0, 96% 6px, 100% 0, 100% calc(100% - 6px), 97% 100%, 94% calc(100% - 6px), 91% 100%, 88% calc(100% - 6px), 85% 100%, 82% calc(100% - 6px), 79% 100%, 76% calc(100% - 6px), 73% 100%, 70% calc(100% - 6px), 67% 100%, 64% calc(100% - 6px), 61% 100%, 58% calc(100% - 6px), 55% 100%, 52% calc(100% - 6px), 49% 100%, 46% calc(100% - 6px), 43% 100%, 40% calc(100% - 6px), 37% 100%, 34% calc(100% - 6px), 31% 100%, 28% calc(100% - 6px), 25% 100%, 22% calc(100% - 6px), 19% 100%, 16% calc(100% - 6px), 13% 100%, 10% calc(100% - 6px), 7% 100%, 4% calc(100% - 6px), 1% 100%, 0 calc(100% - 6px)); }
.ticket .th, .ticket .tf { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #5E5D59; display: grid; gap: 4px; }
.ticket .th { border-bottom: 1px dashed rgba(11,11,12,.35); padding-bottom: 12px; margin-bottom: 16px; }
.ticket .tf { border-top: 1px dashed rgba(11,11,12,.35); padding-top: 12px; margin-top: 18px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.ticket .tf .sig { width: 90px; color: var(--tinta); }
.ticket .tb { min-height: 150px; font-size: 1.05rem; line-height: 1.5; }
.ticket .tb p { margin: 0; }
.ticket .tb.init { font-family: var(--f-mono); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: #5E5D59; }
.ticket .tb .l { display: block; }
.cfg-side { display: grid; gap: 1.4rem; align-content: start; }
.cfg-side .btn { justify-self: start; }
.cfg-side .btn[aria-disabled="true"] { opacity: .45; }
.notfor h3 { margin-bottom: .8rem; }
.notfor ul { display: grid; gap: .5rem; }
.notfor li { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; line-height: 1.5; display: flex; gap: .7em; }
.notfor li::before { content: "×"; color: var(--rec); flex: none; }
.cfg-side .pie { font-style: italic; color: var(--muted-strong); }

/* ---------- Contacto ---------- */
#contacto .grid { align-items: start; }
#contacto .txt { grid-column: 7 / span 6; grid-row: 1; display: grid; gap: 1.2rem; align-content: start; }
#contacto .marca { grid-column: 1 / span 6; grid-row: 1; }
@media (max-width: 1023px) { #contacto .txt, #contacto .marca { grid-column: 1 / -1; grid-row: auto; } #contacto .txt { order: 1; } #contacto .marca { order: 2; } }
.marca-box { position: relative; border: 1px solid var(--line); aspect-ratio: 16 / 8; background: var(--bg); touch-action: none; }
.marca-box canvas { width: 100%; height: 100%; cursor: crosshair; }
.marca-box .lbl { position: absolute; top: 12px; left: 14px; color: var(--muted-strong); pointer-events: none; }
.marca-box .base { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 2px dotted var(--ink); pointer-events: none; opacity: .6; }
.marca-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; align-items: center; }
.marca-foot .after { color: var(--ink); visibility: hidden; }
.marca-foot .after.is-visible { visibility: visible; }
#contacto .contact-btns { display: grid; gap: 12px; justify-items: start; }
#contacto .contact-btns .btn { min-width: 280px; justify-content: center; }
#contacto .email-line { font-family: var(--f-mono); font-size: .875rem; letter-spacing: .04em; }

/* ---------- Créditos ---------- */
#creditos { padding-top: 4vh; padding-bottom: 8vh; }
.credits { display: grid; gap: 8px; max-width: 640px; margin-inline: auto; margin-bottom: clamp(3rem, 7vw, 6rem); }
.credits li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: baseline; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; }
.credits li .role { text-transform: uppercase; color: var(--muted-strong); text-align: right; }
.credits li .dots { border-bottom: 1px dotted var(--muted); min-width: 40px; height: .8em; }
.credits li .who { font-family: var(--f-display); font-stretch: 62%; font-weight: 600; font-size: .95rem; letter-spacing: .04em; }
.lock-final { display: grid; justify-items: center; gap: 14px; text-align: center; }
.lock-final .sig, .lock-final .sig-wrap { width: min(70vw, 760px); }
.lock-final .sig-wrap .sig { width: 100%; }
.lock-final .lockup { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: clamp(1rem, 1.8vw, 1.5rem); }
.lock-final .lockup b { font-weight: 900; color: var(--rec); font-size: 1.15em; }
.lock-final .line3 { color: var(--muted-strong); max-width: none; text-wrap: balance; }
@media (min-width: 768px) { .lock-final .line3 { white-space: nowrap; } }
@media (max-width: 767px) { .lock-final .line3 { font-size: .75rem; letter-spacing: .04em; } }
@media (max-width: 360px) { .lock-final .line3 { font-size: .6875rem; } }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; margin-top: clamp(2.5rem, 5vw, 4rem); }
.foot-links a { font-family: var(--f-display); font-stretch: 62%; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; }
.foot-copy { text-align: center; margin-top: 22px; color: var(--muted-strong); display: grid; gap: 6px; }
.post { margin-top: 30vh; text-align: center; visibility: hidden; }
.post.is-visible { visibility: visible; }
.post a { display: inline-block; margin-top: 10px; }
@media (max-width: 1023px) { .lock-final .sig, .lock-final .sig-wrap { width: 90vw; } }

/* ---------- Páginas secundarias ---------- */
.page { padding-top: calc(var(--nav-h) + 8vh); min-height: 80vh; }
.page .prose { max-width: 62ch; }
.page .prose h1 { margin-bottom: 1.5rem; }
.page .prose h2 { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.3rem; margin: 2rem 0 .6rem; letter-spacing: .02em; }
.page .prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.page .prose li { margin-bottom: .3em; }
.page .prose a { text-decoration: underline; text-underline-offset: .2em; }
.page .prose h3 { font-weight: 700; font-size: 1.05rem; margin: 1.3rem 0 .3rem; }
.page .prose .eyebrow { margin-bottom: 1rem; }
.page .prose .lead { margin-bottom: 1.5rem; }
.page .prose .cta-row { margin: 2rem 0 .5rem; }
.page .prose .cta-row a { text-decoration: none; }
.page .prose .related { margin-top: 2.5rem; color: var(--muted-strong); }
.page .prose .related a { white-space: nowrap; }
.foot-more { text-align: center; max-width: none; margin-top: 16px; color: var(--muted-strong); text-wrap: balance; }
.foot-more a { text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }

/* ---------- Motion helpers ---------- */
.w { display: inline-block; }
.cut-hidden { opacity: 0; }
.pre { opacity: 0; }
@media (max-width: 1023px) { .card .meta, .fot .lbl, .ficha .datos, .phone .tag, .tl .step .dur, .poster .price, .ticket .th, .ticket .tf, .slot-foto .lbl, .panel .kpi small, .panel .chart .ex, .phone .scr .hdr small { font-size: .8125rem; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .dot.blink { animation: none; }
  .faq .a, .asterisco .note, mark.u, .faq .pm { transition: none; }
  .cutfx { display: none; }
}