/* ============================================================
   Tecnología · ObrumSuite Reformas — tecnologia.reformasobrumsuite.com
   Mismo lenguaje que la web principal: oscuro, cian, Newsreader + Archivo.
   Sin librerías: sólo CSS. La escena 3D (Three.js) vive en escena.js.
   ============================================================ */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-italic.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap}

:root{
  --bg:#070b10; --bg2:#0b1118; --tinta:#F4F6F8; --p2:#CBD2D8; --apagado:#A9B2BA; --suave:#7E8790;
  --cian:#22D3EE; --cian-luz:#67E8F9;
  --linea:rgba(244,246,248,.14); --linea2:rgba(244,246,248,.08); --cristal:rgba(10,16,23,.78);
  --ff-display:'Newsreader',ui-serif,Georgia,'Times New Roman',serif;
  --ff-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --cab:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--tinta);font-family:var(--ff-sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;line-height:1.55;
  background:
    radial-gradient(1100px 680px at 78% -8%,rgba(34,211,238,.11),transparent 62%),
    radial-gradient(900px 620px at -6% 104%,rgba(167,139,250,.09),transparent 58%),var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:99;background:var(--cian);color:#04121a;padding:10px 14px;border-radius:10px;font-weight:600;transition:top .2s}
.saltar:focus{top:12px}
:focus-visible{outline:2px solid var(--cian-luz);outline-offset:3px;border-radius:8px}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}

/* ── cabecera ─────────────────────────────────────────────── */
.cabecera{position:fixed;inset:0 0 auto 0;height:var(--cab);z-index:30;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,4vw,48px);
  background:linear-gradient(180deg,rgba(7,11,16,.88),rgba(7,11,16,0));pointer-events:none}
.cabecera>*{pointer-events:auto}
.marca{display:flex;background:#F5F6F7;border-radius:12px;padding:6px 12px;box-shadow:0 8px 30px -12px rgba(0,0,0,.7)}
.marca img{height:28px;width:auto}
.etiqueta-tec{font:600 .72rem var(--ff-sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--cian-luz);
  border:1px solid rgba(34,211,238,.4);padding:7px 12px;border-radius:999px;background:rgba(34,211,238,.08)}
.cabecera-nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.cabecera-nav a{font:500 .9rem var(--ff-sans);color:var(--p2);text-decoration:none;padding:8px 12px;border-radius:10px;transition:.2s}
.cabecera-nav a:hover{color:var(--tinta);background:rgba(255,255,255,.06)}

/* ── hero 3D ──────────────────────────────────────────────── */
.escena{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
.escena::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px 520px at 50% 52%,rgba(34,211,238,.16),transparent 70%)}
#escena{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none;opacity:0;transition:opacity .9s var(--ease)}
.escena-lista #escena{opacity:1}
.sin-3d #escena,.sin-js #escena{opacity:1}
#escena.arrastrando{cursor:grabbing}
#escena.sobre-app{cursor:pointer}
.escena-texto{position:absolute;z-index:2;left:50%;top:calc(var(--cab) + clamp(8px,3.2vh,40px));width:min(900px,92vw);transform:translateX(-50%);text-align:center;pointer-events:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.sobre{font:600 .74rem var(--ff-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cian-luz);margin-bottom:14px}
.escena-texto h1{font:500 clamp(2rem,min(5.2vw,8.4vh),4.6rem)/1.02 var(--ff-display);letter-spacing:-.022em;text-wrap:balance}
.escena-texto h1 em{font-style:italic;color:var(--cian-luz);display:block}
.entradilla{margin:clamp(8px,2vh,16px) auto 0;font:400 clamp(.88rem,min(1.4vw,2.4vh),1.15rem)/1.5 var(--ff-sans);color:var(--p2);max-width:66ch;text-wrap:balance}
.pista{position:absolute;z-index:2;left:50%;bottom:calc(clamp(16px,4vh,40px) + 88px);transform:translateX(-50%);font:500 .8rem var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--apagado);
  padding:8px 14px;border-radius:999px;background:rgba(7,11,16,.5);backdrop-filter:blur(8px);border:1px solid var(--linea2);pointer-events:none;white-space:nowrap;transition:opacity .6s var(--ease)}
