/* ═══════════════════════════════════════════════════════════
   RITUALIA · Propuesta web · "La carpeta" (27-oct-2026)
   Ref. Scale Studio (marco con pestaña, destacador, ilustración isométrica en línea, grano de papel) y tipografía
   estilo sutera.ch: Archivo 400 apretada + DM Mono. Paleta Spec (papel #F5F3EE, tinta #15140F, rojo #E8342A) con
   modos claro, oscuro y rojo como el portal. Sin precios.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#F5F3EE; --paper-2:#FBFAF7; --paper-3:#E7E4DC; --paper-4:#EDEBE4;
  --ink:#15140F; --ink-2:#34322C; --mute:#66635B; --faint:#8F8C84;
  --red:#E8342A; --red-deep:#C7281F; --red-fill:#E8342A; --red-txt:#C7281F; --on-ink:#F5F3EE;
  --linea:color-mix(in srgb, var(--ink) 18%, transparent); --linea-2:color-mix(in srgb, var(--ink) 9%, transparent);
  --grano-op:.3; --grano-modo:multiply;
  --dest-fondo:var(--red); --dest-texto:#F5F3EE; --hover-fondo:var(--red); --hover-texto:#fff;
  --radio:6px; --radio-s:3px;
  /* nombres de la A (teclado y sorpresas los usan) */
  --bg:var(--paper); --fg:var(--ink); --suave:var(--mute); --acento:var(--red); --hueco:var(--paper-3);
  --hl-plate-m:#F5F3EE; --hl-edge-m:#15140F; --hl-mid-m:#85847E; --hl-lo-m:#C8C6C1; --hl-hi-m:#E8342A; --sombra-m:#15140F;

  --grot:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* marco: margen exterior, alto de la muesca, ancho de la pestaña. web.js lee estos valores para dibujarlo */
  --m:clamp(10px, 1.9vw, 28px);
  --muesca:clamp(44px, 4.3vw, 62px);
  --logo-h:clamp(29px, 3.1vw, 45px);
  --corte:clamp(16px, 1.9vw, 28px);         /* banda de papel bajo la línea de arriba: el contenido se pierde ahí, no pegado al logo */       /* el logo manda el ancho de la pestaña */
  --pestana:calc(var(--pad) + var(--logo-h) * 5.3 + clamp(30px, 3.2vw, 54px));   /* 5,3 = proporción del logo con ™ */   /* aire a la derecha: el logo queda encapsulado */
  --fy:calc(var(--m) + var(--muesca));                       /* borde de arriba del cuerpo de la carpeta */
  --fh:calc(100svh - var(--m) * 2 - var(--muesca));          /* alto útil adentro */
  --pad:clamp(18px, 4.2vw, 68px);                            /* aire interior */
  --ease:cubic-bezier(.32,.72,0,1);
  --sale:cubic-bezier(.16,1,.3,1);
}
/* modos (los mismos del portal y de la web v29): oscuro invierte tinta y papel; rojo es papel #E8342A con texto #0A0907.
   El dibujo del teclado y la anatomía toman los colores de aquí; las tramas de sombra se repintan al cambiar (web.js avisa) */
html[data-modo="oscuro"]{
  --paper:#15140F; --paper-2:#1E1D18; --paper-3:#2B2A25; --paper-4:#201F1A;
  --ink:#F5F3EE; --ink-2:#D9D6CE; --mute:#A6A39A; --faint:#8F8C84;
  --red-txt:#F0473D; --on-ink:#15140F; --grano-op:.08; --grano-modo:screen; color-scheme:dark;
  --hl-plate-m:#15140F; --hl-edge-m:#F5F3EE; --hl-mid-m:#8F8C84; --hl-lo-m:#3A3832; --hl-hi-m:#E8342A; --sombra-m:#A6A39A}
html[data-modo="rojo"]{
  --paper:#E8342A; --paper-2:#EC4A41; --paper-3:#EF5F56; --paper-4:#EA4036;
  --ink:#0A0907; --ink-2:#0A0907; --mute:#1A0806; --faint:#2E0E0B;
  --red:#FFFFFF; --red-deep:#0A0907; --red-txt:#0A0907; --red-fill:#0A0907; --on-ink:#F5F3EE;
  --dest-fondo:#0A0907; --dest-texto:#FFFFFF; --hover-fondo:#F5F3EE; --hover-texto:#0A0907; --grano-op:.18;
  --hl-plate-m:#E8342A; --hl-edge-m:#0A0907; --hl-mid-m:#6E1510; --hl-lo-m:#C42A21; --hl-hi-m:#FFFFFF; --sombra-m:#0A0907}
html[data-modo="rojo"] ::selection{background:var(--ink); color:#fff}

*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--paper); scrollbar-width:none; scroll-padding-top:var(--fy)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s; animation-timing-function:var(--ease)}   /* cambio de modo: toda la página funde junta */
html::-webkit-scrollbar{display:none}
body{background:var(--paper); color:var(--ink); font-family:var(--grot); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:inherit}
input,textarea{font:inherit; color:inherit}
em{font-style:normal; color:var(--red)}
h1,h2,h3,p,li{text-wrap:pretty}
ol,ul{list-style:none}
.dato{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.junto{white-space:nowrap}
.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
:focus-visible{outline:1.5px solid var(--red); outline-offset:4px}

.titulo{font-size:clamp(34px, 4.2vw, 66px); line-height:1.02}
.rotulo{margin-bottom:clamp(16px, 2.2vh, 26px)}

/* ─────────── marco con pestaña ─────────── */
.marco{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; z-index:30; pointer-events:none; overflow:visible}   /* dvh: en el celular llega abajo también cuando se esconde la barra del navegador */
.marco-tapa,.marco-pestana,.marco-corte{fill:var(--paper)}
.marco-rejilla{fill:none; stroke:var(--lr); stroke-width:1; shape-rendering:crispEdges}   /* las verticales del fondo siguen por la franja y la pestaña hasta el borde de la carpeta */
.marco-linea{fill:none; stroke:var(--ink); stroke-width:1.25; vector-effect:non-scaling-stroke}
/* grano de papel: una trama generada una vez (web.js) sobre todo, también el margen */
body::after{content:""; position:fixed; inset:0; z-index:41; pointer-events:none; background-image:var(--grano, none); background-size:180px; opacity:var(--grano-op); mix-blend-mode:var(--grano-modo)}   /* sobre el logo y la hora (z 40): su fondo de papel no queda como parche */

.marca{position:fixed; z-index:40; left:calc(var(--m) + var(--pad)); top:calc(var(--m) + var(--muesca) - var(--logo-h) + 6px); display:block; color:var(--ink)}   /* baja hasta pasar un poco la línea; la banda de corte lo protege */
.marca .rt-logo{display:block; height:var(--logo-h); width:auto; fill:currentColor; overflow:visible}
.marca{background:var(--paper); padding:3px 6px; margin:-3px -6px}   /* si una línea del fondo pasa por el logo, se corta detrás de él */
.rt-logo .rt-iso-fino{display:none}

.pildora{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 13px; border:1px solid var(--ink); border-radius:9px; background:var(--paper);
  font-family:var(--grot); font-size:13.5px; font-weight:450; line-height:1; color:var(--ink); white-space:nowrap;
  transition:background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease)}
@media (hover:hover){ .pildora:hover{background:var(--paper-3)} }
.pildora:active{transform:scale(.97)}
.pildora.on{box-shadow:inset 0 0 0 1px var(--ink); background:var(--paper-2); font-weight:600}
.pildora.negra{background:var(--ink); color:var(--paper); border-color:var(--ink)}
@media (hover:hover){ .pildora.negra:hover{background:var(--hover-fondo); border-color:var(--hover-fondo); color:var(--hover-texto)} }
.pildora.grande{height:46px; padding:0 20px; font-size:15px; border-radius:11px}
.pildora-ico{display:inline-grid; place-items:center; transition:transform .2s var(--ease)}
@media (hover:hover){ .pildora:hover .pildora-ico{transform:translateX(3px)} }

/* riel de avance (adentro del marco, a la derecha) y botón redondo de abajo a la izquierda */
.riel{position:fixed; z-index:40; right:calc(var(--m) + 9px); top:calc(var(--fy) + 18px); bottom:calc(var(--m) + 18px); width:3px}
.riel-marca{position:absolute; left:0; top:0; width:3px; height:30px; border-radius:2px; background:var(--ink); will-change:transform}
.bajar{position:fixed; z-index:40; left:calc(var(--m) + 14px); bottom:calc(var(--m) + 14px); width:40px; height:40px; border-radius:50%; border:1px solid var(--ink);
  display:grid; place-items:center; background:var(--paper); transition:transform .35s var(--ease), background-color .2s}
@media (hover:hover){ .bajar:hover{background:var(--paper-3)} }
.bajar svg{width:16px; height:16px; transition:transform .45s var(--ease)}
.bajar.arriba svg{transform:rotate(180deg)}
.tipo{position:fixed; z-index:40; right:calc(var(--m) + 26px); bottom:calc(var(--m) + 18px); font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--mute);
  padding:4px 8px; border:1px dashed var(--linea); border-radius:6px; background:var(--paper)}
