/* ============================================================
   VISITA SONORA 3D — Design System
   Cine oscuro · naranja fuego · turismo inmersivo
   ============================================================ */

/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Sora:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');*/

/* Borra el @import de Google Fonts y pon esto: */
@font-face {
    font-family: 'Avenir Next Condensed';
    src: url('../fonts/AvenirNextCondensed.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue.ttf') format('truetype');
    font-weight: 300 400 500 600 700;
    font-style: normal;
}

:root {
    /* ── Colores principales ── */
    --orange: #E8621A;
    --orange-hot: #F07030;
    --orange-amber: #F5A623;
    --orange-glow: rgba(232, 98, 26, 0.30);
    --orange-dim: rgba(232, 98, 26, 0.15);
    /* ── Oscuros ── */
    --dark-900: #080808;
    --dark-800: #0D0D0D;
    --dark-700: #121212;
    --dark-600: #1A1A1A;
    --dark-500: #242424;
    --dark-400: #2E2E2E;
    /* ── Texto ── */
    --text-100: #F5F0E8;
    --text-200: #D4C8B8;
    --text-300: #A89880;
    --text-400: #6B5E52;
    /* ── Superficies con opacidad ── */
    --glass-dark: rgba(13, 13, 13, 0.80);
    --glass-mid: rgba(26, 26, 26, 0.70);
    --glass-light: rgba(36, 36, 36, 0.60);
    --border: rgba(255, 255, 255, 0.08);
    --border-orange: rgba(232, 98, 26, 0.35);
    /* ── Gradientes ── */
    --grad-orange: linear-gradient(135deg, #E8621A 0%, #F5A623 100%);
    --grad-hero: linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.55) 60%, rgba(8,8,8,0.92) 100%);
    --grad-card: linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.95) 100%);
    --grad-page: linear-gradient(180deg, #080808 0%, #0D0D0D 100%);
    /* ── Sombras ── */
    --shadow-orange: 0 8px 32px rgba(232, 98, 26, 0.40);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.70);
    /* ── Tipografía ── */
    /*    --font-display:  'Bebas Neue', 'Impact', sans-serif;
    --font-body:     'Sora', 'Space Grotesk', system-ui, sans-serif;
    --font-ui:       'Space Grotesk', system-ui, sans-serif;*/
    --font-display: 'Avenir Next Condensed', 'Impact', sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--dark-800);
    color: var(--text-100);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-800); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

/* ============================================================
   APP LOADER
   ============================================================ */
.app-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--dark-900);
    display: flex; align-items: center; justify-content: center;
}
.app-loader__card {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.app-loader__ring {
    width: 180px; height: 180px;
    border: 3px solid var(--dark-500);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin 1.1s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.app-loader__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.app-loader__logo {
    width: 150px; height: 150px;
    object-fit: contain;
}
.app-loader__line {
    width: 180px; height: 2px;
    background: var(--dark-500); border-radius: 1px; overflow: hidden;
}
.app-loader__progress {
    height: 100%; width: 40%;
    background: var(--grad-orange);
    animation: progress-slide 1.4s ease-in-out infinite;
}
.app-loader__dots { display: flex; gap: 6px; }
.app-loader__dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange); opacity: 0.3;
    animation: blink 1.2s ease-in-out infinite;
}
.app-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
.app-loader__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes spin           { to { transform: rotate(360deg); } }
@keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes blink          { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

/* ============================================================
   APP BAR — sticky oscuro con blur
   ============================================================ */
.site-appbar {
    position: fixed !important; top: 0; z-index: 1200;
    background: rgba(8, 8, 8, 0.85) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid var(--border);
    color: var(--text-100) !important;
    box-shadow: none !important;
}
.site-appbar__container {
    min-height: 68px; display: flex; align-items: center;
    gap: 16px; padding-inline: 32px; max-width: 1400px; margin: 0 auto; width: 100%;
}
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: 32px; }
.site-nav__link {
    color: var(--text-200);
    padding: 8px 16px; border-radius: 6px;
    font-family: var(--font-ui);
    font-weight: 500; font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: color 0.2s, background 0.2s;
}
.site-nav__link:hover  { color: var(--orange-hot); background: var(--orange-dim); }
.site-nav__link.active { color: var(--orange); background: var(--orange-dim); }

