/* ============================================================
   estilos.css — Victor Prous · Compartido por index.html
   y mapasecreto.html
   ============================================================ */

/* ── TOKENS & RESET ── */
:root {
  --primary: #1f438b;
  --secondary: #fe7a49;
  --bg: #fcf9f8;
  --dark: #1c1b1b;
  --white: #ffffff;
  --font: 'Montserrat', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--dark); overflow-x: hidden; min-height: 100vh; }
::selection { background: var(--secondary); color: #fff; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }
img { display: block; max-width: 100%; border: none; }

/* ── ANIMATIONS ── */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { transform: translate(-50%,-50%) scale(1); opacity: .85; } 100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
@keyframes pulse-dot { 0% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.35); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes fade-in-up { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes ping { 75%,100%{ transform:scale(2); opacity:0; } }
@keyframes bounce-slow { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.animate-fade-in-up { animation: fade-in-up .22s ease forwards; }
.animate-spin-slow  { animation: spin-slow 3s linear infinite; }

/* ── NAV (HOME) ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 4px solid var(--dark);
  box-shadow: 4px 4px 0 rgba(28,27,27,1);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; height: 80px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 0;
}
.nav-brand img { width: 56px; height: 56px; border-radius: 50%; border: none; outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.nav-brand:hover img { transform: rotate(12deg); }
.nav-brand-name { font-weight: 900; font-size: 1.25rem; color: var(--primary); text-transform: uppercase; letter-spacing: -.03em; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  font-weight: 900; font-size: .75rem; text-transform: uppercase;
  color: var(--dark); background: none; border: none;
  display: flex; align-items: center; gap: 6px; transition: color .15s;
}
.nav-link svg { width:16px; height:16px; color: var(--secondary); }
.nav-link:hover { color: var(--secondary); }
.btn-cta {
  background: var(--secondary); color: #fff;
  border: 3px solid var(--dark); font-weight: 800; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em; padding: 10px 20px;
  box-shadow: 3px 3px 0 var(--dark); transition: box-shadow .1s, transform .1s;
}
.btn-cta:hover  { box-shadow: none; background: #ff8e63; }
.btn-cta:active { transform: translate(1px,1px); box-shadow: none; }
@media(max-width:768px){
  .nav-links { display:none; }
  .btn-cta { font-size: .52rem; padding: 7px 8px; box-shadow: 2px 2px 0 var(--dark); }
}

/* ── HERO ── */
.hero { position: relative; padding: 9rem 1.5rem; background: #1c1b1b; border-bottom: 4px solid var(--dark); overflow: hidden; }
.hero-bg { position: absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; filter: brightness(.65) contrast(1.1) saturate(1.2); }
.hero-bg-overlay { position: absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2), transparent); }
.hero-inner { position: relative; z-index: 10; max-width: 900px; margin:0 auto; text-align:center; }
.hero-badge { display: inline-block; background: #dae2ff; color: #20438b; border: 2px solid #20438b; padding: 6px 16px; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 5rem); font-weight: 900; color: #fff; text-transform: uppercase; line-height: 1; letter-spacing: -.03em; margin-bottom: 2rem; }
.hero h1 .accent { color: var(--secondary); font-style: italic; display: block; }
@media(min-width:640px){ .hero h1 .accent { display:inline; } }
.hero-desc { font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 700; color: #fff; max-width: 640px; margin: 0 auto 2.5rem; line-height: 1.6; }
.hero-ctas { display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 400px; margin: 0 auto; }
@media(min-width:640px){ .hero-ctas { flex-direction:row; } }
.btn-hero-primary, .btn-hero-secondary {
  font-weight: 900; font-size: .75rem; text-transform: uppercase;
  padding: 16px 32px; border: 3px solid var(--dark);
  display: flex; align-items: center; gap: 8px; justify-content: center;
  transition: box-shadow .1s, transform .1s;
}
.btn-hero-primary { background: var(--secondary); color:#fff; box-shadow: 4px 4px 0 var(--dark); }
.btn-hero-primary:hover { box-shadow:none; background:#ff8e63; }
.btn-hero-secondary { background: #fff; color: var(--dark); box-shadow: 4px 4px 0 var(--dark); }
.btn-hero-secondary:hover { box-shadow:none; }
.btn-hero-primary:active, .btn-hero-secondary:active { transform:translate(2px,2px); box-shadow:none; }
.btn-hero-primary svg, .btn-hero-secondary svg { width:20px; height:20px; }

/* ── MARQUEE ── */
.marquee-strip { width:100%; padding: 1.5rem 0; overflow:hidden; border-top: 4px solid var(--dark); border-bottom: 4px solid var(--dark); background: var(--secondary); user-select: none; }
.marquee-track { display: flex; width: max-content; animation: marquee 24s linear infinite; }
.marquee-item { font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.75rem); text-transform: uppercase; letter-spacing: .05em; font-style: italic; padding: 0 1rem; }
.marquee-item.dark, .marquee-item.dk  { color: var(--dark); }
.marquee-item.light,.marquee-item.lt  { color: #fff; }
.marquee-food .marquee-item { font-size: 1.1rem; padding: 0 .75rem; }
.marquee-food .marquee-track { animation-duration: 40s; }

/* ── SECTIONS SHARED ── */
.section-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.section-center { text-align:center; }
.badge-orange { display: inline-block; background: var(--secondary); color:#fff; border: 2px solid var(--dark); padding: 6px 16px; font-weight: 900; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.badge-blue   { display: inline-block; background: #dae2ff; color: var(--primary); border: 2px solid var(--primary); padding: 6px 16px; font-weight: 900; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.section-title { font-size: clamp(1.75rem, 5vw, 3.2rem); font-weight: 900; text-transform: uppercase; color: var(--primary); letter-spacing: -.03em; margin-bottom: 1rem; }
.section-desc  { font-size: .875rem; font-weight: 700; color: #4b5563; max-width: 640px; margin: 0 auto 2rem; line-height: 1.6; }

/* ── MAP TEASER ── */
.section-map-teaser { padding: 5rem 1.5rem; background: #fff; border-bottom: 4px solid var(--dark); position: relative; overflow: hidden; }
.section-map-teaser::before { content:''; position:absolute; inset:0; opacity:.05; background: repeating-linear-gradient(45deg, var(--primary) 0, var(--primary) 15px, transparent 0, transparent 50%) 0/40px 40px; }
.map-teaser-card { background: var(--bg); border: 4px solid var(--dark); box-shadow: 6px 6px 0 var(--dark); padding: 2rem; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; align-items: center; }
@media(min-width:768px){ .map-teaser-card { flex-direction:row; justify-content:space-between; } }
.map-teaser-features h3 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 1rem; }
.map-teaser-features ul { list-style:none; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
.map-teaser-features li { display:flex; align-items:center; gap:8px; font-size: .8rem; font-weight: 700; color: #374151; }
.map-teaser-features li span.icon { font-size: 1.1rem; }
.map-teaser-cta { display:flex; flex-direction:column; align-items:center; gap:1rem; flex-shrink:0; }
.map-teaser-cta img { width:80px; height:80px; border-radius:50%; border:3px solid var(--dark); box-shadow:3px 3px 0 var(--dark); transition:transform .2s; }
.map-teaser-cta img:hover { transform:rotate(12deg); }
.btn-unlock { background: var(--primary); color:#fff; border: 3px solid var(--dark); font-weight: 900; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 14px 28px; box-shadow: 4px 4px 0 var(--dark); display:flex; align-items:center; gap:8px; transition: box-shadow .1s, transform .1s; }
.btn-unlock:hover { box-shadow:none; background:#2e5bb5; }
.btn-unlock:active { transform:translate(2px,2px); box-shadow:none; }
.btn-unlock svg { width:16px; height:16px; color: var(--secondary); }

/* ── GLOSSARY TEASER ── */
.section-glossary-teaser { padding: 5rem 1.5rem; background: var(--dark); border-bottom: 4px solid var(--dark); color: #fff; }
.glossary-teaser-grid { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; align-items: center; }
@media(min-width: 1024px){ .glossary-teaser-grid { flex-direction: row; justify-content: space-between; } }
.glossary-teaser-text { flex: 1; }
.glossary-teaser-text .section-title { color: #fff; }
.glossary-teaser-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.g-chip { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: #e2e8f0; font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; }
.btn-glossary { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary); color: #fff; border: 3px solid #fff; font-family: var(--font); font-weight: 900; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: 14px 28px; box-shadow: 4px 4px 0 rgba(255,255,255,.3); transition: box-shadow .1s, transform .1s, background .1s; }
.btn-glossary:hover  { box-shadow: none; background: #ff8e63; }
.btn-glossary:active { transform: translate(2px,2px); box-shadow: none; }
.btn-glossary svg { width: 18px; height: 18px; }
.glossary-teaser-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; flex-shrink: 0; width: 100%; }
@media(min-width: 1024px){ .glossary-teaser-imgs { width: 400px; } }
.glossary-teaser-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid rgba(255,255,255,.3); filter: brightness(.8) contrast(1.1); transition: filter .3s, border-color .3s; }
.glossary-teaser-imgs img:hover { filter: brightness(1) contrast(1.1); border-color: var(--secondary); }

/* ── ROULETTE ── */
.section-roulette { padding: 4rem 1.5rem; background: var(--primary); color: #fff; border-top: 4px solid var(--dark); border-bottom: 4px solid var(--dark); position:relative; overflow:hidden; }
.section-roulette::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.2; background: radial-gradient(#fff 2px, transparent 2px) 0/20px 20px; }
.roulette-card { background: var(--dark); border: 4px solid #fff; box-shadow: 6px 6px 0 #000; padding: 1.5rem 2rem; max-width: 460px; margin: 0 auto; width:100%; }
.roulette-idle { padding: 2rem 0; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.roulette-idle img { width:64px; height:64px; border-radius:50%; border:1px solid #fff; }
.roulette-idle p { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#9ca3af; }
.roulette-result { display:none; }
.roulette-result.active { display:block; }
.roulette-result .cat-badge { background: var(--secondary); color:#fff; font-weight:900; font-size:.6rem; letter-spacing:.12em; padding: 3px 8px; border:1px solid #000; text-transform:uppercase; display:inline-block; margin-bottom:.5rem; }
.roulette-result h4 { font-size:clamp(1.4rem,5vw,2rem); font-weight:900; color: var(--secondary); text-transform:uppercase; letter-spacing:-.03em; line-height:1.1; margin-bottom:.5rem; word-break:break-word; }
.roulette-result .loc { font-size:.7rem; font-weight:700; color: #9ca3af; display:flex; align-items:center; gap:6px; margin-bottom:.75rem; }
.roulette-result .loc svg { width:14px; height:14px; color:var(--secondary); }
.roulette-result .specialty-block { border-top: 1px dashed rgba(255,255,255,.2); padding-top:.75rem; margin-bottom:.75rem; }
.roulette-result .specialty-label { font-size:.65rem; font-family: var(--mono); font-weight:700; color:var(--secondary); text-transform:uppercase; margin-bottom:.25rem; }
.roulette-result .specialty-val { font-size:.85rem; font-weight:900; color:#fff; }
.roulette-result .review-excerpt { font-size:.75rem; font-style:italic; color:#9ca3af; line-height:1.5; padding: 0 1rem; margin-bottom:1rem; }
.btn-locate-map { display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:#fff; border:2px solid #fff; font-weight:800; font-size:.7rem; text-transform:uppercase; padding:10px 20px; transition: background .15s; }
.btn-locate-map:hover { background:var(--secondary); }
.btn-locate-map svg { width:16px; height:16px; }
.btn-spin { width:100%; margin-top:1.5rem; background: var(--secondary); color:#fff; border: 2px solid #fff; font-weight:900; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; padding: 12px; box-shadow: 3px 3px 0 rgba(0,0,0,.5); transition: box-shadow .1s, transform .1s, opacity .15s; }
.btn-spin:hover  { box-shadow:none; }
.btn-spin:active { transform:translateY(2px); box-shadow:none; }
.btn-spin:disabled { opacity:.8; transform:scale(.97); cursor:not-allowed; }

/* ── CONTENT ── */
.section-content { padding: 5rem 1.5rem; background: #070707; color:#fff; }
.content-header { display:flex; flex-direction:column; gap:1.5rem; margin-bottom: 3rem; }
@media(min-width:768px){ .content-header { flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.warning-tape { background: var(--secondary); border: 1px solid #000; padding: 3px 12px; display:inline-block; margin-bottom:.75rem; }
.warning-tape span { font-size:.6rem; font-weight:900; letter-spacing:.12em; color:#fff; text-transform:uppercase; }
.content-header h2 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 900; text-transform:uppercase; line-height:1; letter-spacing:-.03em; }
.content-header h2 span { color:var(--secondary); }
.content-header p { font-size:.9rem; font-weight:600; color:#e2e8f0; margin-top:.5rem; padding-left:1rem; border-left:4px solid var(--secondary); max-width: 560px; line-height:1.5; }
.social-badge { font-size:.65rem; font-weight:900; letter-spacing:.12em; color:var(--secondary); text-transform:uppercase; }
.social-icons { display:flex; gap:.5rem; margin-top:.5rem; }
.social-icon { background:#fff; color:var(--dark); border:2px solid #000; width:34px; height:34px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.social-icon:hover { background:var(--secondary); color:#fff; }
.social-icon svg { width:16px; height:16px; }
.content-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:1024px){ .content-grid { grid-template-columns:7fr 5fr; } }
.video-featured-wrap { position:relative; cursor:pointer; border:3px solid #fff; overflow:hidden; box-shadow:6px 6px 0 #000; background:#000; }
.video-featured-wrap + .video-featured-wrap { margin-top:2rem; }
.video-featured-inner { position:relative; aspect-ratio:16/9; }
.video-featured-inner img { width:100%; height:100%; object-fit:cover; filter:brightness(.75); transition: filter .3s; }
.video-featured-wrap:hover .video-featured-inner img { filter:brightness(.9); }
.video-sticker-badge { position:absolute; top:1rem; left:1rem; z-index:5; }
.video-sticker-badge img { width:72px; height:72px; border-radius:50%; border:2px solid #fff; transition:transform .2s; }
.video-sticker-badge img:hover { transform:scale(1.1); }
.video-info-overlay { position:absolute; bottom:0; left:0; right:0; z-index:5; padding:1.5rem; background:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.4), transparent); }
.video-category-badge { background:var(--primary); color:#fff; font-weight:700; font-size:.6rem; letter-spacing:.12em; padding: 4px 10px; border:2px solid #fff; text-transform:uppercase; display:inline-block; margin-bottom:.75rem; }
.video-info-overlay h3 { font-size:clamp(1rem,3vw,1.4rem); font-weight:900; text-transform:uppercase; color:#fff; line-height:1.2; letter-spacing:-.02em; }
.video-stats { display:flex; gap:1rem; margin-top:.75rem; font-size:.7rem; font-weight:700; color:#cbd5e1; }
.video-stats span { display:flex; align-items:center; gap:4px; }
.video-stats svg { width:14px; height:14px; }
.play-overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.video-featured-wrap:hover .play-overlay { opacity:1; }
.play-circle { background:var(--primary); border:4px solid #fff; border-radius:50%; width:72px; height:72px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,.4); }
.play-circle svg { width:32px; height:32px; color:#fff; fill:#fff; }
.reels-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid rgba(31,67,139,.4); }
.reels-header h3 { display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:var(--secondary); }
.reels-header h3 svg { width:14px; height:14px; }
.reels-header span { font-size:.7rem; font-weight:700; color:#e2e8f0; }
.reels-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.reel-card { position:relative; aspect-ratio:9/16; border:2px solid rgba(255,255,255,.2); overflow:hidden; cursor:pointer; background:#1c1b1b; transition: border-color .15s; box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.reel-card:hover { border-color:#fff; }
.reel-card img { width:100%; height:100%; object-fit:cover; filter:brightness(.75); transition: transform .3s, filter .3s; }
.reel-card:hover img { transform:scale(1.05); filter:brightness(.9); }
.reel-badge-top { position:absolute; top:.5rem; left:.5rem; z-index:5; width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--dark); display:flex; align-items:center; justify-content:center; }
.reel-badge-top img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.reel-info { position:absolute; bottom:0; left:0; right:0; padding:.75rem; background:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.6), transparent); }
.reel-type { font-size:.55rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:var(--secondary); margin-bottom:.25rem; display:block; }
.reel-title { font-size:.7rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.reel-views { display:flex; align-items:center; gap:4px; font-size:.65rem; font-weight:700; color:#cbd5e1; margin-top:.4rem; }
.reel-views svg { width:12px; height:12px; }
.reel-play { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.reel-card:hover .reel-play { opacity:1; }
.reel-play-circle { background:rgba(255,255,255,.9); border:2px solid #000; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.reel-play-circle svg { width:16px; height:16px; fill:#000; color:#000; }

/* ── ABOUT ── */
.section-about { padding: 6rem 1.5rem; background: var(--bg); border-bottom: 4px solid var(--dark); }
.about-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media(min-width:1024px){ .about-grid { grid-template-columns:7fr 5fr; } }
.about-title { font-size:clamp(1.75rem,5vw,3rem); font-weight:900; text-transform:uppercase; color:var(--primary); line-height:1; letter-spacing:-.03em; margin-bottom:1.5rem; }
.about-title span { color:var(--secondary); font-style:italic; text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:4px; }
.about-text { font-size:clamp(.9rem,2vw,1.1rem); font-weight:600; color:var(--dark); line-height:1.6; margin-bottom:1.5rem; }
.about-blockquote { background:#fff; border-left:4px solid #a63a0c; padding:1rem 1.25rem; font-size:.85rem; font-weight:600; font-style:italic; color:#4b5563; margin-bottom:1.5rem; }
.about-checks { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.about-check { display:flex; align-items:flex-start; gap:.625rem; }
.check-icon { width:20px; height:20px; color:var(--secondary); flex-shrink:0; margin-top:1px; }
.about-check p { font-size:.75rem; font-weight:700; color:var(--dark); }
.portrait-wrapper { display:flex; justify-content:center; }
.portrait-frame { position:relative; width: min(320px, 85vw); aspect-ratio:1; border: 8px solid var(--primary); background: var(--dark); box-shadow: 8px 8px 0 var(--dark); transform:rotate(3deg); overflow:hidden; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; filter:brightness(1.05) contrast(1.15) saturate(1.25); transition:transform .5s; }
.portrait-frame:hover img { transform:scale(1.05); }
.portrait-caption { position:absolute; bottom:0; left:0; right:0; background:rgba(31,67,139,.95); color:#fff; font-weight:900; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; text-align:center; padding:.5rem; border-top:1px solid #000; }

/* ── FOOTER (HOME) ── */
.footer { background: var(--primary); border-top: 4px solid var(--secondary); color: #fff; padding: 4rem 1.5rem; }
.footer-inner { max-width:1280px; margin:0 auto; }
.footer-main { display:flex; flex-direction:column; gap:2rem; align-items:center; padding-bottom:2rem; border-bottom: 2px solid rgba(255,255,255,.1); }
@media(min-width:768px){ .footer-main { flex-direction:row; justify-content:space-between; } }
.footer-brand-name { font-weight:900; font-size:1.5rem; text-transform:uppercase; letter-spacing:-.03em; color:var(--secondary); display:block; }
.footer-copy { font-size:.7rem; font-weight:600; color:#9ca3af; margin-top:.375rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.footer-link { font-size:.75rem; font-weight:700; color:#fff; transition:color .15s; }
.footer-link:hover { color:var(--secondary); }
.footer-socials { display:flex; gap:.75rem; }
.footer-social { background:rgba(32,67,139,1); color:#fff; border:2px solid #fff; padding:.625rem; transition:background .15s, border-color .15s, color .15s; }
.footer-social:hover { background:var(--secondary); border-color:#000; color:#fff; }
.footer-social svg { width:16px; height:16px; }
.footer-bottom { padding-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; align-items:center; font-size:.7rem; font-weight:600; color:#9ca3af; }
@media(min-width:640px){ .footer-bottom { flex-direction:row; justify-content:space-between; } }
.footer-bottom .flame { display:flex; align-items:center; gap:.375rem; }

/* ── SCROLL TO TOP ── */
#btn-scroll-top { position:fixed; bottom:1.5rem; right:1.5rem; z-index:40; background:#fff; color:var(--dark); border:3px solid #000; padding:.875rem; box-shadow:3px 3px 0 var(--dark); transition: box-shadow .1s, transform .1s, opacity .2s; display:none; }
#btn-scroll-top.visible { display:block; }
#btn-scroll-top:hover { box-shadow:none; }
#btn-scroll-top:active { transform:translate(1px,1px); box-shadow:none; }
#btn-scroll-top svg { width:20px; height:20px; }

/* ── MAP PAGE NAV ── */
.map-nav { position:sticky; top:0; z-index:50; background:#fff; border-bottom:4px solid var(--dark); box-shadow:4px 4px 0 var(--dark); }
.map-nav-inner { max-width:1280px; margin:0 auto; padding: 0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:80px; }
.map-nav-brand { display:flex; align-items:center; gap:12px; background:none; border:none; text-decoration:none; }
.map-nav-brand img { width:56px; height:56px; border-radius:50%; border:none; outline:none; box-shadow:none; transition:transform .2s; -webkit-tap-highlight-color: transparent; }
.map-nav-brand:hover img { transform:rotate(-12deg); }
.map-nav-brand-text .name { display:block; font-weight:900; font-size:1.1rem; color:var(--primary); text-transform:uppercase; letter-spacing:-.03em; line-height:1; }
.map-nav-brand-text .back-hint { display:block; font-size:.65rem; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; animation: bounce-slow 2s infinite; }
.map-nav-title { font-weight:900; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; display:none; }
@media(min-width:768px){ .map-nav-title { display:block; } }
.btn-back-home { background:#fff; color:var(--dark); border:2px solid var(--dark); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:10px 20px; box-shadow:3px 3px 0 var(--dark); display:flex; align-items:center; gap:6px; transition:box-shadow .1s, transform .1s; }
.btn-back-home:hover { box-shadow:none; }
.btn-back-home:active { transform:translate(1px,1px); box-shadow:none; }
.btn-back-home svg { width:16px; height:16px; }

/* ── MAP HERO ── */
.map-hero { padding: 2.5rem 1.5rem; background: var(--dark); border-bottom:4px solid var(--dark); color:#fff; position:relative; overflow:hidden; text-align:center; }
.map-hero::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.15; background: radial-gradient(#fff 2px, transparent 2px) 0/20px 20px; }
.map-hero .inner { position:relative; z-index:1; max-width:1280px; margin:0 auto; }
.map-hero h2 { font-size:clamp(1.75rem,5vw,3rem); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; margin-bottom:.5rem; }
.map-hero p { font-size:.8rem; font-weight:700; color:#d1d5db; max-width:560px; margin:0 auto; line-height:1.6; }
.map-hero p span { color:var(--secondary); }

/* ── MAP CONTROLS ── */
.map-controls { max-width:1280px; margin:0 auto; padding: 1.5rem 1.5rem 0; }
.map-controls-row { display:flex; flex-direction:column; gap:1rem; justify-content:space-between; align-items:flex-start; }
@media(min-width:768px){ .map-controls-row { flex-direction:row; align-items:center; } }
.map-scope-switcher { display:flex; background:#fff; padding:4px; border:3px solid var(--dark); box-shadow:3px 3px 0 var(--dark); flex-shrink:0; }
.scope-btn { padding:8px 16px; font-weight:900; font-size:.7rem; text-transform:uppercase; border:none; transition:background .15s, color .15s; white-space:nowrap; }
.scope-btn.active { background:var(--primary); color:#fff; }
.scope-btn:not(.active) { background:transparent; color:var(--dark); }
.scope-btn:not(.active):hover { background:var(--bg); }
.map-filters-row { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
@media(min-width:640px){ .map-filters-row { flex-direction:row; align-items:center; } }
.category-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.cat-btn { padding:6px 12px; border:3px solid var(--dark); font-weight:900; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; transition:all .1s; }
.cat-btn.active { background:var(--secondary); color:#fff; box-shadow:none; transform:translate(1px,1px); }
.cat-btn:not(.active) { background:#fff; color:var(--dark); box-shadow:2px 2px 0 var(--dark); }
.cat-btn:not(.active):hover { background:var(--bg); }
.search-wrap { position:relative; width:100%; }
@media(min-width:640px){ .search-wrap { width:256px; flex-shrink:0; } }
.search-wrap input { width:100%; padding:8px 12px 8px 36px; border:3px solid var(--dark); font-family:var(--font); font-weight:700; font-size:.75rem; background:#fff; color:var(--dark); outline:none; box-shadow:2px 2px 0 var(--dark); }
.search-wrap input::placeholder { color:#9ca3af; }
.search-wrap input:focus { box-shadow:2px 2px 0 var(--primary); border-color:var(--primary); }
.search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:#6b7280; pointer-events:none; }

/* ── MAP CONTAINER ── */
.map-container { width:100%; height: 550px; background:#fff; border-top:4px solid var(--dark); border-bottom:4px solid var(--dark); position:relative; overflow:hidden; z-index:10; margin-top:1.5rem; margin-bottom:2rem; flex-shrink:0; }
@media(min-height:700px){ .map-container { height: 680px; } }
#leaflet-map { width:100%; height:100%; }

/* ── Leaflet popup neo-brutalist ── */
.leaflet-popup-content-wrapper { border-radius: 0 !important; border: 3px solid #1c1b1b !important; box-shadow: 5px 5px 0 #1c1b1b !important; padding: 0 !important; overflow: hidden; }
.leaflet-popup-content { margin: 0 !important; min-width: 240px; max-width: 290px; }
.leaflet-popup-tip { background: #1c1b1b !important; }
.leaflet-popup-close-button { color: #1c1b1b !important; font-size: 16px !important; font-weight: 900 !important; top: 5px !important; right: 7px !important; z-index: 10; }
.leaflet-popup-close-button:hover { color: #fe7a49 !important; }
.vp-popup { font-family: 'Montserrat', sans-serif; }
.vp-popup-header { background: #fe7a49; color: #fff; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; }
.vp-popup-score { font-size: .7rem; }
.vp-popup-body { padding: .75rem .8rem; }
.vp-popup-name { font-size: .9rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; color: #1c1b1b; margin-bottom: .35rem; padding-right: 14px; }
.vp-popup-addr { font-size: .62rem; font-weight: 700; color: #6b7280; display: flex; align-items: flex-start; gap: 4px; margin-bottom: .6rem; }
.vp-popup-addr svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; color: #1f438b; }
.vp-popup-specialty { background: #fcf9f8; border: 2px solid #1c1b1b; padding: .4rem .55rem; margin-bottom: .65rem; box-shadow: 2px 2px 0 #1c1b1b; }
.vp-popup-specialty-lbl { font-size: .48rem; font-weight: 900; color: #1f438b; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.vp-popup-specialty-val { font-size: .72rem; font-weight: 900; text-transform: uppercase; color: #1c1b1b; line-height: 1.3; }
.vp-popup-rating { font-size: .65rem; font-weight: 900; color: #1c1b1b; margin-bottom: .6rem; }
.vp-popup-rating span { color: #fe7a49; }
.vp-popup-ig { display: flex; align-items: center; justify-content: center; gap: 6px; background: #e1306c; color: #fff; border: 2px solid #1c1b1b; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: .62rem; text-transform: uppercase; padding: 8px 10px; text-decoration: none; width: 100%; box-shadow: 2px 2px 0 #1c1b1b; transition: background .1s; }
.vp-popup-ig:hover { background: #fd4d87; }
.vp-popup-ig svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── MAP HUDs ── */
.map-hud-top { position:absolute; top:1rem; left:1rem; background:var(--bg); border:3px solid var(--dark); padding:6px 10px; z-index:1000; pointer-events:none; font-family:var(--mono); font-weight:900; font-size:.55rem; text-transform:uppercase; letter-spacing:.12em; color:var(--primary); box-shadow:2px 2px 0 var(--dark); display:flex; align-items:center; gap:6px; }
.ping-dot { width:8px; height:8px; border-radius:50%; background:var(--secondary); animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }
.map-hud-bottom { position:absolute; bottom:1rem; left:1rem; display:none; background:rgba(28,27,27,.9); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(4px); color:#fff; font-family:var(--mono); font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; z-index:1000; pointer-events:none; }
@media(min-width:640px){ .map-hud-bottom { display:block; } }
.map-zoom-hud { position:absolute; top:1rem; right:1rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; }
.zoom-btn, .reset-btn { background:#fff; border:3px solid var(--dark); font-weight:900; font-size:1.1rem; color:var(--dark); box-shadow:2px 2px 0 var(--dark); transition:all .1s; display:flex; align-items:center; justify-content:center; }
.zoom-btn { width:40px; height:40px; }
.reset-btn { padding: 6px 10px; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }
.zoom-btn:hover,.reset-btn:hover { background:var(--secondary); color:#fff; box-shadow:none; }
.zoom-btn:active,.reset-btn:active { transform:translate(1px,1px); box-shadow:none; }
.map-empty-overlay { position:absolute; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.95); padding:1.5rem; }
.map-empty-overlay p { font-size:.85rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; text-align:center; margin-bottom:1rem; }
.btn-clear-filters { background:var(--primary); color:#fff; border:2px solid var(--dark); font-weight:900; font-size:.75rem; text-transform:uppercase; padding:8px 16px; box-shadow:3px 3px 0 var(--dark); }
.btn-clear-filters:active { transform:translateY(2px); box-shadow:none; }

/* ── MAP FOOTER ── */
.copy-toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:50; background:var(--primary); color:#fff; border:2px solid #fff; padding:12px 20px; font-weight:700; font-size:.75rem; text-transform:uppercase; box-shadow:0 4px 12px rgba(0,0,0,.3); display:none; animation: fade-in-up .2s ease forwards; white-space:nowrap; }
.copy-toast.visible { display:block; }
.map-footer { background:var(--primary); border-top:4px solid var(--dark); color:#fff; padding:2.5rem 1.5rem; text-align:center; margin-top:auto; }
.map-footer span { font-family:var(--mono); font-size:.65rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:var(--secondary); display:block; margin-bottom:.5rem; }
.map-footer p { font-size:.75rem; font-weight:600; color:#d1d5db; }

/* Leaflet tooltip */
.custom-leaflet-tooltip { background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; }
.custom-leaflet-tooltip::before { display:none!important; }