/* Padel Punto de Oro · la web. Los colores y las letras son los del juego: azul de noche, oro del logo, Barlow
   Condensed en cursiva para los títulos e Inter para el texto. */
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(/fuentes/BarlowCondensed-italic-800-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:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(/fuentes/BarlowCondensed-italic-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(/fuentes/BarlowCondensed-italic-700-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:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(/fuentes/BarlowCondensed-italic-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/BarlowCondensed-normal-600-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:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/BarlowCondensed-normal-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/Inter-normal-400-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:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/Inter-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{
  --fondo:#070d17; --fondo2:#0b1424; --fondo3:#101c31;
  --texto:#eef3f8; --suave:#a3b2c7; --tenue:#6c7d95;
  --oro:#fdcd0a; --oro2:#ffe066; --oro-sombra:rgba(253,205,10,.35);
  --azul:#1f56e0; --azul2:#3a7bff;
  --linea:rgba(255,255,255,.09); --panel:rgba(255,255,255,.035);
  --radio:22px; --gutter:clamp(16px,4vw,48px); --ancho:1240px;
  --titulos:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --cuerpo:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cursiva:italic; --mayus:uppercase;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
.idioma-zh{--titulos:"Barlow Condensed","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--cuerpo:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
.idioma-ja{--titulos:"Barlow Condensed","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;--cuerpo:Inter,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
.idioma-ar{--titulos:"Geeza Pro","Segoe UI","Noto Kufi Arabic","Noto Sans Arabic",Tahoma,sans-serif;--cuerpo:"Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;--cursiva:normal}
.idioma-zh,.idioma-ja{--cursiva:normal}
.idioma-ja{word-break:auto-phrase}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--fondo);overflow-x:clip}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 17px/1.6 var(--cuerpo);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:6px}
.contenedor{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto}
.oro{color:var(--oro);font-style:inherit}
.saltar{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--oro);color:#111;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}

/* ------------------------------------------------ títulos */
.titulo{font:var(--cursiva) 800 clamp(44px,7vw,92px)/.92 var(--titulos);text-transform:var(--mayus);letter-spacing:-.01em;margin:0 0 .25em;text-wrap:balance}
.titulo.sin-entrada{margin-bottom:clamp(24px,3.5vw,44px)}
.titulo.grande{font-size:clamp(56px,11vw,150px)}
.entrada{color:var(--suave);font-size:clamp(17px,1.6vw,20px);max-width:52ch;margin:0 0 clamp(28px,4vw,48px)}
.idioma-ar .titulo,.idioma-zh .titulo,.idioma-ja .titulo{line-height:1.15;letter-spacing:0}

/* ------------------------------------------------ botones */
.boton{display:inline-flex;align-items:center;gap:.6em;padding:16px 28px 16px 22px;border-radius:999px;font:var(--cursiva) 800 20px/1 var(--titulos);text-transform:var(--mayus);letter-spacing:.03em;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.boton svg{width:22px;height:22px;fill:currentColor}
.boton-oro{background:var(--oro);color:#0a0f18;box-shadow:0 10px 40px -10px var(--oro-sombra),inset 0 -3px 0 rgba(0,0,0,.15)}
.boton-oro:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 50px -10px var(--oro-sombra),inset 0 -3px 0 rgba(0,0,0,.15);background:var(--oro2)}

/* ------------------------------------------------ barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:24px;padding:14px var(--gutter);padding-top:max(14px,env(safe-area-inset-top));transition:background .35s,backdrop-filter .35s,box-shadow .35s,padding .35s}
.barra.solida{background:rgba(7,13,23,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--linea)}
.barra-logo img{height:30px;width:auto;transition:opacity .35s,transform .35s var(--ease)}
.barra:not(.solida) .barra-logo img{opacity:0;transform:translateY(-6px)}
.barra-nav{display:flex;gap:30px;margin-inline-start:auto}
.barra-nav a{font:600 17px/1 var(--titulos);text-transform:var(--mayus);letter-spacing:.08em;text-decoration:none;color:var(--suave);transition:color .2s;position:relative}
.barra-nav a::after{content:"";position:absolute;inset:auto 0 -6px;height:2px;background:var(--oro);transform:scaleX(0);transition:transform .3s var(--ease)}
.barra-nav a:hover{color:var(--texto)}
.barra-nav a:hover::after{transform:scaleX(1)}
.idiomas{position:relative;margin-inline-start:auto}
.barra-nav+.idiomas{margin-inline-start:0}
.idiomas-boton{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--linea);border-radius:999px;padding:9px 14px;cursor:pointer;font:600 15px/1 var(--titulos);letter-spacing:.08em;transition:background .2s}
.idiomas-boton:hover{background:rgba(255,255,255,.12)}
.idiomas-boton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.idiomas-lista{position:absolute;inset-inline-end:0;top:calc(100% + 10px);list-style:none;margin:0;padding:8px;min-width:220px;background:rgba(14,23,40,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--linea);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);display:grid;grid-template-columns:1fr 1fr;gap:2px}
.idiomas-lista[hidden]{display:none}
.idiomas-lista a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:15px;color:var(--suave);font-family:system-ui,sans-serif}
.idiomas-lista a:hover{background:rgba(255,255,255,.07);color:var(--texto)}
.idiomas-lista a[aria-current]{color:var(--oro);background:rgba(253,205,10,.08)}

/* ------------------------------------------------ portada */
.heroe{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:110px var(--gutter) 120px}
.heroe-fondo{position:absolute;inset:-4%;z-index:-2;will-change:transform}
.heroe-fondo img,.heroe-fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroe-video{opacity:0;transition:opacity 1.2s ease}
.heroe-video.lista{opacity:1}
.heroe-velo{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 60% 55% at 50% 45%,rgba(7,13,23,.45) 0%,rgba(7,13,23,.25) 60%,rgba(7,13,23,.55) 100%),
  linear-gradient(180deg,rgba(7,13,23,.55) 0%,rgba(7,13,23,0) 25%,rgba(7,13,23,0) 60%,var(--fondo) 100%)}
.heroe-contenido{text-align:center;max-width:900px;display:flex;flex-direction:column;align-items:center}
.lema{display:inline-block;margin:0 0 clamp(26px,4.2vh,46px);padding:7px 16px 6px;background:var(--oro);color:#0a0f18;font:var(--cursiva) 800 15px/1 var(--titulos);text-transform:var(--mayus);letter-spacing:.14em;border-radius:6px;transform:skewX(-8deg)}
.idioma-ar .lema,.idioma-zh .lema,.idioma-ja .lema{transform:none;letter-spacing:.04em}
.heroe-logo{margin:0;width:min(560px,80vw,46vh)}
.heroe-plataformas .plat-prox{display:none}
.heroe-logo img{width:100%;height:auto;filter:drop-shadow(0 20px 60px rgba(0,0,0,.55))}
.eslogan{margin:18px 0 8px;font:var(--cursiva) 800 clamp(34px,5.4vw,64px)/1 var(--titulos);text-transform:var(--mayus);text-shadow:0 6px 30px rgba(0,0,0,.6)}
.heroe-texto{margin:0 0 30px;max-width:46ch;color:#d5deea;font-size:clamp(16px,1.5vw,19px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.heroe-acciones{margin-top:clamp(38px,6.5vh,70px)}
.heroe-plataformas{margin-top:clamp(34px,5.5vh,60px)}
.heroe-plataformas p{margin:0 0 16px;color:var(--suave);font:600 14px/1 var(--titulos);text-transform:var(--mayus);letter-spacing:.2em}
.heroe-plataformas ul,.plataformas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* una plataforma: icono, nombre y «próximamente» */
.plat{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:rgba(10,18,32,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;text-align:start}
.plat-icono{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.08)}
.plat-icono svg{width:21px;height:21px;fill:currentColor}
.plat-texto{display:flex;flex-direction:column;line-height:1.1}
.plat-texto b{white-space:nowrap;font:var(--cursiva) 800 20px/1.05 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:var(--mayus);letter-spacing:.02em}
.plat-texto small{color:var(--suave);font-size:12.5px}
.plat-prox{margin-inline-start:6px;padding:5px 9px 4px;border-radius:6px;background:rgba(253,205,10,.14);color:var(--oro);font:700 11.5px/1 var(--cuerpo);text-transform:var(--mayus);letter-spacing:.1em;white-space:nowrap}
.plat.grande{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 26px 24px;min-width:230px;flex:1 1 230px;max-width:320px;border-radius:24px;transition:transform .4s var(--ease),border-color .4s,background .4s}
.plat.grande:hover{transform:translateY(-6px);border-color:rgba(253,205,10,.5);background:rgba(16,28,49,.7)}
.plat.grande .plat-icono{width:76px;height:76px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.plat.grande .plat-icono svg{width:40px;height:40px}
.plat.grande .plat-texto{align-items:center;gap:4px}
.plat.grande .plat-texto b{font-size:30px}
.plat.grande .plat-texto small{font-size:14px}
.plat.grande .plat-prox{margin:4px 0 0;font-size:12.5px;padding:7px 12px 6px}

/* la bola que bota: «baja» */
.bajar{position:absolute;bottom:28px;left:50%;translate:-50% 0;width:40px;height:64px;display:block}
.bajar::after{content:"";position:absolute;bottom:0;left:50%;translate:-50% 0;width:22px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);animation:sombra 1.1s cubic-bezier(.5,0,.5,1) infinite alternate}
.bola{position:absolute;left:50%;top:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c0,#e9f25a 35%,#c6d82a 70%,#9db31c);box-shadow:0 0 18px rgba(233,242,90,.45);animation:bote 1.1s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes bote{to{transform:translateY(38px)}}
@keyframes sombra{from{transform:scale(.45);opacity:.3}to{transform:scale(1);opacity:.8}}

/* ------------------------------------------------ marquesina */
.marquesina{position:relative;padding:26px 0;background:var(--fondo);overflow:hidden;border-block:1px solid var(--linea);transform:rotate(-2deg) scale(1.04);margin:10px 0 40px}
.marquesina-pista{display:flex;gap:42px;width:max-content;align-items:center;animation:pasar 38s linear infinite;white-space:nowrap}
.marquesina-pista.inversa{animation-direction:reverse;margin-top:6px}
.marquesina span{font:var(--cursiva) 800 clamp(46px,7vw,96px)/1.05 var(--titulos);text-transform:var(--mayus)}
.marquesina-pista.inversa span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}
.marquesina-pista.inversa span .oro{-webkit-text-stroke:1.5px var(--oro);color:transparent}
/* la bola de oro del logo: bota en su sitio y rueda en el sentido en que corre la cinta (la de arriba va a la izquierda) */
.bola-oro{position:relative;flex:none;width:clamp(30px,3.6vw,48px);aspect-ratio:1;animation:botar-oro 1.05s infinite}
.bola-oro svg{display:block;width:100%;height:100%;animation:rodar 1.6s linear infinite;filter:drop-shadow(0 0 14px var(--oro-sombra))}
.bola-oro circle{fill:var(--oro)}
.bola-oro path{fill:none;stroke:var(--fondo);stroke-width:10}
.bola-oro::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),radial-gradient(circle at 72% 80%,rgba(110,62,0,.38),rgba(110,62,0,0) 58%)}
.marquesina-pista .bola-oro:nth-of-type(3n+2){animation-delay:-.35s}
.marquesina-pista .bola-oro:nth-of-type(3n){animation-delay:-.7s}
.marquesina-pista.inversa .bola-oro svg{animation-direction:reverse}
[dir=rtl] .marquesina-pista .bola-oro svg{animation-direction:reverse}
[dir=rtl] .marquesina-pista.inversa .bola-oro svg{animation-direction:normal}
@keyframes rodar{to{transform:rotate(-1turn)}}
@keyframes botar-oro{
  0%,100%{transform:translateY(-38%);animation-timing-function:cubic-bezier(.4,0,.9,.6)}
  46%{transform:translateY(22%) scale(1,1);animation-timing-function:linear}
  50%{transform:translateY(26%) scale(1.12,.86)}
  54%{transform:translateY(22%) scale(1,1);animation-timing-function:cubic-bezier(.1,.4,.6,1)}
}
@keyframes pasar{to{transform:translateX(-50%)}}
[dir=rtl] .marquesina-pista{animation-name:pasar-rtl}
@keyframes pasar-rtl{to{transform:translateX(50%)}}

/* ------------------------------------------------ cifras */
.cifras{padding:30px var(--gutter) 60px}
.cifras ul{list-style:none;margin:0 auto;padding:0;max-width:var(--ancho);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cifras li{text-align:center;padding:26px 10px;border-radius:var(--radio);background:linear-gradient(180deg,var(--panel),transparent);border:1px solid var(--linea)}
.cifras b{display:block;font:var(--cursiva) 800 clamp(64px,9vw,128px)/.9 "Barlow Condensed",sans-serif;color:var(--oro);text-shadow:0 0 50px rgba(253,205,10,.25);font-variant-numeric:tabular-nums}
.cifras span{display:block;margin-top:8px;color:var(--suave);font:600 clamp(15px,1.5vw,19px)/1.2 var(--titulos);text-transform:var(--mayus);letter-spacing:.12em}

/* ------------------------------------------------ el juego */
.juego{padding:clamp(60px,8vw,110px) 0}
.destacados{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.destacado{position:relative;min-height:520px;border-radius:var(--radio);overflow:hidden;display:flex;align-items:flex-end;isolation:isolate;border:1px solid var(--linea)}
.destacado-img,.destacado .sin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.destacado:hover .destacado-img{transform:scale(1.05)}
.destacado::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,13,23,0) 30%,rgba(7,13,23,.85) 75%,rgba(7,13,23,.95))}
.destacado-texto{padding:clamp(22px,3vw,36px)}
.destacado h3,.rasgo h3{margin:14px 0 8px;font:var(--cursiva) 800 clamp(30px,3.2vw,42px)/1 var(--titulos);text-transform:var(--mayus)}
.destacado p,.rasgo p{margin:0;color:var(--suave);max-width:46ch}
.rasgos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rasgo{padding:28px 24px;border-radius:var(--radio);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--linea);transition:transform .4s var(--ease),border-color .4s}
.rasgo:hover{transform:translateY(-4px);border-color:rgba(253,205,10,.35)}
.rasgo h3{font-size:clamp(25px,2.2vw,30px)}
.rasgo p{font-size:15.5px}
.rasgo-icono{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:rgba(253,205,10,.12);color:var(--oro)}
.rasgo-icono svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sin-img{background:linear-gradient(135deg,#13254a,#0b1424)}

/* ------------------------------------------------ pistas */
.pistas{padding:clamp(60px,8vw,110px) 0}
.pistas-cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.pistas-flechas{display:flex;gap:10px;margin-bottom:clamp(28px,4vw,48px)}
.flecha{width:54px;height:54px;border-radius:50%;border:1px solid var(--linea);background:var(--panel);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.flecha:hover{background:var(--oro);color:#0a0f18;border-color:var(--oro)}
.flecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flecha.atras svg,[dir=rtl] .flecha:not(.atras) svg{transform:scaleX(-1)}
[dir=rtl] .flecha.atras svg{transform:none}
.carrusel{list-style:none;margin:0;padding:6px max(var(--gutter),(100% - var(--ancho))/2) 30px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),(100% - var(--ancho))/2);scrollbar-width:none;cursor:grab}
.carrusel::-webkit-scrollbar{display:none}
.carrusel.arrastrando{cursor:grabbing;scroll-snap-type:none}
.carrusel.arrastrando *{pointer-events:none}
.pista{flex:0 0 clamp(270px,30vw,400px);aspect-ratio:4/5;position:relative;border-radius:var(--radio);overflow:hidden;scroll-snap-align:start;isolation:isolate;border:1px solid var(--linea);display:flex;align-items:flex-end;user-select:none}
.pista-img,.pista .sin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.pista:hover .pista-img{transform:scale(1.06)}
.pista::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,13,23,0) 40%,rgba(7,13,23,.9) 88%)}
.pista-texto{padding:24px}
.pista-num{font:var(--cursiva) 800 16px/1 "Barlow Condensed",sans-serif;color:var(--oro);letter-spacing:.1em}
.pista h3{margin:6px 0 6px;font:var(--cursiva) 800 34px/1 var(--titulos);text-transform:var(--mayus)}
.pista p{margin:0;color:#c9d4e2;font-size:15px;line-height:1.45}

/* ------------------------------------------------ bloques de texto + pantalla del juego */
.eti{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--oro);font:700 14px/1 var(--titulos);text-transform:var(--mayus);letter-spacing:.2em}
.eti::before{content:"";width:28px;height:2px;background:var(--oro);border-radius:2px}
.jugar,.modos,.golpes,.tu-jugador{padding:clamp(70px,9vw,130px) 0}
.bloque{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center}
.bloque+.bloque{margin-top:clamp(80px,10vw,150px)}
.bloque>.pantalla:first-child{order:0}
.bloque:has(>.pantalla:first-child){grid-template-columns:1.2fr 1fr}
.bloque-texto .entrada{margin-bottom:28px}
.pantalla{margin:0;position:relative;border-radius:clamp(12px,1.4vw,20px);overflow:hidden;background:#05080e;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px -30px rgba(0,0,0,.85),0 0 80px -30px rgba(253,205,10,.18);
  transform:perspective(1600px) rotateY(var(--giroY,-7deg)) rotateX(2deg);transition:transform .9s var(--ease)}
.bloque>.pantalla:first-child{--giroY:7deg}
.pantalla:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.pantalla::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 35%);pointer-events:none}
.pantalla-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
[dir=rtl] .pantalla{--giroY:7deg}
[dir=rtl] .bloque>.pantalla:first-child{--giroY:-7deg}
.js .pantalla.revelar{opacity:0;transform:perspective(1600px) rotateY(var(--giroY,-7deg)) translateY(40px)}
.js .pantalla.revelar.visto{opacity:1;transform:perspective(1600px) rotateY(var(--giroY,-7deg)) rotateX(2deg)}
.js .pantalla.revelar.visto:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}

