/*
 * Festival Tsonami — lo que `theme.json` no puede dar.
 *
 * REGLA: acá va sólo lo que no tiene lugar en `theme.json`. Paleta,
 * tipografía, cuerpos, anchos y espaciados NO se escriben acá: se declaran
 * allá y se usan por variable. Si una regla de este archivo fija un color o un
 * tamaño con un literal, está en el archivo equivocado.
 *
 * Y el corolario de `diseno/ADAPTACION.md`: si esto crece a cientos de líneas
 * peleándole al padre, el tema base estaba mal elegido. Hoy son ~120.
 */

/* ------------------------------------------------------------------ 1. Titular
 *
 * El titular de la edición --«A T M O S F É R I C A  I I»-- ocupa el ancho
 * completo del contenido. Medido en la captura de 1440 px: 13 letras entre
 * x=299 y x=1139, con ~21 px de aire entre letras sobre un cuerpo de ~72 px.
 * Eso es `letter-spacing: 0.28em`, que ya está en `theme.json`.
 *
 * Lo que NO se puede declarar allá es esto: `letter-spacing` agrega el espacio
 * DESPUÉS de cada letra, también de la última. Un titular centrado con 0.28em
 * queda corrido media letra a la izquierda. El margen negativo devuelve ese
 * sobrante y el centrado vuelve a ser real.
 */
.festival-titular {
	margin-inline-end: -0.28em;
	text-align: center;
	text-wrap: balance;
}

/* --------------------------------------------------- 1.ter Logo del sitio
 *
 * **La cabecera del original no es texto: es una imagen.** Medido el
 * 2026-08-27 sobre el sitio en vivo: `banner-web-TS26-sin-fondo-gris`, natural
 * 680x177, pintado 480x125 y centrado (x=480 en 1440).
 *
 * Se sirve como `site-logo` --y no como una `<img>` dentro de la plantilla--
 * porque asi vive en la mediateca y no en el tema: el dia que cambie la
 * edicion se cambia desde el panel, sin tocar un archivo. Es el mismo
 * argumento que `logo.py` hace para los otros sitios; la diferencia es que
 * aca el logo YA estaba en la mediateca y no hubo que rescatarlo del tema.
 */
.festival-logo img {
	width: 480px;
	max-width: 100%;
	height: auto;
}

/* El otro logotipo de la portada es el titular de la edicion
 * --`logo_atmosferica_gris.png`, pintado 840x69, o sea EL ANCHO DE
 * CONTENIDO--. `diseno/festival.md` dice que ese titular es «CSS de una linea
 * (letter-spacing), no un componente»; medido, es un PNG. Se le da su ancho
 * completo para que la firma visual de la portada quede como estaba. */
.wp-block-post-content img[src*="logo_atmosferica"] {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	height: auto;
}

/* --------------------------------------------- 1.bis Nombre en la cabecera
 *
 * «TSONAMI  2026» va en versales y con las dos palabras separadas. Medido a
 * 1440 px: 435 px de ancho sobre un cuerpo de ~52 px, con un hueco entre
 * palabras muy por encima del espacio normal.
 *
 * Va como `word-spacing` sobre el bloque de título del sitio y no como texto
 * escrito con espacios de más: escribirlo «TSONAMI  2026» lo dejaría así en la
 * pestaña del navegador, en el feed y en cada resultado de búsqueda.
 */
.festival-nombre {
	text-transform: uppercase;
	word-spacing: 0.35em;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------- 2. Bloque de presentación
 *
 * Columna de texto justificada a la izquierda + afiche a la derecha. Medido a
 * 1440 px: texto 486 px, aire 45 px, afiche 309 px, sobre 840 px de contenido.
 * Son 58% / 5% / 37%, y así van las columnas del pattern.
 *
 * La justificación es del original y se conserva. `hyphens` no es adorno: un
 * texto justificado en una columna de 486 px sin partir palabras abre ríos
 * blancos, y el original --que no parte-- los tiene.
 */
.festival-presentacion p {
	text-align: justify;
	hyphens: auto;
}

/* El afiche no se estira más allá de su tamaño real ni se recorta. */
.festival-presentacion figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------- 3. Muro de auspiciadores
 *
 * Es la mitad de la portada y cambia todos los años: va como componente, no
 * como imagen pegada. Cada grupo es un rótulo en versales y una fila de
 * logotipos que envuelve sola.
 *
 * `align-items: center` y no `flex-start`: los logotipos vienen con
 * proporciones muy distintas --de una franja ancha y baja a un círculo-- y
 * alineados por arriba el muro se ve escalonado. Es lo que hace el original.
 */
/* Medido en el original el 2026-08-27: los rotulos son `<h3>`, 13,2 px,
 * peso 600, `letter-spacing: 1px`, versales. Se conserva todo salvo el
 * color: alli son blancos, que sobre el coral da 3,18:1 y no llega al 4,5:1
 * que pide AA para texto de este tamano. Van en tinta, que da 4,55:1. */
.festival-auspiciadores__rotulo {
	color: var(--wp--preset--color--tinta);
	font-size: 0.825rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--30);
}