@media (hover:hover){ .tipo:hover{color:var(--ink); border-color:var(--ink)} }

/* ─────────── secciones: todas viven adentro del marco ─────────── */
main{padding:var(--fy) var(--m) var(--m); overflow-x:clip}
.sec{position:relative; padding-inline:var(--pad)}

/* marcas de corte en las 4 esquinas, por fuera de la caja */
.cortes{--c:12px; --l:9px; position:relative}
.cortes::before{content:""; position:absolute; inset:calc(var(--c) * -1); pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 var(--c) / var(--l) 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) var(--c) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% var(--c) / var(--l) 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) calc(100% - var(--c)) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 calc(100% - var(--c)) / var(--l) 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) var(--c) 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% calc(100% - var(--c)) / var(--l) 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) calc(100% - var(--c)) 100% / 1px var(--l) no-repeat}
/* cruces de registro */
.cruz{position:absolute; left:var(--x); top:var(--y); width:22px; height:22px; margin:-11px 0 0 -11px; pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) center / 1px 100% no-repeat, linear-gradient(var(--ink),var(--ink)) center / 100% 1px no-repeat}

/* ficha: banda #E7E4DC con el título (sin filetes) y cuerpo un tono más oscuro que el papel */
.ficha{background:var(--paper-4)}
.ficha-banda{display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--paper-3); padding:12px 18px; font-size:clamp(20px, 1.7vw, 26px); line-height:1.15}
.ficha > p{padding:0 18px; margin-top:12px; font-size:15px; line-height:1.5; color:var(--ink-2)}
.ficha > p:last-child{padding-bottom:18px}