/* los mandos J1–J4 y las formas de jugar */
.mandos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.mandos span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font:var(--cursiva) 800 18px/1 "Barlow Condensed",sans-serif}
.mandos svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.formas,.niveles,.perfiles,.atributos{list-style:none;margin:0;padding:0}
.formas{display:grid;gap:12px}
.formas li{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;padding:14px 18px 14px 14px;border-radius:18px;background:var(--panel);border:1px solid var(--linea)}
.formas h3,.niveles h3{margin:0 0 2px;font:var(--cursiva) 800 22px/1.1 var(--titulos);text-transform:var(--mayus)}
.formas p,.niveles p{margin:0;color:var(--suave);font-size:15px;line-height:1.45}
.pistita{width:64px;height:64px}
.pistita rect{fill:rgba(31,86,224,.35);stroke:rgba(255,255,255,.4);stroke-width:2}
.pistita path{stroke:rgba(255,255,255,.4);stroke-width:1.5;fill:none}
.pistita text{font:800 8.5px/1 "Barlow Condensed",sans-serif;text-anchor:middle;fill:#0a0f18}
.pistita .ia circle{fill:#3b475a;stroke:rgba(255,255,255,.35);stroke-width:1}
.pistita .ia text{fill:#d4dceb}

/* las dificultades de la IA: cuatro barras, como en el juego */
.niveles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.niveles li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:18px;background:var(--panel);border:1px solid var(--linea);transition:border-color .3s,background .3s}
.niveles li:hover{border-color:rgba(253,205,10,.4);background:rgba(253,205,10,.05)}
.nivel-barras{display:flex;align-items:flex-end;gap:3px;height:26px;flex:none;margin-top:2px}
.nivel-barras i{width:6px;border-radius:2px;background:rgba(255,255,255,.14)}
.nivel-barras i:nth-child(1){height:30%}.nivel-barras i:nth-child(2){height:55%}.nivel-barras i:nth-child(3){height:78%}.nivel-barras i:nth-child(4){height:100%}
.nivel-barras i.on{background:var(--oro);box-shadow:0 0 10px rgba(253,205,10,.4)}
.niveles li:last-child h3{color:var(--oro)}

/* ------------------------------------------------ modos de juego */
.modos-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.modo{border-radius:var(--radio);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--linea);display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s}
.modo:hover{transform:translateY(-6px);border-color:rgba(253,205,10,.4)}
.modo-img{margin:0;overflow:hidden;aspect-ratio:16/10;position:relative}
.modo-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.modo:hover .modo-img img{transform:scale(1.05)}
.modo-img::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(9,16,28,.9))}
.modo-texto{padding:0 26px 28px;margin-top:-26px;position:relative}
.modo-sub{margin:14px 0 2px;color:var(--oro);font:700 13.5px/1.2 var(--titulos);text-transform:var(--mayus);letter-spacing:.14em}
.modo h3{margin:0 0 10px;font:var(--cursiva) 800 clamp(32px,3vw,40px)/1 var(--titulos);text-transform:var(--mayus)}
.modo p:last-child{margin:0;color:var(--suave);font-size:15.5px}
.modo .rasgo-icono{background:var(--oro);color:#0a0f18;box-shadow:0 10px 30px -8px var(--oro-sombra)}

/* ------------------------------------------------ golpes: la vitrina */
.vitrina{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:stretch}
.vitrina-fotos{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:16/10;background:#05080e;box-shadow:0 0 0 1px var(--linea),0 40px 100px -40px rgba(0,0,0,.9)}
.vitrina-foto{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.vitrina-foto img,.vitrina-foto .sin-img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.vitrina-foto.activa{opacity:1}
.vitrina-foto.activa img{animation:acerca 6s ease-out both}
@keyframes acerca{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.vitrina-fotos::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 55%,rgba(7,13,23,.55))}
.vitrina-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vitrina-lista button{position:relative;width:100%;display:flex;gap:14px;align-items:flex-start;text-align:start;padding:14px 18px;border-radius:16px;border:1px solid transparent;background:transparent;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s}
.vitrina-lista button:hover{background:var(--panel)}
.vitrina-lista button[aria-selected=true]{background:rgba(253,205,10,.06);border-color:rgba(253,205,10,.35)}
.vitrina-num{font:var(--cursiva) 800 16px/1.6 "Barlow Condensed",sans-serif;color:var(--tenue)}
.vitrina-lista button[aria-selected=true] .vitrina-num{color:var(--oro)}
.vitrina-txt{display:flex;flex-direction:column;gap:4px}
.vitrina-txt b{font:var(--cursiva) 800 24px/1.1 var(--titulos);text-transform:var(--mayus);color:var(--suave);transition:color .3s}
.vitrina-lista button[aria-selected=true] .vitrina-txt b{color:var(--texto)}
.vitrina-txt small{font-size:14.5px;line-height:1.45;color:var(--suave);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.vitrina-lista button[aria-selected=true] .vitrina-txt small{max-height:5em;opacity:1}
.vitrina-progreso{position:absolute;inset:auto 0 0 0;height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left}
[dir=rtl] .vitrina-progreso{transform-origin:right}
.vitrina-lista button.corriendo .vitrina-progreso{animation:progreso var(--dur,5s) linear forwards}
@keyframes progreso{to{transform:scaleX(1)}}
.golpes-mas{margin:26px 0 0;color:var(--suave);font-size:16px}

/* ------------------------------------------------ jugadores, palas y ropa */
.perfiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.perfiles li{padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--linea)}
.perfiles b{display:block;font:var(--cursiva) 800 22px/1.1 "Barlow Condensed",var(--titulos);text-transform:var(--mayus);color:var(--oro)}
.perfiles span{display:block;margin-top:3px;color:var(--suave);font-size:14.5px;line-height:1.4}
.nota{display:flex;gap:12px;align-items:center;margin:0;color:var(--texto);font-size:15.5px}
.nota svg{flex:none;width:30px;height:30px;padding:6px;border-radius:10px;background:rgba(253,205,10,.12);color:var(--oro);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.atributos{display:grid;gap:12px;max-width:460px}
.atributos li{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:16px;align-items:center}
.atributos span{font:600 15px/1.2 var(--titulos);text-transform:var(--mayus);letter-spacing:.08em;color:var(--suave)}
.atributos i{height:8px;border-radius:8px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.atributos i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#c99a00,var(--oro));transform:scaleX(var(--v));transform-origin:left;transition:transform 1.4s var(--ease) .2s}
[dir=rtl] .atributos i::after{transform-origin:right}
.js .atributos:not(.visto) i::after{transform:scaleX(0)}
.paleta{display:flex;flex-wrap:wrap;gap:10px;max-width:420px}
.paleta i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 14px -6px rgba(0,0,0,.8);transition:transform .25s var(--ease)}
.paleta i:hover{transform:scale(1.2)}

/* ------------------------------------------------ cierre: plataformas */
.cierre{position:relative;padding:clamp(90px,13vw,170px) 0 clamp(90px,11vw,140px);overflow:hidden;isolation:isolate;text-align:center}
.cierre-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cierre-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--fondo) 0%,rgba(7,13,23,.7) 30%,rgba(7,13,23,.78) 70%,var(--fondo) 100%),radial-gradient(ellipse at 50% 40%,rgba(253,205,10,.14),transparent 60%)}
.cierre-contenido{display:flex;flex-direction:column;align-items:center}
.cierre-logo{width:min(260px,52vw);height:auto;margin-bottom:28px}
.cierre .entrada{margin-inline:auto}
.plataformas{gap:18px;width:100%}

