/* ==========================================================================
   ev.conecta2nic.com — sitio público
   Tokens de marca → tokens semánticos → variables de Bootstrap. Nunca colores sueltos en componentes.
   ========================================================================== */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/outfit-latin.woff2') format('woff2');
}

:root {
    /* Marca EV.conecta2nic.com: marino → azul → cian del logo.
       El cian claro (#19A7DB) es solo decorativo (degradados, puntos, barras): no llega a 4.5:1 con texto. */
    --brand-navy: #0A2353;
    --brand-blue: #1B5FAF;
    --brand-blue-ink: #144A8C;
    --brand-cyan: #19A7DB;
    --brand-cyan-ink: #0B7AA8;
    --brand-ink: #0A1A33;
    --brand-gray-50: #F3F6FA;
    --brand-gradient: linear-gradient(90deg, var(--brand-navy), var(--brand-blue) 55%, var(--brand-cyan));

    /* Semánticos */
    --bg: #FFFFFF;
    --bg-alt: var(--brand-gray-50);
    --surface: #FFFFFF;
    --text: var(--brand-ink);
    --muted: #5A6B85;
    --line: #DDE4EE;
    --accent: var(--brand-cyan-ink);
    --accent-hover: #086A93;
    --primary: var(--brand-blue);
    --on-primary: #FFFFFF;
    --shadow-sm: 0 1px 2px rgb(10 35 83 / .06), 0 2px 8px rgb(10 35 83 / .05);
    --shadow-md: 0 10px 30px -12px rgb(10 35 83 / .22);

    --radius: 20px;
    --radius-sm: 12px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* Bootstrap */
    --bs-body-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 1.125rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-link-color-rgb: 27, 95, 175;
    --bs-focus-ring-color: rgb(27 95 175 / .35);
}

[data-bs-theme="dark"] {
    --bg: #081326;
    --bg-alt: #0B1A33;
    --surface: #0F2140;
    --text: #E6EDF7;
    --muted: #9DB0CC;
    --line: #1E3358;
    --accent: #4FB8F0;
    --accent-hover: #7CC8F2;
    --primary: #4FB8F0;
    --on-primary: #081326;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-md: 0 14px 34px -14px rgb(0 0 0 / .6);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-link-color-rgb: 79, 184, 240;
    color-scheme: dark;
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--text); }
a { color: var(--primary); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.skip-link {
    position: fixed; left: 16px; top: -60px; z-index: 2000;
    background: var(--brand-ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }

.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section-title { font-size: clamp(2rem, 4.2vw, 2.75rem); margin-bottom: 16px; }
.section-lead { color: var(--muted); font-size: 1.125rem; max-width: 560px; }
.display-title { font-size: clamp(2.5rem, 6vw, 4.25rem); margin-bottom: 20px; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

.btn { font-weight: 600; border-radius: 999px; }
.btn-accent { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--on-primary); --bs-btn-hover-bg: var(--brand-blue-ink); --bs-btn-hover-border-color: var(--brand-blue-ink); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-bg: var(--brand-blue-ink); --bs-btn-active-color: var(--on-primary); }
[data-bs-theme="dark"] .btn-accent { --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); }

/* ---------- Marca ---------- */
.brand-svg { display: inline-block; width: 52px; height: auto; flex-shrink: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 14px; color: var(--brand-navy); text-decoration: none; }
.wordmark-mark { width: 64px; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark-name { font-size: 1.6rem; font-weight: 400; letter-spacing: -.02em; }
.wordmark-name strong { font-weight: 800; letter-spacing: -.04em; }
.wordmark-tag { font-size: .95rem; color: var(--muted); margin-top: 4px; }
[data-bs-theme="dark"] .wordmark, .wordmark-light { color: #fff; }
.wordmark-light .wordmark-tag { color: #B8C7DE; }
.site-header { padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .container-xl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero { background: radial-gradient(1200px 400px at 85% -10%, color-mix(in srgb, var(--brand-cyan) 14%, transparent), transparent), var(--bg); }
.hero .display-title { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-bs-theme="dark"] .hero .display-title { background: linear-gradient(90deg, #E6EDF7, #7CC8F2); -webkit-background-clip: text; background-clip: text; }
.site-header .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .wordmark { gap: 10px; } .wordmark-name { font-size: 1.05rem; } .wordmark-mark { width: 40px; } .wordmark-tag { font-size: .75rem; } .site-header .btn-accent .label-long { display: none; } }

/* ---------- Aparición al hacer scroll (fade-up 24px, 450ms, escalonado 80ms) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Errores ---------- */
.error-page { padding: 120px 0; }
.error-code { font-size: 5rem; font-weight: 700; color: var(--accent); line-height: 1; }

/* ---------- Avisos ---------- */
.site-flash { padding: 12px 16px; text-align: center; background: var(--bg-alt); color: var(--text); border-bottom: 1px solid var(--line); }
.site-flash-danger { color: var(--accent); font-weight: 600; }

/* @modulos:css */

/* ==========================================================================
   Resultados en vivo y portada
   ========================================================================== */
.event-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.event-links a { display: flex; flex-direction: column; padding: 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); }
.event-links span { color: var(--muted); font-size: .95rem; }
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.results-note, .results-foot { color: var(--muted); font-size: .95rem; }
.results-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin: 20px 0; }
.results-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.results-card h2 { font-size: 1.25rem; margin: 0 0 12px; }
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ranking li:first-child { border-top: 0; }
.ranking .rank { font-weight: 700; font-size: 1.2rem; text-align: center; color: var(--muted); }
.ranking li:nth-child(1) .rank { color: var(--accent); }
.ranking .team { font-weight: 600; min-width: 0; }
.ranking .team small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.ranking .score { font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ranking .bar { grid-column: 2 / -1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ranking .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--brand-gradient); transition: width .8s var(--ease-out); }
.ranking li.is-turn .team::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--brand-cyan); vertical-align: middle; }
.live-dot { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--muted); }
.live-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-cyan); }
.live-dot[data-mode="error"] i { background: var(--accent); }
.site-flash-warning { color: var(--accent); font-weight: 600; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .ranking .bar i { transition: none; } }

/* Colores del isotipo: color sobre fondo claro; versión clara en fondos oscuros y en modo oscuro */
.brand-svg .ev-s1 { stop-color: #0A2353; }
.brand-svg .ev-s2 { stop-color: #1B5FAF; }
.brand-svg .ev-s3 { stop-color: #19A7DB; }
.brand-svg-light .ev-s1, [data-bs-theme="dark"] .brand-svg .ev-s1 { stop-color: #9CC0F0; }
.brand-svg-light .ev-s2, [data-bs-theme="dark"] .brand-svg .ev-s2 { stop-color: #5CC2EE; }
.brand-svg-light .ev-s3, [data-bs-theme="dark"] .brand-svg .ev-s3 { stop-color: #2FC0F0; }
.results-card h2 small { font-size: .85rem; font-weight: 500; color: var(--muted); }