/* LOS GRUPOS CHICOS SE EMPAREJAN, NO SE APILAN.
 *
 * Medido contra `diseno/capturas/festival-1440.jpg`: en el original FINANCIA y
 * ORGANIZA van UNO AL LADO DEL OTRO. Apilados, cada grupo de uno o dos
 * logotipos ocupa una banda entera con el logotipo a la izquierda y el resto
 * vacío; con seis grupos son 1.685 px de pie, y se lee como si faltaran los
 * logotipos: rótulo, hueco, rótulo.
 *
 * **La fila la declara la PLANTILLA, no esta hoja.** El primer intento puso
 * `display:flex` sobre `.festival-auspiciadores`, que es el `<footer>` con
 * `layout: constrained`: el flex ignora el ancho máximo que WordPress aplica a
 * los hijos y los grupos se fueron a x=1574, fuera de la pantalla, con el pie
 * creciendo de 1.685 a 1.948 px. Es exactamente lo que advierte
 * `diseno/ADAPTACION.md`: si el hijo pelea contra el padre con CSS, la base
 * estaba mal elegida. La maqueta de bloques se declara en el bloque.
 *
 * Acá sólo queda el ancho mínimo con el que un grupo decide si cabe al lado
 * del anterior.
 */
.festival-auspiciadores__muro {
	/* El hueco entre grupos, que el bloque no expresa. */
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.festival-auspiciadores__muro > .festival-auspiciadores__grupo {
	/* `flex-basis: auto` -- el ancho lo pide el CONTENIDO.
	 *
	 * Con un ancho fijo (`20rem`) todos los grupos miden lo mismo, y COLABORA,
	 * que tiene diez logotipos, se ve obligado a envolver en una columna
	 * estrecha: el pie pasó de 1.685 a 2.467 px. Con `auto`, un grupo de un
	 * logotipo pide poco y se le pone otro al lado; uno de diez pide mucho y
	 * se queda la fila entera. Es lo que hace el original, y no hace falta
	 * una lista de «cuáles van juntos» que habría que mantener cada año.
	 *
	 * El `min-width` sólo evita que un grupo quede tan angosto que su rótulo
	 * se parta; el `100%` lo suelta en pantallas donde 16rem ya es todo. */
	flex: 1 1 auto;
	min-width: min(16rem, 100%);
}

.festival-auspiciadores__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* El alto manda sobre el ancho: es lo que iguala ópticamente logotipos de
 * proporciones distintas. El ancho queda libre para que no se deformen.
 *
 * El techo subió de 4rem a 5.5rem. No es gusto: **el logotipo del FONDART
 * lleva cuatro líneas de texto dentro** --«Proyecto financiado por el Fondo
 * Nacional de Desarrollo Cultural y las Artes (FONDART) 2024»-- y a 64 px de
 * alto esas líneas quedan en unos 6 px, ilegibles. Medido contra la captura
 * del original a 1440: ahí ese bloque mide ~80 px de alto y se lee. Y quien
 * financia exige atribución VISIBLE: un logotipo de auspiciador ilegible no
 * cumple lo que el sitio promete. */
.festival-auspiciadores__fila img {
	height: clamp(2.75rem, 5vw, 5.5rem);
	width: auto;
	max-width: 100%;
}

/* ------------------------------------------------------------------- 4. Menú
 *
 * El original tiene el menú horizontal en DOS filas. No hace falta declarar
 * dos filas: hace falta dejar que envuelva. Con 24 entradas a este cuerpo, en
 * 840 px envuelve solo -- y en un teléfono envuelve en cuatro, que es lo
 * correcto y lo que una altura fija rompería.
 */
.wp-block-navigation.festival-menu {
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--20);
	justify-content: center;
}

