/* ==========================================================================
   Disco Mad · estilo del blog de "Eventos"

   Hoja aparte (la cargan solo /eventos.html y las fichas de evento) para no
   tocar estilo.css. Usa las variables de marca (:root en estilo.css).

   Índice: galería de mosaicos con la info superpuesta sobre la foto, que se
   despliega al pasar el ratón (inspirado en html5up/Multiverse).
   Detalle: portada grande con el titular encima y el texto en columna ancha.
   ========================================================================== */

/* El catálogo lleva una retícula de puntos en el body (estilo.css). En Eventos
   y en las landings el fondo es la escena oscura o el blog con su propio ritmo,
   así que aquí se repone el fondo plano. */
body { background-image: none; }

/* --- Cabecera del blog ---------------------------------------------------- */
.blog-cab {
    padding: 50px 0 34px;
    border-bottom: 1px solid var(--linea);
    background:
        radial-gradient(130% 130% at 100% -10%, var(--accion-suave) 0%, transparent 52%),
        var(--fondo);
}
.blog-cab__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accion); margin: 0 0 14px;
}
.blog-cab__kicker::before { content: ""; width: 26px; height: 2px; background: var(--accion); border-radius: 2px; }
.blog-cab h1 {
    margin: 0; font-size: clamp(32px, 5.4vw, 52px); line-height: 1.02;
    letter-spacing: -.035em; color: var(--tinta);
}
.blog-cab__sub { margin: 14px 0 0; font-size: 19px; font-weight: 600; color: var(--tinta); }
.blog-cab__intro { margin: 12px 0 0; max-width: 660px; color: var(--tinta-media); font-size: 16.5px; line-height: 1.6; }

/* --- Galería de mosaicos (índice) ---------------------------------------- */
.blog-galeria {
    display: grid; gap: 16px; margin: 36px 0 10px;
    /* auto-fit: llena el ancho con los que haya (2, 3, 9…) sin dejar huecos. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 600px) { .blog-galeria { grid-template-columns: 1fr; gap: 14px; } }

.blog-item {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--radio);
    background: var(--barra); color: #fff; text-decoration: none;
    box-shadow: var(--sombra); isolation: isolate;
}

.blog-item__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 0; transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.blog-item__sinfoto {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, var(--barra-alta), var(--accion-oscura));
}
.blog-item::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(16, 11, 13, .88) 0%, rgba(16, 11, 13, .30) 48%, rgba(16, 11, 13, 0) 74%);
    transition: background .35s ease;
}
.blog-item__over {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px;
}
.blog-item__fecha {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: #fff; margin-bottom: 8px;
}
.blog-item__fecha::before { content: ""; width: 16px; height: 2px; background: var(--marca); }
.blog-item__titulo {
    margin: 0; font-size: 21px; font-weight: 800; line-height: 1.18; letter-spacing: -.015em;
    color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.blog-item__texto {
    margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s ease, opacity .32s ease, margin .32s ease;
}
.blog-item__mas {
    font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff;
    opacity: 0; transform: translateY(8px);
    transition: opacity .32s ease, transform .32s ease;
}
.blog-item__mas span { color: var(--marca); }

.blog-item:hover .blog-item__img,
.blog-item:focus-visible .blog-item__img { transform: scale(1.07); }
.blog-item:hover::after,
.blog-item:focus-visible::after {
    background: linear-gradient(to top, rgba(16, 11, 13, .93) 8%, rgba(16, 11, 13, .55) 58%, rgba(16, 11, 13, .22) 100%);
}
.blog-item:hover .blog-item__texto,
.blog-item:focus-visible .blog-item__texto { max-height: 96px; opacity: 1; margin: 6px 0 12px; }
.blog-item:hover .blog-item__mas,
.blog-item:focus-visible .blog-item__mas { opacity: 1; transform: none; }
.blog-item:focus-visible { outline: 3px solid var(--accion); outline-offset: 3px; }

/* --- La "escena": fondo oscuro con focos ---------------------------------
   Cabecera y galería del índice comparten un escenario a oscuras: focos de
   color de marca, una trama de puntos tenue y las tarjetas flotando encima.
   Pensado para pesar poco: el fondo se pinta UNA vez (nada lo repinta) y lo
   único que se mueve lo hace con transform, que va por la tarjeta gráfica.
   En móvil y tableta las tarjetas siguen en rejilla uniforme; el collage
   descolocado es de escritorio. */
.blog-escena {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0e0a0c; color: #fff;
    padding: 0 0 76px;
}
.blog-escena::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(14, 10, 12, 0) 70%, #0e0a0c 100%),
        radial-gradient(rgba(255, 255, 255, .13) 1.1px, transparent 1.3px) 0 0 / 26px 26px,
        radial-gradient(900px 520px at 0% 0%, rgba(209, 0, 48, .42), transparent 70%),
        radial-gradient(700px 520px at 100% 100%, rgba(96, 44, 170, .28), transparent 70%);
}
/* Foco que sigue al ratón: un elemento aparte que web.js mueve con transform
   (no repinta el fondo). Solo existe en escritorio con ratón. */
