/* ===========================================
   OFPIC — Galería & Evento Detail v2
   Premium override: neutraliza galeria-mejorada.css
   Paleta: neutral #1a1a1a, gold #B89A5B, white
   MUST load AFTER galeria-mejorada.css
   =========================================== */


/* ══════════════════════════════════════════
   1. VARIABLE OVERRIDES — DEPORTIVO
   Dark/red → Light/neutral
   ══════════════════════════════════════════ */

.evento-deportivo {
    --hero-gradient: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.78) 0%,
        rgba(26, 26, 26, 0.60) 50%,
        rgba(26, 26, 26, 0.82) 100%
    );
    --section-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: var(--color-border, #E5E5E5);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.12);
    --text-primary: #1a1a1a;
    --text-secondary: #6B6B6B;
    --accent: #1a1a1a;
    --accent-dark: #000000;
    --accent-glow: rgba(26, 26, 26, 0.15);
    --overlay-bg: rgba(26, 26, 26, 0.22);
    --overlay-icon-bg: rgba(255, 255, 255, 0.95);
    --overlay-icon-color: #1a1a1a;
    --btn-gradient: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
    --btn-hover-gradient: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);
    --search-bg: #FAFAFA;
    --search-input-bg: #ffffff;
    --search-border: var(--color-border, #E5E5E5);
    --search-text: #1a1a1a;
    --stats-bg: #1a1a1a;
    --stats-text: #ffffff;
    --tag-bg: rgba(26, 26, 26, 0.06);
    --tag-text: #1a1a1a;
    --tag-border: rgba(26, 26, 26, 0.12);
}


/* ══════════════════════════════════════════
   2. VARIABLE OVERRIDES — SOCIAL
   Cream/brown → White/gold
   ══════════════════════════════════════════ */