/* CONTRASTE. Medido el 2026-08-27, sobre el coral `#eb6661`:
 *
 *   original  `#808080` gris     1,24:1   invisible
 *   nuestro   `#ffffff` blanco   3,18:1   no llega a AA para 14 px
 *   ahora     `#001d79` tinta    4,55:1   AA ✓
 *
 * El original es el peor de los tres, asi que copiarlo fielmente habria sido
 * reproducir un defecto. Este proyecto ya decidio no hacer eso: la ficha de
 * `tsonamiediciones-liberacoop` en `temas/procedencia.json` dice «foco
 * visible: el main.min.css del origen lo suprimia».
 *
 * `#001d79` es el ultramar de la marca oscurecido al 65%: es el valor MAS
 * CLARO de esa rampa que llega a 4,5:1. Mas claro no pasa; mas oscuro deja de
 * leerse como el azul del sitio.
 */
/* El color va en el CONTENEDOR y no en el `<a>`, a proposito.
 *
 * El bloque de navegacion del nucleo trae
 * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
 *  { color: inherit }` --clase duplicada, especificidad 0,3,0-- que le gana a
 * cualquier regla razonable sobre el `<a>`. Pelearle con `!important` seria
 * empezar la pila que `ADAPTACION.md` marca como sintoma de tema mal elegido.
 * Pintar el contenedor y dejar que el `inherit` del nucleo haga su trabajo
 * llega al mismo sitio sin pelea. */
.wp-block-navigation.festival-menu {
	color: var(--wp--preset--color--tinta);
	font-weight: 600;
	font-size: 0.825rem;
}

/* El activo NO se distingue solo por color --quien no distingue estos dos
 * azules del blanco se queda sin saber donde esta-- sino tambien por el
 * subrayado. Es la regla de "no depender solo del color" y cuesta una linea.
 * Aca si hace falta ganarle al `inherit`, y se hace repitiendo la clase
 * --0,4,0 contra 0,3,0-- que es lo mismo que hace el nucleo, no un truco. */
.festival-menu .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.festival-menu .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--papel);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.festival-menu .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* El SUBMENU. El nucleo le da fondo y color propios --texto negro sobre
 * blanco-- que en esta pagina aparecia como el unico negro del sitio. Se le
 * da el color de la edicion y la misma tinta, para que desplegarlo no cambie
 * de idioma visual. Lleva un borde porque, sin el, un panel del mismo color
 * que la pagina no se distingue de la pagina. */
.festival-menu .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--edicion);
	border: 1px solid var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
}

.festival-menu .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--tinta);
}

/* ---------------------------------------- 4.bis Imagenes que no son bloques
 *
 * **Esto es una red, no un estilo.** La portada #9528 no trae shortcodes sino
 * el HTML ya EXPANDIDO de Avia: `<div class="flex_column av_two_fifth">` con
 * `<img class="avia_image" width="1920">` adentro. El conversor traduce
 * `[av_*]`; esa otra forma todavia no, asi que la imagen llega sin la clase
 * `wp-block-image` y sin nadie que la limite.
 *
 * Medido el 2026-08-27: el afiche se pintaba a 1080x1350 px dentro de una
 * columna de 840 px --el original lo pinta a 306x382-- y desbordaba la
 * pagina. Una sola regla lo contiene, y contiene tambien cualquier `<img>`
 * heredada que aparezca en los otros 604 contenidos del archivo.
 */
.wp-block-post-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* La reticula real del original es `av_three_fifth` / `av_two_fifth`: 60/40,
 * no el 58/37 que se habia estimado midiendo pixeles en la captura. Mientras
 * la portada siga siendo HTML de Avia, se le da su proporcion aqui. */
/* El porcentaje se calcula contra el ANCHO DE CONTENIDO, no contra el ancho
 * de la pagina. El contenedor de estas columnas es `alignfull` --1.392 px a
 * 1440-- asi que un `width: 40%` daba 557 px cuando el original pinta 306.
 * Atado a la variable de `theme.json`, no a un pixel escrito a mano: el dia
 * que cambie `contentSize`, esto lo sigue. */
.wp-block-post-content .flex_column {
	box-sizing: border-box;
	max-width: 100%;
}

.wp-block-post-content .flex_column.av_three_fifth {
	width: calc(var(--wp--style--global--content-size) * 0.6);
}

.wp-block-post-content .flex_column.av_two_fifth {
	width: calc(var(--wp--style--global--content-size) * 0.4);
}

/* ----------------------------------------------------------- 5. Accesibilidad
 *
 * El `main.min.css` de Enfold suprimía el foco visible. No se reproduce un
 * defecto: quien navega con teclado tiene que ver dónde está parado. El
 * contorno va en el color de papel porque el fondo es el color de la edición,
 * que cambia todos los años -- un contorno fijo dejaría de verse el año que el
 * coral sea claro.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--papel);
	outline-offset: 2px;
}

/* Y que el foco no quede tapado por una cabecera pegajosa. */
:target,
:focus-visible {
	scroll-margin-block-start: var(--wp--preset--spacing--40);
}

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