/* CTA button naranja */
.site-appbar__cta, .btn-orange {
    border-radius: 6px !important;
    background: var(--grad-orange) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    box-shadow: var(--shadow-orange) !important;
    transition: transform 0.18s, filter 0.18s, box-shadow 0.18s !important;
}
.site-appbar__cta:hover, .btn-orange:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 40px rgba(232, 98, 26, 0.55) !important;
}
.site-nav__menu-btn { color: var(--text-100) !important; }

/* DRAWER MOBILE */
.site-drawer__header { padding: 20px 18px 12px; border-bottom: 1px solid var(--border); }
.site-drawer__body   { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.site-drawer__link {
    display: block; color: var(--text-200);
    font-family: var(--font-ui); font-weight: 500;
    padding: 13px 16px; border-radius: 8px; transition: all 0.2s;
}
.site-drawer__link:hover  { background: var(--orange-dim); color: var(--orange); }
.site-drawer__cta { width: 100% !important; margin-top: 12px; }

/* Brand logo */
.brand-logo { display: inline-flex; align-items: center; cursor: pointer; }
.brand-logo__img { height: 44px; width: auto; object-fit: contain; }

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page-shell { padding: 0 !important; }
.page-shell--scroll { overflow-x: hidden; }
.section-shell { padding: 80px 32px; max-width: 1360px; margin: 0 auto; }

/* ============================================================
   HERO — fullscreen foto con overlay cinematográfico
   ============================================================ */
.home-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--dark-900);
}
.home-hero__slider,
.home-hero__backdrop { position: absolute; inset: 0; }
.home-hero__slider--placeholder {
    background: linear-gradient(135deg, #1a0a00 0%, #2d1800 50%, #0d0d0d 100%);
}
.home-hero__backdrop {
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease;
    transform: scale(1.04);
}
.home-hero__backdrop.is-active {
    opacity: 1;
    animation: hero-zoom 8s ease-out forwards;
}
@keyframes hero-zoom { from { transform: scale(1.04); } to { transform: scale(1.00); } }

/* Overlay oscuro cinematic */
.hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(8,8,8,0.35) 100%, rgba(8,8,8,0.0) 30%, rgba(8,8,8,0.75) 75%, rgba(8,8,8,0.97) 100%),
        linear-gradient(90deg, rgba(8,8,8,0.60) 0%, rgba(8,8,8,0.10) 50%);
}

.home-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 32px 80px;
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* ← NUEVO */
    text-align: center; /* ← NUEVO */
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--orange);
    margin-bottom: 20px;
    padding: 6px 14px;
    border: 1px solid var(--border-orange);
    border-radius: 4px;
    background: rgba(232, 98, 26, 0.10);
}
.hero-eyebrow svg { width: 12px; height: 12px; }

.home-hero__title {
    font-family: var(--font-display) !important;
    font-size: clamp(5rem, 0vw, 7.5rem) !important;
    line-height: 0.92 !important;
    color: var(--text-100) !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 24px !important;
    max-width: 900px;
    text-align: center; /* ← NUEVO */
}
    .home-hero__title em {
        font-style: normal;
        background: linear-gradient(180deg, #FF9500 0%, #E84500 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.home-hero__desc {
    max-width: 560px;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--text-200);
    margin-bottom: 36px;
    text-align: center; /* ← NUEVO */
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* ← NUEVO */
}
.btn-hero-outline {
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    color: var(--text-100) !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 6px !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    transition: border-color 0.2s, background 0.2s !important;
}
.btn-hero-outline:hover {
    border-color: var(--orange) !important;
    background: var(--orange-dim) !important;
    color: var(--orange) !important;
}