.sin-3d .pista,.sin-js .pista{display:none}
.girar{position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--tinta);background:var(--cristal);border:1px solid var(--linea);backdrop-filter:blur(10px);transition:.25s var(--ease)}
.girar:hover{border-color:var(--cian);background:rgba(34,211,238,.14);transform:scale(1.08)}
.girar-izq{left:clamp(10px,2vw,28px)} .girar-der{right:clamp(10px,2vw,28px)}
.sin-3d .girar,.sin-js .girar{display:none}
.bajar{position:absolute;z-index:3;right:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);display:flex;gap:8px;align-items:center;font:500 .85rem var(--ff-sans);color:var(--apagado);text-decoration:none;
  padding:10px 14px;border-radius:12px;border:1px solid var(--linea2);background:rgba(7,11,16,.5);backdrop-filter:blur(8px);transition:.25s var(--ease)}
.bajar .ico{transform:rotate(90deg)} .bajar:hover{color:var(--tinta);border-color:var(--cian)}

/* dock */
.dock{position:absolute;z-index:3;left:50%;bottom:clamp(16px,4vh,40px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px)}
.dock ul{display:flex;gap:8px;list-style:none;padding:9px;border-radius:24px;background:var(--cristal);border:1px solid var(--linea);backdrop-filter:blur(18px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.dock ul::-webkit-scrollbar{display:none}
.dock li{flex:none}
@media (max-width:1180px){.bajar{display:none}}
@media (min-width:1181px){.dock{max-width:calc(100vw - 500px)}}   /* deja sitio al botón «Todas las aplicaciones» (abajo a la derecha): con 7 apps el dock llegaba a taparlo */
.dock-item{display:flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:17px;text-decoration:none;color:var(--p2);font:600 .88rem var(--ff-sans);border:1px solid transparent;white-space:nowrap;transition:.3s var(--ease)}
.dock-item img{width:38px;height:38px;border-radius:11px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.dock-item:hover,.dock-item.activo{color:var(--tinta);background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-3px)}
.dock-item.activo img{box-shadow:0 0 0 2px var(--c),0 0 22px -2px var(--c)}

/* estado «ficha abierta» (la escena se corre a la izquierda) */
.dock{transition:left .75s var(--ease),max-width .75s var(--ease)}
@media (min-width:901px){ body.ficha-abierta .dock{left:calc((100% - min(560px,46vw)) / 2);max-width:calc(100vw - min(560px,46vw) - 40px)} }
body.ficha-abierta .escena-texto{opacity:0;transform:translate(-50%,-14px);pointer-events:none}
body.ficha-abierta .pista,body.ficha-abierta .bajar{opacity:0;pointer-events:none}
body.ficha-abierta .girar-der{right:calc(min(560px,46vw) + 14px)}
@media (max-width:900px){ body.ficha-abierta .girar{opacity:0;pointer-events:none} body.ficha-abierta .cabecera{opacity:0;pointer-events:none;transition:opacity .4s} }

/* ── ficha (panel lateral / hoja inferior) ───────────────── */
.ficha{position:fixed;z-index:40;top:0;right:0;bottom:0;width:min(560px,46vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(9,14,20,.95),rgba(6,10,15,.98));border-left:1px solid var(--linea);backdrop-filter:blur(24px);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);transform:translateX(104%);visibility:hidden;transition:transform .75s var(--ease),visibility 0s .75s;outline:none}
.ficha.abierta{transform:none;visibility:visible;transition:transform .75s var(--ease),visibility 0s}
.ficha-barra{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;padding:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,16,.95),rgba(7,11,16,0))}
.ficha-barra button{pointer-events:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--tinta);background:rgba(255,255,255,.06);border:1px solid var(--linea);transition:.2s}
.ficha-barra button:hover{background:rgba(34,211,238,.16);border-color:var(--cian)}
.ficha-nav{display:flex;gap:8px}
.ficha-cuerpo{flex:1;overflow:auto;overscroll-behavior:contain;padding:78px clamp(20px,3vw,38px) 30px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.ficha-cta{display:flex;flex-wrap:wrap;gap:10px;padding:14px clamp(16px,3vw,32px);border-top:1px solid var(--linea);background:rgba(6,10,15,.94)}
.ficha-cta .boton{flex:1 1 200px;justify-content:center}
.ficha .app-cta-fila{display:none}
@media (max-width:900px){
  .ficha{top:auto;left:0;width:100%;height:80vh;height:80svh;border-left:0;border-top:1px solid var(--linea);border-radius:24px 24px 0 0;transform:translateY(104%);box-shadow:0 -30px 80px -30px rgba(0,0,0,.9)}
  .ficha-barra{padding:10px 12px}
  .ficha-cuerpo{padding-top:64px}
}

/* ── contenido de una app (ficha y página) ───────────────── */
.app-art{--c:var(--cian);color:var(--tinta)}
.app-cab{display:flex;gap:18px;align-items:center}
.app-logo{width:84px;height:84px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 40px -8px var(--c)}
.app-etq{font:600 .74rem var(--ff-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:6px}
.app-nombre{font:500 clamp(2rem,3.6vw,3rem)/1.04 var(--ff-display);letter-spacing:-.02em}
.app-frase{margin-top:20px;font:italic 500 clamp(1.25rem,2vw,1.6rem)/1.3 var(--ff-display);color:color-mix(in srgb,var(--c) 70%,#fff)}
.app-cta-fila{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.app-nota{margin-top:18px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent);color:var(--p2);font-size:.92rem}
.chip{display:inline-block;font:600 .66rem var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-inline-start:6px;vertical-align:1px}
.chip-estado{color:#04121a;background:var(--c)}
.app-sec{margin-top:34px}
.app-sec h3{font:600 .72rem var(--ff-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--apagado);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--linea2)}
.app-sec>p{color:var(--p2);margin-bottom:12px;font-size:1.02rem;max-width:62ch}
.funciones{list-style:none;display:grid;gap:12px}
.funciones li{display:flex;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--linea2);background:rgba(255,255,255,.025);transition:.3s var(--ease)}
.funciones li:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 7%,transparent);transform:translateX(3px)}
.ico-caja{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.ico-caja .ico{width:22px;height:22px}
.funciones h4,.pasos h4{font:600 1rem var(--ff-sans);margin-bottom:3px}
.funciones p,.pasos p{color:var(--apagado);font-size:.95rem;line-height:1.5}
.pasos{list-style:none;display:grid;gap:14px}
.pasos li{display:flex;gap:16px;align-items:flex-start}
.num{flex:none;font:italic 500 2.4rem/1 var(--ff-display);color:var(--c);width:34px;text-align:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 13px;border-radius:999px;border:1px solid var(--linea);color:var(--p2);font-size:.92rem;background:rgba(255,255,255,.03)}
.datos dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.datos dl>div{padding:14px;border-radius:16px;border:1px solid var(--linea2);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,transparent),transparent)}
.datos dt{font:500 1.7rem/1.1 var(--ff-display);color:var(--tinta)}
.datos dd{margin-top:6px;font-size:.82rem;color:var(--apagado);line-height:1.35}
/* conexiones entre apps («Ligada a», «Conectada con»): la tarjeta lleva el color de la OTRA app (--c2) */
.vinculos-lista{list-style:none;display:grid;gap:12px}
.vinculo{display:grid;gap:7px;padding:16px 18px;border-radius:16px;text-decoration:none;color:var(--p2);border:1px solid color-mix(in srgb,var(--c2) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 13%,transparent),transparent 72%);transition:.28s var(--ease)}
.vinculo:hover,.vinculo:focus-visible{border-color:var(--c2);transform:translateY(-2px);box-shadow:0 18px 40px -26px var(--c2)}
.vinculo-et{font:600 .72rem var(--ff-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--apagado)}
.vinculo-et strong{color:var(--c2);font-weight:700}
.vinculo-tx{font-size:.95rem;line-height:1.55}
.vinculo-ir{display:inline-flex;align-items:center;gap:8px;color:var(--c2);font:600 .9rem var(--ff-sans)}
.vinculo-ir .ico{width:16px;height:16px;transition:transform .28s var(--ease)}
.vinculo:hover .vinculo-ir .ico{transform:translateX(4px)}
.instalar .como{font-size:.88rem;color:var(--suave)}
.instalar .boton{margin-top:6px}