/* ------------------------------------------------ 6. Pies de galería
 *
 * Este sitio tiene TRES galerías y las tres usan el pie como dato, no como
 * adorno. Medido en el artefacto el 2026-08-28:
 *
 *     /artistas/      150 imagenes,  75 pies   el nombre de cada artista
 *     /programa/       22 imagenes,  11 pies   el dia de programacion
 *     /actividades/    12 imagenes,   6 pies   el nombre de la actividad
 *
 * La galería del núcleo superpone el pie SOBRE la imagen, con un degradado y a
 * 13 px. Acá va debajo, sobre el color de la edición, donde se lee.
 */
/* LA ESPECIFICIDAD IMPORTA ACA, Y ES LO QUE HABIA FALLADO.
 *
 * El nucleo estila estos pies con
 *
 *     .wp-block-gallery.has-nested-images figure.wp-block-image figcaption
 *
 * que son TRES clases y dos elementos. La regla que habia aca --`.festival-
 * galeria-nombres figcaption`, UNA clase-- perdia contra esa, asi que **nunca
 * se aplico**: los 75 nombres de `/artistas/` llevaban meses pintandose a 13 px
 * ENCIMA del retrato, con el degradado oscuro del nucleo, que es exactamente lo
 * que el comentario de abajo decia estar evitando. Medido con CDP el
 * 2026-08-28: `font-size: 13px`, `position: absolute`.
 *
 * Un comentario que describe lo que la regla queria hacer no es una prueba de
 * que lo haga. Por eso ahora el selector iguala la forma del nucleo y le suma
 * el contenedor: cuatro clases contra tres, y se puede volver a medir.
 */
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--papel);
	margin-block-start: 0.5em;
	position: static;
	background: none;
	padding: 0;
}

/* 6.a LAS RETICULAS QUE SON NAVEGACION: `/actividades/` y `/programa/`.
 *
 * **Por qué se les había escapado el estilo.** Esto lo pedía Skarlet mirando
 * la malla de seis: el texto se ve muy chico y no se nota. La causa no está en
 * el CSS sino en `avia.py:304`, que pone la clase `festival-galeria-nombres`
 * sólo a partir de DOCE pies. `/actividades/` tiene seis y `/programa/` once:
 * las dos quedaban por debajo del umbral y caían al pie por omisión del
 * núcleo.
 *
 * Y el umbral no está mal — está de más en este archivo. Esa clase significa
 * DOS cosas a la vez: «estilá los pies» y «montá el filtro rápido»
 * (`functions.php`, `tsonamifestival_filtro`). El filtro sobre seis tarjetas
 * no sirve para nada, así que el umbral es correcto PARA EL FILTRO; lo que no
 * corresponde es que arrastre el estilo con él. Acá se separan: el estilo del
 * pie es de todas las galerías, el filtro sigue siendo de la clase. No hace
 * falta tocar `avia.py`, y por lo tanto tampoco rehacer el artefacto.
 *
 * En estas dos el pie es la ETIQUETA DEL ENLACE —la imagen entera es el
 * enlace— así que es lo único que dice a dónde lleva cada tarjeta. Va al mismo
 * cuerpo que el antetítulo del tema, no al de un epígrafe.
 */
.wp-block-post-content .wp-block-gallery.has-nested-images:not(.festival-galeria-nombres) figure.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

/* Y que se vea que la tarjeta es un enlace: el pie no lo dice solo. */
.wp-block-post-content .wp-block-gallery:not(.festival-galeria-nombres) figure a {
	display: block;
}

.wp-block-post-content .wp-block-gallery:not(.festival-galeria-nombres) figure:hover figcaption {
	text-decoration: underline;
}