/* Dots slider */
.home-hero__dots { display: flex; gap: 8px; margin-top: 32px; }
.home-hero__dot {
    width: 28px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,0.25);
    border: none; cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.home-hero__dot.active { background: var(--orange); width: 48px; }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
    background: var(--dark-600);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 32px;
}
.stats-bar__inner {
    max-width: 1360px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.stat-item { display: flex; align-items: center; gap: 14px; }
.stat-item__icon { font-size: 1.6rem; opacity: 0.75; }
.stat-item__value { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; color: var(--text-100); }
.stat-item__label { font-size: 0.75rem; color: var(--text-300); margin-top: 2px; }
.stat-item__logos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat-item__logo-badge {
    background: var(--dark-500); border: 1px solid var(--border);
    border-radius: 4px; padding: 4px 10px;
    font-size: 0.72rem; font-weight: 600; color: var(--text-200);
    letter-spacing: 0.06em;
}

/* ============================================================
   WHITE SECTION — fondo blanco para secciones mixtas
   ============================================================ */
.white-section {
    background: #FFFFFF;
}
.white-section .section-shell {
    padding: 64px 32px;
    max-width: 1360px;
    margin: 0 auto;
}

/* Scroll arrow variante clara (sobre fondo blanco) */
.scroll-arrow--light {
    background: #FFFFFF !important;
    border: 1.5px solid #E5E7EB !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.scroll-arrow--light:hover {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    background: #FFF7F3 !important;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header { margin-bottom: 48px; }
.section-header__eyebrow {
    font-family: var(--font-ui);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 12px;
}
.section-header__title {
    font-family: var(--font-display) !important;
    font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
    line-height: 1 !important;
    color: var(--text-100) !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
}
.section-header--center { text-align: center; }

/* ============================================================
   DESTINOS CARDS — estilo Netflix horizontal scroll
   ============================================================ */
.destinos-scroll {
    position: relative;
    padding-bottom: 12px;
}
.destinos-track {
    display: flex; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 8px;
}
.destinos-track::-webkit-scrollbar { display: none; }

.destino-card {
    flex: 0 0 340px; scroll-snap-align: start;
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 16/11;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: var(--dark-600);
}
.destino-card:hover { transform: scale(1.03); }
.destino-card:hover .destino-card__overlay { opacity: 1; }

.destino-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.destino-card:hover .destino-card__img { transform: scale(1.07); }

.destino-card__gradient {
    position: absolute; inset: 0;
    background: var(--grad-card);
}
.destino-card__overlay {
    position: absolute; inset: 0;
    background: rgba(232, 98, 26, 0.15);
    opacity: 0; transition: opacity 0.3s;
}
.destino-card__badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--orange); color: #fff;
    font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px;
}
.destino-card__body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 18px 18px;
}
.destino-card__name {
    font-family: var(--font-ui);
    font-size: 1.15rem; font-weight: 700;
    color: var(--text-100); margin-bottom: 4px;
}
.destino-card__region {
    font-size: 0.75rem; color: var(--text-300);
    display: flex; align-items: center; gap: 6px;
}
.destino-card__stars {
    display: flex; gap: 3px; align-items: center;
    font-size: 0.72rem; color: var(--orange-amber);
    margin-top: 8px;
}
.destino-card__stars span { color: var(--text-300); margin-left: 4px; }

/* Scroll arrows */
.scroll-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10; width: 44px; height: 44px;
    border-radius: 50%; border: 1.5px solid var(--border);
    background: var(--glass-dark);
    backdrop-filter: blur(12px);
    color: var(--text-100);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.scroll-arrow:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }
.scroll-arrow--left  { left: -18px; }
.scroll-arrow--right { right: -18px; }

