/* =============================================
   PIZZERIA POPULAR — Landing (selector de locales)
   Mismos tokens y paleta que /menu para consistencia visual.
   ============================================= */
:root {
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-card: #2a2a2a;
  --bg-glass: rgba(255,255,255,0.04);
  --text-primary: #ffffff;
  --text-secondary: #9a9a9a;
  --accent-gold: #d4a853;
  --accent-gold-light: #e8c87a;
  --accent-gold-dim: rgba(212,168,83,0.12);
  --border: #333333;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background-color:var(--bg-primary); }
body {
  font-family:var(--font-main); background-color:var(--bg-primary); color:var(--text-primary);
  line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
img { display:block; max-width:100%; height:auto; }

/* Page background (mismo patrón que /menu) */
.page-bg {
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
  display:none;
}
body.has-hero-bg .page-bg { display:block; }
.page-bg-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: var(--bg-x, 50%) var(--bg-y, 50%);
  transform: scale(var(--bg-zoom, 1));
  transform-origin: center center;
}
.page-bg-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.78);
}

.landing-container {
  max-width:720px;
  margin:0 auto;
  min-height:100vh;
  padding:0 20px 60px;
  position:relative;
  z-index:1;
}

/* Lang picker — fixed top-right (mismo look que /menu) */
.lang-float { position:fixed; top:12px; right:12px; z-index:60; }
@media(min-width:761px) { .lang-float { right: calc(50% - 348px); } }
.lang-picker { position:relative; }
.lang-trigger {
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;
  width:44px; height:44px; padding:0; cursor:pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.lang-trigger:hover { background:rgba(0,0,0,0.75); }
.lang-trigger:focus-visible { outline:none; border-color:var(--accent-gold); box-shadow:0 0 12px rgba(212,168,83,0.2); }
.lang-flag { display:block; width:24px; height:24px; border-radius:3px; pointer-events:none; }
@media(max-width:480px) {
  .lang-trigger { width:40px; height:40px; }
  .lang-flag { width:20px; height:20px; }
}
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  margin:0; padding:6px; list-style:none;
  background:rgba(20,20,20,0.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  display:grid;
  grid-template-columns: repeat(3, auto);
  gap:2px;
  z-index:1;
}
.lang-menu[hidden] { display:none; }
.lang-menu li { margin:0; padding:0; }
.lang-menu button {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:transparent; border:none; border-radius:8px;
  padding:0; cursor:pointer;
  transition: background 0.15s;
}
.lang-menu button:hover,
.lang-menu button:focus-visible { background:rgba(255,255,255,0.12); outline:none; }
@media(max-width:480px) { .lang-menu button { width:36px; height:36px; } }
.lang-select-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); border:0;
}

/* Hero */
.hero {
  position:relative;
  width:100%;
  padding:60px 20px 30px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
body.has-hero-bg .hero::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-content { position:relative; z-index:2; animation:fadeInUp 0.8s ease; }
.hero-logo-text { margin-bottom:12px; line-height:1; }
.hero-logo-top {
  display:block; font-family:var(--font-serif);
  font-size:0.95rem; font-weight:400; color:var(--accent-gold);
  letter-spacing:0.35em; margin-bottom:4px;
}
.hero-logo-bottom {
  display:block; font-family:var(--font-serif);
  font-size:2.8rem; font-weight:800; color:var(--accent-gold);
  letter-spacing:0.08em;
  text-shadow:0 2px 20px rgba(212,168,83,0.3);
}
@media(min-width:761px) {
  .hero-logo-top { font-size:1.1rem; }
  .hero-logo-bottom { font-size:3.6rem; }
}
.tagline {
  font-size:0.75rem;
  color:rgba(255,255,255,0.5);
  font-weight:400;
  letter-spacing:0.28em;
}

/* Landing title — "Elegí tu local" */
.landing-title {
  font-family:var(--font-serif);
  font-size:1.4rem;
  font-weight:600;
  text-align:center;
  color:var(--text-primary);
  margin:12px 0 24px;
  letter-spacing:0.02em;
  animation:fadeInUp 0.6s ease 0.1s both;
}
@media(min-width:761px) { .landing-title { font-size:1.7rem; margin:20px 0 32px; } }

/* Locations */
.locations { display:flex; flex-direction:column; gap:28px; }

.city-group { animation:fadeInUp 0.5s ease both; }
.city-group:nth-child(1) { animation-delay:0.15s; }
.city-group:nth-child(2) { animation-delay:0.25s; }
.city-group:nth-child(3) { animation-delay:0.35s; }

.city-title {
  font-family:var(--font-serif);
  font-size:0.78rem;
  font-weight:500;
  color:var(--accent-gold);
  letter-spacing:0.3em;
  text-transform:uppercase;
  margin:0 0 12px;
  padding-left:4px;
  position:relative;
  display:flex; align-items:center; gap:14px;
}
.city-title::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(212,168,83,0.4), transparent);
}

.location-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:761px) {
  .location-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
}

.location-btn {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:20px 22px;
  background:var(--bg-glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(212,168,83,0.22);
  border-radius:16px;
  color:var(--text-primary);
  text-decoration:none;
  cursor:pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  min-height:78px;
}
.location-btn::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(circle at 50% 120%, var(--accent-gold-dim) 0%, transparent 70%);
  opacity:0; transition:opacity 0.3s ease;
  pointer-events:none;
}
.location-btn:hover, .location-btn:active, .location-btn:focus-visible {
  border-color:rgba(212,168,83,0.7);
  background:rgba(255,255,255,0.06);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,168,83,0.18);
  outline:none;
}
.location-btn:hover::before, .location-btn:active::before, .location-btn:focus-visible::before { opacity:1; }

.location-text { display:flex; flex-direction:column; gap:4px; min-width:0; position:relative; z-index:1; }
.location-name {
  font-family:var(--font-serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-primary);
  line-height:1.2;
  letter-spacing:0.01em;
}
.location-zone {
  font-size:0.72rem;
  font-weight:500;
  color:var(--text-secondary);
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.location-arrow {
  flex-shrink:0;
  color:var(--accent-gold);
  font-size:1.4rem;
  line-height:1;
  opacity:0.65;
  transition: opacity 0.25s ease, transform 0.25s ease;
  position:relative; z-index:1;
}
.location-btn:hover .location-arrow,
.location-btn:focus-visible .location-arrow { opacity:1; transform:translateX(4px); }

/* Skeleton */
.skeleton-group { display:flex; flex-direction:column; gap:12px; opacity:0.6; }
.skeleton-city {
  height:14px; width:140px; border-radius:4px;
  margin-bottom:6px;
  background:linear-gradient(90deg, var(--bg-card) 0%, var(--bg-secondary) 40%, var(--bg-card) 80%);
  background-size:800px 100%; animation:shimmer 1.5s infinite linear;
}
.skeleton-loc {
  min-height:78px; border-radius:16px;
  background:linear-gradient(90deg, var(--bg-card) 0%, var(--bg-secondary) 40%, var(--bg-card) 80%);
  background-size:800px 100%; animation:shimmer 1.5s infinite linear;
}

/* Error / empty state */
.locations-error {
  text-align:center;
  padding:32px 16px;
  color:var(--text-secondary);
  font-size:0.9rem;
}