/* ─────────── 01 · inicio ─────────── */
.inicio{min-height:max(var(--fh), 620px); display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); column-gap:clamp(20px, 3vw, 48px)}
.inicio-texto{display:flex; flex-direction:column; padding-top:clamp(56px, 13vh, 150px); padding-bottom:clamp(64px, 9vh, 96px); z-index:2}
.titular{font-size:clamp(42px, 5.6vw, 92px); line-height:1.04; max-width:11.5em; position:relative}
.tipeo-fijo{display:block}
.tipeo-var{white-space:normal}
/* destacador: se pinta de izquierda a derecha (background-size) y el texto pasa a papel */
.destacado{background:linear-gradient(var(--dest-fondo), var(--dest-fondo)) no-repeat 0 58% / var(--pinta, 0%) 86%; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .07em; margin:0 -.07em; transition:background-size .75s var(--sale), color .35s .15s}
.destacado.pintado{--pinta:100%; color:var(--dest-texto)}
.cursor{display:inline-block; width:.06em; min-width:3px; height:.86em; margin-left:.05em; vertical-align:-.08em; background:var(--ink); animation:parpadeo 1.05s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.cambiar{margin-top:18px; align-self:flex-start; padding:4px 0; border-bottom:1px solid var(--linea); transition:color .2s, border-color .2s}
@media (hover:hover){ .cambiar:hover{color:var(--ink); border-color:var(--ink)} }
.inicio .ficha{margin-top:auto; width:min(440px, 100%); margin-left:12px}

.inicio-ilus{position:relative; min-height:420px; margin-right:calc(var(--pad) * -1 + 22px)}
/* grilla de mesa de corte en el triángulo de abajo a la derecha, que se desvanece hacia la diagonal */
.mesa{position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--linea-2) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--linea-2) 23px 24px);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
  -webkit-mask-image:linear-gradient(to top left, #000 30%, transparent 78%); mask-image:linear-gradient(to top left, #000 30%, transparent 78%)}
.teclado{position:absolute; inset:9% 2% 12% 0;
  --hairline-plate:var(--hl-plate-m); --hairline-edge:var(--hl-edge-m); --hairline-mid:var(--hl-mid-m); --hairline-lo:var(--hl-lo-m); --hairline-hi:var(--hl-hi-m);
  --hairline-stroke:1.1; --sombra:var(--sombra-m); --vapor:var(--hl-mid-m); touch-action:manipulation; overflow:hidden}
.sombras{position:absolute; left:0; top:0; image-rendering:crisp-edges; image-rendering:pixelated; pointer-events:none}
.teclado svg{overflow:hidden}
.teclado .sil{stroke-width:calc(var(--hl-sw) * 1.35)}
.tecla-et{font-family:var(--mono); font-size:3px; font-weight:600; fill:var(--hl-edge); text-anchor:middle; dominant-baseline:central; pointer-events:none}
.tecla-et.larga{font-size:2px; letter-spacing:.02em}
.tecla-et.roja{fill:var(--hl-hi)}
.teclado-pista{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.codigo{font-family:var(--mono); font-size:3.05px; font-weight:500; white-space:pre; fill:var(--hl-edge); opacity:.55; pointer-events:none}
.codigo.tenue{opacity:.32}
.codigo-rollo{animation:rollo var(--rollo-t, 20s) linear infinite}
@keyframes rollo{from{transform:translateY(0)} to{transform:translateY(calc(var(--rollo) * -1))}}
.atajos{display:none}

/* ─────────── 02 · qué hacemos: la anatomía ─────────── */
.hacemos{height:calc(var(--fh) * 4.2)}
.hacemos-fijo{position:sticky; top:var(--fy); height:var(--fh); min-height:560px; display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); column-gap:clamp(20px, 3vw, 48px); align-items:center}
.hacemos-texto{position:relative; align-self:stretch; display:grid; grid-template-rows:auto auto auto 1fr; align-content:center; padding-block:clamp(40px, 8vh, 90px)}
.hacemos-lead,.pasos{grid-row:3; grid-column:1}
.hacemos-lead{align-self:start; margin-top:clamp(26px, 4vh, 44px); font-size:17px; color:var(--ink-2); max-width:30ch; transition:opacity .3s, transform .45s var(--sale)}
.hacemos-lead.fuera{opacity:0; transform:translateY(-10px)}
.pasos{position:relative; margin-top:clamp(26px, 4vh, 44px); min-height:220px}
.paso{position:absolute; inset:0 0 auto 0; max-width:30em; pointer-events:none}
.paso.on{pointer-events:auto}
.paso > *,.hito > *{transition:opacity .25s}
.paso-n{color:var(--red-txt); margin-bottom:10px}
.paso h3{font-size:clamp(26px, 2.5vw, 40px); line-height:1.08; margin-bottom:12px}
.paso-txt{font-size:16px; line-height:1.55; color:var(--ink-2); max-width:34ch}
.paso .enlace{display:inline-block; margin-top:16px}
.puntos-pasos{display:flex; gap:6px; margin-top:auto; padding-top:20px}
.puntos-pasos li{width:18px; height:3px; border-radius:2px; background:var(--linea); transition:background-color .3s, width .4s var(--ease)}
.puntos-pasos li.on{background:var(--ink); width:34px}
.enlace{font-weight:500; border-bottom:1px solid currentColor; padding-bottom:1px; transition:color .2s}
@media (hover:hover){ .enlace:hover{color:var(--red)} }

.hacemos-ilus{position:relative; height:100%; min-height:0}
.pila-iso{position:absolute; left:0; top:calc(var(--corte) + 8px); width:100%; height:calc(100% - var(--corte) - 22px); overflow:visible}   /* el viewBox va justo al dibujo (web.js): llena el alto libre bajo la banda de corte */
.pila-iso .cara{stroke:var(--ink); stroke-width:1.2; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.pila-iso .cara.tapa,.pila-iso .cara.nivel{fill:var(--paper)}
.pila-iso .cara.lado{fill:var(--paper-3)}
.pila-iso .lado-sombra{fill:color-mix(in srgb, var(--ink) 9%, transparent); stroke:none}
.pila-iso .capa{transition:opacity .45s var(--ease)}
.pila-iso .capa.fuera,.pila-iso .rot.fuera{opacity:.15}
.pila-iso .rot{transition:opacity .45s var(--ease)}
.pila-iso .dibujo *{vector-effect:non-scaling-stroke}
.pila-iso .dibujo{fill:none; stroke:var(--ink); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round}
.pila-iso .dibujo .lleno{fill:var(--ink); stroke:none}
.pila-iso .dibujo .papel{fill:var(--paper)}
.pila-iso .dibujo .trazos{stroke-dasharray:3 4; stroke:var(--faint)}
.pila-iso .dibujo .chaflan{stroke:var(--faint); stroke-width:.8}
.pila-iso .dibujo .bandeja{stroke:var(--ink); stroke-width:.9; stroke-dasharray:2 3; opacity:.55}
.pila-iso .dibujo .fino{stroke-width:.8}
.pila-iso .dibujo .grueso{stroke-width:2.4}
.pila-iso .dibujo text{fill:var(--ink); stroke:none; font-family:var(--grot); font-weight:450}
.pila-iso .dibujo .acento{stroke:var(--red)}
.pila-iso .dibujo .acento.lleno{fill:var(--red); stroke:none}
.pila-iso .sombra-suelo{fill:color-mix(in srgb, var(--ink) 13%, transparent); stroke:none}
.pila-iso .bola{fill:var(--red); stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pila-iso .chispa{fill:var(--ink)}
.pila-iso .canto{stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pila-iso .chispa.roja{fill:var(--red)}
.pila-iso .rot line{stroke:var(--faint); stroke-width:1; vector-effect:non-scaling-stroke}
.pila-iso .rot circle{fill:var(--paper); stroke:var(--faint); stroke-width:1; vector-effect:non-scaling-stroke}
.pila-iso .rot text{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; fill:var(--mute)}
.pila-iso .rot.on line,.pila-iso .rot.on circle{stroke:var(--red)}
.pila-iso .rot.on text{fill:var(--red-txt); font-weight:600}

/* ─────────── 03 · prueba de imprenta ─────────── */
.prueba{min-height:var(--fh); display:grid; place-items:center; padding-block:clamp(60px, 12vh, 130px)}
.prueba-hoja{position:relative; max-width:min(1060px, 100%); min-width:0}
.prueba-txt{font-size:clamp(28px, 3.3vw, 52px); line-height:2.05; color:var(--ink)}
.corr{position:relative; white-space:nowrap}
.corr del{text-decoration:none; position:relative; color:var(--ink); transition:color .5s .35s}
.corr del::after{content:""; position:absolute; left:-.05em; right:-.05em; top:54%; height:.07em; min-height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--sale)}
.corr ins{position:absolute; left:0; bottom:96%; text-decoration:none; white-space:nowrap; color:var(--red-txt); font-size:.58em; line-height:1; letter-spacing:-.01em;
  clip-path:inset(0 0 100% 0); transform:translateY(.4em); transition:clip-path .5s var(--sale) .42s, transform .5s var(--sale) .42s}
/* signo de inserción bajo el texto nuevo */
.corr ins::before{content:""; position:absolute; left:-.42em; top:.55em; width:.5em; height:.5em; border-left:1.5px solid var(--red); border-bottom:1.5px solid var(--red); transform:rotate(135deg) scale(.7)}
.corr.hecho del{color:var(--faint)}
.corr.hecho del::after{transform:none}
.corr.hecho ins{clip-path:inset(-.3em -1em -.3em -1em); transform:none}

/* ─────────── 04 · trabajo: hoja de contactos ─────────── */
.trabajo{--ch:min(46vh, 440px)}
.trabajo-fijo{position:relative; height:var(--fh); min-height:600px; display:flex; flex-direction:column; padding-block:clamp(36px, 6vh, 70px) clamp(28px, 4vh, 44px); overflow:hidden}
.trabajo-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap}
.filtros{display:flex; flex-wrap:wrap; gap:6px}
.filtros button{height:30px; padding:0 12px; border:1px solid var(--linea); border-radius:9px; font-size:13px; color:var(--mute); transition:color .2s, border-color .2s, background-color .2s}
@media (hover:hover){ .filtros button:hover{color:var(--ink); border-color:var(--ink)} }
.filtros button[aria-pressed="true"]{color:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--paper-2)}
.filtros sup{font-family:var(--mono); font-size:9px; margin-left:3px; color:var(--faint); vertical-align:super}
.tira{position:relative; flex:1; min-height:0; display:flex; align-items:center; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); outline-offset:-4px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab}
.tira::-webkit-scrollbar{display:none}
.tira.arrastrando{cursor:grabbing; user-select:none}
.tira.arrastrando .obra{pointer-events:none}
.tira-lista{flex:none; display:flex; align-items:center; gap:clamp(28px, 3.2vw, 52px); padding:24px 12px}
/* barra para recorrer: una línea con una marca por trabajo y un mango negro que se arrastra */
.tira-barra{--mw:136px; position:relative; height:30px; margin:clamp(4px, 1vh, 12px) 0 clamp(10px, 1.6vh, 18px)}
.barra-pista{position:absolute; inset:0; cursor:pointer; touch-action:none}
.barra-pista::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink)}
.barra-marcas{position:absolute; inset:0; pointer-events:none}
.barra-marcas i{position:absolute; left:calc(var(--mw) / 2 + var(--p) * (100% - var(--mw))); top:50%; width:1px; height:9px; margin:-4.5px 0 0; background:var(--ink); opacity:.5; transition:opacity .25s, height .25s var(--ease), margin .25s var(--ease)}
.barra-marcas i.on{opacity:1; height:17px; margin-top:-8.5px}
.barra-mango{position:absolute; left:0; top:2px; height:26px; width:var(--mw); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 13px; border-radius:999px;
  background:var(--ink); color:var(--on-ink); font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; cursor:grab; touch-action:none; will-change:transform; transition:background-color .2s}
