/* =====================================================================
   Raya Producciones: sitio público
   Paleta "noche de pueblo con luces de cancha". Los 6 colores base se pisan
   desde el panel (estilo_colores()); todo lo demás se deriva con color-mix().
   ===================================================================== */

:root {
    --noche: #000000;
    --noche-alta: #161514;
    --hueso: #EEE8DC;
    --bruma: #9C978D;
    --sodio: #F2AE3A;
    --bengala: #E5483B;

    --noche-honda: color-mix(in oklab, var(--noche-alta) 45%, var(--noche));
    --superficie: var(--noche-alta);
    --superficie-alta: color-mix(in oklab, var(--noche-alta) 92%, var(--hueso));
    --hueso-suave: color-mix(in oklab, var(--hueso) 80%, var(--noche));
    --linea: color-mix(in oklab, var(--hueso) 14%, transparent);
    --linea-fuerte: color-mix(in oklab, var(--hueso) 30%, transparent);
    --sodio-claro: color-mix(in oklab, var(--sodio) 75%, var(--hueso));
    --bengala-texto: color-mix(in oklab, var(--bengala) 70%, var(--hueso));

    --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ancho: 1240px;
    --margen: clamp(16px, 4vw, 40px);
    --radio: 6px;
    --alto-cabecera: 92px;

}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}

body {
    margin: 0;
    background: var(--noche);
    color: var(--hueso);
    font-family: var(--f-texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
/* Grano de película muy sutil: el negro deja de verse "digital" */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* Páginas internas: una luz de escenario ámbar que cae desde arriba */
body:not(.pagina-inicio) {
    background:
        radial-gradient(ellipse 70% 42% at 72% -6%, color-mix(in oklab, var(--sodio) 16%, transparent), transparent 70%),
        radial-gradient(ellipse 40% 30% at 8% -4%, color-mix(in oklab, var(--hueso) 6%, transparent), transparent 70%),
        var(--noche);
    background-repeat: no-repeat;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--sodio);
    outline-offset: 3px;
    border-radius: 2px;
}

.sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.saltar {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 100;
    background: var(--sodio);
    color: var(--noche);
    padding: .6em 1em;
    font-weight: 700;
    border-radius: var(--radio);
    transition: top .2s;
}
.saltar:focus { top: 12px; }

.icono { flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* ---------- Estructura ---------- */

.seccion { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.seccion__interior,
.cabecera__interior,
.pie__interior,
.pie__legal,
.hero__interior {
    width: 100%;
    max-width: calc(var(--ancho) + 2 * var(--margen));
    margin-inline: auto;
    padding-inline: var(--margen);
}

.seccion__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    margin-bottom: clamp(24px, 4vw, 48px);
}
.seccion__pie { margin: 32px 0 0; }

.titulo-seccion {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4.75rem);
    line-height: .9;
    letter-spacing: -.005em;
}

.enlace {
    color: var(--sodio);
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.enlace:hover { color: var(--sodio-claro); }

.vacio {
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    padding: 32px;
    color: var(--hueso-suave);
}
.vacio p { margin: 0; }


/* Duotono: cualquier foto pasa a Noche (sombras) y Sodio (luces), así fotos de distintas fuentes son de la marca */
.duotono {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--sodio) 72%, var(--noche));
    isolation: isolate;
}
.duotono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.12) brightness(1.04);
    mix-blend-mode: multiply;
}
.duotono::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--noche);
    mix-blend-mode: lighten;
    pointer-events: none;
}

/* ---------- Botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .78em 1.2em;
    border: 1.5px solid transparent;
    border-radius: var(--radio);
    background: none;
    font-family: var(--f-texto);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.boton:active { transform: translateY(1px); }
.boton--grande { padding: .95em 1.45em; font-size: 1.05rem; }
.boton--ancho { width: 100%; }

.boton--accion { background: var(--sodio); color: var(--noche); }
.boton--accion:hover { background: var(--sodio-claro); }

.boton--fantasma { border-color: color-mix(in oklab, var(--hueso) 42%, transparent); color: var(--hueso); }
.boton--fantasma:hover { border-color: var(--hueso); background: color-mix(in oklab, var(--hueso) 8%, transparent); }

.boton--claro { background: var(--hueso); color: var(--noche); }
.boton--claro:hover { background: #fff; }

.boton--oscuro { background: var(--noche); color: var(--hueso); }
.boton--oscuro:hover { background: var(--noche-alta); }

.boton--apagado {
    border: 1.5px dashed var(--linea-fuerte);
    color: var(--bruma);
    cursor: not-allowed;
}

.boton[disabled] { opacity: .6; cursor: progress; }

/* ---------- Encabezado ---------- */

