/* Cozy Tent — luz de farol, marco de madera de la UI del juego y filete ámbar.
   Estructura de página de juego: cabecera fija, portada a sangre, secciones con
   título decorado, tarjetas de tienda y pie con vuelta arriba. */
@font-face{font-family:Literata;src:url(fonts/Literata-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/Literata-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
  --noche:#14100e; --panel:rgba(74,46,32,.55); --borde:#3d2d23;
  --papel:#f3e7d6; --suave:#c6ab92; --tenue:#8a7360;
  --ambar:#e9b25c; --ambar-claro:#f2c04a;
  --marco:url(img/frame_wood.png) 32 fill / 26px stretch;
  --alto-barra:64px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--alto-barra)}
body{margin:0;color:var(--papel);font:400 17px/1.7 Literata,Georgia,serif;
  background:radial-gradient(900px 520px at 50% -160px,#6b3a1d55,transparent 70%),var(--noche);
  background-attachment:fixed}
a{color:var(--ambar);text-underline-offset:3px;text-decoration-color:#8a6a45;transition:color .25s}
a:hover{color:var(--ambar-claro)}
img{max-width:100%}

/* ---------------------------------------------------------------- lluvia y luciérnagas */
.lluvia{position:fixed;inset:-10% 0 0;pointer-events:none;z-index:2;overflow:hidden}
.gota{position:absolute;top:-14%;width:1px;border-radius:1px;
  background:linear-gradient(to bottom,transparent,rgba(214,230,255,.5));animation:cae linear infinite}
@keyframes cae{from{transform:translate3d(0,-14vh,0)}to{transform:translate3d(-6vw,114vh,0)}}
.bicho{position:fixed;width:4px;height:4px;border-radius:50%;background:#ffe9a8;
  box-shadow:0 0 10px 3px #ffd97a88;opacity:0;z-index:2;animation:vuela 14s ease-in-out infinite}
@keyframes vuela{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}
  50%{opacity:.35;transform:translate(34px,-46px)}75%{opacity:.85;transform:translate(-18px,-84px)}
  100%{opacity:0;transform:translate(16px,-130px)}}

/* ---------------------------------------------------------------- cabecera */
.barra{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--alto-barra);
  display:flex;align-items:center;gap:26px;padding:0 24px;
  background:linear-gradient(#14100ee6,#14100e99);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;transition:height .3s,background .3s,border-color .3s}
.barra.pegada{height:54px;background:#14100ef2;border-bottom-color:#3a2a22}
.marca{display:flex;align-items:center;gap:10px;font:600 17px/1 Literata,serif;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--papel);text-decoration:none;white-space:nowrap}
.marca img{width:34px;height:34px;border-radius:9px}
.menu{display:flex;gap:22px;margin-left:8px;list-style:none;padding:0}
.menu a{color:var(--suave);text-decoration:none;font-size:14px;letter-spacing:1.1px;text-transform:uppercase;
  padding:6px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ambar);
  transition:right .3s}
.menu a:hover{color:var(--papel)}
.menu a:hover::after{right:0}
.derecha{margin-left:auto;display:flex;align-items:center;gap:12px}
.idioma{display:flex;gap:6px}
.idioma button{font:600 12px/1 Literata,serif;letter-spacing:.6px;color:var(--tenue);cursor:pointer;
  background:none;border:1px solid var(--borde);border-radius:4px;padding:7px 11px;transition:.25s}
.idioma button:hover{color:var(--papel);border-color:var(--ambar)}
.idioma button[aria-pressed="true"]{color:var(--noche);background:var(--ambar);border-color:var(--ambar)}
.abrir-menu{display:none;background:none;border:1px solid var(--borde);border-radius:4px;color:var(--papel);
  font-size:18px;line-height:1;padding:8px 11px;cursor:pointer}

/* ---------------------------------------------------------------- portada */
.portada{position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;
  overflow:hidden;margin-top:var(--alto-barra)}
.portada .fondo{position:absolute;inset:-6% -2%;background:url(img/hero.jpg) center/cover no-repeat;
  animation:acercar 26s ease-in-out infinite alternate;z-index:0}
@keyframes acercar{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.portada::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(#14100e66 0%,#14100e14 30%,#14100ed9 78%,var(--noche) 100%)}
.portada .dentro{position:relative;z-index:2;padding:30px 20px 70px;max-width:760px}
.portada img.icono{width:118px;height:118px;border-radius:26px;
  box-shadow:0 10px 30px #000a,0 0 60px #e9b25c2e;animation:respira 5.5s ease-in-out infinite}
@keyframes respira{0%,100%{box-shadow:0 10px 30px #000a,0 0 60px #e9b25c2e}
  45%{box-shadow:0 10px 30px #000a,0 0 96px #f2c04a55}}
h1{font:600 clamp(38px,7vw,64px)/1.05 Literata,serif;margin:18px 0 10px;letter-spacing:1px;
  text-shadow:0 4px 30px #000a}
/* El logo se arma con sus capas y cada una se mueve un poco.
   En iPhone (Safari y Brave usan WebKit) no se anima nada que lleve filter ni que esté dentro
   de un contenedor con filter: WebKit lo congela. Solo se animan opacidad y transformaciones. */
h1.logo{margin:0 0 6px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.capas{position:relative;display:block;width:min(620px,84vw);margin:0 auto;
  animation:entra-logo 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra-logo{from{opacity:0;transform:scale(.88) translate3d(0,18px,0)}
  to{opacity:1;transform:none}}
.capas img{display:block;width:100%}
/* La sombra va en la capa de abajo, que no se mueve. */
.capas .base{-webkit-filter:drop-shadow(0 12px 30px #000b);filter:drop-shadow(0 12px 30px #000b);
  animation:aparece 1s ease both .15s}
.capas .capa{position:absolute;top:0;left:0;width:100%;height:100%;
  will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.titulo{animation:sube-titulo 1.1s cubic-bezier(.2,.7,.2,1) both .45s}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sube-titulo{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* El farol late como una llama y se tambalea colgado de su gancho. */
.farol{transform-origin:91.9% 55.4%;
  animation:late-farol 4.5s ease-in-out .6s infinite both, tambalea 6.5s ease-in-out .6s infinite}
@keyframes late-farol{0%,100%{opacity:.8}40%{opacity:1}62%{opacity:.88}}
@keyframes tambalea{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}

/* La luna sube y baja muy despacio. */
.luna{animation:flota-luna 9s ease-in-out .7s infinite both}
@keyframes flota-luna{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}

/* Las estrellas parpadean cada una a su ritmo. */
.estrella{animation:parpadea 3.4s ease-in-out .9s infinite both}
.e2{animation-duration:4.6s;animation-delay:-1.4s}
.e3{animation-duration:5.6s;animation-delay:-2.7s}
@keyframes parpadea{0%,100%{opacity:.4}50%{opacity:1}}

/* La fugaz cruza de vez en cuando y desaparece. */
.fugaz{opacity:0;animation:cruza 11s ease-in-out infinite}
@keyframes cruza{0%,62%{opacity:0;transform:translate3d(26px,-18px,0)}
  70%{opacity:.95;transform:translate3d(0,0,0)}
  82%{opacity:.5;transform:translate3d(-16px,11px,0)}
  90%,100%{opacity:0;transform:translate3d(-26px,18px,0)}}

/* El lema respira suave, como si lo encendieran. */
.lema{animation:respira-lema 7s ease-in-out 1s infinite both}
@keyframes respira-lema{0%,100%{opacity:.82}50%{opacity:1}}
.lema{color:#efe0cd;font-size:clamp(17px,2.4vw,21px);margin:0;text-shadow:0 2px 14px #000c}
.bajar{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--suave);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;animation:flota 2.6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* Anclas del menú: sin alto, solo marcan el sitio al que salta cada enlace. */
.ancla{position:relative;top:calc(var(--alto-barra) * -1);height:0}

/* ---------------------------------------------------------------- secciones */
.envoltorio{position:relative;z-index:3;max-width:940px;margin:0 auto;padding:0 22px}
section{margin:76px 0}
.titulo{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 26px;
  font:600 clamp(20px,3vw,27px)/1.2 Literata,serif;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--papel);text-align:center}
.titulo::before,.titulo::after{content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--ambar))}
.titulo::after{background:linear-gradient(90deg,var(--ambar),transparent)}
h2{font:600 24px/1.3 Literata,serif;margin:0 0 8px;color:var(--ambar-claro)}
p{margin:12px 0}
.panel{padding:26px 28px;border-radius:12px;background:var(--panel);border:1px solid #6b503c;
  backdrop-filter:blur(3px);box-shadow:0 12px 34px #0006}
.marco{border:26px solid transparent;border-image:var(--marco);background:var(--panel)}
.video{padding:0;line-height:0}
.video video{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:4px;background:#000}
.nota{color:var(--tenue);font-size:14px;text-align:center;margin-top:12px}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;padding:0;list-style:none}
.rejilla li{background:var(--panel);border:1px solid #6b503c;border-radius:10px;padding:14px 16px;
  font-size:15.5px;transition:.3s}
.rejilla li:hover{border-color:var(--ambar);transform:translateY(-3px)}
.rejilla li b{color:var(--ambar-claro);font-weight:600}

/* Tres textos en fila; en pantallas estrechas se apilan solos. */
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start}
.tres .panel{padding:22px 22px;margin:0}
.tres .panel h2{font-size:21px}
.tres .panel p{font-size:15.5px;line-height:1.62}

/* ---------------------------------------------------------------- galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.toma.ancha{grid-column:span 2}
@media(max-width:560px){.toma.ancha{grid-column:span 1}}
.toma{margin:0;position:relative;border:1px solid #33271f;border-radius:10px;overflow:hidden;
  background:#0b0907;transition:.35s}
.toma img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.toma:hover{border-color:var(--ambar);transform:translateY(-4px);box-shadow:0 14px 34px #0009}
.toma:hover img{transform:scale(1.04)}

/* En móvil la galería es un carrusel: se desliza, tiene flechas y puntos debajo. */
.carrusel{position:relative}
.flecha{display:none}
.puntos{display:none}

@media(max-width:700px){
  .carrusel{margin:0 -22px}
  .galeria{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:2px 22px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .galeria::-webkit-scrollbar{display:none}
  .toma,.toma.ancha{flex:0 0 78%;scroll-snap-align:center;grid-column:auto}
  .flecha{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:38px;height:38px;border-radius:50%;border:1px solid #4a382c;background:#0b0907d9;
    color:var(--papel);font:400 22px/1 Literata,serif;cursor:pointer;backdrop-filter:blur(3px)}
  .flecha.atras{left:8px}
  .flecha.adelante{right:8px}
  .flecha:active{border-color:var(--ambar)}
  .puntos{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .puntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#4a382c;cursor:pointer;
    transition:.3s}
  .puntos button[aria-selected="true"]{background:var(--ambar);width:20px;border-radius:99px}
}

/* ---------------------------------------------------------------- tiendas */
.tiendas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:0;list-style:none}
.chapa{position:relative;display:flex;align-items:center;gap:13px;background:#0b0907;
  border:1px solid #33271f;padding:15px 18px;transition:.3s}
.chapa::before,.chapa::after{content:"";position:absolute;width:13px;height:13px;
  border:2px solid var(--ambar);opacity:.85;transition:.3s}
.chapa::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.chapa::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.chapa:hover{border-color:#5a4535;transform:translateY(-3px);box-shadow:0 10px 26px #0008,0 0 24px #e9b25c22}
.chapa:hover::before,.chapa:hover::after{width:19px;height:19px;opacity:1}
.chapa svg{width:27px;height:27px;fill:var(--papel);flex:none}
.chapa .texto{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chapa .nombre{font-weight:600;font-size:15.5px;white-space:nowrap}
.chapa small{color:var(--tenue);font-size:11.5px;letter-spacing:1px;text-transform:uppercase}

/* Las tarjetas de tienda van en la portada, bajo el logo. */
.tiendas.en-portada{margin:24px auto 0;max-width:860px;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.tiendas.en-portada{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px}}
@media(max-width:420px){
  /* En móvil estrecho se quedan en dos columnas, más apretadas. */
  .tiendas.en-portada{max-width:340px;gap:9px}
  .tiendas.en-portada .chapa{gap:8px;padding:11px 10px}
  .tiendas.en-portada .chapa svg{width:21px;height:21px}
  .tiendas.en-portada .chapa .nombre{font-size:13.5px}
  .tiendas.en-portada .chapa small{font-size:9.5px;letter-spacing:.6px}
}
.tiendas.en-portada .chapa{background:#0b0907cc;backdrop-filter:blur(4px)}

/* ---------------------------------------------------------------- tiendas y descarga */
/* Una chapa con enlace se comporta como las demas; solo cambia que se puede pulsar. */
a.chapa{text-decoration:none;color:inherit}
.chapa.lista small{color:var(--ambar-claro)}
.chapa.lista svg{fill:var(--ambar-claro)}
/* La tienda que corresponde al aparato desde el que se entra se marca sola (tiendas.js). */
.chapa.tuya{border-color:var(--ambar);box-shadow:0 0 0 1px #e9b25c33,0 10px 26px #0008}
.chapa.tuya::before,.chapa.tuya::after{width:19px;height:19px;opacity:1}

/* Boton principal: solo aparece si el aparato tiene una tienda donde ya esta el juego. */
.descargar{display:block;width:max-content;max-width:100%;margin:26px auto 0;padding:15px 34px;
  border:1px solid var(--ambar);background:#1a1109cc;backdrop-filter:blur(4px);
  color:var(--ambar-claro);text-decoration:none;font-size:16.5px;letter-spacing:.6px;
  transition:.3s}
.descargar:hover{background:#241609;transform:translateY(-3px);
  box-shadow:0 12px 30px #0009,0 0 26px #e9b25c33}
.descargar b{font-weight:600}
.descargar[hidden]{display:none}

/* ---------------------------------------------------------------- mas de Jopam */
.entradilla{max-width:640px;margin:-6px auto 28px;text-align:center;color:var(--suave);font-size:15.5px}
.obras{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
  max-width:940px;margin:0 auto}
.obra{display:flex;gap:15px;align-items:flex-start;background:#0b0907;border:1px solid #33271f;
  padding:16px;transition:.3s}
.obra:hover{border-color:#5a4535;transform:translateY(-3px);box-shadow:0 10px 26px #0008}
.obra img{width:62px;height:62px;border-radius:13px;flex:none}
.obra .letra{min-width:0}
.obra h4{margin:0 0 5px;font-size:16px;font-weight:600}
.obra p{margin:0 0 9px;color:var(--suave);font-size:14px;line-height:1.45}
.obra .vinculos{display:flex;flex-wrap:wrap;gap:7px}
.obra .vinculos a{font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--tenue);text-decoration:none;border:1px solid #33271f;padding:4px 9px;transition:.25s}
.obra .vinculos a:hover{color:var(--ambar-claro);border-color:var(--ambar)}
@media(max-width:420px){.obra{padding:13px;gap:12px}.obra img{width:52px;height:52px}}

/* ---------------------------------------------------------------- pie */
footer{position:relative;z-index:3;margin-top:90px;padding:44px 22px 40px;border-top:1px solid #2b201a;
  background:linear-gradient(#0f0c0a00,#0b0908)}
.pie{max-width:940px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.pie .estudio{display:flex;align-items:center;gap:12px;color:var(--suave);font-size:14.5px}
.pie .estudio img{width:40px;height:40px;border-radius:10px}
.arriba{justify-self:center;width:108px;height:108px;display:grid;place-items:center;text-align:center;
  border-radius:50%;border:1px dashed #4a382c;color:var(--suave);text-decoration:none;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;transition:.35s}
.arriba:hover{color:var(--ambar-claro);border-color:var(--ambar);transform:translateY(-4px) rotate(6deg)}
.enlaces{justify-self:end;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;font-size:14px}
.legal{max-width:940px;margin:30px auto 0;padding-top:20px;border-top:1px solid #2b201a;
  color:var(--tenue);font-size:13px;text-align:center}

/* ---------------------------------------------------------------- aparecer y idiomas */
.asoma{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.asoma.visible{opacity:1;transform:none}
.es,.en{display:none}
body[data-idioma="es"] div.es,body[data-idioma="en"] div.en,
body[data-idioma="es"] section.es,body[data-idioma="en"] section.en{display:block}
body[data-idioma="es"] span.es,body[data-idioma="en"] span.en{display:inline}
body[data-idioma="es"] li.es,body[data-idioma="en"] li.en{display:list-item}

@media(max-width:820px){
  .menu{position:fixed;top:var(--alto-barra);left:0;right:0;flex-direction:column;gap:0;
    background:#14100ef7;border-bottom:1px solid #3a2a22;padding:6px 22px 14px;display:none}
  .menu.abierto{display:flex}
  .menu a{display:block;padding:12px 0;border-bottom:1px solid #241b16}
  .abrir-menu{display:block}
  .pie{grid-template-columns:1fr;justify-items:center;text-align:center}
  .enlaces{justify-self:center}
}
@media(prefers-reduced-motion:reduce){
  .gota,.bicho,.portada .fondo,.bajar,.portada img.icono,.capas,.capas .base,.titulo,.luna,.fugaz{animation:none}
  .farol{animation:late-farol 4.5s ease-in-out infinite both}
  .fugaz{opacity:0}
  .asoma{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------- aviso de cookies */
.aviso-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;
  background:#1c1410f2;border:1px solid #6b503c;box-shadow:0 8px 30px #000a;backdrop-filter:blur(8px)}
.aviso-cookies p{margin:0;font-size:14.5px;line-height:1.5;color:var(--suave)}
.aviso-cookies .botones{display:flex;gap:8px;flex:none}
.aviso-cookies button{font:600 13px/1 Literata,serif;letter-spacing:.4px;padding:10px 14px;border-radius:8px;
  cursor:pointer;color:var(--papel);background:transparent;border:1px solid #6b503c;transition:border-color .25s,color .25s}
.aviso-cookies button:hover{border-color:var(--ambar)}
.aviso-cookies button.si{color:var(--noche);background:var(--ambar);border-color:var(--ambar)}
@media (max-width:520px){.aviso-cookies{flex-direction:column;align-items:stretch;text-align:center}
  .aviso-cookies .botones{justify-content:center}}