/* ========================================================
   CIRCUITO TRAIL 2026 - ESTILO NEO-BRUTALISTA
   ======================================================== */

:root {
    /* Paleta Requerida */
    --c-orange: #FF5500;
    --c-brown: #4A2C2A;
    --c-green: #114B21;
    --c-offwhite: #F4F4F0;
    --c-black: #111111;
    
    /* Configuración estructural brutalista (Sin curvas) */
    --border-width: 4px;
    --brutal-shadow: 6px 6px 0px var(--c-black);
    --brutal-shadow-hover: 10px 10px 0px var(--c-black);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--c-offwhite);
    color: var(--c-black);
    -webkit-font-smoothing: antialiased;
}

/* =======================================================
   UTILIDADES
   ======================================================= */
.fw-black { font-weight: 900 !important; }
.z-index-1 { z-index: 1; }
.min-w-80 { min-width: 80px; }

.bg-orange { background-color: var(--c-orange) !important; }
.bg-brown { background-color: var(--c-brown) !important; }
.bg-dark-green { background-color: var(--c-green) !important; }
.bg-offwhite { background-color: var(--c-offwhite) !important; }

.text-orange { color: var(--c-orange) !important; }
.text-brown { color: var(--c-brown) !important; }
.text-dark-green { color: var(--c-green) !important; }

/* =======================================================
   BORDES Y ESTRUCTURA BRUTALISTA
   ======================================================= */
.brutal-border {
    border: var(--border-width) solid var(--c-black) !important;
    border-radius: 0 !important; 
}
.brutal-border-strict {
    border: var(--border-width) solid var(--c-black) !important;
}

.border-bottom-thick { border-bottom: var(--border-width) solid var(--c-black) !important; }
.border-top-thick { border-top: var(--border-width) solid var(--c-black) !important; }

@media (min-width: 992px) {
    .border-end-lg-thick { border-right: var(--border-width) solid var(--c-black); }
}

.brutal-box {
    border: var(--border-width) solid var(--c-black);
    box-shadow: var(--brutal-shadow);
    border-radius: 0;
    background-color: #fff;
}

/* =======================================================
   COMPONENTES INTERACTIVOS
   ======================================================= */
.brutal-card {
    border: var(--border-width) solid var(--c-black);
    box-shadow: var(--brutal-shadow);
    border-radius: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brutal-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--brutal-shadow-hover);
}

.brutal-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 3px solid var(--c-black);
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 4px 4px 0px var(--c-black);
}

.brutal-btn {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 4px 4px 0px var(--c-black);
    transition: all 0.1s ease;
    cursor: pointer;
    border-radius: 0;
}
.brutal-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--c-black);
    color: #fff;
}
.brutal-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--c-black);
}

.banner-hover:hover img {
    opacity: 0.85;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.sponsor-item { 
    transition: transform 0.2s, filter 0.2s; 
    filter: grayscale(100%); 
}
.sponsor-item:hover { 
    transform: scale(1.05); 
    filter: grayscale(0%); 
}

/* =======================================================
   NAVEGACIÓN Y HERO SECTION
   ======================================================= */
.brutal-navbar {
    background-color: #fff;
    border-bottom: var(--border-width) solid var(--c-black);
    padding: 10px 0;
}
.brutal-navbar .nav-link {
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border: 3px solid transparent;
    transition: all 0.2s;
    color: var(--c-black);
}
.brutal-navbar .nav-link:hover {
    border-bottom: 3px solid var(--c-orange);
    color: var(--c-orange) !important;
}

.hero-overlay {
    background-color: rgba(244, 244, 240, 0.75); /* Legibilidad del panel */
}

/* =======================================================
   MEDALLAS CUADRADAS
   ======================================================= */
.medal-square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}
.medal-square img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.medal-square:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* =======================================================
   REDES SOCIALES
   ======================================================= */
.brutal-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border: 3px solid var(--c-black);
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 4px 4px 0px var(--c-orange);
    color: var(--c-white);
}
.brutal-social:hover {
    background-color: var(--c-orange) !important;
    color: var(--c-white) !important;
    border-color: var(--c-orange) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--c-black);
}

/* =======================================================
   TABS Y LISTAS MODALES
   ======================================================= */