.cabecera {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: var(--alto-cabecera);
    transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.cabecera--solida,
.cabecera.es-solida {
    background: color-mix(in oklab, var(--noche) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 var(--linea);
}
.cabecera__interior {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
}
.cabecera__marca { position: relative; z-index: 2; }
.cabecera__marca img { height: 80px; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__lista, .nav__redes { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav__lista { gap: 4px; }
.nav__lista a {
    position: relative;
    display: block;
    padding: .55em .7em;
    font-weight: 600;
    font-size: .975rem;
    text-decoration: none;
    color: var(--hueso-suave);
    transition: color .2s;
}
.nav__lista a:hover, .nav__lista a[aria-current] { color: var(--hueso); }
/* Subrayado recto: fijo en la página actual, crece de izquierda a derecha al pasar el mouse */
.nav__lista a::after,
.filtro::after {
    content: '';
    position: absolute;
    left: .6em; right: .6em; bottom: -2px;
    height: 2px;
    background: var(--sodio);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.nav__lista a:hover::after,
.nav__lista a[aria-current]::after,
.filtro[aria-pressed="true"]::after { transform: scaleX(1); }
.filtro:not([aria-pressed="true"]):hover::after { transform: scaleX(.4); background: var(--linea-fuerte); }
.nav__redes { gap: 2px; }
.nav__redes a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--hueso-suave); border-radius: 50%; }
.nav__redes a:hover { color: var(--sodio); }

.cabecera__menu {
    display: none;
    margin-left: auto;
    width: 46px; height: 46px;
    place-items: center;
    background: none;
    border: 0;
    color: var(--hueso);
    cursor: pointer;
}
.cabecera__menu .icono { width: 26px; height: 26px; }
.cabecera__menu-cerrar { display: none; }

@media (max-width: 760px) {
    :root { --alto-cabecera: 74px; }
    .cabecera__marca img { height: 58px; }
}

@media (max-width: 1000px) {
    .cabecera__menu { display: grid; position: relative; z-index: 2; }
    .nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        padding: 96px var(--margen) 48px;
        background: var(--noche);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
    }
    .menu-abierto .nav { opacity: 1; visibility: visible; }
    /* backdrop-filter convierte al encabezado en contenedor de los fixed: con el menú abierto se apaga */
    .menu-abierto .cabecera { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--noche); }
    .menu-abierto .cabecera__menu-abrir { display: none; }
    .menu-abierto .cabecera__menu-cerrar { display: block; }
    .menu-abierto { overflow: hidden; }
    .nav__lista { flex-direction: column; align-items: flex-start; gap: 0; }
    .nav__lista a {
        font-family: var(--f-display);
        font-weight: 800;
        font-size: clamp(2.2rem, 9vw, 3.2rem);
        line-height: 1.05;
        padding: .12em 0;
        color: var(--hueso);
    }
    .nav__lista a[aria-current] { color: var(--sodio); }
    .nav__lista a::after { left: 0; right: auto; width: 1.6em; bottom: 4px; height: 3px; }
    .nav__lista a:hover::after { transform: scaleX(0); }
    .nav__lista a[aria-current]::after { transform: scaleX(1); }
}

/* ---------- Hero ----------
   Un carrusel con los próximos shows. Cada show es una "diapo" (texto + entrada),
   todas apiladas en la misma celda de la grilla para que el alto no salte al pasar.
   Abajo, el talonario: una tira de talones con las fechas que sirve para navegar,
   con el avance del pase dibujado como una línea recta de 2px. */

.hero {
    /* Medidas de la raya y el caballo: el contenido se acomoda para que el caballo nunca pise la entrada */
    --raya-base: clamp(16px, 4vh, 44px);
    --raya-alto: clamp(80px, 13vw, 190px);
    --caballo-alto: clamp(52px, 6.6vw, 100px);
    --hero-pie: clamp(190px, 30vh, 300px);
    /* Altura de la cabeza del caballo parado en la cresta (la cresta está a ~1/3 del alto de la raya) */
    --caballo-tope: calc(var(--raya-base) + var(--raya-alto) * .68 + var(--caballo-alto));
    --ancho-entrada: clamp(200px, min(20vw, 34vh), 300px);
    --pie-alto: 68px;
    --pase: 7s; /* cuánto queda cada show en pantalla */
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: max(620px, 100svh);
    padding: calc(var(--alto-cabecera) + 40px) 0 var(--hero-pie);
    overflow: hidden;
}
.js-anima [data-hero-titulo],
.js-anima [data-parte],
.js-anima [data-entrada],
.js-anima [data-parte-pie] { visibility: hidden; }
.js-anima .hero__raya svg { clip-path: inset(0 100% 0 0); }
.hero.pausado .hero__foto img { animation-play-state: paused; }
.hero__fondos { position: absolute; inset: 0; z-index: -2; }
.hero__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero__foto.es-visible { opacity: 1; }
.hero__foto img { animation: ken-burns 32s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes ken-burns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.hero__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--noche) 0%, color-mix(in oklab, var(--noche) 74%, transparent) 44%, color-mix(in oklab, var(--noche) 18%, transparent) 80%),
        linear-gradient(0deg, var(--noche) 4%, color-mix(in oklab, var(--noche) 40%, transparent) 30%, transparent 55%),
        linear-gradient(180deg, color-mix(in oklab, var(--noche) 70%, transparent), transparent 22%);
}
.hero__interior {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

/* Diapos apiladas: solo la activa se ve (main.js anima el cambio) */
.hero__diapos { display: grid; min-width: 0; }
.hero__diapo {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
    min-width: 0;
    visibility: hidden;
}
.hero__diapo.es-activa { visibility: visible; }
.hero__texto { min-width: 0; }

/* Con carrusel, el talonario va abajo a la izquierda, al lado de la entrada: el texto le deja lugar */
.hero--carrusel .hero__diapos { grid-row: 1 / 3; grid-column: 1; }
.hero--carrusel .hero__texto { padding-bottom: calc(var(--pie-alto) + clamp(28px, 4.5vh, 48px)); }

.hero__antetitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 .5em;
    color: var(--sodio);
    font-weight: 600;
    font-size: 1.05rem;
}
.hero__antetitulo .sello { font-size: .8rem; }
.hero__titulo {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(3.4rem, min(10vw, 17vh), 9.5rem);
    line-height: .84;
    letter-spacing: -.012em;
    text-transform: uppercase;
    margin: 0 0 .2em;
    max-width: 11ch;
    overflow-wrap: break-word;
}
/* Nombres largos ("Viuda e hijas de Roque Enroll"): más chicos y más anchos, para no pasar de 3 líneas */
.hero__titulo--largo { font-size: clamp(2.8rem, min(6.6vw, 12vh), 6.4rem); max-width: 15ch; line-height: .88; }
.hero__titulo--marca { text-transform: none; max-width: 9ch; }
.hero__cuando {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.hero__donde {
    display: flex;
    align-items: center;
    gap: .4em;
    margin: .2em 0 0;
    color: var(--hueso-suave);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.hero__donde .icono { color: var(--sodio); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Cuenta regresiva en vivo ----------
   Talón de entrada: celdas separadas por el mismo troquelado punteado de la
   cartelera; los segundos van en sodio y cada número entra desde arriba. */
.cuenta { display: grid; justify-items: start; gap: 10px; }
.cuenta__ante, .cuenta__ahora {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bruma);
}
.cuenta__ahora { font-size: .85rem; color: var(--hueso); }
.cuenta__vivo {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sodio);
}
.cuenta__vivo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--sodio);
    animation: cuenta-latido 2s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes cuenta-latido {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(3.2); opacity: 0; }
}
.cuenta__celdas {
    display: flex;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: color-mix(in oklab, var(--noche) 60%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cuenta__celda {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-width: 4.6rem;
    padding: 12px 14px 10px;
    overflow: hidden;
}
.cuenta__celda + .cuenta__celda { border-left: 1px dashed var(--linea-fuerte); }
.cuenta__num {
    display: block;
    min-width: 2ch;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    line-height: .85;
    text-align: center;
    color: var(--hueso);
    font-variant-numeric: tabular-nums;
}
.cuenta__celda--s .cuenta__num { color: var(--sodio); }
.cuenta__unidad {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bruma);
}
.cuenta__nota { font-size: .85rem; color: var(--bruma); }
@media (max-width: 480px) {
    .cuenta__celda { min-width: 0; flex: 1; padding: 10px 8px 9px; }
    .cuenta__celdas { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cuenta__vivo::after { animation: none; }
}
/* La entrada: flyer arriba, troquel punteado con dos muescas y la cuenta regresiva en el talón */
.hero__entrada {
    --corte: calc(var(--ancho-entrada) * 1.25); /* el flyer es 4:5 */
    width: var(--ancho-entrada);
    margin-bottom: max(0px, calc(var(--caballo-tope) + 24px - var(--hero-pie)));
    border-radius: 6px;
    background: color-mix(in oklab, var(--noche-alta) 84%, transparent);
    box-shadow: inset 0 0 0 1px var(--linea);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Las muescas son agujeros de verdad (se ve la foto de atrás), no círculos pintados */
    -webkit-mask:
        radial-gradient(circle 10px at 0 var(--corte), transparent 9.5px, #000 10px),
        radial-gradient(circle 10px at 100% var(--corte), transparent 9.5px, #000 10px);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 10px at 0 var(--corte), transparent 9.5px, #000 10px),
        radial-gradient(circle 10px at 100% var(--corte), transparent 9.5px, #000 10px);
    mask-composite: intersect;
}
.hero__flyer {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}
.hero__flyer:focus-visible { outline-offset: -4px; }
.hero__flyer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.hero__flyer:hover img { transform: scale(1.04); }
/* Sello de goma sobre el flyer: agotado o nueva fecha */
.hero__sello {
    position: absolute;
    top: 18px;
    right: 14px;
    padding: .08em .45em .02em;
    border: 3px solid currentColor;
    border-radius: 4px;
    background: color-mix(in oklab, var(--noche) 55%, transparent);
    color: var(--bengala-texto);
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .03em;
    transform: rotate(-7deg);
}
.hero__sello--reprogramado { color: var(--sodio); }
.hero__cuenta {
    margin: 0;
    padding: 14px 14px 16px;
    border-top: 2px dashed var(--linea-fuerte);
    color: var(--bruma);
    font-size: .95rem;
}
.hero__cuenta:empty { display: none; }
.hero__entrada .cuenta { justify-items: stretch; gap: 8px; }
.hero__entrada .cuenta__celdas { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero__entrada .cuenta__celda { flex: 1; min-width: 0; padding: 2px 2px 0; }
.hero__entrada .cuenta__num { font-size: clamp(1.7rem, 2.3vw, 2.3rem); }

/* Talonario: un talón por show, separados por troquel; el activo lleva la línea de avance */
.hero__pie {
    grid-row: 2;
    grid-column: 1;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 16px;
    min-width: 0;
    height: var(--pie-alto);
    /* Termina antes de la entrada y antes de donde se para el caballo (~73% del ancho de la pantalla),
       por si en pantallas bajas el talonario queda a la altura del caballo */
    width: min(
        100% - var(--ancho-entrada) - 48px,
        73vw - var(--caballo-alto) * .66 - 20px - max(var(--margen), (100vw - var(--ancho)) / 2)
    );
    border-top: 1px solid var(--linea-fuerte);
}
.talonario { display: flex; flex: 1; min-width: 0; }
.talon {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 230px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: 4px 7px;
    padding: 6px 14px 0;
    background: none;
    border: 0;
    color: var(--bruma);
    text-align: left;
    cursor: pointer;
    transition: color .25s;
}
.talon:first-child { padding-left: 0; }
.talon + .talon { border-left: 2px dashed var(--linea); }
.talon:hover { color: var(--hueso-suave); }
.talon:focus-visible { outline-offset: -2px; }
.talon[aria-current] { color: var(--hueso); }
.talon__dia {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 2rem;
    line-height: .8;
    font-variant-numeric: tabular-nums;
}
.talon__mes { align-self: end; font-size: .8rem; font-weight: 700; line-height: 1; }
.talon[aria-current] .talon__mes { color: var(--sodio); }
.talon__titulo {
    grid-column: 1 / -1;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.talon__avance {
    position: absolute;
    top: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--sodio);
    transform: scaleX(0);
    transform-origin: left;
}
.talon:first-child .talon__avance { left: 0; }
.talon[aria-current] .talon__avance { transform: scaleX(1); }
/* Mientras el pase corre, la línea se llena en lo que dura el show en pantalla; al completarse, pasa al siguiente */
.hero[data-pasando] .talon[aria-current] .talon__avance { animation: talon-avance var(--pase) linear both; }
.hero.esta-quieto .talon[aria-current] .talon__avance { animation-play-state: paused; }
@keyframes talon-avance {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero__controles { display: flex; align-items: center; gap: 6px; flex: none; }
.hero__control {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid color-mix(in oklab, var(--hueso) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in oklab, var(--noche) 40%, transparent);
    color: var(--hueso);
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.hero__control:hover { border-color: var(--hueso); background: color-mix(in oklab, var(--hueso) 10%, transparent); }
.hero__control .icono { width: 18px; height: 18px; }
.hero__control .icono-play { display: none; }
.hero:not([data-pasando]) .icono-pausa { display: none; }
.hero:not([data-pasando]) .icono-play { display: block; }

.hero__raya {
    position: absolute;
    left: 0; right: 0;
    bottom: var(--raya-base);
    height: var(--raya-alto);
    color: var(--hueso);
    pointer-events: none;
}
.hero__raya svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__caballo {
    position: absolute;
    left: 0; top: 0;
    height: var(--caballo-alto);
    width: auto;
    opacity: 0;
    will-change: transform;
}

@media (max-width: 1100px) {
    .hero__titulo { font-size: clamp(3.2rem, 9vw, 7rem); }
    .talon { padding-inline: 10px; }
}

@media (max-width: 760px) {
    /* El contenido se apoya sobre la raya: arriba queda la foto, sin franja vacía en el medio */
    .hero { --hero-pie: calc(var(--caballo-tope) + 28px); --pie-alto: 62px; }
    .hero__diapo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .hero--carrusel .hero__diapos { grid-row: 1; }
    .hero--carrusel .hero__texto { padding-bottom: 0; }
    .hero__velo {
        background:
            linear-gradient(0deg, var(--noche) 8%, color-mix(in oklab, var(--noche) 62%, transparent) 60%, color-mix(in oklab, var(--noche) 72%, transparent));
    }
    .hero__titulo { font-size: clamp(2.9rem, 15vw, 4.8rem); }
    .hero__titulo--largo { font-size: clamp(2.4rem, 11vw, 3.6rem); }
    .hero__acciones { flex-wrap: nowrap; margin-top: 22px; }
    .hero__acciones .boton--accion { flex: 1 1 auto; }
    /* WhatsApp queda como botón cuadrado con el ícono: el texto sigue para lectores de pantalla */
    .hero__acciones .boton--fantasma { flex: none; padding-inline: .95em; }
    .hero__wa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* La entrada pierde el flyer y queda el talón con la cuenta */
    .hero__entrada { width: 100%; margin: 0; -webkit-mask: none; mask: none; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
    .hero__flyer { display: none; }
    .hero__cuenta { border-top: 0; padding: 12px 12px 14px; }
    .hero__pie { grid-row: 2; width: auto; margin: 22px calc(-1 * var(--margen)) 0; padding-right: var(--margen); gap: 8px; }
    .talonario {
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding-left: var(--margen);
        scroll-padding-inline: var(--margen);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    .talonario::-webkit-scrollbar { display: none; }
    .talon { flex: 0 0 auto; width: 132px; scroll-snap-align: start; }
    .hero__control[data-mover] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__foto { transition: none; }
}

/* ---------- Cartelera (filas tipo programa de mano) ---------- */

.filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.filtro {
    position: relative;
    padding: .5em .75em;
    background: none;
    border: 0;
    color: var(--bruma);
    font-weight: 600;
    cursor: pointer;
    transition: color .2s;
}
.filtro:hover { color: var(--hueso); }
.filtro[aria-pressed="true"] { color: var(--hueso); }

/* En celular los filtros van en una sola fila que se desliza de costado, de borde a borde */
@media (max-width: 760px) {
    .filtros {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--margen));
        padding: 0 var(--margen) 6px;
        scroll-padding-inline: var(--margen);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--margen), #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 var(--margen), #000 calc(100% - 40px), transparent);
    }
    .filtros::-webkit-scrollbar { display: none; }
    .filtro { flex: none; }
    .filtro:first-child { margin-left: -.75em; }
}

.cartelera { padding-top: clamp(24px, 4vw, 56px); }
.programa { list-style: none; margin: 0; padding: 0; }
.programa > .funcion:first-child { border-top: 1px solid var(--linea); }
.funcion {
    --talon: 92px;
    --hueco: clamp(16px, 2.6vw, 36px);
    position: relative;
    display: grid;
    grid-template-columns: var(--talon) 116px minmax(0, 1fr) auto;
    grid-template-areas: "fecha flyer datos accion";
    align-items: center;
    gap: 0 var(--hueco);
    padding: 22px 16px;
    margin-inline: -16px;
    border-bottom: 1px solid var(--linea);
    transition: background-color .3s;
}
.funcion:hover { background: color-mix(in oklab, var(--noche-alta) 75%, transparent); }
.funcion[hidden] { display: none; }
/* La fecha como talón de entrada: un troquelado de punta a punta de la fila, con una muesca
   arriba y otra abajo. Entre dos filas, las dos medias muescas forman el agujero completo. */
.funcion::before,
.funcion::after {
    content: '';
    position: absolute;
    left: calc(16px + var(--talon) + var(--hueco) / 2);
    pointer-events: none;
}
.funcion::before {
    top: 12px; bottom: 12px;
    margin-left: -1px;
    border-left: 2px dashed var(--linea-fuerte);
}
.funcion::after {
    top: -1px; bottom: -1px;
    width: 20px;
    margin-left: -10px;
    background:
        radial-gradient(circle at 50% 0, var(--noche) 9px, transparent 9.5px),
        radial-gradient(circle at 50% 100%, var(--noche) 9px, transparent 9.5px);
}
.funcion__fecha {
    grid-area: fecha;
    display: grid;
    justify-items: start;
    align-self: stretch;
    align-content: center;
    line-height: 1;
}
.funcion__dia {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 4.2rem;
    line-height: .85;
    font-variant-numeric: tabular-nums;
}
.funcion__mes { margin-top: 6px; color: var(--sodio); font-weight: 700; font-size: 1.05rem; }
.funcion__semana { margin-top: 3px; color: var(--bruma); font-size: .85rem; }

.funcion__flyer { grid-area: flyer; display: block; border-radius: 3px; overflow: hidden; background: var(--superficie); }
.funcion__flyer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; }
.funcion:hover .funcion__flyer img { transform: scale(1.06); }

.funcion__datos { grid-area: datos; min-width: 0; }
.funcion__etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 6px;
    font-size: .875rem;
    color: var(--bruma);
}
.funcion__ciclo { color: var(--sodio-claro); text-decoration: none; }
.funcion__ciclo:hover { text-decoration: underline; }
.funcion__titulo {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.7rem);
    line-height: .95;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.funcion__titulo a,
.subraya-raya {
    display: inline-block;
    text-decoration: none;
    position: relative;
    padding-bottom: 6px;
    margin-bottom: -6px;
}
/* La raya se dibuja debajo del título al pasar el mouse */
.funcion__titulo a::after,
.subraya-raya::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--sodio);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .55s cubic-bezier(.65, 0, .35, 1);
}
.funcion:hover .funcion__titulo a::after,
.funcion__titulo a:focus-visible::after,
.subraya-raya:hover::after { clip-path: inset(0 0 0 0); }

.funcion__lugar { margin: 0; color: var(--hueso-suave); font-size: .975rem; }
.funcion__lugar .icono { color: var(--bruma); }
.funcion__precio { margin: 4px 0 0; color: var(--bruma); font-size: .925rem; }
.funcion__nota { margin: 6px 0 0; color: var(--sodio-claro); font-size: .925rem; }
.funcion__accion { grid-area: accion; }

.funcion--suspendido .funcion__flyer img { filter: grayscale(1) brightness(.6); }
.funcion--suspendido .funcion__titulo,
.funcion--suspendido .funcion__dia { color: var(--bruma); }
.funcion--suspendido .funcion__titulo a { text-decoration: line-through; text-decoration-thickness: 2px; }

.sello {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    line-height: 1.5;
}
.sello--agotado, .sello--suspendido { color: var(--bengala-texto); }
.sello--reprogramado { color: var(--sodio); }
.sello--abierto { color: var(--sodio); }
.sello--cerrado, .sello--sorteado { color: var(--bruma); }

.programa__vacio { padding: 28px 0; color: var(--bruma); }

@media (max-width: 760px) {
    .funcion {
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-areas:
            "flyer fecha"
            "flyer datos"
            "flyer accion";
        align-items: start;
        gap: 6px 18px;
        padding: 20px 0;
        margin-inline: 0;
    }
    .funcion:hover { background: none; }
    /* En celular el talón se corta en horizontal: la fecha arriba, troquelada del resto */
    .funcion::before, .funcion::after { display: none; }
    .funcion__fecha {
        display: flex;
        align-items: baseline;
        gap: 7px;
        align-self: start;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 2px dashed var(--linea-fuerte);
    }
    .funcion__dia { font-size: 2.5rem; line-height: .85; }
    .funcion__mes { margin: 0; font-size: 1.05rem; }
    .funcion__semana { margin: 0; font-size: .9rem; }
    .funcion__flyer { align-self: start; }
    .funcion__titulo { font-size: 1.6rem; }
    .funcion__accion { margin-top: 8px; }
    .funcion__accion .boton { padding: .6em 1em; font-size: .925rem; }
}

/* ---------- Banda de sorteo (invertida: fondo Sodio) ---------- */

.sorteo-banda { background: var(--sodio); color: var(--noche); }
.sorteo-banda__interior {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px clamp(20px, 4vw, 48px);
    max-width: calc(var(--ancho) + 2 * var(--margen));
    margin-inline: auto;
    padding: clamp(28px, 4vw, 44px) var(--margen);
}
.sorteo-banda__foto {
    width: clamp(96px, 12vw, 150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--noche);
}
.sorteo-banda__foto img { mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.15); opacity: .85; }
.sorteo-banda__foto::after { display: none; }
.sorteo-banda__ante { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; }
.sorteo-banda__titulo {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    line-height: .92;
    text-transform: uppercase;
}
.sorteo-banda__premio { margin: 8px 0 0; font-weight: 600; }
.sorteo-banda .boton--accion { background: var(--noche); color: var(--hueso); }
.sorteo-banda .boton--accion:hover { background: var(--noche-alta); }

@media (max-width: 760px) {
    .sorteo-banda__interior { grid-template-columns: auto minmax(0, 1fr); }
    .sorteo-banda__interior > .boton { grid-column: 1 / -1; }
}

/* ---------- Canal y beneficios ---------- */

.canal__grilla {
    position: relative;
    padding: clamp(28px, 5vw, 64px);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, color-mix(in oklab, var(--sodio) 14%, transparent), transparent 70%),
        var(--noche-alta);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sodio) 22%, transparent);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.canal__texto p { color: var(--hueso-suave); font-size: 1.125rem; max-width: 34em; }