.barra-mango i{font-style:normal; transition:translate .3s var(--ease)}
@media (hover:hover){ .barra-mango:hover i:first-child,.tira-barra.agarrado .barra-mango i:first-child{translate:-3px 0} }
@media (hover:hover){ .barra-mango:hover i:last-child,.tira-barra.agarrado .barra-mango i:last-child{translate:3px 0} }
.tira-barra.agarrado .barra-mango{cursor:grabbing; background:var(--red-deep)}
.barra-mango:focus-visible{outline:1.5px solid var(--red); outline-offset:3px}
.tira-barra.sin-recorrido{opacity:.3; pointer-events:none}
.tira-barra.sin-recorrido .barra-mango span{visibility:hidden}
.obra{flex:none; position:relative; transition:opacity .35s, transform .5s var(--sale)}
.obra.sale{opacity:0; transform:translateY(16px)}
.obra-media{position:relative; display:block; height:var(--ch); width:calc(var(--ch) * var(--r)); max-width:calc(var(--ch) * 1.78); min-width:calc(var(--ch) * .56); overflow:hidden; background:var(--paper-3)}
.obra-media img,.obra-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.obra-media video{opacity:0; transition:opacity .4s}
.obra.vivo .obra-media video{opacity:1}
.obra-pie{display:flex; gap:10px; align-items:baseline; margin-top:14px; max-width:calc(var(--ch) * 1.78)}
.obra-pie .dato{color:var(--mute)}
.obra-pie b{font-weight:600}
.obra-pie span:last-child{color:var(--mute); font-size:13.5px}
.tira-info{margin-top:auto; display:flex; gap:18px; align-items:baseline}
.tira-desc{max-width:64ch; font-size:15px; color:var(--ink-2); min-height:1.5em}
.obra-caja{display:block; position:relative}
.obra-barra{display:flex; align-items:center; gap:5px; height:24px; padding:0 10px; background:var(--paper-3); font-family:var(--mono); font-size:10px; color:var(--mute); max-width:calc(var(--ch) * 1.78)}
.obra-barra i{width:7px; height:7px; border-radius:50%; border:1px solid var(--ink)}
.obra-barra span{margin-left:8px}
.obra-tag,.obra-fmt{position:absolute; top:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:6px; background:var(--paper); color:var(--ink); border:1px solid var(--linea)}
.es-web .obra-tag,.es-web .obra-fmt{top:34px}
.obra-tag{left:10px}
.obra-fmt{right:10px; color:var(--mute)}
.obra-tag--ia{color:var(--red-txt)}
.obra-paginas img{opacity:0; transition:opacity .5s}
.obra-paginas img.on{opacity:1}
.es-marca .obra-media{background:var(--paper-2)}
.es-marca .obra-media img{inset:19%; width:62%; height:62%; object-fit:contain}
.es-marca .obra-media.cta{display:grid; place-content:center; justify-items:center; gap:6px; background:var(--ink); color:var(--paper); font-family:var(--grot); font-size:clamp(22px, 2vw, 30px)}
.es-marca .obra-media.cta b{font-family:var(--grot); font-size:15px; font-weight:500}
.es-voz .obra-media.voz{display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding:20px; background:var(--paper-4)}
.voz-ref{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.voz-txt{font-family:var(--grot); font-size:clamp(17px, 1.4vw, 21px); line-height:1.3; color:var(--ink)}
.voz-autor{display:flex; align-items:center; gap:10px; font-size:14px}
.voz-foto{flex:none; width:38px; height:38px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-weight:700}
.voz-foto img{position:static; width:100%; height:100%; object-fit:cover}

/* ─────────── 05 · cómo trabajamos: la línea de hitos ─────────── */
.proceso-fijo{position:sticky; top:var(--fy); height:var(--fh); min-height:560px; display:grid; grid-template-rows:auto clamp(120px, 17vh, 180px) minmax(0, 1fr) auto;
  padding-block:clamp(40px, 7vh, 80px) clamp(28px, 4vh, 44px)}
.hitos-hueco{position:relative}
.hitos-linea{position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:62%; height:1.25px; background:var(--ink); transition:opacity .15s}
.proceso.fijado .hitos-linea{opacity:0}
.hitos{position:relative; margin-top:clamp(18px, 3vh, 34px)}
.hito{position:absolute; inset:0 auto auto 0; max-width:40em; pointer-events:none}
.hito.on{pointer-events:auto}
.hito-n{color:var(--red-txt); margin-bottom:10px}
.hito h3{font-size:clamp(28px, 2.8vw, 46px); line-height:1.06; margin-bottom:12px}
.hito-txt{font-size:17px; color:var(--ink-2); max-width:44ch}
.hito-sale{margin-top:18px}
.proceso-pie{display:flex; justify-content:space-between; align-items:center; gap:20px 40px; flex-wrap:wrap}
.proceso-pie p{max-width:46ch; color:var(--ink-2)}
/* riel fijo por encima del marco: la línea cruza los bordes y llega a la orilla de la ventana */
.riel-hitos{position:fixed; left:0; right:0; top:var(--y, 50%); height:0; z-index:33; pointer-events:none; opacity:0; transition:opacity .15s}
.riel-hitos.on{opacity:1}
.riel-hitos-linea{position:absolute; left:0; right:0; top:0; height:1.25px; background:var(--ink); transform:translateY(-50%)}
.riel-hitos-pista{position:absolute; left:0; top:0; will-change:transform}
.riel-hito{position:absolute; left:calc(var(--llegada) + var(--i) * var(--sep)); top:0}
.riel-hito i{position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px; border-radius:50%; border:1.25px solid var(--ink); background:var(--paper);
  transition:transform .45s var(--sale), background-color .3s, border-color .3s}
.riel-hito.paso i{background:var(--ink)}
.riel-hito.on i{background:var(--red); border-color:var(--red); transform:scale(1.5)}
.riel-hito.on i::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--red); animation:latido 1.6s var(--sale) infinite}
@keyframes latido{from{transform:scale(.6); opacity:1} to{transform:scale(1.9); opacity:0}}
.riel-hito b{position:absolute; left:-.05em; bottom:20px; font-family:var(--grot); font-weight:420; font-size:clamp(46px, 5.4vw, 86px); line-height:.8;
  letter-spacing:-.04em; color:var(--ink); opacity:.22; transition:color .35s, opacity .35s, transform .5s var(--sale); transform:translateY(8px)}
.riel-hito.paso b{opacity:.5; transform:none}
.riel-hito.on b{opacity:1; color:var(--red); transform:none}
.riel-hito .dato{position:absolute; left:0; top:18px; white-space:nowrap; transition:color .3s}
.riel-hito.on .dato{color:var(--ink)}


/* ─────────── 06 · contacto ─────────── */
.contacto{min-height:var(--fh); display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(30px, 5vw, 90px); align-items:center; padding-block:clamp(60px, 10vh, 110px)}
.contacto-bajada{font-size:clamp(17px, 1.3vw, 20px); color:var(--ink-2); margin-top:18px; max-width:30ch}
.contacto-vias{margin-top:clamp(28px, 5vh, 50px); display:grid; gap:14px}
.contacto-vias li{display:grid; grid-template-columns:90px 1fr; align-items:baseline; justify-items:start; gap:12px}
.formulario{display:block}
.formulario .ficha-banda{font-size:clamp(20px, 1.6vw, 24px)}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; padding:20px 18px 6px}
.campo{display:grid; gap:6px; border:0}
.campo.ancho{grid-column:1 / -1}
.campo input,.campo textarea{width:100%; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:6px 0 7px; font-size:16px; border-radius:0; outline:none; resize:vertical}
.campo input:focus,.campo textarea:focus{border-bottom-color:var(--red); box-shadow:0 1px 0 var(--red)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chips label{position:relative}
.chips input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chips span{display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid var(--linea); border-radius:9px; font-size:13.5px; color:var(--mute); transition:all .2s}
@media (hover:hover){ .chips input:hover + span{border-color:var(--ink); color:var(--ink)} }
.chips input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chips input:focus-visible + span{outline:1.5px solid var(--red); outline-offset:3px}
.formulario-pie{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px 18px}
.legal{font-size:12.5px; color:var(--mute)}
.formulario-ok{padding:0 18px 18px; font-weight:500}
.campo.error input,.campo.error textarea{border-bottom-color:var(--red)}
.formulario-ok.error{color:var(--red-txt)}
.formulario-ok a{text-decoration:underline; text-underline-offset:2px}
.formulario [type="submit"]:disabled{opacity:.6; cursor:progress}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}   /* campo trampa para bots, fuera de la vista */

/* ─────────── cierre y juego ─────────── */
.cierre{min-height:calc(var(--fh) * .62); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-block:60px}
.cierre-frase{font-size:clamp(40px, 6.4vw, 108px); line-height:1.02; max-width:12em}
.punto{display:inline-block; width:.32em; color:var(--red); font:inherit; line-height:inherit; cursor:pointer; transition:transform .3s var(--ease)}
@media (hover:hover){ .punto:hover{transform:scale(1.35) translateY(-.03em)} }
.cierre-pista{margin-top:18px; color:var(--faint); opacity:0; transition:opacity .6s}
.cierre.mira .cierre-pista{opacity:1}
.panel.juego{position:relative; min-height:max(var(--fh), 640px); padding:clamp(30px, 5vh, 60px) var(--pad); clip-path:circle(0 at var(--px, 50%) var(--py, 0%)); transition:clip-path .95s cubic-bezier(.65,0,.3,1)}
.panel.juego[hidden]{display:none}
.panel.juego.abierto{clip-path:circle(150% at var(--px, 50%) var(--py, 0%))}
.jg-instr h2{font-size:clamp(34px, 3.6vw, 56px); line-height:1.02}
.jg-instr h2 em{color:var(--red)}
.btn{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:13px 20px; display:inline-flex; align-items:center; gap:12px;
  border:1.5px solid var(--ink); border-radius:9px; transition:background .15s, color .15s}