.blog-escena__foco {
    position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
    width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 28, 66, .22), transparent);
    opacity: 0; transition: opacity .5s ease; will-change: transform;
}
.blog-escena__foco.activo { opacity: 1; }

/* La cabecera, dentro de la escena: sin fondo propio y con texto claro */
.blog-escena .blog-cab { background: none; border-bottom: 0; padding: 58px 0 6px; }
.blog-escena .blog-cab__kicker { color: var(--marca); }
.blog-escena .blog-cab__kicker::before { background: var(--marca); }
.blog-escena .blog-cab h1 { color: #fff; font-size: clamp(36px, 6vw, 68px); }
.blog-escena .blog-cab__sub { color: #fff; }
.blog-escena .blog-cab__intro { color: rgba(255, 255, 255, .72); }
/* El rastro de migas, en la misma página, también a oscuras */
.migas:has(+ main > .blog-escena) { background: #0e0a0c; border-bottom-color: rgba(255, 255, 255, .08); }
.migas:has(+ main > .blog-escena) a { color: rgba(255, 255, 255, .6); }
.migas:has(+ main > .blog-escena) [aria-current] { color: #fff; }
.migas:has(+ main > .blog-escena) li + li::before { color: rgba(255, 255, 255, .4); }

.blog-escena p { color: rgba(255, 255, 255, .8); }
.blog-escena p a { color: #fff; text-decoration: underline; }
.blog-escena .blog-item {
    border-radius: 16px; background: #1a1418;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 26px 60px rgba(0, 0, 0, .55);
}
.blog-escena .blog-pag .boton--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.blog-escena .blog-pag .boton--linea:hover { background: #fff; color: var(--tinta); border-color: #fff; }

/* Distintivo del evento más reciente */
.blog-item__nuevo {
    position: absolute; z-index: 3; top: 16px; left: 16px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--accion); color: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(255, 28, 66, .45);
}

/* Aparición al hacer scroll: web.js pone .blog-galeria--anim y marca cada
   tarjeta con .visto cuando entra en pantalla. Sin JavaScript no se oculta nada. */
.blog-galeria--anim .blog-item:not(.visto) { opacity: 0; translate: 0 60px; }

@keyframes blog-flotar {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -11px; }
}

/* --- Collage flotante (solo escritorio) ---------------------------------- */
@media (min-width: 1000px) {
    .blog-escena { padding-bottom: 110px; }
    .blog-escena .blog-cab { padding: 76px 0 0; }
    .blog-escena .blog-galeria {
        grid-template-columns: repeat(12, 1fr); gap: 28px; align-items: start;
        margin: 50px 0 34px;
    }
    .blog-escena .blog-item {
        border-radius: 20px;
        transition: scale .5s cubic-bezier(.2, .7, .2, 1), rotate .5s cubic-bezier(.2, .7, .2, 1),
                    opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1);
    }
    /* Flotan despacio, cada una a su ritmo, y SOLO las que están en pantalla
       (web.js quita .en-pantalla a las que salen). rotate/scale/translate van
       por separado, así el vaivén no pisa la inclinación ni el hover. */
    .blog-escena .blog-item.visto.en-pantalla,
    .blog-escena .blog-galeria:not(.blog-galeria--anim) .blog-item {
        animation: blog-flotar 8s ease-in-out .9s infinite;
    }
    .blog-escena .blog-item:nth-child(3n + 2) { animation-duration: 10s; animation-delay: 1.6s; }
    .blog-escena .blog-item:nth-child(3n + 3) { animation-duration: 7s;  animation-delay: 2.3s; }

    /* Patrón de 8 posiciones: tamaños, columnas, desniveles e inclinaciones
       distintos. Los márgenes negativos hacen que cada tarjeta se meta en el
       hueco de la anterior y la PISE un poco (unos 16 px por abajo, donde no
       hay texto, y unos 35 px por el lado): de ahí el aire de collage. Van en
       % (del ancho de la propia tarjeta) para que la composición escale. */
    .blog-escena .blog-item:nth-child(8n + 1) { grid-column: 1 / span 7; aspect-ratio: 16 / 10; rotate: -1deg; }
    .blog-escena .blog-item:nth-child(8n + 2) { grid-column: 8 / span 5; aspect-ratio: 4 / 5;   rotate: 1.4deg;  margin-top: 16%;  margin-left: -12%; }
    .blog-escena .blog-item:nth-child(8n + 3) { grid-column: 2 / span 5; aspect-ratio: 4 / 3;   rotate: 1deg;    margin-top: -60%; }
    .blog-escena .blog-item:nth-child(8n + 4) { grid-column: 7 / span 6; aspect-ratio: 16 / 9;  rotate: -1.2deg; margin-top: -7%;  margin-left: -10%; }
    .blog-escena .blog-item:nth-child(8n + 5) { grid-column: 1 / span 5; aspect-ratio: 4 / 5;   rotate: 1.2deg;  margin-top: -54%; }
    .blog-escena .blog-item:nth-child(8n + 6) { grid-column: 6 / span 7; aspect-ratio: 16 / 10; rotate: -.8deg;  margin-top: 6%;   margin-left: -9%; }
    .blog-escena .blog-item:nth-child(8n + 7) { grid-column: 1 / span 6; aspect-ratio: 16 / 9;  rotate: -1deg;   margin-top: -29%; }
    .blog-escena .blog-item:nth-child(8n + 8) { grid-column: 8 / span 4; aspect-ratio: 1 / 1;   rotate: 1.6deg;  margin-top: -11%; }
    /* Quién queda encima cuando se pisan: siempre la tarjeta cuyo TEXTO (abajo
       a la izquierda) caería bajo la vecina, para que ningún titular se tape. */
    .blog-escena .blog-item:nth-child(8n + 2),
    .blog-escena .blog-item:nth-child(8n + 5) { z-index: 2; }
    .blog-escena .blog-item:nth-child(8n + 8) { z-index: 3; }
    .blog-escena .blog-item:nth-child(8n + 3),
    .blog-escena .blog-item:nth-child(8n + 6) { z-index: 4; }

    /* Las grandes llevan titular grande y el resumen siempre a la vista */
    .blog-escena .blog-item:nth-child(8n + 1) .blog-item__over,
    .blog-escena .blog-item:nth-child(8n + 6) .blog-item__over { padding: 32px; }
    .blog-escena .blog-item:nth-child(8n + 1) .blog-item__titulo,
    .blog-escena .blog-item:nth-child(8n + 6) .blog-item__titulo { font-size: clamp(26px, 2.5vw, 34px); max-width: 18ch; }
    .blog-escena .blog-item:nth-child(8n + 1) .blog-item__texto,
    .blog-escena .blog-item:nth-child(8n + 6) .blog-item__texto { max-height: 96px; opacity: 1; margin: 8px 0 12px; max-width: 52ch; }

    /* Estas dos llevan una vecina pisándoles el borde derecho: se reserva ese
       margen para que un titular largo no quede debajo. */
    .blog-escena .blog-item:nth-child(8n + 1) .blog-item__over { padding-right: 70px; }
    .blog-escena .blog-item:nth-child(8n + 5) .blog-item__over { padding-right: 60px; }

    /* Al pasar el ratón: se endereza, se acerca y se enciende */
    .blog-escena .blog-item:hover,
    .blog-escena .blog-item:focus-visible {
        rotate: 0deg; scale: 1.035; z-index: 10; animation-play-state: paused;
        box-shadow: 0 0 0 2px var(--marca), 0 26px 60px rgba(0, 0, 0, .6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-escena .blog-item { animation: none !important; transition: none; }
    .blog-galeria--anim .blog-item:not(.visto) { opacity: 1; translate: none; }
}

/* --- Paginación ----------------------------------------------------------- */
.blog-pag { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 36px 0 6px; }

/* --- Ficha de un evento ---------------------------------------------------
   Misma escena oscura que el índice. Portada grande con el titular, entradilla
   y texto con una ficha al lado, el vídeo como bloque destacado, las fotos en
   mosaico y otros montajes al final. Todo lo que se mueve lo hace con
   transform/opacity; el fondo es el de .blog-escena y se pinta una sola vez. */
.evento { padding: 26px 0 84px; }
.evento__ancho { max-width: 1180px; }
.evento__volver {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px;
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6); text-decoration: none;
}
.evento__volver:hover { color: #fff; text-decoration: none; }

/* Portada */
.evento__cab { margin: 0 0 clamp(30px, 5vw, 58px); }
.evento__cab--foto {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 21 / 9; min-height: 380px; border-radius: 22px; background: #1a1418;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 70px rgba(0, 0, 0, .55);
}
.evento__portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.evento__cab--foto::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(14, 10, 12, .94) 0%, rgba(14, 10, 12, .5) 42%, rgba(14, 10, 12, .08) 78%);
}
.evento__cab--foto .evento__cabTxt { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 4vw, 50px); }
.evento__cab:not(.evento__cab--foto) { padding: 14px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.evento__meta {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 14px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.blog-escena .evento__meta { color: #fff; }
.evento__fecha { display: inline-flex; align-items: center; gap: 9px; }
.evento__fecha::before { content: ""; width: 24px; height: 2px; background: var(--marca); }
.evento__lugar {
    padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .13);
    letter-spacing: .04em; font-weight: 700;
}
.evento__cab h1 {
    margin: 0; max-width: 900px; color: #fff;
    font-size: clamp(30px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.035em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: no-preference) {
    /* La portada entra con un acercamiento muy leve: solo transform, una vez. */
    .evento__portada { animation: evento-portada 1.6s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes evento-portada { from { scale: 1.07; } to { scale: 1; } }

/* Texto + ficha */
.evento__rejilla { display: grid; gap: 34px; }
.evento__entrada {
    margin: 0 0 1.1em; color: #fff; font-weight: 600;
    font-size: clamp(20px, 2.3vw, 26px); line-height: 1.45; letter-spacing: -.012em;
}
.blog-escena .evento__entrada { color: #fff; }
.evento__ficha {
    padding: 24px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
.evento__ficha h2 {
    margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--marca);
}
.evento__ficha dl { margin: 0 0 20px; }
.evento__ficha dl div { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.evento__ficha dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.evento__ficha dd { margin: 4px 0 0; color: #fff; font-weight: 600; font-size: 15.5px; }
.evento__tel { display: block; margin-top: 13px; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .66); }
.evento__tel:hover { color: #fff; }
@media (min-width: 960px) {
    .evento__rejilla { grid-template-columns: minmax(0, 1fr) 310px; gap: 60px; align-items: start; }
    .evento__ficha { position: sticky; top: 96px; }
}

/* El texto del evento, sobre fondo oscuro */
.blog-prosa { font-size: 17.5px; line-height: 1.8; }
.blog-escena .blog-prosa, .blog-escena .blog-prosa p, .blog-escena .blog-prosa li { color: rgba(255, 255, 255, .8); }
.blog-prosa > *:first-child { margin-top: 0; }
.blog-prosa p { margin: 0 0 1.2em; }
.blog-escena .blog-prosa strong, .blog-escena .blog-prosa b { color: #fff; font-weight: 700; }
.blog-prosa h2 { margin: 1.9em 0 .5em; font-size: 27px; line-height: 1.2; letter-spacing: -.02em; color: #fff; font-weight: 800; }
.blog-prosa h3 { margin: 1.6em 0 .4em; font-size: 21px; line-height: 1.25; color: #fff; font-weight: 700; }
.blog-prosa ul, .blog-prosa ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.blog-prosa li { margin: .35em 0; }
.blog-prosa li::marker { color: var(--marca); }
.blog-escena .blog-prosa a { color: #fff; text-decoration: underline; text-decoration-color: var(--marca); text-underline-offset: 3px; }
.blog-prosa img { max-width: 100%; height: auto; border-radius: 14px; margin: .8em 0; }
.blog-prosa blockquote {
    margin: 1.4em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--marca);
    font-size: 21px; font-style: italic;
}
.blog-escena .blog-prosa blockquote, .blog-escena .blog-prosa blockquote p { color: #fff; }

/* Bloques (vídeo, fotos, más montajes) */
.evento__bloque { margin-top: clamp(46px, 7vw, 86px); }
.evento__titulo {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px;
    color: #fff; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -.03em;
}
.evento__titulo::before { content: ""; flex: none; align-self: center; width: 34px; height: 3px; border-radius: 2px; background: var(--marca); }
.evento__titulo small { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* Vídeo: el reproductor no se carga hasta pulsar (lo gestiona web.js) */
.evento__video {
    border-radius: 20px; background: #1a1418;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px rgba(0, 0, 0, .55);
}
.evento__video .video__play { background: linear-gradient(to top, rgba(14, 10, 12, .72), rgba(14, 10, 12, .22)); }
.evento__video .video__play span {
    width: 86px; height: 86px; font-size: 27px; background: var(--marca);
    box-shadow: 0 10px 34px rgba(255, 28, 66, .5); transition: scale .25s ease;
}
.evento__video .video__play:hover span { scale: 1.08; }

/* Mosaico de fotos. Las celdas tienen alto fijo y la foto las rellena
   (object-fit), así que da igual la proporción de cada imagen. El patrón se
   recoloca según cuántas haya para no dejar huecos. */
.evento-mosaico { display: grid; gap: 10px; grid-auto-flow: dense; }
.evento-galeria__item {
    position: relative; display: block; margin: 0; padding: 0; border: 0; overflow: hidden;
    border-radius: 14px; background: #1a1418; cursor: zoom-in;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.evento-galeria__item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: scale .5s cubic-bezier(.2, .7, .2, 1);
}
.evento-galeria__item:hover img,
.evento-galeria__item:focus-visible img { scale: 1.05; }
.evento-galeria__item:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
.evento-galeria__pie {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left;
    font-family: var(--tipo); font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #fff;
    background: linear-gradient(to top, rgba(14, 10, 12, .85), rgba(14, 10, 12, 0));
}
@media (hover: hover) {
    /* Con ratón el pie de foto aparece al pasar por encima; en táctil va siempre. */
    .evento-galeria__pie { opacity: 0; transition: opacity .25s ease; }
    .evento-galeria__item:hover .evento-galeria__pie,
    .evento-galeria__item:focus-visible .evento-galeria__pie { opacity: 1; }
}

@media (max-width: 759px) {
    /* Móvil: dos columnas, la primera foto a lo grande. Si la última queda
       sola en su fila, ocupa las dos columnas. */
    .evento-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
    .evento-mosaico > :first-child { grid-column: span 2; grid-row: span 2; }
    .evento-mosaico > :nth-child(2n):last-child { grid-column: span 2; }
}
@media (min-width: 760px) {
    /* Escritorio: 6 columnas. Cada tres fotos forman un grupo "una grande + dos
       pequeñas apiladas", alternando el lado de la grande. */
    .evento-mosaico { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 16vw, 205px); }
    .evento-mosaico > * { grid-column: span 2; }
    .evento-mosaico > :nth-child(6n + 1) { grid-column: 1 / span 4; grid-row: span 2; }
    .evento-mosaico > :nth-child(6n + 2),
    .evento-mosaico > :nth-child(6n + 3) { grid-column: 5 / span 2; }
    .evento-mosaico > :nth-child(6n + 4) { grid-column: 3 / span 4; grid-row: span 2; }
    .evento-mosaico > :nth-child(6n + 5),
    .evento-mosaico > :nth-child(6n + 6) { grid-column: 1 / span 2; }
    /* Sobrantes: una sola foto al final va a todo lo ancho; si quedan una grande
       y una pequeña, la pequeña crece para cerrar el hueco. */
    .evento-mosaico > :nth-child(3n + 1):last-child { grid-column: 1 / -1; grid-row: span 3; }
    .evento-mosaico > :nth-child(3n + 2):last-child { grid-row: span 2; }
}

/* Más montajes */
.evento__otros { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.blog-mini {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    aspect-ratio: 4 / 3; border-radius: 16px; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--barra-alta), var(--accion-oscura));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 46px rgba(0, 0, 0, .45);
    transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.blog-mini img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.blog-mini::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(14, 10, 12, .92) 4%, rgba(14, 10, 12, .35) 52%, rgba(14, 10, 12, 0) 80%);
}
.blog-mini__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 7px; }
.blog-mini__fecha { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.blog-mini__fecha::before { content: ""; width: 16px; height: 2px; background: var(--marca); }
.blog-mini__titulo { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.blog-mini:hover, .blog-mini:focus-visible {
    translate: 0 -6px; text-decoration: none; color: #fff;
    box-shadow: 0 0 0 2px var(--marca), 0 26px 56px rgba(0, 0, 0, .6);
}
.blog-mini:hover img, .blog-mini:focus-visible img { scale: 1.06; }

/* Pie con el botón de volver */
.evento__pie { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.blog-escena .evento__pie .boton--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.blog-escena .evento__pie .boton--linea:hover { background: #fff; color: var(--tinta); border-color: #fff; }

/* Aparición de los bloques al hacer scroll. La clase --revela la pone web.js:
   sin JavaScript no se oculta nada. */
.blog-escena--revela [data-revela] {
    opacity: 0; translate: 0 34px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1);
}
.blog-escena--revela [data-revela].visto { opacity: 1; translate: 0 0; }

@media (max-width: 700px) {
    .blog-cab { padding: 36px 0 26px; }
    .evento { padding-top: 18px; }
    .evento__cab--foto { aspect-ratio: 4 / 5; min-height: 0; border-radius: 16px; }
    .blog-prosa { font-size: 16.5px; }
    .evento__video { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-escena--revela [data-revela] { opacity: 1; translate: none; transition: none; }
    .blog-mini, .blog-mini img, .evento-galeria__item img { transition: none; }
}

/* --- Contacto, a oscuras ---------------------------------------------------
   En las páginas con escena (índice de eventos, ficha de evento y páginas de
   servicio) la sección de contacto sigue en el mismo escenario: fondo oscuro,
   la trama de puntos, un foco de marca y el formulario como tarjeta de cristal
   oscuro. Esta hoja solo se carga en esas páginas, así que el resto de la web
   conserva su contacto claro. Va al final para ganar a estilo.css. */
.contacto {
    position: relative; isolation: isolate; overflow: hidden;
    background: #0e0a0c; color: #fff; border-top: 1px solid rgba(255, 255, 255, .08);
}
.contacto::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(rgba(255, 255, 255, .13) 1.1px, transparent 1.3px) 0 0 / 26px 26px,
        radial-gradient(820px 480px at 100% 0%, rgba(209, 0, 48, .34), transparent 70%),
        radial-gradient(640px 460px at 0% 100%, rgba(96, 44, 170, .22), transparent 70%);
}
.contacto__texto h2 { color: #fff; }
.contacto__texto > p,
.contacto__entrada { color: rgba(255, 255, 255, .74); }

.contacto__datos li a {
    background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #fff;
}
.contacto__datos li a:hover {
    background: rgba(255, 255, 255, .09); border-color: var(--marca); color: #fff;
}
.contacto__icono { background: rgba(255, 28, 66, .16); color: var(--marca); }
.contacto__icono--wa { background: rgba(37, 211, 102, .16); color: #3ddc84; }
.contacto__datos span,
.contacto__valor span { color: rgba(255, 255, 255, .62); }
/* El dato en sí (teléfono, correo, dirección), bien visible */
.contacto__valor strong { color: #fff; }

.contacto .mapa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.contacto .mapa__abrir { color: #fff; }
.contacto .mapa__abrir:hover { background: rgba(255, 255, 255, .07); }
.contacto .mapa__abrir small { color: rgba(255, 255, 255, .62); }
/* El mapa incrustado de Google no se puede pedir en oscuro, así que se le da la
   vuelta con un filtro: invierte la luz y devuelve los colores a su tono. */
.contacto .mapa iframe { filter: invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95) contrast(.9); }

/* El formulario: tarjeta oscura con borde de luz, en vez de la tarjeta blanca */
.contacto .formulario {
    background: #171214; color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.contacto .formulario__cab { background: rgba(255, 255, 255, .04); }
.contacto .formulario .campo label:not(.consentimiento) { color: rgba(255, 255, 255, .64); }
.contacto .formulario .campo input:not([type="checkbox"]),
.contacto .formulario .campo textarea,
.contacto .formulario .campo select {
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); color: #fff;
}
.contacto .formulario .campo input:not([type="checkbox"]):hover,
.contacto .formulario .campo textarea:hover { border-color: rgba(255, 255, 255, .3); }
.contacto .formulario .campo input:not([type="checkbox"]):focus,
.contacto .formulario .campo textarea:focus {
    background: rgba(255, 255, 255, .09); border-color: var(--marca);
    box-shadow: 0 0 0 4px rgba(255, 28, 66, .22);
}
.contacto .formulario .campo input::placeholder,
.contacto .formulario .campo textarea::placeholder { color: rgba(255, 255, 255, .42); }
/* Lo que rellena el navegador solo: sin esto pinta el campo de blanco */
.contacto .formulario .campo input:-webkit-autofill {
    -webkit-text-fill-color: #fff; caret-color: #fff;
    box-shadow: 0 0 0 1000px #262024 inset;
}
.contacto .formulario .campo__error { color: #ff7b93; }
.contacto .formulario .campo--mal input:not([type="checkbox"]),
.contacto .formulario .campo--mal textarea { border-color: var(--marca); background: rgba(255, 28, 66, .1); }
.contacto .formulario .campo--consentimiento { background: rgba(255, 255, 255, .05); }
.contacto .consentimiento { color: rgba(255, 255, 255, .74); }
.contacto .consentimiento a { color: #fff; }
.contacto .campo--consentimiento.campo--mal .consentimiento { color: #ff7b93; }
.contacto .formulario .formulario__aviso { color: rgba(255, 255, 255, .64); }
.contacto .formulario__aviso a { color: #fff; }
.contacto .aviso-form--error { background: rgba(255, 28, 66, .12); border-color: var(--marca); color: #ffc7d1; }
.contacto .aviso-form--error a { color: #fff; }
.contacto .aviso-form--ok { background: rgba(6, 122, 74, .2); border-color: #2bbf85; color: #b9f3da; }