.brutal-tabs { border-bottom: 3px solid var(--c-black); }
.brutal-tabs .nav-link {
    border: 3px solid transparent;
    color: var(--c-black);
    font-weight: 800;
    border-radius: 0;
    background: transparent;
}
.brutal-tabs .nav-link.active {
    border: 3px solid var(--c-black);
    border-bottom-color: #fff;
    background-color: #fff;
    color: var(--c-orange);
    margin-bottom: -3px; 
}

.brutal-list .list-group-item {
    border: none;
    border-bottom: 2px solid var(--c-black);
    border-radius: 0 !important;
    padding: 15px 20px;
}
.brutal-list .list-group-item:last-child { border-bottom: none; }

.btn-close.brutal-close {
    border: 2px solid var(--c-black);
    border-radius: 0;
    opacity: 1;
    background-color: #fff;
    padding: 0.6rem;
    transition: background-color 0.2s;
}
.btn-close.btn-close-white.brutal-close {
    border-color: #fff;
    background-color: transparent;
}
.btn-close.brutal-close:hover { background-color: var(--c-orange); }

/* =======================================================
   STRAVA CONTAINER FIX
   ======================================================= */
.strava-container { min-height: 405px; width: 100%; }
.strava-embed-placeholder iframe { width: 100% !important; height: 100% !important; min-height: 400px; }

/* =======================================================
   SLIDER BRUTALISTA TWEAKS & TEXT SHADOWS
   ======================================================= */
.brutal-hero-container {
    min-height: 60vh;
}
/* Transición cruda sin difuminado suave (Brutalismo puro) */
.brutal-carousel .carousel-item {
    transition: transform 0s ease-in-out, opacity 0.2s cubic-bezier(1, 0, 0, 1) !important;
}

/* Capa oscura progresiva para asegurar lectura de texto blanco sin tapar toda la foto */
.hero-overlay {
    background: linear-gradient(90deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.4) 50%, rgba(17,17,17,0) 100%); 
    pointer-events: none;
}