.btn-primary{background:var(--ink); color:var(--paper)}
@media (hover:hover){ .btn-primary:hover{background:var(--hover-fondo); border-color:var(--hover-fondo); color:var(--hover-texto)} }
.btn-outline{background:transparent; color:var(--ink)}
@media (hover:hover){ .btn-outline:hover{background:var(--ink); color:var(--paper)} }
.jg select{font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--ink); border-radius:6px; background:var(--paper)}

.guincha{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-top:20px; padding:14px calc(var(--pad) * .6); background:var(--ink); color:color-mix(in srgb, var(--paper) 70%, transparent);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; border-radius:0 0 calc(var(--radio) + 4px) calc(var(--radio) + 4px)}
.guincha a{transition:color .2s}
@media (hover:hover){ .guincha a:hover{color:var(--paper)} }
.guincha-der{justify-self:end; display:flex; gap:18px}

/* ─────────── sorpresas del teclado (las de la A) ─────────── */
.sorpresa{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--m);
  background:color-mix(in srgb, var(--bg) 78%, transparent); opacity:0; pointer-events:none; transition:opacity .3s var(--ease)}
.sorpresa.on{opacity:1; pointer-events:auto}
.sorpresa-ventana{display:flex; flex-direction:column; gap:14px; width:min(520px,100%); padding:28px; background:var(--bg); color:var(--fg); border:1px solid var(--fg); border-radius:12px;
  transform:translateY(14px) scale(.98); transition:transform .45s var(--ease)}
.sorpresa.on .sorpresa-ventana{transform:none}
.sorpresa-ventana[hidden]{display:none}
.sorpresa-ventana.ancha{width:min(880px,100%)}
.sorpresa-ventana h2{font-size:clamp(26px,2.6vw,38px); line-height:1.05}
.sorpresa-ventana p:not(.dato){color:var(--suave)}
.sorpresa-cerrar{align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--fg); padding-bottom:2px; margin-top:6px}
.sorpresa-acciones{display:flex; gap:28px; align-items:center}
.sorpresa-acciones .enlace, .sorpresa-acciones .sorpresa-cerrar{margin-top:0}
.cv-marco{width:100%; height:min(62vh,720px); border:1px solid var(--linea); background:#fff}
.sorpresa-ventana[data-ventana="perros"]{--bg:#F5F3EE; --fg:#15140F; --suave:#66635B; --acento:#E8342A; background:#F5F3EE; color:#15140F}
.perros{position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:200px}
.px-canvas{display:block; image-rendering:pixelated}

/* ─────────── menú radial y navegación oculta ─────────── */
.nav-oculta{position:fixed; z-index:80; left:var(--m); top:calc(var(--fy) + 10px); display:flex; flex-wrap:wrap; max-width:calc(100vw - var(--m) * 2); gap:6px; padding:8px; background:var(--paper); border:1px solid var(--ink); border-radius:10px;
  clip-path:inset(50%); opacity:0}
.nav-oculta:focus-within{clip-path:none; opacity:1}
.nav-oculta a{padding:4px 8px}
.pista-menu{position:fixed; z-index:40; right:calc(var(--m) + var(--pad)); top:calc(var(--m) + var(--muesca) / 2); transform:translateY(-50%);
  display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); pointer-events:none}
.pista-menu i{position:relative; width:14px; height:14px; border-radius:50%; border:1.25px solid var(--ink)}
.pista-menu i::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--red); animation:latido-pista 2.4s var(--ease) infinite}
@keyframes latido-pista{0%,55%{transform:scale(.4)} 75%{transform:scale(1)} 100%{transform:scale(.4)}}
.pista-tactil{display:none}
@media (hover:none){ .pista-escritorio{display:none} .pista-tactil{display:inline} }
html.sosteniendo,html.sosteniendo *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.radial{position:fixed; left:0; top:0; z-index:70; width:0; height:0; transform:translate(var(--cx, -999px), var(--cy, -999px)); pointer-events:none}
/* mientras se mantiene el clic, un anillo se va llenando alrededor del cursor */
@property --carga{syntax:"<percentage>"; inherits:false; initial-value:0%}
@keyframes carga{to{--carga:100%}}
.radial-nucleo{position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px; border-radius:50%; opacity:0; transform:scale(.6);
  background:conic-gradient(var(--ink) var(--carga), color-mix(in srgb, var(--ink) 12%, transparent) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  transition:opacity .15s, transform .25s var(--sale)}
.radial.nucleo .radial-nucleo{opacity:1; transform:none; animation:carga .21s linear forwards}
.radial.on .radial-nucleo{opacity:0}
.menu-caja{position:absolute; left:var(--dx, 14px); top:var(--dy, 14px); min-width:240px; padding:6px; border-radius:6px; background:var(--ink); color:var(--paper);
  opacity:0; transform:scale(.94); pointer-events:none; transition:opacity .16s, transform .3s var(--sale); box-shadow:0 18px 40px -18px rgba(21,20,15,.5)}
.radial.on .menu-caja{opacity:1; transform:none; pointer-events:auto}
.menu-cab{display:flex; justify-content:space-between; gap:18px; padding:6px 8px 9px; margin-bottom:4px; border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font:400 10px/1 var(--mono); text-transform:uppercase; color:color-mix(in srgb, var(--paper) 55%, transparent)}
.radial-op{display:flex; align-items:baseline; gap:12px; padding:9px 8px 8px; border-radius:4px; font:400 19px/1 var(--grot); letter-spacing:-.035em; color:var(--paper);
  opacity:0; transform:translateY(6px); transition:opacity .2s var(--d, 0ms), transform .32s var(--sale) var(--d, 0ms), background-color .12s, color .12s}
.radial-op[data-i="1"]{--d:22ms} .radial-op[data-i="2"]{--d:44ms} .radial-op[data-i="3"]{--d:66ms} .radial-op[data-i="4"]{--d:88ms} .radial-op[data-i="5"]{--d:110ms} .radial-op[data-i="6"]{--d:132ms} .radial-op[data-i="7"]{--d:154ms}
.radial-op.externo{margin-top:4px; border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent); border-radius:0 0 4px 4px}
.radial-op span{font:400 10px/1 var(--mono); letter-spacing:0; color:color-mix(in srgb, var(--paper) 50%, transparent)}
.radial.on .radial-op{opacity:1; transform:none}
.radial-op.activo{background:var(--paper); color:var(--ink)}
.radial-op.activo span{color:var(--red-txt)}
.radial.cerrando .menu-caja,.radial.cerrando .radial-op{transition-duration:.12s; transition-delay:0s}
/* estela del cursor */
.estela{position:fixed; inset:0; width:100vw; height:100vh; z-index:110; pointer-events:none}   /* también sobre la intro */
/* inicio: el escritorio (con su dial y sus llamadas) queda centrado en la vertical y 15 % más grande */
.teclado{inset:50% -10px auto auto; width:calc((100% - 12px) * 1.19); translate:0 -50%}   /* ×1,19 y corrida a la derecha: el mouse más separado ensancha la escena y la taza no choca con el titular */
.dial{width:min(97%, 620px)}

/* ─────────── textos que se revelan con un bloque ─────────── */
.bl-espera{opacity:0}
.bl-linea{display:block}
.bl-caja{position:relative; display:inline-block; white-space:nowrap; max-width:none; vertical-align:top}
.bl-bloque{position:absolute; inset:-.02em -.05em; z-index:2; pointer-events:none; transform:scaleX(0); transform-origin:left center}

/* ═══════════ ronda 3 (27-oct): tipografía y textos como sutera.ch ═══════════
   Neue Haas Grotesk → Archivo 400 muy apretada (titulares y párrafos grandes) · PP Neue Montreal Mono → DM Mono
   (rótulos, llamadas y párrafos chicos). Fondo de líneas fijo con cruces, fichas con banda y equis, píldoras,
   marcadores cuadrados con línea en codo e íconos propios metidos entre las palabras. */
