:root {
    --gris-413: #54564f;
    --verde-361: #43b02a;
    --verde-claro: #63cf45;
    --rojo-485: #da291c;
    --naranja: #ef9700;
    --fondo: #08100e;
    --panel: #111a17;
    --panel-2: #17211d;
    --blanco: #fff;
    --texto: #d6ddd7;
    --muted: #909b94;
    --linea: rgba(255,255,255,.14);
    --sombra: 0 24px 65px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--blanco);
    background:
        radial-gradient(circle at 18% 0%, rgba(67,176,42,.12), transparent 30%),
        linear-gradient(145deg, #070d0b, #101815 52%, #070c0a);
    font-family: "Futura PT", "Futura", "Century Gothic", Arial, sans-serif;
    font-weight: 400;
}
button, input, select { font: inherit; }
a { color: inherit; }
.container { width: min(1220px, calc(100% - 28px)); margin-inline: auto; }

.hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 2px solid var(--verde-361);
    background-color: #07100d;
    background-image: url("../img/frente-agencia.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}
.hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,8,6,.98) 0%, rgba(3,8,6,.91) 33%, rgba(3,8,6,.52) 53%, rgba(3,8,6,.05) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(4,9,7,.62));
}
.hero__content { position: relative; z-index: 2; padding: 42px 0 76px; }
.hero__brand-block { display: flex; align-items: center; gap: 34px; margin-bottom: 52px; }
.hero__logo { width: 310px; max-width: 55vw; filter: drop-shadow(0 14px 25px rgba(0,0,0,.3)); }
.hero__agency {
    padding-left: 34px;
    border-left: 1px solid rgba(255,255,255,.35);
    text-transform: uppercase;
}
.hero__agency strong { display: block; font-size: 1.25rem; letter-spacing: .06em; }
.hero__agency span { display: block; margin-top: 7px; color: var(--verde-claro); font-size: .86rem; letter-spacing: .12em; }
.hero__title-block { max-width: 650px; }
.hero__eyebrow { color: var(--verde-claro); text-transform: uppercase; font-size: .76rem; letter-spacing: .18em; font-weight: 700; }
.hero h1 {
    margin: 13px 0 0;
    font-size: clamp(2.65rem, 5vw, 5.15rem);
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 800;
}
.hero h1 em { display: block; margin-top: 8px; color: var(--verde-361); font-style: normal; }
.hero p { margin: 22px 0 0; max-width: 570px; color: #e3e8e4; line-height: 1.55; font-size: 1.12rem; }

.main-content { position: relative; z-index: 4; margin-top: -52px; padding-bottom: 56px; }
.system-panel {
    display: grid;
    grid-template-columns: 1.1fr .8fr .9fr 1.2fr;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,30,26,.98), rgba(7,13,11,.98));
    box-shadow: var(--sombra);
}
.metric { min-height: 108px; padding: 19px 20px; display: flex; align-items: center; gap: 16px; border-right: 1px solid var(--linea); }
.metric:last-child { border-right: 0; }
.metric__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--verde-claro);
    border: 1px solid rgba(67,176,42,.75);
    background: rgba(67,176,42,.13);
    font-size: 1.25rem;
    font-weight: 800;
}
.metric--online .metric__icon { box-shadow: 0 0 0 8px rgba(67,176,42,.08), 0 0 28px rgba(67,176,42,.24); }
.metric--provisional .metric__icon { color: var(--naranja); border-color: rgba(239,151,0,.8); background: rgba(239,151,0,.1); }
.metric span { display: block; color: #a7b0aa; text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; font-weight: 700; }
.metric strong { display: block; margin-top: 5px; color: var(--verde-claro); text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; }
.metric--provisional strong { color: var(--naranja); }
.metric small { display: block; margin-top: 5px; color: var(--texto); font-size: .75rem; }

.control-panel {
    margin-top: 18px;
    padding: 21px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 28px;
    align-items: end;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: rgba(11,19,16,.97);
    box-shadow: var(--sombra);
}
.control-panel label { display: block; margin-bottom: 9px; color: #e8ece9; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; }
select, input[type="date"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    color: #fff;
    background: #101916;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    outline: none;
}
select:focus, input[type="date"]:focus { border-color: var(--verde-361); box-shadow: 0 0 0 4px rgba(67,176,42,.1); }
select option { color: #111; }
.date-navigation { display: grid; grid-template-columns: auto minmax(160px,1fr) auto auto; gap: 10px; }
.date-navigation button {
    min-height: 52px;
    padding: 0 17px;
    color: var(--verde-claro);
    background: #101916;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 700;
}
.date-navigation button:hover:not(:disabled) { border-color: var(--verde-361); background: rgba(67,176,42,.08); }
.date-navigation button:disabled { opacity: .3; cursor: not-allowed; }
.date-navigation .today-button { color: #fff; background: linear-gradient(135deg, var(--verde-361), #2d8d1e); border-color: var(--verde-361); }

.section-heading { margin: 27px 0 17px; display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.section-heading span { color: var(--verde-claro); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; }
.section-heading h2 { margin: 6px 0 0; font-size: clamp(1.45rem, 2.6vw, 2.2rem); }
.section-heading__status { color: #9aa59e; font-size: .84rem; }
.section-heading__status--error { color: #ff948c; }

.results-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.draw-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 21px 18px 18px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    background: linear-gradient(155deg, #17211d, #0c1310);
    box-shadow: 0 15px 32px rgba(0,0,0,.28);
}
.draw-card__line { position: absolute; inset: 0 0 auto; height: 5px; background: var(--verde-361); }
.draw-card--provisional .draw-card__line { background: var(--naranja); }
.draw-card--conflict .draw-card__line { background: var(--rojo-485); }
.draw-card__header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.draw-card h3 { margin: 0; color: var(--verde-claro); text-transform: uppercase; font-size: 1.08rem; letter-spacing: .03em; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 6px; color: #fff; text-transform: uppercase; font-size: .65rem; font-weight: 800; }
.badge--official { background: var(--verde-361); }
.badge--provisional { background: var(--naranja); }
.badge--conflict { background: var(--rojo-485); }
.draw-card__head { margin: 30px 0 15px; text-align: center; font-size: clamp(3.2rem, 5vw, 4.45rem); line-height: 1; font-weight: 800; letter-spacing: .035em; }
.draw-card__source { text-align: center; color: #f2f5f2; text-transform: uppercase; font-size: .86rem; }
.draw-card__time { margin-top: 8px; text-align: center; color: #aeb8b1; font-size: .78rem; }
.detail-button {
    width: 100%;
    min-height: 45px;
    margin-top: 19px;
    color: #fff;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 7px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
}
.detail-button:hover { border-color: var(--verde-361); background: rgba(67,176,42,.07); }
.detail-panel { grid-column: 1 / -1; margin-top: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: #0a110f; }
.detail-panel__top { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.detail-panel__top strong { display: block; color: var(--verde-claro); text-transform: uppercase; }
.detail-panel__top small { display: block; margin-top: 4px; color: #98a29b; }
.number-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(10,auto);
    grid-auto-flow: column;
    border-top: 1px solid var(--linea);
    border-left: 1px solid var(--linea);
}
.number-cell { min-height: 57px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.number-cell span { color: var(--verde-claro); font-weight: 700; }
.number-cell strong { margin-left: auto; font-size: 1.04rem; letter-spacing: .04em; }
.number-loading { grid-column: 1/-1; padding: 22px; color: #9ca69f; text-align: center; }
.number-loading--error { color: #ff9189; }

.empty-state { padding: 52px 20px; text-align: center; border: 1px dashed rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.025); }
.empty-state > div { color: var(--naranja); font-size: 2rem; }
.empty-state p { color: #9ca69f; }
.error-box { grid-column: 1/-1; padding: 18px; color: #ffd8d5; background: rgba(218,41,28,.13); border: 1px solid rgba(218,41,28,.45); border-radius: 9px; }
.source-note { margin-top: 19px; padding: 20px; display: flex; gap: 17px; align-items: center; border: 1px solid var(--linea); border-radius: 12px; background: #18211e; }
.source-note__icon { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); color: #aab3ad; font-weight: 800; }
.source-note p { margin: 0; color: #d5dbd6; line-height: 1.55; font-size: .88rem; }
.source-note p + p { margin-top: 5px; }
.official-text { color: var(--verde-claro); text-transform: uppercase; }
.provisional-text { color: var(--naranja); text-transform: uppercase; }

.footer { border-top: 4px solid var(--rojo-485); background: linear-gradient(140deg,#1d2722,#0a100d); }
.footer__grid { padding: 36px 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr .7fr; gap: 32px; }
.footer__brand img { width: min(270px,100%); }
.footer h3 { margin: 0 0 12px; text-transform: uppercase; font-size: .88rem; }
.footer p, .footer a { display: block; margin: 6px 0; color: #cad1cb; text-decoration: none; font-size: .86rem; }
.footer a:hover { color: var(--verde-claro); }
.whatsapp { display: inline-flex !important; min-height: 42px; padding: 0 18px; align-items: center; justify-content: center; border-radius: 999px; color: #fff !important; background: var(--verde-361); font-weight: 700; }
.footer__bottom { padding: 15px 0; color: #99a39c; border-top: 1px solid var(--linea); font-size: .76rem; }

@media (max-width: 1020px) {
    .system-panel { grid-template-columns: repeat(2,1fr); }
    .metric:nth-child(2) { border-right: 0; }
    .metric:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
    .control-panel { grid-template-columns: 1fr; }
    .results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer__grid { grid-template-columns: repeat(2,1fr); }
}


@media (min-width: 701px) and (max-width: 1100px) {
    .hero {
        min-height: 520px;
        background-position: right center;
        background-size: auto 100%;
    }
}

@media (max-width: 700px) {
    .container { width: min(100% - 20px,1220px); }
    .hero {
        min-height: 620px;
        align-items: flex-end;
        background-position: center top;
        background-size: 100% auto;
        background-color: #07100d;
    }
    .hero__shade { background: linear-gradient(180deg,rgba(3,8,6,.2),rgba(3,8,6,.96) 67%); }
    .hero__content { padding-bottom: 84px; }
    .hero__brand-block { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 36px; }
    .hero__agency { padding: 0; border: 0; }
    .hero__logo { width: 260px; max-width: 72vw; }
    .main-content { margin-top: -44px; }
    .system-panel { grid-template-columns: 1fr; }
    .metric, .metric:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--linea); }
    .metric:last-child { border-bottom: 0; }
    .date-navigation { grid-template-columns: 1fr 1fr; }
    .date-navigation input { grid-column: 1/-1; grid-row: 1; }
    .today-button { grid-column: 1/-1; }
    .results-grid { grid-template-columns: 1fr; }
    .number-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-template-rows: repeat(10,auto);
        grid-auto-flow: column;
    }
    .detail-panel { grid-column: auto; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .hero h1 { font-size: 2.5rem; }
    .control-panel { padding: 16px; }
    .date-navigation { grid-template-columns: 1fr; }
    .date-navigation input, .today-button { grid-column: auto; grid-row: auto; }
    .number-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-template-rows: repeat(10,auto);
        grid-auto-flow: column;
    }
    .number-cell {
        min-width: 0;
        padding: 9px 7px;
        gap: 5px;
    }
    .number-cell span { font-size: .75rem; }
    .number-cell strong { font-size: .9rem; }
    .source-note { align-items: flex-start; flex-direction: column; }
}


/* Actualización silenciosa: solo anima cuando llegan novedades reales. */
.results-grid--updated .result-card {
    animation: resultadoActualizadoSuave .75s ease both;
}

@keyframes resultadoActualizadoSuave {
    0% {
        transform: translateY(3px);
        box-shadow: 0 15px 34px rgba(0,0,0,.22);
    }
    45% {
        box-shadow:
            0 22px 44px rgba(0,0,0,.32),
            0 0 0 1px rgba(67,176,42,.28),
            0 0 28px rgba(67,176,42,.13);
    }
    100% {
        transform: translateY(0);
        box-shadow: 0 15px 34px rgba(0,0,0,.22);
    }
}

/* Resultados parciales en vivo */
.draw-card__progress {
    margin: 7px 0 2px;
    color: #aeb4ad;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.number-cell--pending strong { color: rgba(255,255,255,.32); }
.number-cell--live {
    animation: numeroEnVivo .85s ease both;
}
@keyframes numeroEnVivo {
    0% { background: rgba(67,176,42,.42); transform: scale(1.04); }
    45% { box-shadow: inset 0 0 0 1px rgba(105,206,75,.8), 0 0 20px rgba(67,176,42,.32); }
    100% { background: transparent; transform: scale(1); box-shadow: none; }
}


/* Corrección definitiva: 20 posiciones en dos columnas, también en móviles. */
.detail-panel {
    overflow: hidden;
}

.detail-panel .number-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(10, minmax(48px, auto)) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

.detail-panel .number-cell {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 10px !important;
}

.detail-panel .number-cell span {
    white-space: nowrap !important;
}

.detail-panel .number-cell strong {
    min-width: 0 !important;
    margin-left: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    .detail-panel {
        padding: 12px !important;
    }

    .detail-panel .number-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: repeat(10, minmax(44px, auto)) !important;
        grid-auto-flow: column !important;
    }

    .detail-panel .number-cell {
        grid-template-columns: 29px minmax(0, 1fr) !important;
        padding: 8px 6px !important;
        gap: 4px !important;
    }

    .detail-panel .number-cell span {
        font-size: .72rem !important;
    }

    .detail-panel .number-cell strong {
        font-size: .88rem !important;
    }
}

@media (max-width: 380px) {
    .detail-panel {
        padding: 8px !important;
    }

    .detail-panel .number-cell {
        grid-template-columns: 25px minmax(0, 1fr) !important;
        padding: 7px 4px !important;
        gap: 3px !important;
    }

    .detail-panel .number-cell span {
        font-size: .68rem !important;
    }

    .detail-panel .number-cell strong {
        font-size: .82rem !important;
    }
}

/* =========================================================
   ESTADO DEL MOTOR: LATIDO ONLINE
   ========================================================= */
.metric--online .metric__icon {
    position: relative;
    z-index: 1;
    overflow: visible;
    transform-origin: center;
    animation: motorOnlineLatido 1.35s ease-in-out infinite;
    will-change: transform, box-shadow, opacity;
}

.metric--online .metric__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(67, 176, 42, .58);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: motorOnlineOnda 1.35s ease-out infinite;
}

@keyframes motorOnlineLatido {
    0%, 100% {
        transform: scale(.86);
        opacity: .78;
        box-shadow:
            0 0 0 4px rgba(67, 176, 42, .08),
            0 0 12px rgba(67, 176, 42, .20);
    }

    45% {
        transform: scale(1.08);
        opacity: 1;
        box-shadow:
            0 0 0 8px rgba(67, 176, 42, .12),
            0 0 25px rgba(67, 176, 42, .48);
    }
}

@keyframes motorOnlineOnda {
    0% {
        transform: translate(-50%, -50%) scale(.78);
        opacity: .72;
    }

    75%, 100% {
        transform: translate(-50%, -50%) scale(1.65);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .metric--online .metric__icon,
    .metric--online .metric__icon::before {
        animation: none !important;
    }
}


/* =========================================================
   NAVEGACIÓN PRINCIPAL
   ========================================================= */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(7,13,11,.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.site-nav__inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.site-nav__brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.site-nav__brand img {
    width: 116px;
    height: 48px;
    object-fit: contain;
}

.site-nav__brand span {
    min-width: 0;
    padding-left: 13px;
    border-left: 1px solid rgba(255,255,255,.22);
}

.site-nav__brand strong,
.site-nav__brand small {
    display: block;
    white-space: nowrap;
}

.site-nav__brand strong {
    font-size: .78rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.site-nav__brand small {
    margin-top: 4px;
    color: var(--verde-claro);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-nav__menu {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-nav__menu a {
    position: relative;
    padding: 12px 14px;
    border-radius: 7px;
    color: #dce2dd;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
    transition: color .2s ease, background .2s ease;
}

.site-nav__menu a::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 6px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--verde-361);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.site-nav__menu a:hover,
.site-nav__menu a.is-active {
    color: #fff;
    background: rgba(67,176,42,.09);
}

.site-nav__menu a:hover::after,
.site-nav__menu a.is-active::after {
    transform: scaleX(1);
}

.site-nav__toggle {
    display: none;
    width: 46px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    cursor: pointer;
}

.site-nav__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    border-radius: 999px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Select oscuro y legible en navegadores compatibles */
select {
    color-scheme: dark;
}
select option {
    color: #fff;
    background: #101916;
}

/* =========================================================
   PÁGINAS INSTITUCIONALES
   ========================================================= */
.hero--interior {
    min-height: 430px;
}

.hero--interior .hero__content {
    padding-bottom: 64px;
}

.content-page {
    position: relative;
    z-index: 4;
    margin-top: -44px;
    padding-bottom: 64px;
}

.feature-intro {
    padding: 34px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 34px;
    border: 1px solid var(--linea);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(20,30,26,.98), rgba(7,13,11,.98));
    box-shadow: var(--sombra);
}

.feature-intro > div {
    max-width: 780px;
}

.section-kicker {
    color: var(--verde-claro);
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.feature-intro h2,
.agency-highlight h2,
.about-layout h2,
.info-banner h2 {
    margin: 9px 0 13px;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.feature-intro p,
.agency-highlight p,
.about-layout p,
.info-banner p {
    margin: 0;
    color: #cbd3cd;
    line-height: 1.7;
}

.primary-cta,
.secondary-cta {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}

.primary-cta {
    color: #fff;
    background: linear-gradient(135deg, var(--verde-361), #2d8d1e);
    box-shadow: 0 12px 28px rgba(67,176,42,.2);
}

.secondary-cta {
    color: var(--verde-claro);
    border: 1px solid rgba(67,176,42,.65);
    background: rgba(67,176,42,.06);
}

.service-grid,
.product-grid,
.scratch-grid,
.values-grid {
    margin-top: 20px;
    display: grid;
    gap: 16px;
}

.service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-grid,
.scratch-grid,
.values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.product-card,
.scratch-card,
.values-grid article {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--linea);
    border-radius: 13px;
    background: linear-gradient(155deg, #17211d, #0c1310);
    box-shadow: 0 14px 34px rgba(0,0,0,.2);
}

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 275px;
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(67,176,42,.65);
    box-shadow: 0 21px 46px rgba(0,0,0,.3);
}

.service-card__number,
.values-grid article > span {
    color: var(--verde-claro);
    font-weight: 800;
    letter-spacing: .1em;
}

.service-card h3,
.product-card h3,
.scratch-card h3,
.values-grid h3 {
    margin: 30px 0 12px;
    text-transform: uppercase;
    font-size: 1.25rem;
}

.service-card p,
.product-card p,
.scratch-card p,
.values-grid p {
    margin: 0;
    color: #bfc8c1;
    line-height: 1.6;
}

.service-card strong {
    margin-top: auto;
    padding-top: 22px;
    color: var(--verde-claro);
    text-transform: uppercase;
    font-size: .72rem;
}

.product-card__tag {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 5px;
    color: #fff;
    background: var(--rojo-485);
    text-transform: uppercase;
    font-size: .64rem;
    font-weight: 800;
}

.product-card__footer {
    margin-top: 23px;
    padding-top: 15px;
    color: var(--verde-claro);
    border-top: 1px solid var(--linea);
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
}

.scratch-card__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--naranja);
    border: 1px solid rgba(239,151,0,.55);
    background: rgba(239,151,0,.08);
    font-size: 1.4rem;
}

.agency-highlight,
.about-layout {
    margin-top: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    border: 1px solid var(--linea);
    border-radius: 15px;
    background: #101815;
    box-shadow: var(--sombra);
}

.agency-highlight__image,
.about-layout__image {
    min-height: 430px;
    background:
        linear-gradient(90deg, rgba(6,12,10,.05), rgba(6,12,10,.25)),
        url("../img/frente-agencia.png") center / cover no-repeat;
}

.agency-highlight__content,
.about-layout__content {
    padding: 42px;
    align-self: center;
}

.info-banner {
    margin-top: 20px;
    padding: 34px;
    border: 1px solid rgba(67,176,42,.35);
    border-radius: 15px;
    background:
        radial-gradient(circle at 90% 10%, rgba(67,176,42,.14), transparent 36%),
        #101815;
}

.about-facts {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.about-facts div {
    padding: 15px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}

.about-facts strong,
.about-facts span {
    display: block;
}

.about-facts strong {
    color: var(--verde-claro);
    text-transform: uppercase;
}

.about-facts span {
    margin-top: 5px;
    color: #aeb7b0;
    font-size: .75rem;
}

@media (max-width: 1020px) {
    .site-nav__inner {
        min-height: 70px;
    }

    .site-nav__brand img {
        width: 96px;
    }

    .site-nav__menu a {
        padding-inline: 9px;
        font-size: .66rem;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    body.menu-open {
        overflow: hidden;
    }

    .site-nav__toggle {
        display: block;
    }

    .site-nav__menu {
        position: fixed;
        top: 70px;
        right: 0;
        left: 0;
        max-height: calc(100dvh - 70px);
        padding: 18px 14px 28px;
        overflow-y: auto;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        border-bottom: 1px solid var(--linea);
        background: rgba(7,13,11,.985);
        box-shadow: 0 22px 44px rgba(0,0,0,.45);
    }

    .site-nav__menu.is-open {
        display: flex;
    }

    .site-nav__menu a {
        padding: 15px 16px;
        font-size: .78rem;
    }

    .site-nav__menu a::after {
        right: 16px;
        left: 16px;
    }

    .feature-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-grid,
    .scratch-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .agency-highlight,
    .about-layout {
        grid-template-columns: 1fr;
    }

    .agency-highlight__image,
    .about-layout__image {
        min-height: 320px;
        background-position: center;
    }
}

@media (max-width: 560px) {
    .site-nav__brand span {
        display: none;
    }

    .site-nav__brand img {
        width: 108px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .feature-intro,
    .agency-highlight__content,
    .about-layout__content,
    .info-banner {
        padding: 24px;
    }

    .about-facts {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MENÚ FLOTANTE PREMIUM · V2
   Sobrescribe solamente la presentación del menú.
   ========================================================= */
.site-nav {
    position: sticky;
    top: 10px;
    z-index: 1000;
    width: min(1220px, calc(100% - 28px));
    margin: 10px auto -88px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(13,22,18,.88), rgba(7,13,11,.78));
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    box-shadow:
        0 18px 45px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 0%, rgba(67,176,42,.13), transparent 33%);
    pointer-events: none;
}

.site-nav__inner {
    min-height: 68px;
    padding: 0 16px 0 18px;
}

.site-nav__brand {
    gap: 12px;
}

.site-nav__brand img {
    width: 98px;
    height: 42px;
}

.site-nav__brand span {
    padding-left: 12px;
}

.site-nav__brand strong {
    font-size: .72rem;
    letter-spacing: .065em;
}

.site-nav__brand small {
    font-size: .59rem;
    color: #8be873;
}

.site-nav__menu {
    gap: 2px;
}

.site-nav__menu a {
    padding: 12px 13px 13px;
    border-radius: 0;
    background: transparent !important;
    color: rgba(255,255,255,.74);
    font-size: .69rem;
    letter-spacing: .065em;
}

.site-nav__menu a::after {
    right: 13px;
    bottom: 7px;
    left: 13px;
    height: 2px;
    background: linear-gradient(90deg, var(--verde-361), #8be873);
    box-shadow: 0 0 12px rgba(67,176,42,.45);
}

.site-nav__menu a:hover,
.site-nav__menu a.is-active {
    color: #fff;
}

.site-nav__toggle {
    border-color: rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.045);
}

/* Compensa el menú flotante sobre el hero */
.site-nav + .site-shell .hero {
    padding-top: 88px;
}

@media (max-width: 820px) {
    .site-nav {
        top: 8px;
        margin-top: 8px;
        margin-bottom: -78px;
        border-radius: 16px;
    }

    .site-nav__inner {
        min-height: 60px;
        padding-inline: 12px;
    }

    .site-nav__brand img {
        width: 88px;
        height: 38px;
    }

    .site-nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(360px, 88vw);
        max-height: none;
        padding: 94px 22px 30px;
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateX(105%);
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        border: 0;
        border-left: 1px solid rgba(255,255,255,.13);
        background:
            linear-gradient(180deg, rgba(14,24,20,.99), rgba(6,12,10,.995));
        box-shadow: -28px 0 65px rgba(0,0,0,.52);
        transition:
            transform .28s ease,
            opacity .22s ease,
            visibility .28s ease;
    }

    .site-nav__menu.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .site-nav__menu a {
        padding: 17px 14px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        font-size: .8rem;
    }

    .site-nav__menu a::after {
        right: auto;
        bottom: 8px;
        left: 14px;
        width: 42px;
    }

    .site-nav__toggle {
        position: relative;
        z-index: 1002;
    }

    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0,0,0,.58);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .site-nav + .site-shell .hero {
        padding-top: 78px;
    }
}

@media (max-width: 560px) {
    .site-nav {
        width: calc(100% - 18px);
    }

    .site-nav__brand img {
        width: 94px;
    }
}


/* =========================================================
   MENÚ PROFESIONAL V3
   ========================================================= */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    background: rgba(7,13,11,.96);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.site-nav__inner {
    min-height: 82px;
    padding-inline: 18px;
}

.site-nav__brand img {
    width: 118px;
    height: 50px;
}

.site-nav__brand strong {
    font-size: .9rem;
    letter-spacing: .05em;
}

.site-nav__brand small {
    font-size: .68rem;
    letter-spacing: .08em;
}

.site-nav__menu {
    display: block;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__links a {
    position: relative;
    min-height: 46px;
    padding: 14px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    text-transform: uppercase;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .055em;
    border-radius: 10px;
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.site-nav__links a::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 7px;
    left: 16px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-361), #8be873);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.site-nav__links a:hover {
    color: #fff;
    background: rgba(67,176,42,.08);
    transform: translateY(-1px);
}

.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
    transform: scaleX(1);
}

.site-nav__links a.is-active {
    color: #fff;
    background: rgba(67,176,42,.12);
}

.site-nav__toggle {
    display: none;
    width: 50px;
    height: 50px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}

.site-nav__toggle span {
    height: 2px;
    margin: 5px 0;
}

.site-nav__mobile-head {
    display: none;
}

@media (max-width: 900px) {
    .site-nav__inner {
        min-height: 70px;
    }

    .site-nav__brand img {
        width: 104px;
        height: 44px;
    }

    .site-nav__brand strong {
        font-size: .78rem;
    }

    .site-nav__brand small {
        font-size: .62rem;
    }

    .site-nav__toggle {
        display: block;
        position: relative;
        z-index: 1302;
    }

    .site-nav__menu {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1301;
        width: min(420px, 92vw);
        height: 100dvh;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transform: translateX(105%);
        background:
            radial-gradient(circle at 20% 0%, rgba(67,176,42,.13), transparent 34%),
            linear-gradient(180deg, #101a16 0%, #07100c 100%);
        border-left: 1px solid rgba(255,255,255,.12);
        box-shadow: -30px 0 70px rgba(0,0,0,.55);
        transition:
            transform .3s ease,
            opacity .22s ease,
            visibility .3s ease;
    }

    .site-nav__menu.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .site-nav__mobile-head {
        min-height: 92px;
        padding: 20px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .site-nav__mobile-head strong,
    .site-nav__mobile-head span {
        display: block;
    }

    .site-nav__mobile-head strong {
        color: #fff;
        font-size: .94rem;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .site-nav__mobile-head span {
        margin-top: 5px;
        color: #8be873;
        font-size: .7rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .site-nav__close {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 50%;
        color: #fff;
        background: rgba(255,255,255,.04);
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
    }

    .site-nav__links {
        padding: 16px;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .site-nav__links a {
        min-height: 58px;
        padding: 17px 18px;
        justify-content: flex-start;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        background: rgba(255,255,255,.025);
        color: rgba(255,255,255,.84);
        font-size: 1rem;
        letter-spacing: .045em;
    }

    .site-nav__links a::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        width: 4px;
        height: 34px;
        transform: translateY(-50%) scaleY(0);
    }

    .site-nav__links a:hover::after,
    .site-nav__links a.is-active::after {
        transform: translateY(-50%) scaleY(1);
    }

    .site-nav__links a.is-active {
        padding-left: 24px;
        border-color: rgba(67,176,42,.28);
        background: rgba(67,176,42,.1);
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1299;
        background: rgba(0,0,0,.58);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
}

@media (max-width: 560px) {
    .site-nav__inner {
        min-height: 66px;
        padding-inline: 10px;
    }

    .site-nav__brand span {
        display: none;
    }

    .site-nav__brand img {
        width: 112px;
    }

    .site-nav__toggle {
        width: 46px;
        height: 46px;
    }

    .site-nav__menu {
        width: 100%;
    }

    .site-nav__mobile-head {
        min-height: 84px;
    }

    .site-nav__links {
        padding: 14px;
    }

    .site-nav__links a {
        font-size: .96rem;
    }
}


/* =========================================================
   PANEL GENERAL · MATRIZ DE RESULTADOS
   ========================================================= */
.matrix-section {
    margin: 28px 0 30px;
}

.matrix-section__heading {
    margin-bottom: 15px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
}

.matrix-section__heading > div:first-child {
    max-width: 730px;
}

.matrix-section__heading span {
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 700;
}

.matrix-section__heading h2 {
    margin: 6px 0 8px;
    font-size: clamp(1.45rem, 2.6vw, 2.2rem);
}

.matrix-section__heading p {
    margin: 0;
    color: #98a49c;
    line-height: 1.55;
    font-size: .86rem;
}

.matrix-section__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 13px;
}

.matrix-section__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9d0cb;
    letter-spacing: .02em;
    font-size: .68rem;
}

.results-matrix-shell {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background:
        radial-gradient(circle at 8% 0%, rgba(67,176,42,.08), transparent 28%),
        #0b1210;
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    scrollbar-color: rgba(67,176,42,.7) rgba(255,255,255,.04);
    scrollbar-width: thin;
}

.results-matrix {
    min-width: 980px;
    display: grid;
}

.matrix-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.35fr)
        repeat(6, minmax(120px, 1fr));
}

.matrix-row + .matrix-row {
    border-top: 1px solid rgba(255,255,255,.09);
}

.matrix-row--header {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #121b17;
}

.matrix-lottery,
.matrix-column-header,
.matrix-cell {
    min-width: 0;
    min-height: 82px;
    padding: 13px 12px;
    border-right: 1px solid rgba(255,255,255,.09);
}

.matrix-column-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfe5e0;
    text-align: center;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
}

.matrix-lottery {
    position: sticky;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(90deg, #16201c 0%, #121b17 88%, rgba(18,27,23,.97) 100%);
    box-shadow: 10px 0 20px rgba(0,0,0,.14);
}

.matrix-lottery--header {
    z-index: 10;
    min-height: 54px;
    color: var(--verde-claro);
    text-transform: uppercase;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .075em;
}

.matrix-lottery strong {
    color: #fff;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .035em;
}

.matrix-lottery small {
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7f8b84;
    text-transform: uppercase;
    font-size: .61rem;
    font-weight: 700;
}

.matrix-lottery small i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #626b66;
}

.matrix-lottery small.is-live {
    color: var(--verde-claro);
}

.matrix-lottery small.is-live i {
    background: var(--verde-361);
    box-shadow: 0 0 10px rgba(67,176,42,.7);
    animation: matrizLive 1.6s ease-in-out infinite;
}

@keyframes matrizLive {
    0%, 100% { transform: scale(.82); opacity: .72; }
    50% { transform: scale(1.22); opacity: 1; }
}

.matrix-cell {
    border: 0;
    border-right: 1px solid rgba(255,255,255,.09);
    color: inherit;
    background: rgba(255,255,255,.012);
    font-family: inherit;
}

.matrix-cell--empty {
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.28);
    font-size: 1.05rem;
    letter-spacing: .08em;
}

.matrix-cell--result {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.matrix-cell--result::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--verde-361);
}

.matrix-cell--provisional::before {
    background: var(--naranja);
}

.matrix-cell--partial::before {
    background: #e0ba21;
}

.matrix-cell--conflict::before {
    background: var(--rojo-485);
}

.matrix-cell--result:hover,
.matrix-cell--result:focus-visible {
    z-index: 2;
    outline: none;
    transform: scale(1.035);
    background: rgba(67,176,42,.08);
    box-shadow:
        inset 0 0 0 1px rgba(67,176,42,.45),
        0 10px 24px rgba(0,0,0,.24);
}

.matrix-cell--result strong {
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: .055em;
}

.matrix-cell--result small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aeb8b1;
    text-transform: uppercase;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .045em;
}

.matrix-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    display: inline-block;
    border-radius: 50%;
    background: #778078;
}

.matrix-dot--official {
    background: var(--verde-361);
    box-shadow: 0 0 7px rgba(67,176,42,.55);
}

.matrix-dot--provisional {
    background: var(--naranja);
}

.matrix-dot--partial {
    background: #e0ba21;
}

.matrix-dot--conflict {
    background: var(--rojo-485);
}

.matrix-loading {
    min-height: 180px;
    padding: 30px;
    display: grid;
    place-items: center;
    color: #98a49c;
}

.matrix-loading--error {
    color: #ff948c;
}

/* Modal de detalle de la matriz */
body.matrix-modal-open {
    overflow: hidden;
}

.matrix-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    padding: 24px;
    display: grid;
    place-items: center;
}

.matrix-modal[hidden] {
    display: none;
}

.matrix-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1,5,3,.78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.matrix-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    background:
        radial-gradient(circle at 90% 0%, rgba(67,176,42,.12), transparent 32%),
        #0c1411;
    box-shadow: 0 30px 80px rgba(0,0,0,.58);
}

.matrix-modal__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.matrix-modal__header span {
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 800;
}

.matrix-modal__header h2 {
    margin: 5px 0 0;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 4vw, 2rem);
}

.matrix-modal__close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
}

.matrix-modal__close:hover {
    border-color: var(--rojo-485);
    background: rgba(218,41,28,.12);
}

.matrix-modal__meta {
    margin: 17px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 14px;
    color: #9ea9a1;
    font-size: .75rem;
}

.matrix-modal__numbers {
    width: 100%;
}

@media (max-width: 760px) {
    .matrix-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .matrix-section__legend {
        justify-content: flex-start;
    }

    .results-matrix {
        min-width: 850px;
    }

    .matrix-row {
        grid-template-columns:
            minmax(145px, 1.2fr)
            repeat(6, minmax(112px, 1fr));
    }

    .matrix-lottery,
    .matrix-cell {
        min-height: 76px;
        padding: 10px 9px;
    }

    .matrix-lottery strong {
        font-size: .73rem;
    }

    .matrix-cell--result strong {
        font-size: 1.32rem;
    }

    .matrix-modal {
        padding: 10px;
    }

    .matrix-modal__dialog {
        max-height: calc(100dvh - 20px);
        padding: 15px 11px;
    }
}

@media (max-width: 420px) {
    .results-matrix {
        min-width: 790px;
    }

    .matrix-row {
        grid-template-columns:
            minmax(128px, 1.15fr)
            repeat(6, minmax(108px, 1fr));
    }

    .matrix-lottery {
        padding-inline: 8px;
    }

    .matrix-lottery strong {
        font-size: .67rem;
    }

    .matrix-lottery small {
        font-size: .55rem;
    }
}


/* =========================================================
   AJUSTE MATRIZ V2
   ========================================================= */
.matrix-section {
    margin-bottom: 0;
}

.matrix-section .results-matrix-shell {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.control-panel--after-matrix {
    margin-top: 0;
    margin-bottom: 26px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-color: rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(16,25,21,.98), rgba(10,17,14,.98));
    box-shadow: 0 15px 35px rgba(0,0,0,.22);
}

.matrix-modal {
    padding: 16px;
}

.matrix-modal__dialog {
    width: min(610px, calc(100vw - 32px));
    max-height: min(700px, calc(100dvh - 32px));
    padding: 17px;
    border-radius: 13px;
}

.matrix-modal__header h2 {
    font-size: clamp(1.15rem, 2.7vw, 1.65rem);
}

.matrix-modal__close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 1.3rem;
}

.matrix-modal__meta {
    margin: 12px 0;
    gap: 7px 11px;
    font-size: .7rem;
}

.matrix-modal__numbers {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(10, auto) !important;
    grid-auto-flow: column !important;
    gap: 0 !important;
}

.matrix-modal__numbers .number-cell {
    min-height: 39px;
    padding: 7px 10px;
    grid-template-columns: 35px minmax(0, 1fr);
    column-gap: 7px;
}

.matrix-modal__numbers .number-cell span {
    font-size: .72rem;
}

.matrix-modal__numbers .number-cell strong {
    font-size: .96rem;
}

@media (max-height: 690px) and (min-width: 641px) {
    .matrix-modal__dialog {
        max-height: calc(100dvh - 20px);
        padding: 13px;
    }

    .matrix-modal__meta {
        margin-block: 8px;
    }

    .matrix-modal__numbers .number-cell {
        min-height: 32px;
        padding-block: 4px;
    }
}

@media (max-width: 640px) {
    .control-panel--after-matrix {
        margin-bottom: 22px;
    }

    .matrix-modal {
        padding: 7px;
    }

    .matrix-modal__dialog {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
        padding: 12px 9px;
        border-radius: 11px;
    }

    .matrix-modal__header h2 {
        font-size: 1.08rem;
    }

    .matrix-modal__close {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 1.15rem;
    }

    .matrix-modal__meta {
        margin: 9px 0;
        gap: 6px 9px;
        font-size: .62rem;
    }

    .matrix-modal__numbers .number-cell {
        min-height: 34px;
        padding: 5px 6px;
        grid-template-columns: 29px minmax(0, 1fr);
        column-gap: 4px;
    }

    .matrix-modal__numbers .number-cell span {
        font-size: .64rem;
    }

    .matrix-modal__numbers .number-cell strong {
        font-size: .84rem;
    }
}


/* =========================================================
   AJUSTES DE SEPARACIÓN, ENCABEZADO Y MENÚ MÓVIL
   ========================================================= */
.matrix-section { margin-bottom: 28px !important; }
.matrix-section .results-matrix-shell {
    border-bottom-left-radius: 13px !important;
    border-bottom-right-radius: 13px !important;
}
.control-panel--after-matrix {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    border-radius: 13px !important;
    border-color: var(--linea) !important;
    background: linear-gradient(145deg, rgba(20,30,26,.98), rgba(7,13,11,.98)) !important;
    box-shadow: var(--sombra) !important;
}
.section-heading__selection {
    margin: 8px 0 0;
    color: #9aa59e;
    font-size: .78rem;
    line-height: 1.45;
}
@media (max-width: 820px) {
    .site-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #0b120f !important;
    }
    .site-nav__menu {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #0b120f !important;
        opacity: 1 !important;
        filter: none !important;
        color: #fff !important;
    }
    .site-nav__menu.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        background: #0b120f !important;
    }
    .site-nav__menu a {
        color: #fff !important;
        opacity: 1 !important;
        text-shadow: none !important;
        filter: none !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }
    .site-nav__menu a:hover,
    .site-nav__menu a.is-active {
        color: #fff !important;
        background: rgba(67,176,42,.12) !important;
    }
    body.menu-open::before {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0,0,0,.72) !important;
    }
    .site-nav__toggle {
        background: #111b17 !important;
        border-color: rgba(255,255,255,.3) !important;
    }
    .site-nav__toggle span {
        background: #fff !important;
        opacity: 1 !important;
    }
}
@media (max-width: 640px) {
    .matrix-section { margin-bottom: 22px !important; }
    .control-panel--after-matrix { margin-bottom: 24px !important; }
    .section-heading__selection { font-size: .72rem; }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA · FECHA Y MENÚ MÓVIL
   ========================================================= */
@media (max-width: 900px) {
    /*
     * El nav crea su propio contexto superior.
     * La capa oscura queda debajo del menú y ya no bloquea los enlaces.
     */
    .site-nav {
        z-index: 3000 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #0b120f !important;
    }

    body.menu-open::before {
        z-index: 2990 !important;
        pointer-events: auto;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0,0,0,.72) !important;
    }

    .site-nav__toggle {
        position: relative;
        z-index: 3010 !important;
        pointer-events: auto !important;
    }

    .site-nav__menu {
        z-index: 3005 !important;
        pointer-events: none;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(105%) !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #0b120f !important;
    }

    .site-nav__menu.is-open {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .site-nav__mobile-head,
    .site-nav__links,
    .site-nav__links a,
    .site-nav__close {
        position: relative;
        z-index: 3006;
        pointer-events: auto !important;
    }

    .site-nav__links a {
        display: flex !important;
        align-items: center;
        color: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
        filter: none !important;
        background: rgba(255,255,255,.035) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(67,176,42,.2);
    }

    .site-nav__links a:hover,
    .site-nav__links a:focus,
    .site-nav__links a:active,
    .site-nav__links a.is-active {
        color: #fff !important;
        background: rgba(67,176,42,.15) !important;
        border-color: rgba(67,176,42,.38) !important;
    }
}


/* =========================================================
   Resultados de juegos poceados y panel Motor Santa Fe
   ========================================================= */
.poceados-live { padding-top: 28px; padding-bottom: 58px; }
.poceados-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: -70px 0 30px;
    position: relative;
    z-index: 5;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,30,26,.99), rgba(7,13,11,.99));
    box-shadow: var(--sombra);
}
.poceados-status > div {
    min-height: 112px;
    padding: 22px;
    border-right: 1px solid var(--linea);
}
.poceados-status > div:last-child { border-right: 0; }
.poceados-status span,
.poceado-result-card header span,
.poceados-tools article > span,
.admin-sf__header > div > span {
    display: block;
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 800;
}
.poceados-status strong {
    display: block;
    margin-top: 8px;
    font-size: 1.08rem;
}
.poceados-status small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}
.poceados-intro {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
}
.poceados-intro--second { margin-top: 44px; }
.poceados-api-link,
.poceados-tools a,
.admin-sf__actions a,
.admin-sf__actions button,
.admin-sf__links a {
    display: inline-flex;
    min-height: 43px;
    padding: 0 17px;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    cursor: pointer;
    font-weight: 700;
}
.poceados-api-link:hover,
.poceados-tools a:hover,
.admin-sf__actions a:hover,
.admin-sf__actions button:hover,
.admin-sf__links a:hover {
    border-color: var(--verde-361);
    background: rgba(67,176,42,.12);
}
.poceados-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    margin-top: 20px;
}
.poceados-grid--brinco { grid-template-columns: repeat(2, minmax(0,1fr)); }
.poceado-result-card {
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: 13px;
    background: linear-gradient(155deg, #17211d, #0c1310);
    box-shadow: 0 15px 32px rgba(0,0,0,.25);
}
.poceado-result-card header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}
.poceado-result-card h3 {
    margin: 7px 0 0;
    font-size: 1.15rem;
}
.poceado-result-card header b {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .69rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.poceado-result-card header b.is-vacant {
    color: #ffd8d5;
    background: rgba(218,41,28,.17);
    border: 1px solid rgba(218,41,28,.45);
}
.poceado-result-card header b.is-winner {
    color: #dffff0;
    background: rgba(67,176,42,.16);
    border: 1px solid rgba(67,176,42,.45);
}
.poceado-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}
.poceado-ball {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--verde-361), #267e1a);
    border: 2px solid rgba(255,255,255,.35);
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
    font-size: 1rem;
    font-weight: 800;
}
.poceado-result-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin: 0;
    border-top: 1px solid var(--linea);
}
.poceado-result-meta > div {
    padding: 16px 12px 0 0;
}
.poceado-result-meta dt {
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.poceado-result-meta dd {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}
.poceados-tools {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-top: 40px;
}
.poceados-tools article {
    padding: 24px;
    border: 1px solid var(--linea);
    border-radius: 13px;
    background: rgba(17,26,23,.94);
}
.poceados-tools h3 { margin: 8px 0 0; }
.poceados-tools p { color: var(--texto); line-height: 1.55; }
.poceados-tools a { margin-top: 8px; }

/* Panel técnico */
.admin-sf {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at 12% 0%, rgba(67,176,42,.13), transparent 31%),
        linear-gradient(145deg, #070d0b, #101815 52%, #070c0a);
}
.admin-sf__header,
.admin-sf__main {
    width: min(1180px, 100%);
    margin-inline: auto;
}
.admin-sf__header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
}
.admin-sf__header h1 { margin: 8px 0 0; }
.admin-sf__header p { color: var(--muted); }
.admin-sf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-sf__actions button { font: inherit; }
.admin-sf__actions button:disabled { opacity: .55; cursor: wait; }
.admin-sf__main { margin-top: 28px; }
.admin-sf__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}
.admin-sf__card,
.admin-sf__summary,
.admin-sf__console {
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: linear-gradient(155deg, #17211d, #0c1310);
    box-shadow: var(--sombra);
}
.admin-sf__card { padding: 23px; }
.admin-sf__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.admin-sf__card-head h2 { margin: 0; }
.admin-sf__card-head span {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .69rem;
    text-transform: uppercase;
    font-weight: 800;
}
.admin-sf__card-head .is-ok {
    background: rgba(67,176,42,.18);
    color: var(--verde-claro);
}
.admin-sf__card-head .is-error {
    background: rgba(218,41,28,.18);
    color: #ff9891;
}
.admin-sf__card dl {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.admin-sf__card dl div {
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}
.admin-sf__card dt {
    color: var(--muted);
    font-size: .67rem;
    text-transform: uppercase;
}
.admin-sf__card dd {
    margin: 6px 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.admin-sf__links { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-sf__summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: 18px;
    overflow: hidden;
}
.admin-sf__summary div {
    padding: 20px;
    border-right: 1px solid var(--linea);
}
.admin-sf__summary div:last-child { border-right: 0; }
.admin-sf__summary span {
    display: block;
    color: var(--muted);
    font-size: .69rem;
    text-transform: uppercase;
}
.admin-sf__summary strong {
    display: block;
    margin-top: 8px;
}
.admin-sf__console {
    margin-top: 18px;
    overflow: hidden;
}
.admin-sf__console-head {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--linea);
}
.admin-sf__console-head h2 { margin: 0; font-size: 1rem; }
.admin-sf__console-head span { color: var(--verde-claro); }
.admin-sf__console pre {
    max-height: 520px;
    margin: 0;
    padding: 20px;
    overflow: auto;
    color: #d5ddd7;
    background: #050907;
    font: 13px/1.55 Consolas, monospace;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .poceados-status { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .poceados-status > div:nth-child(2) { border-right: 0; }
    .poceados-status > div:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
    .poceados-grid,
    .poceados-grid--brinco,
    .admin-sf__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .poceados-status { grid-template-columns: 1fr; margin-top: -42px; }
    .poceados-status > div {
        border-right: 0;
        border-bottom: 1px solid var(--linea);
    }
    .poceados-status > div:last-child { border-bottom: 0; }
    .poceados-intro,
    .admin-sf__header { align-items: stretch; flex-direction: column; }
    .poceado-result-card header { flex-direction: column; }
    .poceado-result-meta { grid-template-columns: 1fr; }
    .poceados-tools,
    .admin-sf__summary { grid-template-columns: 1fr; }
    .admin-sf__summary div {
        border-right: 0;
        border-bottom: 1px solid var(--linea);
    }
    .admin-sf__summary div:last-child { border-bottom: 0; }
    .admin-sf { padding: 20px 12px; }
    .admin-sf__card dl { grid-template-columns: 1fr; }
}


/* =========================================================
   Catálogo y resultados en vivo de juegos poceados V2
   ========================================================= */
.poceados-catalog__status { margin-bottom: 24px; }
.poceados-catalog__heading { margin-top: 30px; }
.poceado-live-dot {
    position: relative;
    overflow: visible;
}
.poceado-live-dot::before,
.poceado-live-dot::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--verde-361);
}
.poceado-live-dot::after {
    animation: poceadoPulse 1.8s ease-out infinite;
}
.poceado-live-dot span {
    position: relative;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 14px rgba(255,255,255,.8);
}
@keyframes poceadoPulse {
    0% { opacity: .7; transform: translate(-50%,-50%) scale(.8); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); }
}

.poceados-game-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
}
.poceados-game-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: linear-gradient(155deg,#17211d,#0c1310);
    box-shadow: 0 17px 36px rgba(0,0,0,.28);
    transition: transform .22s ease, border-color .22s ease;
}
.poceados-game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(67,176,42,.72);
}
.poceados-game-card.is-coming {
    opacity: .72;
}
.poceados-game-card.is-coming:hover {
    transform: none;
    border-color: rgba(255,255,255,.18);
}
.poceados-game-card__line {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 5px;
    background: var(--verde-361);
}
.poceados-game-card.is-coming .poceados-game-card__line {
    background: var(--gris-413);
}
.poceados-game-card > img {
    width: 100%;
    aspect-ratio: 1.9 / 1;
    display: block;
    object-fit: cover;
    border-bottom: 1px solid var(--linea);
}
.poceados-game-card__body { padding: 20px; }
.poceados-game-card__top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}
.poceados-game-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    text-transform: uppercase;
}
.poceados-game-card__top > span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 800;
}
.poceados-game-card__top .is-live {
    color: #dffff0;
    background: rgba(67,176,42,.16);
    border: 1px solid rgba(67,176,42,.45);
}
.poceados-game-card__top .is-soon {
    color: #d3d7d4;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
}
.poceados-game-card__draw {
    min-height: 104px;
    margin: 19px 0;
    padding: 15px;
    border: 1px solid var(--linea);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}
