/* =====================================================================
   COCTEAULAB LOYALTY · TEMA DEL CLIENTE
   Paleta negro + dorado #d5ad70.
   - Tokens de color en variables CSS.
   - `[data-tema="claro" | "oscuro"]` en <html>.
   - `[data-logo="auto" | "original" | "invertido"]` en <html>.
   - La seccion "overrides" remapea las utilidades Tailwind ya usadas en el
     proyecto, de modo que TODO el sitio cambia sin reescribir clases.
   ===================================================================== */

/* ---------------------------- TOKENS ---------------------------- */
:root,
[data-tema="claro"] {
    --bg: #faf7f1;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #fffdf8 0%, #faf7f1 60%);
    --surface: #ffffff;
    --surface-2: #f6f1e7;
    --surface-3: #efe8da;
    --surface-4: #e6ddcb;
    --dark: #141416;
    --border: #e7dfcf;
    --border-2: #d9cfba;
    --text: #16161a;
    --text-2: #6b6558;
    --text-3: #96907f;
    --brand-text: #8a6a1e;
    --brand-fill: #d5ad70;
    --brand-fill-hover: #c69c5e;
    --on-fill: #1a1409;
    --brand-tint: #f6ecd9;
    --brand-line: rgba(213, 173, 112, .55);
    --ok: #047857;
    --warn: #b45309;
    --err: #b91c1c;
    --ok-tint: #e7f6ee;
    --err-tint: #fdecec;
    --shadow: 0 6px 24px rgba(80, 60, 25, .10);
    --focus: rgba(138, 106, 30, .22);
    --overlay: rgba(20, 16, 8, .55);
}

[data-tema="oscuro"] {
    --bg: #0a0a0b;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #17140f 0%, #0a0a0b 55%);
    --surface: #141416;
    --surface-2: #1b1b1e;
    --surface-3: #232327;
    --surface-4: #2c2c31;
    --dark: #0d0d0f;
    --border: #2b2b30;
    --border-2: #3a3a41;
    --text: #f2ece1;
    --text-2: #a9a39a;
    --text-3: #7c7770;
    --brand-text: #d5ad70;
    --brand-fill: #d5ad70;
    --brand-fill-hover: #e6c690;
    --on-fill: #14100a;
    --brand-tint: rgba(213, 173, 112, .14);
    --brand-line: rgba(213, 173, 112, .45);
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #f87171;
    --ok-tint: rgba(74, 222, 128, .14);
    --err-tint: rgba(248, 113, 113, .14);
    --shadow: 0 8px 30px rgba(0, 0, 0, .55);
    --focus: rgba(213, 173, 112, .28);
    --overlay: rgba(0, 0, 0, .72);
}

/* ---------------------------- BASE ---------------------------- */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Botones: la marca usa Josefin Sans (decisión del diseño de la intro). */
button,
[role="button"],
a[class*="btn"],
input[type="submit"] {
    font-family: 'Josefin Sans', 'Montserrat', sans-serif;
}

::selection {
    background: var(--brand-fill);
    color: var(--on-fill);
}

/* Subtitulo / elemento secundario: Montserrat en mayusculas con espaciado. */
.subtitulo {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 300;
    color: var(--text-2);
}
@media (max-width: 767px) {
    .subtitulo { letter-spacing: 3px; }
}

/* Variante compacta del subtitulo para etiquetas pequenas. */
.subtitulo-sm {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--text-3);
}

/* ---------------------- SCROLLBAR ---------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-fill); }

/* =====================================================================
   OVERRIDES · remapeo de utilidades Tailwind ya usadas en el proyecto.
   Se prefijan con `html` para ganar en especificidad sin depender del
   orden en que el CDN de Tailwind inyecte sus estilos.
   ===================================================================== */

/* --- Superficies --- */
html body.bg-slate-50,
body { background-color: var(--bg) !important; background-image: var(--bg-grad) !important; }

