/* ============================================================
   Nortada — cervecería artesanal. Ámbar/cobre + scroll-snap full-height.
   ============================================================ */

:root {
  --color-bg: #17110b;
  --color-bg-alt: #241a10;
  --color-cream: #fbf3e3;
  --color-amber: #d98c2b;
  --color-amber-dark: #b06f1f;
  --color-copper: #a5522a;
  --color-muted: #cbb89a;
  --color-line: #3a2c1c;

  --font-display: 'Fraunces', serif;
  --font-sans: 'Nunito', sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-cream); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-cream); line-height: 1.15; margin: 0 0 0.4em; }
p { color: var(--color-muted); margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 700; color: var(--color-amber); margin-bottom: 0.7em; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85em 1.8em; border-radius: 999px; font-weight: 700; font-size: 0.94rem; border: 2px solid transparent; cursor: pointer; transition: all 0.15s ease; }
.btn-primary { background: var(--color-amber); color: #1a1108; }
.btn-primary:hover { background: var(--color-amber-dark); }
.btn-ghost { background: transparent; border-color: var(--color-cream); color: var(--color-cream); }
.btn-ghost:hover { background: var(--color-cream); color: var(--color-bg); }
.btn-block { width: 100%; }

/* ===== Age gate ===== */
.age-gate { position: fixed; inset: 0; background: rgba(10, 7, 4, 0.97); z-index: 300; display: flex; align-items: center; justify-content: center; }
.age-gate.hidden { display: none; }
.age-gate-content { text-align: center; max-width: 380px; padding: 20px; }
.age-gate-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-amber); color: #1a1108; font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 20px; }
.age-gate-actions { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }

/* ===== Tap-list side nav (reemplaza header) ===== */
.logo-mark { position: fixed; top: 28px; left: 32px; z-index: 90; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 1.1rem; }
.tap-nav { position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 22px; }
.tap-item { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); justify-content: flex-end; }
.tap-handle { width: 22px; height: 4px; background: var(--color-line); border-radius: 2px; transition: all 0.2s ease; }
.tap-item.active .tap-handle, .tap-item:hover .tap-handle { background: var(--color-amber); width: 34px; }
.tap-item.active, .tap-item:hover { color: var(--color-cream); }
@media (max-width: 720px) { .tap-nav { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); flex-direction: row; gap: 16px; } .tap-item span:not(.tap-handle) { display: none; } .tap-handle { width: 10px; height: 10px; border-radius: 50%; } .tap-item.active .tap-handle, .tap-item:hover .tap-handle { width: 14px; height: 14px; } }

/* ===== Scroll-snap full height sections ===== */
.snap-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
.snap-section { min-height: 100vh; scroll-snap-align: start; display: flex; align-items: center; padding: 60px 0; }

/* hero */
.hero { position: relative; text-align: center; justify-content: center; }
.foam { position: absolute; top: 0; left: 0; right: 0; height: 60px; background: radial-gradient(circle at 20% 0, var(--color-cream) 0 8px, transparent 9px), radial-gradient(circle at 45% 0, var(--color-cream) 0 12px, transparent 13px), radial-gradient(circle at 70% 0, var(--color-cream) 0 6px, transparent 7px), radial-gradient(circle at 90% 0, var(--color-cream) 0 10px, transparent 11px); opacity: 0.06; }
.hero-inner { max-width: 680px; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.hero h1 em { color: var(--color-amber); font-style: normal; }
.hero-lead { font-size: 1.05rem; max-width: 50ch; margin: 0 auto 2em; }

/* sections shared */
.section-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* tap list styles */
.tap-list { display: flex; flex-direction: column; gap: 4px; }
.tap-row { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--color-line); }
.tap-swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); flex-shrink: 0; }
.tap-info { flex: 1; }
.tap-info h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.tap-info p { margin: 0; font-size: 0.9rem; }
.tap-specs { display: flex; gap: 14px; font-size: 0.8rem; color: var(--color-amber); font-weight: 700; }

/* history timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeline-item { border-left: 2px solid var(--color-amber); padding-left: 16px; }
.timeline-year { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-amber); display: block; }
.timeline-item p { font-size: 0.88rem; margin: 6px 0 0; }

/* visit */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.visit-info p { font-size: 0.96rem; }
.visit-info strong { color: var(--color-cream); }
.visit-map { height: 220px; border-radius: var(--radius); background: linear-gradient(135deg, var(--color-copper), var(--color-bg-alt)); }

/* club */
.club-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.club-form { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 28px; }
.form-row { margin-bottom: 16px; }
label { display: block; font-size: 0.84rem; font-weight: 700; margin-bottom: 6px; }
input { width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-bg); color: var(--color-cream); font-family: inherit; }
input:focus { outline: none; border-color: var(--color-amber); }
.form-status { margin-top: 12px; font-size: 0.86rem; font-weight: 700; color: var(--color-amber); }

/* footer minimo con disclaimer */
.site-footer { position: relative; z-index: 5; background: var(--color-bg-alt); border-top: 1px solid var(--color-line); padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--color-muted); }
.footer-social { display: flex; gap: 16px; }

/* responsive */
@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .visit-grid, .club-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .timeline { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .tap-row { flex-wrap: wrap; }
}