/* ============================================================
   NEGOCIOS DESTACADOS — cards grid
   ============================================================ */
.negocio-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--dark-600);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.negocio-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-orange);
    box-shadow: var(--shadow-card);
}
.negocio-card__media {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: var(--dark-500);
}
.negocio-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.negocio-card:hover .negocio-card__media img { transform: scale(1.06); }
.negocio-card__sponsored {
    position: absolute; top: 10px; left: 10px;
    background: var(--orange); color: #fff;
    font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px;
}
.negocio-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.negocio-card__name {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-100);
    margin-bottom: 4px;
    flex: 1;
}
.negocio-card__tipo {
    font-size: 0.75rem; color: var(--text-300);
    display: flex; align-items: center; gap: 5px;
}
.negocio-card__socials {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}
.negocio-card__social {
    width: 32px; height: 32px; border-radius: 6px;
    background: var(--dark-500); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-300); font-size: 0.9rem;
    transition: all 0.2s; cursor: pointer;
}
.negocio-card__social:hover { background: var(--orange-dim); color: var(--orange); border-color: var(--border-orange); }

/* ============================================================
   CTA PUBLICIDAD SECTION
   ============================================================ */
.cta-publicidad {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1a0800 0%, #0d0d0d 60%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 80px 32px;
}
.cta-publicidad::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,98,26,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.cta-publicidad__inner {
    max-width: 1360px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: center;
}
.cta-publicidad__title {
    font-family: var(--font-display) !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1 !important;
    color: var(--text-100) !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 20px !important;
}
.cta-publicidad__title span { color: var(--orange); }
.cta-publicidad__desc {
    font-size: 1rem; line-height: 1.75;
    color: var(--text-300); margin-bottom: 32px;
}
.cta-publicidad__desc strong { color: var(--text-100); }
.cta-publicidad__visual {
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--dark-600);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.cta-publicidad__visual img { width: 100%; height: 100%; object-fit: cover; }
.cta-publicidad__pin {
    position: absolute; background: var(--orange);
    color: #fff; border-radius: 8px;
    padding: 8px 12px; font-size: 0.78rem; font-weight: 700;
    font-family: var(--font-ui);
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 16px rgba(232,98,26,0.50);
    animation: float 3s ease-in-out infinite;
}
.cta-publicidad__pin--1 { top: 24%; left: 18%; }
.cta-publicidad__pin--2 { top: 38%; right: 14%; }
.cta-publicidad__pin::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--orange);
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================================
   FOOTER (blanco como en el diseño)
   ============================================================ */
.site-footer {
    background: var(--dark-900);
    border-top: 1px solid var(--border);
    padding: 64px 32px 32px;
}
.site-footer__container { max-width: 1360px; margin: 0 auto; }
.site-footer__text { font-size: 0.85rem; color: var(--text-400); line-height: 1.7; margin-top: 12px; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h4 {
    font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-300); margin: 0 0 4px;
}
.site-footer__col a, .site-footer__col span {
    font-size: 0.875rem; color: var(--text-400);
    transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--orange); }
.site-footer__bottom {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem; color: var(--text-400);
    text-align: center;
}
.site-footer__social { display: flex; gap: 10px; margin-top: 8px; }
.site-footer__soc-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--dark-500); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-300); font-size: 1rem;
    transition: all 0.2s; cursor: pointer;
}
.site-footer__soc-btn:hover { background: var(--orange-dim); color: var(--orange); border-color: var(--border-orange); }