:root{--mono:"DM Mono",ui-monospace,monospace; --lr:color-mix(in srgb, var(--ink) 7.5%, transparent)}
body{background:transparent}
.titular,.titulo,.ficha-banda h2,.paso h3,.hito h3,.prueba-txt,.cierre-frase,.sorpresa-ventana h2,.jg-instr h2,.riel-hito b,.voz-txt{
  font-family:var(--grot); font-variation-settings:normal; font-stretch:100%; font-weight:400; letter-spacing:-.045em}
.titular{font-size:clamp(44px, 6.1vw, 104px); line-height:.9}
.titulo{font-size:clamp(38px, 4.7vw, 78px); line-height:.9}
.paso h3,.hito h3{font-size:clamp(28px, 2.7vw, 44px); line-height:.94; letter-spacing:-.04em}
.cierre-frase{font-size:clamp(46px, 7vw, 122px); line-height:.9}
.riel-hito b{letter-spacing:-.06em}
.voz-txt{font-size:clamp(18px, 1.5vw, 23px); line-height:1.02; letter-spacing:-.03em}
.jg-instr h2{line-height:.9}
.rotulo{font:700 12px/1 var(--grot); letter-spacing:-.02em; text-transform:uppercase; color:var(--ink)}
.dato{font-family:var(--mono); letter-spacing:0; line-height:1.15}
.ficha > p,.paso-txt,.hito-txt,.contacto-bajada,.proceso-pie p,.tira-desc,.hacemos-lead,.legal,.formulario-ok,.contacto-vias,.obra-pie,.campo input,.campo textarea{
  font-family:var(--mono); font-weight:400; letter-spacing:-.01em}
.ficha > p,.paso-txt,.hito-txt,.proceso-pie p,.tira-desc{font-size:13.5px; line-height:1.34}
.contacto-bajada{font-size:15px; line-height:1.3; max-width:36ch}
.hacemos-lead{font-size:13px; line-height:1.15; text-transform:uppercase; max-width:26ch}
/* rótulos de paso en banda negra, como "NOT A STUDIO — JUST ME" */
.paso-n,.hito-n{display:inline-block; background:var(--ink); color:var(--paper); font:700 11.5px/1 var(--grot); letter-spacing:-.02em; text-transform:uppercase; padding:4px 7px 3px; margin-bottom:14px}
/* fichas: borde fino, banda gris con el título en negrita y la equis en la esquina */
.ficha{background:var(--paper); border:1px solid var(--ink)}
.ficha.cortes::before{display:none}
.ficha-banda{display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:var(--paper-3); padding:9px 12px 8px; font-size:inherit; line-height:1}
.ficha-banda h2,.formulario .ficha-banda > span:first-child{font:700 15px/1 var(--grot); letter-spacing:-.03em; text-transform:uppercase}
.ficha-banda .dato{font-size:10px}
.ficha-x{position:absolute; top:-1px; right:-1px; width:15px; height:15px; border:1px solid var(--ink); background:var(--paper); font:400 12px/13px var(--mono); text-align:center}
.ficha > p{padding:0 12px; margin-top:10px}
.ficha > p:last-child{padding-bottom:14px}
.inicio .ficha{margin-left:0}
/* píldoras redondas en mono */
.filtros button,.chips span{border-radius:999px; height:26px; padding:0 11px; font:400 11px/1 var(--mono); text-transform:uppercase; letter-spacing:0; border-color:var(--ink); color:var(--ink)}
.filtros button[aria-pressed="true"]{background:var(--ink); color:var(--paper); box-shadow:none}
.filtros sup{color:inherit}
/* cabecera: pista al centro (con el globo que gira cruzando la línea del marco) y la hora a la derecha */
.pista-menu{left:50%; right:auto; transform:translate(-50%, -50%); display:block}
.pista-pildora{display:block; border:1px solid var(--ink); border-radius:3px; padding:4px 6px 3px; background:var(--paper); font:400 11px/1 var(--mono); text-transform:uppercase; color:var(--ink); white-space:nowrap}
.pista-globo{position:absolute; left:50%; top:calc(100% + 9px); width:26px; height:26px; margin-left:-13px}   /* imagen SVG animada (globo.svg): no recalcula la página en cada cuadro */
html[data-modo="oscuro"] .pista-globo{filter:invert(1)}
.hora{position:fixed; z-index:40; right:calc(var(--m) + var(--pad) - 8px); top:calc(var(--m) + var(--muesca)); transform:translateY(-50%); padding:3px 8px; background:var(--paper); text-align:right; font:400 10.5px/1.15 var(--mono); text-transform:uppercase; pointer-events:none}
.hora span{display:block; color:var(--mute)}
/* sobre la línea, junto a la hora: botón del portal (píldora negra con candado) y los modos de color (como en el portal) */
.cab-der{position:fixed; z-index:40; top:calc(var(--m) + var(--muesca)); translate:0 -50%; right:calc(var(--m) + var(--pad) + 108px); display:flex; align-items:center; gap:10px}
.portal-boton{display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 11px 0 10px;
  border-radius:999px; background:var(--ink); color:var(--paper); font:400 10.5px/1 var(--mono); text-transform:uppercase; transition:background-color .2s, transform .2s var(--ease)}
@media (hover:hover){ .portal-boton:hover{background:var(--hover-fondo); color:var(--hover-texto)} }
.modos{display:flex; align-items:center; gap:6px; height:24px; padding:0 7px; border:1px solid var(--ink); border-radius:999px; background:var(--paper)}
.modos button{position:relative; width:12px; height:12px; border-radius:50%; border:1px solid var(--ink); padding:0; cursor:pointer; transition:transform .2s, box-shadow .2s}
.modos button::before{content:""; position:absolute; inset:-7px}   /* área de toque de 24 px */
.modos button[data-modo="claro"]{background:#F5F3EE}
.modos button[data-modo="oscuro"]{background:#15140F}
.modos button[data-modo="rojo"]{background:#E8342A}
.modos button[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--ink)}
.modos button:focus-visible{outline-offset:3px}
@media (hover:hover){ .modos button:hover{transform:scale(1.15)} }
.portal-boton:active{transform:scale(.97)}
.hora b{font-weight:400}
/* fondo de líneas fijo (debajo del contenido; el marco tapa lo de afuera) */
.rejilla{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--lr),var(--lr)) 22.5% 0 / 1px 100% no-repeat,
    linear-gradient(var(--lr),var(--lr)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--lr),var(--lr)) 77.5% 0 / 1px 100% no-repeat,
    linear-gradient(var(--lr),var(--lr)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(var(--lr),var(--lr)) 0 66.666% / 100% 1px no-repeat}
.rejilla i{position:absolute; left:var(--x); top:var(--y); width:11px; height:11px; margin:-5px 0 0 -5px; opacity:.8;
  background:linear-gradient(var(--faint),var(--faint)) center / 1px 100% no-repeat, linear-gradient(var(--faint),var(--faint)) center / 100% 1px no-repeat}