/* botones */
.boton{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.25em;border-radius:14px;font:600 .94rem var(--ff-sans);text-decoration:none;color:var(--tinta);border:1px solid var(--linea);background:rgba(255,255,255,.03);cursor:pointer;transition:.28s var(--ease)}
.boton-prim{background:var(--c,var(--cian));color:#04121a;border-color:transparent}
.boton-prim:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px color-mix(in srgb,var(--c,var(--cian)) 80%,transparent)}
.boton-sec:hover{border-color:var(--c,var(--cian));background:color-mix(in srgb,var(--c,var(--cian)) 13%,transparent);transform:translateY(-2px)}

/* ── catálogo ─────────────────────────────────────────────── */
.catalogo{position:relative;padding:clamp(70px,11vw,150px) clamp(20px,5vw,76px) clamp(70px,9vw,120px)}
.cat-cab{max-width:900px;margin-bottom:clamp(34px,5vw,64px)}
.cat-cab h2{font:500 clamp(2rem,4.6vw,3.8rem)/1.04 var(--ff-display);letter-spacing:-.02em;text-wrap:balance}
.cat-ent{margin-top:16px;color:var(--p2);font-size:1.08rem;max-width:56ch}
.rejilla{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;perspective:1100px}
.rejilla .tarjeta{grid-column:span 2}
.rejilla .tarjeta:nth-child(n+4){grid-column:span 3}
@media (max-width:1100px){.rejilla .tarjeta,.rejilla .tarjeta:nth-child(n+4){grid-column:span 3}.rejilla .tarjeta:last-child:nth-child(odd){grid-column:span 6}}
@media (max-width:700px){.rejilla .tarjeta,.rejilla .tarjeta:nth-child(n+4),.rejilla .tarjeta:last-child:nth-child(odd){grid-column:span 6}}
.tarjeta{--c:var(--cian);--rx:0deg;--ry:0deg;position:relative;padding:24px;border-radius:24px;border:1px solid var(--linea);overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 10%,#0b1118),#0a0f15 60%);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s var(--ease),border-color .3s,box-shadow .4s}
.tarjeta::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 24%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.tarjeta:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 30px 70px -34px var(--c)}
.tarjeta:hover::before{opacity:1}
.tarjeta-cab{position:relative;display:flex;gap:14px;align-items:center;transform:translateZ(26px)}
.tarjeta-cab img{width:64px;height:64px;border-radius:17px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 30px -8px var(--c)}
.tarjeta h3{font:500 1.55rem/1.1 var(--ff-display)}
.tarjeta .etq{font:500 .8rem var(--ff-sans);color:var(--apagado);margin-top:3px}
.tarjeta .chip{display:table;margin:6px 0 0}
.tarjeta-res{position:relative;margin:18px 0 22px;color:var(--p2);font-size:.98rem;transform:translateZ(14px)}
.tarjeta-acc{position:relative;display:flex;flex-wrap:wrap;gap:10px;transform:translateZ(20px)}
.tarjeta-acc .boton{padding:.72em 1.05em;font-size:.88rem}

