/*
Theme Name:   Rosario Folklore
Theme URI:    https://rosariofolklore.com.ar
Description:  El tema de la agenda de folklore del Gran Rosario. Sobrio y editorial:
              papel crema, tinta casi negra, un bordo para los enlaces, mucho aire
              y numeros tabulares para fechas, horas y precios. La estructura de datos vive en el plugin rf-eventos; este
              tema decide como se ve, y desde la 1.1.0 tambien QUE se ve en el
              encabezado y el pie (parts/header.html y parts/footer.html), que
              antes los ponia el tema padre con su contenido de demostracion.
              Desde la 1.2.0 la portada ES la agenda, con un lugar reservado
              arriba para un banner (parts/destacados.html), que la 1.3.0 llena
              con una presentacion fija, sin imagenes. Desde la 1.8.0 hay ademas
              tres ZONAS alrededor del contenido —arriba, abajo y al costado—,
              que son partes de plantilla editables desde Apariencia -> Editor:
              es lo que en un tema viejo habrian sido los sidebars. Desde la
              1.9.5 hay buscador: la caja vive en el encabezado y los resultados
              en templates/search.html, que a diferencia de la agenda SI muestra
              lo que ya paso.
Author:       Rosario Folklore
Template:     ollie
Version:      1.36.0
Requires PHP: 8.1
Text Domain:  rf-tema
*/

/* =============================================================================
   LA PALETA: "PAPEL Y TINTA" — 05-09-2026 (1.4.0)

   POR QUE CAMBIO. La paleta anterior era gris azulado con azul de enlace: una
   paleta de INFORME. Correcta, y de Pablo — es la de su trabajo profesional— pero
   no dice nada de una agenda de folklore. La decision fue suya y se tomo mirando
   las cuatro opciones aplicadas al mismo contenido, no leyendo nombres de color
   (docs/paletas/comparacion.html, que se regenera con su script).

   LA IDEA, que es lo que hay que entender antes de tocar un valor: QUE EL COLOR
   NO LO PONGA EL SITIO. Papel crema, tinta casi negra y un solo bordo para los
   enlaces. La agenda es texto —van a ser cientos de fichas— y cuando entren las
   imagenes de los eventos, el color va a venir de ahi. Envejece mejor que
   cualquier moda y le sienta igual de bien a una chacarera que a una milonga,
   que no es un detalle: el catalogo tiene TRES universos y uno de ellos es el
   tango. Una paleta de poncho saltenho habria quedado incomoda ahi.

   LOS VALORES VIVEN EN theme.json, no aca. Los hexadecimales que aparecen en
   esta hoja son SOLO respaldos por si una variable no resuelve, y tienen que
   seguir a los de theme.json. Si cambian alla y no aca, el sitio se ve bien y
   el respaldo miente el dia que haga falta.

   CONTRASTE MEDIDO, los nueve pares (formula WCAG, no a ojo):
     texto sobre el fondo ................... 15,80:1   AA y AAA
     texto sobre la superficie .............. 17,53:1   AA y AAA
     texto suave sobre la superficie ......... 6,65:1   AA
     texto suave sobre el fondo .............. 5,99:1   AA
     enlace sobre la superficie .............. 9,36:1   AA y AAA
     enlace sobre el fondo ................... 8,44:1   AA y AAA
     titulo del banner (blanco) .............. 9,51:1   AA y AAA
     bajada del banner (blanco 86%) .......... 7,44:1   AA y AAA
     aviso: texto sobre su fondo ............. 9,37:1   AA y AAA
   El peor par del tema pasa a ser 5,99:1, contra 5,45:1 de la paleta anterior:
   la nueva no solo es mas linda para esto, ademas se lee mejor.
   ============================================================================= */

/* =============================================================================
   SOBRE `Template: ollie` DE ARRIBA — 05-09-2026

   Esa linea NO es una mencion que se pueda borrar: ES la declaracion del tema
   padre. Un tema hijo sin padre no es un tema hijo, y este tema no tiene ni una
   plantilla propia: el encabezado, el pie, la portada, la ficha y los listados
   los provee Ollie. Si se saca esa linea, el sitio se queda sin nada que dibujar.

   LO QUE SI SE SACO, que era lo que se veia: el contenido de demostracion de
   Ollie. Sus partes `header` y `footer` traian columnas de "Company / Resources
   / Product", enlaces a About, Careers, Pricing y Demo, y un "Powered by
   WordPress and Ollie" con enlaces a su sitio y su YouTube. Nada de eso tiene
   que ver con una agenda de folklore de Rosario, y encima se veia sin estilo
   porque usaba colores de la paleta de Ollie, que este tema reemplazo entera.

   COMO SE SACO: este tema define ahora sus propios `parts/header.html` y
   `parts/footer.html`. WordPress resuelve las partes de plantilla mirando
   PRIMERO el tema activo y despues el padre, asi que estos archivos ganan sin
   tocar un solo archivo de Ollie — que sigue actualizandose solo, sin pisar
   nada nuestro. Es la misma regla que puso el CPT en un plugin: lo nuestro vive
   en un lugar que las actualizaciones ajenas no alcanzan.

   EL ENVOLTORIO NO ESTA EN ESTOS ARCHIVOS: las plantillas de Ollie llaman a las
   partes con tagName "header"/"footer" y className "site-header"/"site-footer",
   asi que la etiqueta y esa clase las pone el bloque template-part. Por eso los
   dos archivos empiezan directo con un grupo y no con <header> o <footer>:
   ponerlos aca los duplicaria.
   ============================================================================= */

/* =============================================================================
   EL ENCABEZADO Y EL PIE PROPIOS (1.1.0)
   ============================================================================= */