/* 6.a.bis EL PIE QUE BAJA AL FLUJO LE QUITA LA ALTURA A LA IMAGEN.
 *
 * **Esto es una regresión de la regla de arriba, no un defecto heredado.**
 * Bajar el `figcaption` a `position: static` --lo que hace 6-- lo convierte en
 * un elemento flex más dentro de `figure.wp-block-image`, que en una galería
 * `is-cropped` el núcleo declara así:
 *
 *     figure.wp-block-image      display:flex; flex-direction:column
 *     figure.wp-block-image img  flex: 1 0 0%;  height:100%;  object-fit:cover
 *
 * Con el pie FUERA del flujo la imagen era el único hijo y se quedaba con todo
 * el alto. Con el pie DENTRO, la imagen tiene base cero (`flex-basis: 0%`) en
 * un contenedor de alto automático: no hay espacio libre que repartir, y
 * `flex-grow` sobre cero sigue siendo cero. **La imagen se pinta con altura 0
 * y la página se ve sin imágenes.**
 *
 * Medido en `/programa/` el 2026-08-28, 8 de 11 en cero:
 *
 *     con el pie static     334 334 334   0   0   0   0   0   0   0   0
 *     con el pie absolute   334 334 334 334 334 334 334 334 513 513 513
 *
 * Por qué no se vio antes: sólo colapsan las galerías cuyas imágenes NO
 * comparten proporción. `/actividades/` son seis 9x5 iguales y `/artistas/`
 * setenta y cinco retratos iguales -- las dos se veían bien, y son las dos que
 * se miraron. `/programa/` mezcla 1080x1350 con 410x512 y por eso fue la que
 * lo mostró.
 *
 * El arreglo devuelve a la imagen su tamaño propio en vez de pedírselo al
 * reparto flex. Se comprobó que restituye EXACTAMENTE las alturas de antes de
 * la regresión, y que no mueve `/actividades/` ni `/artistas/`.
 */
.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	flex: 0 0 auto;
	height: auto;
	object-fit: contain;
}

/* 6.b El INDICE de `/artistas/`: 75 nombres bajo 75 retratos.
 *
 * Acá el nombre acompaña al retrato y no compite con él; a cuerpo de antetítulo
 * setenta y cinco veces, la página deja de ser un índice. Se queda como estaba.
 */
.wp-block-post-content .wp-block-gallery.has-nested-images.festival-galeria-nombres figure.wp-block-image figcaption {
	font-size: 0.825rem;
}

.festival-galeria-nombres figure a {
	display: block;
}

/* ------------------------------------------------------ 7. Filtro rápido
 *
 * Lo monta `assets/festival.js`; acá sólo se le da forma. Si el JS no corre,
 * nada de esto existe y la galería queda entera -- que es el estado correcto.
 */
.festival-filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75em;
	margin-block: var(--wp--preset--spacing--30);
}

