/* ============================================================
   TAPROOM.ES — Shared styles for inner pages
   (legal pages, nuestra-cervezas)
   ============================================================ */
:root{
  --cream:   #f8f3e1;
  --cream60: rgba(248,243,225,.6);
  --cream35: rgba(248,243,225,.35);
  --cream12: rgba(248,243,225,.12);
  --cream06: rgba(248,243,225,.06);
  --gold:    #ffc77f;
  --footer-h: 52px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  font-family:'Open Sans',Arial,sans-serif;
  font-size:14px;color:var(--cream60);background:#000;
  -webkit-font-smoothing:antialiased;
}
body{padding-bottom:var(--footer-h)}

a{text-decoration:none;color:var(--gold)}
a:hover{color:var(--cream)}
img{display:block;max-width:100%;height:auto}

/* ── COOKIE BAR ──────────────────────────────────────────── */
#cookie-bar{
  position:fixed;top:0;left:0;width:100%;
  background:rgba(0,0,0,.96);color:var(--cream35);
  font-size:12px;line-height:1.6;padding:11px 28px;
  z-index:9000;display:flex;align-items:center;gap:18px;
  border-bottom:1px solid var(--cream06);
  transition:transform .4s ease;
}
#cookie-bar.hidden{transform:translateY(-100%)}
#cookie-bar p{margin:0;flex:1}
#cookie-bar a{color:var(--gold)}
#cookie-accept{
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 16px;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s;
}
#cookie-accept:hover{background:var(--gold);color:#000}

/* ── HEADER — logo only ──────────────────────────────────── */
#headerwrap{
  position:fixed;top:0;left:0;width:100%;z-index:8000;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cream06);
}
body.cookie-visible #headerwrap{top:44px}
#header{
  display:flex;align-items:center;
  padding:0 30px;height:68px;max-width:1400px;margin:0 auto;
}
#site-logo img{width:52px;height:42px;object-fit:contain}

/* ── FIXED FOOTER NAV (same as home) ─────────────────────── */
#site-footer{
  position:fixed;bottom:0;left:0;width:100%;
  height:var(--footer-h);
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--cream06);
  z-index:8500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
}
.footer-legal{display:flex;align-items:center;gap:16px}
.footer-legal a{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(248,243,225,.3);transition:color .2s;white-space:nowrap;
}
.footer-legal a:hover{color:var(--cream60)}
.footer-legal .sep{color:rgba(248,243,225,.12);font-size:10px}
.footer-nav-main{display:flex;align-items:center;gap:28px}
.footer-nav-main a{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream60);transition:color .2s;white-space:nowrap;
}
.footer-nav-main a:hover{color:var(--cream)}
.footer-nav-main a.active{color:var(--gold)}

/* ── PAGE CONTENT ────────────────────────────────────────── */
.page-header{
  padding:140px 40px 50px;
  text-align:center;background:#000;
  border-bottom:1px solid var(--cream06);
}
.page-header h1{
  font-size:1.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);
}

.page-content-wrap{
  max-width:860px;margin:0 auto;padding:50px 40px 60px;
}
.page-content-wrap h2{
  font-size:.9rem;font-weight:700;margin-top:28px;margin-bottom:8px;
  color:var(--cream60);text-transform:uppercase;letter-spacing:.08em;
}
.page-content-wrap p{
  color:rgba(248,243,225,.4);font-size:13px;line-height:1.9;margin-bottom:14px;
}
.page-content-wrap strong{color:var(--cream60)}
.page-content-wrap ul{margin-left:20px;margin-bottom:14px}
.page-content-wrap li{color:rgba(248,243,225,.4);font-size:13px;line-height:2}

/* ── CERVEZAS PAGE ───────────────────────────────────────── */
#cervezas-section{padding-top:100px;background:#000;min-height:100vh}
.cervezas-header{text-align:center;padding:40px 20px 20px}
.cervezas-header h1{
  font-size:1.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);
}
.cervezas-header p{
  color:rgba(248,243,225,.3);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:6px;
}
.untappd-wrap{max-width:900px;margin:0 auto;padding:0 20px 60px}
.untappd-wrap iframe{display:block;width:100%;border:none}

/* ── MOBILE ──────────────────────────────────────────────── */
@media(max-width:768px){
  #header{padding:0 20px;height:60px}
  .page-header{padding:100px 20px 36px}
  .page-content-wrap{padding:36px 20px 50px}
  #site-footer{flex-direction:column;height:auto;padding:12px 20px;gap:8px}
  .footer-legal{gap:10px;flex-wrap:wrap;justify-content:center}
  .footer-nav-main{gap:16px;justify-content:center}
  :root{--footer-h:80px}
  body.cookie-visible #headerwrap{top:80px}
}