.canal__texto .titulo-seccion { margin-bottom: 20px; }
.canal__texto .boton { margin-top: 8px; }
.beneficios { list-style: none; margin: 0; padding: 0; }
.beneficio {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--linea);
}
.beneficio:last-child { border-bottom: 1px solid var(--linea); }
.beneficio__icono {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--noche);
    color: var(--sodio);
}
.beneficio__icono .icono { width: 24px; height: 24px; }
.beneficio__logo { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: var(--hueso); }
.beneficio__titulo { font-size: 1.15rem; font-weight: 700; }
.beneficio__comercio { margin: 2px 0 0; color: var(--sodio); font-size: .925rem; font-weight: 600; }
.beneficio__desc { margin: 4px 0 0; color: var(--hueso-suave); font-size: .975rem; }

@media (max-width: 860px) {
    .canal__grilla { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .canal__grilla { padding: 28px 20px 12px; border-radius: 10px; }
    .beneficio { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
    .beneficio__icono, .beneficio__logo { width: 44px; height: 44px; }
    .beneficio__icono .icono { width: 20px; height: 20px; }
    .beneficio:last-child { border-bottom: 0; }
}

/* ---------- Ya pasó (mosaico) ---------- */

.mosaico {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 17vw, 230px);
    gap: 10px;
}
.mosaico__item { position: relative; border-radius: 4px; overflow: hidden; background: var(--superficie); }
.mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
/* El mosaico se adapta a la cantidad de shows: nunca deja huecos */
.mosaico--1 .mosaico__item { grid-column: 1 / -1; }
.mosaico--2 .mosaico__item { grid-column: span 2; grid-row: span 2; }
.mosaico--3 .mosaico__item:not(:first-child),
.mosaico--4 .mosaico__item:last-child { grid-column: span 2; }
.mosaico__item a { display: block; height: 100%; color: var(--hueso); text-decoration: none; }
.mosaico__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.7) brightness(.82);
    transition: filter .5s, transform .7s ease;
}
.mosaico__item a:hover img, .mosaico__item a:focus-visible img { filter: saturate(1) brightness(.95); transform: scale(1.04); }
.mosaico__datos {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 2px;
    padding: 40px 16px 14px;
    background: linear-gradient(0deg, color-mix(in oklab, var(--noche) 92%, transparent), transparent);
}
.mosaico__titulo {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1;
    text-transform: uppercase;
}
.mosaico__item--grande .mosaico__titulo { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.mosaico__meta { color: var(--hueso-suave); font-size: .85rem; }

@media (max-width: 760px) {
    .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
    .mosaico__item--grande { grid-row: span 1; }
}

/* ---------- Novedades ---------- */

.notas {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    /* La destacada ocupa las dos filas: la primera nota chica toma su alto y la segunda va justo debajo */
    grid-template-rows: auto 1fr;
    gap: 32px clamp(24px, 4vw, 56px);
}
.nota:not(.nota--destacada) + .nota { padding-top: 32px; border-top: 1px solid var(--linea); }
.nota { display: grid; gap: 14px; align-content: start; }
.nota--destacada { grid-row: span 2; }
.nota:not(.nota--destacada) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.nota__foto { display: block; border-radius: 4px; overflow: hidden; background: var(--superficie); }
.nota__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s ease; }
.nota:hover .nota__foto img { transform: scale(1.04); }
.nota__fecha { display: block; margin-bottom: 4px; color: var(--sodio); font-size: .875rem; font-weight: 600; }
.nota__titulo { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.nota--destacada .nota__titulo {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: .98;
}
.nota__titulo a { text-decoration: none; }
.nota__titulo a:hover { color: var(--sodio-claro); }
.nota__resumen { margin: 8px 0 0; color: var(--hueso-suave); font-size: .975rem; }

@media (max-width: 860px) {
    .notas { grid-template-columns: 1fr; }
    .nota--destacada { grid-row: auto; }
}

/* ---------- Bloques partidos (foto + texto) ---------- */

.partido {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}
.partido__foto { border-radius: 4px; aspect-ratio: 4 / 5; }
.partido__texto p { color: var(--hueso-suave); font-size: 1.125rem; max-width: 34em; }
.partido__texto .titulo-seccion { margin-bottom: 20px; }

.lista-raya { list-style: none; margin: 8px 0 32px; padding: 0; }
.lista-raya li {
    position: relative;
    padding: 10px 0 10px 40px;
    border-bottom: 1px solid var(--linea);
    font-weight: 600;
}
.lista-raya li::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 22px; height: 2px;
    margin-top: -1px;
    background: var(--sodio);
}