.rf-cabecera {
	padding-block: 1.1rem;
	background: var(--wp--preset--color--superficie, #fffdf9);
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-cabecera-fila { align-items: baseline; row-gap: 0.4rem; }

.rf-cabecera .wp-block-site-title { font-size: 1.35rem; font-weight: 600; }
.rf-cabecera .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--texto, #1b1714); }
.rf-cabecera .wp-block-site-title a:hover,
.rf-cabecera .wp-block-site-title a:focus-visible { text-decoration: underline; }

.rf-nav { margin: 0; font-size: 0.95rem; }

.rf-pie {
	margin-top: 3.25rem;
	padding-block: 2rem;
	background: var(--wp--preset--color--superficie, #fffdf9);
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	font-size: 0.9rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-pie p { margin: 0 0 0.7rem; }
.rf-pie p:last-child { margin-bottom: 0; }
.rf-pie-que-es strong { color: var(--wp--preset--color--texto, #1b1714); }

/* La linea de las fuentes es la que sostiene el criterio legal del proyecto
   (doc 03 §"el destino mas limpio"): datos factuales, con enlace al original y
   sin apropiarse de nada. Se deja mas chica pero NO gris claro: tiene que
   poder leerse. */
.rf-pie-fuentes { max-width: 46rem; }

.rf-pie-legal { padding-top: 0.6rem; border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9); }

/* =============================================================================
   LA FICHA DEL EVENTO
   Las clases las emite el plugin rf-eventos (seccion 10). Si el tema se cambia,
   los datos siguen saliendo: se veran con el estilo del tema nuevo, pero se
   veran. Eso es a proposito.
   ============================================================================= */

.rf-datos {
	display: grid;
	grid-template-columns: minmax(6rem, max-content) 1fr;
	gap: 0.35rem 1.25rem;
	margin: 1.5rem 0 2rem;
	padding: 1.25rem 1.4rem;
	background: var(--wp--preset--color--superficie, #fffdf9);
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	border-radius: 6px;
}

.rf-datos dt {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave, #635a50);
	padding-top: 0.15rem;
}

.rf-datos dd {
	margin: 0;
	line-height: 1.5;
}

/* Fechas, horas y precios en monoespaciada con numeros tabulares: en una
   cartelera las columnas de horarios tienen que alinearse verticalmente. */
.rf-hora,
.rf-precio {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}

.rf-suave {
	color: var(--wp--preset--color--texto-suave, #635a50);
	font-size: 0.94em;
}

/* El aviso de datos sin confirmar. No es decorativo: es el contrato con el
   lector. Se apoya en el color Y en la palabra, nunca solo en el color. */
.rf-aviso {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	background: #f8eeda;
	border-left: 4px solid var(--wp--preset--color--acento, #8a6212);
	color: #4f3a10;
	border-radius: 0 4px 4px 0;
	font-size: 0.95rem;
}

.rf-fuente {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	font-size: 0.9rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

/* =============================================================================
   LA CARTELERA
   La unidad de la agenda es el dia, no la tarjeta (doc 14 §5).
   ============================================================================= */

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible { text-decoration: underline; }

/* El foco visible no se saca nunca: es como se navega sin mouse. */
:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #7a2b2b);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =============================================================================
   LA PORTADA (1.2.0)

   La portada ES la agenda: lo que la gente viene a buscar, sin una pagina de
   presentacion en el medio. La decision y su motivo, en el doc 14 §C.

   EL HUECO DE ARRIBA NO ES DECORATIVO: `parts/destacados.html` viene VACIO a
   proposito. Es el lugar reservado para un banner, un carrusel o una fila de
   eventos destacados, y se llena desde Apariencia -> Editor -> Patrones ->
   Partes de plantilla -> "Destacados", sin tocar un archivo y sin que se pierda
   al actualizar el tema. Mientras siga vacio no ocupa ni un pixel: de eso se
   encarga la regla :empty de aca abajo.
   ============================================================================= */

.rf-portada { padding-block: 2.5rem 1rem; }

/* Vacio es vacio: sin esto, el bloque envolvente de la parte de plantilla
   dejaria el espacio entre bloques aunque no haya nada adentro, y la portada
   arrancaria con un agujero sin explicacion. */
.rf-destacados:empty { display: none; }
.rf-destacados:not(:empty) { margin-bottom: 2.5rem; }

.rf-portada-titulo { margin-bottom: 1.5rem; }

/* La cartelera. La unidad visual es el evento; agrupar por dia es el paso
   siguiente (doc 14 §5) y se decide con eventos reales arriba, no antes. */
.rf-cartelera-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rf-cartelera-lista > li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-cartelera-lista > li:first-child { border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9); }

/* EL TITULO PESA MAS QUE EL CUERPO, y hasta la 1.26.0 no lo hacía: medido el
   16-09, el título de un evento renderizaba a 18,4 px y el texto común también.
   El título de un evento es LO QUE SE VIENE A LEER en esta página; si mide lo
   mismo que todo lo demás, la lista no tiene jerarquía y se lee como un bloque
   parejo de texto. */
.rf-cartelera-titulo { margin: 0 0 0.25rem; font-size: 1.35rem; line-height: 1.3; }

/* La linea de cuando y donde la escribe el plugin (rf_extracto_de_agenda), no
   el tema. Numeros tabulares para que las horas se alineen entre filas: es el
   detalle por el que se eligio esta tipografia. */
/* Y ESTE RENGLON LLEVA LA HORA, que es el dato que más se busca en una agenda.
   Estaba a 0.92rem y en gris: más chico Y más apagado que el resto, o sea
   jerárquicamente al revés. Es el punto 4 de la auditoría, y recién ahora se
   corrige. Sigue siendo suave —no compite con el título— pero ya no es lo más
   chico de la fila. */
.rf-cartelera-cuando {
	margin: 0;
	font-size: 1.05rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
	font-variant-numeric: tabular-nums;
}

.rf-sin-eventos {
	padding: 2rem 0;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-paginacion { margin-top: 1.75rem; font-size: 0.92rem; }

.rf-portada-pie { margin-top: 2rem; font-size: 0.92rem; }

/* =============================================================================
   EL BANNER DE LA PORTADA (1.3.0)

   QUE ES Y QUE NO ES: una presentacion fija. No rota, no se mueve y no muestra
   eventos destacados. Los destacados son otra cosa —una funcion que necesita
   una regla que llene `eventos.puntaje_destaque`, hoy en cero en todas las
   filas— y un carrusel esconde todo menos una diapositiva, molesta en el
   celular y rinde poco. Lo que hace falta arriba de una agenda es que alguien
   que llega de Google entienda EN UNA LINEA que es esto.

   SIN NINGUNA IMAGEN, y no por pobreza: una foto de banco de imagenes tiene
   dueno, y este proyecto decidio no republicar material ajeno sin permiso
   (doc 01, modo A). Seria raro que el sitio predique eso y estrene con una foto
   que no es nuestra. El dia que haya una foto propia, va de fondo aca sin tocar
   nada mas.

   CONTRASTE MEDIDO, no supuesto (valores de la paleta "Papel y tinta", 1.4.0):
     titulo blanco sobre la banda ............ 9,51:1   (AA y AAA)
     bajada, blanco al 86% sobre la banda .... 7,44:1   (AA y AAA)

   ESTE ARCHIVO ES EL VALOR POR DEFECTO, NO LA ULTIMA PALABRA: el banner vive en
   parts/destacados.html, que es una PARTE DE PLANTILLA. Si se edita desde
   Apariencia -> Editor, la version editada se guarda en la base, gana sobre
   este archivo y sobrevive a las actualizaciones del tema.
   ============================================================================= */

.rf-banner {
	/* LA FRANJA TIENE EL ANCHO DEL CONTENIDO, NO EL DE LA PANTALLA (1.10.0).

	   QUE ESTABA MAL. `parts/destacados.html` cuelga de la raiz de la plantilla,
	   fuera del grupo `.rf-portada` que lleva el ancho amplio. Sin un ancho
	   propio, la franja se estiraba de borde a borde y su titulo arrancaba
	   pegado al margen, mientras la palabra "Eventos" arrancaba mucho mas
	   adentro: dos comienzos distintos en la misma pagina. Y las esquinas
	   redondeadas que esta regla ya tenia no se veian nunca, porque no habia
	   margen donde verlas. Lo vio Pablo el 13-09-2026 mirando el sitio.

	   POR QUE ESTAS DOS LINEAS Y NO width/calc: `max-width` + `margin-inline`
	   es EXACTAMENTE lo que WordPress le pone a un bloque `alignwide` dentro de
	   un grupo "constrained". O sea que la franja no imita el ancho del
	   contenido: usa el mismo mecanismo, y si el dia de manana el ancho amplio
	   cambia de 72rem a otra cosa, esto acompana con un solo valor que tocar.
	   Abajo de 72rem no hace nada, que es lo correcto: en el celular la franja
	   sigue ocupando todo lo que le dejan los margenes de la pagina. */
	max-width: 72rem;
	margin-inline: auto;
	padding: 2rem 2.1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--primario, #7a2b2b);
	color: #fff;
}

.rf-banner-titulo {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--titulos, Alegreya, Georgia, serif);
	font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem);
	line-height: 1.25;
	font-weight: 600;
	color: #fff;
	text-wrap: balance;
}

.rf-banner-bajada {
	margin: 0;
	max-width: 34rem;
	font-size: 0.98rem;
	line-height: 1.55;
	/* 86% de blanco sobre la banda: 6,79:1. Se escribe con color-mix para que
	   siga el color de la banda si algun dia cambia, con un valor plano de
	   respaldo para navegadores que no lo entiendan. */
	color: #ece1e1;
	color: color-mix(in srgb, #fff 86%, var(--wp--preset--color--primario, #7a2b2b));
}

/* Los enlaces que se pongan adentro del banner tienen que verse sobre azul: el
   color de enlace del tema es ese mismo azul y desapareceria. */
.rf-banner a {
	color: #fff;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* LA BAJADA SE ALINEA CON EL TITULO, Y COSTO TRES INTENTOS. QUEDA ESCRITO.

   El grupo del banner tenia el layout "constrained" de WordPress, que le pone
   `margin-left: auto` y `margin-right: auto` A CADA HIJO. Con un max-width mas
   chico que la columna, eso CENTRA la bajada: quedaba 47 px a la derecha del
   titulo y parecia un error de maquetado (medido: x del titulo 634, x de la
   bajada 681).

   LO QUE NO FUNCIONO, y por que: primero `margin: 0 auto 0 0` en
   .rf-banner-bajada, y despues la misma regla con dos clases para ganar por
   especificidad. Ninguna de las dos tomo. El motivo es que WordPress emite esos
   margenes CON !important, asi que no se le gana con especificidad: se le gana
   no entrando en esa pelea.

   LA SOLUCION: el grupo del banner usa layout "default" (flujo normal) en vez de
   "constrained". Sin layout constrained no hay margenes automaticos, y el
   max-width de la bajada limita el ancho hacia la derecha, que es lo que se
   queria. Sin agregar un solo !important: el unico que tiene esta hoja es el de
   prefers-reduced-motion, que si corresponde porque anula animaciones ajenas.

   REGLA GENERAL PARA ESTE TEMA: cuando un margen o un ancho "no toma" adentro de
   un grupo, mirar primero QUE LAYOUT tiene el grupo. Casi siempre es eso, y no
   la hoja de estilos. */

@media (max-width: 40rem) {
	.rf-banner { padding: 1.5rem 1.35rem; }
}

/* =============================================================================
   LAS PLANTILLAS PROPIAS DE ARCHIVO Y DE FICHA (1.5.0)

   POR QUE EL TEMA SE HACE CARGO DE ESTAS DOS. Hasta la 1.4.0 las ponia Ollie, y
   eso metia arriba de CADA titulo la FECHA DE PUBLICACION del post — el dia en
   que n8n lo escribio. Con 53 eventos publicados el mismo dia, "5 septiembre,
   2026" aparecia cincuenta y tres veces, y encima COMPETIA con la fecha real
   del evento, que esta justo debajo. Ruido que ademas confunde: la fecha que
   importa en una agenda es cuando ES, no cuando se cargo.

   De paso se arregla el otro pendiente de la misma familia: el titulo del
   archivo salia alineado a la izquierda y fuera de la columna, porque la
   plantilla de Ollie lo metia en un grupo alignwide.

   AHORA EL ARCHIVO Y LA PORTADA SE VEN IGUAL, que es lo que corresponde: son la
   misma lista mirada por dos puertas distintas.

   La consulta del archivo usa `inherit: true` A PROPOSITO: hereda la consulta
   principal, que es la que rf_orden_de_la_agenda ya ordena por fecha del evento
   y limpia de pasados. Poner una consulta propia aca la dejaria afuera de esa
   regla y el archivo empezaria a mostrar cosas distintas que la portada.
   ============================================================================= */

.rf-archivo { padding-block: 2.5rem 1rem; }

.rf-archivo-titulo {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--titulos, Alegreya, Georgia, serif);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	line-height: 1.2;
}

.rf-archivo-bajada {
	margin: 0 0 1.75rem;
	max-width: 34rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
	font-size: 0.95rem;
}

.rf-archivo-titulo + .wp-block-query { margin-top: 1.5rem; }

.rf-ficha { padding-block: 2.5rem 1rem; }
.rf-ficha-titulo { margin: 0 0 1.5rem; }

.rf-ficha-volver {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	font-size: 0.92rem;
}

/* =============================================================================
   EL COLOR DICE DE QUÉ ES — 1.6.0 (05-09-2026)

   Pedido de Pablo mirando las placas: que los tres universos se distingan
   también en los títulos de la agenda, no solo en las imágenes.

   LA CLASE LA PONE EL PLUGIN (rf-eventos 1.4.0, `rf_universo_principal`), que
   es quien sabe qué es cada evento. Acá solo se decide cómo se ve. Un evento
   con dos universos recibe UNA sola clase: gana el más específico
   (tango > raíz latinoamericana > raíz argentina).

   CONTRASTE MEDIDO sobre el papel #f5f1e8, no estimado a ojo:
     bordo   #7a2b2b →  8,44:1     verde  #1f5c4e →  6,90:1
     azul    #2b3a55 → 10,13:1
   Los tres pasan AA (4,5:1) con aire de sobra; el bordo y el azul pasan
   también AAA (7:1). El verde queda a 6,90, apenas por debajo de AAA: se
   eligió igual porque a 7:1 el verde se vuelve casi negro y deja de leerse
   como verde, que era justamente el punto.

   OJO: EL COLOR NO PUEDE SER EL ÚNICO QUE INFORMA. Quien no distingue rojo de
   verde ve tres títulos oscuros y nada más. Por eso el universo TAMBIÉN va
   escrito en la ficha del evento, y esta hoja no le saca el subrayado a nada
   ni usa color para decir "esto se puede clickear".
   ========================================================================== */

.rf-cartelera-titulo a {
	color: var(--wp--preset--color--texto, #1b1714);
}

.rf-u-raiz-argentina .wp-block-post-title a {
	color: var(--wp--preset--color--primario, #7a2b2b);
}

.rf-u-raiz-latinoamericana .wp-block-post-title a {
	color: var(--wp--preset--color--raiz-latinoamericana, #1f5c4e);
}

.rf-u-tango .wp-block-post-title a {
	color: var(--wp--preset--color--tango, #2b3a55);
}

/* EL PUNTO DE COLOR — 1.19.0 (15-09-2026)

   POR QUE. Desde la 1.6.0 los títulos vienen en tres colores según el universo
   y en NINGUNA parte del sitio se decía. Auditoría del 15-09, mirando el sitio
   con ojos de lector nuevo: "Riviera Live Music" en verde y "Las horas bajas"
   en azul, al lado de seis títulos bordó, se leen como enlaces visitados o como
   un error. La información estaba y no llegaba.

   Y EL COMENTARIO DE ARRIBA YA LO DECÍA, escrito en la 1.6.0: «el color no
   puede ser el único que informa; quien no distingue rojo de verde ve tres
   títulos oscuros y nada más». La respuesta de entonces fue escribir el
   universo EN LA FICHA — que es verdad, pero llega tarde: el lector ya recorrió
   ciento diez títulos de colores en el listado antes de abrir uno.

   EL PUNTO ES LA MITAD QUE FALTABA. Va en dos lugares y por eso funciona:
     · antes de cada título del listado, y
     · en los tres chips de QUÉ, que YA ERAN la leyenda y no lo sabían
       (la clase rf-u-chip-… la pone el plugin, rf-zonas 1.38.0).
   El mismo punto en los dos lados es lo que hace el código aprendible, y
   además es el par no-cromático que pide la pauta WCAG 1.4.1: quien no
   distingue los tonos igual lee el nombre escrito en el chip.

   MISMA FUENTE DE COLOR QUE LOS TÍTULOS —las variables de la paleta— para que
   el día que un universo cambie de color no queden el título y su punto de
   colores distintos. Un dato en dos lugares que nada ata es la 4.94. */

.rf-cartelera-titulo::before,
.rf-u-chip::before {
	content: "";
	display: inline-block;
	/* En em y no en px: el punto acompaña al texto si cambia el tamaño. */
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	margin-right: 0.5em;
	/* Sin esto, el punto se apoya en la línea de base y parece caído. */
	vertical-align: 0.06em;
	/* El valor por defecto es el bordo, que es el universo mayoritario y el que
	   corresponde cuando el evento no trae clase de universo: así ninguna fila
	   queda con un hueco donde las demás tienen un punto. */
	background: var(--wp--preset--color--primario, #7a2b2b);
}

.rf-u-raiz-latinoamericana .rf-cartelera-titulo::before,
.rf-u-chip-raiz-latinoamericana::before {
	background: var(--wp--preset--color--raiz-latinoamericana, #1f5c4e);
}

.rf-u-tango .rf-cartelera-titulo::before,
.rf-u-chip-tango::before {
	background: var(--wp--preset--color--tango, #2b3a55);
}

/* EL CHIP ACTIVO tiene fondo bordó sólido: un punto bordó encima desaparecería
   y uno de otro color pelearía con el fondo. Se pinta del color del papel, que
   lo deja verse como un hueco y mantiene la fila pareja. */
.rf-u-chip.es-actual::before {
	background: var(--wp--preset--color--superficie, #fffdf9);
}

/* La ficha: el título del evento y el filete de "volver" toman el mismo color,
   así la ficha se siente parte de la misma familia que su línea del listado. */
body.rf-u-raiz-argentina .rf-ficha-titulo { color: var(--wp--preset--color--primario, #7a2b2b); }
body.rf-u-raiz-latinoamericana .rf-ficha-titulo { color: var(--wp--preset--color--raiz-latinoamericana, #1f5c4e); }
body.rf-u-tango .rf-ficha-titulo { color: var(--wp--preset--color--tango, #2b3a55); }

/* =============================================================================
   LA COLUMNA LATERAL DE LA FICHA — 1.7.0 (05-09-2026)

   QUE SE ESTA PROBANDO: si la ficha de evento gana con una columna a la
   derecha (otros eventos del mismo lugar, proximas fechas, y en el futuro un
   destacado) o si se lee mejor a una sola columna.

   COMO SE MIRA: ?columna=no apaga la columna en cualquier ficha. Es una llave
   para comparar, no una opcion del sitio; cuando se decida, se saca.

   LO QUE HAY QUE ENTENDER ANTES DE TOCAR UN VALOR: la columna de texto NO
   PUEDE ANGOSTARSE. Una ficha se lee, y una linea de mas de ~75 caracteres o
   de menos de ~45 cansa. Por eso el ancho amplio subio de 68rem a 72rem: la
   lateral se SUMA, no se resta. Si algun dia hay que elegir entre angostar el
   texto y sacar la columna, se saca la columna.

   Y POR QUE UN GRID Y NO UN FLOAT: con float, la columna corta el texto por el
   medio y en el celular queda incrustada en un parrafo. Con grid, abajo de
   60rem las dos zonas se apilan solas, en el orden en que estan escritas: la
   ficha primero, lo lateral despues. Que es el orden correcto para el que
   entro a mirar UN evento.
   ========================================================================= */

.rf-columnas,
.rf-ficha-columnas { display: block; }

@media (min-width: 60rem) {
	.rf-columnas,
	.rf-ficha-columnas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: 3.5rem;
		align-items: start;
	}
	/* La lateral acompana el scroll: en una ficha corta queda arriba, en una
	   larga no se pierde. 6rem deja aire bajo el encabezado. */
	.rf-col-lateral,
	.rf-ficha-lateral {
		position: sticky;
		top: 2rem;
	}
}

/* Con ?columna=no la ficha vuelve a ser una sola columna centrada, igual que
   en la 1.6.0, para que la comparacion sea honesta. */
body.rf-sin-columna .rf-col-lateral,
body.rf-sin-columna .rf-ficha-lateral { display: none; }
body.rf-sin-columna .rf-columnas,
body.rf-sin-columna .rf-ficha-columnas {
	display: block;
	max-width: 44rem;
	margin-inline: auto;
}

.rf-lateral-modulo {
	margin-bottom: 2.25rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}
.rf-lateral-modulo:last-child { border-bottom: 0; }

/* El titulo del modulo NO compite con el titulo del evento: versalita chica,
   suave. En una ficha hay un solo titulo, y no es este. */
.rf-lateral-h {
	/* EL ROTULO CON SU RAYADO — 1.9.8 (13-09-2026)
	   Pablo trajo Rosario en Cartel como referencia: ahi cada seccion abre con
	   una etiqueta solida y el resto de la fila se rellena con un rayado
	   diagonal. Eso ANCLA la seccion y ordena la pagina sin agregar un color
	   nuevo — que es justo lo que este tema no quiere (doc 14: "sobrio y
	   editorial"). Se toma la estructura, no la paleta.
	   Se hace con un ::after que ocupa lo que sobra de la fila: asi el rayado
	   mide siempre lo que le queda al titulo, sea "POR CIUDAD" o
	   "PROXIMAS FECHAS EN TODA LA AGENDA", sin una sola medida fija. */
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1.05rem;
	font-family: var(--wp--preset--font-family--cuerpo, inherit);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-lateral-h::after {
	content: "";
	flex: 1;
	height: 7px;
	background: repeating-linear-gradient(
		-45deg,
		var(--wp--preset--color--borde, #e2d9c9) 0 2px,
		transparent 2px 5px );
}

/* EL RAYADO SE RACIONA.                    (1.31.0, 16-09-2026 — punto 11)

   QUE PASABA. El rayado es de la 1.9.8 y la idea sigue siendo buena: ancla una
   sección sin agregar un color nuevo. Pero lo llevan TODOS los rótulos de grupo,
   y contados sobre la agenda real son CINCO en una sola página: «Por ciudad» y
   «Por sala» arriba en la columna, «Por género» y «Por ciudad» abajo en el
   «Seguí explorando», y el rótulo de la zona libre. A esa frecuencia deja de
   anclar nada y pasa a ser textura de fondo, que es exactamente lo contrario de
   para lo que se puso.

   QUEDA SOLO EN LA COLUMNA LATERAL, que es donde hace su trabajo: ahí los
   rótulos están apilados en una columna angosta y el rayado los separa de un
   vistazo. En el bloque ancho del pie, donde cada rótulo ya tiene su propio
   espacio, no separa nada.

   SE ESCRIBE APAGÁNDOLO PRIMERO Y PRENDIÉNDOLO DESPUÉS, y no al revés: así el
   rayado es la excepción y no la regla. Un rótulo nuevo en un lugar nuevo nace
   sin rayado, que es lo que queremos; con la regla al revés, nacería con él y
   habría que acordarse de apagarlo. */
.rf-lateral-h::after { display: none; }
.rf-col-lateral .rf-lateral-h::after,
.rf-ficha-lateral .rf-lateral-h::after { display: block; }

/* EL AIRE QUE FALTABA — 1.9.8.
   En el lateral, "POR CIUDAD" y "POR SALA" son DOS bloques [rf_explorar]
   distintos (asi esta la parte de plantilla). `.rf-explorar` no tenia NINGUN
   margen vertical: el aire estaba definido ADENTRO de cada bloque, entre sus
   grupos, y no ENTRE bloques. Resultado: el ultimo chip de ciudades y el rotulo
   "POR SALA" quedaban pegados, sin un pixel en el medio. Se veia como desorden
   y era una medida que faltaba.
   Esta regla tambien separa el ultimo bloque del calendario que va debajo, y
   usa 2.25rem para respetar el ritmo que ya tiene `.rf-lateral-modulo`. */
.rf-lateral .rf-explorar { margin-bottom: 2.25rem; }

.rf-lateral-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-lateral-item + .rf-lateral-item {
	margin-top: 0.95rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-lateral-fecha {
	display: block;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-lateral-titulo {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.95rem;
	line-height: 1.35;
	text-decoration: none;
}
.rf-lateral-titulo:hover,
.rf-lateral-titulo:focus { text-decoration: underline; }

.rf-lateral-pie {
	margin: 1rem 0 0;
	font-size: 0.85rem;
}

/* El hueco de muestra. Solo lo ve quien puede editar (lo decide el plugin);
   el borde punteado es para que se lea como "todavia no hay nada aca". */
.rf-hueco,
.rf-lateral-hueco {
	min-height: 250px;
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--borde, #e2d9c9);
	border-bottom: 1px dashed var(--wp--preset--color--borde, #e2d9c9);
}

/* =============================================================================
   LAS ZONAS QUE RODEAN AL CONTENIDO — 1.8.0 (05-09-2026)

   QUE SON. Lo que en un tema viejo habrian sido los "sidebars": una franja
   arriba, una abajo y una columna al costado. En un tema de bloques no hay
   areas de widgets; hay PARTES DE PLANTILLA, y estas reglas visten lo que esas
   partes ponen adentro.

   LA IDEA, antes de tocar un valor: LAS ZONAS NO COMPITEN CON LA AGENDA. Son
   caminos, no contenido. Por eso van en el tamaño de letra chico de la columna
   lateral, en gris suave, y separadas por una linea fina en vez de por una caja
   de color. El unico color fuerte del sitio sigue siendo el bordo de los
   enlaces, y ahora tambien el chip de "donde estoy parado".

   Y POR QUE LA GRILLA SE LLAMA .rf-columnas Y NO .rf-ficha-columnas: porque
   desde la 1.8.0 la usan cuatro plantillas, no solo la ficha. Los nombres
   viejos siguen funcionando a proposito: si alguna plantilla quedo
   personalizada en la base, sigue teniendo estilo.
   ========================================================================= */

.rf-zona {
	font-size: 0.92rem;
}

.rf-zona-arriba {
	padding-block: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

/* La de abajo se despega del contenido con aire y un fondo apenas distinto:
   es el final de la pagina, no un parrafo mas. */
.rf-zona-abajo {
	margin-top: 3.5rem;
	padding-block: 2.25rem 2.5rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	background: var(--wp--preset--color--superficie, #fffdf9);
}

/* --- CHIPS: las filas de "por donde entro" ------------------------------- */

/* LAS TRES FILAS DE ARRIBA LLEVAN SU NOMBRE (1.10.0).

   QUE ESTABA MAL. Nueve chips en tres renglones sin decir de que hablaba cada
   renglon. El ojo veia una pila despareja —Pablo: "pegoteados o desordenados"—
   y no tres ejes. El arreglo no es mover los botones: es nombrarlos. Con el
   rotulo a la izquierda, los mismos nueve chips se leen como tres preguntas.

   POR QUE UNA GRILLA Y NO UN FLOAT O UN FLEX: la primera columna es FIJA
   (5.4rem, que es lo que mide "CUÁNDO" en versalitas mas su aire). Fija quiere
   decir que los tres renglones de chips arrancan en la MISMA x aunque los
   rotulos midan distinto — que es lo unico que hace que se vean como filas de
   una tabla y no como tres frases sueltas.

   EL ANCHO DE CORTE ES 34rem Y NO 40rem: a 40rem todavia entra un rotulo mas
   dos o tres chips, y apilarlo ahi seria regalar alto sin ganar nada. Abajo de
   34rem el rotulo se come casi un tercio del renglon, y ahi si conviene que se
   pare arriba de sus chips. */

.rf-filtros > * + * { margin-top: 0.85rem; }

/* SE LLAMA rf-filtros-fila Y NO rf-fila DESDE LA 1.29.0, y es un arreglo, no un
   gusto. `.rf-fila` ya existía —el formulario de cargar un evento, dos campos
   por renglón— y esa regla vive MÁS ABAJO en esta misma hoja: con la misma
   especificidad, le ganaba por orden. Medido el 16-09 en 1920 px: esta fila se
   dibujaba en dos columnas iguales de 568 px y los chips se iban al renglón de
   abajo. O sea que lo que está escrito acá arriba —el rótulo A LA IZQUIERDA,
   los tres renglones arrancando en la misma x— NUNCA se vio en el sitio. Es el
   mismo bicho que `.rf-legal` el 15-09, y hay una prueba que impide reunirlos. */
.rf-filtros-fila {
	display: grid;
	grid-template-columns: 5.4rem 1fr;
	align-items: start;
	gap: 0.9rem;
}

/* EL PÁRRAFO QUE NO ESCRIBIÓ NADIE. Adentro de cada fila aparece un `<p></p>`
   vacío que mete `wpautop`, la función que WordPress le pasa por encima a la
   salida de todo shortcode. En la grilla ocupaba la segunda celda y empujaba
   los chips al renglón siguiente: es la SEGUNDA causa de lo mismo de arriba, y
   con arreglar solo el nombre de la clase no alcanzaba.

   ES UN PARCHE Y SE DICE: lo correcto sería que wpautop no tocara esa salida,
   pero pelearse con wpautop desde un shortcode cuesta bastante más que esta
   línea y se rompe distinto en cada versión de WordPress. */
.rf-filtros p:empty { display: none; }

/* NO ES UN TITULO: no encabeza contenido, nombra una lista. Por eso es un
   <span> con aria-hidden y el nombre accesible se lo lleva el <ul> de al lado
   (aria-label). Un <h3> aca haria que un lector de pantalla anunciara tres
   encabezados nuevos en la pagina, arriba del titulo de verdad. */
.rf-fila-rotulo {
	padding-top: 0.6rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave, #635a50);
	white-space: nowrap;
}

@media (max-width: 34rem) {
	.rf-filtros-fila {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
	.rf-fila-rotulo { padding-top: 0; }
}

.rf-chips {
	display: flex;
	flex-wrap: wrap;
	/* 0.4rem era apretado para algo que se toca con el dedo, y con las filas
	   pegadas la lista se lee como una mancha en vez de como filas. El gap de
	   fila va un poco mas grande que el de columna a proposito: es lo que hace
	   que se vean los renglones. */
	gap: 0.5rem 0.45rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alto minimo 2.2rem y no menos: un chip es un blanco para el dedo, y en el
   celular por debajo de ~36 px se falla al tocarlo. */
.rf-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	min-height: 2.2rem;
	/* BORDE FUERTE Y NO EL BORDE COMUN: un chip es un control, y el borde es lo
	   unico que dice donde empieza y donde termina. El borde de #e2d9c9 da
	   1,38:1 contra el fondo — no se ve. #8d8069 da 3,81:1 contra la superficie
	   y 3,43:1 contra el papel, que es el minimo que pide la pauta para el
	   contorno de algo que se toca. Medido, no elegido a ojo. */
	border: 1px solid var(--wp--preset--color--borde-fuerte, #8d8069);
	border-radius: 999px;
	background: var(--wp--preset--color--superficie, #fffdf9);
	color: var(--wp--preset--color--texto, #1b1714);
	font-size: 0.85rem;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

a.rf-chip:hover,
a.rf-chip:focus {
	border-color: var(--wp--preset--color--primario, #7a2b2b);
	color: var(--wp--preset--color--primario, #7a2b2b);
	text-decoration: none;
}

/* DONDE ESTOY PARADO. No es un enlace —el plugin lo dibuja como <span>— asi
   que el color solido no promete nada que no cumpla. */
.rf-chip.es-actual {
	border-color: var(--wp--preset--color--primario, #7a2b2b);
	background: var(--wp--preset--color--primario, #7a2b2b);
	color: #fffdf9;
	font-weight: 600;
}

/* LA SALIDA ACTIVA SE MARCA BAJITO.                    (1.29.0, 16-09-2026)

   QUE SIGNIFICA CADA COSA. "Todas las fechas", "Toda la agenda" y "Todas las
   ubicaciones" son las SALIDAS de cada eje: cuando están activas no elegiste
   nada, estás en el estado por omisión. Los otros chips, activos, quieren decir
   que filtraste. Hasta la 1.28.0 los dos casos se pintaban igual —bordó sólido—
   y en la tira del teléfono eso dejaba lo más llamativo de la pantalla en los
   tres botones que no filtran nada.

   LA REGLA QUE QUEDA, y vale igual en el teléfono y en la computadora: BORDÓ
   SÓLIDO QUIERE DECIR QUE HAY UN FILTRO PUESTO. De un vistazo se ve si estás
   mirando todo o mirando un recorte.

   SIN COLOR NUEVO: borde y letra en el mismo bordó de siempre, sobre el mismo
   papel. La regla de la paleta desde la 1.4.0 es que el color no lo ponga el
   sitio, y un tinte rosa pálido —la otra opción que se miró— lo habría puesto.

   SE ENGANCHA DE `li:first-child` porque la salida es, en los tres ejes, el
   primer elemento de su lista: lo pone el plugin así desde la 1.25.0 y hay
   comprobaciones que lo sostienen. En el teléfono el CSS la manda al final a la
   vista, pero en el HTML sigue siendo la primera, así que esto vale en los dos
   lados sin una segunda regla. */
.rf-chips > li:first-child .rf-chip.es-actual {
	background: var(--wp--preset--color--superficie, #fffdf9);
	border-color: var(--wp--preset--color--primario, #7a2b2b);
	color: var(--wp--preset--color--primario, #7a2b2b);
	font-weight: 600;
}

/* --- SEGUI EXPLORANDO ---------------------------------------------------- */

.rf-explorar-h {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-size: 1.1rem;
	font-weight: 600;
}

.rf-explorar-grupo + .rf-explorar-grupo { margin-top: 1.4rem; }

/* En pantalla ancha los grupos van uno al lado del otro; abajo de 48rem se
   apilan solos. Sin numero fijo de columnas: si manana hay cuatro
   taxonomias, entran igual. */
@media (min-width: 48rem) {
	.rf-explorar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: 1.5rem 2.5rem;
	}
	.rf-explorar-grupo + .rf-explorar-grupo { margin-top: 0; }
}

/* --- LO QUE ESTA EN CURSO, AL PIE DE LA AGENDA (1.9.7) -------------------- */

/* Va DEBAJO de la lista, en la columna ancha, no en el lateral. Por eso no
   hereda la linea divisoria de .rf-lateral-modulo: es una caja cerrada, con su
   propio fondo, que se lee como "esto es otra cosa" y no como un evento mas.
   Discreta a proposito: es una salida, no una invitacion que compita con la
   agenda que la persona vino a mirar. */
.rf-encurso {
	margin-top: 2rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	border-radius: .4rem;
	background: var(--wp--preset--color--superficie, #f2ece0);
}
.rf-encurso.rf-lateral-modulo { border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9); }
.rf-encurso-p { margin: 0 0 .5rem; font-size: .92rem; }
.rf-encurso .rf-lateral-pie { margin: 0; }

/* --- EL CALENDARIO DEL LATERAL (1.9.6) ----------------------------------- */

/* Siete columnas iguales y celdas cuadradas. `aspect-ratio` en vez de una
   altura fija: asi el mes entero sigue entrando cuando la columna se angosta,
   que es lo que pasa en el telefono. */
.rf-cal .rf-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}
.rf-cal-mes { font-weight: 600; font-size: .9rem; }
.rf-cal-flecha {
	text-decoration: none;
	font-size: 1.3rem;
	line-height: 1;
	padding: 0 .4rem;
	border-radius: .25rem;
	color: var(--wp--preset--color--enlace, #7a1f2b);
}
.rf-cal-flecha:hover,
.rf-cal-flecha:focus-visible { background: var(--wp--preset--color--superficie, #f2ece0); }

.rf-cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.rf-cal-cab {
	text-align: center;
	font-size: .62rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave, #6b6257);
	padding-bottom: .25rem;
}
.rf-cal-vacio { aspect-ratio: 1; }

.rf-cal-dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	border-radius: .25rem;
}

/* UN DIA SIN EVENTOS NO ES UN ENLACE — el plugin lo dibuja como <span>. Se ve
   apagado para que la diferencia se note ANTES de intentar tocarlo. */
.rf-cal-no { color: var(--wp--preset--color--texto-suave, #6b6257); opacity: .45; }

.rf-cal-hay {
	text-decoration: none;
	color: var(--wp--preset--color--tinta, #1d1a17);
	background: var(--wp--preset--color--superficie, #f2ece0);
	font-weight: 600;
}
.rf-cal-hay:hover,
.rf-cal-hay:focus-visible {
	background: var(--wp--preset--color--enlace, #7a1f2b);
	color: var(--wp--preset--color--fondo, #fbf7ef);
}
.rf-cal-c { font-size: .58rem; line-height: 1; opacity: .75; }

/* HOY se marca con un borde y no con un relleno, para que no compita con los
   dias que tienen eventos: son dos informaciones distintas y la que importa
   para quien busca algo que hacer es la segunda. */
.rf-cal-hoy { box-shadow: inset 0 0 0 1px var(--wp--preset--color--borde-fuerte, #c8b79a); }

.rf-cal-elegido {
	background: var(--wp--preset--color--enlace, #7a1f2b);
	color: var(--wp--preset--color--fondo, #fbf7ef);
}
.rf-cal-elegido .rf-cal-c { opacity: .85; }

/* --- EL HUECO DE MUESTRA ------------------------------------------------- */

/* La altura real la pone el shortcode con un style en linea, porque depende de
   la medida pedida; aca solo va lo que no cambia. */
.rf-hueco {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px dashed var(--wp--preset--color--borde, #e2d9c9);
	background: transparent;
}

/* En la lateral el hueco ya venia con su borde; en las zonas de arriba y abajo
   no tiene que sumar la linea de separacion del modulo. */
.rf-zona .rf-hueco {
	margin-top: 1.25rem;
	margin-bottom: 0;
	padding: 1rem;
	border-bottom: 1px dashed var(--wp--preset--color--borde, #e2d9c9);
}

/* --- LA COLUMNA, FUERA DE LA FICHA --------------------------------------- */

/* En la portada y en la agenda la lateral no lleva titulo de seccion propio:
   los modulos ya se presentan solos. Un poco mas de aire arriba para que no
   quede pegada al titulo de la pagina. */
.rf-portada .rf-col-lateral,
.rf-archivo .rf-col-lateral { padding-top: 0.35rem; }

/* --- LOS CANALES PROPIOS, EN LA ZONA DE ABAJO (1.8.1) --------------------

   POR QUE SEPARADO DE "SEGUI EXPLORANDO" Y NO AL LADO: lo de arriba lleva a
   MAS AGENDA; esto lleva AFUERA del sitio y pide algo (que te sigan, que te
   manden un evento). Son dos intenciones distintas y por eso hay una linea
   entre las dos, no una columna mas de la misma grilla.

   Los enlaces NO abren en pestaña nueva a proposito: decidir eso por el lector
   es una molestia, y en el celular ademas rompe el boton de atras.
   ------------------------------------------------------------------------- */

.rf-seguinos {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-seguinos-canales {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.rf-seguinos-enviar {
	margin: 0;
	max-width: 46rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

/* =============================================================================
   EL FORMULARIO DE CARGA — 1.8.2 (05-09-2026)

   QUE VISTE. La pagina /cargar-evento, que dibuja el plugin (rf-cargar.php).
   Vale la regla de siempre: el plugin dice QUE HAY, el tema dice COMO SE VE. Si
   mañana se cambia el tema, el formulario sigue funcionando; se vera distinto.

   LA IDEA: que no parezca un formulario. Quien lo llena es alguien que organiza
   una peña desde el telefono, un martes, apurado. Campos anchos, etiquetas
   arriba y no al costado, nada de columnas apretadas, y los opcionales
   PLEGADOS — porque un formulario de veinte campos es un formulario vacio.

   ALTURA MINIMA 2.75rem EN TODO LO QUE SE TOCA. Por debajo de ~44 px se falla
   al tocarlo en el celular, y este formulario se llena en el celular.
   ========================================================================== */

.rf-form { max-width: 40rem; margin-inline: auto; }

.rf-form-intro {
	margin: 0 0 1.75rem;
	font-size: 1.05rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-campo { margin-bottom: 1.25rem; }

.rf-campo label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.rf-campo input,
.rf-campo textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--borde-fuerte, #8d8069);
	border-radius: 4px;
	background: var(--wp--preset--color--superficie, #fffdf9);
	color: var(--wp--preset--color--texto, #1b1714);
	font: inherit;
	font-size: 1rem;   /* 16px: menos que esto y iOS hace zoom solo al tocar */
}

.rf-campo textarea { min-height: 5rem; resize: vertical; }

/* LOS CAMPOS SE VEÍAN EN 13 px Y LA REGLA DE ARRIBA NUNCA SE APLICÓ.
   (1.32.0, 16-09-2026)

   MEDIDO EN EL SITIO, no deducido: los 20 campos del formulario de carga daban
   13 px —el `small` de Ollie—, con el `font-size: 1rem` de acá arriba escrito,
   comentado y sin efecto.

   QUIÉN GANABA. El tema padre trae:

       input:not([type="submit"]):not([type="radio"]), select, textarea
           { font-size: var(--wp--preset--font-size--small); }

   Cada `:not()` SUMA la especificidad de lo que lleva adentro, así que ese
   selector pesa (0,2,1) contra el (0,1,1) de `.rf-campo input`. Gana Ollie.
   Es la misma familia de bicho que `.rf-fila` esta misma mañana, y van dos en
   un día: una regla correcta a la que le gana otra.

   POR QUÉ IMPORTA Y NO ES COSMÉTICO: por debajo de 16 px, iOS HACE ZOOM SOLO al
   tocar un campo. Quien entra desde un enlace de Instagram, en un iPhone, ve la
   página saltar y agrandarse en cada uno de los ocho campos obligatorios. No
   está roto, pero se siente roto, y es la primera impresión de alguien que vino
   a regalarnos un evento.

   SE COPIA LA FORMA DEL SELECTOR DE OLLIE, con sus dos `:not()`, y así este
   pesa (0,3,1) y gana por especificidad y no por orden de carga. Ganar por
   orden funcionaría hoy —el hijo carga después— y se rompería el día que algo
   cambie el orden de las hojas. */
.rf-campo input:not( [type="submit"] ):not( [type="radio"] ),
.rf-campo select,
.rf-campo textarea {
	font-size: 1rem;   /* 16px: menos que esto y iOS hace zoom solo al tocar */
}

.rf-campo input:focus,
.rf-campo textarea:focus {
	outline: 2px solid var(--wp--preset--color--primario, #7a2b2b);
	outline-offset: 1px;
}

.rf-ayuda {
	margin: 0.3rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

/* Dos campos por fila en pantalla ancha; uno solo en el telefono. */
.rf-fila { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .rf-fila { grid-template-columns: 1fr 1fr; } }

.rf-mas {
	margin: 0.5rem 0 1.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	border-radius: 4px;
	background: var(--wp--preset--color--superficie, #fffdf9);
}
.rf-mas summary { cursor: pointer; font-weight: 600; }
.rf-mas[open] summary { margin-bottom: 1rem; }

/* --- LAS CASILLAS QUE SE FIRMAN ----------------------------------------
   Se leen, no se saltean: por eso van en caja propia, con mas aire que
   cualquier otro campo y con la letra del cuerpo, no en letra chica. Una
   cesion de derechos en letra de 11 px es una cesion que nadie leyo. */

.rf-consent {
	margin: 1.75rem 0;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--borde-fuerte, #8d8069);
	border-radius: 4px;
	background: var(--wp--preset--color--superficie, #fffdf9);
}

.rf-check {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-bottom: 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	cursor: pointer;
}
.rf-check:last-of-type { margin-bottom: 0; }

.rf-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--primario, #7a2b2b);
}

.rf-check-permanente {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

/* La trampa para robots. Fuera de la pantalla y no `display:none`: algunos
   robots saltean lo que esta oculto con display, y entonces la trampa no
   atrapa a nadie. Un lector de pantalla tampoco la anuncia porque el
   contenedor lleva aria-hidden. */
.rf-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rf-boton {
	min-height: 2.75rem;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primario, #7a2b2b);
	color: #fffdf9;                 /* 9,36:1 sobre el bordo — medido */
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.rf-boton:hover { filter: brightness(1.15); }
.rf-boton:focus-visible { outline: 3px solid var(--wp--preset--color--texto, #1b1714); outline-offset: 2px; }

/* El resultado. Reusa la banda de aviso que ya tiene el sitio para "datos sin
   confirmar": el lector ya sabe que ese amarillo significa "prestá atención". */
.rf-resultado:empty { display: none; }
.rf-resultado {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 0 4px 4px 0;
	font-size: 0.95rem;
	word-break: break-word;
}
.rf-resultado.es-mal {
	background: #f8eeda;
	border-left: 4px solid var(--wp--preset--color--acento, #8a6212);
	color: #4f3a10;                 /* 9,37:1 — medido */
}
.rf-resultado.es-bien {
	background: #e8f0e5;
	border-left: 4px solid #2f6b3a;
	color: var(--wp--preset--color--texto, #1b1714);   /* 15,29:1 — medido */
}

.rf-legal { margin-top: 1.5rem; }

/* LA CIUDAD EN LA LINEA DE CADA EVENTO (1.9.1)
   El peso lo pone el plugin con <strong>, a proposito: si esta hoja no llegara,
   la ciudad tiene que seguir distinguiendose igual. Aca solo se afina el color,
   para que pese sin gritar mas que el titulo. */
.rf-cartelera-cuando .rf-ciudad,
.rf-ciudad {
	color: var(--wp--preset--color--tinta, #2b2622);
}

/* =============================================================================
   EL BUSCADOR (1.9.5)
   ============================================================================= */

/* La caja del encabezado. Se encoge en pantallas chicas en vez de empujar al
   titulo del sitio a otra linea: en un telefono, lo primero tiene que seguir
   siendo saber donde estas. */
.rf-cabecera-derecha {
	gap: 0.9rem;
	flex: 1 1 18rem;
	justify-content: flex-end;
}

.rf-buscador {
	flex: 1 1 14rem;
	max-width: 24rem;
	margin: 0;
}

.rf-buscador .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	border-radius: 3px;
	background: var(--wp--preset--color--fondo, #fdfaf4);
	padding: 0;
}

.rf-buscador .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.45rem 0.6rem;
	font-size: 0.95rem;
	min-width: 0;
}

.rf-buscador .wp-block-search__button {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	background: transparent;
	color: var(--wp--preset--color--enlace, #7c2230);
	font-size: 0.9rem;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

.rf-buscador .wp-block-search__button:hover,
.rf-buscador .wp-block-search__button:focus-visible {
	text-decoration: underline;
}

/* EL FOCO SE VE. Un buscador es de las pocas cosas que se usan con el teclado
   de punta a punta, y el contorno del navegador desaparece sobre el borde
   claro de la caja. */
.rf-buscador .wp-block-search__input:focus-visible,
.rf-buscador .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--enlace, #7c2230);
	outline-offset: 1px;
}

/* La caja repetida arriba de los resultados: quien no encontro lo que buscaba
   corrige ahi mismo, sin volver al encabezado. */
.rf-buscador-ancho {
	max-width: none;
	margin-block: 1rem 1.75rem;
}

.rf-resultados .rf-archivo-bajada {
	color: var(--wp--preset--color--texto-suave, #635a50);
	font-size: 0.95rem;
}

/* LA MARCA DE LO QUE YA PASO.
   El peso lo pone el plugin con <strong>, igual que la ciudad y por el mismo
   motivo: si esta hoja no llegara, "Ya pasó" tiene que seguir distinguiendose.
   Aca solo se le da el tono apagado, para que se lea como un dato y no como una
   advertencia. */
.rf-cartelera-cuando .rf-paso,
.rf-paso {
	color: var(--wp--preset--color--texto-suave, #635a50);
	font-variant: all-small-caps;
	letter-spacing: 0.03em;
}


/* =============================================================================
   LA FICHA DE UN LUGAR (1.11.0)

   Va entre el titulo de la sala y su lista de eventos. Es una FRANJA y no una
   caja con borde: una caja ahi compite con las fichas de eventos que vienen
   abajo, que si son cajas. Lo unico que la separa es una linea y aire, el mismo
   recurso que ya usa .rf-zona-abajo.

   Y NO LLEVA TITULO. El titulo de la pagina ya dice el nombre de la sala;
   repetirlo dos renglones mas abajo es ruido. Lo que la ficha agrega es el
   donde, el como contactarla y de donde salieron esos datos.
   ============================================================================= */

.rf-ficha {
	margin: 0 0 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

/* La direccion es el dato que mas se busca en esta pagina —"¿donde queda?"— y
   por eso va primero y con el cuerpo del texto, no en letra chica. */
.rf-ficha-donde {
	margin: 0 0 0.9rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texto, #1b1714);
}

.rf-ficha-enlaces { margin: 0; }

/* LA PLACA DEL LUGAR (1.12.0). Va arriba de todo y al ancho de la columna.
   width/height van en el HTML ademas de aca: sin ellos el navegador no sabe
   cuanto va a medir hasta que la descarga, y la pagina salta cuando llega. */
.rf-ficha-placa {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.35rem;
	border-radius: 6px;
}

/* DE DONDE SALIERON LOS DATOS. En letra chica y suave a proposito: es una nota
   al pie, no una advertencia. La ficha de un evento sin confirmar SI usa un
   recuadro amarillo, porque ahi el dato puede estar mal; aca el dato es
   publico y lo que se aclara es el origen. */
.rf-ficha-origen {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

@media (max-width: 34rem) {
	.rf-ficha { margin-bottom: 1.5rem; padding-bottom: 1.15rem; }
}


/* =============================================================================
   EL CARTEL DE LA CASA (1.13.0)

   El aviso de 728x90 de la zona de arriba, ocupado por el propio sitio mientras
   ese espacio no se venda. Dos pantallas que se turnan: el dominio sobre bordo
   y la bajada sobre negro, con las letras apareciendo de a una.

   TRES COSAS QUE HAY QUE ENTENDER ANTES DE TOCAR UN NUMERO:

   1. EL TAMANO DE LA LETRA ESTA ATADO AL ANCHO DE LA CAJA (unidades cqw), no a
      un numero fijo. Por eso a 390 px el cartel se ve entero y mas chico en vez
      de recortarse. 728 px no entran en un telefono, y un banner que obliga a
      arrastrar de costado es peor que ninguno. El `font-size` en px que va
      antes es el respaldo para un navegador que no entienda cqw.

   2. NO GIRA PARA SIEMPRE. Da las vueltas que diga --rf-veces (3 por defecto) y
      SE QUEDA QUIETO EN LA PANTALLA BORDO. Un cartel que se mueve sin parar al
      lado de una lista de eventos le compite a la lista todo el tiempo, y a los
      tres minutos de leer la agenda molesta. Por eso los dos juegos de
      fotogramas TERMINAN en el estado de reposo —la capa de arriba visible, la
      de abajo no— y llevan `forwards`: sin eso, al terminar la ultima vuelta el
      cartel se quedaria en blanco.

   3. QUIEN PIDIO NO VER MOVIMIENTO NO LO VE. Le queda el bordo quieto con el
      dominio. Es la unica regla de esta hoja que usa !important, y corresponde:
      esta anulando animaciones, que es justamente para lo que existe.
   ============================================================================= */

.rf-cartel {
	container-type: inline-size;
	position: relative;
	display: block;
	width: 100%;
	max-width: 728px;
	aspect-ratio: 728 / 90;
	margin-inline: auto;
	border-radius: 5px;
	overflow: hidden;
	/* isolation aisla las capas: sin esto, un fondo de la pagina puede
	   asomarse entre las dos mientras una se desvanece. */
	isolation: isolate;
	text-decoration: none;
}

/* LOS NÚMEROS DE LA SECUENCIA VIVEN ACÁ Y EN NINGÚN OTRO LADO.
   Los eligió Pablo el 16-09 mirándolos correr en el banco del cartel, no a ojo.
   Si hay que retocar la secuencia, se tocan estos tres y nada más. */
.rf-cartel {
	--rf-golpe:   350ms;   /* cada uno de los cuatro estados del destello */
	--rf-letra:    55ms;   /* lo que tarda en aparecer cada letra */
	--rf-lectura: 800ms;   /* lo que queda quieta cada pantalla ya escrita */

	/* Derivados. --rf-largo lo publica el plugin: son las letras del mensaje. */
	--rf-destello: calc(var(--rf-golpe) * 4);
	--rf-escribir: calc(var(--rf-letra) * var(--rf-largo, 22));
	--rf-pantalla: calc(var(--rf-escribir) + var(--rf-lectura));
}

/* LAS CUATRO CAPAS SE APILAN Y SE TURNAN POR OPACIDAD, y arrancan TODAS en 0:
   así, mientras a una no le llega su turno, no está. Antes el valor de reposo
   era visible y hacía falta que la animación la apagara; con el reposo en 0 una
   capa que nunca se anime simplemente no se ve, en vez de verse siempre. */
.rf-cartel-capa {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3.2cqw;
	text-align: center;
	opacity: 0;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

/* EL DESTELLO. Cuatro estados con el mensaje YA ESCRITO desde el primer
   fotograma: lo que llama la atención es el mensaje, no el movimiento.

   350 ms POR ESTADO, Y ES UN PISO, NO UN GUSTO. Son 2,86 cambios por segundo.
   La pauta WCAG 2.3.1 pide no pasar de TRES destellos por segundo, y blanco
   contra negro es el cambio de luz más grande que puede haber en una pantalla:
   por encima de ese número, en una minoría chica pero real, puede provocar
   malestar. NO BAJAR DE 334 ms. */
.rf-cartel-golpe {
	animation-name: rf-cartel-golpe;
	animation-duration: var(--rf-destello);
}

/* LAS TRES PANTALLAS QUE ESCRIBEN. Cada una espera su turno con --rf-desde y se
   apaga cuando entra la siguiente; la tercera se queda. Los turnos se calculan,
   no se escriben: cambiar --rf-letra corre las tres solas. */
.rf-cartel-p1,
.rf-cartel-p2,
.rf-cartel-p3 {
	animation-duration: var(--rf-pantalla);
	animation-delay: var(--rf-desde);
}
.rf-cartel-p1,
.rf-cartel-p2 { animation-name: rf-cartel-pantalla; }
.rf-cartel-p3 { animation-name: rf-cartel-ultima; }

.rf-cartel-p1 { --rf-desde: var(--rf-destello); }
.rf-cartel-p2 { --rf-desde: calc(var(--rf-destello) + var(--rf-pantalla)); }
.rf-cartel-p3 { --rf-desde: calc(var(--rf-destello) + var(--rf-pantalla) * 2); }

/* LOS COLORES DE CADA PANTALLA. La primera es papel con letras bordó — elegido
   por Pablo el 16-09 entre esa y seguir en bordó: así en la costura con el
   destello cambian el fondo y el texto a la vez, que es lo que él quiso.
   NEGRO Y NO #000: el negro puro contra un papel crema se ve como un agujero.
   #12100e es la tinta del tema un paso más oscura, y sigue dando 17,6:1 con el
   texto claro de encima. */
.rf-cartel-p1 {
	background: var(--wp--preset--color--superficie, #fffdf9);
	color: var(--wp--preset--color--primario, #7a2b2b);
}
.rf-cartel-p2 {
	background: #12100e;
	color: #f6f2ea;
}
.rf-cartel-p3 {
	background: var(--wp--preset--color--primario, #7a2b2b);
	color: var(--wp--preset--color--papel, #f5f1e8);
}

.rf-cartel b {
	font-family: var(--wp--preset--font-family--titulos, Alegreya, Georgia, serif);
	font-weight: 700;
	font-size: 52px;
	/* EL TAMAÑO SE ACHICA SI EL TEXTO NO ENTRA — 1.21.1 (15-09-2026)
	 *
	 * ANTES ERA 7.1cqw a secas, y con `white-space: nowrap` arriba de un
	 * `overflow: hidden` eso no achica: RECORTA. El 15-09, al cambiar el texto
	 * por defecto de 22 caracteres a 34, el cartel mostró
	 * "rganizás una peña o un festiv" y nada más. El texto se acortó, pero eso
	 * no arregla nada: el próximo que lo cambie desde el Editor tropieza igual
	 * y no tiene por qué saberlo.
	 *
	 * LA CUENTA: adentro del cartel quedan 93,6cqw útiles (100 menos los 3,2 de
	 * relleno de cada lado). Se calculó con Georgia negrita, que gasta unos
	 * 0,52em por letra en texto mixto. DESDE LA 1.23.0 EL CARTEL LO DIBUJA
	 * ALEGREYA, que es más angosta —ronda los 0,47em—, así que la cuenta quedó
	 * conservadora: el texto entra con aire de sobra. Se deja el 0,52 a
	 * propósito, porque errar hacia abajo solo deja letra más chica, y errar
	 * hacia arriba corta la frase, que es el defecto que esto vino a arreglar.
	 * Así que N letras entran si
	 *     tamaño × N × 0,52 ≤ 93,6cqw   →   tamaño ≤ 180cqw / N
	 * Se usa 165 en vez de 180 para dejar aire: las mayúsculas, la ñ, los signos
	 * de apertura y las flechas son más anchos que el promedio.
	 *
	 * EL min() ES LA MITAD QUE IMPORTA: con textos cortos gana el 7,1cqw de
	 * siempre y NO SE VE NINGÚN CAMBIO; el cálculo solo entra cuando de verdad
	 * no entra. El plugin publica --rf-largo (rf-zonas 1.41.1); si faltara, el
	 * respaldo de 22 deja el tamaño de siempre. */
	font-size: min(7.1cqw, calc(165cqw / var(--rf-largo, 22)));
	letter-spacing: -0.012em;
	line-height: 1;
	white-space: nowrap;
}

.rf-cartel .rf-cartel-chico {
	font-size: 34px;
	/* Misma cuenta que arriba, con su propio techo. */
	font-size: min(5.4cqw, calc(165cqw / var(--rf-largo, 31)));
	font-weight: 600;
	letter-spacing: 0;
}

/* CADA LETRA APARECE CUANDO LE TOCA: el turno de su capa más su posición en la
   palabra. El plugin numera las letras con --i; acá solo se multiplica.
   La capa del destello NO lleva letras sueltas —su texto va entero— así que
   esta regla no la alcanza. */
.rf-cartel i {
	font-style: normal;
	display: inline-block;
	opacity: 0;
	animation-name: rf-cartel-letra;
	animation-duration: 120ms;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: calc(var(--rf-desde, 0ms) + var(--i, 0) * var(--rf-letra));
}


/* EL DESTELLO. Cada estado se repite al final de su cuarto para que el cambio
   sea un CORTE y no un degradé: el fondo y el color interpolan solos, y un
   degradé de blanco a negro no es un destello, es un fundido. */
@keyframes rf-cartel-golpe {
	0%,   24.9% { opacity: 1; background: var(--wp--preset--color--superficie, #fffdf9); color: var(--wp--preset--color--primario, #7a2b2b) }
	25%,  49.9% { opacity: 1; background: #12100e;                                       color: #f6f2ea }
	50%,  74.9% { opacity: 1; background: var(--wp--preset--color--superficie, #fffdf9); color: var(--wp--preset--color--primario, #7a2b2b) }
	75%,  99.9% { opacity: 1; background: var(--wp--preset--color--primario, #7a2b2b);   color: var(--wp--preset--color--papel, #f5f1e8) }
	100%        { opacity: 0 }
}

/* Una pantalla que entra, se queda y le deja el lugar a la siguiente. */
@keyframes rf-cartel-pantalla {
	0%, 99.9% { opacity: 1 }
	100%      { opacity: 0 }
}

/* LA ÚLTIMA NO SE APAGA. Es la que ve quien llega treinta segundos después, y
   es la que tiene que decir lo que el sitio quiere que se haga. */
@keyframes rf-cartel-ultima {
	0%, 100% { opacity: 1 }
}

@keyframes rf-cartel-letra {
	from { opacity: 0; transform: translateY(0.14em) }
	to   { opacity: 1; transform: none }
}

/* QUIEN PIDIÓ NO VER MOVIMIENTO NO VE NADA DE ESTO. Le queda la última
   pantalla —bordó, con el mensaje entero— quieta desde el primer instante. Las
   otras tres se sacan del dibujo en vez de taparse: una capa con opacity 0
   encima de la buena igual se lleva los clics. */
@media (prefers-reduced-motion: reduce) {
	.rf-cartel-capa,
	.rf-cartel i {
		animation: none !important;
		transform: none !important;
	}
	.rf-cartel-golpe,
	.rf-cartel-p1,
	.rf-cartel-p2 { display: none !important; }
	.rf-cartel-p3,
	.rf-cartel-p3 i { opacity: 1 !important; }
}


/* =============================================================================
   EL DESTACADO DE LA COLUMNA (1.14.0)

   300x250 debajo del calendario: una foto propia, un nombre y un enlace a un
   sitio de afuera.

   LA FOTO NO SE EDITA: object-fit la encuadra. La primera es cuadrada y el
   espacio no; recortarla a mano seria un paso que se olvida cada vez que se
   cambie el destacado. `object-position: center 45%` sube apenas el encuadre,
   porque en una foto con cielo y suelo lo que importa esta un poco mas arriba
   del centro geometrico.

   EL ACERCAMIENTO ES DE UNA SOLA PASADA Y NO VUELVE. 8% en 14 segundos, con
   `forwards`: no se ve moverse si uno lo mira de frente, se nota al volver la
   vista. Esa es la idea — que la columna este viva sin robarle atencion a la
   agenda, que es lo que la gente vino a leer. Un bucle aca seria un cartel
   parpadeando al lado de una lista.
   ============================================================================= */

.rf-destacado {
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	aspect-ratio: 300 / 250;
	overflow: hidden;
	border-radius: 5px;
	/* La franja bordo de abajo lo ata al resto del sitio: es el mismo recurso
	   que usan las placas. */
	border-bottom: 5px solid var(--wp--preset--color--primario, #7a2b2b);
	text-decoration: none;
	isolation: isolate;
	background: #12100e;
}

.rf-destacado-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	animation: rf-destacado-zoom 14s ease-out forwards;
}

.rf-destacado-quieto .rf-destacado-foto { animation: none; }

/* EL VELO NO ES DECORACION: sin el, un titulo blanco sobre una foto clara puede
   quedar ilegible, y no se sabe de antemano que foto va a poner Pablo. El
   degradado garantiza el contraste pase lo que pase abajo. */
.rf-destacado-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top,
		rgba(10,8,6,.88) 0%, rgba(10,8,6,.45) 38%, rgba(10,8,6,0) 68% );
}

.rf-destacado-texto {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.9rem 1rem 0.95rem;
}

.rf-destacado-texto b {
	font-family: var(--wp--preset--font-family--titulos, Alegreya, Georgia, serif);
	font-weight: 700;
	font-size: 1.28rem;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0,0,0,.55);
	opacity: 0;
	animation: rf-destacado-entra .7s .35s ease-out forwards;
}

.rf-destacado-texto em {
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,.88);
	opacity: 0;
	animation: rf-destacado-entra .7s .75s ease-out forwards;
}

/* QUE ES ESTO, DICHO EN LA PAGINA. Hoy es un intercambio entre paginas amigas,
   pero el lugar es publicitario: el rotulo tiene que estar puesto de antes. */
.rf-destacado-rotulo {
	position: absolute;
	z-index: 2;
	top: 0; left: 0;
	padding: 4px 8px;
	border-bottom-right-radius: 4px;
	background: rgba(10,8,6,.55);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

a.rf-destacado:hover .rf-destacado-texto em,
a.rf-destacado:focus-visible .rf-destacado-texto em {
	color: #fff;
	text-decoration: underline;
}

/* El aviso de "no se pudo dibujar", que solo ve quien puede arreglarlo. */
.rf-destacado-aviso {
	margin: 0;
	padding: 0.7rem 0.85rem;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto, #1b1714);
}

@keyframes rf-destacado-zoom {
	from { transform: scale(1) }
	to   { transform: scale(1.08) }
}
@keyframes rf-destacado-entra {
	from { opacity: 0; transform: translateY(8px) }
	to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
	.rf-destacado-foto,
	.rf-destacado-texto b,
	.rf-destacado-texto em {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}


/* =============================================================================
   EL DIRECTORIO DE SALAS (1.15.0) — la pagina /salas

   DOS COLUMNAS EN PANTALLA GRANDE Y UNA EN EL TELEFONO, con `columns` y no con
   grid: una lista de nombres de largo desparejo se lee mejor en columnas de
   periodico —se recorre de arriba abajo— que en una grilla que obliga a saltar
   en zigzag. `break-inside: avoid` evita que un nombre quede partido entre una
   columna y la otra.
   ============================================================================= */

.rf-salas-h {
	margin: 2rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--titulos, inherit);
	font-size: 1.15rem;
	font-weight: 600;
}
.rf-salas-h:first-child { margin-top: 0; }

.rf-salas-nota {
	margin: 0 0 1rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-salas-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2.5rem;
}

.rf-salas-lista li {
	break-inside: avoid;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-salas-lista a {
	display: block;
	font-size: 1rem;
	line-height: 1.35;
}

/* El dato de al lado —cuantas fechas, o donde queda— en letra chica y suave:
   es el que ayuda a elegir, no el que se lee primero. */
.rf-salas-dato {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

.rf-salas-aviso {
	margin: 1.6rem 0 0;
	padding: 0.75rem 0.9rem;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	font-size: 0.85rem;
	line-height: 1.55;
}

@media (max-width: 40rem) {
	.rf-salas-lista { columns: 1; }
}


/* =============================================================================
   LA PUERTA DE WHATSAPP (1.16.0)

   Es un enlace normal, no un boton verde: vive DENTRO de una frase —"¿hay algo
   para corregir? escribinos por WhatsApp"— y un boton ahi partiria el renglon.
   Lo unico que se le agrega es el simbolo, para que se reconozca de un vistazo
   sin tener que leer la palabra, y `white-space: nowrap` en el par simbolo +
   texto, para que "por WhatsApp" no quede partido entre dos lineas.
   ============================================================================= */

.rf-wa {
	white-space: nowrap;
}

.rf-wa::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.3em;
	vertical-align: -0.12em;
	background-color: currentColor;
	/* El icono va como MASCARA y no como imagen: asi toma el color del enlace
	   —bordo en el texto, blanco si algun dia va sobre fondo oscuro— y no hay
	   que servir dos versiones. Es un SVG propio incrustado: ni un pedido mas
	   al servidor, y nada que descargar de un tercero. */
	-webkit-mask: var(--rf-wa-icono) center / contain no-repeat;
	mask: var(--rf-wa-icono) center / contain no-repeat;
}

/* EL SIMBOLO VIVE EN :root DESDE LA 1.20.0, y no adentro de .rf-wa como estaba.
   Motivo: el boton flotante (1.20.0) usa el MISMO dibujo, y tenerlo escrito dos
   veces es la 4.94 — el dia que cambie uno, el otro queda distinto y nadie lo
   relaciona. Una sola definicion, dos usos. */
:root {
	--rf-wa-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.98-.14.16-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.84-.85 2.05 0 1.2.87 2.37.99 2.53.12.16 1.71 2.62 4.15 3.67.58.25 1.03.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
}

/* El renglón de Términos en el pie — 1.25.0 (15-09-2026)

   Lo dibuja [rf_legal], que devuelve cadena vacía mientras la página no exista
   ni esté publicada. O sea que el párrafo puede quedar vacío, y un párrafo
   vacío con margen deja un hueco raro en el pie. `:empty` lo apaga: si no hay
   enlace, no hay renglón. Es la misma regla que el resto del pie — cada
   ladrillo se calla solo y el CSS no tiene que saber cuándo. */
/* EL MARGEN NO ENTRABA, y el motivo es de especificidad: unas líneas más arriba
   está `.rf-pie p { margin: 0 0 0.7rem }`, que con dos partes le gana a una
   clase sola. El renglón quedaba pegado a los botones de las redes — medido el
   16-09: CERO píxeles de separación. Se nombra el ancestro para empatarle y
   ganarle por orden. La lección es vieja y vuelve: cuando una regla «no hace
   nada», casi siempre hay otra más específica que sí. */
.rf-pie .rf-pie-legal-linea {
	margin: 1.6rem 0 0;
	font-size: 0.9rem;
}
.rf-pie .rf-pie-legal-linea:empty { display: none; margin: 0; }

/* OJO CON EL NOMBRE: `.rf-legal` YA EXISTE en esta hoja, mucho más arriba, para
   la nota legal del formulario de carga. Reusarlo acá habría hecho que ese
   `margin-top: 1.5rem` cayera sobre este enlace sin que nadie lo pidiera. Dos
   cosas distintas, dos nombres distintos. */
.rf-pie-legal-enlace { color: var(--wp--preset--color--texto-suave, #635a50); }
.rf-pie-legal-enlace:hover,
.rf-pie-legal-enlace:focus-visible { color: var(--wp--preset--color--primario, #7a2b2b); }

/* «Difundimos, no organizamos» — 1.24.0 (15-09-2026)

   NO ES UNA ADVERTENCIA Y NO TIENE QUE PARECERLO. La ficha ya tiene una, arriba
   de todo: el cartel de «Datos sin confirmar», que hoy marca 2 eventos de 86 y
   significa algo preciso. Si esta línea gritara —caja, color, borde—, esa
   dejaría de destacarse y las dos se volverían ruido. Dos alarmas del mismo peso
   son cero alarmas.

   Así que va del tamaño y del color de la atribución de la fuente, pegada a
   ella, sin caja. Lo único en negrita es la frase que tiene que quedar: que el
   sitio difunde y no organiza. */
.rf-difusion {
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
}

.rf-difusion strong {
	color: var(--wp--preset--color--texto, #1b1714);
	font-weight: 600;
}

/* El renglón de "escribinos" al pie de una ficha de evento: chico y suave, como
   la atribución que tiene arriba. No compite con el evento. */
.rf-corregir-pie {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
}

/* =============================================================================
   EL PIE DE CONTACTO — 1.18.0 (15-09-2026)

   QUE VISTE: parts/pie.html, que va adentro de parts/footer.html y sale en
   todas las paginas. Dos cosas: la frase con la puerta de WhatsApp y la fila de
   redes propias, las dos dibujadas por el plugin ([rf_whatsapp] y [rf_redes]).

   POR QUE NO HAY REGLA PARA "LISTA VACIA": porque no puede haberla. Los dos
   ladrillos devuelven cadena vacia cuando no tienen nada que decir, asi que el
   caso "bloque vacio" no llega al CSS. Si algun dia se ve un hueco aca, el que
   esta mal es el plugin y no esta hoja.

   LOS ENLACES DE LAS REDES NO ABREN EN PESTAÑA NUEVA, igual que los de
   .rf-seguinos, que son los que este bloque reemplaza. La decision esta escrita
   alla arriba y se mantiene.
   ------------------------------------------------------------------------- */

.rf-pie-contacto {
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}

.rf-pie-escribinos {
	margin: 0 0 0.85rem;
	max-width: 46rem;
}

.rf-pie-escribinos strong { color: var(--wp--preset--color--texto, #1b1714); }

/* El renglon que rotula la fila de botones. Es el <p class="rf-redes-t"> que
   pone [rf_redes titulo="..."], y solo existe si hay al menos una red. */
.rf-redes-t {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

/* La fila hereda .rf-chips: ya trae el flex, el wrap y el gap medido para el
   dedo. Aca solo se saca el margen que el pie le pondria por ser un <ul>. */
.rf-redes { margin: 0; }

/* LA PUERTA DE WHATSAPP SUELTA — la que el plugin pone al pie de
   /cargar-evento, de /mi-evento y del directorio /salas (rf_whatsapp_puerta).
   Va separada de lo de arriba con una linea fina: es otra conversacion, igual
   que .rf-corregir-pie en la ficha de un evento. */
.rf-puerta-wa {
	margin: 1.6rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	max-width: 46rem;
}

/* =============================================================================
   EL ENCABEZADO QUE SE QUEDA — 1.20.0 (15-09-2026)

   PEDIDO DE PABLO: que la franja de arriba —el nombre, el buscador y "Agenda"—
   quede fija al bajar, para poder volver a la agenda desde cualquier lugar sin
   subir primero. Se eligió esta variante y NO un botón de "volver arriba"
   aparte: el fijo resuelve lo mismo y de paso deja UN SOLO elemento flotante en
   la página, que es el de WhatsApp.

   VA EN .site-header Y NO EN .rf-cabecera, y no es indistinto: `position:
   sticky` solo pega DENTRO de los límites de su padre. .rf-cabecera vive dentro
   del <header>, que mide exactamente lo mismo que ella, así que ahí no se
   habría pegado nunca — se habría visto perfecto en el editor y no habría hecho
   nada en el sitio. La clase site-header la ponen NUESTRAS plantillas
   (`templates/*.html`, tagName header, className site-header) y banco-buscar lo
   comprueba, para que este bloque no se quede sin nada a qué agarrarse.

   EL COSTO, dicho: son ~72 px permanentes de pantalla. En un celular con la
   barra del navegador eso duele, y por eso al bajar se achica a ~52 px. La
   clase `rf-bajando` la pone el JavaScript del tema; si el JavaScript no
   corriera, el encabezado queda fijo y entero, que es peor pero no roto.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	/* 100 lo deja por encima del contenido y por debajo del flotante (120) y de
	   la barra de WordPress (99999). Los tres números viven acá arriba a
	   propósito: un z-index suelto en otro archivo es una pelea futura. */
	z-index: 100;
	background: var(--wp--preset--color--superficie, #fffdf9);
	transition: box-shadow 0.18s ease;
}

/* LA BARRA DE WORDPRESS. Pablo mira el sitio con sesión iniciada SIEMPRE —se ve
   en todas sus capturas— y ahí WordPress fija una barra propia de 32 px arriba
   de todo. Sin esto, el encabezado se le metería debajo y vería algo distinto
   de lo que ve un visitante, que es la peor clase de diferencia. Abajo de 782
   px esa barra deja de ser fija y se va con el scroll, así que ahí vuelve a 0. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 0; }
}

/* LA SOMBRA SOLO CUANDO ESTÁ PEGADO. Quieto arriba de todo alcanza con el filete
   que ya tiene; despegado del papel necesita decir que está encima de algo. */
body.rf-bajando .site-header {
	box-shadow: 0 6px 16px -14px rgba(27, 23, 20, 0.55);
}

body.rf-bajando .rf-cabecera { padding-block: 0.5rem; }
body.rf-bajando .rf-cabecera .wp-block-site-title { font-size: 1.12rem; }
.rf-cabecera { transition: padding 0.18s ease; }
.rf-cabecera .wp-block-site-title { transition: font-size 0.18s ease; }

/* EL SALTO DE ANCLA. Con un encabezado fijo, cualquier enlace a #algo deja el
   destino tapado debajo de la barra. Es un defecto que no se nota el primer día
   y que después nadie relaciona con esto. Una línea y queda resuelto para
   siempre, incluso para anclas que todavía no existen. */
html { scroll-padding-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.rf-cabecera,
	.rf-cabecera .wp-block-site-title { transition: none !important; }
}

/* En pantallas angostas la fila del encabezado se parte en dos renglones, y dos
   renglones fijos comen demasiado. Al bajar, el buscador cede ancho para que
   el nombre, la caja y "Agenda" entren en uno solo. */
@media (max-width: 40rem) {
	body.rf-bajando .rf-cabecera-fila { flex-wrap: nowrap; gap: 0.5rem; }
	body.rf-bajando .rf-cabecera-derecha { flex: 1 1 auto; min-width: 0; }
	body.rf-bajando .rf-buscador { min-width: 0; }
}


/* =============================================================================
   EL CANAL LATERAL DEL TELÉFONO — 1.29.0 (16-09-2026)

   LO ENCONTRÓ UNA MEDICIÓN, NO EL OJO. Probando la tira se midió el borde
   izquierdo de siete cosas en 386 px de ancho —el nombre del sitio, el
   buscador, el «Eventos», el título de un evento, la fecha del día, el rótulo
   de los filtros y el texto del pie— y las siete daban CERO. Todo el sitio
   arrancaba pegado al vidrio en el celular. En la computadora no se notaba
   nunca, porque ahí el contenido está centrado y le sobra lugar a los costados.

   POR QUÉ PASABA: este tema no declara `useRootPaddingAwareAlignments` ni un
   padding de raíz en theme.json, así que las cinco regiones de primer nivel
   —encabezado, zona de arriba, contenido, zona de abajo, pie— quedan en 0. Con
   pantalla ancha no importa; con 386 px, el ancho útil ES la pantalla.

   SE ARREGLA EN `.wp-site-blocks > *` Y NO REGION POR REGION, que es lo que lo
   deja resuelto para siempre: ESOS son exactamente los cinco bloques de primer
   nivel que arma WordPress, y una plantilla nueva mañana hereda el canal sin
   que haya que acordarse. Region por region habría que nombrar .rf-archivo,
   .rf-portada, .rf-busqueda, .rf-ficha… y olvidarse de una.

   16 px Y NO 20: es la medida estándar del canal lateral en un teléfono, y en
   386 px cada píxel que se va a los costados se lo saca al renglón de texto.
   ========================================================================== */

@media (max-width: 40rem) {
	.wp-site-blocks > * { padding-inline: 1rem; }
}

/* =============================================================================
   LA TIRA DE FILTROS DEL TELÉFONO — 1.28.0 (16-09-2026)

   ES EL PUNTO 6 DE LA AUDITORÍA, y la opción B de las cuatro que se dibujaron.
   Medido sobre el sitio real en 390 px: las tres filas de filtros median 404 px
   de alto —más que el ancho de la pantalla— y el primer evento caía a 745 px.
   Se veía UN evento por pantalla. Y una vez que bajabas, los filtros dejaban de
   existir, porque quedaban arriba: para filtrar había que volver al principio.

   LAS CUATRO DECISIONES, todas de Pablo:

     1. UNA SOLA FILA QUE SE CORRE DE COSTADO, en vez de cinco renglones que se
        parten.
     2. CUÁNDO PRIMERO Y QUÉ DESPUÉS. La pregunta que trae a alguien a una
        agenda es "¿qué hay este finde?". El sitio entero ya es folklore, así
        que el género es un recorte fino, no la entrada.
     3. LA FILA QUEDA PEGADA ABAJO DEL ENCABEZADO AL BAJAR, y el buscador se
        pliega. ESTE es el cambio de verdad; el ahorro de píxeles es la
        consecuencia.
     4. DÓNDE SE QUEDA (16-09). Es un filtro de verdad —se cuelga de la URL y
        compone con el resto—, a diferencia de POR SALA, que es navegación y ya
        tiene su propia página. Como la fila se corre de costado, tenerlo no
        cuesta un solo píxel de alto: cuesta deslizar un poco más.

   ESTAS REGLAS SE CUELGAN DE `.site-header .rf-filtros` Y DE `body.rf-tira`, NO
   DE UN @media A SECAS, y no es un detalle de estilo: son verdaderas solo
   cuando rf-tema.js movió la fila adentro del encabezado. Colgadas del ancho, un
   teléfono sin JavaScript se comería el formato de tira SIN la fila arriba: una
   línea que se corre de costado, perdida sobre el listado, que al bajar
   desaparece igual que hoy. Peor que no haber hecho nada. El motivo de por qué
   se mueve el nodo en vez de resolverlo con `position: sticky` está en
   rf-tema.js, donde vive la decisión.

   LA COMPUTADORA NO SE TOCA (decidido el 16-09). Arriba de 40rem la fila vuelve
   a la zona de arriba y a sus tres renglones rotulados, que son de la 1.25.0 y
   arreglan algo que Pablo marcó él mismo: "los botones se ven pegoteados o
   desordenados". Acá abajo no hay una sola regla que se aplique fuera de la
   tira.
   ========================================================================== */

/* EL ALTO DEL ENCABEZADO CON LA TIRA ADENTRO. Los números, medidos: el renglón
   del nombre + buscador mide ~115 px quieto arriba de todo y ~52 px al bajar
   (regla de la 1.20.0, más abajo el buscador se va del todo); la tira suma 54.
   Al bajar quedan ~106 px de encabezado permanente con el filtro SIEMPRE a
   mano, contra los ~52 de hoy sin filtro ninguno. Esos 54 px de más se pagan
   una vez y se recuperan de sobra: el primer evento pasa de 745 a ~372. */

body.rf-tira .site-header .rf-filtros {
	/* UNA FILA QUE SE CORRE DE COSTADO. `nowrap` es lo que convierte cinco
	   renglones en uno; `overflow-x: auto` es lo que hace que lo que no entra
	   siga siendo alcanzable en vez de quedar cortado. */
	display: flex;
	flex-wrap: nowrap;
	gap: 0.45rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* LA TIRA SE COME EL CANAL DEL ENCABEZADO Y PONE EL SUYO. El margen negativo
	   la devuelve a los bordes de la pantalla —una tira que se corre de costado
	   y se corta 16 px antes del borde parece rota, no parece que siga— y el
	   padding propio deja el primer chip alineado con el nombre del sitio y con
	   los títulos de los eventos. Los dos números son el mismo 1rem a propósito:
	   si el canal cambia, acá hay que cambiarlo igual. */
	margin: 0 -1rem;
	padding: 0.5rem 1rem 0.6rem;
	background: var(--wp--preset--color--superficie, #fffdf9);
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);

	/* LA BARRITA DE SCROLL NO SE DIBUJA. En un teléfono no se ve igual, y en un
	   navegador de escritorio angosto se comería 8 px de alto de una fila que
	   mide 54. Lo que dice que hay más a la derecha es el chip cortado por el
	   borde, que es la misma pista que usa cualquier carrusel. */
	scrollbar-width: none;

	/* DESLIZAR DE COSTADO NO DEBE ARRASTRAR LA PÁGINA ENTERA, ni disparar el
	   "volver atrás" por gesto cuando se llega al principio de la tira. */
	overscroll-behavior-x: contain;
}

body.rf-tira .site-header .rf-filtros::-webkit-scrollbar { display: none; }

/* El margen entre filas de la versión de escritorio no tiene sentido acá: no
   hay filas. Sin esto, cada grupo se despega del anterior. */
body.rf-tira .site-header .rf-filtros > * + * { margin-top: 0; }

/* `display: contents` DISUELVE LA FILA y deja su <ul> como hijo directo de la
   tira. Es lo que permite que los tres grupos se ordenen entre sí y que los
   once chips se lean como una sola tira continua, sin tocar el HTML que dibuja
   el plugin. El rótulo se va: en una tira sin renglones no nombra nada, y su
   nombre accesible lo sigue llevando el <ul> por aria-label. */
body.rf-tira .site-header .rf-filtros-fila { display: contents; }

/* SE ESCONDE TODO LO QUE NO SEA LA LISTA DE CHIPS, y no solo el rótulo: adentro
   de cada fila hay además un `<p></p>` VACÍO que no escribe nadie —lo mete
   `wpautop`, que es lo que WordPress le pasa por encima a la salida de un
   shortcode—. Con `display: contents` esos tres párrafos fantasma se convierten
   en hijos de la tira, y como no llevan `order` se van al frente de los tres
   grupos y se comen 22 px de la primera pantalla en huecos invisibles.

   Medido acá el 16-09 probando la tira antes de publicarla. Escrito por lo
   NEGATIVO —lo que no es .rf-chips no se dibuja— para que el día que wpautop
   invente otra cosa, no haya que volver a descubrir esto. */
body.rf-tira .site-header .rf-filtros-fila > :not( .rf-chips ) { display: none; }

body.rf-tira .site-header .rf-chips {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 0.45rem;
}

/* CUÁNDO, QUÉ, DÓNDE — el orden de la decisión 2. Se hace con `order` y no
   moviendo el HTML: así el orden del documento sigue siendo el de siempre y un
   lector de pantalla anuncia las tres listas con su nombre. Se engancha del
   aria-label porque es lo que el plugin ya pone y es lo que NOMBRA cada eje; una
   clase nueva sería un segundo nombre para lo mismo. */
body.rf-tira .site-header .rf-chips[aria-label="Cuándo"] { order: 1; }
body.rf-tira .site-header .rf-chips[aria-label="Qué"]    { order: 2; }
body.rf-tira .site-header .rf-chips[aria-label="Dónde"]  { order: 3; }

/* LA SALIDA VA AL FINAL DE SU GRUPO (16-09). En el HTML "Todas las fechas" va
   primera desde la 1.25.0, y en la computadora sigue yendo primera: ahí las
   tres filas empiezan igual y por eso se leen como tres preguntas. En la tira no
   hay tres renglones que alinear, y el primer botón que se ve sería justamente
   el que no filtra nada. Se manda al final de SU grupo —no al final de la
   tira—, así sigue pegada a las fechas y se entiende de qué sale. */
body.rf-tira .site-header .rf-chips > li             { order: 0; }
body.rf-tira .site-header .rf-chips > li:first-child { order: 1; }

/* AL BAJAR, EL BUSCADOR SE PLIEGA Y QUEDA EL FILTRO. Mientras mirás la lista, el
   buscador no sirve y el filtro sí. Es lo que paga los 54 px de la tira, y de
   paso contesta la duda que había sobre si plegar el buscador en el celular:
   sí, pero solo mientras se baja, y solo acá. */
body.rf-tira.rf-bajando .rf-cabecera .rf-buscador { display: none; }

/* CON EL ENCABEZADO MÁS ALTO, EL SALTO DE ANCLA TIENE QUE SER MÁS LARGO, o
   cualquier enlace a #algo deja su destino tapado abajo de la tira.

   VA EN :root Y NO EN body, y hay que saberlo: `scroll-padding-top` lo lee el
   elemento que SCROLLEA, que es <html>. Escrito en el body no hace absolutamente
   nada —se ve bien en la hoja y no pasa nada en la pantalla—. Y como la clase la
   pone el JavaScript en el body, hay que subir con :has(). Si un navegador viejo
   no entiende :has(), esta regla entera se descarta y queda el 5.5rem de la
   1.20.0: el ancla cae un poco alta, que es exactamente lo de hoy. */
:root:has( body.rf-tira ) { scroll-padding-top: 8rem; }

/* =============================================================================
   LA COLUMNA LATERAL EN EL TELÉFONO — 1.30.0 (16-09-2026)

   ES LO QUE FALTABA DE LA OPCIÓN B. Abajo de 60rem la columna lateral deja de
   ser columna y cae DEBAJO del listado —eso ya lo hacía el tema—, así que en el
   teléfono lo que hay al pie de la agenda es esto, medido hoy:

       Por ciudad ............. 153 px
       Por sala ............... 239 px
       el calendario .......... 300 px
       el aviso de 300x250 .... 250 px
                                ------
                                942 px

   QUÉ SE VA Y POR QUÉ, que es la decisión de la opción B:

     * POR SALA SE VA, menos su última puerta. Es NAVEGACIÓN, no filtro: son las
       seis salas con fechas próximas, y el sitio ya tiene /salas, que las tiene
       todas. Queda el chip «Directorio de salas», que el plugin marca con
       `rf-li-directorio` desde la 1.52.0 — es la única puerta a ese directorio
       desde la agenda, y sin ella el directorio existiría sin que lo encuentre
       nadie.

     * EL CALENDARIO SE VA. Contesta lo mismo que «Hoy / Este finde», que ahora
       están arriba, a mano y pegados al encabezado. 300 px para repetir una
       pregunta que ya está contestada dos dedos más arriba.

   QUÉ SE QUEDA, Y ESTO ES LO QUE NO HAY QUE «TERMINAR DE LIMPIAR» DESPUÉS:

     * POR CIUDAD SE QUEDA, aunque el dibujo del teléfono no la mostrara. Desde
       rf-eventos 1.14.x el listado NO escribe «Rosario» al lado de cada evento
       —son 41 de 53 y tapaba lo que de verdad se busca—, así que un renglón sin
       ciudad SIGNIFICA Rosario. Eso es implícito, y lo implícito no se lee: esta
       lista, con Rosario primero y su número al lado, ES la aclaración. Está
       dicho desde el 07-09 en parts/lateral-agenda.html: si el bloque se saca,
       hay que volver a escribir la ciudad en cada renglón. En el teléfono vale
       igual que en la computadora.

     * EL AVISO DE 300x250 SE QUEDA. Es el lugar del sitio que algún día paga las
       cuentas, y al pie de una lista que ya se leyó no le molesta a nadie.

   QUEDAN ~453 px en vez de 942, y los que quedan dicen algo.
   ========================================================================== */

@media (max-width: 40rem) {

	/* De POR SALA queda una sola línea: la puerta al directorio. Se apaga el
	   <li> y no el <a>, porque un <li> vacío en una lista flex sigue contando y
	   sigue sumando su gap: seis chips apagados así dejarían ~45 px de blanco.
	   El porqué de que la clase la ponga el plugin está en rf_zonas_chips. */
	.rf-col-lateral .rf-explorar[aria-label$="Por sala"] .rf-lateral-h,
	.rf-col-lateral .rf-explorar[aria-label$="Por sala"] .rf-chips > li {
		display: none;
	}
	.rf-col-lateral .rf-explorar[aria-label$="Por sala"] .rf-chips > li.rf-li-directorio {
		display: block;
	}

	/* El calendario. Se nombra por su clase propia y no por el módulo, que es
	   compartido: `.rf-lateral-modulo` lo llevan también otras cajas. */
	.rf-col-lateral .rf-cal { display: none; }
}

/* =============================================================================
   EL BOTÓN FLOTANTE DE WHATSAPP — 1.20.0 (15-09-2026)

   Lo dibuja el plugin en wp_footer (rf_wa_flotante, rf-eventos 1.40.0); acá solo
   se decide cómo se ve. Bordó y no verde, por pedido de Pablo y porque el verde
   de WhatsApp sería de lejos lo más estridente de una página de papel crema.

   EL SÍMBOLO VA EN BLANCO SOBRE EL BORDÓ y no al revés: pintar el símbolo de
   WhatsApp de otro color es alterar una marca ajena, y sobre un fondo propio no
   hace falta. El dibujo es el mismo de .rf-wa, compartido desde :root.

   Y LLEVA LA PALABRA "Escribinos" AL LADO, no sólo el símbolo: es el mismo
   criterio que hizo que el botón de buscar diga "Buscar" en vez de una lupa
   pelada. En el celular el texto se esconde y queda el símbolo, que a esa altura
   ya es un idioma conocido y además hay menos lugar.

   SE ESCONDE CUANDO APARECE EL PIE, y ésa es la parte que hace que convivan las
   DOS puertas —ésta y la del pie, que Pablo decidió conservar—. Sin esto, al
   llegar abajo de todo el flotante queda literalmente encima del pie, tapándole
   contenido y compitiendo con la otra puerta a diez centímetros. Escondiéndose,
   la flotante acompaña toda la lectura y le cede el lugar a la del pie, que
   tiene texto alrededor explicando por qué escribirías. La clase la pone el
   JavaScript del tema; si no corriera, el botón queda siempre visible, que es
   el comportamiento de cualquier sitio y no rompe nada.
   ========================================================================== */

.rf-wa-flotante {
	position: fixed;
	right: 1rem;
	/* La barra del sistema de un iPhone se come el borde de abajo. */
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 120;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* Alto mínimo 2.75rem: es un blanco para el pulgar, no un enlace. */
	min-height: 2.75rem;
	padding: 0.6rem 1.05rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primario, #7a2b2b);
	color: #fffdf9;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 20px -8px rgba(27, 23, 20, 0.55);
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}

.rf-wa-flotante:hover,
.rf-wa-flotante:focus-visible {
	background: #5f2121;
	color: #fffdf9;
	text-decoration: none;
}

.rf-wa-flotante:focus-visible {
	outline: 2px solid var(--wp--preset--color--texto, #1b1714);
	outline-offset: 3px;
}

.rf-wa-flotante-simbolo {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--rf-wa-icono) center / contain no-repeat;
	mask: var(--rf-wa-icono) center / contain no-repeat;
}

/* ESCONDIDO PERO NO BORRADO: con opacity y pointer-events en vez de display,
   para que la transición exista y para que no salte el layout. */
body.rf-pie-a-la-vista .rf-wa-flotante {
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.rf-wa-flotante { transition: none !important; }
	body.rf-pie-a-la-vista .rf-wa-flotante { transform: none; }
}

@media (max-width: 34rem) {
	.rf-wa-flotante-texto {
		/* Se esconde para la vista y NO para quien escucha la página: sin esto,
		   un lector de pantalla anunciaría un enlace sin nombre. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.rf-wa-flotante { padding: 0.7rem; gap: 0; }
	.rf-wa-flotante-simbolo { width: 1.4em; height: 1.4em; }
}


/* "Agenda completa", al pie de todo, era gris chico y es el único camino de
   vuelta que hay ahí abajo. Pedido de Pablo el 15-09: que pese lo que vale. */
.rf-pie-legal a {
	font-weight: 600;
	color: var(--wp--preset--color--primario, #7a2b2b);
}

/* =============================================================================
   EL CARTEL, AHORA QUE INVITA A ALGO — 1.21.0 (15-09-2026)

   Dos cosas, las dos chicas.

   1. LO QUE DECÍA ACÁ QUEDÓ VIEJO EN LA 1.33.0 y se deja contado porque explica
      una clase que todavía puede llegar del plugin. Decía: con una sola capa
      —`[rf_cartel dos=""]`— el cartel quedaba invisible media vuelta,
      parpadeando, y el plugin marcaba el caso con .rf-cartel-solo para que acá
      se apagara el movimiento. Desde la 1.33.0 el cartel tiene UN solo mensaje
      en cuatro capas siempre, así que ese caso no existe.

   2. AHORA ES UN ENLACE y tiene que parecerlo al tocarlo. Sin subrayado —es una
      superficie entera, no una palabra— pero con un realce al pasar por encima
      y un foco visible para quien navega con el teclado, que en un enlace sin
      texto propio es lo único que avisa dónde está parado.
   ========================================================================== */

/* .rf-cartel-solo YA NO EXISTE, y se cuenta por qué: marcaba el caso de "una
   sola pantalla", que en la versión de dos mensajes dejaba el cartel
   parpadeando media vuelta. Desde la 1.33.0 el cartel SIEMPRE lleva un solo
   mensaje en cuatro capas y ese caso no puede darse. Si el plugin llegara a
   emitir la clase, no hace nada. */

.rf-cartel-enlace {
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.rf-cartel-enlace:hover { filter: brightness(1.08); }

.rf-cartel-enlace:focus-visible {
	outline: 2px solid var(--wp--preset--color--texto, #1b1714);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.rf-cartel-enlace { transition: none !important; }
}

/* =============================================================================
   LA AGENDA SE LEE POR DÍA — 1.22.0 (15-09-2026)

   El título del día lo antepone el plugin al título del primer evento de cada
   día (rf_titulo_del_dia, rf-eventos 1.43.0), así que queda DENTRO del <li> de
   ese evento. No es HTML limpio y está dicho: es el costo del camino que se
   eligió, a cambio de no tocar la consulta de la cartelera.

   ACÁ SE ARREGLA A LA VISTA con márgenes negativos: el título se estira hasta
   los bordes del renglón y el filete de arriba hace de separación entre días.
   El <li> que lo lleva pierde su propio filete, o quedarían dos líneas pegadas.
   ========================================================================== */

.rf-dia {
	/* Se sale del <li> para verse como un encabezado de sección. El 1.1rem de
	   arriba es el padding del propio <li>, que hay que compensar. */
	margin: -1.1rem 0 0.9rem;
	padding: 1.4rem 0 0.5rem;
	border-top: 2px solid var(--wp--preset--color--borde-fuerte, #8d8069);
	font-family: var(--wp--preset--font-family--cuerpo, 'Alegreya Sans', system-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave, #635a50);
}

/* El primer día de la lista no necesita separarse de nada: arriba está el
   título de la página. */
.rf-cartelera-lista > li:first-child .rf-dia {
	margin-top: -1.1rem;
	padding-top: 0.2rem;
	border-top: 0;
}

/* Dos filetes pegados no son una separación, son un error de imprenta: el
   renglón que estrena día se queda sin el suyo. */
.rf-cartelera-lista > li:has(.rf-dia) { border-top: 0; }

/* LA HORA, que es el dato que se busca al recorrer un día, deja de estar en el
   mismo gris que todo lo demás. Tabular para que las horas se alineen entre
   renglones — la tipografía del cuerpo se eligió por esto. */
.rf-hora {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--texto, #1b1714);
}

@media (max-width: 34rem) {
	.rf-dia { font-size: 0.72rem; letter-spacing: 0.07em; }
}

/* =============================================================================
   EL TAMAÑO DE LA LETRA — la raíz          (1.26.0, 16-09-2026)

   POR QUE ESTA LINEA EXISTE, y está medido, no supuesto:

     altura de la x, en proporción al cuerpo de la letra
       Alegreya Sans .... 0,46      <- la nuestra desde la 1.23.0
       Segoe UI ......... 0,50      <- la que el sitio usaba antes en Windows
       Arial ............ 0,52
       Georgia .......... 0,48

   Dos textos del MISMO tamaño en píxeles se ven distintos de grandes según
   cuánto mida su «x», que es lo que el ojo lee. Alegreya Sans tiene la x un 8 %
   más baja que Segoe UI, así que al cambiar de tipografía TODO el sitio se
   achicó — aunque en la 1.23.0 el cuerpo había subido de 1.05 a 1.1rem. Esa
   suba compensaba un 5 % de un 8 %: quedó corta.

   Medido en el sitio el 16-09: el cuerpo renderizaba a 18,4 px y su x medía
   8,5 px. Antes del cambio de tipografía medía 8,8 px. O sea que subir el
   número había dejado la letra MÁS CHICA que antes.

   SE ARREGLA EN LA RAIZ Y NO REGLA POR REGLA. Todo este tema mide en rem, así
   que mover la raíz mueve las ~40 medidas a la vez y mantiene las proporciones
   entre ellas. Tocar una por una habría dejado la escala desprolija otra vez.

   EN PORCENTAJE Y NO EN PIXELES, que no es un detalle: 106,25 % respeta el
   tamaño de letra que la persona configuró en su navegador —quien lo agrandó
   por necesidad lo sigue teniendo agrandado— y `font-size: 17px` se lo pisaría.

   SI SIGUE CHICO, SE CAMBIA ESTE NUMERO Y NADA MAS.

   ---------------------------------------------------------------------------
   VUELTA A 100 %                                       (1.27.0, 16-09-2026)

   El 106,25 % duró una noche. A la mañana Pablo miró el sitio instalado y le
   quedó GRANDE, no chico: la compensación por la x baja de Alegreya Sans
   corrigió de más. Se probaron los dos tamaños en vivo sobre el sitio real
   —inyectando la regla en el navegador, sin publicar una versión por prueba— y
   eligió el 100 %.

   POR QUE NO 105 NI 104, que fue lo primero que se pensó: no se ven. Sobre la
   base de 16 px del navegador, 106,25 % da 17,00 px; 105 % da 16,80 y 104 %
   da 16,64. Son dos y tres décimas de píxel, que el navegador redondea al mismo
   renglón. El escalón más chico que una persona percibe es de 1 px entero:
   100 % = 16 px para abajo, 112,5 % = 18 px para arriba. Publicar un tema para
   mover 0,2 px es gastar una versión en nada.

   QUEDA A PRUEBA. Pablo lo dejó en 100 % "a ver si me acostumbro". Si en unos
   días le sigue molestando, las dos salidas son subir a 112,5 % (18 px) o
   cambiar de tipografía de cuerpo por una de x más alta — NO volver a los
   decimales intermedios.

   SI HAY QUE MOVERLO OTRA VEZ, SE CAMBIA ESTE NUMERO Y NADA MAS. */
html {
	font-size: 100%;   /* 16 px cuando el navegador está en su 16 de fábrica */
}

/* =============================================================================
   LA TIPOGRAFÍA — Alegreya y Alegreya Sans            (1.23.0, 15-09-2026)

   Punto 4 de la auditoría. Hasta hoy el sitio no tenía tipografía de cuerpo
   elegida: decía `system-ui`, que significa "la que tenga el visitante" —Segoe
   UI en Windows, SF Pro en Mac, Roboto en Android—. Eran tres sitios distintos,
   y ninguna de esas tres tenía relación con Georgia, que hacía los títulos. No
   había una pareja tipográfica: había una tipografía elegida y un hueco.

   POR QUÉ ALEGREYA Y NO OTRA. Es de Juan Pablo del Peral, argentino, y está
   diseñada explícitamente para textos largos en español: las diacríticas del
   castellano —la ñ, los acentos, las mayúsculas acentuadas— están resueltas de
   verdad y no adaptadas de una fuente inglesa. Para una agenda de folklore
   argentino, que la tipografía también sea argentina es coherencia, no
   capricho.

   LOS ARCHIVOS VIVEN ACÁ Y NO EN GOOGLE. `recursos/fuentes/*.woff2`, servidos
   por el propio sitio. Es la misma postura del resto del proyecto: no depender
   de terceros, y de paso no contarle a Google quién entra a la agenda. Las
   declaraciones `@font-face` NO se escriben en esta hoja: están en theme.json,
   así que WordPress las emite solo y el editor del panel también las usa. La
   licencia (OFL) viaja con los archivos, que es lo que la licencia pide.

   PESAN 136 KB LOS SIETE, y en una página cargan dos o tres: se recortaron al
   alfabeto latino, se les sacó el hinting y quedaron entre 15 y 23 KB cada uno.
   Conservan lo único que este sitio les pide de OpenType: el `kern` y los
   NÚMEROS TABULARES, que son los que alinean horas y precios entre renglones.
   ========================================================================== */

/* La 'x' de Alegreya Sans es más baja que la de Segoe UI, así que al mismo
   tamaño se lee más chica. La escala de theme.json ya subió el cuerpo de 1.05
   a 1.1rem para compensar: el sitio no queda más grande, queda igual. */

/* Los títulos, con un pelo menos de espacio entre letras. Alegreya viene más
   apretada que Georgia de fábrica, así que acá alcanza con muy poco — el
   -0.012em que necesitaba Georgia a 2.2rem la dejaría amontonada. */
h1, h2, h3,
.wp-block-post-title,
.rf-cartelera-titulo {
	letter-spacing: -0.004em;
}

/* Alegreya tiene ligaduras de verdad y conviene dejarlas trabajar en los
   títulos, donde el tamaño las hace visibles. En el cuerpo no se tocan: las
   estándar ya vienen encendidas por omisión. */
h1, h2, .wp-block-post-title {
	font-feature-settings: "liga" 1, "clig" 1;
}


/* =============================================================================
   CONVOCATORIAS — 1.34.0 (17-09-2026)
   =============================================================================
   Lo minimo para que la seccion nueva se lea como parte del sitio. Casi todo lo
   hereda: la ficha usa .rf-datos, .rf-aviso, .rf-precio, .rf-suave,
   .rf-difusion y .rf-boton, que ya existian. Lo unico propio es el PLAZO.

   EL SEPARADOR DEL ENCABEZADO. Va con color de borde y sin subrayado: tiene que
   separar sin parecer un tercer enlace.
   ========================================================================== */
.rf-nav-sep {
	color: var(--wp--preset--color--borde-fuerte, #8d8069);
	padding-inline: 0.15rem;
}

/* -----------------------------------------------------------------------------
   EL COLOR DEL APURO. Cuatro escalones y no diez, a proposito: mas de tres
   colores dejan de ser un aviso y pasan a ser un arcoiris. Los umbrales viven
   en el PHP (rf_conv_clase_de_plazo) y aca solo se pintan — si algun dia se
   cambian, se cambian alla y esto los sigue.

   Y NO ES SOLO COLOR: el plazo ya viene en <strong>, asi que quien no distingue
   estos tonos igual ve que ese renglon pesa mas que el resto. Un estado que se
   comunica SOLO por color no se comunica.
   -------------------------------------------------------------------------- */
.rf-conv-urgente  { color: #a33; }                                      /* 3 dias o menos */
.rf-conv-pronto   { color: var(--wp--preset--color--acento, #8a6212); } /* hasta 14 */
.rf-conv-abierta  { color: var(--wp--preset--color--raiz-latinoamericana, #1f5c4e); }
.rf-conv-cerrada  { color: var(--wp--preset--color--texto-suave, #635a50); }
/* Sin plazo NO se pinta de ningun color de estado: no informar el cierre no es
   ni urgente ni tranquilo, y pintarlo seria afirmar algo que no sabemos. */
.rf-conv-sin-plazo { color: var(--wp--preset--color--texto-suave, #635a50); }

/* El aviso de "ya cerro" es el mismo cartel que el de datos sin confirmar, en
   gris en vez de bordo: informa un hecho, no pide verificar nada. */
.rf-aviso.rf-conv-cerrada {
	border-left-color: var(--wp--preset--color--borde-fuerte, #8d8069);
}

/* El boton de anotarse, con aire arriba y abajo: es la accion de la pagina y no
   tiene que quedar pegado al dato anterior. */
.rf-conv-anotarse {
	margin-block: 1.4rem;
}

/* =============================================================================
   NINGUN ENLACE SUBRAYADO — 1.35.0 (17-09-2026)
   =============================================================================
   Lo pidio Pablo para todo el sitio. El subrayado global no vivia aca sino en
   theme.json (styles.elements.link), y ademas estaba AL REVES de la convencion:
   subrayado en reposo y SIN subrayado al pasar el mouse. Ahora es reposo limpio
   y subrayado al pasar y al enfocar, que es lo que hace casi todo el sitio ya
   —el titulo del sitio, los titulos de los eventos y los de la columna lateral
   nunca estuvieron subrayados en reposo—.

   LO QUE SIGUE SUBRAYADO, y no es una excepcion olvidada:
     * al pasar el mouse (:hover) y al enfocar (:focus), como respuesta;
     * el foco del teclado, abajo.
   Las dos son RESPUESTAS a una accion, no decoracion en reposo.
   ========================================================================== */

/* EL FOCO DEL TECLADO NO SE NEGOCIA. Quien navega con Tab necesita ver donde
   esta parado, y este subrayado no lo ve nunca quien usa el mouse. Si esto se
   saca, el sitio queda inusable con teclado y no se nota probandolo a mano. */
a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   EL COSTO DEL CAMBIO, DICHO CON NUMEROS, Y COMO SE PAGA

   Sin subrayado, lo unico que distingue un enlace del texto que lo rodea es el
   color. Medido: el bordo de los enlaces (#7a2b2b) contra el negro del cuerpo
   (#1b1714) da 1,87:1 — muy por debajo del 3:1 que hace falta para que la
   diferencia de color alcance por si sola. Contra el fondo el bordo esta
   perfecto (8,44:1): el problema no es LEERLO, es darse cuenta de que es un
   enlace. Y aclarar el bordo hasta llegar a 3:1 exige mezclarle un 20% de
   blanco (#955555), que ya no es el color del proyecto.

   Asi que los enlaces que viven ADENTRO DE UN PARRAFO llevan negrita: una
   segunda señal que no es color ni subrayado. Son pocos y todos son prosa —el
   credito de la fuente, la linea de "difundimos no organizamos", el pie de
   "¿sos quien organiza?", el pie legal, "ver la agenda completa"—.

   NO SE TOCAN las listas ni las filas de datos (`li a`, `dd a`): ahi el enlace
   no esta metido en una oracion, y la posicion y la repeticion ya dicen que se
   puede apretar.

   La navegacion del encabezado queda afuera a proposito: es un `<p>` por como
   esta armado el bloque, pero no es prosa.
   -------------------------------------------------------------------------- */
p a {
	font-weight: 600;
}

.rf-nav a {
	font-weight: inherit;
}

/* =============================================================================
   EL CELULAR, MAS ARRIBA — 1.36.0 (17-09-2026)
   =============================================================================
   Lo pidio Pablo mirando la portada en su telefono: "Proximos eventos" quedaba
   tan abajo que del listado solo se veia el renglon "JUEVES 17 DE SEPTIEMBRE".
   Tres cambios, TODOS solo en el telefono (<= 40rem, el mismo umbral de la tira
   y del encabezado angosto; si algun dia se mueve, se mueven todos juntos).

   LOS NUMEROS SON MEDIDOS, no estimados: se midieron en el navegador contra la
   portada de verdad a 412 px de ancho, antes y despues, dentro de un iframe de
   ese ancho para no adivinar.

       primer evento ....... 709 px  ->  563 px   (146 menos)
       "Proximos eventos" .. 610 px  ->  468 px
       encabezado quieto ... 144 px  ->  109 px
       la tira de filtros .. 190 px  ->  155 px

   ========================================================================== */

/* El tramo largo de la bajada del banner no se dibuja en el telefono, y el
   corto no se dibuja en la computadora. NO son dos textos: es la misma oracion
   con la cola recortada, para que no haya dos redacciones que alguien tenga que
   mantener de acuerdo. Ver parts/destacados.html. */
.rf-solo-angosto { display: none; }

@media (max-width: 40rem) {

	/* -------------------------------------------------------------------------
	   1. LA NAVEGACION SUBE AL RENGLON DEL NOMBRE.
	   Antes: nombre / buscador / "Agenda · Convocatorias", tres renglones.
	   Ahora: [nombre .... Agenda · Convocatorias] y el buscador abajo, entero.
	   Se ahorran 35 px y no se pierde nada: el buscador sigue igual de ancho.

	   OJO CON EL SELECTOR, Y ESTO SE MIDIO: `.rf-cabecera-derecha` SOLO no
	   alcanza para el `display: contents`. WordPress le pone al grupo su propia
	   clase de layout y la regla que gana tiene DOS clases, asi que una sola
	   pierde y el nodo se queda en `flex` — con lo cual el nombre se va ABAJO
	   del buscador, que es peor que antes. Se probo en el navegador contra la
	   pagina real: con un selector de una clase, el nombre quedaba a 150 px y la
	   navegacion a 64; con este, los dos a 64.

	   `display: contents` DISUELVE la caja de la derecha y deja al buscador y a
	   la navegacion como hijos directos de la fila, que ya es flex con
	   `space-between` y `wrap`. Es el mismo recurso que usa la tira de filtros
	   mas abajo, y por el mismo motivo: ordenar sin tocar el HTML.
	   ---------------------------------------------------------------------- */
	.rf-cabecera-fila > .rf-cabecera-derecha { display: contents; }

	.rf-cabecera .wp-block-site-title { order: 1; }
	.rf-cabecera-fila .rf-nav { order: 2; }
	.rf-cabecera-fila .rf-buscador { order: 3; flex: 1 1 100%; max-width: none; }

	/* AL BAJAR, el buscador ya se esconde solo (regla de la 1.20.0) y quedan el
	   nombre y la navegacion en un renglon de 62 px. Esta linea es para que, si
	   algun dia vuelve a mostrarse al bajar, no reclame el 100% del ancho y
	   empuje la navegacion a otro renglon. */
	body.rf-bajando .rf-cabecera-fila .rf-buscador { flex: 1 1 auto; }

	/* -------------------------------------------------------------------------
	   2. LA BAJADA DEL BANNER, CORTA.
	   En el telefono la bajada larga medía 73 px —tres renglones y medio— para
	   decir algo que el titulo ya dice. Queda "Peñas, festivales, eventos.".
	   ---------------------------------------------------------------------- */
	.rf-solo-ancho   { display: none; }
	.rf-solo-angosto { display: inline; }

	/* -------------------------------------------------------------------------
	   3. MENOS AIRE ENTRE BLOQUES, solo en el telefono.
	   En una pantalla de 412 px el aire de la computadora no se lee como
	   respiro: se lee como pantallas que hay que bajar. Los valores de arriba
	   de 40rem no se tocan.
	   ---------------------------------------------------------------------- */
	.rf-banner { padding: 1.4rem 1.3rem; }
	.rf-destacados:not(:empty) { margin-bottom: 1rem; }   /* eran 2.5rem */
	.rf-zona-arriba { padding-block: 0.6rem 0.7rem; }     /* eran 0.9 / 1.1 */
	.rf-portada { padding-block: 1.25rem 1rem; }          /* eran 2.5 / 1 */
	.rf-portada-titulo { margin-bottom: 1rem; }           /* eran 1.5rem */
}
