/* Constructor de webs (zona de juegos · 04): capa a pantalla completa, misma familia que la carrera 3D:
   cristal violeta, rótulos mono, botón violeta. Tablero en Three.js; HUD, siguiente pieza y navegador en HTML. */
html.modo-constructor body{overflow:hidden}
.ct{position:fixed;inset:0;z-index:460;background:#04020a;overflow:hidden;font-family:"Inter",system-ui,sans-serif;color:#f3f2f7;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;outline:0;
  --m:var(--mono,"Mono",ui-monospace,monospace);--tit:var(--titular,"Inter Tight","Inter",system-ui,sans-serif);--sv:var(--suave,cubic-bezier(.76,0,.24,1))}
.ct[hidden]{display:none}
.ct-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.ct-velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgb(4 2 10 / .6) 100%),linear-gradient(180deg,rgb(4 2 10 / .5),transparent 18%,transparent 85%,rgb(4 2 10 / .45))}
.ct-velo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 45% 60%,rgb(233 226 255 / .3),rgb(143 99 255 / .14) 40%,transparent 70%);opacity:0;transition:opacity .5s ease-out}
.ct-velo.golpe::after{opacity:1;transition:none}
.ct.fin .ct-velo{background:radial-gradient(120% 90% at 50% 45%,rgb(4 2 10 / .35) 30%,rgb(4 2 10 / .78) 100%)}

/* HUD superior */
.ct-hud{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;z-index:3;
  padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));pointer-events:none}