html .bg-white { background-color: var(--surface) !important; }
html .bg-slate-50 { background-color: var(--surface-2) !important; }
html .bg-slate-100 { background-color: var(--surface-3) !important; }
html .bg-slate-200 { background-color: var(--surface-4) !important; }
html .hover\:bg-slate-50:hover { background-color: var(--surface-2) !important; }
html .hover\:bg-slate-100:hover { background-color: var(--surface-3) !important; }
html .hover\:bg-slate-200:hover { background-color: var(--surface-4) !important; }

/* Fondos oscuros fijos: toasts, modales de video, overlays. */
html .bg-slate-800,
html .bg-slate-900,
html .bg-slate-950 { background-color: var(--dark) !important; }
/* Variantes con opacidad (son nombres de clase distintos en Tailwind). */
html .bg-slate-900\/80 { background-color: rgba(18, 18, 20, .85) !important; }
html .bg-slate-950\/85 { background-color: rgba(8, 8, 9, .92) !important; }
html .border-slate-800 { border-color: var(--border-2) !important; }
html .bg-black\/50 { background-color: var(--overlay) !important; }
html .bg-black\/60 { background-color: var(--overlay) !important; }

/* Dentro de estos contenedores oscuros los tokens de texto se invierten, para
   que lo que hoy es `text-slate-300` siga siendo legible también en modo
   claro. No se incluye .bg-black/50 ni .bg-black/60 porque envuelven paneles
   claros que heredarían el color equivocado. */
html .bg-slate-900,
html .bg-slate-900\/80,
html .bg-slate-950,
html .bg-slate-950\/85 {
    --text: #f4efe4;
    --text-2: #cdc7be;
    --text-3: #a29c93;
}

/* --- Texto --- */
html .text-slate-900,
html .text-slate-800 { color: var(--text) !important; }
html .text-slate-700 { color: var(--text) !important; }
html .text-slate-600 { color: var(--text-2) !important; }
html .text-slate-500,
html .text-slate-400 { color: var(--text-2) !important; }
html .text-slate-300,
html .text-slate-200 { color: var(--text-2) !important; }
html .hover\:text-slate-800:hover { color: var(--text) !important; }
html .placeholder\:text-slate-400::placeholder { color: var(--text-3) !important; }

/* Texto blanco: se conserva, salvo sobre relleno dorado, donde hace falta
   texto oscuro (blanco sobre #d5ad70 no llega a contraste AA). */
