/* GamingOrigen — estilos v1 */
:root{
  --azul-lago:#0E6E73;
  --terracota:#C96A3E;
  --crema:#F2E8D5;
  --carbon:#2B2B2B;
  --blanco:#FFFFFF;
  --sombra: 0 6px 18px rgba(43,43,43,0.14);
  --radio: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--crema);
  color:var(--carbon);
  font-family:"Nunito Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
}
[hidden]{display:none!important;}
h1,h2,h3,h4{
  font-family:"Baloo 2", "Nunito Sans", sans-serif;
  color:var(--azul-lago);
  line-height:1.25;
  margin-top:0;
}
a{color:var(--terracota);}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Age gate ---------- */
#agegate{
  position:fixed;
  inset:0;
  background:rgba(14,110,115,0.96);
  color:var(--blanco);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.agegate-caja{
  background:var(--crema);
  color:var(--carbon);
  max-width:480px;
  width:100%;
  border-radius:var(--radio);
  padding:32px 28px;
  text-align:center;
  box-shadow:var(--sombra);
}
.agegate-caja h2{margin-bottom:12px;}
.agegate-caja p{margin-bottom:20px;font-size:0.98rem;}
.agegate-botones{display:flex;flex-direction:column;gap:12px;align-items:center;}
.btn{
  display:inline-block;
  background:var(--terracota);
  color:var(--blanco);
  border:none;
  padding:12px 28px;
  border-radius:999px;
  font-family:"Baloo 2", sans-serif;
  font-size:1rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none; opacity:.92;}
.btn-secundario{
  background:transparent;
  color:var(--azul-lago);
  text-decoration:underline;
  padding:6px 10px;
}

/* ---------- Header / nav ---------- */
header.sitio-header{
  background:var(--azul-lago);
  color:var(--blanco);
  padding:14px 0;
}
.header-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.marca{
  font-family:"Baloo 2", sans-serif;
  font-size:1.5rem;
  color:var(--blanco);
  text-decoration:none;
  font-weight:700;
}
.marca:hover{text-decoration:none;opacity:.9;}
nav.menu-principal ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  margin:0;
  padding:0;
}
nav.menu-principal a{
  color:var(--crema);
  text-decoration:none;
  font-size:0.95rem;
  padding:6px 4px;
  border-bottom:2px solid transparent;
}
nav.menu-principal a:hover,
nav.menu-principal a[aria-current="page"]{
  border-bottom:2px solid var(--terracota);
  color:var(--blanco);
}
.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--crema);
  color:var(--crema);
  border-radius:8px;
  padding:6px 10px;
  font-size:1rem;
}

/* ---------- Barra juego responsable ---------- */
.barra-responsable{
  background:var(--carbon);
  color:var(--crema);
  font-size:0.82rem;
  text-align:center;
  padding:8px 14px;
}
.barra-responsable a{color:var(--crema); text-decoration:underline;}

/* ---------- Hero ---------- */
.hero{
  padding:48px 0 36px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:32px;
  align-items:center;
}
.hero h1{font-size:2.1rem;margin-bottom:14px;}
.hero p{font-size:1.05rem;}
.hero-imagen{
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.accesos-rapidos{
  display:flex;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}

/* ---------- Secciones genéricas ---------- */
main section{
  padding:36px 0;
}
main section + section{
  border-top:1px solid rgba(43,43,43,0.08);
}
.tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  margin-top:20px;
}
.tarjeta{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:18px;
  box-shadow:var(--sombra);
}
.tarjeta img{border-radius:10px;margin-bottom:10px;}

/* ---------- Galería ---------- */
.galeria-grilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin-top:24px;
}
.galeria-item{
  background:var(--blanco);
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.galeria-item img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.galeria-item figcaption{
  padding:12px 14px;
  font-size:0.88rem;
  color:var(--carbon);
}
.pie-galeria-fijo{
  margin-top:28px;
  font-size:0.85rem;
  color:rgba(43,43,43,0.75);
  border-top:1px solid rgba(43,43,43,0.12);
  padding-top:14px;
}

/* ---------- Selector de época ---------- */
.selector-wrap{
  max-width:720px;
  margin:28px auto 0;
  text-align:center;
}
.dial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:22px;
}
.dial-flecha{
  background:var(--azul-lago);
  color:var(--blanco);
  border:none;
  width:52px;
  height:52px;
  border-radius:50%;
  font-size:1.4rem;
  cursor:pointer;
  box-shadow:var(--sombra);
}
.dial-flecha:hover{background:var(--terracota);}
.dial-flecha:focus-visible, .btn:focus-visible, a:focus-visible, .decada-punto:focus-visible{
  outline:3px solid var(--terracota);
  outline-offset:2px;
}
.dial-visor{
  width:220px;
  height:220px;
  border-radius:50%;
  background:var(--blanco);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:var(--sombra);
  border:6px solid var(--azul-lago);
  touch-action:none;
  cursor:grab;
  user-select:none;
  position:relative;
}
.dial-visor:active{cursor:grabbing;}
.dial-visor .decada-numero{
  font-family:"Baloo 2", sans-serif;
  font-size:2.3rem;
  color:var(--terracota);
}
.dial-puntos{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}
.decada-punto{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(43,43,43,0.25);
  border:none;
  cursor:pointer;
  padding:0;
}
.decada-punto.activo{background:var(--terracota);}
.tarjeta-decada{
  border-radius:var(--radio);
  padding:26px;
  box-shadow:var(--sombra);
  text-align:left;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:20px;
  align-items:center;
  transition:background-color .35s ease;
}
.tarjeta-decada img{border-radius:10px;}
.tarjeta-decada h3{margin-bottom:8px;}
.instrucciones-dial{
  font-size:0.85rem;
  color:rgba(43,43,43,0.7);
  margin-top:10px;
}

/* ---------- Footer ---------- */
footer.sitio-footer{
  background:var(--carbon);
  color:var(--crema);
  padding:30px 0 18px;
  margin-top:20px;
  font-size:0.88rem;
}
footer.sitio-footer a{color:var(--crema);}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:18px;
}
.footer-links ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.footer-copy{margin-top:20px;opacity:.75;font-size:0.8rem;}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .tarjeta-decada{grid-template-columns:1fr;}
  .menu-toggle{display:inline-block;}
  nav.menu-principal{
    display:none;
    width:100%;
  }
  nav.menu-principal.abierto{display:block;}
  nav.menu-principal ul{flex-direction:column;}
}