/* El Tesoro de Nosara. Pagina autonoma y oscura: no hereda ../styles.css a
   proposito, porque el sitio es claro y esta pagina es de noche. Conserva la
   tipografia de la ADC para que se lea como parte de la misma casa.
   Paleta tomada de la portada del juego: amarillo neon, cian, ojos rojos. */

:root{
  --noche:#07070c;
  --noche2:#0d0d16;
  --amarillo:#ffe81a;
  --cian:#22e8e0;
  --rojo:#ff2a2a;
  --tinta:#e9e9f2;
  --tenue:#9a9ab0;
  --linea:rgba(255,255,255,.10);
  --radio:18px;
  --display:"Wix Madefor Display",system-ui,sans-serif;
  --texto:"Wix Madefor Text",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--noche);color:var(--tinta);font-family:var(--texto);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(1120px,92vw);margin:0 auto}

/* ---------- topbar ---------- */
.ts-topbar{padding:1rem 0;border-bottom:1px solid var(--linea)}
.ts-topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ts-brand img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.ts-back{font-size:.9rem;font-weight:600;color:var(--tenue)}
.ts-back:hover{color:var(--cian)}

/* ---------- hero ---------- */
.ts-hero{position:relative;overflow:hidden;padding:clamp(4rem,11vw,8rem) 0 clamp(3.5rem,8vw,6rem);
  background:radial-gradient(1200px 600px at 50% -10%,#141426 0%,var(--noche) 62%)}
.ts-hero-wrap{position:relative;z-index:2;text-align:center}
.ts-luna{position:absolute;top:8%;right:9%;width:120px;height:120px;border-radius:50%;
  background:#f4f1e4;box-shadow:0 0 90px 30px rgba(244,241,228,.28);z-index:1}
.ts-ojos{position:absolute;bottom:16%;display:flex;gap:16px;z-index:1;opacity:.85}
.ts-ojos-izq{left:6%} .ts-ojos-der{right:7%}
.ts-ojos i{width:14px;height:8px;border-radius:50%;background:var(--rojo);
  box-shadow:0 0 14px 4px rgba(255,42,42,.75);display:block}

.ts-kicker{font-family:var(--display);font-weight:700;color:var(--cian);letter-spacing:.16em;
  text-transform:uppercase;font-size:clamp(.72rem,1.5vw,.92rem);text-shadow:0 0 18px rgba(34,232,224,.5)}
.ts-hero h1{font-family:var(--display);font-weight:800;line-height:.95;margin:1.1rem 0 1.3rem;
  font-size:clamp(3rem,11vw,6.5rem);color:var(--amarillo);letter-spacing:-.02em;
  text-shadow:0 0 40px rgba(255,232,26,.45),0 0 90px rgba(255,232,26,.2)}
.ts-lead{max-width:46ch;margin:0 auto;color:#c9c9dc;font-size:clamp(1rem,1.9vw,1.18rem)}

.ts-btn{display:inline-block;margin-top:2rem;padding:1rem 2.4rem;border-radius:999px;
  background:var(--amarillo);color:#12120a;font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,2vw,1.15rem);letter-spacing:.01em;
  box-shadow:0 0 40px rgba(255,232,26,.35);transition:transform .15s ease,box-shadow .15s ease}
.ts-btn:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,232,26,.55)}
.ts-btn-2{background:transparent;color:var(--cian);border:1.5px solid var(--cian);
  box-shadow:0 0 30px rgba(34,232,224,.18)}
.ts-btn-2:hover{box-shadow:0 0 46px rgba(34,232,224,.34)}

.ts-nota{margin-top:.9rem;font-size:.88rem;color:var(--tenue)}
.ts-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2rem}
.ts-chips span{padding:.5rem 1.1rem;border:1px solid var(--linea);border-radius:999px;
  font-size:.85rem;color:#bfbfd4;background:rgba(255,255,255,.03)}

/* ---------- secciones ---------- */
.ts-seccion{padding:clamp(3.5rem,8vw,6rem) 0}
.ts-alt{background:var(--noche2)}
.ts-eyebrow{font-family:var(--display);font-weight:700;color:var(--cian);letter-spacing:.16em;
  text-transform:uppercase;font-size:.75rem;margin-bottom:.9rem}
.ts-seccion h2{font-family:var(--display);font-weight:800;letter-spacing:-.018em;
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.12;margin-bottom:1rem}
.ts-intro{max-width:66ch;color:#bfbfd4;margin-bottom:1rem}
.ts-intro a{color:var(--cian);text-decoration:underline;text-underline-offset:3px}
.ts-mas{max-width:70ch;margin-top:2rem;color:var(--tenue);font-size:.95rem}

/* bestiario */
.ts-bestias{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;margin-top:2.2rem}
.ts-bestias article{border:1px solid var(--linea);border-radius:var(--radio);padding:1.8rem;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.ts-bestias h3{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--amarillo)}
.ts-sentido{font-family:var(--display);font-weight:700;color:var(--rojo);font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;margin:.35rem 0 .9rem}
.ts-bestias p:last-child{color:#bfbfd4;font-size:.96rem}

/* sitios */
.ts-sitios{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.7rem;margin-top:2rem}
.ts-sitios li{padding:.85rem 1.2rem;border:1px solid var(--linea);border-radius:12px;
  background:rgba(255,255,255,.03);font-weight:600;font-size:.97rem}

/* como se juega */
.ts-como{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:2.2rem}
.ts-como h3{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--cian);margin-bottom:.5rem}
.ts-como p{color:#bfbfd4;font-size:.96rem}

.ts-controles{margin-top:3rem;border:1px solid var(--linea);border-radius:var(--radio);padding:1.8rem;
  background:rgba(255,255,255,.03)}
.ts-controles > div{display:flex;flex-wrap:wrap;gap:.6rem}
.ts-controles span{padding:.5rem 1rem;border-radius:10px;background:rgba(0,0,0,.4);
  font-size:.9rem;color:#bfbfd4}
.ts-controles b{color:var(--amarillo);font-family:var(--display);margin-right:.4rem}
.ts-nota-chica{margin-top:1.2rem;font-size:.88rem;color:var(--tenue);max-width:66ch}

.ts-portada{margin-top:2.6rem;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea)}

/* cierre */
.ts-cierre{padding:clamp(4rem,9vw,7rem) 0;text-align:center;
  background:radial-gradient(900px 400px at 50% 120%,#1b1b30 0%,var(--noche) 65%)}
.ts-cierre h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,3.2rem);
  color:var(--amarillo);text-shadow:0 0 40px rgba(255,232,26,.35)}

/* footer */
.ts-footer{padding:2.6rem 0;border-top:1px solid var(--linea)}
.ts-foot-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.ts-foot-brand{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-size:.95rem}
.ts-foot-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.8}
.ts-copy{margin-top:1.4rem;font-size:.82rem;color:var(--tenue)}

@media(max-width:640px){
  .ts-luna{width:74px;height:74px;top:5%;right:7%}
  .ts-ojos{display:none}
}