/*
 * Road2Race — Hombre de Piedra 2026
 * Background invernal inspirado en las sierras de Tandil.
 * Este archivo se carga solamente en la competencia correspondiente.
 */

html {
    min-height: 100%;
    background: #0b1115 !important;
}

body {
    min-height: 100vh !important;
    position: relative !important;
    isolation: isolate;
    background: transparent !important;
}

/*
 * Fotografía fija detrás de toda la interfaz.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            180deg,
            rgba(5, 10, 14, 0.08) 0%,
            rgba(5, 10, 14, 0.14) 30%,
            rgba(5, 10, 14, 0.30) 65%,
            rgba(5, 10, 14, 0.58) 100%
        ),
        url('/assets/uploads/hombre-de-piedra-2026-bg-light.jpg?v=20260720bg-light-v2');

    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
 * Leve sombra ambiental para conservar la lectura.
 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 70% 18%,
            transparent 0%,
            transparent 28%,
            rgba(4, 8, 11, 0.10) 68%,
            rgba(4, 8, 11, 0.24) 100%
        );
}

/*
 * El contenido queda delante del background.
 */
body > *:not(script):not(style) {
    position: relative;
    z-index: 1;
}

/*
 * Neutralizamos únicamente los contenedores generales que
 * podrían estar colocando un fondo sólido sobre la fotografía.
 * Las cards y paneles internos conservan sus propios estilos.
 */
body > div,
body > main,
body > section,
body #app,
body .app,
body .site-wrapper,
body .page-wrapper,
body .site-content,
body .main-content,
body .leaderboard-page,
body .leaderboard-shell,
body .competition-page,
body .competition-wrapper,
body .competition-leaderboard-page {
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * También aplicamos la fotografía al área principal por si
 * la plantilla utiliza un wrapper de pantalla completa.
 */
body main,
body .leaderboard-page,
body .competition-page,
body .competition-leaderboard-page {
    background-color: transparent !important;
}

/*
 * En mobile desplazamos el foco para mantener visibles
 * el sendero, el ciclista y el corredor.
 */
@media (max-width: 900px) {
    body::before {
        background-position: 64% top;
        background-size: auto 100vh;
        background-color: #0b1115;
    }
}

@media (max-width: 520px) {
    body::before {
        background-position: 68% top;
    }
}

/* =========================================================
   HDP 2026 — Card principal con mayor opacidad
   ========================================================= */

body.r2r-hdp-2026 .leaderboard-shell,
body.r2r-hdp-2026 .competition-wrapper,
body.r2r-hdp-2026 .competition-leaderboard-page > .container,
body.r2r-hdp-2026 main > .container {
    background-color: rgba(8, 14, 18, 0.82) !important;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}