.poceados-game-card__draw span,
.live-game-heading__brand span,
.live-modality-card__top span {
    display: block;
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .67rem;
    font-weight: 800;
}
.poceados-game-card__draw strong {
    display: block;
    margin-top: 7px;
    font-size: 1.2rem;
}
.poceados-game-card__draw small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
}
.poceados-game-card__button {
    width: 100%;
    min-height: 47px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--verde-361),#2d8d1e);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}
.poceados-game-card__button.is-disabled {
    justify-content: center;
    color: #aab2ad;
    background: rgba(255,255,255,.055);
}

/* Pantalla completa */
.poceados-live-page { padding-bottom: 58px; }
.metric--jackpot .metric__icon {
    color: #fff;
    border-color: rgba(239,151,0,.8);
    background: rgba(239,151,0,.14);
}
.metric--jackpot strong { color: #ffc65e; }
.live-game-heading {
    margin: 27px 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
}
.live-game-heading__brand {
    display: flex;
    align-items: center;
    gap: 18px;
}
.live-game-heading__brand img {
    width: 175px;
    max-width: 35vw;
    border-radius: 12px;
    border: 1px solid var(--linea);
}
.live-game-heading h2 {
    margin: 7px 0 0;
    font-size: clamp(1.35rem,2.7vw,2.15rem);
}
.live-game-heading p {
    margin: 7px 0 0;
    color: var(--muted);
}
.live-modalities {
    display: grid;
    gap: 18px;
}
.live-modality-card {
    padding: 23px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: linear-gradient(155deg,#17211d,#0c1310);
    box-shadow: 0 15px 32px rgba(0,0,0,.25);
}
.live-modality-card__top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 15px;
}
.live-modality-card__top h3 {
    margin: 7px 0 0;
    font-size: 1.22rem;
}
.live-modality-card__top > b {
    padding: 7px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: .66rem;
}
.live-modality-card__top > b.is-vacant {
    color: #ffd8d5;
    background: rgba(218,41,28,.17);
    border: 1px solid rgba(218,41,28,.45);
}
.live-modality-card__top > b.is-winner {
    color: #dffff0;
    background: rgba(67,176,42,.16);
    border: 1px solid rgba(67,176,42,.45);
}
.live-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 23px 0;
}
.live-ball {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg,var(--verde-361),#267e1a);
    border: 2px solid rgba(255,255,255,.35);
    box-shadow: 0 9px 20px rgba(0,0,0,.28);
}
.live-ball b { font-size: 1.03rem; }
.live-ball.is-repeated {
    opacity: .48;
    filter: grayscale(.35);
}
.live-ball.is-repeated::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 3px;
    border-radius: 4px;
    background: #fff;
    transform: rotate(-18deg);
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.extra-note {
    margin: -8px 0 20px;
    color: var(--muted);
    font-size: .8rem;
}
.live-prize-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--linea);
    border-radius: 10px;
}
.live-prize-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.live-prize-table th,
.live-prize-table td {
    padding: 15px 16px;
    text-align: left;
    border-bottom: 1px solid var(--linea);
}
.live-prize-table th {
    color: var(--verde-claro);
    background: rgba(67,176,42,.08);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .07em;
}
.live-prize-table td {
    color: #edf1ee;
    font-size: .88rem;
}
.live-prize-table tbody tr:last-child td { border-bottom: 0; }
.live-prize-table td:first-child { font-weight: 800; }
.live-modality-card--extra .live-prize-table th:nth-child(1),
.live-modality-card--extra .live-prize-table td:nth-child(1) {
    width: 20%;
}

