/* =========================================================
   AL OESTE — Juegos y Café
   Tokens: cabaña de montaña + mesa de juego
   ========================================================= */

:root{
  /* Paleta base */
  --plum:        #3a2440;   /* techo morado oscuro del local */
  --plum-deep:   #2a1a30;
  --sage:        #7d8a76;   /* pared gris verdoso */
  --sage-light:  #eef0e7;
  --clay:        #c1854f;   /* montaña del logo */
  --clay-deep:   #9c6234;
  --parchment:   #f6f0e4;   /* fondo cálido tipo madera clara */
  --wood:        #7a4a2b;
  --ink:         #2b2116;
  --cream:       #fbf7ee;
  --amber:       #e3a24d;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --max: 1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--parchment);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .4em 0;
  font-weight:600;
  line-height:1.12;
  color:var(--plum-deep);
}
p{margin:0 0 1em 0;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .kicker{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--clay-deep);
  font-size:1.05rem;
  margin-bottom:.3em;
}
.section-head h2{font-size:clamp(2rem,4vw,2.7rem);}
.section-head p{color:#5a5142; font-size:1.05rem; max-width:520px;}

button, .btn{
  font-family:var(--font-body);
  cursor:pointer;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid var(--plum-deep);
  background:var(--plum-deep);
  color:var(--cream);
  font-weight:600;
  font-size:.98rem;
  text-decoration:none;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{background:var(--plum); transform:translateY(-1px);}
.btn.outline{
  background:transparent;
  color:var(--plum-deep);
}
.btn.outline:hover{background:var(--plum-deep); color:var(--cream);}
.btn.whats{
  border-color:#3f7a4d;
  background:#3f7a4d;
}
.btn.whats:hover{background:#356b41;}

/* ---------- Topbar / nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(125,138,118,.97); /* gris verdoso */
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(42,26,48,.15);
  box-shadow:0 2px 14px -6px rgba(42,26,48,.2);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 24px;
  max-width:var(--max); margin:0 auto;
}
.nav .brand{
  display:flex; align-items:center; gap:10px;
  color:var(--plum-deep); text-decoration:none;
}
.nav .brand img{height:64px; width:auto;}
.nav .brand span{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  letter-spacing:.01em;
}
.nav ul{
  display:flex; gap:26px; list-style:none; margin:0; padding:0;
}
.nav ul a{
  color:var(--plum-deep);
  text-decoration:none;
  font-size:.95rem;
  border-bottom:2px solid transparent;
  padding-bottom:4px;
  transition:border-color .2s, color .2s;
}
.nav ul a:hover{border-color:var(--plum-deep); color:#fff;}
.nav .nav-cta{
  display:flex; gap:10px; align-items:center;
}
.nav .nav-cta .btn{padding:10px 20px; font-size:.9rem;}
.nav .nav-cta .btn.outline{border-color:var(--plum-deep); color:var(--plum-deep); background:transparent;}
.nav .nav-cta .btn.outline:hover{background:var(--plum-deep); color:#fff;}
.burger{display:none; background:none; border:0; color:var(--plum-deep); font-size:1.6rem;}

@media (max-width:860px){
  .nav .brand img{height:52px;}
  .nav ul{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--cream);
    padding:18px 24px; gap:16px; display:none;
    border-bottom:1px solid rgba(58,36,64,.12);
  }
  .nav ul.open{display:flex;}
  .nav ul a{color:var(--wood);}
  .nav .nav-cta{display:none;}
  .burger{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--plum-deep);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:url('../images/hero.jpg') center 30%/cover no-repeat;
  opacity:.5;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(42,26,48,.97) 32%, rgba(42,26,48,.55) 62%, rgba(42,26,48,.25) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:120px 24px 80px;
  max-width:var(--max); margin:0 auto;
  width:100%;
}
.hero-content .eyebrow{
  color:var(--amber); font-family:var(--font-display); font-style:italic;
  font-size:1.15rem; display:block; margin-bottom:14px;
}
.hero-content h1{
  color:#fff;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  max-width:780px;
  margin-bottom:.5em;
}
.hero-content .lede{
  color:var(--sage-light);
  font-size:1.2rem;
  max-width:520px;
  margin-bottom:2em;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.hero-strip{
  display:flex; gap:40px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:26px;
  max-width:820px;
}
.hero-strip div{color:var(--sage-light); font-size:.92rem;}
.hero-strip strong{
  display:block; color:#fff; font-family:var(--font-display);
  font-size:1.3rem; font-weight:600;
}

/* ---------- Mountain divider ---------- */
.divider{
  height:64px;
  background:var(--parchment);
}
.divider svg{width:100%; height:100%; display:block;}

/* ---------- About ---------- */
.about{background:var(--parchment);}
.about-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}
.about-copy p{font-size:1.06rem; color:#463c2f;}
.about-photos{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.about-photos img{border-radius:var(--radius); box-shadow:0 18px 34px -18px rgba(42,26,48,.45);}
.about-photos .p2{margin-top:34px;}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0;}
.tag{
  border:1px solid var(--sage);
  color:var(--wood);
  padding:6px 14px; border-radius:999px; font-size:.85rem;
  background:#fff;
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; gap:36px;}
}

/* ---------- Menu ---------- */
.menu{background:var(--plum-deep); color:var(--sage-light);}
.menu .section-head h2{color:#fff;}
.menu .section-head p{color:#cfc7cd;}
.menu-tabs{display:flex; gap:12px; margin-bottom:34px; flex-wrap:wrap;}
.menu-tab{
  background:transparent; border:1px solid rgba(255,255,255,.3);
  color:var(--sage-light); padding:10px 20px; border-radius:999px; font-size:.92rem;
}
.menu-tab.active{background:var(--amber); border-color:var(--amber); color:var(--plum-deep); font-weight:600;}
.menu-grid{display:none; grid-template-columns:repeat(2,1fr); gap:14px 40px;}
.menu-grid.active{display:grid;}
@media (max-width:700px){.menu-grid{grid-template-columns:1fr;}}
.menu-item{
  display:flex; justify-content:space-between; gap:14px;
  border-bottom:1px dashed rgba(255,255,255,.22);
  padding:12px 0;
}
.menu-item .name{font-weight:500; color:#fff;}
.menu-item .desc{display:block; color:#b9b0b6; font-size:.85rem; margin-top:2px;}
.menu-item .price{font-family:var(--font-display); color:var(--amber); white-space:nowrap; font-weight:600;}
.combo-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:22px 24px;
}
.combo-card h4{color:#fff; margin-bottom:6px;}
.combo-card .price{color:var(--amber); font-family:var(--font-display); font-size:1.3rem; display:block; margin-bottom:10px;}
.combo-card .incl{font-size:.88rem; color:#cfc7cd;}
.combo-card .incl b{color:var(--amber);}
.combo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){.combo-grid{grid-template-columns:1fr;}}

/* ---------- Ludoteca ---------- */
.ludoteca{background:var(--sage-light);}
.ludo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){.ludo-grid{grid-template-columns:1fr;}}
.ludo-card{
  background:#fff; border-radius:var(--radius);
  padding:28px; border-top:4px solid var(--clay);
}
.ludo-card .big{
  font-family:var(--font-display); font-size:1.9rem; color:var(--clay-deep); display:block; margin-bottom:6px;
}
.ludo-card h4{font-size:1.1rem; margin-bottom:8px;}
.ludo-card p{font-size:.94rem; color:#57503f; margin:0;}
.ludo-note{
  margin-top:30px; padding:18px 22px; background:#fff;
  border-left:4px solid var(--amber); border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem; color:#4c4536;
}

/* ---------- Catalogo de juegos ---------- */
.catalogo{background:var(--cream);}
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;
}
.filter-btn{
  border:1px solid var(--sage); background:#fff; color:var(--wood);
  padding:8px 18px; border-radius:999px; font-size:.88rem;
}
.filter-btn.active{background:var(--plum-deep); border-color:var(--plum-deep); color:#fff;}
.search-row{
  display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap;
}
.search-row input{
  flex:1; min-width:220px;
  padding:12px 16px; border:1px solid var(--sage); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.95rem; background:#fff;
}
.count-note{color:#7a7161; font-size:.88rem; margin-bottom:18px;}
.game-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
}
.game-card{
  background:#fff; border:1px solid #e8e0cf; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.game-card .thumb{
  width:100%; aspect-ratio:16/10; background:var(--sage-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--clay-deep); font-family:var(--font-display); font-size:1.6rem;
  overflow:hidden;
}
.game-card .thumb img{width:100%; height:100%; object-fit:cover;}
.game-card .body{padding:14px 16px 16px;}
.game-card .cat{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--clay-deep); font-weight:600; display:block; margin-bottom:6px;
}
.game-card h4{font-size:1.0rem; margin-bottom:8px; color:var(--plum-deep);}
.game-card .meta{
  display:flex; gap:10px; flex-wrap:wrap; font-size:.76rem; color:#7a7161;
  margin-bottom:10px;
}
.game-card .meta span{display:inline-flex; align-items:center; gap:3px;}
.game-card .links{display:flex; gap:8px; flex-wrap:wrap;}
.game-card .links a{
  font-size:.78rem; border:1px solid var(--sage); border-radius:6px; padding:4px 9px;
  text-decoration:none; color:var(--wood);
}
.game-card .links a:hover{background:var(--sage-light);}
.game-empty{color:#8a8272; padding:30px 0; display:none;}

/* ---------- Eventos ---------- */
.eventos{background:var(--plum-deep); color:var(--sage-light); text-align:center;}
.eventos .section-head{margin:0 auto 30px; text-align:center;}
.eventos .section-head p{margin:0 auto; color:#cfc7cd;}
.eventos .btn{margin-top:6px;}

/* ---------- Reservas ---------- */
.reservas{background:var(--sage-light);}
.res-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){.res-grid{grid-template-columns:1fr;}}
form.res-form{
  background:#fff; border-radius:var(--radius); padding:30px;
  display:flex; flex-direction:column; gap:16px;
  border:1px solid #e0dccf;
}
.res-form label{font-size:.85rem; color:#5a5142; font-weight:600; margin-bottom:4px; display:block;}
.res-form input, .res-form select, .res-form textarea{
  width:100%; padding:11px 14px; border:1px solid #cfc6b0; border-radius:5px;
  font-family:var(--font-body); font-size:.95rem; background:#fbf9f3;
}
.res-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){.res-row{grid-template-columns:1fr;}}
.res-form .btn{align-self:flex-start; border:none; margin-top:6px;}
.res-side h3{margin-bottom:14px;}
.res-side ul{padding-left:0; list-style:none; margin:0 0 26px;}
.res-side li{
  padding:10px 0 10px 28px; border-bottom:1px solid #dcd6c6;
  position:relative; font-size:.95rem; color:#4c4536;
}
.res-side li::before{
  content:"♟"; position:absolute; left:0; top:9px; color:var(--clay-deep);
}
.whats-box{
  background:#fff; border-radius:var(--radius); padding:22px; border:1px solid #e0dccf;
}
.whats-box p{font-size:.92rem; color:#57503f;}

/* ---------- Ubicacion / contacto ---------- */
.contacto{background:var(--cream);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{list-style:none; padding:0; margin:0 0 28px;}
.contact-list li{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #e6dfcd;
}
.contact-list .ic{font-size:1.25rem; color:var(--clay-deep);}
.contact-list a{text-decoration:none; color:var(--plum-deep); font-weight:600;}
.contact-list .sub{color:#7a7161; font-size:.85rem; display:block;}
.map-embed{
  border-radius:var(--radius); overflow:hidden; border:1px solid #e0dccf; min-height:320px;
}
.map-embed iframe{width:100%; height:100%; min-height:320px; border:0;}

/* ---------- Footer ---------- */
footer{
  background:var(--plum-deep); color:#cfc7cd; padding:48px 0 28px;
}
.foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:28px;}
.foot-brand{display:flex; gap:12px; align-items:center;}
.foot-brand img{
  height:52px;
  background:var(--cream);
  border-radius:10px;
  padding:6px 10px;
}
.foot-brand span{font-family:var(--font-display); color:#fff; font-size:1.1rem;}
.foot-links{display:flex; gap:26px; flex-wrap:wrap;}
.foot-links a{color:#cfc7cd; text-decoration:none; font-size:.9rem;}
.foot-links a:hover{color:#fff;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:20px;
  font-size:.82rem; color:#948d92; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- Botón flotante "volver arriba" ---------- */
.back-top{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:var(--plum-deep); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4); text-decoration:none;
  color:#fff; font-size:1.4rem; border:none; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-top:hover{background:var(--plum);}

/* ---------- misc ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1; transform:translateY(0);}