/* ── pie ──────────────────────────────────────────────────── */
.pie{padding:34px clamp(20px,5vw,76px) 46px;border-top:1px solid var(--linea2);color:var(--suave);font-size:.82rem}
.pie-marcas{max-width:90ch;margin-bottom:14px;line-height:1.5}
.pie a{color:var(--apagado);text-decoration:none} .pie a:hover{color:var(--tinta);text-decoration:underline}

/* ── página de una app ───────────────────────────────────── */
.pagina-app{--c:var(--cian);max-width:1180px;margin:0 auto;padding:calc(var(--cab) + 36px) clamp(20px,5vw,48px) 80px}
.migas{font:500 .82rem var(--ff-sans);color:var(--suave);margin-bottom:26px}
.migas a{color:var(--apagado);text-decoration:none} .migas a:hover{color:var(--tinta)}
.migas span{opacity:.6;margin:0 4px}
.pagina-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;position:relative}
.pagina-logo{display:none}
@media (min-width:1000px){
  .pagina-cuerpo{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
  .pagina-logo{display:block;position:sticky;top:calc(var(--cab) + 30px);perspective:900px}
  .logo3d{width:260px;height:260px;border-radius:56px;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg));transition:transform .2s var(--ease);
    box-shadow:0 40px 90px -40px var(--c),0 0 0 1px rgba(255,255,255,.14)}
  .logo3d img{width:100%;height:100%;border-radius:56px;object-fit:cover}
  .logo3d::after{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 38%,transparent),transparent 65%);filter:blur(22px);animation:respira 5s ease-in-out infinite}
}
@keyframes respira{50%{opacity:.55;transform:scale(1.08)}}
.pagina .app-logo{display:none}
@media (max-width:999px){.pagina .app-logo{display:block}}
.pagina .app-nombre{font-size:clamp(2.4rem,5vw,4rem)}
.vecinas{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:70px}
.vecinas a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;border:1px solid var(--linea);text-decoration:none;transition:.28s var(--ease);background:rgba(255,255,255,.02)}
.vecinas a:last-child{text-align:end}
.vecinas a:hover{border-color:var(--c,var(--cian));background:color-mix(in srgb,var(--c,var(--cian)) 9%,transparent);transform:translateY(-2px)}
.vecinas small{color:var(--apagado);font-size:.78rem} .vecinas strong{font:500 1.25rem var(--ff-display)}
.vecinas .vecinas-todas{justify-content:center;text-align:center;color:var(--apagado);font-size:.9rem}
@media (max-width:640px){.vecinas{grid-template-columns:1fr 1fr}.vecinas .vecinas-todas{grid-column:1/-1;order:3}}