@media (max-width: 1000px) {
    .poceados-game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .poceados-game-grid { grid-template-columns: 1fr; }
    .live-game-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .live-game-heading__brand { align-items: flex-start; }
    .live-game-heading__brand img { width: 135px; }
    .live-modality-card__top { flex-direction: column; }
    .live-ball { width: 48px; height: 48px; }
}


/* Logos oficiales de juegos poceados */
.poceados-game-card > img {
    height: 220px;
    aspect-ratio: auto;
    padding: 24px 28px;
    object-fit: contain;
    object-position: center;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.055), transparent 64%),
        linear-gradient(145deg, #101916, #0a100d);
    transition: transform .28s ease, filter .28s ease;
}
.poceados-game-card:hover > img {
    transform: scale(1.045);
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.38));
}
.poceados-game-card.is-coming:hover > img {
    transform: none;
}
.poceados-game-card img[src$="quini6.png"] {
    padding-inline: 20px;
}
.poceados-game-card img[src$="telekino.png"] {
    padding-block: 14px;
}
.live-game-heading__brand img {
    object-fit: contain;
    padding: 10px;
    background: linear-gradient(145deg, #101916, #0a100d);
}
@media (max-width: 700px) {
    .poceados-game-card > img {
        height: 195px;
        padding: 20px 24px;
    }
}


/* =========================================================
   QUINI 6 Y BRINCO · BOLILLAS RESPONSIVAS + SLIDER DE PREMIOS
   ========================================================= */

.poceados-live-page,
.live-modalities,
.live-modality-card {
    min-width: 0;
}

/* Las modalidades normales y Premio Extra usan siempre seis columnas.
   De esta manera ninguna bolilla sale del ancho disponible. */
.live-balls {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 1.5vw, 10px);
    margin: 23px 0;
}