/* ------------------------------------------------ pie */
.pie{padding:56px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);background:#050a12}
.pie .contenedor{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.pie-logo{height:34px;width:auto}
.pie-idiomas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.pie-idiomas a{color:var(--tenue);text-decoration:none;font-size:14px;font-family:system-ui,sans-serif}
.pie-idiomas a:hover,.pie-idiomas a[aria-current]{color:var(--oro)}
.pie-legal{margin:0;color:var(--tenue);font-size:13.5px}

/* ------------------------------------------------ 404 */
.pagina-404{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#13254a,var(--fondo) 70%)}
.nada{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center}
.nada img{width:min(340px,70vw);height:auto}
.nada .titulo{color:var(--oro);margin:16px 0 18px}

/* ------------------------------------------------ al aparecer */
.js .revelar{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .revelar.visto{opacity:1;transform:none}
.js .heroe-contenido>*{animation:entra 1.1s var(--ease) both}
.js .heroe-contenido>:nth-child(2){animation-delay:.12s;animation-name:entra-logo;animation-duration:1.4s}
.js .heroe-contenido>:nth-child(3){animation-delay:.35s}
.js .heroe-contenido>:nth-child(4){animation-delay:.48s}
.js .heroe-contenido>:nth-child(5){animation-delay:.6s}
.js .heroe-contenido>:nth-child(6){animation-delay:.75s}
@keyframes entra{from{opacity:0;transform:translateY(26px)}}
@keyframes entra-logo{from{opacity:0;transform:scale(.86);filter:blur(14px)}}

/* ------------------------------------------------ pantallas pequeñas */
@media (max-width:1100px){
  .barra-nav{display:none}
  .barra-nav+.idiomas{margin-inline-start:auto}
  .bloque,.bloque:has(>.pantalla:first-child){grid-template-columns:1fr}
  .bloque>.pantalla:first-child{order:1}
  .pantalla,.js .pantalla.revelar.visto{transform:none}
  .vitrina{grid-template-columns:1fr}
  .modos-lista{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:1000px){
  .rasgos{grid-template-columns:1fr 1fr}
  .destacado{min-height:440px}
}
@media (max-width:820px){
  .barra-nav{display:none}
  .barra-nav+.idiomas{margin-inline-start:auto}
  .barra-logo img{height:24px}
  .destacados{grid-template-columns:1fr}
  .destacado{min-height:400px}
  .cifras ul{grid-template-columns:1fr 1fr}
  .pistas-flechas{display:none}
  /* (en el móvil, las tres en fila: el icono encima del nombre) */
  .heroe-plataformas{width:100%;max-width:360px}
  .heroe-plataformas ul{flex-wrap:nowrap;gap:10px;width:100%}
  .heroe-plataformas .plat{flex:1 1 0;min-width:0;flex-direction:column;gap:8px;padding:14px 4px 12px;text-align:center;border-radius:16px}
  .heroe-plataformas .plat-texto{align-items:center;min-width:0;max-width:100%}
  .heroe-plataformas .plat-texto b{font-size:16px}
  .heroe-plataformas .plat-texto small{font-size:11px;white-space:nowrap}
}
@media (max-width:520px){
  body{font-size:16px}
  .rasgos,.niveles,.perfiles{grid-template-columns:1fr}
  .heroe{padding-top:96px}
  .vitrina-txt b{font-size:21px}
  .boton{font-size:18px;padding:14px 24px 14px 18px}
  .plat.grande{min-width:0;max-width:none;flex-basis:100%;flex-direction:row;text-align:start;gap:14px;padding:16px 18px;border-radius:20px}
  .plat.grande .plat-icono{width:54px;height:54px;border-radius:16px}
  .plat.grande .plat-icono svg{width:28px;height:28px}
  .plat.grande .plat-texto{align-items:flex-start;gap:2px}
  .plat.grande .plat-texto b{font-size:24px}
  .plat.grande .plat-prox{margin:0;margin-inline-start:auto;font-size:11px;padding:6px 9px 5px}
  .marquesina{margin-bottom:24px}
  .idiomas-lista{min-width:200px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .marquesina-pista,.bola-oro,.bola-oro svg{animation:none}
  .js .revelar{opacity:1;transform:none}
}