/* ── sin 3D / sin JS: el hero se vuelve una portada con las tarjetas ── */
.sin-3d .escena,.sin-js .escena{height:auto;min-height:0;padding:calc(var(--cab) + 40px) 0 50px}
.sin-3d #escena,.sin-js #escena{display:none}
.sin-3d .escena-texto,.sin-js .escena-texto{position:relative;left:auto;top:auto;transform:none;margin:0 auto 34px}
.sin-3d .dock,.sin-js .dock{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto;max-width:none;padding:0 16px}
.sin-3d .dock ul,.sin-js .dock ul{flex-wrap:wrap;justify-content:center;overflow:visible;background:none;border:0;backdrop-filter:none;box-shadow:none}
.sin-3d .dock-item,.sin-js .dock-item{background:rgba(255,255,255,.04);border-color:var(--linea)}
.sin-3d .bajar,.sin-js .bajar{display:none}

/* ── móvil ───────────────────────────────────────────────── */
@media (max-width:820px){
  :root{--cab:62px}
  .cabecera-nav{display:none}
  .marca img{height:24px}
  .escena-texto h1{font-size:clamp(2rem,9vw,2.8rem)}
  .entradilla{font-size:.95rem;margin-top:12px;max-width:34ch}
  .pista{bottom:calc(clamp(12px,3vh,28px) + 80px);font-size:.68rem;letter-spacing:.1em}
  .dock-item span{display:none} .dock-item{padding:6px} .dock-item.activo span{display:inline;margin-inline-end:8px}
  .bajar{display:none}
  .girar{width:44px;height:44px;margin-top:-22px}
}

/* ── menos movimiento ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   IDIOMAS (6-nov-2026): selector, aviso, escrituras no latinas y RTL (árabe)
   ============================================================ */