.live-ball {
    width: 100%;
    max-width: 54px;
    aspect-ratio: 1;
    height: auto;
    justify-self: center;
    min-width: 0;
}

.live-ball b {
    font-size: clamp(.82rem, 2.7vw, 1.03rem);
}

/* Contenedor general del detalle deslizable */
.live-prize-slider {
    min-width: 0;
    margin-top: 19px;
}

.live-prize-slider__toolbar {
    min-height: 52px;
    padding: 0 2px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.live-prize-slider__toolbar span,
.live-prize-slider__toolbar small {
    display: block;
}

.live-prize-slider__toolbar span {
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .68rem;
    font-weight: 800;
}

.live-prize-slider__toolbar small {
    margin-top: 5px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
}

.live-prize-slider__controls {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
}

.live-prize-slider__arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px;
    color: #fff;
    background: #111a17;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 800;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        opacity .2s ease;
}

.live-prize-slider__arrow:hover:not(:disabled),
.live-prize-slider__arrow:focus-visible:not(:disabled) {
    border-color: var(--verde-361);
    background: rgba(67,176,42,.13);
}

.live-prize-slider__arrow:disabled {
    opacity: .28;
    cursor: default;
}

.live-prize-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(67,176,42,.85)
        rgba(255,255,255,.07);
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #0b1210;
}

