/* ═══════════════════════════════════════════════════════════════
   VIBEZ HOME — CSS extraído literalmente de vibez-home.html
   Incluye todas las vars, animaciones, media queries y variantes
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #07060c;
  --bg-2: #0d0a18;
  --ink: #f5f1ea;
  --ink-dim: rgba(245,241,234,0.55);
  --ink-faint: rgba(245,241,234,0.18);
  --navy: #0f172a;
  --morado: #7c3aed;
  --morado-2: #a855f7;
  --magenta: #a855f7;
  --magenta-2: #c084fc;
  --cream: #f5f1ea;
  --line: rgba(245,241,234,0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.display {
  font-family: 'Anton', 'Archivo Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.88;
}
.mono {
  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.grain::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.scroll-x { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex;
  gap: 2rem;
  animation: marquee 38s linear infinite;
  white-space: nowrap;
}
.marquee-track.fast { animation-duration: 22s; }
.marquee-track.reverse { animation-direction: reverse; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.twinkle { animation: twinkle 3s ease-in-out infinite; }

.vibe-card { transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease; }
.vibe-card:hover { transform: translateY(-6px) rotate(-0.4deg); }
.vibe-card .img-wrap { overflow: hidden; }
.vibe-card .img-wrap img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 0.6s ease; }
.vibe-card:hover .img-wrap img { transform: scale(1.08); filter: contrast(1.05) saturate(1.1); }

.leaflet-container { background: #0a0814; font-family: 'Archivo', sans-serif; }
.leaflet-tile { filter: invert(1) hue-rotate(200deg) brightness(0.85) contrast(1.1) saturate(0.6); }
.leaflet-control-attribution, .leaflet-control-zoom { display: none; }
.vibez-pin {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--magenta), var(--morado));
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 4px rgba(168,85,247,0.25), 0 8px 28px rgba(168,85,247,0.45);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Anton', sans-serif; font-size: 16px;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.vibez-pin:hover { transform: scale(1.18) rotate(-6deg); }
.vibez-pin.featured {
  width: 54px; height: 54px;
  font-size: 22px;
  box-shadow: 0 0 0 6px rgba(168,85,247,0.2), 0 0 40px rgba(168,85,247,0.7);
  animation: pulse-glow 2.4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(168,85,247,0.2), 0 0 30px rgba(168,85,247,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(168,85,247,0.05), 0 0 60px rgba(168,85,247,0.85); }
}

.parallax-img { will-change: transform; transition: transform 0.1s linear; }
.glow-magenta { text-shadow: 0 0 30px rgba(168,85,247,0.55), 0 0 60px rgba(168,85,247,0.25); }

.star-deco {
  position: absolute;
  pointer-events: none;
  color: var(--magenta);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.btn-primary {
  background: var(--magenta);
  color: var(--cream);
  border: none;
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover { background: var(--cream); color: var(--bg); }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--ink-faint);
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}
.btn-ghost:hover { border-color: var(--cream); background: var(--cream); color: var(--bg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--ink-dim);
  white-space: nowrap;
  background: transparent;
}
.chip:hover { color: var(--ink); border-color: var(--cream); }
.chip.active {
  background: var(--magenta);
  color: var(--cream);
  border-color: var(--magenta);
}

.mood-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--line);
}
.mood-card:hover {
  border-color: var(--magenta);
  transform: translateY(-3px);
}
.mood-card.selected {
  border-color: var(--magenta);
  background: rgba(168,85,247,0.08);
}

body[data-aesthetic="editorial"] { }
body[data-aesthetic="electric"] {
  --magenta: #00ffd1;
  --magenta-2: #6effdb;
  --bg: #04040a;
  --bg-2: #0a0a18;
}
body[data-aesthetic="acid"] {
  --magenta: #d4ff00;
  --magenta-2: #eaff66;
  --bg: #0a0612;
  --bg-2: #14092a;
}
body[data-aesthetic="italo"] {
  --magenta: #a855f7;
  --magenta-2: #c084fc;
}
body[data-aesthetic="lila"] {
  --magenta: #a855f7;
  --magenta-2: #c084fc;
}

body[data-hero="poster"] .hero-poster { display: flex; }
body[data-hero="poster"] .hero-split { display: none; }
body[data-hero="split"] .hero-poster { display: none; }
body[data-hero="split"] .hero-split { display: grid; }
.hero-split { display: none; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, rgba(255,255,255,0.03) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
}
@keyframes skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.modal-back {
  position: fixed; inset: 0;
  background: rgba(7,6,12,0.85);
  backdrop-filter: blur(20px);
  z-index: 9999;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-card { animation: slideUp 0.3s cubic-bezier(.2,.8,.2,1); }

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--bg);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 500;
  animation: toastIn 0.3s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
}

.img-placeholder {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, var(--morado-2), transparent 50%),
              radial-gradient(circle at 70% 60%, var(--magenta), transparent 55%),
              linear-gradient(135deg, var(--navy), #1a0a2e);
}

.num-big {
  font-family: 'Anton', sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-faint);
}

.sticker {
  display: inline-block;
  background: var(--magenta);
  color: var(--cream);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  transform: rotate(-3deg);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-poster, .hero-split { min-height: 80vh !important; }
}

@media (max-width: 780px) {
  /* Las reglas del nav (display, padding) las gestiona partials/home/nav.blade.php */

  .hero-poster > div, .hero-split > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-poster h1, .hero-split h1 {
    font-size: clamp(48px, 14vw, 80px) !important;
    line-height: 0.92 !important;
  }
  .hero-poster > div > div > div { gap: 24px !important; }

  section, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section h2.display, section h3.display {
    font-size: clamp(40px, 10vw, 64px) !important;
  }

  .cards-row, .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .mood-grid { grid-template-columns: 1fr 1fr !important; }

  .map-section > div:last-child { height: 380px !important; }

  .detail-modal {
    grid-template-columns: 1fr !important;
    inset: 0 !important;
    border-radius: 0 !important;
  }
  .detail-modal > div:first-child { min-height: 320px !important; }
  .detail-modal h2.display {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  footer .display { font-size: clamp(56px, 18vw, 120px) !important; }
  .marquee-track .display { font-size: clamp(28px, 7vw, 48px) !important; }
  .vibe-card .img-wrap { aspect-ratio: 4/5 !important; }
  .chips-row { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
  .mood-grid { grid-template-columns: 1fr !important; }
  .hero-poster .pills, .hero-split .pills { flex-wrap: wrap !important; gap: 8px !important; }
  section h2.display, section h3.display {
    font-size: clamp(34px, 11vw, 52px) !important;
  }
}