@media (max-width: 860px) {
    .partido { grid-template-columns: 1fr; }
    .partido__foto { aspect-ratio: 16 / 10; }
}

/* ---------- Nosotros ---------- */

.nosotros {
    position: relative;
    isolation: isolate;
    padding-block: clamp(96px, 14vw, 180px);
    overflow: hidden;
}
.nosotros__fondo { position: absolute; inset: 0; z-index: -2; }
.nosotros::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--noche) 25%, color-mix(in oklab, var(--noche) 55%, transparent) 70%, color-mix(in oklab, var(--noche) 20%, transparent));
}
.nosotros__texto { max-width: 36rem; }
.nosotros__texto .titulo-seccion { margin-bottom: 24px; }
.nosotros__texto p { font-size: 1.2rem; line-height: 1.65; color: var(--hueso-suave); }

/* ---------- Sponsors ---------- */

/* La sección cierra con la banda del carrusel: el borde inferior de la sección es el de la banda */
.sponsors { padding-top: clamp(48px, 7vw, 88px); padding-bottom: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* Rótulo: etiqueta en mayúsculas seguida de una raya recta de 2px que corre hasta el borde */
.sponsors__titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 clamp(24px, 3vw, 36px);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sodio);
}
.sponsors__titulo::after {
    content: '';
    flex: 1;
    height: 2px;
    background: color-mix(in srgb, var(--hueso) 14%, transparent);
}