.festival-filtro label {
	font-size: 0.825rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

/* Campo sobre el color de la edición: fondo papel y texto tinta, que es el
 * único par de esta paleta que llega a AA (4,55:1) para un texto de formulario.
 * Un campo transparente con texto blanco daría 3,18:1. */
.festival-filtro input[type="search"] {
	flex: 1 1 14rem;
	max-width: 22rem;
	padding: 0.4em 0.7em;
	border: 1px solid var(--wp--preset--color--tinta);
	border-radius: 0;
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
	font: inherit;
}

.festival-filtro__cuenta {
	margin: 0;
	font-size: 0.825rem;
	color: var(--wp--preset--color--tinta);
}

/* ------------------------------------------- 8. El título en la portada
 *
 * El original NO muestra el título de la página en la portada: va del menú
 * directo al titular de la edición, que es la imagen `logo_atmosferica`.
 * Nosotros lo pintábamos como un h1 interletrado --«FESTIVAL»-- que en el
 * original no existe y que duplica lo que ya dice el logo de la cabecera.
 *
 * Se OCULTA visualmente y no se borra de la plantilla: el h1 tiene que
 * seguir estando para el esquema del documento y para quien navega con
 * lector de pantalla, que sin él pierde el encabezado de nivel 1 de la
 * página. Es la técnica de `screen-reader-text` del propio WordPress.
 */
/* El selector es `.wp-block-post-title` y no una clase propia: la portada usa
 * la plantilla `page.html` DEL PADRE, cuyo título no lleva ninguna clase
 * nuestra. Y va acotado a `body.home` para que el título siga saliendo en las
 * otras 604 entradas del archivo, donde sí hace falta. */
body.home .wp-block-post-title,
body.home .festival-titular {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------- 9. Lo que el filtro oculta
 *
 * `[hidden]` NO alcanza. El `display: none` que el navegador asocia a ese
 * atributo es una regla de la hoja de usuario-agente, y la pisa cualquier
 * regla de autor: la galería del núcleo le pone `display: flex` a cada
 * figura. Medido el 2026-08-27 en `/artistas/`: 74 figuras con `hidden`
 * puesto y CERO invisibles.
 *
 * El atributo se conserva igual —es lo que leen los lectores de pantalla—
 * y el ocultamiento visual lo hace esta clase, que sí está en la cascada
 * del tema.
 *
 * Y la especificidad importa: `.wp-block-gallery.has-nested-images
 * figure.wp-block-image` (0,3,1) del núcleo le gana a un
 * `.festival-galeria-nombres > figure.festival-oculta` (0,2,1). Se nombran las
 * mismas clases que el núcleo más la nuestra —(0,4,1)— en vez de `!important`,
 * que sería empezar la pila que `ADAPTACION.md` marca como síntoma.
 */
.wp-block-gallery.has-nested-images > figure.wp-block-image.festival-oculta {
	display: none;
}

/* -------------------------------------------------- 10. Ficha en modal
 *
 * `<dialog>` nativo, como en `tsonamiediciones-liberacoop`: trae el foco
 * atrapado, el cierre con Escape y la capa superior sin una línea de JS ni
 * un tercero. El original abría estas fichas con `fancybox 1.3.4` (2010).
 */
.festival-ficha {
	width: min(52rem, 92vw);
	max-height: 86vh;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--tinta);
	border-radius: 0;
	background: var(--wp--preset--color--edicion);
	color: var(--wp--preset--color--papel);
	overflow: auto;
}

/* El fondo oscurece la página, que es lo que dice "esto de aquí es lo que
 * está activo". Sin él, un panel del color de la edición sobre una página
 * del color de la edición no se lee como un panel. */
.festival-ficha::backdrop {
	background: rgb(0 0 0 / 55%);
}

.festival-ficha__cerrar {
	position: sticky;
	top: 0;
	float: inline-end;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.festival-ficha__titulo {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	color: var(--wp--preset--color--papel);
}

.festival-ficha__cuerpo img {
	max-width: 100%;
	height: auto;
}

.festival-ficha__cargando {
	opacity: 0.7;
}

/* El puntero dice que la tarjeta hace algo al pincharla. */
.festival-galeria-nombres > figure > a {
	cursor: pointer;
}

/* El retrato dentro de la ficha en modal. Se limita el alto para que el texto
 * quede a la vista sin desplazar: la imagen es el reconocimiento, el texto es
 * el contenido. */
.festival-ficha__retrato {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 18rem;
}

.festival-ficha__retrato img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 40rem) {
	/* En pantalla ancha el retrato va a la izquierda y el texto lo rodea, que
	 * es como se lee una ficha. */
	.festival-ficha__retrato {
		float: inline-start;
		margin-inline-end: var(--wp--preset--spacing--30);
		max-width: 14rem;
	}

	.festival-ficha__texto::after {
		content: "";
		display: block;
		clear: both;
	}
}

/* ------------------------------------------ 11. Navegación dentro del modal
 *
 * Dos flechas para moverse entre artistas sin cerrar y volver a abrir. El
 * teclado hace lo mismo: izquierda/derecha por el renglón, arriba/abajo por
 * la columna visual de la grilla.
 *
 * Las flechas son botones y no enlaces a propósito: no cambian de página, y
 * un lector de pantalla tiene que anunciarlas como control, no como destino.
 */
.festival-ficha__ir {
	position: sticky;
	top: 0;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.festival-ficha__ir--antes {
	float: inline-start;
}

.festival-ficha__ir--despues {
	float: inline-start;
	margin-inline-start: 0.4rem;
}

/* Un botón deshabilitado se atenúa pero NO se esconde: si desaparece, la fila
 * de controles se recoloca sola y el cursor queda apuntando a otra cosa. */
.festival-ficha__ir[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* El título arranca debajo de los controles, no a su lado: con nombres de
 * quince países hay títulos de tres líneas y quedaban montados. */
.festival-ficha__titulo {
	clear: both;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* --------------------------------------------- 12. La pista del teclado
 *
 * Las cuatro flechas, visibles al pie del modal, que se encienden al
 * pulsarlas. Es lo que convierte «hay unos símbolos ahí» en «esto responde a
 * mi teclado»: una funcionalidad que no se ve no existe, y nadie prueba las
 * flechas en un panel a ver si pasa algo.
 */
.festival-ficha__teclas {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid rgb(255 255 255 / 30%);
	font-size: 0.786rem;
}

.festival-tecla {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--wp--preset--color--papel);
	border-block-end-width: 2px;
	background: none;
	color: var(--wp--preset--color--papel);
	font: inherit;
	line-height: 1;
	/* La transición sólo al APAGARSE: encender tiene que ser instantáneo para
	 * que se sienta como respuesta a la tecla, no como una animación. */
	transition: background-color 220ms ease-out, color 220ms ease-out;
}

.festival-tecla--pulsada {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--edicion);
	transition: none;
	/* Se hunde un pixel, como una tecla de verdad. */
	transform: translateY(1px);
	border-block-end-width: 1px;
}

/* Una dirección que no lleva a ninguna parte se atenúa. */
.festival-tecla--muerta {
	opacity: 0.3;
}

.festival-ficha__teclas-texto {
	margin-inline-start: 0.4rem;
	opacity: 0.75;
}

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

	.festival-tecla--pulsada {
		transform: none;
	}
}

/* Las tarjetas de /equipo/ son la misma cuadrícula que /artistas/: mismo
 * gesto, mismo cursor, y el filtro las oculta igual. */
.festival-persona {
	cursor: pointer;
}

.festival-persona.festival-oculta {
	display: none;
}

/* ------------------------------------------------------- 13. Histórico
 *
 * Un listado con año, que se filtra por año Y por texto a la vez. El
 * desplegable de años lo arma el script con los años que EXISTEN: ofrecer
 * «2014» cuando no hay nada de 2014 promete una búsqueda vacía.
 */
.festival-historico__ficha {
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid rgb(255 255 255 / 25%);
}

.festival-historico__ficha.festival-oculta {
	display: none;
}

.festival-historico__anio {
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--tinta);
	margin-block-end: 0.2em;
}