.live-prize-table-wrap:focus-visible {
    outline: 2px solid var(--verde-361);
    outline-offset: 3px;
}

.live-prize-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.live-prize-table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,.055);
}

.live-prize-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(67,176,42,.85);
}

.live-prize-table {
    width: max(100%, 760px);
    min-width: 760px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.live-prize-table th,
.live-prize-table td {
    scroll-snap-align: start;
    white-space: nowrap;
}

.live-prize-table th:nth-child(1),
.live-prize-table td:nth-child(1) {
    width: 150px;
}

.live-prize-table th:nth-child(2),
.live-prize-table td:nth-child(2) {
    width: 205px;
}

.live-prize-table th:nth-child(3),
.live-prize-table td:nth-child(3) {
    width: 190px;
}

.live-prize-table th:nth-child(4),
.live-prize-table td:nth-child(4) {
    width: 215px;
}

/* La categoría del premio permanece visible mientras se desliza. */
.live-prize-table th:first-child,
.live-prize-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #121c18;
    box-shadow: 8px 0 16px rgba(0,0,0,.22);
}

.live-prize-table th:first-child {
    z-index: 4;
    background: #18261f;
}

/* Indicador inferior de posición */
.live-prize-slider__progress {
    width: 100%;
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    opacity: 0;
    transition: opacity .2s ease;
}

.live-prize-slider.is-scrollable .live-prize-slider__progress {
    opacity: 1;
}

.live-prize-slider__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--verde-361);
    transform-origin: left center;
    transition: transform .08s linear;
}

/* Sombras laterales que indican que hay más contenido. */
.live-prize-slider {
    position: relative;
}

.live-prize-slider::before,
.live-prize-slider::after {
    content: "";
    position: absolute;
    z-index: 6;
    top: 62px;
    bottom: 13px;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.live-prize-slider::before {
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(5,9,7,.72),
        transparent
    );
}

.live-prize-slider::after {
    right: 0;
    background: linear-gradient(
        270deg,
        rgba(5,9,7,.72),
        transparent
    );
}

.live-prize-slider.is-scrollable:not(.is-at-start)::before,
.live-prize-slider.is-scrollable:not(.is-at-end)::after {
    opacity: 1;
}

@media (max-width: 700px) {
    .live-modality-card {
        padding: 17px 14px;
        overflow: hidden;
    }

    .live-balls {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        margin: 18px 0;
    }

    .live-ball {
        max-width: 48px;
        border-width: 1.5px;
        box-shadow: 0 6px 14px rgba(0,0,0,.24);
    }

    .live-ball b {
        font-size: clamp(.76rem, 3.6vw, .92rem);
    }

    .live-ball.is-repeated::after {
        left: 5px;
        right: 5px;
        height: 2px;
    }

    .live-prize-slider__toolbar {
        min-height: 48px;
        padding-bottom: 9px;
        align-items: center;
    }

    .live-prize-slider__toolbar small {
        max-width: 220px;
        font-size: .66rem;
    }

    .live-prize-slider__arrow {
        width: 42px;
        height: 42px;
    }

    .live-prize-table {
        width: 700px;
        min-width: 700px;
    }

    .live-prize-table th,
    .live-prize-table td {
        padding: 13px 12px;
        font-size: .8rem;
    }

    .live-prize-table th {
        font-size: .62rem;
    }

    .live-prize-table th:nth-child(1),
    .live-prize-table td:nth-child(1) {
        width: 132px;
    }

    .live-prize-table th:nth-child(2),
    .live-prize-table td:nth-child(2) {
        width: 190px;
    }

    .live-prize-table th:nth-child(3),
    .live-prize-table td:nth-child(3) {
        width: 172px;
    }

    .live-prize-table th:nth-child(4),
    .live-prize-table td:nth-child(4) {
        width: 206px;
    }

    .live-prize-slider::before,
    .live-prize-slider::after {
        top: 57px;
    }
}

@media (max-width: 420px) {
    .live-modality-card {
        padding-inline: 11px;
    }

    .live-balls {
        gap: 4px;
    }

    .live-ball {
        max-width: 44px;
    }

    .live-ball b {
        font-size: clamp(.7rem, 3.8vw, .86rem);
    }

    .live-prize-slider__toolbar {
        align-items: flex-start;
    }

    .live-prize-slider__toolbar small {
        max-width: 180px;
        font-size: .61rem;
    }

    .live-prize-slider__controls {
        gap: 5px;
    }

    .live-prize-slider__arrow {
        width: 40px;
        height: 40px;
    }

    .live-prize-table {
        width: 660px;
        min-width: 660px;
    }

    .live-prize-table th,
    .live-prize-table td {
        padding: 12px 10px;
        font-size: .76rem;
    }

    .live-prize-table th:nth-child(1),
    .live-prize-table td:nth-child(1) {
        width: 120px;
    }

    .live-prize-table th:nth-child(2),
    .live-prize-table td:nth-child(2) {
        width: 180px;
    }

    .live-prize-table th:nth-child(3),
    .live-prize-table td:nth-child(3) {
        width: 160px;
    }

    .live-prize-table th:nth-child(4),
    .live-prize-table td:nth-child(4) {
        width: 200px;
    }
}

@media (max-width: 350px) {
    .live-modality-card {
        padding-inline: 9px;
    }

    .live-balls {
        gap: 3px;
    }

    .live-ball {
        max-width: 40px;
    }

    .live-ball b {
        font-size: .75rem;
    }

    .live-prize-slider__toolbar span {
        font-size: .62rem;
    }

    .live-prize-slider__toolbar small {
        max-width: 145px;
    }
}

@media (hover: none), (pointer: coarse) {
    .live-prize-slider__arrow:hover:not(:disabled) {
        background: #111a17;
        border-color: rgba(255,255,255,.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-prize-table-wrap {
        scroll-behavior: auto;
    }
}


/* Próximo pozo oficial / estimado */
.metric--jackpot-official .metric__icon {
    color: #fff;
    border-color: rgba(67,176,42,.82);
    background: rgba(67,176,42,.14);
}

.metric--jackpot-official strong {
    color: var(--verde-claro);
}

.metric--jackpot-estimated .metric__icon {
    color: #fff;
    border-color: rgba(239,151,0,.86);
    background: rgba(239,151,0,.14);
}

.metric--jackpot-estimated strong {
    color: #ffc65e;
}

.metric--jackpot-estimated small {
    color: #e8c98e;
}


/* Selector histórico de sorteos - Quini 6 y Brinco
   Integrado visualmente con el panel de Resultados de Loterías en Vivo */
.draw-selector-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
    gap: 28px;
    align-items: end;
    margin-bottom: 22px;
    padding: 21px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: rgba(11,19,16,.97);
    box-shadow: var(--sombra);
}

.draw-selector-card__copy > span {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    font-weight: 700;
}

.draw-selector-card__copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.2;
}

.draw-selector-card__copy p {
    margin: 8px 0 0;
    color: #a7b0aa;
    line-height: 1.55;
}

.draw-selector-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.draw-selector-form label {
    grid-column: 1 / -1;
    display: block;
    margin-bottom: -1px;
    color: #e8ece9;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    font-weight: 700;
}

.draw-selector-form__control {
    position: relative;
    min-width: 0;
}