/* Lista fija (detalle del evento) */
.sponsors__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px clamp(28px, 5vw, 64px);
}

/* Marca: logo en gris o nombre en tipografía de cartel; al pasar el mouse toma color
   y aparece debajo una raya recta de 2px en Sodio (como el subrayado del menú) */
.sponsors__lista a,
.carrusel__pista a { position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.sponsors__lista a::after,
.carrusel__pista a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: var(--sodio);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.sponsors__lista a:hover::after,
.sponsors__lista a:focus-visible::after,
.carrusel__pista a:hover::after,
.carrusel__pista a:focus-visible::after { transform: scaleX(1); }
.sponsors__lista img,
.carrusel__pista img {
    display: block;
    max-height: clamp(40px, 5vw, 60px);
    width: auto;
    max-width: 180px;
    filter: grayscale(1) brightness(1.6);
    opacity: .65;
    transition: filter .35s, opacity .35s;
}
.sponsors__lista a:hover img,
.carrusel__pista li:hover img,
.carrusel__pista a:focus-visible img { filter: none; opacity: 1; }
.sponsors__nombre {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    line-height: 1;
    color: color-mix(in srgb, var(--hueso) 55%, transparent);
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: color .35s;
}
.sponsors__lista a:hover .sponsors__nombre,
.carrusel__pista li:hover .sponsors__nombre,
.carrusel__pista a:focus-visible .sponsors__nombre { color: var(--hueso); }

/* Carrusel de la portada: una banda a todo el ancho, partida en casilleros como una tira de entradas.
   La tira está duplicada y se desplaza la mitad de su ancho, así vuelve al inicio sin salto.
   Bordes desvanecidos; se frena al pasar el mouse o al tabular. */
.carrusel {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--linea);
    background: color-mix(in srgb, var(--noche-alta) 55%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carrusel__pista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: max-content;
    animation: carrusel var(--carrusel-duracion, 40s) linear infinite;
}
/* Casilleros del mismo ancho mínimo, separados por una línea recta (sin gap: las dos mitades miden lo mismo) */
.carrusel__pista li {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(220px, 22vw, 340px);
    min-height: clamp(104px, 11vw, 148px);
    padding: 24px clamp(28px, 3.5vw, 56px);
    border-right: 1px solid var(--linea);
    transition: background-color .35s;
}
.carrusel__pista li:hover { background: color-mix(in srgb, var(--hueso) 4%, transparent); }
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista { animation-play-state: paused; }
@keyframes carrusel { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
    .carrusel__pista li { min-width: 180px; min-height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
    .carrusel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .carrusel__pista { animation: none; }
    .carrusel__pista [aria-hidden="true"] { display: none; }
}

/* ---------- Contacto y newsletter ---------- */

.contacto {
    position: relative;
    isolation: isolate;
    padding-block: clamp(72px, 10vw, 128px);
    overflow: hidden;
}
.contacto__fondo { position: absolute; inset: 0; z-index: -2; opacity: .35; }
.contacto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--noche), color-mix(in oklab, var(--noche) 80%, transparent) 40%, var(--noche));
}
.contacto__grilla {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}
.contacto__grilla--sola { grid-template-columns: minmax(0, 46rem); }
.contacto__bajada { color: var(--hueso-suave); margin: 16px 0 28px; max-width: 34em; }
.contacto__lateral { display: grid; gap: 28px; }
.newsletter {
    padding: clamp(24px, 3vw, 36px);
    background: var(--superficie);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--linea);
}
.newsletter__titulo {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: .95;
    margin-bottom: 10px;
}
.newsletter > p { color: var(--hueso-suave); }
.contacto__directo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contacto__directo a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--hueso-suave);
    text-decoration: none;
    font-weight: 600;
}
.contacto__directo a:hover { color: var(--sodio); }