.festival-historico__ficha h2 {
	margin-block: 0 0.3em;
}

/* El selector de año, con el mismo par de colores que el campo de búsqueda:
 * es el único de esta paleta que llega a AA sobre el color de la edición. */
.festival-filtro select {
	padding: 0.4em 0.7em;
	border: 1px solid var(--wp--preset--color--tinta);
	border-radius: 0;
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
	font: inherit;
}

/* --------------------------------------------------- 13. Contacto del pie
 *
 * **Por qué esto es CSS nuevo y no un widget.** El bloque de contacto del
 * original vive en un `widget_text` --el `text-8`, titulado «Contacto»-- y ese
 * dato SI cruza: `_cargar_widgets` lo escribe en la tabla de opciones del
 * destino, y ahi esta, intacto, en `widget_text[8]`.
 *
 * Lo que no hay es donde pintarlo. Un tema de bloques no declara zonas de
 * widgets, asi que la opcion queda cargada y muda -- exactamente el mismo
 * hueco que `festival.menus.json` SI avisa para los menus («el tema del
 * destino no declara ubicaciones de menu [...] quedaron creados pero NO se
 * muestran»). Para los widgets no avisa nadie, y por eso se descubrio mirando
 * el sitio y no leyendo un informe.
 *
 * El contenido de aca abajo esta copiado del artefacto, no tecleado de
 * memoria, y cotejado contra el sitio publicado el 2026-08-28:
 *
 *     TSONAMI Arte Sonoro / Valparaiso, Chile. / artesonoro@tsonami.cl
 *     Siguenos en @tsonamiartesonoro
 *
 * El correo va en `mailto:` y no ofuscado: el original lo esconde detras del
 * `email-protection` de Cloudflare, que es un `<a href="/cdn-cgi/...">` con el
 * texto cifrado en un atributo y descifrado por JavaScript. Sin ese JS --y sin
 * esa Cloudflare-- el enlace no lleva a ninguna parte. Reproducirlo seria
 * copiar la dependencia, no el dato.
 */
.festival-contacto {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--papel);
	text-align: center;
}

.festival-contacto__direccion {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin-block: 0;
}

/* El icono y el «Siguenos en» en una linea, centrados y sin separarse al
 * envolver: son una sola frase. */
.festival-contacto__redes {
	gap: 0.5em;
	margin-block-start: var(--wp--preset--spacing--20);
}

.festival-contacto__redes p {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0;
}

/* El `is-style-logos-only` del nucleo hereda el color del texto; se fija al
 * papel para que no dependa de que el ajuste del bloque sobreviva una
 * reedicion desde el panel. */
.festival-contacto__redes .wp-block-social-link .wp-block-social-link-anchor {
	color: var(--wp--preset--color--papel);
}

/* ------------------------------------------ 14. El modal en modo CARTEL
 *
 * `/programa/` son once carteles de programación, uno por día, con la
 * programación entera escrita en letra chica. En la retícula se pintan a 267 px
 * y son ilegibles; el modal existe para poder LEERLOS, y para eso el cartel
 * tiene que ocupar todo lo que se le pueda dar.
 *
 * La caja es la misma que la de la ficha de artista --`festival-ficha__retrato`--
 * porque es la misma operación: clonar la imagen del mosaico y agrandarla. Lo
 * que cambia es a quién le deja sitio. En una ficha de artista el retrato
 * acompaña a un texto que hay que leer al lado, y por eso está topado a 14rem y
 * flota; un cartel NO tiene texto al lado: el cartel ES el texto.
 *
 * `max-height` en vez de `width: 100%`: estos carteles son 4:5 --más altos que
 * anchos-- y en una pantalla apaisada lo que se acaba primero es el alto. Topar
 * por ancho dejaría el cartel desbordando el diálogo hacia abajo, que es
 * exactamente lo que no se quiere de una vista para leer.
 */