/* Newsletter */
.newsletter-strip {
    background: var(--dark-700); border-top: 1px solid var(--border);
    padding: 40px 32px;
}
.newsletter-strip__inner {
    max-width: 560px; margin: 0 auto; text-align: center;
}
.newsletter-strip__title {
    font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem;
    color: var(--text-100); margin-bottom: 6px;
}
.newsletter-strip__sub { font-size: 0.85rem; color: var(--text-300); margin-bottom: 20px; }
.newsletter-strip__form { display: flex; gap: 10px; }
.newsletter-strip__input {
    flex: 1; background: var(--dark-500); border: 1px solid var(--border);
    border-radius: 6px; padding: 10px 16px;
    color: var(--text-100); font-family: var(--font-body); font-size: 0.9rem;
    outline: none; transition: border-color 0.2s;
}
.newsletter-strip__input:focus { border-color: var(--orange); }
.newsletter-strip__input::placeholder { color: var(--text-400); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .site-appbar__container { padding-inline: 16px; }
    .site-nav { display: none; }
    .site-nav__menu-btn { display: flex !important; }
    .section-shell { padding: 56px 16px; }
    .stats-bar__inner { grid-template-columns: 1fr; gap: 16px; }
    .cta-publicidad__inner { grid-template-columns: 1fr; }
    .cta-publicidad__visual { display: none; }
    .destino-card { flex: 0 0 280px; }
    .home-hero__title { font-size: clamp(3rem, 12vw, 5rem) !important; }
    .home-hero__content { padding: 0 16px 60px; }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-appbar {
    background: var(--dark-900) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-100) !important;
    box-shadow: none !important;
}
.admin-appbar__brand { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.admin-appbar__logo  { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }
.admin-appbar__title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; color: var(--text-100); }
.admin-appbar__subtitle { font-size: 0.9rem; color: var(--text-400); letter-spacing: 0.12em; }
.admin-appbar__action { color: var(--text-300) !important; }
.admin-appbar__action:hover { color: var(--orange) !important; }

.admin-drawer {
    background: var(--dark-900) !important;
    border-right: 1px solid var(--border) !important;
    width: 260px !important;
}
.admin-drawer__header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px 14px;
    border-bottom: 1px solid var(--border);
}
.admin-drawer__logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.admin-drawer__brand-title { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; color: var(--text-100); }
.admin-drawer__brand-sub { font-size: 0.65rem; color: var(--orange); letter-spacing: 0.14em; text-transform: uppercase; }

.admin-nav { padding: 12px 12px; }
.admin-nav__section-label {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
    color: var(--text-400); text-transform: uppercase;
    padding: 16px 12px 6px;
}
.admin-nav__link { color: var(--text-300) !important; border-radius: 8px !important; font-family: var(--font-ui) !important; font-size: 0.88rem !important; }
.admin-nav__link:hover { background: var(--orange-dim) !important; color: var(--orange) !important; }
.admin-nav__link.active { background: var(--orange-dim) !important; color: var(--orange) !important; }

.admin-drawer__footer {
    margin-top: auto; padding: 16px;
    border-top: 1px solid var(--border);
}
.admin-drawer__logout {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: none; border: none; cursor: pointer;
    color: var(--text-400); font-family: var(--font-ui); font-size: 0.88rem;
    transition: all 0.2s;
}
.admin-drawer__logout:hover { background: rgba(255,80,80,0.10); color: #ff5050; }

.admin-main { background: var(--dark-800) !important; min-height: 100vh; }
.admin-content { padding: 28px; max-width: 1200px; }

.admin-page-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.admin-page-title  { font-family: var(--font-display) !important; font-size: 1.6rem !important; letter-spacing: 0.06em !important; color: var(--text-100) !important; }
.admin-page-sub    { font-size: 0.85rem; color: var(--text-400); margin-top: 2px; }

.admin-card {
    background: var(--dark-600) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 24px;
    margin-bottom: 24px;
}
.admin-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-card__title  { font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 1rem !important; color: var(--text-100) !important; }

.admin-stat-card {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 20px;
    display: flex; align-items: center; gap: 16px;
    transition: border-color 0.2s;
}
.admin-stat-card:hover { border-color: var(--border-orange); }
.admin-stat-card__icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--orange-dim); display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.admin-stat-card__value { font-family: var(--font-ui); font-size: 1.6rem; font-weight: 700; color: var(--text-100); }
.admin-stat-card__label { font-size: 0.78rem; color: var(--text-300); }
.admin-stat-card__sub   { font-size: 0.72rem; color: var(--text-400); margin-top: 2px; }