.cruz{display:none}
/* inicio: dial detrás del escritorio y llamadas con línea en codo y marcador cuadrado */
.dial{position:absolute; left:54%; top:50%; width:min(84%, 540px); aspect-ratio:1; translate:-50% -50%; overflow:visible; pointer-events:none}
.dial circle{fill:none; stroke:var(--linea); stroke-width:1; vector-effect:non-scaling-stroke}
.dial line{stroke:var(--faint); stroke-width:1; vector-effect:non-scaling-stroke}
.dial text{font:400 2.1px var(--mono); fill:var(--faint); text-anchor:middle; dominant-baseline:central}
.dial .gira{transform-origin:0 0}
.dial{animation:dial 140s linear infinite}   /* rota el svg entero con "rotate" (se compone en la GPU; antes giraba un <g> y forzaba layout); "translate" lo centra */
.inicio.fuera-de-vista .dial,.inicio.fuera-de-vista .codigo-rollo{animation-play-state:paused}
@keyframes dial{to{rotate:360deg}}
.teclado{z-index:1}
.llamadas{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2}
.llamadas polyline{fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke}
.marcador{position:absolute; left:var(--x); top:var(--y); width:12px; height:12px; margin:-6px; border:1px solid var(--ink); background:var(--paper); z-index:3; pointer-events:none}
.marcador::after{content:""; position:absolute; inset:2.5px; background:var(--ink)}
.llamada{position:absolute; left:var(--x); top:var(--y); max-width:20ch; font:400 10.5px/1.12 var(--mono); text-transform:uppercase; color:var(--ink); z-index:3; pointer-events:none}
.llamada.derecha{left:auto; right:calc(100% - var(--x)); text-align:right}
.llamada.bajo-teclado{background:var(--paper); padding:3px 4px 2px; margin:-3px -4px}   /* la ancla web.js a la esquina del teclado; el papel la separa de la sombra */
.llamada.angosta{max-width:14ch; background:var(--paper); padding:2px 3px 1px; margin:-2px -3px}   /* va sobre el vapor: con fondo se lee */
/* anatomía: marcadores cuadrados en los rótulos */
.pila-iso .rot .mb{fill:var(--paper); stroke:var(--faint); stroke-width:1; vector-effect:non-scaling-stroke}
.pila-iso .rot .mc{fill:var(--faint)}
.pila-iso .rot.on .mb{stroke:var(--red)} .pila-iso .rot.on .mc{fill:var(--red)}
/* la ampolleta */
.pila-iso .vidrio{fill:var(--paper); stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pila-iso .rosca{fill:var(--paper-3); stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pila-iso .hilo{fill:none; stroke:var(--ink); stroke-width:.9; vector-effect:non-scaling-stroke}
.pila-iso .negro{fill:var(--ink)}
.pila-iso .alambre{fill:none; stroke:var(--mute); stroke-width:.9; vector-effect:non-scaling-stroke}
.pila-iso .filamento{fill:none; stroke:var(--red); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.pila-iso .reflejo{fill:none; stroke:var(--faint); stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pila-iso .rayos line{stroke:var(--red); stroke-width:1.2; stroke-linecap:round; stroke-dasharray:2 4; vector-effect:non-scaling-stroke}
.pila-iso .rayos{opacity:0; transition:opacity .4s}
.pila-iso .capa.idea:not(.fuera).encendida .rayos{opacity:1}
.pila-iso .brillo{opacity:0; transition:opacity .5s}
.pila-iso .capa.idea.encendida .brillo{opacity:1}
/* prueba de imprenta en grotesca: correcciones en la misma línea, íconos entre las palabras y una frase enmarcada */
.prueba-txt{font-size:clamp(34px, 4.3vw, 70px); line-height:1.03}
.corr{white-space:normal}
.corr del{text-decoration:none; color:var(--ink); background:linear-gradient(var(--red),var(--red)) no-repeat 0 56% / 0% .075em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .55s var(--sale), color .5s .3s}
.corr del::after,.corr ins::before{display:none}
.corr ins{position:static; display:inline; font-size:1em; line-height:inherit; letter-spacing:inherit; white-space:normal; color:transparent; clip-path:none; transform:none; text-decoration:none; transition:color .45s .4s}
.corr.hecho del{background-size:100% .075em; color:var(--faint)}
.corr.hecho ins{color:var(--red-txt); clip-path:none}
.ico-texto{display:inline-block; width:.78em; height:.78em; vertical-align:-.04em; margin:0 .02em; color:var(--ink); overflow:visible}
.ico-texto.ancho{width:1.42em}
.caja-palabra{white-space:nowrap; border:max(1.5px, .04em) solid var(--ink); border-radius:.2em; padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* ─────────── intro: la carpeta ─────────── */
html.intro-activa,html.intro-activa body{overflow:hidden; height:100%}
.intro-c{position:fixed; inset:0; z-index:100}
.ic-fondo{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ic-fuera{fill:var(--paper)}
.ic-dentro{fill:var(--paper-3)}
.ic-linea{fill:none; stroke:var(--ink); stroke-width:1.25; vector-effect:non-scaling-stroke}
.ic-carpeta{position:absolute; padding:0; perspective:1000px; border-radius:12px}
.ic-carpeta:focus-visible{outline-offset:8px}
/* hojas adentro: se asoman al pasar el cursor */
.ic-hoja{position:absolute; left:18px; right:18px; top:calc(var(--n) + 14px); bottom:14px; border:1px solid var(--ink); border-radius:6px; background:var(--paper-2);
  background-image:repeating-linear-gradient(transparent 0 13px, var(--linea-2) 13px 14px); background-position:0 22px; background-size:100% calc(100% - 44px); background-repeat:no-repeat;
  transition:transform .55s var(--sale), opacity .3s}
.ic-hoja-2{left:28px; right:12px; top:calc(var(--n) + 26px); background-color:var(--paper)}
/* tapa de adelante: bisagra abajo, se entreabre hacia quien mira */
.ic-tapa{position:absolute; left:0; right:0; bottom:0; height:76%; display:grid; place-items:center; background:var(--paper); border:1.25px solid var(--ink); border-radius:8px 8px 12px 12px;
  transform-origin:50% 100%; transition:transform .6s var(--sale)}
.ic-logo{width:56%; height:auto; fill:var(--ink); overflow:visible}
.ic-etiqueta{position:absolute; left:14px; bottom:12px; font:400 10px/1 var(--mono); text-transform:uppercase; color:var(--mute)}
@media (hover:hover){
  .ic-carpeta:hover .ic-tapa{transform:rotateX(-24deg)}
  .ic-carpeta:hover .ic-hoja-1{transform:translateY(-18px) rotate(-1.6deg)}
  .ic-carpeta:hover .ic-hoja-2{transform:translateY(-10px) rotate(1.3deg)}
}
.ic-carpeta:focus-visible .ic-tapa{transform:rotateX(-24deg)}
@media (hover:none){ .ic-tapa{animation:respira 3.4s var(--ease) infinite} }
@keyframes respira{0%,60%,100%{transform:none} 75%{transform:rotateX(-18deg)}}
.ic-pista{position:absolute; left:0; right:0; text-align:center; font:400 11px/1 var(--mono); text-transform:uppercase; color:var(--mute); transition:opacity .2s}
.ic-saltar{position:absolute; right:calc(var(--m) + var(--pad)); top:calc(var(--m) + 7px); font:400 11px/1 var(--mono); text-transform:uppercase; color:var(--mute); border-bottom:1px solid var(--linea); padding-bottom:2px; transition:color .2s, opacity .2s}
@media (hover:hover){ .ic-saltar:hover{color:var(--ink)} }
/* al abrir: la tapa cae, las hojas suben y la carpeta crece hasta ser el marco */
.intro-c.abriendo .ic-carpeta{pointer-events:none}
.intro-c.abriendo .ic-tapa{animation:none; transform:rotateX(-100deg); opacity:0; transition:transform .42s cubic-bezier(.5,0,.75,0), opacity .25s .15s}
.intro-c.abriendo .ic-hoja{transform:translateY(-80px); opacity:0; transition:transform .5s var(--sale), opacity .3s .08s}
.intro-c.abriendo .ic-pista,.intro-c.abriendo .ic-saltar{opacity:0}

/* clientes bajo la prueba de imprenta: logos en tinta (en oscuro, en papel) */
.clientes{margin-top:clamp(40px, 7vh, 80px); display:grid; gap:14px; justify-items:start}
.clientes-lista{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px, 3.4vw, 54px); list-style:none}
.clientes-lista img{display:block; height:clamp(18px, 1.7vw, 26px); width:auto; filter:grayscale(1) brightness(0); opacity:.82}
html[data-modo="oscuro"] .clientes-lista img{filter:grayscale(1) brightness(0) invert(1)}

/* preguntas frecuentes: el título a la izquierda y fichas que se abren a la derecha */
.preguntas{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(30px, 5vw, 90px); align-items:start; padding-block:clamp(60px, 10vh, 110px)}
.preguntas-cab{position:sticky; top:calc(var(--fy) + var(--corte) + 24px)}
.preguntas-cab .contacto-bajada{margin-top:18px}
.preguntas-lista{border-top:1px solid var(--ink)}
.pregunta{border-bottom:1px solid var(--ink)}
.pregunta summary{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:16px; padding:18px 2px; cursor:pointer; list-style:none}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary .dato{font-size:11px; color:var(--red-txt)}
.pregunta-q{font:400 clamp(19px, 1.6vw, 24px)/1.1 var(--grot); letter-spacing:-.03em}
.pregunta-signo{position:relative; width:12px; height:12px; align-self:center}
.pregunta-signo::before,.pregunta-signo::after{content:""; position:absolute; left:0; top:50%; width:12px; height:1.5px; margin-top:-.75px; background:var(--ink); transition:transform .3s var(--ease)}
.pregunta-signo::after{transform:rotate(90deg)}
.pregunta[open] .pregunta-signo::after{transform:rotate(0)}
.pregunta > p{padding:0 2px 20px calc(2px + 3.6em); max-width:62ch; font:400 14px/1.45 var(--mono); letter-spacing:-.01em; color:var(--ink-2)}
@media (hover:hover){ .pregunta summary:hover .pregunta-q{color:var(--red-txt)} }
@media (max-width: 960px){ .preguntas{grid-template-columns:1fr} .preguntas-cab{position:static} }
@media (max-width: 640px){ .pregunta > p{padding-left:2px} }

/* aviso de cookies (como la web en línea): una ficha abajo a la izquierda, a la derecha del botón de bajar; en celular a lo ancho.
   Queda bajo el grano (z 41) para tener la misma textura del papel */
html[data-modo="rojo"] .guincha{color:var(--paper)}   /* el 70 % daba 2,8:1 sobre la tinta en rojo */
.cookies{position:fixed; z-index:40; left:calc(var(--m) + 68px); bottom:calc(var(--m) + 14px); width:min(380px, calc(100vw - var(--m) * 2 - 82px)); padding-bottom:12px;
  opacity:0; transform:translateY(10px); transition:opacity .3s, transform .45s var(--sale)}
.cookies.on{opacity:1; transform:none}
.cookies[hidden]{display:none}
.cookies > p{font-size:13px; line-height:1.4}
.cookies a{text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.cookies-botones{display:flex; gap:8px; padding:12px 12px 0}
.cookies-botones .pildora{flex:1; justify-content:center}
@media (max-width: 640px){ .cookies{left:calc(var(--m) + 10px); right:calc(var(--m) + 10px); width:auto; bottom:calc(var(--m) + 10px)} }
@media (max-width: 360px){ .portal-boton span{display:none} .portal-boton{padding:0 9px} }
/* guincha: Privacidad · Cookies junto al © */
.guincha-legal{white-space:nowrap}
.guincha-legal button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; transition:color .2s}
.guincha-legal a,.guincha-legal button,.legal a{text-decoration:underline; text-underline-offset:2px}
@media (hover:hover){ .guincha-legal button:hover{color:var(--paper)} }

/* ─────────── tablet y celular ─────────── */
@media (max-width: 960px){
  .inicio{grid-template-columns:1fr; min-height:auto}
  .inicio-texto{padding-top:4px; padding-bottom:30px}
  .inicio .ficha{margin-top:36px}
  .inicio-ilus{height:min(62vw, 480px); min-height:300px; margin-right:0; margin-bottom:20px; order:-1; margin-top:calc(var(--corte) + 4px)}   /* en celular el escritorio va arriba y los textos abajo */
  .teclado{inset:4% 0 auto 0; width:auto; translate:none}
  /* la anatomía también queda fija mientras se baja: arriba el texto de la etapa (se reemplaza al cambiar) y abajo el dibujo,
     con las capas que no tocan al 15 %, como en el escritorio */
  .hacemos{height:calc(var(--fh) * 4.6)}
  .hacemos-fijo{position:sticky; top:var(--fy); height:var(--fh); min-height:0; display:flex; flex-direction:column; align-items:stretch; padding:calc(var(--corte) + 8px) 0 12px}
  .hacemos-texto{flex:none; display:grid; grid-template-rows:auto auto auto; align-content:start; padding-block:0}
  .hacemos-texto .titulo{font-size:clamp(30px, 8.4vw, 46px)}
  .hacemos-lead,.pasos{margin-top:14px}
  .hacemos-lead{font-size:14px}
  .hacemos-ilus{flex:1; min-height:0; height:auto}
  .pila-iso{top:0; height:100%}   /* en celular la caja ya empieza bajo el texto */
  .paso h3{font-size:24px; margin-bottom:8px}
  .paso .enlace{margin-top:10px}
  .puntos-pasos{display:none}
  .trabajo{height:auto !important}
  .trabajo-fijo{position:relative; top:auto; height:auto; min-height:0}
  .tira{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:20px}
  .tira::-webkit-scrollbar{display:none}
  .tira-lista{transform:none !important}
  .obra{scroll-snap-align:center}
  .trabajo{--ch:min(56vh, 400px, 92vw)}
  .obra-media{width:min(calc(var(--ch) * var(--r)), 80vw); height:auto; aspect-ratio:var(--r); min-width:0; max-width:none}
  .obra-pie{max-width:80vw}
  .contacto{grid-template-columns:1fr}
}
@media (max-width: 640px){
  :root{--pad:16px}
  body{font-size:15px}
  .tipo{display:none}
  .riel{display:none}
  .bajar{display:none}
  .titular{font-size:clamp(36px, 10.6vw, 56px)}
  .hora{display:none}
  /* en celular, arriba a la derecha (donde iba "Mantén el dedo") va el botón del portal; el punto del modo sigue en la línea.
     Se ubica respecto de .cab-der (que está fija en la línea): misma derecha que tenía la pista y al centro de la franja */
  .pista-menu{display:none}
  .portal-boton{position:absolute; right:calc(14px - var(--pad)); top:50%; translate:0 calc(-50% - var(--muesca) / 2); white-space:nowrap}
  .cab-der{right:calc(var(--m) + var(--pad) - 4px)}   /* sin hora: el punto del modo queda en su lugar */
  .modos{padding:0; border:0; height:auto; background:none}
  .modos button:not([data-actual]){display:none}
  .modos button[data-actual]{width:22px; height:22px; box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--ink)}
  .pista-menu{left:auto; right:calc(var(--m) + 10px); transform:translateY(-50%)}
  .pista-globo{display:none}
  .teclado{inset:4% 0 2% 0}   /* sin los botones de sorpresas debajo (Mati 27-oct): el escritorio usa todo el alto */
  .inicio-ilus{height:min(84vw, 380px)}
  .pila-iso .rot text{font-size:17px}
  .corr{white-space:normal}
  .prueba{justify-items:stretch}
  .llamadas,.marcador,.llamada{display:none}
  .prueba-txt{font-size:clamp(28px, 8vw, 40px); line-height:1.04}
  .caja-palabra{white-space:normal}
  .corr ins::before{display:none}
  .campos{grid-template-columns:1fr}
  .formulario-pie{flex-direction:column; align-items:stretch}
  .guincha{grid-template-columns:1fr; justify-items:start; gap:8px}
  .guincha-der{justify-self:start; flex-wrap:wrap}
  .cierre-frase{font-size:clamp(36px, 10vw, 54px)}
}

@media (max-width: 960px){
  .proceso{height:auto !important}
  .proceso-fijo{position:relative; top:auto; height:auto; min-height:0; display:block; padding-block:50px}
  .hitos-hueco{display:none}
  .hitos{display:grid; gap:34px; margin:30px 0 0 6px; padding-left:24px; border-left:1.25px solid var(--ink)}
  .hito{position:relative; inset:auto; pointer-events:auto}
  .hito::before{content:""; position:absolute; left:-31px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--red)}
  .riel-hitos{display:none}
  .proceso-pie{margin-top:40px}
  .tira-info{flex-direction:column; gap:6px}
}
@media (max-width: 640px){
  /* el logo con el mismo margen a los cuatro lados de la pestaña: el del contenido (--pad) */
  :root{--logo-h:27px; --muesca:calc(var(--logo-h) + var(--pad) * 2); --pestana:calc(var(--pad) * 2 + var(--logo-h) * 5.3)}
  .marca{top:calc(var(--m) + var(--pad))}
  .pista-menu{font-size:9.5px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .cursor{animation:none}
}