.draw-selector-form select {
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 0 46px 0 16px;
    color: #fff;
    background: #101916;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    outline: none;
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.draw-selector-form select:hover {
    border-color: rgba(67,176,42,.75);
    background: #13201b;
}

.draw-selector-form select:focus {
    border-color: var(--verde-361);
    box-shadow: 0 0 0 4px rgba(67,176,42,.1);
}

.draw-selector-form select option {
    color: #111;
    background: #fff;
}

.draw-selector-form__chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-54%);
    pointer-events: none;
    color: var(--verde-claro);
    font-size: 1.3rem;
    font-weight: 900;
}

.draw-selector-form button {
    min-height: 52px;
    padding: 0 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--verde-361), #2d8d1e);
    border: 1px solid var(--verde-361);
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .02em;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.draw-selector-form button:hover,
.draw-selector-form button:focus-visible {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px rgba(67,176,42,.18);
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .draw-selector-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 520px) {
    .draw-selector-card {
        margin-bottom: 16px;
        padding: 17px;
        border-radius: 12px;
    }

    .draw-selector-form {
        grid-template-columns: 1fr;
    }

    .draw-selector-form label {
        grid-column: auto;
    }

    .draw-selector-form button {
        width: 100%;
    }

    .draw-selector-form select {
        font-size: .92rem;
    }
}

/* Loto Plus: indicador del Número Plus dentro del encabezado del sorteo. */
.live-number-plus {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .55rem !important;
    padding: .45rem .75rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .82rem;
}
.live-number-plus strong { font-size: 1rem; }

/* Telekino: información complementaria */
.telekino-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.telekino-info-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(145deg,rgba(31,34,32,.98),rgba(18,20,19,.98));padding:22px;box-shadow:0 18px 45px rgba(0,0,0,.18)}.telekino-info-card>span{display:block;color:#69be28;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}.telekino-info-card h3{margin:0 0 10px;color:#fff;font-size:1.28rem}.telekino-info-card p{margin:0;color:#c8cbc8;line-height:1.65}.telekino-info-card ul{margin:14px 0 0;padding-left:18px;color:#e4e6e4;line-height:1.8}@media(max-width:720px){.telekino-info-grid{grid-template-columns:1fr}.telekino-info-card{padding:18px}}

/* Telekino: extracto oficial ampliado */
.telekino-extract-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.telekino-jackpot-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;background:linear-gradient(145deg,rgba(31,34,32,.99),rgba(17,19,18,.99));box-shadow:0 20px 50px rgba(0,0,0,.2)}.telekino-jackpot-card:after{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;background:rgba(105,190,40,.12)}.telekino-jackpot-card>span,.telekino-section-heading>span,.telekino-stats-grid article>span{display:block;color:#69be28;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.telekino-jackpot-card strong{display:block;margin:10px 0 5px;color:#fff;font-size:clamp(1.7rem,3.5vw,2.65rem);line-height:1}.telekino-jackpot-card small{color:#c7cbc8;line-height:1.5}.telekino-jackpot-card--total{background:linear-gradient(145deg,rgba(78,18,50,.98),rgba(30,15,25,.98))}.telekino-benefits,.telekino-cartons{margin-top:22px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(31,34,32,.98),rgba(18,20,19,.98));padding:22px;box-shadow:0 18px 45px rgba(0,0,0,.18)}.telekino-section-heading h3{margin:6px 0 0;color:#fff;font-size:1.25rem}.telekino-benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.telekino-benefit-item{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(255,255,255,.045);color:#eef0ee;line-height:1.45}.telekino-benefit-item span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:rgba(105,190,40,.16);color:#69be28;font-weight:900}.telekino-cartons-table-wrap{margin-top:18px;overflow-x:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px}.telekino-cartons-table{width:100%;border-collapse:collapse;min-width:480px}.telekino-cartons-table th,.telekino-cartons-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}.telekino-cartons-table th{background:rgba(255,255,255,.06);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.telekino-cartons-table td{color:#e1e4e1}.telekino-cartons-table td:first-child{font-weight:800;color:#fff}.telekino-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}.telekino-stats-grid article{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(24,27,25,.96)}.telekino-stats-grid strong{display:block;margin-top:8px;color:#fff;font-size:1.15rem}.telekino-legal-note{margin-top:18px;padding:16px 18px;border-left:4px solid #69be28;border-radius:12px;background:rgba(105,190,40,.08);color:#d8ddd8}.telekino-legal-note strong{color:#fff}.telekino-legal-note p{margin:7px 0 0;line-height:1.55}
@media(max-width:900px){.telekino-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.telekino-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.telekino-extract-summary{grid-template-columns:1fr}.telekino-benefits,.telekino-cartons{padding:18px}.telekino-benefits-grid{grid-template-columns:1fr}.telekino-stats-grid{grid-template-columns:1fr 1fr}.telekino-jackpot-card{padding:20px}}
@media(max-width:420px){.telekino-stats-grid{grid-template-columns:1fr}.telekino-jackpot-card strong{font-size:1.65rem}}

/* Telekino: estado de publicación en dos etapas */
.telekino-live-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .7rem;
    padding: .5rem .8rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(15,23,42,.48);
    font-size: .78rem;
    letter-spacing: .02em;
    color: #fff;
    backdrop-filter: blur(8px);
}
.telekino-live-status span {
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 .28rem rgba(255,255,255,.08);
}
.telekino-live-status.is-official span { background: #64c832; }
.telekino-live-status.is-preliminary span {
    background: #f4c542;
    animation: telekinoStatusPulse 1.6s ease-in-out infinite;
}
@keyframes telekinoStatusPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.78); }
}
@media (max-width: 640px) {
    .telekino-live-status {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }
}

/* Actualización en vivo sin recarga ni saltos de navegación */
.live-update-toast {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    z-index: 9999;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(28, 35, 31, .94);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.live-update-toast::before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 9px;
    border-radius: 50%;
    background: #54b948;
    vertical-align: -5px;
}

.live-update-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 600px) {
    .live-update-toast {
        right: 12px;
        bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
        max-width: calc(100vw - 24px);
        font-size: .84rem;
    }
}