.admin-table { background: transparent !important; }
.admin-table .mud-table-head th { color: var(--text-400) !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; text-transform: uppercase; border-bottom: 1px solid var(--border) !important; background: transparent !important; }
.admin-table .mud-table-body td { color: var(--text-200) !important; font-size: 0.875rem !important; border-bottom: 1px solid var(--border) !important; }
.admin-table .mud-table-row:hover td { background: var(--dark-500) !important; }

.admin-link-btn { color: var(--orange) !important; font-size: 0.85rem !important; }
.admin-loading  { display: flex; justify-content: center; padding: 60px; }

.admin-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px; color: var(--text-400); }
.admin-empty__icon { font-size: 2.5rem; opacity: 0.4; }

/* Image uploader */
.img-uploader {
    border: 2px dashed var(--border);
    border-radius: 10px; padding: 32px;
    text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--dark-700);
    position: relative;
    user-select: none;
}
.img-uploader:hover { border-color: var(--orange); background: var(--orange-dim); }
.img-uploader.dragging { border-color: var(--orange); background: var(--orange-dim); border-style: solid; }
.img-uploader__icon { font-size: 2rem; color: var(--text-400); margin-bottom: 8px; }
.img-uploader__text { font-size: 0.875rem; color: var(--text-300); }

/* MudBlazor overrides */
.mud-button-root { font-family: var(--font-ui) !important; letter-radius: 0.04em !important; }
.mud-input, .mud-input-outlined { background: var(--dark-700) !important; }
.mud-chip { font-family: var(--font-ui) !important; }
.mud-snackbar { font-family: var(--font-body) !important; }

/* Section header sobre fondo blanco */
.section-header--dark .section-header__eyebrow { color: var(--orange); }
.section-header--dark .section-header__title { color: #111111 !important; }
.section-header--dark p { color: #4B5563 !important; }


/* ============================================================
   SIDE PANEL — overlay + panel lateral fijo (reemplaza MudDrawer)
   ============================================================ */
.side-overlay {
    position: fixed; inset: 0; z-index: 1299;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.side-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 520px; max-width: 100vw;
    z-index: 1300;
    background: var(--dark-700);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    animation: slide-in 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -8px 0 48px rgba(0,0,0,0.50);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.side-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.side-panel__title {
    font-family: var(--font-display);
    font-size: 1.3rem; color: var(--text-100); letter-spacing: 0.08em;
}
.side-panel__close {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--dark-500); border: 1px solid var(--border);
    color: var(--text-300); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.side-panel__close:hover { background: rgba(255,80,80,0.12); color: #ff6060; border-color: rgba(255,80,80,0.25); }

.side-panel__body {
    flex: 1; overflow-y: auto; padding: 24px 28px;
    display: flex; flex-direction: column; gap: 16px;
}
.side-panel__body::-webkit-scrollbar { width: 4px; }
.side-panel__body::-webkit-scrollbar-track { background: transparent; }
.side-panel__body::-webkit-scrollbar-thumb { background: var(--dark-400); border-radius: 2px; }

.side-panel__field { display: flex; flex-direction: column; }

.side-panel__label {
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
    color: var(--text-300); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 8px;
}
.side-panel__row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.side-panel__switches {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 0;
}
.side-panel__section-label {
    font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-400); padding: 8px 0 4px;
    border-top: 1px solid var(--border); margin-top: 4px;
}

.side-panel__footer {
    display: flex; gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--dark-700);
}

/* ============================================================
   DESTINO DETALLE — /destinos/{id}
   ============================================================ */

/* ── HERO ────────────────────────────────────────────── */
.det-hero {
    position: relative;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: var(--dark-900);
}
.det-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    animation: hero-zoom 8s ease-out forwards;
}
.det-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(8,8,8,0.35) 0%,
        rgba(8,8,8,0.15) 35%,
        rgba(8,8,8,0.70) 70%,
        rgba(8,8,8,0.95) 100%);
}
.det-hero__top {
    position: relative; z-index: 2;
    text-align: center;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding-bottom: 40px;
}
.det-hero__pin {
    margin-bottom: 12px;
    animation: pin-bounce 2s ease-in-out infinite;
}