@media (max-width: 860px) {
    .contacto__grilla { grid-template-columns: 1fr; }
}

/* ---------- Formularios ---------- */

.form { display: grid; gap: 16px; }
.form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: .925rem; color: var(--hueso-suave); }
.campo label small { font-weight: 400; color: var(--bruma); }
.requerido { color: var(--sodio); font-weight: 700; }
.form__nota { margin: 0; font-size: .85rem; color: var(--bruma); }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: .78em .9em;
    background: color-mix(in oklab, var(--noche-alta) 70%, transparent);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    color: var(--hueso);
    transition: border-color .2s, background-color .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bruma) 50%), linear-gradient(135deg, var(--bruma) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4em; }
.campo select option { background: var(--noche); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--sodio); background: var(--noche-alta); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--bengala); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .925rem; color: var(--hueso-suave); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sodio); flex: none; }
.check a { color: var(--hueso); }
.form__error { margin: 0; padding: 10px 14px; border-left: 3px solid var(--bengala); background: color-mix(in oklab, var(--bengala) 12%, transparent); color: var(--hueso); font-size: .95rem; }
.form__ok {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: var(--radio);
    background: color-mix(in oklab, var(--sodio) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sodio) 40%, transparent);
    color: var(--hueso);
    font-weight: 600;
}
.form__ok .icono { color: var(--sodio); width: 24px; height: 24px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
    .form__fila { grid-template-columns: 1fr; }
}

/* ---------- Pie ---------- */

.pie { position: relative; background: var(--noche-honda); padding-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--linea); }
.pie__interior {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 40px;
    padding-bottom: 48px;
}
.pie__cierre {
    max-width: calc(var(--ancho) + 2 * var(--margen));
    margin: 0 auto clamp(40px, 6vw, 72px);
    padding-inline: var(--margen);
}
.pie__frase {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(3.2rem, 11vw, 9.5rem);
    line-height: .95;
    letter-spacing: -.012em;
    text-transform: uppercase;
    color: var(--hueso);
}
.pie__frase span { display: block; color: var(--sodio); }
.pie__marca { display: flex; gap: 22px; align-items: flex-start; }
.pie__marca img { width: auto; height: 104px; flex: none; }
.pie__marca p { margin: 0; max-width: 26em; color: var(--bruma); }
.pie__columna h2 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.pie__columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie__columna a, .pie__columna span { display: inline-flex; align-items: center; gap: 8px; color: var(--bruma); text-decoration: none; font-size: .95rem; }
.pie__columna a:hover { color: var(--hueso); }
.pie__redes { display: flex !important; gap: 6px !important; margin-top: 16px !important; }
.pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.pie__redes a:hover { color: var(--sodio); box-shadow: inset 0 0 0 1px var(--sodio); }
.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 20px 28px;
    border-top: 1px solid var(--linea);
    color: var(--bruma);
    font-size: .85rem;
}
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--hueso-suave); margin-left: 10px; }
.pie__legal p > a:first-child { margin-left: 10px; }