/* Aviso institucional reutilizable al pie de todas las páginas de resultados. */
.source-note--verification {
    border-color: rgba(67,176,42,.42);
    background: linear-gradient(135deg, rgba(67,176,42,.10), rgba(24,33,30,.98));
}
.source-note__icon--shield {
    border-color: rgba(67,176,42,.55);
    background: rgba(67,176,42,.12);
    font-size: 1.15rem;
}
.source-note__title {
    margin: 0 0 6px;
    color: #f5f8f5;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* =========================================================
   Novedades visuales - landing y administración
   ========================================================= */
.news-showcase { margin: clamp(34px, 5vw, 68px) 0; }
.news-showcase__heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.news-showcase__heading h2 { margin:6px 0 8px; font-size:clamp(1.8rem, 3vw, 2.7rem); line-height:1.05; color:#202621; }
.news-showcase__heading p { margin:0; max-width:720px; color:#667068; line-height:1.65; }
.news-showcase__grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr); grid-auto-rows:minmax(255px,auto); gap:18px; }
.news-showcase__grid--single { grid-template-columns:1fr; }
.news-card { position:relative; min-height:285px; overflow:hidden; border-radius:24px; background:#202621; box-shadow:0 20px 48px rgba(26,35,29,.16); isolation:isolate; }
.news-card--featured { grid-row:span 2; min-height:588px; }
.news-showcase__grid--single .news-card--featured { min-height:clamp(420px, 48vw, 610px); grid-row:auto; }
.news-card__media, .news-card__media img { position:absolute; inset:0; width:100%; height:100%; }
.news-card__media img { object-fit:cover; object-position:center; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.news-card:hover .news-card__media img { transform:scale(1.035); }
.news-card__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,15,11,.04) 24%, rgba(10,16,12,.88) 100%); }
.news-card--featured .news-card__overlay { background:linear-gradient(90deg, rgba(8,14,10,.86) 0%, rgba(8,14,10,.48) 48%, rgba(8,14,10,.08) 80%), linear-gradient(0deg, rgba(8,14,10,.55), transparent 55%); }
.news-card__content { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,3.5vw,42px); color:#fff; }
.news-card__tag { display:inline-flex; margin-bottom:12px; padding:7px 11px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:rgba(20,27,22,.36); backdrop-filter:blur(8px); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.news-card h3 { margin:0; max-width:760px; color:#fff; font-size:clamp(1.35rem,2.5vw,2.75rem); line-height:1.08; }
.news-card:not(.news-card--featured) h3 { font-size:clamp(1.2rem,1.6vw,1.65rem); }
.news-card p { margin:12px 0 0; max-width:680px; color:rgba(255,255,255,.88); line-height:1.55; }
.news-card:not(.news-card--featured) p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.9rem; }
.news-card__button { display:inline-flex; align-items:center; min-height:44px; margin-top:20px; padding:0 18px; border-radius:999px; background:#fff; color:#252c27; font-weight:800; text-decoration:none; transition:transform .2s ease, background .2s ease; }
.news-card__button:hover { transform:translateY(-2px); background:#eef3ee; }

.novedades-admin { min-height:100vh; padding:32px 18px 60px; background:#eef1ed; color:#202621; }
.novedades-admin__wrap { width:min(1180px,100%); margin:auto; }
.novedades-admin__header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; }
.novedades-admin__header h1 { margin:5px 0 8px; font-size:clamp(2rem,4vw,3rem); }
.novedades-admin__header p { margin:0; color:#647067; }
.novedades-admin__actions { display:flex; flex-wrap:wrap; gap:10px; }
.novedades-admin__actions a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:12px; background:#fff; color:#273029; text-decoration:none; font-weight:800; box-shadow:0 8px 22px rgba(24,34,27,.08); }
.novedades-admin__notice { margin-bottom:18px; padding:14px 16px; border-radius:14px; font-weight:700; }
.novedades-admin__notice--ok { background:#dff3dc; color:#255c20; }
.novedades-admin__notice--error { background:#f8dddd; color:#7c2424; }
.novedades-admin__layout { display:grid; grid-template-columns:minmax(340px,.85fr) minmax(0,1.35fr); gap:22px; align-items:start; }
.novedades-panel { padding:24px; border-radius:22px; background:#fff; box-shadow:0 18px 45px rgba(28,37,31,.09); }
.novedades-panel h2 { margin:0 0 18px; }
.novedades-form { display:grid; gap:15px; }
.novedades-form label { display:grid; gap:7px; color:#38413b; font-size:.86rem; font-weight:800; }
.novedades-form input, .novedades-form textarea, .novedades-form select { width:100%; box-sizing:border-box; border:1px solid #d6ddd7; border-radius:12px; padding:11px 12px; background:#fbfcfb; color:#202621; font:inherit; }
.novedades-form textarea { min-height:110px; resize:vertical; }
.novedades-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.novedades-form__checks { display:flex; flex-wrap:wrap; gap:18px; }
.novedades-form__checks label { display:flex; grid-template-columns:none; align-items:center; gap:8px; }
.novedades-form__checks input { width:auto; }
.novedades-form__submit { min-height:48px; border:0; border-radius:13px; background:#3bae2b; color:#fff; font:inherit; font-weight:900; cursor:pointer; }
.novedades-admin-list { display:grid; gap:14px; }
.novedades-admin-card { display:grid; grid-template-columns:170px minmax(0,1fr); overflow:hidden; border:1px solid #e2e7e2; border-radius:17px; background:#fff; }
.novedades-admin-card__image { min-height:150px; background:#dfe5df; }
.novedades-admin-card__image img { width:100%; height:100%; object-fit:cover; }
.novedades-admin-card__body { padding:16px; }
.novedades-admin-card__meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.novedades-admin-card__meta span { padding:5px 8px; border-radius:999px; background:#eef2ee; color:#566159; font-size:.68rem; font-weight:900; text-transform:uppercase; }
.novedades-admin-card h3 { margin:0 0 6px; }
.novedades-admin-card p { margin:0 0 13px; color:#69736b; font-size:.9rem; line-height:1.45; }
.novedades-admin-card__actions { display:flex; flex-wrap:wrap; gap:8px; }
.novedades-admin-card__actions a, .novedades-admin-card__actions button { border:0; border-radius:9px; padding:8px 11px; background:#28312b; color:#fff; font:inherit; font-size:.78rem; font-weight:800; text-decoration:none; cursor:pointer; }
.novedades-admin-card__actions .is-danger { background:#a83434; }
.novedades-empty { padding:34px 18px; border:1px dashed #bdc6bf; border-radius:16px; color:#647067; text-align:center; }

@media (max-width: 900px) {
  .news-showcase__grid { grid-template-columns:1fr 1fr; }
  .news-card--featured { grid-column:1/-1; grid-row:auto; min-height:470px; }
  .novedades-admin__layout { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .news-showcase { margin:34px 0 44px; }
  .news-showcase__heading { margin-bottom:16px; }
  .news-showcase__grid, .news-showcase__grid--single { display:flex; gap:14px; margin-right:calc(50% - 50vw); padding-right:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .news-showcase__grid::-webkit-scrollbar { display:none; }
  .news-card, .news-card--featured, .news-showcase__grid--single .news-card--featured { flex:0 0 min(88vw,390px); min-height:470px; scroll-snap-align:start; border-radius:20px; }
  .news-card__overlay, .news-card--featured .news-card__overlay { background:linear-gradient(180deg, rgba(8,14,10,.02) 25%, rgba(8,14,10,.92) 100%); }
  .news-card h3, .news-card:not(.news-card--featured) h3 { font-size:1.6rem; }
  .news-card:not(.news-card--featured) p { display:block; }
  .novedades-admin { padding:20px 12px 40px; }
  .novedades-admin__header { display:block; }
  .novedades-admin__actions { margin-top:15px; }
  .novedades-panel { padding:17px; border-radius:17px; }
  .novedades-form__row { grid-template-columns:1fr; }
  .novedades-admin-card { grid-template-columns:1fr; }
  .novedades-admin-card__image { height:190px; }
}


/* Etapas 3 y 4: optimización visual, presentaciones, previews y accesibilidad */
.news-card[data-news-card] { opacity:0; transform:translateY(22px); transition:opacity .55s ease var(--news-delay,0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--news-delay,0ms), box-shadow .3s ease; }
.news-card[data-news-card].is-visible { opacity:1; transform:translateY(0); }
.news-card--hero { grid-column:1/-1; min-height:clamp(420px,48vw,610px); }
.news-card--hero .news-card__content { max-width:850px; }
.news-card--compacta { min-height:235px; }
.news-card--compacta .news-card__content { padding:22px; }
.news-card--compacta h3 { font-size:clamp(1.1rem,1.5vw,1.45rem)!important; }
.news-card--compacta p { font-size:.86rem; }
.news-card:focus-within { outline:3px solid rgba(59,174,43,.55); outline-offset:4px; }
.news-card__button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.novedades-upload-preview { min-height:180px; display:grid; place-items:center; overflow:hidden; border:1px dashed #bec8c0; border-radius:15px; background:#f3f6f3; color:#778179; font-size:.82rem; text-align:center; }
.novedades-upload-preview img { width:100%; height:220px; object-fit:cover; display:block; }
.novedades-upload-preview--mobile { width:min(240px,100%); min-height:250px; }
.novedades-upload-preview--mobile img { height:330px; }
.novedades-form__help { display:block; padding:11px 12px; border-radius:11px; background:#f1f6ef; color:#566159; line-height:1.5; }
@media (hover:hover) and (pointer:fine) {
  .news-card:hover { box-shadow:0 26px 58px rgba(26,35,29,.23); }
}
@media (max-width:680px) {
  .news-card--hero, .news-card--premium, .news-card--compacta { flex-basis:min(88vw,390px); min-height:470px; }
  .news-showcase__grid { scroll-padding-left:1px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
}
@media (prefers-reduced-motion:reduce) {
  .news-card[data-news-card], .news-card__media img, .news-card__button { opacity:1; transform:none; transition:none!important; animation:none!important; }
}


/* Acceso discreto al panel administrativo */
.site-nav__links a.site-nav__admin-link {
    margin-left: 7px;
    border: 1px solid rgba(67,176,42,.38);
    color: #fff;
    background: rgba(67,176,42,.08);
}
.site-nav__links a.site-nav__admin-link::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--verde-361);
    box-shadow: 0 0 0 5px rgba(67,176,42,.1);
}
.site-nav__links a.site-nav__admin-link:hover { border-color: var(--verde-361); background: rgba(67,176,42,.16); }
@media (max-width: 900px) {
    .site-nav__links a.site-nav__admin-link { margin: 12px 0 0; border-color: rgba(67,176,42,.38); background: rgba(67,176,42,.1); }
}

/* Novedades: carga inteligente de una sola imagen (2026-07-20) */
.novedades-panel__title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.novedades-panel__title h2{margin:4px 0 0}.novedades-panel__new{padding:8px 11px;border-radius:10px;background:#eef4ed;color:#2e6630;font-size:.78rem;font-weight:900;text-decoration:none}.novedades-counter{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#28312b;color:#fff;font-weight:900}.smart-upload{position:relative;display:grid;place-items:center;gap:7px;min-height:185px;padding:25px;border:2px dashed #aebbb0;border-radius:18px;background:linear-gradient(145deg,#f7faf7,#edf3ed);color:#647067;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.smart-upload:hover,.smart-upload.is-dragging{border-color:#3bae2b;background:#edf8ea;transform:translateY(-1px)}.smart-upload.has-file{border-style:solid;border-color:#69b85b;background:#f1faef}.smart-upload__input{position:absolute!important;inset:0;width:100%!important;height:100%;opacity:0;cursor:pointer}.smart-upload__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#28312b;color:#fff;font-size:1.55rem;font-weight:900}.smart-upload strong{color:#2d3730;font-size:.97rem}.smart-upload span,.smart-upload small{display:block;font-weight:600}.smart-upload small{color:#899289}.smart-preview{padding:15px;border:1px solid #dde5de;border-radius:17px;background:#f9fbf9}.smart-preview__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.smart-preview__heading>div{display:grid;gap:3px}.smart-preview__heading span{color:#78827a;font-size:.75rem}.smart-preview__badge{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#e3f4df!important;color:#2d6c27!important;font-weight:900}.smart-preview__grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:start}.smart-preview__item{margin:0}.smart-preview__item figcaption{margin-bottom:7px;color:#4f5b52;font-size:.75rem;font-weight:900}.smart-preview__canvas{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:#d9e0da;color:#78827a;isolation:isolate}.smart-preview__canvas:before{content:"";position:absolute;inset:-12px;z-index:-2;background-image:var(--preview-url);background-size:cover;background-position:center;filter:blur(10px) brightness(.7);transform:scale(1.08)}.smart-preview__canvas:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.12)}.smart-preview__item--desktop .smart-preview__canvas{aspect-ratio:16/9}.smart-preview__item--mobile .smart-preview__canvas{aspect-ratio:4/5}.smart-preview__canvas img{display:block;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.22))}.novedades-form__submit{position:relative;transition:opacity .2s ease,transform .2s ease}.novedades-form__submit:hover{transform:translateY(-1px)}.novedades-form__submit:disabled{cursor:wait;opacity:.78}.novedades-form__submit.is-processing:before{content:"";display:inline-block;width:15px;height:15px;margin-right:9px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-3px;animation:novedades-spin .8s linear infinite}@keyframes novedades-spin{to{transform:rotate(360deg)}}.novedades-admin-card.is-inactive{opacity:.72}.novedades-admin-card__meta span.is-active{background:#dff3dc;color:#255c20}.novedades-admin-card__meta span.is-hidden{background:#eee;color:#666}.novedades-admin-card__meta span.is-featured{background:#f7ead1;color:#7b5415}.novedades-admin-card__dates{margin:-5px 0 13px;color:#7a847c;font-size:.76rem;font-weight:700}.novedades-admin-card__actions form{display:inline-flex}.novedades-admin-card__actions button:not(.is-danger){background:#536158}
@media(max-width:540px){.smart-preview__heading{align-items:flex-start;flex-direction:column}.smart-preview__grid{grid-template-columns:1fr 110px}.smart-upload{min-height:165px;padding:20px 14px}.novedades-panel__title{align-items:flex-start}.novedades-admin-card__actions{gap:7px}.novedades-admin-card__actions a,.novedades-admin-card__actions button{padding:8px 9px}}

/* =========================================================
   Campañas adaptativas — imagen original completa
   La landing se adapta al flyer y nunca lo recorta ni oscurece.
   ========================================================= */
.news-showcase__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: clamp(18px, 2.4vw, 28px);
}
.news-showcase__grid--single { grid-template-columns: 1fr; }
.news-card,
.news-card--featured,
.news-showcase__grid--single .news-card--featured {
    grid-column: span 6;
    grid-row: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(36, 47, 39, .10);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(28, 37, 31, .10);
    isolation: auto;
}
.news-card--featured { grid-column: 1 / -1; }
.news-showcase__grid--single .news-card { grid-column: 1 / -1; }
.news-card__media,
.news-card__media img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
}
.news-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    overflow: hidden;
    background: #f4f5f2;
    border-bottom: 1px solid rgba(36, 47, 39, .08);
}
.news-card__media img {
    display: block;
    max-height: 720px;
    object-fit: contain;
    object-position: center;
    filter: none;
    opacity: 1;
    transform: none !important;
    transition: none;
}
.news-card:not(.news-card--featured) .news-card__media img { max-height: 520px; }
.news-card__overlay { display: none !important; }
.news-card__content {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: clamp(20px, 2.8vw, 34px);
    color: #202621;
    background: #fff;
}
.news-card__tag {
    margin-bottom: 12px;
    border: 1px solid rgba(59, 174, 43, .24);
    background: rgba(59, 174, 43, .09);
    color: #2e6f27;
    backdrop-filter: none;
}
.news-card h3,
.news-card:not(.news-card--featured) h3 {
    margin: 0;
    max-width: 900px;
    color: #202621;
    font-size: clamp(1.3rem, 2.2vw, 2.25rem);
    line-height: 1.14;
}
.news-card:not(.news-card--featured) h3 { font-size: clamp(1.2rem, 1.7vw, 1.55rem); }
.news-card p,
.news-card:not(.news-card--featured) p {
    display: block;
    margin: 12px 0 0;
    max-width: 820px;
    overflow: visible;
    color: #667068;
    font-size: .95rem;
    line-height: 1.65;
    -webkit-line-clamp: unset;
}
.news-card__button {
    margin-top: 20px;
    background: #2f382f;
    color: #fff;
    box-shadow: none;
}
.news-card__button:hover { background: #3bae2b; }

/* La vista previa del administrador replica la publicación: fondo limpio,
   imagen completa y sin efectos oscuros. */
.smart-preview__canvas {
    align-items: center;
    background: #f4f5f2;
    border: 1px solid rgba(36, 47, 39, .10);
}
.smart-preview__canvas::before,
.smart-preview__canvas::after { display: none; }
.smart-preview__canvas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}
.smart-preview__item--desktop .smart-preview__canvas { aspect-ratio: 16 / 9; }
.smart-preview__item--mobile .smart-preview__canvas { aspect-ratio: 9 / 16; }

@media (max-width: 820px) {
    .news-card,
    .news-card--featured { grid-column: 1 / -1; }
    .news-card__media { min-height: 0; }
    .news-card__media img,
    .news-card:not(.news-card--featured) .news-card__media img { max-height: none; }
}

@media (max-width: 560px) {
    .news-showcase { margin-block: 30px 42px; }
    .news-card,
    .news-card--featured { border-radius: 18px; }
    .news-card__content { padding: 18px; }
    .smart-preview__grid { grid-template-columns: 1fr 118px; }
}

/* =========================================================
   Landing Premium v2 — hero dinámico de campañas
   ========================================================= */
.campaign-hero {
    position: relative;
    margin: clamp(46px, 7vw, 88px) 0;
}
.campaign-hero__topline {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.campaign-hero__topline h2 {
    margin: 6px 0 0;
    color: #202621;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    line-height: 1.05;
}
.campaign-hero__counter {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: #8a938c;
    font-variant-numeric: tabular-nums;
}
.campaign-hero__counter strong { color: #28312b; font-size: 1.5rem; }
.campaign-slider {
    position: relative;
    overflow: hidden;
    min-height: 0;
    border-radius: clamp(22px, 3vw, 38px);
    background: #242c27;
    box-shadow: 0 24px 64px rgba(24, 34, 27, .17);
    isolation: isolate;
    transition: height .45s cubic-bezier(.2,.75,.2,1);
}
.campaign-slider__track { position: relative; }
.campaign-slide {
    --campaign-copy-fr: .40fr;
    --campaign-visual-fr: .60fr;
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.2,1), visibility 0s linear .8s;
}
.campaign-slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}
.campaign-slide__atmosphere {
    position: absolute;
    inset: -12%;
    z-index: -2;
    overflow: hidden;
    background: #273029;
}
.campaign-slide__atmosphere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(58px) saturate(1.25);
    opacity: .52;
    transform: scale(1.18);
}
.campaign-slide__atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 42%, rgba(255,255,255,.14), transparent 34%),
        linear-gradient(105deg, rgba(23,31,25,.93) 0%, rgba(31,41,34,.70) 43%, rgba(25,33,28,.27) 100%);
}
.campaign-slide__layout {
    display: grid;
    grid-template-columns: minmax(270px, var(--campaign-copy-fr)) minmax(0, var(--campaign-visual-fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
}
.campaign-slide__copy {
    position: relative;
    z-index: 3;
    align-self: center;
    padding: clamp(26px, 4vw, 58px);
    color: #fff;
}
.campaign-slide__tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 18px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.campaign-slide__copy h3 {
    margin: 0;
    max-width: 580px;
    color: #fff;
    font-size: clamp(2.05rem, 4vw, 4.45rem);
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.campaign-slide__copy p {
    max-width: 560px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(.98rem, 1.15vw, 1.12rem);
    line-height: 1.62;
}
.campaign-slide__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 50px;
    margin-top: 26px;
    padding: 0 20px 0 22px;
    border-radius: 999px;
    background: #fff;
    color: #202721;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}
.campaign-slide__button:hover { transform: translateY(-2px); background: #edf5eb; }
.campaign-slide__visual {
    position: relative;
    z-index: 2;
    align-self: start;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
}
.campaign-slide__halo { display: none; }
.campaign-slide__visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    filter: none;
    transform: translateX(16px);
    opacity: 0;
    transition: opacity .7s ease .10s, transform .85s cubic-bezier(.2,.75,.2,1) .06s;
}
.campaign-slide.is-active .campaign-slide__visual img { opacity: 1; transform: translateX(0); }
.campaign-slider__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
}
.campaign-slider__arrows { display: flex; gap: 9px; }
.campaign-slider__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(35,45,38,.14);
    border-radius: 50%;
    background: #fff;
    color: #28312b;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color .2s ease, transform .2s ease;
}
.campaign-slider__arrow:hover { border-color: var(--verde-361); transform: translateY(-2px); }
.campaign-slider__dots { display: flex; align-items: center; gap: 8px; }
.campaign-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c7cec8;
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.campaign-slider__dot.is-active { width: 34px; background: var(--verde-361); }

@media (max-width: 900px) {
    .campaign-slide__layout { grid-template-columns: 1fr; }
    .campaign-slide__visual { order: 1; }
    .campaign-slide__copy {
        order: 2;
        align-self: auto;
        padding: 24px 26px 28px;
    }
    .campaign-slide__copy h3 { font-size: clamp(2rem, 8vw, 3.25rem); }
    .campaign-slide__copy p { margin-top: 14px; }
    .campaign-slide__button { margin-top: 20px; }
    .campaign-slide__atmosphere::after {
        background: linear-gradient(180deg, rgba(23,31,25,.10) 0%, rgba(23,31,25,.28) 44%, rgba(23,31,25,.94) 100%);
    }
}
@media (max-width: 560px) {
    .campaign-hero { margin: 32px 0 42px; }
    .campaign-hero__topline { align-items: flex-start; }
    .campaign-hero__counter { display: none; }
    .campaign-slider { border-radius: 22px; }
    .campaign-slide__copy { padding: 20px 18px 22px; }
    .campaign-slide__copy h3 { font-size: clamp(1.85rem, 10vw, 2.7rem); }
    .campaign-slide__copy p { font-size: .95rem; line-height: 1.55; }
    .campaign-slide__button { width: 100%; }
    .campaign-slider__navigation { justify-content: center; margin-top: 8px; }
    .campaign-slider__arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .campaign-slide,
    .campaign-slide__visual img,
    .campaign-slider__dot,
    .campaign-slider__arrow { transition: none !important; }
}

/* =========================================================
   Ajustes visuales de index — julio 2026
   ========================================================= */
.campaign-hero__topline h2,
#novedades-title {
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.service-card {
    min-height: 225px;
    padding: 22px;
}

.service-card h3 {
    margin-top: 20px;
    margin-bottom: 9px;
}

.service-card p {
    line-height: 1.5;
}

.service-card strong {
    padding-top: 14px;
}

/* Reduce el aire acumulado alrededor del hero y los servicios. */
.campaign-hero {
    margin-top: clamp(34px, 5vw, 58px);
    margin-bottom: clamp(30px, 4.5vw, 52px);
}

.campaign-hero__topline {
    margin-bottom: 14px;
}

.campaign-slider__navigation {
    margin-top: 7px;
}

.whatsapp-float {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    z-index: 1100;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 0 0 rgba(37, 211, 102, .34);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    animation: whatsappFloatPulse 3.2s ease-out infinite;
}

.whatsapp-float img {
    display: block;
    width: 100%;
    height: 100%;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.03);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .38), 0 0 0 8px rgba(37, 211, 102, .13);
}

@keyframes whatsappFloatPulse {
    0%, 62%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 0 0 rgba(37, 211, 102, .28); }
    78% { box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 0 12px rgba(37, 211, 102, 0); }
}

@media (max-width: 900px) {
    .service-card {
        min-height: 210px;
        padding: 20px;
    }
}

@media (max-width: 560px) {
    .service-card {
        min-height: 0;
        padding: 19px;
    }

    .service-card h3 {
        margin-top: 16px;
    }

    .whatsapp-float {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
        width: 58px;
        height: 58px;
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
}

/* Footer profesional de la landing: estilos aislados para evitar conflictos globales. */
.site-footer {
    position: relative;
    margin-top: 0;
    color: #eef2ef;
    background:
        radial-gradient(circle at 8% 15%, rgba(67,176,42,.09), transparent 28%),
        linear-gradient(145deg, #111a17 0%, #080e0c 72%);
    border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer__accent {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--verde-361) 0 38%, var(--gris-413) 38% 70%, var(--rojo-485) 70% 100%);
}

.site-footer__main {
    display: grid;
    grid-template-columns: 1.2fr .85fr 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    padding-top: 38px;
    padding-bottom: 34px;
}

.site-footer__column { min-width: 0; }
.site-footer__brand { padding-right: 8px; }

.site-footer__logo {
    display: block;
    width: min(225px, 100%);
    height: auto;
    margin: 0 0 17px;
    object-fit: contain;
}

.site-footer__agency {
    margin: 0;
    color: #fff;
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.site-footer__location {
    margin: 7px 0 0;
    color: var(--verde-claro);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .045em;
}

.site-footer__description {
    max-width: 260px;
    margin: 12px 0 0;
    color: #aeb8b1;
    font-size: .82rem;
    line-height: 1.5;
}

.site-footer__title {
    margin: 2px 0 18px;
    color: #fff;
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-footer__links,
.site-footer__details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links { display: grid; gap: 10px; }
.site-footer__links a,
.site-footer__details a,
.site-footer__admin {
    color: #c8d0ca;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease, border-color .2s ease;
}

.site-footer__links a {
    display: inline-block;
    font-size: .85rem;
    line-height: 1.35;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__details a:hover,
.site-footer__details a:focus-visible,
.site-footer__admin:hover,
.site-footer__admin:focus-visible { color: var(--verde-claro); }

.site-footer__details { display: grid; gap: 14px; }
.site-footer__details li,
.site-footer__schedule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #c8d0ca;
    font-size: .84rem;
    line-height: 1.45;
}

.site-footer__icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-grid;
    place-items: center;
    margin-top: 0;
    color: var(--verde-claro);
}

.site-footer__icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.site-footer__schedule p { margin: 0; }

.site-footer__admin {
    display: inline-flex;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.22);
    font-size: .77rem;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.16);
}

.site-footer__bottom-inner {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #8f9a93;
    font-size: .74rem;
}

.site-footer__bottom-inner p { margin: 0; }
.site-footer__bottom-inner strong { color: #bfc7c1; font-weight: 700; }

@media (max-width: 980px) {
    .site-footer__main {
        grid-template-columns: 1.15fr .85fr 1fr;
        gap: 34px;
        padding-top: 32px;
        padding-bottom: 30px;
    }
    .site-footer__column:last-child { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
    .site-footer__accent { height: 3px; }
    .site-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: 26px 22px;
        padding-top: 26px;
        padding-bottom: 24px;
    }
    .site-footer__brand {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: center;
        padding: 0 0 20px;
        border-bottom: 1px solid rgba(255,255,255,.09);
    }
    .site-footer__logo {
        grid-row: 1 / span 3;
        width: 126px;
        margin: 0;
    }
    .site-footer__agency,
    .site-footer__location,
    .site-footer__description { grid-column: 2; }
    .site-footer__agency { font-size: .84rem; }
    .site-footer__location { margin-top: 4px; font-size: .78rem; }
    .site-footer__description { margin-top: 7px; font-size: .76rem; }
    .site-footer__column:last-child { grid-column: auto; }
    .site-footer__title { margin-bottom: 13px; font-size: .76rem; }
    .site-footer__links { gap: 8px; }
    .site-footer__links a,
    .site-footer__details li,
    .site-footer__schedule { font-size: .78rem; }
    .site-footer__details { gap: 11px; }
    .site-footer__admin { margin-top: 12px; font-size: .72rem; }
    .site-footer__bottom-inner {
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding-top: 13px;
        padding-bottom: 13px;
        text-align: center;
        line-height: 1.35;
    }
}

@media (max-width: 460px) {
    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 22px;
        padding-bottom: 18px;
    }
    .site-footer__brand {
        grid-template-columns: 92px 1fr;
        padding-bottom: 17px;
    }
    .site-footer__logo { width: 92px; }
    .site-footer__description { display: none; }
    .site-footer__column:not(.site-footer__brand) {
        padding: 17px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .site-footer__column:last-child { border-bottom: 0; }
    .site-footer__title { margin: 0 0 11px; }
    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }
    .site-footer__details { gap: 10px; }
    .site-footer__bottom-inner { font-size: .69rem; }
}

/* Horarios del footer compartido: ajuste aislado, sin afectar resultados ni paneles. */
.site-footer__schedule > div {
    display: grid;
    gap: 3px;
}

.site-footer__schedule strong {
    color: #ffffff;
    font-weight: 700;
}

/* =========================================================
   COLUMNA DEL SORTEO EN CURSO · 30 MINUTOS
   ========================================================= */
.matrix-column-header {
    position: relative;
    flex-direction: column;
    gap: 5px;
    isolation: isolate;
    transition:
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.matrix-live-badge {
    display: none;
    align-items: center;
    gap: 5px;
    color: #dffff7;
    text-transform: uppercase;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .075em;
}

.matrix-live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--verde-claro);
    box-shadow: 0 0 10px rgba(99,207,69,.95);
}

.matrix-column-header.matrix-column--live {
    z-index: 3;
    color: #f5fff2;
    background:
        linear-gradient(180deg, rgba(99,207,69,.23), rgba(67,176,42,.10));
    box-shadow:
        inset 0 0 0 1px rgba(99,207,69,.78),
        inset 0 -14px 30px rgba(67,176,42,.12),
        0 0 16px rgba(99,207,69,.48),
        0 0 34px rgba(67,176,42,.28);
    animation: matrixColumnFluor 2.4s ease-in-out infinite;
}

.matrix-column-header.matrix-column--live .matrix-live-badge {
    display: inline-flex;
}

.matrix-cell.matrix-column--live {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(67,176,42,.115), rgba(67,176,42,.045));
    box-shadow:
        inset 1px 0 rgba(99,207,69,.46),
        inset -1px 0 rgba(99,207,69,.46),
        0 0 16px rgba(67,176,42,.18);
    animation: matrixCellFluor 2.4s ease-in-out infinite;
}

.matrix-cell--result.matrix-column--live::after {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border-radius: 8px;
    border: 1px solid rgba(99,207,69,.28);
    pointer-events: none;
}

.matrix-cell--result.matrix-column--live:hover,
.matrix-cell--result.matrix-column--live:focus-visible {
    background: rgba(67,176,42,.18);
    box-shadow:
        inset 0 0 0 1px rgba(99,207,69,.78),
        0 0 22px rgba(99,207,69,.40),
        0 10px 24px rgba(0,0,0,.24);
}

@keyframes matrixColumnFluor {
    0%, 100% {
        filter: brightness(.96);
        box-shadow:
            inset 0 0 0 1px rgba(99,207,69,.62),
            inset 0 -14px 30px rgba(67,176,42,.09),
            0 0 12px rgba(99,207,69,.34),
            0 0 24px rgba(67,176,42,.18);
    }
    50% {
        filter: brightness(1.12);
        box-shadow:
            inset 0 0 0 1px rgba(137,255,102,.95),
            inset 0 -14px 34px rgba(67,176,42,.18),
            0 0 22px rgba(99,207,69,.67),
            0 0 44px rgba(67,176,42,.36);
    }
}

@keyframes matrixCellFluor {
    0%, 100% {
        background-color: rgba(67,176,42,.025);
        box-shadow:
            inset 1px 0 rgba(99,207,69,.34),
            inset -1px 0 rgba(99,207,69,.34),
            0 0 10px rgba(67,176,42,.10);
    }
    50% {
        background-color: rgba(67,176,42,.08);
        box-shadow:
            inset 1px 0 rgba(137,255,102,.70),
            inset -1px 0 rgba(137,255,102,.70),
            0 0 22px rgba(99,207,69,.26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .matrix-column-header.matrix-column--live,
    .matrix-cell.matrix-column--live {
        animation: none;
    }
}