/* =========================================================================
   Base Dark Theme Presets & Custom Palette Fallbacks
   ========================================================================= */
:root {
  color-scheme: dark;
}

html, body {
  background-color: #030712 !important;
  color: #f8fafc !important;
}

.bg-obsidian-950 { background-color: #030712 !important; }
.bg-obsidian-900 { background-color: #060D21 !important; }
.bg-obsidian-850 { background-color: #0A1536 !important; }
.bg-obsidian-800 { background-color: #0E1D47 !important; }
.bg-obsidian-750 { background-color: #15285E !important; }
.bg-obsidian-700 { background-color: #1D357A !important; }

/* =========================================================================
   Latinos Marketplace Canada - Main Custom Stylesheet
   ========================================================================= */

.snap-container {
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
      overflow-y: scroll;
    }
    .snap-item {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .royal-gradient-text {
      background: linear-gradient(135deg, #FFFFFF 0%, #93C5FD 50%, #3B82F6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .canadian-gradient-text {
      background: linear-gradient(135deg, #FF8588 0%, #EF2327 55%, #B80C10 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .royal-border {
      border: 1px solid rgba(59, 130, 246, 0.28);
    }
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .glass-dock {
      background: rgba(10, 21, 54, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(59, 130, 246, 0.3);
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.85), 0 0 15px rgba(239, 35, 39, 0.15);
    }
    @keyframes menuPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 35, 39, 0.35), 0 0 12px rgba(0, 27, 113, 0.25);
        border-color: rgba(59, 130, 246, 0.55);
      }
      50% {
        box-shadow: 0 0 14px 2px rgba(239, 35, 39, 0.6), 0 0 18px rgba(239, 35, 39, 0.3);
        border-color: rgba(239, 35, 39, 0.9);
      }
    }
    .menu-btn-pulse {
      animation: menuPulse 2.6s infinite ease-in-out;
    }
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    .animate-float {
      animation: floatSlow 4.5s ease-in-out infinite;
    }
    @keyframes ctaShimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .cta-shimmer {
      background: linear-gradient(90deg, #D11519 0%, #FF474B 50%, #D11519 100%);
      background-size: 200% 100%;
      animation: ctaShimmer 3.5s infinite linear;
    }
    /* Animaciones de navegación automática dentro de los 5 móviles del showcase */
    @keyframes phoneScrollGrid {
      0%, 12% { transform: translateY(0%); }
      45%, 58% { transform: translateY(-36%); }
      88%, 100% { transform: translateY(0%); }
    }
    @keyframes phoneScrollReels {
      0%, 18% { transform: translateY(0%); }
      38%, 56% { transform: translateY(-33.333%); }
      74%, 90% { transform: translateY(-66.666%); }
      100% { transform: translateY(0%); }
    }
    @keyframes fingerTapPulse {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.18); opacity: 1; }
    }
    .animate-phone-grid-1 {
      animation: phoneScrollGrid 9s ease-in-out infinite;
    }
    .animate-phone-grid-2 {
      animation: phoneScrollGrid 11s ease-in-out infinite 1.5s;
    }
    .animate-phone-reels-1 {
      animation: phoneScrollReels 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    .animate-phone-reels-2 {
      animation: phoneScrollReels 14s cubic-bezier(0.65, 0, 0.35, 1) infinite 2s;
    }
    .animate-phone-reels-3 {
      animation: phoneScrollReels 13s cubic-bezier(0.65, 0, 0.35, 1) infinite 1s;
    }
    /* Estilos personalizados para el Mapa Interactivo Dark Luxury */
    .leaflet-container {
      background: #030712 !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .leaflet-popup-content-wrapper {
      background: rgba(6, 13, 33, 0.96) !important;
      color: #f8fafc !important;
      border: 1px solid rgba(59, 130, 246, 0.45) !important;
      border-radius: 20px !important;
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(239, 35, 39, 0.25) !important;
      padding: 0 !important;
    }
    .leaflet-popup-content {
      margin: 12px !important;
      line-height: 1.4 !important;
    }
    .leaflet-popup-tip {
      background: #060D21 !important;
      border: 1px solid rgba(59, 130, 246, 0.45) !important;
    }
    .custom-map-pin {
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .custom-map-pin:hover {
      transform: scale(1.16) translateY(-4px);
      z-index: 999 !important;
    }

/* ===== v8: GLASSMORPHISM + HUB MESA QR + FAQ ACORDEÓN + NAV MÓVIL ===== */
    .glass-card {
      background: linear-gradient(145deg, rgba(21, 40, 94, 0.55) 0%, rgba(6, 13, 33, 0.55) 100%);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      border: 1px solid rgba(147, 197, 253, 0.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 34px -14px rgba(0,0,0,0.85);
    }
    .glass-card-hover { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .glass-card-hover:hover { border-color: rgba(239, 35, 39, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 36px -12px rgba(239,35,39,0.35); }
    .glass-card-hover:active { transform: scale(0.97); }
    .hub-bg {
      background:
        radial-gradient(60% 40% at 15% 10%, rgba(0, 27, 113, 0.55) 0%, transparent 70%),
        radial-gradient(50% 35% at 90% 55%, rgba(239, 35, 39, 0.22) 0%, transparent 70%),
        radial-gradient(60% 40% at 30% 100%, rgba(59, 130, 246, 0.18) 0%, transparent 70%),
        #030712;
    }
    @keyframes hubCtaGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(59,130,246,0.45), 0 0 26px -6px rgba(59,130,246,0.55), 0 0 40px -12px rgba(239,35,39,0.35); }
      50% { box-shadow: 0 0 0 1px rgba(239,35,39,0.7), 0 0 30px -4px rgba(239,35,39,0.55), 0 0 44px -10px rgba(59,130,246,0.45); }
    }
    .hub-cta-glow { animation: hubCtaGlow 3s ease-in-out infinite; }
    .hub-slide { transition: opacity .9s ease, transform 6s ease; }
    .hub-slide.is-active { opacity: 1; transform: scale(1.06); }
    .hub-slide:not(.is-active) { opacity: 0; transform: scale(1); }
    @media (prefers-reduced-motion: reduce) {
      .hub-slide, .hub-cta-glow { animation: none !important; transition: none !important; transform: none !important; }
    }
    /* FAQ acordeón nativo (<details>) */
    .faq-item > summary { list-style: none; }
    .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-item .faq-chevron { transition: transform .25s ease; }
    .faq-item[open] .faq-chevron { transform: rotate(180deg); }
    .faq-item[open] { border-color: rgba(239, 35, 39, 0.55); }
    .faq-item > summary:focus-visible { outline: 2px solid #3B82F6; outline-offset: -2px; border-radius: 1rem; }
    /* Nav inferior móvil */
    .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
    .mnav-btn.is-active { color: #FF3B3F; }
    /* v9: Menú hamburguesa móvil */
    .mobile-menu-panel { transform-origin: top; transition: opacity .2s ease, transform .2s ease; }
    .mobile-menu-panel.is-closed { opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; }
    .mm-item.is-active { background: linear-gradient(90deg, #D11519, #EF2327); color: #fff; border-color: transparent; box-shadow: 0 0 25px -4px rgba(239, 35, 39, 0.5); }
    .hamburger-line { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
    #mobile-menu-toggle[aria-expanded="true"] .hl-1 { transform: translateY(6px) rotate(45deg); }
    #mobile-menu-toggle[aria-expanded="true"] .hl-2 { opacity: 0; }
    #mobile-menu-toggle[aria-expanded="true"] .hl-3 { transform: translateY(-6px) rotate(-45deg); }
    /* v9: Botón central animado (Menú demo) */
    @keyframes centerRing {
      0% { transform: scale(1); opacity: .75; }
      100% { transform: scale(1.75); opacity: 0; }
    }
    @keyframes centerFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes centerGlow {
      0%, 100% { box-shadow: 0 0 0 2px rgba(59,130,246,.75), 0 0 18px rgba(59,130,246,.45); }
      50% { box-shadow: 0 0 0 2px rgba(239,35,39,.95), 0 0 24px rgba(239,35,39,.6); }
    }
    .center-menu-btn { animation: centerFloat 2.6s ease-in-out infinite, centerGlow 2.6s ease-in-out infinite; }
    .center-menu-btn::before, .center-menu-btn::after {
      content: ''; position: absolute; inset: 0; border-radius: 9999px;
      border: 2px solid rgba(239, 35, 39, .7); animation: centerRing 2.2s ease-out infinite; pointer-events: none;
    }
    .center-menu-btn::after { border-color: rgba(59, 130, 246, .7); animation-delay: 1.1s; }
    @media (prefers-reduced-motion: reduce) {
      .center-menu-btn, .center-menu-btn::before, .center-menu-btn::after { animation: none !important; }
    }
    .mmap-chip.is-active { background: #EF2327; color: #fff; border-color: #EF2327; box-shadow: 0 0 25px -4px rgba(239, 35, 39, 0.5); }
    .mmap-seg.is-active { background: linear-gradient(90deg, #1D357A, #3B82F6); color: #fff; }