@media (max-width: 860px) {
    .pie__interior { grid-template-columns: 1fr 1fr; }
    .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .pie__interior { grid-template-columns: 1fr; }
    .pie__marca { flex-direction: column; }
}

/* ---------- WhatsApp flotante ---------- */

.wa-flotante {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .55);
    text-decoration: none;
    animation: wa-aparece .5s cubic-bezier(.2, .8, .2, 1) 2.4s both;
    transition: transform .2s;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante .icono { width: 30px; height: 30px; }
.wa-flotante__texto {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    padding: 6px 12px;
    border-radius: var(--radio);
    background: var(--hueso);
    color: var(--noche);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    opacity: 0;
    transform: translate(6px, -50%);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.wa-flotante:hover .wa-flotante__texto,
.wa-flotante:focus-visible .wa-flotante__texto { opacity: 1; transform: translate(0, -50%); }
body:not(.pagina-inicio) .wa-flotante { animation-delay: .4s; }
@keyframes wa-aparece {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Volver arriba ---------- */

.arriba {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 39;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: color-mix(in oklab, var(--noche-alta) 88%, transparent);
    color: var(--hueso);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility 0s linear .25s, background-color .2s, color .2s, border-color .2s;
}
/* Encima del botón de WhatsApp (58px), centrado con él */
.arriba--con-wa { right: 25px; bottom: calc(88px + env(safe-area-inset-bottom)); }
.arriba.es-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s, transform .25s, visibility 0s, background-color .2s, color .2s, border-color .2s;
}
.arriba:hover { background: var(--sodio); border-color: var(--sodio); color: var(--noche); }
.arriba:focus-visible { outline: 2px solid var(--sodio); outline-offset: 3px; }
.arriba .icono { width: 22px; height: 22px; }
#principal:focus { outline: none; }

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 60;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: var(--radio);
    background: var(--hueso);
    color: var(--noche);
    font-weight: 600;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.toast.es-visible { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   Páginas internas
   ===================================================================== */

.pagina-cabeza {
    padding: calc(var(--alto-cabecera) + clamp(40px, 7vw, 88px)) 0 clamp(24px, 4vw, 48px);
}
.pagina-cabeza__titulo {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: .86;
    letter-spacing: -.01em;
}
.pagina-cabeza__bajada { margin: 18px 0 0; max-width: 38em; color: var(--hueso-suave); font-size: 1.15rem; }
.pagina-cabeza__bajada p:last-child { margin-bottom: 0; }
.cartelera--pagina { padding-top: 0; }
.seccion__dato { margin: 0; color: var(--bruma); }
.seccion__titulo-suelto { margin: 24px 0 28px; }
.seccion__titulo-suelto--separado { margin-top: clamp(56px, 8vw, 88px); }
.acciones-pie, .articulo__compartir { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .925rem; color: var(--bruma); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .6; }
.migas a { color: var(--hueso-suave); text-decoration: none; }
.migas a:hover { color: var(--sodio); }

/* ---------- Detalle de evento ---------- */

.pagina-cuerpo { padding-bottom: clamp(64px, 9vw, 120px); }

.evento {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
    padding-top: calc(var(--alto-cabecera) + clamp(32px, 5vw, 64px));
}
.evento__flyer {
    position: sticky;
    top: calc(var(--alto-cabecera) + 24px);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 0 1px var(--linea);
}
.evento__flyer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.evento__titulo {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(3rem, 7.5vw, 6.5rem);
    line-height: .86;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 4px 0 10px;
}
.evento__artista { margin: 0 0 20px; color: var(--hueso-suave); font-size: 1.2rem; }
.evento__etiquetas { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--bruma); font-size: .925rem; margin: 0; }
.evento__etiquetas a { color: var(--sodio-claro); }

.aviso {
    display: flex;
    gap: 14px;
    margin: 24px 0;
    padding: 16px 18px;
    border-left: 4px solid var(--sodio);
    background: var(--superficie);
    border-radius: 0 var(--radio) var(--radio) 0;
}
.aviso .icono { color: var(--sodio); width: 22px; height: 22px; margin-top: 2px; }
.aviso p { margin: 0; }
.aviso strong { display: block; }
.aviso--bengala { border-left-color: var(--bengala); }
.aviso--bengala .icono { color: var(--bengala-texto); }

.hechos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 28px 0;
    border-top: 1px solid var(--linea);
}
.hechos__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 0 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.hechos__item .icono { grid-row: span 2; color: var(--sodio); width: 22px; height: 22px; margin-top: 2px; }
.hechos dt { color: var(--bruma); font-size: .85rem; }
.hechos dd { margin: 0; font-weight: 600; }
.hechos dd a { color: var(--hueso); text-underline-offset: 3px; }
.hechos dd small { display: block; font-weight: 400; color: var(--hueso-suave); }

.evento__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.evento__cuenta { color: var(--bruma); font-size: .95rem; margin: 22px 0 0; }
.evento__cuenta b { color: var(--hueso); }

.bloque { margin-top: clamp(36px, 5vw, 56px); }
.bloque__titulo { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; margin-bottom: 18px; }

.texto-rico { font-size: 1.1rem; line-height: 1.7; color: var(--hueso-suave); max-width: 40em; }
.texto-rico h2 { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--hueso); margin: 1.4em 0 .5em; }
.texto-rico h3 { font-size: 1.25rem; color: var(--hueso); margin: 1.2em 0 .4em; }
.texto-rico a { color: var(--sodio); }
.texto-rico strong { color: var(--hueso); }
.texto-rico ul, .texto-rico ol { padding-left: 1.3em; margin: 0 0 1em; }
.texto-rico li { margin-bottom: .35em; }
.texto-rico blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 3px solid var(--sodio); font-size: 1.2em; color: var(--hueso); }