.festival-ficha--cartel {
	width: min(64rem, 96vw);
}

.festival-ficha--cartel .festival-ficha__retrato {
	max-width: none;
	float: none;
	margin-inline-end: 0;
	text-align: center;
}

.festival-ficha--cartel .festival-ficha__retrato img {
	width: auto;
	max-width: 100%;
	max-height: 74vh;
	margin-inline: auto;
}

/* Sin texto debajo, el título del día es lo único que acompaña al cartel: se
 * le da aire y se centra sobre él en vez de quedar arrinconado arriba. */
.festival-ficha--cartel .festival-ficha__titulo {
	text-align: center;
}

/* LAS DOS DESCARGAS ------------------------------------------------------ */

.festival-descargas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, .75rem);
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
}

.festival-descargas a,
.festival-descargas button {
	font: inherit;
	font-size: var(--wp--preset--font-size--small, .875rem);
	padding: .55em 1.1em;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.festival-descargas a:hover,
.festival-descargas button:hover,
.festival-descargas a:focus-visible,
.festival-descargas button:focus-visible {
	background: currentColor;
}
.festival-descargas a:hover span,
.festival-descargas button:hover { color: var(--wp--preset--color--fondo, #fff); }

/* EL PROGRAMA IMPRESO: CADA CARTEL **ES** UNA PÁGINA ------------------------
 *
 * Cada imagen del programa es un DÍA, y en el PDF tiene que ser una página
 * entera: la imagen no va PUESTA sobre una hoja con márgenes, la imagen ES la
 * hoja. Cualquier margen blanco alrededor delata que el PDF se armó poniendo
 * afiches en un documento en vez de exportarlos.
 *
 * Por eso la página se declara con la proporción del cartel, no con A4.
 * Medidos los ocho: **1080×1350 px, 4:5 vertical**, todos iguales. 216×270 mm
 * es esa misma proporción exacta (216/270 = 0,8) a un tamaño imprimible.
 * Con `margin: 0` y la imagen a `100%` de ancho y alto, el borde de la imagen
 * y el borde de la página son el mismo.
 *
 * `object-fit: cover` y no `contain`: con la proporción calzada dan lo mismo,
 * pero si algún día entra un cartel de otra medida, `cover` llena y `contain`
 * dejaría franjas blancas — que es justo lo que esto viene a evitar.
 *
 * Del resto no queda nada: ni título, ni navegación, ni pie, ni los propios
 * botones. El PDF son los carteles y nada más, que es lo que alguien guarda
 * cuando dice «el programa».
 *
 * `print-color-adjust: exact` es obligatorio: sin eso Chrome descarta fondos e
 * imágenes de fondo y estos afiches salen en blanco. */
@media print {
	@page {
		size: 216mm 270mm;
		margin: 0;
	}

	html, body {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	/* Todo lo que no es un cartel desaparece. */
	header, footer, nav,
	.wp-block-navigation,
	.festival-descargas,
	.festival-filtro,
	h1, h2, h3, .wp-block-post-title,
	figcaption,
	iframe, video, audio { display: none !important; }

	main,
	.wp-block-post-content,
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column,
	.wp-block-gallery {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: none !important;
		gap: 0 !important;
	}

	/* Una figura, una página. */
	figure,
	.wp-block-image,
	.wp-block-gallery figure {
		display: block !important;
		width: 100% !important;
		height: 100vh !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		break-inside: avoid;
		page-break-inside: avoid;
		break-after: page;
		page-break-after: always;
	}

	/* La última no fuerza salto, o el PDF termina en una hoja vacía. */
	figure:last-of-type,
	.wp-block-image:last-of-type,
	.wp-block-gallery figure:last-of-type {
		break-after: auto;
		page-break-after: auto;
	}

	figure img,
	.wp-block-image img,
	.wp-block-gallery figure img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: cover;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	/* Un enlace impreso no lleva a ningún lado; su dirección, tampoco acá:
	 * en un afiche a página completa sería texto encima de la imagen. */
	a[href]::after { content: none !important; }
}