/* Te tengo pillado: cada significado de la palabra es un capítulo con su color, su letra y su scroll.
   Archivo (anchura variable 62–125) se estira o se encoge según el capítulo; Martian Mono solo para medidas. */
/* Fuentes servidas desde la propia web (2026-11-07): sin la hoja de Google Fonts, que bloqueaba el primer pintado
   400–600 ms en frío. Subconjunto «latin» de Google Fonts (OFL), mismo nombre de familia: canvas y 3D no cambian.
   index.html las precarga. Ver media/fuentes/LEEME.md */
@font-face{font-family:"Archivo";font-style:normal;font-weight:200 900;font-stretch:62% 125%;font-display:swap;src:url(media/fuentes/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:300;font-stretch:100%;font-display:swap;src:url(media/fuentes/archivo-italic-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(media/fuentes/martian-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#E4E6E3; --ink:#0B0B0C; --signal:#FF3B12; --signal-paper:#BF2B00;
  --abyss:#050608; --white:#F2F2EE;
  --klein:#1F2BFF;
  --acid:#D4FF3D;
  --stall:#B9BAB5; --alarm:#E0140F;
  --deep:#0E0E10;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ink);font:400 18px/1.5 var(--display);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* (2026-11-07) clip en vez de hidden: recorta igual lo que se sale por los lados, pero no convierte el body en un
   contenedor de scroll, que impedía position: sticky (la demo de logística se queda pegada mientras sube el motor) */
@supports (overflow:clip){body{overflow-x:clip}}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 14px var(--mono)}
.skip:focus{top:12px}

/* ---------- HUD ---------- */
/* la cabecera fija: cada pieza mezcla sus colores con la página por separado (antes, una capa de pantalla completa
   que obligaba a mezclar toda la pantalla en cada fotograma) */
.hud{display:contents;color:#fff;font:400 11px/1.2 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hud>*{position:fixed;z-index:40;pointer-events:auto;mix-blend-mode:difference;color:#fff}
.hud-logo{top:calc(18px + env(safe-area-inset-top,0px));left:var(--gutter);font:800 26px/1 var(--display);font-variation-settings:"wdth" 125;letter-spacing:-.04em;text-decoration:none}
.hud-ch{top:calc(24px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);text-transform:uppercase;white-space:nowrap}
.hud-ch-n{opacity:.6;margin-right:6px}
.hud-call{top:calc(14px + env(safe-area-inset-top,0px));right:var(--gutter);text-decoration:none;border:1px solid currentColor;padding:9px 14px 8px;border-radius:999px;font-size:12px;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)}
.hud-call span{font-weight:600;margin-right:6px}
.hud-call:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hud-call:hover{background:#fff;color:#000}}
.hud-clock,.hud-xy,.hud-depth{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.hud-clock{left:var(--gutter)}
.hud-xy{left:50%;transform:translateX(-50%)}
.hud-depth{right:var(--gutter)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;mix-blend-mode:difference;color:#fff;display:none}
.has-cursor .cursor{display:block}
.cursor i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .25s var(--ease-out)}
.cursor-t{position:absolute;left:14px;top:10px;font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.cursor.is-link i{transform:scale(3.2)}
.has-cursor body,.has-cursor a,.has-cursor button{cursor:none}
.has-cursor .demo,.has-cursor .demo *{cursor:auto}
.cursor.is-link .cursor-t{opacity:0}

/* ---------- Capítulos ---------- */
.ch{position:relative}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden}

/* 0 · Portada */
.ch0{background:var(--paper);color:var(--ink)}
.drum-wrap{position:absolute;inset:-14vh 0 14vh;perspective:1400px;perspective-origin:50% 50%;display:grid;place-items:center}
.drum{position:relative;width:100%;height:1px;transform-style:preserve-3d}
.drum span{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;font:800 clamp(34px,7.4vw,124px)/1 var(--display);letter-spacing:-.045em;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;text-shadow:0 1px 0 #C9CBC7,0 2px 0 #BDBFBB,0 3px 0 #B1B3AF,0 4px 0 #A5A7A3,0 10px 18px rgba(11,11,12,.16)}
.drum span.hot{color:var(--signal-paper);text-shadow:0 1px 0 #9E2400,0 2px 0 #8A1F00,0 3px 0 #761B00,0 4px 0 #621600,0 10px 18px rgba(11,11,12,.18)}
.ch0-copy{position:absolute;left:var(--gutter);bottom:calc(64px + env(safe-area-inset-bottom,0px));max-width:min(520px,calc(100% - 40px));display:grid;gap:14px}
.ch0-copy h1{font:800 clamp(28px,3.2vw,44px)/1 var(--display);font-variation-settings:"wdth" 70;letter-spacing:-.02em;text-transform:uppercase}
.ch0-copy h1 em{font-style:normal;font-variation-settings:"wdth" 125;color:var(--signal-paper)}
.ch0-copy p{font-size:clamp(16px,1.25vw,19px);line-height:1.45;max-width:46ch}
.ch0-hint{position:absolute;right:var(--gutter);bottom:calc(64px + env(safe-area-inset-bottom,0px));font:400 12px/1.45 var(--mono);max-width:22ch;text-align:right}

/* 1 · Profundidad */
.ch-caida{background:var(--abyss);color:var(--white)}
.warp{position:absolute;inset:0;width:100%;height:100%}
.depth-big{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);font:200 clamp(90px,19vw,320px)/.8 var(--display);font-variation-settings:"wdth" 62;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--signal);display:flex;align-items:flex-start;gap:.08em}
.depth-big small{font:400 14px var(--mono);color:var(--white);margin-top:.8em}
.caida-lines{position:absolute;left:var(--gutter);top:0;bottom:0;width:min(640px,calc(100% - 40px));display:grid;align-content:center;gap:28px}
.ch-caida .def{font:300 clamp(26px,3vw,46px)/1.15 var(--display);font-variation-settings:"wdth" 90;letter-spacing:-.02em}
.ch-caida .def b{font-weight:800;font-variation-settings:"wdth" 125}
.ch-caida .def i{font:400 max(12px,.45em) var(--mono);vertical-align:.4em;color:var(--signal)}
.ch-caida .l{font-size:clamp(18px,1.5vw,22px);line-height:1.4;max-width:38ch;padding-left:18px;border-left:1px solid rgba(242,242,238,.3)}

/* 2 · Perforado */
.ch-placa{background:var(--paper);color:var(--ink)} /* papel, como la portada: la palabra con los trabajos sale nada más irse la cara */
.works{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);background:var(--ink)} /* seis (2026-11-08; antes ocho, 4 × 2) */
.works li{position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.6);opacity:var(--reveal,1)} /* 0 mientras «PILLADO» es negro y macizo; sube con el zoom */
.work{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.work video,.work img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .5s var(--ease-out),filter .3s var(--ease-out)}
.work-t{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:10px;align-items:flex-end;font:400 11px/1.3 var(--mono);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.work-t b{font:800 clamp(15px,1.3vw,20px)/1.05 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:-.01em}
.work:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.is-open .work-t{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.is-open .work:hover video{transform:scale(1.04)}}
.plate{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* la sombra interior de las letras se dibuja en el propio SVG (main.js, plateShadows) */
.ch-placa .stage{overflow:visible} /* al entrar, la placa se contrarresta hacia arriba para quedarse quieta en pantalla */
.plate-fill{fill:var(--paper)}
.placa-head{position:absolute;left:var(--gutter);top:calc(76px + env(safe-area-inset-top,0px));max-width:min(560px,calc(100% - 40px));pointer-events:none}
.placa-head h2{font:400 clamp(20px,1.8vw,26px)/1.32 var(--display)}
.placa-head b{font-weight:800}
.placa-head i{font:400 max(12px,.55em) var(--mono);vertical-align:.3em}
.placa-end{position:absolute;left:var(--gutter);bottom:calc(60px + env(safe-area-inset-bottom,0px));background:var(--signal);color:var(--ink);padding:14px 18px;font:800 clamp(18px,1.6vw,24px)/1.1 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;max-width:calc(100% - 40px);opacity:0;pointer-events:none}
.placa-end span{display:block;font:400 12px/1.4 var(--mono);text-transform:none;margin-top:4px}

/* 3 · Te pillo el punto */
.ch3{background:var(--acid);color:var(--ink);min-height:100vh;overflow:hidden}
.field{position:absolute;inset:0;width:100%;height:100%}
.reticle{position:absolute;left:0;top:0;z-index:2;pointer-events:none;width:0;height:0}
.reticle i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border:1.5px solid var(--ink);border-radius:50%}
.reticle i::before,.reticle i::after{content:"";position:absolute;background:var(--ink)}
.reticle i::before{left:50%;top:-14px;bottom:-14px;width:1.5px;transform:translateX(-50%)}
.reticle i::after{top:50%;left:-14px;right:-14px;height:1.5px;transform:translateY(-50%)}
.reticle-t{position:absolute;left:58px;top:-52px;font:500 10px var(--mono);text-transform:uppercase;white-space:nowrap;background:var(--ink);color:var(--acid);padding:4px 6px}
.ch3-in{position:relative;z-index:3;padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) 140px;padding-right:max(20px,env(safe-area-inset-right,0px));display:grid;gap:clamp(56px,8vw,120px);pointer-events:none}
.ch3 h2{font:900 clamp(48px,9vw,150px)/.94 var(--display);font-variation-settings:"wdth" 62;letter-spacing:-.03em;text-transform:uppercase;max-width:12ch}
.ch3 h2 em{font-style:normal;display:block;font-variation-settings:"wdth" 125;letter-spacing:-.05em}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);max-width:1280px}
.steps li{display:grid;gap:10px;align-content:start;background:var(--acid);padding:18px 0 0;border-top:2px solid var(--ink)}
.steps .n{font:500 12px var(--mono)}
.steps h3{font:800 clamp(30px,3.4vw,52px)/1 var(--display);font-variation-settings:"wdth" 110;letter-spacing:-.03em}
.steps p{font-size:clamp(16px,1.2vw,19px);max-width:30ch}

/* 4 · Se ha quedado pillado */
.ch4{background:var(--stall);color:var(--ink)}
.ch4 .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:0 var(--gutter)}
.tacho{width:100%;max-width:560px;justify-self:center;overflow:visible}
.tacho-arc{stroke:var(--ink);stroke-width:2}
.tacho-ticks line{stroke:var(--ink);stroke-width:2}
.tacho-ticks line.red{stroke:var(--alarm);stroke-width:4}
.tacho-ticks text{font:500 13px var(--mono);fill:var(--ink)}
.needle{stroke:var(--alarm);stroke-width:4;stroke-linecap:round;transform-origin:200px 210px}
.hub{fill:var(--ink)}
.rpm{font:400 11px var(--mono);fill:var(--ink)}
.ch4-copy{display:grid;gap:22px;align-content:center;max-width:560px}
.stall-title{font:900 clamp(52px,7.6vw,128px)/.86 var(--display);font-variation-settings:"wdth" 75;letter-spacing:-.03em;text-transform:uppercase}
.stall-title em{font-style:normal;color:var(--signal)} /* (2026-11-07) «PILLADO» en el naranja de marca */
.ch4-copy p{font-size:clamp(18px,1.4vw,22px);max-width:36ch}
.ch4 .after{display:none;font-weight:600}
.restart{justify-self:start;border:2px solid var(--ink);background:var(--ink);color:var(--stall);padding:16px 28px;border-radius:999px;font:800 18px var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em;visibility:hidden;transition:transform .16s var(--ease-out),background-color .2s var(--ease-out)}
.restart:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.restart:hover{background:#B80F0B;border-color:#B80F0B;color:#fff}}
.ch4.stalled .stage{animation:shudder .5s steps(2) 3}
.ch4.stalled .stage{filter:grayscale(1) contrast(1.2)}
.ch4.stalled .restart,.ch4.waiting .restart{visibility:visible}
.ch4.running{background:var(--ink);color:var(--stall)}
.ch4.running .tacho-arc,.ch4.running .tacho-ticks line{stroke:var(--stall)}
.ch4.running .tacho-ticks text,.ch4.running .rpm{fill:var(--stall)}
.ch4.running .hub{fill:var(--stall)}
.ch4.running .before{opacity:.5}
.ch4.running .after{display:block}
@keyframes shudder{0%{transform:translate(0,0)}25%{transform:translate(-7px,3px)}50%{transform:translate(6px,-4px)}75%{transform:translate(-3px,-2px)}100%{transform:translate(0,0)}}

/* 5 · Hasta las trancas */
.ch5{background:var(--deep);color:var(--white)}
.ch5 .stage{background:#1F8E98;cursor:pointer;touch-action:pan-y}
.pond-water,.pond-life{position:absolute;inset:0;width:100%;height:100%}
/* 5.4 · el botón de la comida: un saquito con 3 porciones; cada clic o toque en el agua suelta una */
.pond-feed{position:absolute;z-index:3;left:var(--gutter);bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + 34px);display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:calc(100% - 2 * var(--gutter));opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.ch5 .stage.is-pond .pond-feed{opacity:1;transform:none}
/* el cuenco de la comida (2026-11-07): un cuenco de madera torneada con un filete de laca roja, visto desde arriba como el
   estanque, que flota y se mece. Al tocarlo se hunde un poco, coges un pellizco de pienso y el agua se mueve a su alrededor */
.pond-jar{position:relative;width:86px;height:86px;padding:0;border:0;background:none;flex:none;border-radius:50%;-webkit-tap-highlight-color:transparent}
.pond-jar:focus-visible{outline:3px solid #fff;outline-offset:4px}
.bowl-svg{display:block;width:100%;height:100%;overflow:visible}
.bowl-float,.bowl-body,.bowl-pinch,.bowl-shade{transform-box:view-box;transform-origin:60px 60px}
.bowl-float{animation:bowl-float 6s ease-in-out infinite}
@keyframes bowl-float{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(.8px,-1.1px) rotate(3deg)}65%{transform:translate(-.8px,.9px) rotate(-2.4deg)}}
.bowl-body{transition:transform 260ms var(--ease-out)}
.bowl-shade{transition:transform 260ms var(--ease-out),opacity 260ms var(--ease-out)}
.bowl-pinch{transition:transform 320ms var(--ease-out),opacity 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pond-jar:hover .bowl-body{transform:scale(1.04)}.pond-jar:hover .bowl-shade{transform:translate(2px,3px);opacity:.8}}
.pond-jar:active .bowl-body{transform:scale(.95)}
.pond-jar:active .bowl-shade{transform:translate(-1px,-1px);opacity:1}
.pond-jar.is-open .bowl-pinch{opacity:0;transform:translate(-6px,-16px) scale(.55)}
.pond-jar.is-nudge{animation:jar-nudge 420ms var(--ease-out)}
@keyframes jar-nudge{25%{transform:rotate(-7deg)}55%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
/* lo que llevas en la mano: tres bolitas junto al bote (y junto al cursor) */
.jar-hand{position:absolute;left:78px;top:4px;display:flex;gap:4px;padding:5px 7px;border-radius:999px;background:rgba(4,24,20,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:scale(.92);transform-origin:0% 100%;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);pointer-events:none}
.pond-jar.has-food .jar-hand{opacity:1;transform:none}
.jar-hand i,.food-cursor i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E7A866,#A85A25 62%,#5E2E12);box-shadow:0 1px 1px rgba(0,0,0,.3);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.jar-hand i.off,.food-cursor i.off{opacity:0;transform:scale(.6)}
.food-cursor{position:fixed;left:0;top:0;z-index:59;display:none;gap:3px;padding:30px 0 0 15px;pointer-events:none;transition:opacity 160ms var(--ease-out)}
.cursor-off .food-cursor{opacity:0}
.has-cursor .pond-jar,.has-cursor .board-yes:not(:disabled){cursor:pointer}
.has-cursor.has-food .food-cursor{display:flex}
.food-cursor i{width:8px;height:8px}
.pond-say{min-width:0;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#fff;text-shadow:0 1px 6px rgba(0,16,12,.75)}
/* (2026-11-07) con el agua turquesa (más clara) el texto blanco perdía contraste: va sobre un cristal oscuro y translúcido */
.pond-say{padding:7px 12px 6px;border-radius:999px;background:rgba(2,34,40,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none}
.rm .pond-feed{display:none}
@media (prefers-reduced-motion:reduce){.pond-jar.is-nudge,.bowl-float{animation:none}.bowl-body,.bowl-pinch,.bowl-shade{transition:none}}
.who{position:relative;padding:clamp(80px,12vw,160px) var(--gutter) clamp(100px,14vw,200px);padding-right:max(20px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;max-width:1400px}
.who h3{font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--signal)}
.who p{font-size:clamp(20px,2vw,30px);line-height:1.38;max-width:34ch;grid-column:2}
.who p+p{margin-top:.8em;color:rgba(242,242,238,.72)}

/* Cierre */
/* ---------- 6 · Cierre: una sala de embarque al atardecer. La sección es alta: la sala se queda fija (sticky) mientras
   la cámara baja del cielo y el cielo acaba enmarcado en el ventanal (--p, de 0 a 1, lo pone el scroll).
   Capas: el cielo (el simulador, a pantalla completa y recortado al ventanal), la sala (pared, haz de luz, suelo) y,
   encima, el panel y la carpintería del ventanal ---------- */
.ch6{--flap:#202327;--flap-hi:#2A2E33;--flap-ink:#F3F1E7;--flap-amber:#FFC21A;--flap-go:#3DDC84;--flap-red:#FF4D3A;
  --wall:#251a14;--wall-2:#2f2018;--sun:255,176,112;
  position:relative;height:calc(100svh + 110vh);background:var(--wall);color:var(--flap-ink)}
.hall{--p:1;--room:1;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(90deg,#1a120f,var(--wall) 45%,var(--wall-2))}
.hall-sky{position:absolute;inset:0;z-index:1;clip-path:var(--win-clip,inset(0));background:linear-gradient(#c9a3c4,#f0b48f 48%,#5a5f9e 52%,#2c3878)} /* mientras se prepara el 3D: el atardecer, pintado */
.flight-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* la palanca del simulador es el propio ventanal: aparece donde se toca */
.flight.is-flying .flight-view{touch-action:none;cursor:grab}
.flight.is-flying .flight-view:active{cursor:grabbing}
.flight-stick{--r:64px;position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 120ms var(--ease-out)}
.flight-stick.is-on{opacity:1}
.flight-stick::before{content:"";position:absolute;left:calc(var(--r) * -1);top:calc(var(--r) * -1);width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;border:1.5px solid rgba(255,244,230,.6);background:radial-gradient(rgba(20,14,10,.05),rgba(20,14,10,.28));box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.flight-stick i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe08a,var(--flap-amber) 60%,#c88f00);box-shadow:0 3px 12px rgba(0,0,0,.4)}
.flight-horizon{position:absolute;left:50%;top:52%;width:0;height:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 500ms var(--ease-out)}
.flight.is-flying .flight-horizon{opacity:.8}
.flight-horizon::before{content:"";position:absolute;left:-13px;top:-4px;width:26px;height:10px;border:1.6px solid var(--flap-amber);border-top:0;border-radius:0 0 13px 13px}
.flight-horizon i{position:absolute;left:-84px;top:-1px;width:168px;height:1.6px;background:linear-gradient(90deg,rgba(255,244,230,0),rgba(255,244,230,.8) 22%,rgba(255,244,230,0) 40% 60%,rgba(255,244,230,.8) 78%,rgba(255,244,230,0))}
.flight.is-low .flight-hud span:first-child b{color:#ff6a4a}
.hall-room{position:absolute;inset:0;z-index:0;pointer-events:none}
/* la sala pintada (main.js, drawRoom): detrás del cielo la pared y el suelo; delante, asientos, pasajero, cartel y
   viñeteado; el polvo flota en el haz del ventanal (solo transform: barato) */
.hall-room::before,.hall-room::after{display:none}
.hall-decor,.hall-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--room)}
.hall-front{z-index:1;transition:opacity 600ms var(--ease-out)}
.hall.is-flying .hall-front,.hall.is-flying .hall-dust{opacity:0}
.hall-dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:calc(var(--room) * .85)}
.hall-dust::before{content:"";position:absolute;inset:-25%;background-image:radial-gradient(rgba(255,222,180,.75) 0 1px,transparent 1.7px),radial-gradient(rgba(255,214,170,.45) 0 .8px,transparent 1.4px),radial-gradient(rgba(255,230,200,.35) 0 1.3px,transparent 2px);background-size:150px 130px,95px 80px,230px 210px;background-position:0 0,37px 51px,90px 20px;animation:hall-dust 34s linear infinite}
@keyframes hall-dust{to{transform:translate3d(-150px,64px,0)}}
@media (prefers-reduced-motion:reduce){.hall-dust::before{animation:none}}
/* el haz de luz del ventanal sobre la pared, cortado por las sombras de los montantes, y el suelo pulido que refleja el ventanal */
.hall-room::before{content:"";position:absolute;left:0;top:9%;width:var(--win-left,56%);height:78%;opacity:calc(var(--room) * .95);
  background:repeating-linear-gradient(104deg,rgba(var(--sun),0) 0 15%,rgba(16,10,8,.55) 15% 16.2%,rgba(var(--sun),0) 16.2% 33%),
    linear-gradient(270deg,rgba(var(--sun),.34),rgba(var(--sun),.06));
  clip-path:polygon(100% 0,100% 100%,0 88%,0 10%)}
.hall-room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;opacity:var(--room);
  background:radial-gradient(60% 120% at var(--win-cx,78%) 0%,rgba(var(--sun),.26),rgba(var(--sun),0) 70%),linear-gradient(#20160f,#0d0908);border-top:3px solid #3a2a20}
.terminal{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(24px,3.5vw,64px);align-items:center;
  padding:96px var(--gutter) calc(16% + 8px);padding-right:max(20px,env(safe-area-inset-right,0px));max-width:1600px;margin:0 auto;pointer-events:none}
.terminal>*{pointer-events:auto}
/* el panel y su botón, colgados en la pared: aparecen con la sala */
.board-col{display:grid;grid-template-rows:auto auto;gap:12px;min-width:0;opacity:var(--room);transform:translateY(calc((1 - var(--room)) * 24px))}
.board{position:relative;min-width:0;aspect-ratio:16/10.5;max-height:58vh;overflow:visible;background:transparent}
.board3d{position:absolute;inset:-4% -3%;width:106%;height:108%}
.flight{position:relative;display:grid;min-width:0;height:min(66vh,640px);align-self:center}
/* (2026-11-08) en el ordenador: a la izquierda el panel y, si cabe entera, la tarjeta de embarque debajo (.con-pase; el
   panel toma el ancho que le deja, --board-w, lo mide main.js); a la derecha el ventanal y, debajo, el pulsador del SÍ */
@media (min-width:901px){
  .terminal{grid-template-rows:auto minmax(0,1fr);align-items:start;padding-top:92px;padding-bottom:24px}
  .board-col{grid-column:1;grid-row:1 / -1;align-self:center}
  .flight{grid-column:2;grid-row:1;align-self:start;height:min(58vh,600px,calc(100vh - 332px));height:min(58svh,600px,calc(100svh - 332px))}
  .board-yes-row{grid-column:2;grid-row:2;justify-self:start;width:250px;margin:30px 0 0 calc(66% - 125px)}
  /* en vuelo, el antepecho con los mandos ocupa su sitio */
  .hall.is-flying .board-yes-row{opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
  .hall.con-pase .board-col{align-self:start;gap:18px}
  .hall.con-pase .board{width:var(--board-w,100%);max-height:none}
}
/* el ventanal: un hueco con su carpintería (marco, dos montantes, un travesaño) y un reflejo en el cristal.
   El cielo no está aquí: es la capa .hall-sky, recortada a este hueco */
.flight-view{position:relative;min-height:0}
.flight-frame{position:absolute;inset:-14px;pointer-events:none;opacity:var(--frame,1);
  border:14px solid #1b1514;border-color:#2a201b #140f0d #0d0908 #241b17;border-radius:3px;
  /* el perfil con grosor: bisel encendido arriba a la izquierda, sombra dentro y fuera, y el alféizar debajo */
  box-shadow:0 0 0 1px rgba(var(--sun),.28),inset 0 0 0 1px rgba(var(--sun),.22),inset 2px 2px 0 rgba(255,214,170,.10),0 22px 44px -12px rgba(0,0,0,.65),0 14px 0 -4px #1a120e,0 15px 0 -4px rgba(var(--sun),.35);
  background:linear-gradient(90deg,transparent calc(33.3% - 6px),#1b1514 calc(33.3% - 6px) calc(33.3% + 6px),transparent calc(33.3% + 6px) calc(66.6% - 6px),#1b1514 calc(66.6% - 6px) calc(66.6% + 6px),transparent calc(66.6% + 6px)),
    linear-gradient(transparent calc(30% - 5px),#1b1514 calc(30% - 5px) calc(30% + 5px),transparent calc(30% + 5px)),
    linear-gradient(115deg,transparent 18%,rgba(255,255,255,.07) 26%,transparent 34%,transparent 70%,rgba(255,255,255,.05) 76%,transparent 82%)}
/* los montantes con su canto encendido por el sol (el lado izquierdo de cada uno) */
.flight-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(33.3% - 6px),rgba(255,190,130,.35) calc(33.3% - 6px) calc(33.3% - 4.5px),transparent calc(33.3% - 4.5px) calc(66.6% - 6px),rgba(255,190,130,.35) calc(66.6% - 6px) calc(66.6% - 4.5px),transparent calc(66.6% - 4.5px)),
    linear-gradient(transparent calc(30% - 5px),rgba(255,190,130,.3) calc(30% - 5px) calc(30% - 3.8px),transparent calc(30% - 3.8px))}
.flight.is-flying .flight-frame{--frame:0;transition:opacity 800ms var(--ease-out)}
/* el antepecho: los mandos, que solo aparecen cuando el avión ya vuela (fase 3) */
.flight-ctl{position:absolute;left:-14px;right:-14px;top:calc(100% + 14px);z-index:2;display:grid;grid-template-columns:repeat(3,56px) 1fr;grid-template-rows:repeat(2,auto);gap:6px;align-items:center;padding:12px 14px;
  background:linear-gradient(#2a201b,#1a1311);border-top:1px solid rgba(var(--sun),.35);box-shadow:0 18px 30px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity 400ms var(--ease-out),visibility 0s 400ms}
.flight.is-flying .flight-ctl{opacity:1;visibility:visible;transition:opacity 400ms var(--ease-out) 600ms}
.flight-hud{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none;opacity:0;transition:opacity 400ms var(--ease-out)}
.flight.is-flying .flight-hud{opacity:1}
.flight-hud span{background:rgba(20,23,27,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#C9CED3;border-radius:8px;padding:7px 10px;font:500 11px/1 var(--mono);letter-spacing:.03em}
.flight-hud b{color:var(--flap-amber);font-weight:600;font-variant-numeric:tabular-nums}
.flight-auto{position:absolute;left:12px;bottom:14px;background:var(--flap-amber);color:#231800;border-radius:999px;padding:7px 12px;font:600 11px/1 var(--mono);letter-spacing:.02em;opacity:0;transition:opacity .3s,transform .3s var(--ease-out);pointer-events:none}
.flight.is-flying .flight-auto{opacity:1}
.flight.is-flying.manual .flight-auto{opacity:0;transform:translateY(6px)}
.yoke{display:grid;place-items:center;gap:2px;height:50px;border-radius:10px;border:1px solid #3b302a;background:linear-gradient(#2c221d,#1e1714);color:var(--flap-ink);font:700 15px/1 var(--display);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .1s var(--ease-out),background .15s,border-color .15s}
.yoke span{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#b3a69c}
.yoke.up{grid-column:2;grid-row:1}.yoke.left{grid-column:1;grid-row:2}.yoke.down{grid-column:2;grid-row:2}.yoke.right{grid-column:3;grid-row:2}
.yoke.is-on{background:var(--flap-amber);color:#231800;border-color:var(--flap-amber);transform:scale(.96)}
.yoke.is-on span{color:#3A2A00}
.flight-ctl .flight-keys{grid-column:4;grid-row:1 / span 2}
.flight-keys{margin-left:auto;text-align:right;font:500 11px/1.5 var(--mono);color:#b3a69c;max-width:24ch}
.cursor-off .cursor{opacity:0}
.flight-keys .k-touch{display:none}
@media (pointer:coarse){.flight-keys .k-touch{display:inline}.flight-keys .k-fine{display:none}}
@media (max-width:900px){
  .terminal{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;align-items:stretch;gap:16px;padding-top:76px;padding-bottom:52px}
  .flight{grid-row:1;height:auto;min-height:38svh}
  .board-col{grid-row:2}
  .board{aspect-ratio:16/9.6;max-height:30vh;margin:0 auto;width:100%}
  .hall-room::before{width:100%;top:auto;bottom:16%;height:52%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:linear-gradient(rgba(var(--sun),.24),rgba(var(--sun),0) 80%)}
  /* en el móvil, los mandos van dentro del ventanal (abajo a la izquierda), para no tapar el teléfono del panel */
  .flight-ctl{top:auto;bottom:10px;left:10px;right:auto;grid-template-columns:repeat(3,46px);gap:5px;padding:0;background:none;border:0;box-shadow:none}
  .flight-ctl .flight-keys{display:none}
  .yoke{height:44px;background:rgba(28,20,16,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .yoke span{display:none}
  .flight-auto{left:12px;right:auto;top:50px;bottom:auto}
}
/* 6.5 · «¿Despegamos?» (2026-11-08): un pulsador iluminado de cabina (como los del techo de un Airbus), hundido en su
   placa gris de aluminio con cuatro tornillos y el rótulo «DESPEGUE» grabado encima. El cristal tiene dos leyendas:
   arriba «SÍ» y abajo una franja. Apagado mientras el panel no pregunta; al preguntar, el «SÍ» se enciende en blanco y la
   franja parpadea en ámbar («PULSA»); al pulsarlo se hunde y la franja queda en verde («EN VUELO»). En el ordenador va
   bajo el ventanal, entre los asientos y el pasajero; en el móvil, bajo el panel */
.board-yes-row{position:relative;z-index:4;display:grid;justify-items:center;align-content:start;gap:12px;opacity:var(--room);transform:translateY(calc((1 - var(--room)) * 24px))}
.yes-placa{position:relative;display:grid;justify-items:center;gap:8px;padding:9px 15px 15px;border-radius:9px;
  background:linear-gradient(170deg,#3a3d42,#2a2c30 55%,#222428);
  box-shadow:0 0 0 1px #0b0c0d,inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.45),0 16px 28px rgba(0,0,0,.5),0 3px 6px rgba(0,0,0,.4)}
/* los tornillos, uno en cada esquina, con su ranura */
.yes-placa::before{content:"";position:absolute;inset:6px;pointer-events:none;
  --t:radial-gradient(circle,#9a9da2 0 1.3px,#55585d 1.9px,#1b1c1f 2.6px,transparent 3.1px);
  background:var(--t) left top / 7px 7px no-repeat,var(--t) right top / 7px 7px no-repeat,var(--t) left bottom / 7px 7px no-repeat,var(--t) right bottom / 7px 7px no-repeat}
.yes-rotulo{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#E6E2D6;padding-left:.2em}
/* el pulsador: el marco negro y, dentro, el cristal */
.board-yes{position:relative;flex:none;width:86px;height:86px;padding:0;border:0;border-radius:7px;cursor:pointer;
  background:linear-gradient(#1c1d20,#0c0d0e);
  box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.1),0 4px 0 #08090a,0 7px 12px rgba(0,0,0,.55);
  transition:transform 90ms var(--ease-out),box-shadow 90ms var(--ease-out)}
.yes-cristal{position:absolute;inset:6px;display:grid;grid-template-rows:minmax(0,1fr) 23px;border-radius:3px;overflow:hidden;
  background:linear-gradient(#24262a,#17181b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 6px 12px rgba(0,0,0,.55);transition:background .25s}
/* el brillo del cristal, arriba a la izquierda */
.yes-cristal::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%)}
.yes-si{display:grid;place-items:center;padding-top:2px;font:900 28px/1 var(--display);font-variation-settings:"wdth" 110;letter-spacing:.04em;color:#55585e;transition:color .25s,text-shadow .25s}
.yes-luz{position:relative;display:grid;place-items:center;border-top:1px solid rgba(0,0,0,.7);background:rgba(0,0,0,.18);transition:background-color .25s}
.yes-luz b{grid-area:1 / 1;font:600 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding-left:.04em;color:#45474c;transition:color .25s,opacity .25s}
.yes-vuelo{opacity:0}
/* listo: el «SÍ» encendido; la franja, en ámbar y parpadeando (como el aviso de una cabina) */
.board-yes:not(:disabled) .yes-si,.board-yes.is-done .yes-si{color:#F6F3EA;text-shadow:0 0 1px #fff,0 0 9px rgba(255,248,230,.55)}
.board-yes.is-asking .yes-luz{background:#3a2a00;animation:yes-ambar 1.1s steps(1,end) infinite}
.board-yes.is-asking .yes-pulsa{color:#FFC21A;text-shadow:0 0 7px rgba(255,194,26,.75)}
@keyframes yes-ambar{50%{background:rgba(0,0,0,.18)}}
.board-yes.is-asking{box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.1),0 4px 0 #08090a,0 7px 12px rgba(0,0,0,.55),0 0 0 4px rgba(255,194,26,.16)}
/* pulsado: se hunde y queda en verde */
.board-yes:active:not(:disabled),.board-yes.is-done{transform:translateY(3px);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #08090a,0 3px 6px rgba(0,0,0,.5)}
.board-yes.is-done .yes-luz{background:#0b2a17}
.board-yes.is-done .yes-pulsa{opacity:0}
.board-yes.is-done .yes-vuelo{opacity:1;color:#3DDC84;text-shadow:0 0 7px rgba(61,220,132,.7)}
.board-yes:disabled{cursor:default}
.board-yes:focus-visible{outline:3px solid var(--flap-amber);outline-offset:5px}
.board-q{margin:0;max-width:30ch;text-align:center;font:600 12px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9aa1a9;opacity:0;transition:opacity 300ms var(--ease-out)}
.board-q a{color:inherit;text-underline-offset:3px}
.board-yes-row:has(.is-asking) .board-q{opacity:1;color:var(--flap-amber)}
.board-yes-row:has(.is-done) .board-q{opacity:1}
/* «Ir al SÍ» desde la tarjeta: el pulsador se señala un momento */
.board-yes-row.is-mira .yes-placa{animation:yes-mira 1.2s var(--ease-out)}
@keyframes yes-mira{20%{box-shadow:0 0 0 1px #0b0c0d,0 0 0 6px rgba(255,194,26,.45),0 16px 28px rgba(0,0,0,.5)}}
@media (prefers-reduced-motion:reduce){.board-yes.is-asking .yes-luz,.board-yes-row.is-mira .yes-placa{animation:none}}
@media (max-width:900px){
  /* el pulsador, bajo el panel: la placa a la izquierda y la pregunta a su lado */
  .board-yes-row{grid-row:3;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:16px;justify-self:center;max-width:min(100%,420px)}
  .yes-placa{padding:8px 13px 13px;gap:7px}
  .board-yes{width:80px;height:80px}
  .yes-cristal{inset:6px;grid-template-rows:minmax(0,1fr) 21px}
  .yes-si{font-size:25px}
  .board-q{text-align:left}
}
.phone-link{position:absolute;left:16px;bottom:16px;z-index:2;background:var(--flap-amber);color:#231800;border-radius:10px;padding:10px 14px;font:700 15px/1 var(--display);text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s}
.phone-link:focus-visible,.board.no-3d .phone-link{opacity:1;pointer-events:auto}
.board.no-3d .phone-link{opacity:1;pointer-events:auto}

.foot{font:400 12px/1.5 var(--mono);margin-top:40px}

/* ---------- Demo ---------- */
.demo{border:0;padding:0;margin:auto;width:min(1080px,calc(100vw - 32px));height:min(760px,calc(100svh - 32px));max-width:none;max-height:none;background:var(--paper);color:var(--ink);border-radius:18px;overflow:hidden}
.demo::backdrop{background:rgba(5,6,8,.72)}
.demo[open]{animation:demo-in .32s var(--ease-out)}
@keyframes demo-in{from{opacity:0;transform:scale(.96) translateY(12px)}}
.demo-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);height:100%}
.demo-app{position:relative;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.demo-app iframe{width:100%;height:100%;border:0;background:#fff}
.demo-app video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} /* (2026-11-08) entero en el hueco (antes se salía por abajo) */
.demo-info{padding:56px 40px 32px;overflow:auto;display:grid;gap:18px;align-content:start}
.demo-n{font:400 11px var(--mono)}
.demo h2{font:900 clamp(30px,3.2vw,48px)/.92 var(--display);font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.02em}
.demo dl{display:grid;gap:6px}
.demo dt{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:14px;color:#55585a}
.demo dd{margin:0;font-size:17px;line-height:1.45}
.demo-cur{display:grid;gap:6px}
.demo-cur li{padding-left:16px;position:relative}
.demo-cur li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--signal)}
.demo-estado{margin:18px 0 0;font:500 12.5px/1.45 var(--mono);color:#55585a}
.demo-out{display:inline-block;justify-self:start;margin-top:18px;background:var(--ink);color:var(--paper);text-decoration:none;padding:12px 18px;border-radius:999px;font:600 14px var(--display)}
.demo-close{position:absolute;top:14px;right:14px;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:10px 16px;font:500 12px var(--mono);transition:transform .16s var(--ease-out)}
.demo-close:active{transform:scale(.97)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .hud-ch,.hud-xy{display:none}
  .hud-logo{font-size:22px}
  .hud-call{font-size:11px;padding:8px 12px 7px}
  .ch0-copy{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .ch0-hint{display:none}
  .depth-big{top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));transform:none}
  .caida-lines{align-content:start;padding-top:calc(90px + env(safe-area-inset-top,0px));gap:18px}
  .works{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .work-t{left:8px;right:8px;bottom:8px;font-size:11px}
  .steps{grid-template-columns:1fr}
  .ch4 .stage{grid-template-columns:1fr;align-content:center;gap:12px}
  .tacho{max-width:280px}
  .who{grid-template-columns:1fr}
  .who p{grid-column:1}
  .demo{width:calc(100vw - 20px);height:calc(100svh - 40px)}
  .demo-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr)}
  .demo-info{padding:22px 20px 28px}
}

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .ch4.stalled .stage{animation:none}
  .demo[open]{animation:none}
}
.rm .placa-end{opacity:1}
.rm .work-t{opacity:1;transform:none}
.rm .plate{display:none}
.rm .ch4 .after{display:block}
.rm .placa-head h2{background:var(--paper);padding:10px 14px;display:inline-block}

/* ---------- Encadenado entre capítulos (main.js, «Encadenado»): del muro de trabajos en adelante, el capítulo nuevo sube
   entero por encima del anterior, que se queda quieto tal cual. Una sombra corta en su borde de arriba lo posa encima
   (de contacto y de ambiente). Solo con movimiento: sin él los capítulos no se solapan ---------- */
html:not(.rm) :is(.ch-caida,.ch3,.ch4,.ch5,.ch6){box-shadow:0 -2px 6px rgba(0,0,0,.16),0 -14px 32px -6px rgba(0,0,0,.28)}
/* el estanque se queda pegado mientras la sala sube por encima (si mide más de una pantalla, se pega por su final) */
html:not(.rm) .ch5{position:sticky;top:min(0px,calc(100svh - var(--ch5-h,100svh)))}
/* la demo de logística no se fija con GSAP: se queda pegada arriba la pantalla en que el motor sube por encima
   (main.js le da a .ch3 dos pantallas de alto y al motor un margen de −1 pantalla) */
.ch3.lg .lg-stage{position:sticky;top:0}
.hud-ch-t{display:inline-block}
.hud-ch-t.is-swap{animation:hud-swap .45s var(--ease-out)}
@keyframes hud-swap{from{opacity:0;transform:translateY(7px)}}

/* ---------- Modo mapa (#mapa o tecla M): pone nombre a cada pieza para poder pedir cambios ---------- */
.mapa [data-mapa]{outline:1.5px dashed #FF00D4;outline-offset:-2px}
.mapa [data-mapa]::after{content:attr(data-mapa);position:absolute;left:0;top:0;z-index:90;background:#FF00D4;color:#000;font:600 11px/1.25 var(--mono);font-style:normal;font-variation-settings:normal;letter-spacing:0;text-transform:none;padding:3px 6px;white-space:nowrap;pointer-events:none}
.mapa :is(.def,.l,.ch3 h2,.steps,.ch4-copy,.board,.flight,.foot,.demo-app,.demo-info){position:relative}
.mapa .phone{position:relative}
.mapa :is(.embarque-head,.pase-cierre,.pase-talon){position:relative}
.mapa .stage[data-mapa]::after,.mapa .ch3[data-mapa]::after{top:calc(64px + env(safe-area-inset-top,0px));left:var(--gutter)}
.mapa .hud [data-mapa]::after{top:auto;bottom:calc(100% + 4px)}
.mapa .hud-clock::after,.mapa .hud-xy::after,.mapa .hud-depth::after{bottom:calc(100% + 4px)}
.mapa .hud-logo::after,.mapa .hud-ch::after,.mapa .hud-call::after{bottom:auto;top:calc(100% + 6px)}
.mapa-aviso{display:none}
.mapa .mapa-aviso{display:block;position:fixed;left:50%;bottom:calc(44px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;background:#FF00D4;color:#000;font:600 11px/1.3 var(--mono);padding:6px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:760px){.mapa .mapa-aviso{white-space:normal;width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:10px}}

/* ---------- Mejoras de la auditoría ---------- */
/* W1 · El testigo: la palabra del cilindro se aplana y cae en la placa */
.testigo{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);opacity:0;visibility:hidden;pointer-events:none}
/* H8 · Sonido */
.hud-sound{top:calc(14px + env(safe-area-inset-top,0px));right:calc(var(--gutter) + 196px);background:none;border:1px dashed currentColor;border-radius:999px;padding:9px 12px 8px;font:400 11px/1.2 var(--mono);letter-spacing:.04em;color:inherit;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)}
.hud-sound span{font-weight:600}
.hud-sound{display:inline-flex;align-items:center;gap:7px}
.hud-sound[aria-pressed="true"]{border-style:solid;background:#fff;color:#000}
.hud-sound:active{transform:scale(.97)}
/* El profundímetro se hace grande en la caída: uno solo, no dos */
.hud-depth{transition:opacity .3s var(--ease-out)}
body[data-ch="2"] .hud-depth{opacity:0}
/* 3.5 · Demo en vivo */
.live{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:1100px;pointer-events:auto}
.live-phone{width:300px;height:600px;border:2px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--ink);box-shadow:0 18px 40px rgba(11,11,12,.25)}
.live-phone iframe{width:100%;height:100%;border:0;background:#fff}
.live-phone video{width:100%;height:100%;object-fit:cover}
.live-t{display:grid;gap:14px;align-content:center;background:var(--acid);padding:8px 0}
.live-t h3{font:800 clamp(30px,3.4vw,52px)/1 var(--display);font-variation-settings:"wdth" 110;letter-spacing:-.03em}
.live-t p{font-size:clamp(16px,1.2vw,19px);max-width:34ch}
.live-out{justify-self:start;background:var(--ink);color:var(--acid);text-decoration:none;padding:12px 18px;border-radius:999px;font:600 14px var(--display)}
/* 4.5 · Arrancar: late en cuanto se cala */
.ch4.stalled .restart,.ch4.waiting:not(.cranking) .restart{animation:latido .7s var(--ease-out) infinite alternate}
@keyframes latido{to{transform:scale(1.06)}}
@media (max-width:760px){
  .hud-sound{top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:7px 10px 6px}
  .hud-sound:active{transform:translateX(-50%) scale(.97)}
  .live{grid-template-columns:1fr}
  .live-phone{width:min(300px,100%);height:540px;justify-self:center}
}
@media (prefers-reduced-motion:reduce){.ch4.stalled .restart,.ch4.waiting .restart{animation:none}}

/* Página más corta: en ordenador la demo en vivo va al lado del titular y «Quién soy» junto al líquido */
@media (min-width:761px){
  .ch3-in{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(32px,5vw,96px);row-gap:clamp(40px,5vw,72px);padding-bottom:110px}
  .ch3-in>h2,.ch3-in>.steps{grid-column:1}
  .ch3-in>.live{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr;align-self:start;gap:18px}
  .live-phone{height:560px}
  .live-t h3{font-size:clamp(24px,2vw,32px)}
  .ch5{display:grid}
  .ch5>.stage,.ch5>.who{grid-area:1 / 1}
  .ch5>.who{position:relative;z-index:2;align-self:center;justify-self:end;display:block;width:min(36vw,520px);max-width:none;padding:0;padding-right:max(20px,env(safe-area-inset-right,0px));margin-right:var(--gutter);pointer-events:none}
  .ch5>.who h3{margin-bottom:18px}
  .ch5>.who p{grid-column:auto;font-size:clamp(18px,1.45vw,23px)}
  .ch5>.who p,.ch5>.who p+p{color:#fff;text-shadow:0 1px 2px rgba(0,16,12,.6),0 2px 18px rgba(0,16,12,.8)}
  .ch5>.who h3{color:#fff;text-shadow:0 1px 6px rgba(0,16,12,.75)}
  /* (2026-11-07) agua más clara: una sombra amplia y difusa detrás del texto (no una caja) para que se lea bien */
  .ch5>.who::before{content:"";position:absolute;inset:-70px calc(-1 * var(--gutter)) -70px -110px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(1,30,36,.62),rgba(1,30,36,.42) 55%,rgba(1,30,36,0))}
}

/* ---------- 3 · La mirilla en neumorfismo: todo es la misma superficie, en relieve o hundido ---------- */
.ch3{--neu:#D9EC6A;--neu-hi:#F7FFB4;--neu-lo:#A9BC3A;--neu-ink:#1C2205;--neu-text:#2E3609;--neu-engrave:#4F5C0F;
  --raised:-10px -10px 24px var(--neu-hi),12px 12px 28px var(--neu-lo);
  --raised-s:-5px -5px 12px var(--neu-hi),6px 6px 14px var(--neu-lo);
  --pressed:inset 8px 8px 16px var(--neu-lo),inset -8px -8px 16px var(--neu-hi);
  background:var(--neu);color:var(--neu-ink)}
.ch3 h2{text-shadow:-2px -2px 2px var(--neu-hi),4px 5px 10px var(--neu-lo)}
.ch3 h2 em{color:var(--neu-engrave);text-shadow:-2px -2px 1px var(--neu-lo),2px 2px 1px var(--neu-hi)}
.steps li{background:var(--neu);border-top:0;border-radius:34px;padding:28px 28px 32px;box-shadow:var(--raised);transition:box-shadow .45s var(--ease-out),transform .45s var(--ease-out)}
.steps li.is-pressed{box-shadow:var(--pressed);transform:scale(.985)}
.steps .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--pressed);font:600 14px var(--mono);margin-bottom:6px}
.steps li.is-pressed .n{box-shadow:var(--raised-s)}
.steps p,.live-t p{color:var(--neu-text)}
.reticle i{border:0;background:var(--neu);box-shadow:var(--raised)}
.reticle i::before,.reticle i::after{background:var(--neu-engrave);opacity:.8}
.reticle i::before{top:18px;bottom:18px;width:2px}
.reticle i::after{left:18px;right:18px;height:2px}
.reticle b.lens{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;box-shadow:var(--pressed)}
.reticle-t{background:var(--neu);color:var(--neu-ink);border-radius:999px;padding:6px 10px;box-shadow:var(--raised-s);font-weight:600}
.reticle.flip .reticle-t{left:auto;right:58px}
.live-phone{border:0;background:var(--neu);padding:12px;border-radius:44px;box-shadow:var(--raised)}
.live-phone iframe,.live-phone video{border-radius:32px}
.live-t{background:transparent}
.live-out{background:var(--neu);color:var(--neu-ink);box-shadow:var(--raised-s);transition:box-shadow .2s var(--ease-out)}
.live-out:active{box-shadow:var(--pressed)}

/* ---------- Polvo que reacciona al ratón (portada, placa y cierre) ---------- */
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---------- 4 · El motor: V8 en sección dibujado con ANATOMY, sobre papel claro ---------- */
.ch4,.ch4.running{background:#f2f2ef;color:var(--ink)}
.ch4 .stage{display:block;padding:0}
.motor-stage{position:absolute;inset:0 0 0 26%;--anatomy-paper:#f2f2ef}
.motor-stage svg,.motor-stage canvas{width:100%;height:100%;display:block}
.ch4-copy{position:absolute;left:var(--gutter);top:calc(110px + env(safe-area-inset-top,0px));z-index:3;width:min(400px,calc(100% - 40px));gap:16px}
.ch4-copy p{font-size:clamp(16px,1.2vw,19px)}
.motor-cap{position:relative;font:500 12px/1.5 var(--mono);text-transform:none;letter-spacing:.02em;padding:9px 12px 9px 26px;border:1px solid rgba(11,11,12,.18);border-radius:10px;background:rgba(242,242,239,.85);min-height:3.2em}
.ch4-copy .motor-cap{font-size:12px}
.motor-cap::before{content:"";position:absolute;left:11px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--signal)}
.ch4.running .before{opacity:.64}
/* (2026-11-07) En portátiles de poca altura (720–800 px) la frase «Le pasa a cualquier negocio…» se salía por abajo y
   la pisaba el capítulo siguiente. Ahora va justo debajo del titular, el titular se mide también por el alto y, si
   falta sitio, se quitan la pista del acelerador y la leyenda de la fase (el carril de fases y la etiqueta junto al
   cursor ya dicen lo mismo) */
@media (min-width:761px){
  .ch4-copy{top:calc(92px + env(safe-area-inset-top,0px));gap:clamp(10px,1.6vh,16px)}
  .stall-title{font-size:clamp(44px,min(7.6vw,10.5vh),128px)}
}
@media (min-width:761px) and (max-height:880px){
  .ch4-copy .gas-hint{display:none}
  .ch4-copy :is(.before,.after){font-size:15px;line-height:1.42}
}
@media (min-width:761px) and (max-height:780px){
  .ch4-copy .motor-cap{display:none}
  .ch4-copy .dash-gauge{width:128px}
}
.ch4.stalled .stage{filter:none;animation:shudder .5s steps(2) 3}
.ch4.stalled .motor-stage{filter:grayscale(1) contrast(1.05)}
.motor-xray{justify-self:start;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(11,11,12,.28);background:transparent;color:var(--ink);padding:9px 14px;border-radius:999px;font:600 12px var(--mono);letter-spacing:.02em;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)}
.motor-xray kbd{font:inherit;opacity:.72;border:1px solid currentColor;border-radius:4px;padding:0 4px;line-height:1.4}
.motor-xray:active{transform:scale(.97)}
.motor-xray[aria-pressed="true"]{background:var(--ink);color:#f2f2ef}
@media (hover:hover) and (pointer:fine){.motor-xray:hover{border-color:var(--ink)}}
.motor-rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:3}
.motor-rail ol{list-style:none;margin:0;padding:6px 4px;display:grid;gap:2px;background:rgba(242,242,239,.88);border-radius:12px}
.motor-rail button{display:block;min-width:44px;padding:5px 0;border:0;background:none;color:var(--ink);font:500 11px var(--mono);opacity:.6;text-align:right;transition:opacity .2s var(--ease-out)}
.motor-rail button span{display:inline-block;padding-right:12px;border-right:2px solid currentColor}
.motor-rail button[aria-current]{opacity:1;color:var(--signal)}
@media (hover:hover) and (pointer:fine){.motor-rail button:hover{opacity:.85}}
@media (max-width:760px){
  .motor-rail{top:auto;transform:none;left:var(--gutter);right:var(--gutter);bottom:calc(50px + env(safe-area-inset-bottom,0px))}
  .motor-rail ol{display:flex;justify-content:space-between;gap:0;padding:0 2px}
  .motor-rail button{min-width:0;padding:8px 2px;text-align:center}
  .motor-rail button span{padding:0 0 4px;border-right:0;border-bottom:2px solid currentColor}
  .motor-xray{padding:7px 12px}
  .motor-xray kbd{display:none}
  .motor-stage{inset:auto 0 calc(92px + env(safe-area-inset-bottom,0px)) 0;height:56%}
  .ch4-copy{top:calc(70px + env(safe-area-inset-top,0px));gap:8px}
  .ch4-copy .before,.ch4-copy .after{font-size:14px}
  .stall-title{font-size:40px}
}
/* 4.12 · Notas sobre el dibujo: punto, línea y nombre de las piezas de cada fase */
.motor-notes{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out)}
.motor-notes.is-on{opacity:1}
.motor-note{position:absolute;left:0;top:0}
.motor-note i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(242,242,239,.9)}
.motor-note b{position:absolute;left:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%}
.motor-note span{position:absolute;left:0;top:0;white-space:nowrap;font:600 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink);background:rgba(242,242,239,.92);border:1px solid rgba(11,11,12,.22);border-radius:999px;padding:5px 9px}
@media (max-width:760px){.motor-note span{font-size:10px;padding:4px 7px}}
/* 4.13 · Cuentavueltas y acelerador */
.motor-dash{display:flex;align-items:center;gap:14px}
.dash-gauge{position:relative;width:150px;flex:none}
.dash-tach{display:block;width:100%;height:auto;overflow:visible}
.dash-ticks line{stroke:var(--ink);stroke-width:1;stroke-linecap:round}
.dash-ticks line.big{stroke-width:2}
.dash-ticks line.red{stroke:var(--signal-paper)}
.dash-ticks text{font:600 11px var(--mono);fill:var(--ink);text-anchor:middle}
.dash-ticks text.unit{font-size:8px;opacity:.75}
.dash-red{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:butt}
.dash-needle{stroke:var(--signal-paper);stroke-width:2.5;stroke-linecap:round}
.dash-hub{fill:var(--ink)}
.dash-tach.is-red .dash-red{animation:redline .12s steps(2) infinite}
@keyframes redline{50%{opacity:.35}}
.dash-read{text-align:center;font:500 10px var(--mono);margin:6px 0 0}
.dash-rpm{font:700 15px var(--mono);font-variant-numeric:tabular-nums}
.dash-controls{display:grid;gap:8px;justify-items:start}
.gas{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);background:var(--ink);color:#f2f2ef;padding:12px 20px;border-radius:999px;font:800 15px var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .12s var(--ease-out)}
.gas kbd{font:600 11px var(--mono);border:1px solid currentColor;border-radius:4px;padding:0 4px;opacity:.8}
.gas-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--signal);transform-origin:0 50%;transform:scaleX(0)}
.gas.is-down{transform:scale(.96)}
.gas[aria-disabled="true"]{background:transparent;color:var(--ink);border-color:rgba(11,11,12,.3)}
.gas-hint{margin:0;font:500 11px/1.4 var(--mono);max-width:26ch}
.ch4-copy .gas-hint{font-size:11px}
@media (max-width:760px){
  .dash-gauge{width:104px}
  .motor-dash{gap:10px}
  .gas{padding:10px 16px;font-size:14px}
  .gas kbd,.gas-hint{display:none}
  .ch4-copy .before{display:none}
  .ch4-copy .motor-cap{font-size:11px}
}
/* 4.5 · La llave: gira mientras el motor de arranque trabaja */
.restart{display:inline-flex;align-items:center;gap:12px}
.restart .key{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .35s var(--ease-out)}
.ch4.cranking .restart .key{transform:rotate(-70deg)}
.ch4.cranking .stage{animation:crankshake .14s steps(2) infinite}
@keyframes crankshake{0%{transform:translate(0,0)}50%{transform:translate(-1.5px,1px)}100%{transform:translate(1px,-1px)}}
.restart:disabled{cursor:progress}
@media (prefers-reduced-motion:reduce){.ch4.cranking .stage{animation:none}}
/* 4.10 · Lo que es cada pieza, junto al cursor */
.motor-tip{position:absolute;left:0;top:0;z-index:4;max-width:260px;pointer-events:none;display:grid;gap:3px;padding:9px 12px;border-radius:10px;background:var(--ink);color:#f2f2ef;font:500 12px/1.4 var(--mono);opacity:0;transition:opacity .18s var(--ease-out)}
.motor-tip b{font:800 13px/1.2 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em;color:#ff8a5c}
.motor-tip.is-on{opacity:1}
/* 4.5 · La llave siempre a mano, con su piloto: rojo que parpadea parado, ámbar rápido al girar, verde en marcha */
.ch4 .restart{visibility:visible}
.dash-controls .restart{padding:12px 20px;font-size:15px}
.restart .led{width:9px;height:9px;flex:none;border-radius:50%;background:#5a1c15;transition:background-color .3s var(--ease-out)}
.ch4.key-call .restart .led{background:#ff2a12;animation:led 1.1s steps(1) infinite}
@keyframes led{0%{opacity:1;box-shadow:0 0 9px 2px rgba(255,42,18,.8)}55%{opacity:.15;box-shadow:none}}
.ch4.cranking .restart .led{background:#ffb020;animation:led .2s steps(1) infinite}
.ch4.running .restart .led{animation:none;background:#2fd36a;box-shadow:0 0 9px 2px rgba(47,211,106,.65)}
@media (prefers-reduced-motion:reduce){.restart .led{animation:none}}
/* H8 · Barritas de sonido: se mueven mientras el sonido está apagado, para que se vea que hay algo que oír */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.eq b{display:block;width:2px;height:100%;background:currentColor;border-radius:1px;transform-origin:50% 100%;animation:eq .9s var(--ease-out) infinite alternate}
.eq b:nth-child(2){animation-delay:-.35s}.eq b:nth-child(3){animation-delay:-.6s}.eq b:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
.sound-on .eq b{animation:none;transform:scaleY(.25)}
/* 4.15 · Activa el sonido (solo mientras está apagado) */
.sound-nudge{justify-self:start;display:inline-flex;align-items:center;gap:12px;border:0;background:var(--signal);color:var(--ink);padding:11px 18px 11px 14px;border-radius:999px;font:500 12px/1.3 var(--mono);text-align:left;box-shadow:0 0 0 0 rgba(255,59,18,.45);animation:nudge 2.4s var(--ease-out) infinite;transition:transform .16s var(--ease-out)}
.sound-nudge strong{display:block;font:800 14px/1.1 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em}
.sound-nudge .eq{height:16px;gap:3px}.sound-nudge .eq b{width:3px}
.sound-nudge:active{transform:scale(.97)}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(255,59,18,.5)}70%,100%{box-shadow:0 0 0 14px rgba(255,59,18,0)}}
.sound-on .sound-nudge{display:none}
/* 4.8 · Rayos X: en naranja, con su icono y un destello que lo recorre */
.motor-xray{position:relative;overflow:hidden;gap:9px;padding:11px 18px;border:2px solid var(--ink);background:#ff8a5c;color:var(--ink);font:800 14px var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em}
.motor-xray .xr-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.motor-xray kbd{font:600 11px var(--mono)}
.motor-xray::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)}
.ch4.is-here .motor-xray::after{animation:sheen 3.6s var(--ease-out) 4} /* cuatro destellos al llegar al capítulo, y quieto */
@keyframes sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.motor-xray[aria-pressed="true"]{background:var(--ink);color:#ff8a5c}
.motor-xray[aria-pressed="true"]::after{animation:none;opacity:0}
@media (max-width:760px){.sound-nudge{padding:9px 14px 9px 12px}.sound-nudge span{font-size:11px}.motor-xray{padding:9px 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.eq b,.sound-nudge,.motor-xray::after{animation:none}}
body:not([data-ch="5"]) .food-cursor{display:none!important}

/* ---------- (2026-11-07) Contacto: el correo en lugar del teléfono ---------- */
/* el botón de arriba a la derecha: «Escríbeme hola@pillado.es»; el del sonido se aparta lo que mida (main.js, --call-w) */
.hud-call i{font-style:normal}
@media (min-width:761px){.hud-sound{right:calc(var(--gutter) + var(--call-w,268px))}}
@media (min-width:761px) and (max-width:1100px),(max-width:420px){.hud-call i{display:none}}
/* «Quién soy» termina con la llamada al formulario */
.who-cta{margin-top:30px;pointer-events:auto}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--signal);color:var(--ink);text-decoration:none;border-radius:999px;padding:16px 24px 15px;
  font:800 17px/1 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 10px 26px rgba(0,16,12,.35);
  transition:transform .16s var(--ease-out),background-color .2s var(--ease-out)}
.cta span{transition:transform .2s var(--ease-out)}
.cta:active{transform:scale(.97)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.has-cursor .cta{cursor:pointer}
@media (hover:hover) and (pointer:fine){.cta:hover{background:#fff}.cta:hover span{transform:translateX(4px)}}
/* ---------- 7 · Tarjeta de embarque (2026-11-07; colocación del 2026-11-08): el formulario, como una tarjeta de embarque.
   En el ordenador, si cabe entera, main.js la lleva a la sala, bajo el panel (.hall.con-pase), y aquí queda solo el pie;
   si no cabe (pantallas bajas) y en el móvil, va aquí, justo después de la sala. Se ve desde el principio, pero cerrada,
   hasta que se dice SÍ ---------- */
.embarque,.pase{--pase:#F2EEE5;--pase-ink:#17120E;--pase-go:#178A4B;--amber:#FFC21A}
.embarque{position:relative;z-index:1;color:#F3F1E7;
  background:radial-gradient(60% 420px at 26% 0,rgba(255,176,112,.07),rgba(255,176,112,0) 70%),linear-gradient(#070503,#120c08 260px,#0d0806)}
.embarque-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:30px clamp(24px,3.5vw,64px);max-width:1600px;margin:0 auto;
  padding:56px max(20px,env(safe-area-inset-right,0px)) calc(64px + env(safe-area-inset-bottom,0px)) var(--gutter)}
.embarque-head{grid-column:2;grid-row:1;align-self:start;margin-top:24px;max-width:34rem}
/* con la tarjeta en la sala, la cabecera queda para los lectores de pantalla y aquí solo va el pie */
.embarque.sin-pase .embarque-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.embarque.sin-pase .embarque-in{padding-top:26px}
.embarque.sin-pase .embarque-pie{grid-row:auto;margin:0}
.embarque-k{margin:0;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--amber)}
.embarque-head h2{margin:14px 0 16px;font:900 clamp(40px,5.2vw,84px)/.88 var(--display);font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.embarque-sub{margin:0;font-size:18px;line-height:1.45;color:#d9cfc4;max-width:36ch}
.embarque-sub a{color:#fff;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.embarque-pie{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:10px 0 0}
.embarque .foot{margin:0;color:#a1958b}
/* 6.7 · Volver a la superficie (2026-11-08): sube a la portada sin recorrer toda la web; la pantalla se funde un momento */
.subir{flex:none;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(243,241,231,.45);border-radius:999px;padding:12px 18px 11px;
  font:500 12.5px/1 var(--mono);letter-spacing:.03em;color:#F3F1E7;text-decoration:none;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)}
.subir span{transition:transform .2s var(--ease-out)}
.subir:active{transform:scale(.97)}
.subir:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.subir:hover{background:#F3F1E7;color:#0B0B0C}.subir:hover span{transform:translateY(-3px)}}
/* el telón de la subida, con la descompresión (easter egg 7) */
.telon{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--paper);color:var(--ink);opacity:0;transition:opacity .26s var(--ease-out)}
.telon.is-on{opacity:1}
.telon p{margin:0;display:grid;justify-items:center;gap:14px;text-align:center;padding:0 24px}
.telon b{font:900 clamp(56px,11vw,140px)/.9 var(--display);font-variation-settings:"wdth" 75;color:var(--signal);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.telon span{font:500 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Easter eggs (2026-11-08) ---------- */
.huevo{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:420;max-width:calc(100vw - 32px);margin:0;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 18px 11px;font:600 13px/1.3 var(--mono);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:opacity .25s var(--ease-out),transform .35s var(--ease-out)}
.huevo.is-on{opacity:1;transform:translate(-50%,0)}
.huevo:empty{display:none}
/* 3 · Konami: todo en gris, el cursor de espera y una ventanita de sistema que no responde */
.colgada{position:fixed;inset:0;z-index:450;display:grid;place-items:center;cursor:wait;background:rgba(228,230,227,.12);-webkit-backdrop-filter:grayscale(1) blur(1px);backdrop-filter:grayscale(1) blur(1px)}
.colgada p{margin:0;display:flex;align-items:center;gap:12px;background:#F4F4F1;color:#0B0B0C;border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:16px 22px;font:600 14px/1.3 var(--mono);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.colgada i{width:18px;height:18px;border-radius:50%;border:3px solid rgba(0,0,0,.15);border-top-color:#0B0B0C;animation:colgada-gira .8s linear infinite}
.colgada.is-fin p{background:var(--signal);color:#fff;border-color:transparent}
.colgada.is-fin i{display:none}
@keyframes colgada-gira{to{transform:rotate(360deg)}}
/* 4 · el logo: la «l» da una vuelta */
.logo-l{display:inline-block;transform-origin:50% 62%}
.logo-l.is-gira{animation:logo-gira .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes logo-gira{to{transform:rotate(360deg)}}
/* 5 · el código de barras se escanea: un láser rojo lo recorre */
.pase-barras{position:relative;cursor:pointer}
.has-cursor .pase .pase-barras{cursor:pointer}
.pase-barras.is-scan::after{content:"";position:absolute;left:-6px;right:-6px;top:0;height:2px;background:#FF2A00;box-shadow:0 0 8px 2px rgba(255,42,0,.6);animation:pase-scan .45s ease-in-out 2 alternate}
@keyframes pase-scan{to{top:calc(100% - 2px)}}
.pase.is-pillado .pase-sello span{color:var(--signal)}
@media (prefers-reduced-motion:reduce){.colgada i,.logo-l.is-gira,.pase-barras.is-scan::after{animation:none}}

/* la tarjeta: cuerpo con los campos y, a la derecha, el talón, separados por la línea de corte (con sus muescas) */
.pase{grid-column:1;grid-row:1;position:relative;align-self:start;min-width:0;container:pase / inline-size;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pase-papel{--talon:186px;--cut:calc(100% - var(--talon));display:grid;grid-template-columns:minmax(0,1fr) var(--talon);grid-template-rows:auto 1fr;
  background:linear-gradient(172deg,#F7F3EB,var(--pase) 55%,#ECE5D8);color:var(--pase-ink);border-radius:14px;overflow:hidden;
  -webkit-mask:radial-gradient(circle 11px at var(--cut) 0,#0000 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 11px at var(--cut) 100%,#0000 97%,#000) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle 11px at var(--cut) 0,#0000 97%,#000) top / 100% 51% no-repeat,radial-gradient(circle 11px at var(--cut) 100%,#0000 97%,#000) bottom / 100% 51% no-repeat}
.pase-banda{grid-column:1 / -1;display:flex;align-items:center;gap:14px;min-width:0;padding:10px 14px 9px 22px;background:var(--signal);color:var(--pase-ink)}
.pase-marca{font:800 22px/1 var(--display);letter-spacing:-.02em}
.pase-tipo{min-width:0;font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pase-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex:none;background:var(--pase-ink);color:#F6F2EA;border-radius:999px;padding:7px 12px 6px 10px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em}
.pase-chip i{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.2);transition:background-color .3s,box-shadow .3s}
.pase.is-locked .pase-chip i{background:var(--amber);box-shadow:0 0 0 3px rgba(255,194,26,.22)}
.pase-cuerpo{position:relative;min-width:0;padding:20px 22px 20px}
.board-col .pase{grid-column:auto;grid-row:auto}
/* los campos (2026-11-08, más compactos para caber bajo el panel): nombre, negocio y correo en una columna y, a su
   lado, el mensaje, del mismo alto que los tres */
.pase-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 16px;min-width:0;margin:0;padding:0;border:0;transition:opacity .6s var(--ease-out),filter .6s var(--ease-out)}
.pase .campo{grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;min-width:0;align-content:start;margin-bottom:11px}
.pase .campo label{grid-column:1;grid-row:1}
.pase .campo :is(input,textarea){grid-column:1 / -1;grid-row:2}
.pase .campo-msg{grid-column:2;grid-row:1 / span 3;grid-template-rows:auto minmax(0,1fr);align-content:stretch}
.pase .campo label{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#6B6258}
.pase .campo :is(input,textarea){width:100%;margin:0;font:500 16px/1.35 var(--display);color:var(--pase-ink);background:rgba(255,255,255,.6);border:0;border-bottom:1.5px solid rgba(23,18,14,.34);border-radius:7px 7px 2px 2px;padding:8px 10px 7px;
  transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out)}
.pase .campo textarea{height:100%;min-height:118px;resize:none}
.pase .campo :is(input,textarea)::placeholder{color:#8a8178}
.pase .campo :is(input,textarea):focus{outline:none;background:#fff;border-bottom-color:var(--pase-ink)}
.pase .campo :is(input,textarea):focus-visible{box-shadow:0 0 0 3px rgba(255,59,18,.32)}
.pase .campo [aria-invalid="true"]{border-bottom-color:var(--signal-paper);background:#FFF5F0}
/* el aviso de cada campo va en la línea de su etiqueta, a la derecha (2026-11-08: así la tarjeta no crece) */
.campo-e{grid-column:2;grid-row:1;align-self:end;margin:0;text-align:right;font:600 11.5px/1.1 var(--display);letter-spacing:0;color:var(--signal-paper)}
.campo-e:empty{display:none}
.pase-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* el pie: «Enviar» y, a su lado, el aviso de privacidad; debajo, cuando lo hay, el estado del envío */
.pase-pie{display:contents}
.pase-enviar{grid-column:1;grid-row:4;justify-self:start;align-self:center;margin-top:3px}
.pase-estado{grid-column:1 / -1;grid-row:5}
.pase-estado:not(:empty){margin-top:10px}
.pase-enviar{display:inline-flex;align-items:center;gap:10px;background:var(--pase-ink);color:#F6F2EA;border:0;border-radius:999px;padding:14px 24px 13px;
  font:800 15px/1 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.03em;transition:transform .16s var(--ease-out),background-color .2s var(--ease-out)}
.pase-enviar span:last-child{transition:transform .2s var(--ease-out)}
.pase-enviar:active{transform:scale(.97)}
.pase-enviar[aria-busy="true"]{opacity:.6;cursor:progress}
.pase-enviar:focus-visible,.pase-subir:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pase-enviar:hover{background:var(--signal-paper)}.pase-enviar:hover span:last-child{transform:translateX(4px)}}
.pase-estado{margin:0;font:500 12.5px/1.45 var(--mono);color:#3d3630}
.pase-estado.is-err{color:var(--signal-paper)}
.pase-estado.is-ok{color:var(--pase-go)}
/* (2026-11-07) primera capa de privacidad bajo el botón, y enlaces legales del pie */
.pase-legal{grid-column:2;grid-row:4;align-self:center;margin:3px 0 0;font:500 11px/1.5 var(--mono);color:#6B6258}
.pase-legal a{color:inherit;text-underline-offset:2px}
.foot a{color:inherit;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.pase-legal a:hover,.foot a:hover{color:var(--signal)}}
/* cerrada: los campos se ven, apagados, y encima de ellos una franja con el candado y el botón que lleva al SÍ. Al
   abrirse (2026-11-08), la franja se queda (así la tarjeta no cambia de alto) y pasa a verde, con el candado abierto.
   Sin JavaScript (sin .con-candado) no hay franja: la tarjeta está abierta */
.pase.is-locked .pase-campos{opacity:.5;filter:grayscale(1)}
.pase:not(.con-candado) .pase-cierre{display:none}
.pase-cierre{--m:20px;margin:calc(var(--m) * -1) -22px 14px}
.pase-cierre-fila{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:42px;padding:6px 10px 6px 22px;background:var(--pase-ink);color:#F6F2EA;transition:background-color .5s var(--ease-out)}
.pase.con-candado:not(.is-locked) .pase-cierre-fila{background:#0F3B24}
.pase .candado-a{display:none}
.pase:not(.is-locked) .candado-c{display:none}
.pase:not(.is-locked) .candado-a{display:inline}
.pase:not(.is-locked) .pase-cierre-t svg{stroke:#3DDC84}
.pase:not(.is-locked) .pase-subir{display:none}
.pase-cierre-t{min-width:0;margin:0;display:inline-flex;align-items:center;gap:9px;font:800 14px/1.15 var(--display);font-variation-settings:"wdth" 100;text-transform:uppercase;letter-spacing:.02em}
.pase-cierre-t svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pase-subir{flex:none;border:0;background:var(--amber);color:#231800;border-radius:999px;padding:10px 15px 9px;font:600 12.5px/1 var(--mono);letter-spacing:.02em;
  transition:transform .16s var(--ease-out),background-color .2s var(--ease-out)}
.pase-subir:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pase-subir:hover{background:#fff}}
/* el talón: datos del vuelo, el nombre según se escribe, el sello (cerrada, abierta, enviada) y el código de barras */
.pase-talon{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto 1fr;gap:12px 10px;min-width:0;padding:20px 16px 18px 18px;
  border-left:2px dashed rgba(23,18,14,.24);background:linear-gradient(#EFE9DE,#E8E1D3)}
.pase-dato{margin:0;display:grid;gap:4px;min-width:0}
.pase-dato-ancho{grid-column:1 / -1}
.pase-dato small{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#5E554C}
.pase-dato b{font:800 15px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pase-dato b.pase-quien{font-size:18px}
.pase-sello{grid-column:1 / -1;margin:4px 0 0;display:flex;justify-content:center}
.pase-sello span{display:inline-block;border:2.5px solid currentColor;border-radius:6px;padding:7px 11px 6px;font:900 16px/1 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.06em;
  color:var(--pase-go);transform:rotate(-9deg);opacity:.88}
.pase.is-locked .pase-sello span{color:var(--signal-paper)}
.pase.is-opening .pase-sello span{animation:pase-sello .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pase-sello{from{transform:rotate(-9deg) scale(1.9);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.88}}
.pase-barras{grid-column:1 / -1;align-self:end;height:44px;opacity:.86;
  background:repeating-linear-gradient(90deg,var(--pase-ink) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,var(--pase-ink) 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,transparent 0 5px,var(--pase-ink) 5px 8px,transparent 8px 13px)}
/* tarjeta estrecha: el talón pasa abajo (y sin muescas); más estrecha aún, los campos en una columna */
@container pase (max-width:560px){
  .pase-papel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;-webkit-mask:none;mask:none}
  .pase-talon{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;align-items:end;gap:12px 14px;padding:16px 22px 18px;border-left:0;border-top:2px dashed rgba(23,18,14,.24)}
  .pase-dato-ancho{grid-column:1 / 4}
  .pase-sello{grid-column:4;grid-row:1;margin:0;justify-content:flex-end}
  .pase-barras{height:30px}
}
@container pase (max-width:430px){
  .pase-campos{grid-template-columns:minmax(0,1fr)}
  .pase .campo,.pase .campo-msg{grid-column:1;grid-row:auto}
  .pase .campo textarea{height:auto;min-height:110px}
  .pase-enviar,.pase-estado,.pase-legal{grid-column:1;grid-row:auto}
  .pase-legal{margin-top:10px}
  .pase-cuerpo{padding:18px 16px 20px}
  .pase-cierre{--m:18px;margin-inline:-16px!important}
  .pase-cierre-fila{padding-left:16px;flex-wrap:wrap}
  .pase-banda{padding-left:16px;gap:10px}
  .pase-tipo{display:none}
  .pase-talon{padding:14px 16px 16px;grid-template-columns:repeat(4,auto);justify-content:space-between}
  .pase-sello{justify-self:end}
}
.has-cursor .pase,.has-cursor .pase *{cursor:auto}
.has-cursor .pase :is(button,a){cursor:pointer}
.has-cursor .pase :is(input,textarea){cursor:text}
.has-cursor .pase fieldset:disabled *{cursor:default}
@media (max-width:900px){
  .embarque-in{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:44px}
  .embarque-head,.pase,.embarque-pie{grid-column:1;grid-row:auto}
  .embarque-head{margin-top:0;align-self:start}
  .embarque-head h2{font-size:clamp(40px,11vw,64px)}
  .embarque-sub{font-size:17px}
  .embarque-in{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))} /* el pie, por encima del botón del sonido */
}
@media (prefers-reduced-motion:reduce){.pase.is-opening .pase-sello span{animation:none}.pase-campos,.pase-cierre,.pase-chip i{transition:none}}
/* mientras la tarjeta cruza el borde de abajo, el reloj, las coordenadas y el profundímetro se apartan (si no, se pisan con ella) */
.hud-clock,.hud-xy{transition:opacity .3s var(--ease-out)}
.pase-bajo :is(.hud-clock,.hud-xy,.hud-depth){opacity:0}

/* ---------- (2026-11-07) La sala: el cartel, los asientos y el pasajero, por delante de la carpintería ---------- */
.hall-people{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:var(--room);transition:opacity 600ms var(--ease-out)}
.hall.is-flying .hall-people{opacity:0}

/* ---------- 6.6 · Simulador a pantalla completa (2026-11-07) ---------- */
.flight-full{position:absolute;right:12px;top:12px;z-index:4;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;background:rgba(20,23,27,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#E7E3D8;padding:7px 10px;font:500 11px/1 var(--mono);letter-spacing:.03em;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s,background-color .2s var(--ease-out),transform .16s var(--ease-out)}
.flight.is-flying .flight-full{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out) .6s,background-color .2s var(--ease-out),transform .16s var(--ease-out)}
.flight-full svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flight-full .ff-out{display:none}
.hall.is-full .flight-full .ff-in{display:none}
.hall.is-full .flight-full .ff-out{display:inline}
.flight-full:active{transform:scale(.96)}
.flight-full:focus-visible{outline:2px solid var(--flap-amber);outline-offset:2px}
.has-cursor .flight-full{cursor:pointer}
@media (hover:hover) and (pointer:fine){.flight-full:hover{background:rgba(20,23,27,.92);color:#fff}}
.flight-hud{right:auto;max-width:calc(100% - 190px)}
@media (max-width:900px){.flight-full .ff-t{display:none}.flight-full{padding:7px}.flight-hud{max-width:calc(100% - 64px)}}
/* en pantalla completa: solo el cielo y los mandos (fuera la sala, el panel, la carpintería y el pie) */
.hall.is-full{position:fixed;inset:0;z-index:200;width:100%;height:100%}
.hall.is-full .hall-sky{clip-path:none!important}
.hall.is-full :is(.hall-room,.hall-front,.hall-people,.hall-dust,.board-col,.board-yes-row,.foot,.flight-frame){display:none}
.hall.is-full .terminal{display:block;padding:0;max-width:none}
/* align-self: el .flight va centrado en la sala (align-self:center), y un absoluto con alineación se encoge a su contenido */
.hall.is-full .flight{position:absolute;inset:0;height:auto;align-self:stretch;justify-self:stretch}
.hall.is-full .flight-view{position:absolute;inset:0;align-self:stretch;justify-self:stretch}
.hall.is-full .flight-hud{left:max(16px,env(safe-area-inset-left,0px));top:max(16px,env(safe-area-inset-top,0px))}
.hall.is-full .flight-full{right:max(16px,env(safe-area-inset-right,0px));top:max(16px,env(safe-area-inset-top,0px))}
.hall.is-full .flight-auto{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 120px)}
.hall.is-full .flight-ctl{top:auto;bottom:max(16px,env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px));right:auto;grid-template-columns:repeat(3,52px);padding:0;background:none;border:0;box-shadow:none}
.hall.is-full .flight-ctl .flight-keys{display:none}
.hall.is-full .yoke{background:rgba(28,20,16,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.has-cursor .hall.is-full .flight-view{cursor:grab}
.has-cursor .hall.is-full .flight-view:active{cursor:grabbing}
.has-cursor .hall.is-full :is(.yoke,.flight-full){cursor:pointer}