/* selector de idioma (cabecera) */
.idiomas{position:relative}
.idiomas summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border-radius:10px;border:1px solid var(--linea);font:600 .8rem var(--ff-sans);letter-spacing:.08em;color:var(--p2);background:var(--cristal);backdrop-filter:blur(12px);transition:.2s}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary:hover,.idiomas[open] summary{color:var(--tinta);border-color:var(--cian)}
.idiomas ul{position:absolute;z-index:40;inset-inline-end:0;top:calc(100% + 8px);min-width:168px;list-style:none;padding:6px;border-radius:14px;background:rgba(10,16,23,.96);border:1px solid var(--linea);backdrop-filter:blur(18px);box-shadow:0 24px 60px -20px rgba(0,0,0,.85)}
.idiomas li a{display:block;padding:9px 12px;border-radius:9px;font:500 .92rem var(--ff-sans);letter-spacing:0;text-decoration:none;color:var(--p2);white-space:nowrap}
.idiomas li a:hover{background:rgba(255,255,255,.07);color:var(--tinta)}
.idiomas li a[aria-current]{color:var(--cian-luz);background:rgba(34,211,238,.1)}
.cabecera-nav .idiomas summary span{min-width:1.6em}
@media (max-width:640px){.cab-web{display:none}.idiomas summary{padding:7px 10px}}
/* aviso de idioma (solo si el navegador pide otro de los 8; se puede cerrar) */
.aviso-idioma{position:fixed;z-index:35;top:calc(var(--cab) + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(680px,calc(100vw - 24px));padding:10px 12px 10px 16px;border-radius:16px;background:rgba(10,16,23,.94);border:1px solid color-mix(in srgb,var(--cian) 45%,transparent);backdrop-filter:blur(16px);box-shadow:0 18px 50px -18px rgba(0,0,0,.85);font:500 .9rem var(--ff-sans);color:var(--p2)}
.aviso-idioma p{margin:0}
.aviso-idioma .boton{padding:.55em 1em;font-size:.86rem;white-space:nowrap}
.aviso-idioma button{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);background:transparent;color:var(--p2);font:600 1.05rem/1 var(--ff-sans);cursor:pointer}
.aviso-idioma button:hover{color:var(--tinta);border-color:var(--cian)}
@media (max-width:640px){.aviso-idioma{flex-wrap:wrap;justify-content:center;text-align:center;top:calc(var(--cab) + 6px)}}
body.ficha-abierta .aviso-idioma{display:none}

/* escrituras no latinas: tipografías del sistema (sin webfonts), sin cursiva sintética y sin espaciado entre letras (rompe el árabe cursivo) */
:lang(ar){--ff-sans:'Archivo','SF Arabic','Geeza Pro','Segoe UI',Tahoma,'Noto Sans Arabic',system-ui,sans-serif;--ff-display:'Geeza Pro','Segoe UI',Tahoma,'Noto Naskh Arabic','Noto Sans Arabic',serif}
:lang(ar),:lang(ar) *{letter-spacing:0!important;text-transform:none!important}
:lang(ar) em,:lang(ar) .app-frase,:lang(ar) .num{font-style:normal}
:lang(ar) body{line-height:1.7}
:lang(zh){--ff-sans:'Archivo','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;--ff-display:'Songti SC','Noto Serif SC','STSong','SimSun',serif}
:lang(zh) em,:lang(zh) .app-frase,:lang(zh) .num{font-style:normal}
:lang(zh) body{line-height:1.75}
:lang(zh) .sobre,:lang(zh) .etiqueta-tec,:lang(zh) .app-etq,:lang(zh) .app-sec h3,:lang(zh) .vinculo-et,:lang(zh) .pista{letter-spacing:.06em}

/* derecha a izquierda (árabe): los textos y los flex se espejan solos; aquí, los gestos que no */
html[dir=rtl] .flecha{transform:scaleX(-1)}
html[dir=rtl] .ficha-ant .ico{transform:none!important}
html[dir=rtl] .ficha-sig .ico{transform:scaleX(-1)!important}
html[dir=rtl] .funciones li:hover{transform:translateX(-3px)}
html[dir=rtl] .vinculo:hover .vinculo-ir .ico{transform:scaleX(-1) translateX(4px)}
html[dir=rtl] .boton:hover .flecha{transform:scaleX(-1)}
html[dir=rtl] .saltar{left:auto;right:12px}

/* con la ficha abierta (escritorio) la cabecera se encoge para que el selector de idioma y el logo no queden tapados por la ficha, que sale por la derecha en todos los idiomas */
@media (min-width:901px){
  .cabecera{transition:padding .75s var(--ease)}
  body.ficha-abierta .cabecera{padding-right:calc(min(560px,46vw) + 24px)}
}