.evento-social {
    --hero-gradient: linear-gradient(
        180deg,
        rgba(10, 8, 5, 0.45) 0%,
        rgba(18, 14, 10, 0.55) 50%,
        rgba(10, 8, 5, 0.68) 100%
    );
    --section-bg: #FAFAFA;
    --card-bg: #ffffff;
    --card-border: transparent;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --text-primary: #1a1a1a;
    --text-secondary: #6B6B6B;
    --accent: #B89A5B;
    --accent-dark: #A07D3F;
    --accent-glow: rgba(184, 154, 91, 0.15);
    --overlay-bg: rgba(10, 8, 5, 0.18);
    --overlay-icon-bg: rgba(255, 255, 255, 0.95);
    --overlay-icon-color: #1a1a1a;
    --btn-gradient: linear-gradient(135deg, #B89A5B 0%, #A07D3F 100%);
    --btn-hover-gradient: linear-gradient(135deg, #A07D3F 0%, #8A6B32 100%);
    --search-bg: #F5F5F5;
    --search-input-bg: #ffffff;
    --search-border: rgba(184, 154, 91, 0.12);
    --search-text: #1a1a1a;
    --stats-bg: transparent;
    --stats-text: #6B6B6B;
    --tag-bg: rgba(184, 154, 91, 0.08);
    --tag-text: #B89A5B;
    --tag-border: rgba(184, 154, 91, 0.18);
}


/* ══════════════════════════════════════════
   3. HERO — DEPORTIVO HARDCODED OVERRIDES
   ══════════════════════════════════════════ */

/* Fallback bg */
.evento-deportivo.evento-hero {
    background-color: #1a1a1a;
}

/* Particles: red → gold subtle */
.evento-deportivo .evento-hero-particles {
    opacity: 0.04;
    background-image:
        radial-gradient(circle at 15% 85%, #B89A5B 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 15%, #B89A5B 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, #B89A5B 0.8px, transparent 0.8px),
        radial-gradient(circle at 70% 70%, #fff 0.5px, transparent 0.5px);
}

/* Bottom border: red → gold accent line */
.evento-deportivo.evento-hero::after {
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #B89A5B 30%,
        #B89A5B 70%,
        transparent 100%
    );
}

/* Badge: red → neutral dark */
.evento-deportivo .evento-hero-badge {
    background: rgba(26, 26, 26, 0.80);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    letter-spacing: 2.5px;
}

/* Title: add DM Sans / Sora for deportivo */
.evento-deportivo .evento-hero-titulo {
    font-family: var(--font-display, 'Sora', sans-serif);
    letter-spacing: 4px;
}

/* Social share hover: red glow → neutral */
.evento-deportivo .evento-hero-social li a:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* ══════════════════════════════════════════
   4. HERO — SOCIAL HARDCODED OVERRIDES
   ══════════════════════════════════════════ */

/* Social hero fallback */
.evento-social.evento-hero {
    background-color: #1a1715;
}

/* Bottom border: copper → gold */
.evento-social.evento-hero::after {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 10%,
        rgba(184, 154, 91, 0.25) 35%,
        rgba(184, 154, 91, 0.35) 50%,
        rgba(184, 154, 91, 0.25) 65%,
        transparent 90%
    );
}

/* Badge: glass → glass with gold hint */
.evento-social .evento-hero-badge {
    border-color: rgba(184, 154, 91, 0.20);
}

/* Hero title ornamental line → gold */
.evento-social .evento-hero-titulo::after {
    background: rgba(184, 154, 91, 0.40);
}

/* Ref */
.evento-social .evento-hero-ref {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.50);
}

/* Tags on hero: glass → warm glass with gold hint */
.evento-social .evento-tag {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(184, 154, 91, 0.15);
}

.evento-social .evento-tag:hover {
    background: rgba(184, 154, 91, 0.18);
    color: #ffffff;
}

/* Social share hover → gold tint */
.evento-social .evento-hero-social li a:hover {
    background: rgba(184, 154, 91, 0.25);
    border-color: rgba(184, 154, 91, 0.40);
    box-shadow: 0 2px 10px rgba(184, 154, 91, 0.15);
}


/* ══════════════════════════════════════════
   5. SEARCH BAR OVERRIDES
   ══════════════════════════════════════════ */

/* Deportivo: light search */
.evento-deportivo.evento-search-bar {
    border-top: none;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}

.evento-deportivo .evento-search-input-wrap input {
    border: 1px solid var(--color-border, #E5E5E5);
    background: #ffffff;
}

.evento-deportivo .evento-search-input-wrap input:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* Social search */
.evento-social.evento-search-bar {
    background: #F5F5F5;
    border-bottom: 1px solid rgba(184, 154, 91, 0.08);
}

.evento-social .evento-search-input-wrap input {
    border-color: rgba(184, 154, 91, 0.10);
}

.evento-social .evento-search-input-wrap input:focus {
    border-color: #B89A5B;
    box-shadow: 0 0 0 3px rgba(184, 154, 91, 0.10);
}

/* Social search button: dark → gold */
.evento-social .evento-search-btn {
    background: var(--btn-gradient);
    color: #ffffff;
}

.evento-social .evento-search-btn:hover {
    background: var(--btn-hover-gradient);
    box-shadow: 0 4px 14px rgba(184, 154, 91, 0.25);
}

/* Social GPS link */
.evento-social .evento-search-gps {
    color: #B89A5B;
}

.evento-social .evento-search-gps:hover {
    color: #A07D3F;
}


/* ══════════════════════════════════════════
   6. GALLERY SECTION
   ══════════════════════════════════════════ */

/* Deportivo section: dark → white, remove red border */
.evento-deportivo.evento-galeria-section {
    border-top: 1px solid var(--color-border, #E5E5E5);
}

/* Social section: lighter */
.evento-social.evento-galeria-section {
    background: #FAFAFA;
}


/* ══════════════════════════════════════════
   7. STATS BAR
   ══════════════════════════════════════════ */

/* Deportivo stats: red → neutral dark elegant */
.evento-deportivo .evento-stats {
    border-radius: 8px;
}

/* Social stats: align to gold */
.evento-social .evento-stats {
    border-top-color: rgba(184, 154, 91, 0.08);
    border-bottom-color: rgba(184, 154, 91, 0.08);
}

.evento-social .evento-stat {
    color: #6B6B6B;
}

.evento-social .evento-stat strong {
    color: #1a1a1a;
}

.evento-social .evento-stat i {
    color: #B89A5B;
    opacity: 0.7;
}


/* ══════════════════════════════════════════
   8. PHOTO CARDS — DEPORTIVO
   ══════════════════════════════════════════ */

/* Card tile: dark → white, add border */
.evento-deportivo .galeria-mejorada .foto-item {
    background: #ffffff;
    border: 1px solid var(--color-border, #E5E5E5) !important;
    border-radius: 8px !important;
}

/* Hover: red glow → neutral shadow */
.evento-deportivo .galeria-mejorada .foto-item:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

/* Bottom gradient overlay: softer */
.evento-deportivo .galeria-mejorada .foto-item .foto-link::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
}

.evento-deportivo .galeria-mejorada .foto-item:hover .foto-link::after {
    opacity: 0.4;
}

/* Red corner accent → gold accent */
.evento-deportivo .galeria-mejorada .foto-item::before {
    background: linear-gradient(135deg, transparent 50%, rgba(184, 154, 91, 0.4) 50%);
}

/* Grid gap: tight → standard with borders */
.evento-deportivo .galeria-mejorada {
    gap: 16px !important;
    padding: 0 0 30px !important;
}


/* ══════════════════════════════════════════
   9. PHOTO CARDS — SOCIAL (BENTO)
   ══════════════════════════════════════════ */

/* Hover shadows → gold tint */
.evento-social .galeria-mejorada .foto-item:hover {
    box-shadow:
        0 25px 60px rgba(184, 154, 91, 0.10),
        0 10px 20px rgba(184, 154, 91, 0.06) !important;
}

/* Overlay → subtle gold warmth */
.evento-social .galeria-mejorada .foto-item:hover .foto-overlay {
    background: linear-gradient(
        180deg,
        transparent 50%,
        rgba(184, 154, 91, 0.06) 100%
    ) !important;
}

/* Buy button: brown → gold */
.evento-social .galeria-mejorada .btn-comprar-foto {
    color: #B89A5B;
}

.evento-social .galeria-mejorada .btn-comprar-foto:hover {
    background: #B89A5B;
    color: #ffffff;
}


/* ══════════════════════════════════════════
   10. PAGINATION
   ══════════════════════════════════════════ */

.evento-deportivo .evento-paginacion a:hover {
    color: #1a1a1a !important;
}

.evento-social .evento-paginacion a:hover {
    color: #B89A5B !important;
}


/* ══════════════════════════════════════════
   11. EMPTY / PRIVATE STATES
   ══════════════════════════════════════════ */

.evento-sin-fotos-icon .lnr {
    color: #B89A5B;
}

.evento-social .evento-sin-fotos h2 {
    color: #1a1a1a;
}


/* ══════════════════════════════════════════
   12. PHOTOSWIPE — OFPIC OVERRIDES
   Red accents → gold/neutral
   ══════════════════════════════════════════ */

/* Counter badge: red → neutral dark */
.pswp__counter {
    background: #1a1a1a !important;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* Navigation arrows: red → neutral dark */
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    background-color: rgba(26, 26, 26, 0.85) !important;
}

/* COMPRAR floating button: red → gold */
.pswp-btn-comprar-float {
    background: linear-gradient(135deg, #B89A5B 0%, #A07D3F 100%);
    box-shadow: 0 8px 30px rgba(184, 154, 91, 0.5);
    animation: ofpic-glow-gold 2s ease-in-out infinite;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    letter-spacing: 1px;
}

.pswp-btn-comprar-float:hover {
    background: linear-gradient(135deg, #A07D3F 0%, #B89A5B 100%);
    box-shadow: 0 10px 40px rgba(184, 154, 91, 0.7);
}

/* Gold glow keyframes */
@keyframes ofpic-glow-gold {
    0%, 100% { box-shadow: 0 8px 30px rgba(184, 154, 91, 0.5); }
    50% { box-shadow: 0 8px 50px rgba(184, 154, 91, 0.8), 0 0 80px rgba(184, 154, 91, 0.25); }
}


/* ══════════════════════════════════════════
   13. FANCYBOX LEGACY — NEUTRALIZE RED
   ══════════════════════════════════════════ */

.fancybox-toolbar-ofpic .btn-tool:hover,
.fancybox-toolbar-ofpic .btn-tool.active {
    background: #1a1a1a;
}

.fancybox-thumbs-ofpic img:hover,
.fancybox-thumbs-ofpic img.active {
    border-color: #B89A5B;
}

.fancybox-btn-comprar {
    background: linear-gradient(135deg, #B89A5B 0%, #A07D3F 100%);
    box-shadow: 0 4px 15px rgba(184, 154, 91, 0.35);
}

.fancybox-btn-comprar:hover {
    background: linear-gradient(135deg, #A07D3F 0%, #8A6B32 100%);
}

.slideshow-progress {
    background: #B89A5B;
}

.fancybox-nav span {
    background: rgba(26, 26, 26, 0.8) !important;
}

.fancybox-nav:hover span {
    background: #1a1a1a !important;
}


/* ══════════════════════════════════════════
   14. SKELETON LOADING — match light bg
   ══════════════════════════════════════════ */

.foto-skeleton {
    background: linear-gradient(
        90deg,
        #F5F5F5 0%,
        #EBEBEB 50%,
        #F5F5F5 100%
    );
}


/* ══════════════════════════════════════════
   15. SUBSCRIPTION / NEWSLETTER FORM
   (if present in detallar.phtml)
   ══════════════════════════════════════════ */

.evento-suscripcion-box {
    background: #FAFAFA;
    border: 1px solid var(--color-border, #E5E5E5);
}

.evento-suscripcion-box .btn {
    background: var(--btn-gradient);
    border: none;
    color: #ffffff;
}


/* ══════════════════════════════════════════
   16. SOCIAL — SECTION SPECIFICS
   Override hardcoded social section colors
   ══════════════════════════════════════════ */

/* Social gallery section bg → lighter */
.evento-social.evento-galeria-section {
    background: #FAFAFA;
}

/* Social stats align to tokens */
.evento-social .evento-stats {
    border-top: 1px solid rgba(184, 154, 91, 0.08);
    border-bottom: 1px solid rgba(184, 154, 91, 0.08);
}


/* ══════════════════════════════════════════
   17. RESPONSIVE REFINEMENTS
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Mobile buy button: always visible */
    .evento-social .galeria-mejorada .btn-comprar-foto {
        background: #B89A5B;
        color: #ffffff;
    }

    /* Deportivo grid: add gap on mobile too */
    .evento-deportivo .galeria-mejorada {
        gap: 12px !important;
    }

    .evento-deportivo .galeria-mejorada .foto-item {
        border-radius: 6px !important;
    }

    /* PhotoSwipe button smaller */
    .pswp-btn-comprar-float {
        box-shadow: 0 6px 20px rgba(184, 154, 91, 0.5);
    }
}

@media (max-width: 480px) {
    .evento-deportivo .galeria-mejorada {
        gap: 8px !important;
    }

    .evento-deportivo .galeria-mejorada .foto-item {
        border-radius: 4px !important;
    }
}


/* ══════════════════════════════════════════
   18. PREMIUM TYPOGRAPHY REFINEMENTS
   ══════════════════════════════════════════ */

/* Social titles: ensure Playfair Display */
.evento-social .evento-hero-titulo {
    font-family: var(--font-editorial, 'Playfair Display', Georgia, serif);
}

.evento-social .evento-hero-desc {
    font-family: var(--font-editorial, 'Playfair Display', serif);
}

.evento-social .evento-hero-badge {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

.evento-social .evento-hero-ref {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* Deportivo: clean UI typography */
.evento-deportivo .evento-hero-badge {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

.evento-deportivo .evento-hero-ref {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* Buy buttons: consistent font */
.galeria-mejorada .btn-comprar-foto {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* Search: consistent font */
.evento-search-input-wrap input {
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

.evento-search-btn {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* Stats: consistent font */
.evento-stat {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}


/* ══════════════════════════════════════════
   19. REDUCED MOTION — inherits from
   galeria-mejorada.css, gold glow included
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pswp-btn-comprar-float {
        animation: none;
        box-shadow: 0 8px 30px rgba(184, 154, 91, 0.5);
    }
}