.ct-marca{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:#bdb3e6;padding-top:15px}
.ct-punto{width:7px;height:7px;border-radius:50%;background:#8f63ff;box-shadow:0 0 0 4px rgb(143 99 255 / .18),0 0 14px #8f63ff}
.ct-reloj{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s var(--sv)}
.ct.jugando .ct-reloj,.ct.fin .ct-reloj{opacity:1;transform:none}
.ct-tiempo{font:500 clamp(30px,4.4vw,46px)/1 var(--m);letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgb(143 99 255 / .55);transition:color .4s}
.ct.apurado .ct-tiempo{color:#ffb3e6;text-shadow:0 0 26px rgb(255 95 190 / .6);animation:ct-late 1s steps(1) infinite}
@keyframes ct-late{50%{opacity:.72}}
.ct-sub{display:flex;gap:14px;font:500 10.5px/1 var(--m);letter-spacing:.18em;text-transform:uppercase;color:#b3aed0;text-shadow:0 1px 8px rgb(4 2 10 / .9)}
.ct-sub i{font-style:normal;color:#c9b8ff}
.ct-vel{color:#c9b8ff}
.ct-botones{display:flex;gap:10px;justify-content:flex-end;pointer-events:auto}
.ct-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#efeaff;padding:0;
  border:1px solid rgb(201 184 255 / .2);background:rgb(22 12 50 / .45);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:background .25s,border-color .25s,transform .25s}
.ct-btn:hover{background:rgb(107 43 255 / .4);border-color:rgb(201 184 255 / .45)}
.ct-btn:active{transform:scale(.94)}
.ct-btn:focus-visible,.ct-go:focus-visible,.ct-cta:focus-visible,.ct-mando:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.ct-son .off{display:none}.ct-son.mudo .off{display:inline}.ct-son.mudo .on{display:none}

/* escena: columnas de datos · tablero (lo pinta WebGL dentro de .ct-zona) · navegador */
.ct-escena{position:absolute;inset:0;display:grid;grid-template-columns:minmax(200px,250px) 1fr clamp(300px,25vw,380px);gap:clamp(16px,2.4vw,40px);
  padding:96px max(28px,env(safe-area-inset-right)) 40px max(28px,env(safe-area-inset-left));pointer-events:none;z-index:2}
.ct-zona{min-width:0;min-height:0}
.ct-datos{align-self:center;display:grid;gap:12px;justify-items:stretch;opacity:.0;transform:translateX(-10px);transition:opacity .6s,transform .6s var(--sv)}
.ct.jugando .ct-datos,.ct.fin .ct-datos{opacity:1;transform:none}
.ct-dato{padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,rgb(40 20 96 / .42),rgb(12 6 32 / .55));border:1px solid rgb(201 184 255 / .16);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07)}
.ct-dato small{display:block;font:500 10.5px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:#a993ff;margin-bottom:10px}
.ct-dato b{display:block;font:500 28px/1 var(--m);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}
.ct-dato-rec b{font-size:18px;color:#c9b8ff}
.ct-pts.hito{animation:ct-hito .55s var(--sv)}
@keyframes ct-hito{30%{color:#c9b8ff;transform:scale(1.08)}}
.ct-sig-c{display:block;width:100%;height:96px}
.ct-sig-n{display:block;margin-top:8px;font:500 12px/1.2 "Inter",sans-serif;color:#cfc6f2;text-align:center}

/* navegador con la landing montándose */
.ct-vista{align-self:center;display:flex;flex-direction:column;height:min(100%,720px);min-height:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgb(30 16 72 / .55),rgb(10 6 28 / .72));border:1px solid rgb(201 184 255 / .2);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 40px 100px -30px rgb(107 43 255 / .5),inset 0 1px 0 rgb(255 255 255 / .09);transition:box-shadow .5s,border-color .5s}
.ct-vista.late{animation:ct-vlate .6s var(--sv)}
@keyframes ct-vlate{30%{border-color:rgb(201 184 255 / .7);box-shadow:0 40px 110px -24px rgb(143 99 255 / .9),inset 0 1px 0 rgb(255 255 255 / .15)}}
.ct-vista.lista{border-color:rgb(201 184 255 / .55);box-shadow:0 0 0 1px rgb(143 99 255 / .4),0 40px 120px -20px rgb(143 99 255 / .9)}
.ct-chrome{display:flex;align-items:center;gap:6px;padding:11px 12px;border-bottom:1px solid rgb(201 184 255 / .12);background:rgb(255 255 255 / .03)}
.ct-chrome>i{width:9px;height:9px;border-radius:50%;background:rgb(201 184 255 / .25)}
.ct-chrome>i:first-child{background:#8f63ff;box-shadow:0 0 8px #8f63ff}
.ct-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;margin:0 6px;height:24px;border-radius:999px;background:rgb(4 2 10 / .45);border:1px solid rgb(201 184 255 / .1);
  font:500 11px/1 var(--m);letter-spacing:.06em;color:#cfc6f2;min-width:0;white-space:nowrap;overflow:hidden}
.ct-url svg{color:#a993ff;flex:none}
.ct-estado{font:500 9.5px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#a993ff;padding:6px 8px;border-radius:999px;border:1px solid rgb(201 184 255 / .22)}
.ct-vista.lista .ct-estado{color:#fff;background:linear-gradient(90deg,#7c4dff,#6b2bff);border-color:transparent;box-shadow:0 0 14px rgb(143 99 255 / .8)}
.ct-pantalla{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(120% 60% at 50% 0%,rgb(107 43 255 / .14),transparent 60%)}
.ct-web{position:absolute;top:10px;left:50%;width:340px;transform-origin:50% 0;transform:translateX(-50%);display:grid;gap:6px}
.ct-vpie{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid rgb(201 184 255 / .12);font:500 10.5px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#b3aed0}
.ct-vpie b{color:#fff;font-weight:500}
.ct-barra{flex:1;height:4px;border-radius:4px;background:rgb(201 184 255 / .14);overflow:hidden}
.ct-barra i{display:block;height:100%;background:linear-gradient(90deg,#6b2bff,#c9b8ff);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--sv);box-shadow:0 0 10px #8f63ff}

/* huecos de sección: esqueleto punteado hasta que se publica */
.ct-slot{position:relative;border-radius:10px}
.ct-slot::before{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;border:1px dashed rgb(201 184 255 / .22);
  font:500 9.5px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:rgb(201 184 255 / .4);background:rgb(201 184 255 / .025);transition:opacity .3s}
.ct-slot .ct-sec{opacity:0;transform:scale(.94);filter:blur(4px)}
.ct-slot.pub::before{opacity:0}
.ct-slot.pub .ct-sec{animation:ct-pub .7s var(--sv) both}
@keyframes ct-pub{0%{opacity:0;transform:scale(.9);filter:blur(6px) brightness(2.2)}45%{opacity:1;filter:blur(0) brightness(1.6);box-shadow:0 0 0 2px #c9b8ff,0 0 30px #8f63ff}100%{opacity:1;transform:none;filter:none}}
.ct-sec{position:relative;border-radius:10px;overflow:hidden;font-family:"Inter",sans-serif;color:#1d1240}
.ct-sec .lg{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 30%,transparent 32%),linear-gradient(135deg,#c9b8ff,#6b2bff)}
/* 1 cabecera */
.s-nav{height:36px;display:flex;align-items:center;gap:10px;padding:0 10px;background:#160d38;color:#e6dfff;font-size:9.5px}
.s-nav b{font:700 11px/1 var(--tit);color:#fff;margin-right:auto}
.s-nav em{font-style:normal;font-weight:600;color:#fff;padding:6px 10px;border-radius:999px;background:linear-gradient(100deg,#8f63ff,#6b2bff)}
/* 2 portada */
.s-hero{height:138px;padding:13px 14px 12px;background:radial-gradient(80% 90% at 85% 10%,rgb(143 99 255 / .55),transparent 60%),linear-gradient(180deg,#1b0f45,#0e0828);color:#fff}
.s-hero small{font:500 8px/1 var(--m);letter-spacing:.18em;text-transform:uppercase;color:#b49cff}
.s-hero h4{margin:7px 0 8px;font:700 19px/1.04 var(--tit);letter-spacing:-.03em;max-width:17ch}
.s-hero h4 em{font-style:normal;background:linear-gradient(100deg,#c9b8ff,#8f63ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.s-hero p{margin:0 0 10px;display:grid;gap:4px}.s-hero p i{display:block;height:5px;border-radius:3px;background:rgb(201 184 255 / .35);width:80%}.s-hero p i+i{width:58%}
.s-hero div{display:flex;gap:6px;font-size:9px;font-weight:600}
.s-hero div em{font-style:normal;padding:6px 12px;border-radius:999px;background:linear-gradient(100deg,#8f63ff,#6b2bff);box-shadow:0 6px 16px -6px #6b2bff}
.s-hero div span{padding:6px 12px;border-radius:999px;border:1px solid rgb(201 184 255 / .4)}
/* 3 foto */
.s-foto{height:92px}.s-foto svg{display:block;width:100%;height:100%}
.s-foto span{position:absolute;left:10px;bottom:8px;font:500 8px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:5px 7px;border-radius:999px;background:rgb(10 4 30 / .45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* 4 servicios */
.s-serv{height:84px;padding:10px 12px;background:#f6f3ff}
.s-serv h5{margin:0 0 8px;font:700 11px/1 var(--tit);color:#1d1240}
.s-serv div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-serv span{display:grid;gap:4px;padding:7px;border-radius:8px;background:#fff;box-shadow:0 4px 12px -6px rgb(76 52 150 / .4)}
.s-serv i{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,#c9b8ff,#6b2bff)}
.s-serv b{height:5px;border-radius:3px;background:#2a1a66;width:80%}.s-serv s{height:4px;border-radius:3px;background:#d6ccff;width:95%}
/* 5 galería */
.s-gal{height:68px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px;background:#0f0a26}
.s-gal i{border-radius:7px;background:linear-gradient(135deg,#6b2bff,#ff8fd8)}
.s-gal i:nth-child(2){background:linear-gradient(135deg,#0fb5c9,#3a2bd6)}.s-gal i:nth-child(3){background:linear-gradient(135deg,#ffb36b,#ff5f9e)}.s-gal i:nth-child(4){background:linear-gradient(135deg,#c9b8ff,#6b2bff)}
/* 6 precios */
.s-precio{height:92px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;background:#ece6ff;align-items:center}
.s-precio span{display:grid;justify-items:center;gap:4px;padding:9px 4px;border-radius:9px;background:#fff;color:#2a1466}
.s-precio small{font:500 7.5px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;color:#7a6aa8}
.s-precio b{font:800 17px/1 var(--tit);letter-spacing:-.03em}
.s-precio i{width:70%;height:12px;border-radius:999px;background:#e6ddff}
.s-precio .top{background:linear-gradient(180deg,#7c4dff,#5a24e0);color:#fff;transform:scale(1.06);box-shadow:0 10px 20px -8px #6b2bff}
.s-precio .top small{color:#e6dfff}.s-precio .top i{background:#fff}
/* 7 formulario */
.s-form{height:88px;display:grid;gap:5px;padding:9px 12px;background:#fbf9ff}
.s-form div{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.s-form i{font:500 8px/1 "Inter",sans-serif;font-style:normal;color:#8a7fb0;padding:6px 7px;border-radius:6px;border:1px solid #cdbfff;background:#fff}
.s-form .txt{height:16px}
.s-form em{justify-self:end;font-style:normal;font-size:8.5px;font-weight:600;color:#fff;padding:5px 12px;border-radius:999px;background:linear-gradient(100deg,#8f63ff,#6b2bff)}
/* 8 pie */
.s-pie{height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;background:#0a0618;color:#b3aed0;border-top:1px solid rgb(201 184 255 / .14)}
.s-pie b{font:700 10px/1 var(--tit);color:#fff}
.s-pie span{display:grid;gap:4px}.s-pie s{display:block;width:34px;height:4px;border-radius:3px;background:rgb(201 184 255 / .3)}
.s-pie small{margin-left:auto;font:500 8px/1 var(--m);letter-spacing:.12em}

/* aviso flotante de sección publicada */
.ct-aviso{position:absolute;left:50%;top:104px;z-index:3;margin:0;transform:translate(-50%,-6px);padding:10px 16px 10px 14px;border-radius:999px;pointer-events:none;
  display:flex;align-items:center;gap:9px;white-space:nowrap;font:500 11px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,rgb(107 43 255 / .7),rgb(143 99 255 / .45));border:1px solid rgb(201 184 255 / .45);box-shadow:0 10px 40px -10px #6b2bff;
  opacity:0;transition:opacity .35s,transform .45s var(--sv)}
.ct-aviso::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.ct-aviso.ve{opacity:1;transform:translate(-50%,0)}

/* pista de teclas */
.ct-pista{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;z-index:3;
  font:500 10.5px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;color:#cfc6f2;padding:9px 16px;border-radius:999px;
  background:rgb(22 12 50 / .45);border:1px solid rgb(201 184 255 / .16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .6s;pointer-events:none}
.ct.jugando .ct-pista{opacity:1}.ct.jugando .ct-pista.fuera{opacity:0}
.ct-pista kbd,.ct-teclas kbd{font:500 10.5px/1 var(--m);letter-spacing:.08em;padding:5px 8px;border-radius:7px;color:#fff;
  border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .06);box-shadow:inset 0 -2px 0 rgb(0 0 0 / .35)}

/* mandos en pantalla (táctil / estrecho) */
.ct-mandos{display:none}
.ct-mando{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:#efeaff;touch-action:none;
  border:1px solid rgb(201 184 255 / .22);background:rgb(22 12 50 / .55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),0 10px 30px -12px rgb(0 0 0 / .8);transition:transform .15s,background .15s}
.ct-mando:active{transform:scale(.92);background:rgb(107 43 255 / .5)}
.ct-mando-go{background:linear-gradient(140deg,#7c4dff,#5a24e0);border-color:rgb(201 184 255 / .4);box-shadow:0 12px 30px -10px rgb(107 43 255 / .95),inset 0 1px 0 rgb(255 255 255 / .25)}

/* paneles de inicio y final */
.ct-panel{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);width:min(calc(100vw - 32px),480px);max-height:calc(100dvh - 110px);overflow:auto;
  padding:clamp(26px,4vw,40px);border-radius:28px;text-align:center;
  background:linear-gradient(180deg,rgb(40 20 96 / .62),rgb(12 6 32 / .74));border:1px solid rgb(201 184 255 / .2);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 40px 120px -30px rgb(107 43 255 / .55),inset 0 1px 0 rgb(255 255 255 / .1);animation:ct-entra .7s var(--sv) both}
.ct-panel[hidden]{display:none}
@keyframes ct-entra{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.ct-eyebrow{font:500 11px/1 var(--m);letter-spacing:.22em;text-transform:uppercase;color:#a993ff;margin:0 0 16px}
.ct-panel h2{font:700 clamp(38px,6vw,54px)/.98 var(--tit);letter-spacing:-.045em;color:#fff;margin:0 0 16px}
.ct-panel h2 em,.ct-titular em{font:inherit;font-style:normal;letter-spacing:inherit;
  background:linear-gradient(100deg,#c9b8ff 0%,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#e9e2ff 85%,#8f63ff 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgb(124 77 255 / .4));animation:ct-estela 7s ease-in-out infinite}
@keyframes ct-estela{50%{background-position:100% 0}}
.ct-texto{color:#c4c0d6;font-size:15px;line-height:1.55;margin:0 auto 22px;max-width:38ch}
.ct-texto b{color:#fff;font-weight:600}
.ct-teclas{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;justify-items:center}
.ct-teclas li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.ct-teclas span{font-size:13.5px;color:#9e99b4;margin:0 8px 0 4px}
.ct-solo-tactil{display:none}
.ct-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ct-go,.ct-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;
  font:600 15px/1 "Inter",sans-serif;cursor:pointer;text-decoration:none;transition:transform .3s var(--sv),box-shadow .3s,background .3s}
.ct-go{border:0;color:#fff;background:linear-gradient(100deg,#7c4dff,#6b2bff 45%,#5a24e0);box-shadow:0 14px 40px -12px rgb(107 43 255 / .95),inset 0 1px 0 rgb(255 255 255 / .25)}
.ct-go:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgb(143 99 255 / 1),inset 0 1px 0 rgb(255 255 255 / .3)}
.ct-go span,.ct-cta span{transition:transform .3s var(--sv)}.ct-go:hover span,.ct-cta:hover span{transform:translateX(3px)}
.ct-cta{color:#fff;border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .04)}
.ct-cta:hover{background:rgb(255 255 255 / .1);transform:translateY(-2px)}
.ct-inicio .ct-go{min-width:200px}
.ct-mejor{margin:18px 0 0;font:500 11px/1.6 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93}
.ct-mejor b{color:#c9b8ff;font-weight:500}
.ct-gran{margin:0 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ct-gran b{font:800 clamp(64px,11vw,96px)/.9 var(--tit);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(143 99 255 / .45))}
.ct-gran small{font:500 11px/1 var(--m);letter-spacing:.22em;text-transform:uppercase;color:#8a8a93}
.ct-nuevo{display:inline-block;margin:10px 0 0;padding:8px 14px;border-radius:999px;font:500 11px/1 var(--m);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,rgb(107 43 255 / .5),rgb(143 99 255 / .3));border:1px solid rgb(201 184 255 / .4)}
.ct-nuevo[hidden]{display:none}
.ct-titular{font:700 clamp(24px,3.4vw,32px)/1.08 var(--tit);letter-spacing:-.035em;color:#fff;margin:20px auto 12px;max-width:18ch;text-wrap:balance}
.ct-fin .ct-texto{margin-bottom:14px}
.ct-resumen{display:flex;justify-content:center;gap:10px;margin:0 0 22px;font:500 11px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93}
.ct-resumen b{color:#c9b8ff;font-weight:500}.ct-resumen span{opacity:.5}
.ct.sin-webgl .ct-inicio .ct-texto::after{content:" (Tu navegador no tiene WebGL activo: el juego no puede arrancar.)";color:#ff9ee0}

/* táctil: mandos visibles y textos de gestos */
@media (pointer:coarse){
  .ct-solo-teclado{display:none}.ct-solo-tactil{display:grid}
  .ct-pista{display:none}
}

/* pantallas estrechas o en vertical: tablero al centro, datos arriba, mandos abajo */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .ct-hud{grid-template-columns:1fr auto;padding-left:16px;padding-right:16px}
  .ct-marca{display:none}
  .ct-reloj{align-items:flex-start;grid-column:1}
  .ct-tiempo{font-size:30px}
  .ct-btn{width:44px;height:44px}
  .ct-escena{grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:10px 10px;
    padding:82px max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .ct-datos{grid-column:1;grid-row:1;align-self:stretch;grid-template-columns:1fr 1fr;gap:8px;transform:none}
  .ct-dato{padding:10px 12px;border-radius:14px}
  .ct-dato small{font-size:9px;margin-bottom:7px}
  .ct-dato b{font-size:19px}
  .ct-dato-rec{display:none}
  .ct-sig{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 8px}
  .ct-sig small{grid-column:1/-1}
  .ct-sig-c{height:44px;width:64px}
  .ct-sig-n{margin:0;text-align:left;font-size:11px;line-height:1.15}
  .ct-zona{grid-column:1/-1;grid-row:2}
  .ct-vista{grid-column:2;grid-row:1;width:78px;height:84px;border-radius:10px;align-self:stretch}
  .ct-chrome{padding:5px 6px;gap:3px}.ct-chrome>i{width:4px;height:4px}
  .ct-url,.ct-estado,.ct-vpie{display:none}
  .ct-web{top:4px}
  .ct-slot::before{font-size:0;border-radius:4px}
  .ct-aviso{top:auto;bottom:calc(104px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:.12em;padding:8px 12px}
  .ct-mandos{display:flex;position:absolute;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));z-index:4;justify-content:center;gap:12px;
    opacity:0;pointer-events:none;transition:opacity .4s}
  .ct.jugando .ct-mandos{opacity:1;pointer-events:auto}
  .ct-pista{display:none}
  .ct-panel{border-radius:24px}
  .ct-texto{font-size:14.5px}
  .ct-acc .ct-go,.ct-acc .ct-cta{flex:1 1 140px}
}
@media (max-width:380px){ .ct-mando{width:52px;height:52px} .ct-mandos{gap:9px} }
@media (prefers-reduced-motion:reduce){
  .ct-panel,.ct-pts.hito,.ct-panel h2 em,.ct-titular em,.ct.apurado .ct-tiempo,.ct-vista.late{animation:none}
  .ct-slot.pub .ct-sec{animation:none;opacity:1;transform:none;filter:none}
  .ct-reloj,.ct-pista,.ct-velo::after,.ct-go,.ct-cta,.ct-btn,.ct-datos,.ct-aviso,.ct-barra i{transition:none}
}