html .bg-\[\#00447C\].text-white,
html .bg-\[\#00447C\] .text-white { color: var(--on-fill) !important; }

/* --- Bordes --- */
html .border-slate-50,
html .border-slate-100,
html .border-slate-200 { border-color: var(--border) !important; }
html .divide-slate-100 > * + * { border-color: var(--border) !important; }

/* --- Azul de marca -> dorado --- */
html .bg-\[\#00447C\] {
    background-color: var(--brand-fill) !important;
    color: var(--on-fill) !important;
}
html .bg-\[\#00447C\].text-white { color: var(--on-fill) !important; }
html .hover\:bg-\[\#00335e\]:hover {
    background-color: var(--brand-fill-hover) !important;
    color: var(--on-fill) !important;
}
html .text-\[\#00447C\] { color: var(--brand-text) !important; }
html .focus\:border-\[\#00447C\]:focus { border-color: var(--brand-text) !important; }
html .focus\:ring-\[\#00447C\]\/10:focus { box-shadow: 0 0 0 3px var(--focus) !important; }
html .bg-blue-50 { background-color: var(--brand-tint) !important; }
html .text-blue-600 { color: var(--brand-text) !important; }
html .from-\[\#00447C\] { --tw-gradient-from: var(--brand-fill) !important; }
html .to-\[\#005ba3\] { --tw-gradient-to: var(--brand-fill-hover) !important; }
html .shadow-blue-900\/10 { box-shadow: var(--shadow) !important; }
/* Avatar con degradado del azul de marca -> dorado. */
html .bg-gradient-to-tr.from-\[\#00447C\].to-\[\#005ba3\] {
    background-image: linear-gradient(to top right, var(--brand-fill), var(--brand-fill-hover)) !important;
}

/* --- Estados semanticos: verde y rojo reales para que los votos y los
       indicadores de estado se distingan a primera vista. --- */
html .text-emerald-600 { color: var(--ok) !important; }
html .bg-emerald-50 { background-color: var(--ok-tint) !important; }
html .hover\:bg-emerald-100:hover { background-color: var(--ok-tint) !important; }
html .text-amber-600 { color: var(--brand-text) !important; }
html .bg-amber-50 { background-color: var(--brand-tint) !important; }

/* Rojo se conserva como color de peligro (se adapta por tema vía --err). */
html .text-red-600 { color: var(--err) !important; }
html .bg-red-600,
html .hover\:bg-red-700:hover { background-color: var(--err) !important; }
html .hover\:bg-red-50:hover { background-color: rgba(185, 28, 28, .12) !important; }

/* Verde solo para indicadores de estado (punto del toast, sin texto encima). */
html .bg-emerald-500 { background-color: var(--ok) !important; }
html .bg-emerald-600,
html .hover\:bg-emerald-700:hover { background-color: var(--ok) !important; }

/* --- Foco consistente --- */
html *:focus-visible { outline-color: var(--brand-fill); }

/* =====================================================================
   REMAPEO COMPLETO · segunda pasada (clases detectadas en el cliente
   que todavia no tenian equivalencia en la paleta)
   ===================================================================== */

/* --- Formularios: foco y bordes --- */
html .focus\:bg-white:focus { background-color: var(--surface) !important; }
html .border-\[\#00447C\],
html .border-\[\#00447C\]\/30,
html .focus\:border-\[\#00447C\]\/30:focus,
html .hover\:border-\[\#00447C\]:hover { border-color: var(--brand-line) !important; }
html .focus\:ring-\[\#00447C\]\/20:focus { box-shadow: 0 0 0 3px var(--focus) !important; }

/* --- Hover de marca --- */
html .hover\:text-\[\#00447C\]:hover,
html .hover\:text-\[\#005ba3\]:hover,
html .hover\:text-\[\#00335c\]:hover { color: var(--brand-text) !important; }
html .hover\:bg-\[\#005ba3\]:hover {
    background-color: var(--brand-fill-hover) !important;
    color: var(--on-fill) !important;
}
html .hover\:bg-\[\#00447C\]\/5:hover { background-color: var(--brand-tint) !important; }
html .bg-\[\#00447C\]\/10 { background-color: var(--brand-tint) !important; }

/* --- Botones sueltos fuera del azul principal --- */
html .bg-\[\#1cb5c5\],
html .bg-\[\#E11D48\] {
    background-color: var(--brand-fill) !important;
    color: var(--on-fill) !important;
}
html .hover\:bg-\[\#128c98\]:hover,
html .hover\:bg-\[\#be123c\]:hover {
    background-color: var(--brand-fill-hover) !important;
    color: var(--on-fill) !important;
}

/* --- Superficies y bordes neutros con opacidad --- */
html .bg-slate-50\/50,
html .hover\:bg-slate-50\/50:hover { background-color: var(--surface-2) !important; }
html .bg-blue-50\/50,
html .hover\:bg-blue-100:hover { background-color: var(--brand-tint) !important; }
html .bg-white\/95 { background-color: var(--surface) !important; }
html .border-blue-100 { border-color: var(--border) !important; }
html .border-blue-950 { border-color: var(--brand-line) !important; }
html .border-amber-100 { border-color: var(--brand-line) !important; }
html .shadow-blue-900\/15 { box-shadow: var(--shadow) !important; }
html .hover\:text-slate-900:hover { color: var(--text) !important; }

/* --- Estados semanticos: el verde/rojo de superficie clara rompe el tema
       oscuro, asi que se sustituyen por tintes adaptativos. --- */
html .bg-emerald-100 { background-color: var(--ok-tint) !important; }
html .text-emerald-800 { color: var(--ok) !important; }
html .bg-emerald-400 { background-color: var(--ok) !important; }
html .bg-red-500 { background-color: var(--err) !important; }
html .bg-red-50,
html .hover\:bg-red-100:hover { background-color: var(--err-tint) !important; }
html .text-red-500 { color: var(--err) !important; }
html .text-amber-400 { color: var(--brand-fill) !important; }

/* =====================================================================
   BANNER DE HISTORIAL · siempre oscuro (porta texto blanco) en ambos
   temas, con degradado negro -> dorado. El texto secundario que porta
   se fija en crema porque el contenedor nunca aclara.
   ===================================================================== */
html .bg-gradient-to-br.from-\[\#021b30\].via-\[\#052e52\].to-\[\#00447C\] {
    background-image: linear-gradient(to bottom right, #0a0a0b, #1a1713, #4b3d23) !important;
}
html .from-\[\#021b30\] .text-blue-300,
html .from-\[\#021b30\] .text-blue-200 { color: #ded4bf !important; }

/* Barra de racha: verde -> dorado -> dorado oscuro. */
html .bg-gradient-to-r.from-emerald-400.via-amber-400.to-slate-200 {
    background-image: linear-gradient(to right, var(--ok), var(--brand-fill), var(--brand-fill-hover)) !important;
}
html .text-blue-200,
html .text-blue-300 { color: var(--text-2) !important; }

/* =====================================================================
   BORDER-COLOR DE LOS CSS AUXILIARES (bonda / consulta / producto)
   ===================================================================== */
html .bonda-search input:focus { border-color: var(--brand-text) !important; }
html .bonda-sort select { color: var(--brand-text) !important; }
html .bonda-card__logo-inicial { color: var(--brand-text) !important; }
html .bonda-province-title { color: var(--brand-text) !important; }
html .bonda-loc-radio { accent-color: var(--brand-fill) !important; }
html input[type="radio"],
html input[type="checkbox"] { accent-color: var(--brand-fill) !important; }
html .bonda-loc-select:focus { border-color: var(--brand-text) !important; }
html .info-text .subtitle { color: var(--brand-text) !important; }
html .bonda-rich a { color: var(--brand-text) !important; }

/* =====================================================================
   HEADER · mas alto para que entre el logo vertical
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 8px 14px;
    transition: background-color .25s ease, border-color .25s ease;
}
@media (min-width: 640px) { .site-header { padding: 12px 24px; } }
@media (min-width: 1024px) { .site-header { padding: 16px 32px; } }

/* Filas del header: menú (izq), logo centrado, avatar (der) en móvil */
.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.site-header__start,
.site-header__end {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}
.site-header__start { justify-content: flex-start; }
.site-header__end { justify-content: flex-end; }
.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .site-header__row { gap: 1rem; justify-content: flex-start; }
    .site-header__start,
    .site-header__end { flex: 0 0 auto; }
    /* En desktop el botón del menú queda oculto; si la fila repartiera espacio
       con space-between, el logo quedaría centrado. Forzamos el logo a la
       izquierda y empujamos el avatar al extremo derecho. */
    .site-header__end { margin-left: auto; }
}

/* Filo dorado inferior. */
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-fill), transparent);
    opacity: .7;
    pointer-events: none;
}

.site-header .logo-img {
    height: 58px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform .2s ease;
}
@media (min-width: 640px)  { .site-header .logo-img { height: 58px; } }
@media (min-width: 1024px) { .site-header .logo-img { height: 60px; } }

/* --- Selector de variante de logo --- */
.logo-img.logo-inv { display: none; }
[data-logo="original"] .logo-img.logo-orig,
[data-logo="invertido"] .logo-img.logo-inv,
[data-logo="auto"] .logo-img.logo-orig { display: block; }
[data-logo="original"] .logo-img.logo-inv,
[data-logo="auto"] .logo-img.logo-inv { display: none; }
[data-tema="oscuro"][data-logo="auto"] .logo-img.logo-orig { display: none; }
[data-tema="oscuro"][data-logo="auto"] .logo-img.logo-inv { display: block; }

/* Botón hamburguesa del header en móvil (icono, discreto). */
.menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}
.menu-trigger:hover {
    background: var(--brand-tint);
    border-color: var(--brand-fill);
    color: var(--brand-text);
    transform: none;
    box-shadow: none;
}
.menu-trigger:active { transform: scale(.95); }
.menu-trigger svg { width: 20px; height: 20px; flex-shrink: 0; }

/* =====================================================================
   MIS CANJES · compactación de tarjetas en móvil (2 columnas)
   ===================================================================== */
@media (max-width: 550px) {
    .cl-canjes-grid { gap: 12px; }
    .cl-canjes-grid .cl-canje-banner { height: 84px; }
    .cl-canjes-grid .cl-canje-logo { width: 56px; height: 56px; margin-top: -26px; border-radius: 12px; }
    .cl-canjes-grid .cl-canje-body { padding: 0 10px 12px 10px; }
    .cl-canjes-grid .cl-canje-empresa { font-size: 9px; }
    .cl-canjes-grid .cl-canje-titulo { font-size: 15px; }
    .cl-canjes-grid .cl-canje-name { font-size: 11px; }
}

/* =====================================================================
   PRODUCTOS RELACIONADOS · scroll horizontal con chevrones (móvil)
   ===================================================================== */
.relacionados-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--brand-text);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.relacionados-nav:hover { background: var(--brand-fill); color: var(--on-fill); }
.relacionados-nav svg { width: 18px; height: 18px; }
#relacionadosPrev { left: 2px; }
#relacionadosNext { right: 2px; }

@media (max-width: 1023px) {
    .relacionados-nav.is-hide { display: none; }
    #productos-relacionados-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 8px;
    }
    #productos-relacionados-grid::-webkit-scrollbar { display: none; }
    #productos-relacionados-grid .relacionado-card {
        flex: 0 0 44%;
        max-width: 44%;
        scroll-snap-align: start;
    }
}
@media (min-width: 1024px) {
    .relacionados-nav { display: none !important; }
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */
#sidebar {
    background: var(--surface);
    border-right-color: var(--border);
    transition: background-color .25s ease, border-color .25s ease;
}
#sidebar nav a span {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 700;
}
#sidebar nav a svg { opacity: .85; flex-shrink: 0; }
#sidebar nav a.active-gold {
    background: var(--brand-fill) !important;
    color: var(--on-fill) !important;
}
#sidebar nav a.active-gold span,
#sidebar nav a.active-gold svg { color: var(--on-fill); }

/* =====================================================================
   TARJETAS / BOTONES / FORMULARIOS
   ===================================================================== */
.card,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

input, select, textarea {
    background-color: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    background-color: var(--surface);
    border-color: var(--brand-text);
    box-shadow: 0 0 0 3px var(--focus);
}
option { background: var(--surface); color: var(--text); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
}

/* =====================================================================
   FUNCIONALIDAD EXISTENTE (sin cambio de color)
   ===================================================================== */

/* Descripción del tutorial: 4 renglones fijos con scroll si se pasa */
.tut-desc {
    height: 66px;
    overflow-y: auto;
}

/* Marquesina infinita (desktop) */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

/* Chatbot */
.fade-in { animation: chatFade .3s ease-out forwards; }
@keyframes chatFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Portada desktop */
@media (min-width: 1024px) {
    #portadaLayout.portada-multi {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 1rem;
    }
    #portadaLayout.portada-multi #portadaMain { flex: 1 1 auto; min-width: 0; }
    #portadaLayout.portada-multi #portadaSelector {
        flex: 0 0 13rem;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-self: stretch;
        overflow-y: auto;
        max-height: 100%;
        margin-top: 0;
    }
    #portadaLayout.portada-multi #portadaSelector button { width: 100%; }
}

/* Portada mobile */
@media (max-width: 1023px) {
    #portadaLayout { min-height: 68vh; justify-content: center; }
    #portadaMain { padding: 20px; }
    #portadaMain .relative.aspect-video { height: 42vh; aspect-ratio: auto; }
    .mobile-video-pad { padding: .75rem; }
    #portadaSelector button { width: 7.5rem; }
}

/* Selector de marca mobile */
@media (max-width: 767px) {
    #brandSelectWrap { width: 100%; max-width: calc(100vw - 2rem); }
    #brandSelectMenu { width: 100%; box-sizing: border-box; }
    #brandSelectMenu .bs-option {
        width: 100%;
        text-align: left;
        padding: .6rem .9rem;
        border-radius: .5rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--text-2);
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #brandSelectMenu .bs-option:hover { background: var(--surface-3); }
    #brandSelectMenu .bs-option.active {
        background: var(--brand-fill);
        color: var(--on-fill);
    }
}

/* Fila de logos (desktop): el alto lo calcula el JS. */
#footerMarcas .brand-logo {
    height: var(--brand-h, 1.5rem);
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* Footer mobile: marquesina */
@media (max-width: 640px) {
    #footerMarcas.marquee-mobile {
        overflow: hidden;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #footerMarcas .animate-marquee,
    #footerMarcas .animate-marquee:hover { animation-play-state: running; }
    #footerMarcas .marquee-group {
        display: flex;
        align-items: center;
        gap: 2rem;
        padding-right: 2rem;
    }
    #footerMarcas .marquee-group img {
        height: 2.25rem;
        width: auto;
        max-width: 8rem;
        object-fit: contain;
    }
    #footerMarcas .marquee-group .brand-btn { opacity: 1; white-space: nowrap; }
    #footerMarcas .marquee-group .brand-btn span {
        color: var(--text-2);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .04em;
    }
}

/* Leaflet */
.leaflet-container {
    background: var(--surface-2) !important;
    font-family: 'Montserrat', sans-serif;
    z-index: 10;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 12px 14px; }

/* =====================================================================
   LOADER DE SECCIONES (beneficios / canjes)
   Versión sutil del preloader de la intro: barrita dorada con barrido
   continuo + texto que entra letra a letra.
   ===================================================================== */
.cl-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.cl-bar {
    width: min(190px, 52vw);
    height: 3px;
    border-radius: 99px;
    background: var(--surface-4);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(20, 16, 8, .06);
}
.cl-bar i {
    display: block;
    height: 100%;
    width: 42%;
    border-radius: 99px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-fill),
        var(--brand-fill-hover),
        var(--brand-fill),
        transparent);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(213, 173, 112, .55);
    animation: clBarrido 1.15s ease-in-out infinite;
}
@keyframes clBarrido {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}
.cl-text {
    display: flex;
    gap: .12em;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--text-3);
    text-indent: .34em;
}
.cl-text span {
    display: inline-block;
    opacity: 0;
    animation: clLetraIn .5s ease forwards;
}
@keyframes clLetraIn {
    from { opacity: 0; transform: translateY(5px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cl-bar i { animation: none; transform: none; width: 100%; opacity: .7; }
    .cl-text span { opacity: 1; animation: none; }
}

/* =====================================================================
   LOADER DE PÁGINA (falso "Cargando" de entrada, estilo intro)
   Overlay que cubre la app mientras llega el contenido: logo + barrita
   dorada + texto letra a letra. Azul nada; es puramente estético.
   ===================================================================== */
#clPageLoader {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(780px 460px at 50% 30%, rgba(213, 173, 112, .20), transparent 64%),
        var(--bg-grad);
    transition: opacity .5s ease, visibility .5s ease;
}
#clPageLoader.salida {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.cl-plogo {
    height: clamp(80px, 16vw, 128px);
    width: auto;
    object-fit: contain;
    animation: plLogoIn .8s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes plLogoIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    #clPageLoader { display: none !important; }
}