.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.punto { padding: 16px 18px; background: var(--superficie); border-radius: var(--radio); }
.punto h3 { font-size: 1.05rem; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.punto h3 .icono { color: var(--sodio); }
.punto p { margin: 4px 0 0; color: var(--hueso-suave); font-size: .925rem; }
.punto a { color: var(--sodio); font-size: .925rem; font-weight: 600; }

.galeria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 45%), 1fr));
    gap: 8px;
}
.galeria button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--superficie);
    border-radius: 3px;
    overflow: hidden;
    cursor: zoom-in;
}
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease, filter .3s; filter: saturate(.85); }
.galeria button:hover img { transform: scale(1.05); filter: none; }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; max-width: 820px; }
.video + .video { margin-top: 12px; }
.video button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video button img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s; }
.video button:hover img { opacity: 1; }
.video__play {
    position: absolute;
    left: 50%; top: 50%;
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: var(--sodio);
    color: var(--noche);
}
.video__play .icono { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-enlace { display: inline-flex; gap: 10px; align-items: center; padding: 14px 18px; background: var(--superficie); border-radius: var(--radio); color: var(--hueso); text-decoration: none; font-weight: 600; }
.video-enlace:hover { color: var(--sodio); }

.mas-shows { margin-top: clamp(56px, 8vw, 96px); }

@media (max-width: 860px) {
    /* En celular primero va lo que hace falta para decidir (título, fecha, lugar, comprar) y después el flyer:
       la info se "desarma" para que el flyer se intercale antes de la descripción */
    .evento { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .evento__info { display: contents; }
    .evento__info > .bloque { order: 2; }
    .evento__flyer { order: 1; position: static; width: 100%; max-width: 420px; margin-top: clamp(32px, 6vw, 48px); }
    .evento__titulo { font-size: clamp(3.4rem, 15vw, 5.5rem); }
    /* Datos en dos columnas (la fecha, más larga, ocupa el ancho): el botón de compra entra antes */
    .hechos { column-gap: 18px; margin: 20px 0; }
    .hechos__item:first-child { grid-column: 1 / -1; }
    .hechos__item { grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; }
    .hechos__item .icono { width: 19px; height: 19px; }
}
@media (max-width: 339px) {
    .hechos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .evento__acciones .boton { flex: 1 1 auto; }
}

/* ---------- Lightbox ---------- */

.lightbox {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: color-mix(in oklab, var(--noche-honda) 96%, transparent);
    color: var(--hueso);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; animation: lightbox-entra .3s ease; }
@keyframes lightbox-entra { from { opacity: 0; } }
.lightbox img { max-width: min(92vw, 1600px); max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 3px; }
.lightbox__boton {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in oklab, var(--hueso) 10%, transparent);
    color: var(--hueso);
    cursor: pointer;
}
.lightbox__boton:hover { background: color-mix(in oklab, var(--hueso) 20%, transparent); }
.lightbox__boton .icono { width: 26px; height: 26px; }
.lightbox__cerrar { top: 16px; right: 16px; }
.lightbox__anterior { left: 16px; top: 50%; margin-top: -26px; }
.lightbox__siguiente { right: 16px; top: 50%; margin-top: -26px; }
.lightbox__contador { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--bruma); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ---------- Archivo de shows pasados ---------- */

.archivo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 46%), 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}
.archivo a { display: block; text-decoration: none; }
.archivo__foto { border-radius: 4px; overflow: hidden; background: var(--superficie); }
.archivo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.75) brightness(.9); transition: filter .4s, transform .6s ease; }
.archivo a:hover .archivo__foto img { filter: none; transform: scale(1.04); }
.archivo__titulo { display: block; margin-top: 12px; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.archivo__meta { display: block; margin-top: 4px; color: var(--bruma); font-size: .875rem; }

.paginacion { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }

/* ---------- Novedad ---------- */

.articulo { max-width: 46rem; margin-inline: auto; padding-inline: var(--margen); }
.articulo__portada { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto 40px; padding-inline: var(--margen); }
.articulo__portada img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: 4px; }
.articulo .pagina-cabeza__titulo { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: .92; }

.lista-notas { display: grid; gap: clamp(28px, 4vw, 44px); }
.lista-notas .nota:not(.nota--destacada) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lista-notas .nota--destacada { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
@media (max-width: 760px) {
    .lista-notas .nota:not(.nota--destacada), .lista-notas .nota--destacada { grid-template-columns: 1fr; }
}

/* ---------- Ciclo ---------- */

.ciclo-cabeza { position: relative; isolation: isolate; overflow: hidden; }
.ciclo-cabeza__fondo { position: absolute; inset: 0; z-index: -2; opacity: .5; }
.ciclo-cabeza::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--noche) 5%, color-mix(in oklab, var(--noche) 50%, transparent)); }
.ciclo-cabeza__fechas { margin: 12px 0 0; color: var(--sodio); font-weight: 600; }

/* ---------- Sorteos ---------- */

.sorteos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.sorteo-tarjeta { display: grid; grid-template-rows: auto 1fr; background: var(--superficie); border-radius: 8px; overflow: hidden; }
.sorteo-tarjeta__foto { aspect-ratio: 16 / 9; }
.sorteo-tarjeta__cuerpo { display: grid; gap: 10px; align-content: start; padding: 22px; }
.sorteo-tarjeta h2 { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: .95; text-transform: uppercase; }
.sorteo-tarjeta h2 a { text-decoration: none; }
.sorteo-tarjeta p { margin: 0; color: var(--hueso-suave); }
.sorteo-tarjeta .boton { justify-self: start; margin-top: 6px; }

.sorteo {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}
.sorteo__foto { border-radius: 6px; aspect-ratio: 16 / 10; margin-bottom: 28px; }
.sorteo__caja { padding: clamp(22px, 3vw, 34px); background: var(--superficie); border-radius: 8px; position: sticky; top: calc(var(--alto-cabecera) + 24px); }
.sorteo__caja h2 { font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; line-height: .95; margin-bottom: 12px; }
.sorteo__cuenta { margin: 0 0 24px; color: var(--bruma); }
.sorteo__cuenta .cuenta__celdas { width: 100%; }
.sorteo__cuenta .cuenta__celda { flex: 1; min-width: 0; }
.sorteo__cuenta b { color: var(--hueso); }
.ganadores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ganadores li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: color-mix(in oklab, var(--sodio) 12%, transparent); border-radius: var(--radio); font-weight: 700; font-size: 1.1rem; }
.ganadores .icono { color: var(--sodio); }
@media (max-width: 860px) {
    .sorteo { grid-template-columns: 1fr; }
    .sorteo__caja { position: static; }
}

/* ---------- Preguntas frecuentes ---------- */

.faq { max-width: 52rem; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    flex: none;
    width: 14px; height: 14px;
    border-right: 2px solid var(--sodio);
    border-bottom: 2px solid var(--sodio);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--sodio-claro); }
.faq__respuesta { padding: 0 0 24px; color: var(--hueso-suave); font-size: 1.05rem; max-width: 44em; }

/* ---------- Contrataciones ---------- */

.servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.servicio__foto { border-radius: 4px; aspect-ratio: 4 / 3; margin-bottom: 16px; }
.servicio h3 { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
.servicio p { color: var(--hueso-suave); margin: 0; }
.trayectoria { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.trayectoria li { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; text-transform: uppercase; color: var(--hueso-suave); }
.trayectoria li:nth-child(3n+2) { color: var(--sodio); }

/* ---------- 404 ---------- */

.error-pagina { min-height: 80vh; display: grid; align-content: center; }
.error-pagina .boton { justify-self: start; margin-top: 24px; }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero__foto img { animation: none; }
}