.det-hero__pin-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.50));
}
@keyframes pin-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.det-hero__nombre {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 8vw, 7rem);
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 4px 32px rgba(0,0,0,0.60);
}
.det-hero__bottom {
    position: relative; z-index: 2;
    padding: 0 32px 48px;
    display: flex;
    justify-content: center;

}

/* Panel negro unificado: imagen izquierda + negocios derecha */
.det-unified-panel {
    display: grid;
    grid-template-columns: 40% 60%;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,0.70);
    max-width: 960px;
    width: 100%;
}
.det-unified-panel__left {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}
.det-unified-panel__img {
    width: 100%; flex: 1;
    object-fit: cover;
    display: block;
    min-height: 140px;
}
.det-unified-panel__img-placeholder {
    width: 100%; flex: 1;
    min-height: 140px;
    background: var(--dark-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.det-unified-panel__right {
    padding: 20px;
    border-left: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
}
.det-hero__tour-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: var(--grad-orange);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.92rem;
    height: 52px;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s;
    cursor: pointer;
    letter-spacing: 0.03em;
}
.det-hero__tour-btn:hover { filter: brightness(1.12); }

/* ── PANEL NEGOCIOS ──────────────────────────────────── */
.det-panel {
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.det-panel__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.det-panel__title {
    font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem;
    color: var(--text-100);
}
.det-panel__arrows { display: flex; gap: 6px; }
.det-panel__arrow {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--dark-500); border: 1px solid var(--border);
    color: var(--text-200); font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.det-panel__arrow:hover { background: var(--orange-dim); color: var(--orange); border-color: var(--border-orange); }

.det-panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
    align-items: stretch;
}
.det-panel__card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-600);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.det-panel__card-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.det-panel__card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s;
}
.det-panel__card:hover .det-panel__card-img img { transform: scale(1.06); }
.det-panel__sponsored {
    position: absolute; top: 6px; left: 6px;
    background: var(--orange); color: #fff;
    font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.08em; padding: 3px 7px; border-radius: 3px;
}
.det-panel__card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.det-panel__card-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; color: var(--text-100); margin-bottom: 3px; }
.det-panel__card-tipo { font-size: 0.7rem; color: var(--text-300); margin-bottom: 8px; }
.det-panel__card-socials { display: flex; gap: 6px; }
.det-panel__soc {
    width: 26px; height: 26px; border-radius: 5px;
    background: var(--dark-500); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: var(--text-300); transition: all 0.2s;
    text-decoration: none;
}
.det-panel__soc:hover { background: var(--orange-dim); color: var(--orange); border-color: var(--border-orange); }