/* Sombras de texto brutalistas para lectura perfecta sobre fotos */
.hero-text-shadow {
    text-shadow: 4px 4px 0px var(--c-black), -1px -1px 0 var(--c-black), 1px -1px 0 var(--c-black), -1px 1px 0 var(--c-black), 1px 1px 0 var(--c-black);
}
.hero-text-shadow-sm {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}
.border-white { border-color: #fff !important; }

.object-fit-cover {
    object-fit: cover;
    object-position: center;
}
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.z-index-2 { z-index: 2; }

/* =======================================================
   REQUERIMIENTOS UI/UX: TRAIL 2026 (COUNTER Y SPONSORS)
   ======================================================= */

/* 1. Efecto Translúcido (Glassmorphism) ultra ligero para Counter y Badge */
.translucent-counter {
    background-color: transparent !important; /* 100% transparente para revelar el fondo inferior */
    backdrop-filter: none; /* Quitamos el desenfoque */
    -webkit-backdrop-filter: none;
    border-top: none !important; /* Quitamos la línea negra superior que dividía la foto */
}

.translucent-badge {
    background-color: rgba(255, 85, 0, 0.35) !important; 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 2. Slide inmersivo con centrado perfecto */
.slide-img-cover {
    object-fit: cover !important;
    object-position: center !important; /* Al usar imágenes de 1920x800, el centro es la posición perfecta */
}

/* 2.1 Modificadores para adelgazar el Counter al máximo */
.min-w-60 { 
    min-width: 60px !important; 
}
.small-text { 
    font-size: 0.65rem; 
}

/* 3. Estructura Jerárquica Exacta de Sponsors usando Flexbox */
.sponsor-platinum {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.sponsor-platinum img { max-height: 100%; width: auto; object-fit: contain; }

.sponsor-gold {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sponsor-gold img { max-height: 100%; width: auto; object-fit: contain; }

.sponsor-silver {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}
.sponsor-silver img { max-height: 100%; width: auto; object-fit: contain; }

/* Responsive fino: Reducción sutil de escalas de logos en móviles */
@media (max-width: 768px) {
    .sponsor-platinum { height: 110px; padding: 1rem; }
    .sponsor-gold { height: 80px; padding: 0.75rem; }
    .sponsor-silver { height: 60px; padding: 0.5rem; }
}
/* =======================================================
   STICKERS SVG NEO-BRUTALISTAS (CORRECCIÓN DE CAPAS FRONTALES)
   ======================================================= */
/* Previene que un sticker grande quede debajo de la tarjeta vecina al interactuar */
.sticker-hover-wrap { z-index: 1; }
.sticker-hover-wrap:hover { z-index: 20; }

.trail-sticker {
    position: absolute;
    z-index: 10 !important; /* CORRECCIÓN CLAVE: Fuerza que siempre estén por encima de cuadros y fondos */
    pointer-events: none;
    /* La magia: Drop shadow nativa respetando contornos del PNG/SVG */
    filter: drop-shadow(4px 4px 0px var(--c-black));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* 1. Efecto Hover en Tarjetas (Hacen efecto de Estampa 'Pop' sobre la esquina) */
.sticker-peek { opacity: 0; transform: scale(0.5) rotate(0deg); }
.sticker-peek-1 { width: 120px; top: -25px; right: -15px; }
.sticker-peek-2 { width: 110px; top: -30px; left: -15px; }
.sticker-peek-3 { width: 120px; top: -20px; right: -15px; }

.sticker-hover-wrap:hover .sticker-peek-1 { opacity: 1; transform: scale(1) rotate(12deg); }
.sticker-hover-wrap:hover .sticker-peek-2 { opacity: 1; transform: scale(1) rotate(-14deg); }
.sticker-hover-wrap:hover .sticker-peek-3 { opacity: 1; transform: scale(1) rotate(10deg); }

/* 2. Efecto Scroll Reveal (Flotan libremente en la sección Medallas) */
.sticker-float {
    opacity: 0;
    z-index: 10 !important;
}
.sticker-float-1 { width: 150px; top: 10%; left: 2%; transform: translateX(-50px) rotate(-15deg); }
.sticker-float-2 { width: 140px; bottom: 10%; right: 2%; transform: translateX(50px) rotate(15deg); }

.scroll-reveal-section.is-visible .sticker-float-1 {
    opacity: 1;
    transform: translateX(0) rotate(-5deg);
    animation: floatSticker1 4s ease-in-out infinite 0.4s;
}
.scroll-reveal-section.is-visible .sticker-float-2 {
    opacity: 1;
    transform: translateX(0) rotate(5deg);
    animation: floatSticker2 5s ease-in-out infinite 0.4s;
}

@keyframes floatSticker1 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}
@keyframes floatSticker2 {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
}

/* 3. Stickers en las esquinas de los Modales (Lightboxes) */
.sticker-modal {
    width: 130px;
    top: -45px;
    right: -20px;
    z-index: 1060 !important; /* Se empuja por encima del borde oscuro del modal */
    transform: scale(0) rotate(-20deg);
    opacity: 0;
}

.sticker-modal-alt {
    right: auto;
    left: -20px;
    transform: scale(0) rotate(20deg);
}

/* Bootstrap activa ".show" de manera predeterminada al abrir un modal */
.modal.show .sticker-modal {
    opacity: 1;
    transform: scale(1) rotate(12deg);
    transition-delay: 0.15s; /* Efecto "Pop!" elástico al abrir */
}
.modal.show .sticker-modal-alt {
    opacity: 1;
    transform: scale(1) rotate(-12deg);
}

/* 4. Responsivo para celulares (Siempre visibles y sobrepuestos sin tapar texto) */
@media (max-width: 768px) {
    .sticker-peek { opacity: 1; }
    .sticker-peek-1 { transform: scale(1) rotate(12deg) !important; width: 90px; top: -20px; right: -10px; }
    .sticker-peek-2 { transform: scale(1) rotate(-14deg) !important; width: 85px; top: -25px; left: -10px; }
    .sticker-peek-3 { transform: scale(1) rotate(10deg) !important; width: 90px; top: -15px; right: -10px; }
    
    .sticker-float-1 { width: 100px; top: 0%; left: 0; }
    .sticker-float-2 { width: 90px; bottom: 0%; right: 0; }
    
    .sticker-modal { width: 100px; top: -35px; right: -10px; }
    .sticker-modal-alt { left: -10px; }
}