/* ── SECCIÓN 2: PANORÁMICA + CARRUSEL ───────────────── */
.det-section2 {
    position: relative;
    min-height: 520px;
    display: flex; align-items: flex-end;
    overflow: hidden;
}
.det-section2__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: brightness(0.7);
}
.det-section2__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(8,8,8,0.85) 100%);
}
.det-carousel {
    position: relative; z-index: 2;
    width: 100%; padding: 0 0 48px;
    display: flex; align-items: center; gap: 0;
}
.det-carousel__track {
    display: flex; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; flex: 1;
    padding: 0 8px;
}
.det-carousel__track::-webkit-scrollbar { display: none; }
.det-carousel__card {
    flex: 0 0 280px; scroll-snap-align: start;
    background: rgba(10,10,10,0.82);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.det-carousel__card:first-child { border-radius: 0; }
.det-carousel__card-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.det-carousel__card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s;
}
.det-carousel__card:hover .det-carousel__card-img img { transform: scale(1.06); }
.det-carousel__card-body {
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.det-carousel__card-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; color: var(--text-100); margin-bottom: 4px; }
.det-carousel__card-tipo { font-size: 0.73rem; color: var(--text-300); }
.det-carousel__arrow {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background: rgba(10,10,10,0.75); border: 1.5px solid rgba(255,255,255,0.15);
    color: var(--text-100); font-size: 1.8rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; backdrop-filter: blur(12px);
    margin: 0 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.40);
}
.det-carousel__arrow:hover { border-color: var(--orange); color: var(--orange); background: rgba(232,98,26,0.15); }

/* ── CTA ANÚNCIATE ──────────────────────────────────── */
.det-cta {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0800 100%);
    border-top: 1px solid var(--border);
    padding: 72px 32px;
}
.det-cta__inner {
    max-width: 1360px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    align-items: center;
}
.det-cta__title {
    font-family: var(--font-body); font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--text-100); line-height: 1.2; margin: 0 0 16px;
}
.det-cta__desc { font-size: 0.95rem; color: var(--text-300); line-height: 1.75; margin: 0; }
.det-cta__mockup {
    background: var(--dark-600); border: 1px solid var(--border);
    border-radius: 16px; aspect-ratio: 16/10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.det-cta__pin {
    position: absolute; top: 28%; left: 20%;
    background: var(--orange); color: #fff;
    font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700;
    padding: 7px 12px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(232,98,26,0.50);
    animation: float 3s ease-in-out infinite;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
    .det-hero__bottom { padding: 0 12px 24px; }

    .det-unified-panel {
        grid-template-columns: 1fr;
        border-radius: 14px;
        width: 100%;
        max-width: 100%;
    }
    .det-unified-panel__img { height: 200px; }
    .det-unified-panel__img-placeholder { height: 200px; }
    .det-unified-panel__right { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }

    .det-hero__top { padding: 0 16px; padding-bottom: 24px; padding-top: 10px;}
    .det-hero__nombre { font-size: 2.6rem !important; }

    .det-panel__grid { grid-template-columns: 1fr; }

    .det-section2 { min-height: 400px; }
    .det-carousel { padding: 0 0 32px; }
    .det-carousel__card { flex: 0 0 220px; }
    .det-carousel__arrow { width: 40px; height: 40px; font-size: 1.4rem; margin: 0 8px; }

    .det-cta__inner { grid-template-columns: 1fr; }
    .det-cta__mockup { display: none; }
}

@media (max-width: 600px) {
    .det-hero { min-height: 85vh; }
    .det-unified-panel { border-radius: 10px; }
    .det-carousel__card { flex: 0 0 180px; }
}

.det-panel__tour-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    background: var(--grad-orange);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: filter 0.2s, transform 0.15s;
}

    .det-panel__tour-btn:hover {
        filter: brightness(1.12);
        transform: translateY(-1px);
    }

.det-carousel__tour-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    background: var(--grad-orange);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: filter 0.2s, transform 0.15s;
}

    .det-carousel__tour-btn:hover {
        filter: brightness(1.12);
        transform: translateY(-1px);
    }

.det-panel__card-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-100);
    margin-bottom: 3px;
    flex: 1;
}

.det-panel__card-socials {
    margin-top: auto;
    padding-top: 8px;
}

.det-carousel__card {
    display: flex;
    flex-direction: column;
}

.det-carousel__card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.det-carousel__card-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-100);
    margin-bottom: 4px;
    flex: 1;
}

.det-carousel__card-tipo {
    font-size: 0.73rem;
    color: var(--text-300);
}

.det-carousel__tour-btn {
    margin-top: 10px;
    padding-top: 10px;
}