/* Lo nuestro. base.css y styles.css son copias sin tocar del prototipo, y se
   cargan antes que esta hoja: lo que haga falta ajustar va acá, para poder
   volver a copiar el prototipo sin perder nada.

   Mientras se construye, las secciones vacías no ocupan lugar y la página se
   vería en blanco. Este borde punteado las hace visibles, con su nombre al
   costado. Se saca entero cuando estén todas hechas. */

.aviso-obra {
  margin: 0;
  padding: .6rem 1rem;
  background: #ffe9a8;
  color: #4a3600;
  font: 600 .85rem/1.4 system-ui, sans-serif;
  text-align: center;
}

main > section:empty {
  min-height: 90px;
  margin: 0 1rem;
  border: 2px dashed #c9d3de;
  border-radius: 6px;
}

main > section:empty::before {
  content: "section#" attr(id);
  display: block;
  padding: .6rem 1rem;
  color: #8a99aa;
  font: 600 .8rem/1 ui-monospace, monospace;
}

main > section.hero:empty::before { content: "section.hero"; }

/* ─── Novedades: adaptar las tarjetas a las fotos que tiene el CMS ─────────
   El prototipo dibuja la foto en 16:9 y las suyas venían en esa proporción.
   Las del CMS son 912x700 —la medida que usa también la página interna de
   noticias, que no vamos a cambiar—, así que en 16:9 se les recortaba más de
   una cuarta parte del alto. En una foto de personas eso es cortar cabezas.

   Con la proporción real la foto entra entera y no se recorta nada. La
   tarjeta queda más alta que en el prototipo: es el precio de no inventar
   otro tamaño de imagen, y es lo que se decidió. */
.news-media { aspect-ratio: 912 / 700; }

/* Y para compensar ese alto, el texto se limita a tres líneas.

   Importa más de lo que parece: la grilla es `subgrid`, o sea que las tres
   tarjetas comparten el alto de cada fila. La más larga manda. Y hay noticias
   que son solo una foto, sin una línea de texto —«DIA DEL INTERPRETE» es una—,
   así que esa tarjeta se come el hueco que dejan las otras dos. Cuanto más
   corto el texto, menos hueco. */
.card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Lo mismo con los títulos, que en el CMS son bastante más largos que los del
   prototipo. Cuatro líneas es de sobra; está para que uno enorme no empuje a
   las otras dos tarjetas. */
.card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Las tarjetas de resultados de la guía las estila el prototipo. Su texto de
   pie decía «Ver contacto en AADI ↗», con la flecha de enlace externo: allá
   los resultados salían del sitio. Acá el enlace es a nuestra propia guía. */
.directory-results a:after { content: 'Ver el contacto →'; }

/* ─── Publicaciones impresas ───────────────────────────────────────────────
   La página que junta los InformAADI en papel con la colección Testimonios.
   El prototipo no tiene nada parecido, así que estos estilos son nuestros;
   toman las variables del sistema del prototipo para no desentonar. */
#publicaciones-impresas { padding-block: 64px; }

.publicaciones-impresas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap, 24px);
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.publicaciones-impresas a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  color: var(--brand);
}
.publicaciones-impresas a:hover { border-color: var(--action); }

.pub-tapa { display: block; aspect-ratio: 303 / 380; background: var(--surface-soft); }
.pub-tapa img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pub-datos { display: flex; flex-direction: column; gap: 6px; padding: var(--card-padding, 20px); }
.pub-datos strong { font-size: 17px; line-height: 1.3; }
.pub-autor { font-size: 14px; color: var(--text-muted); }
.pub-datos .more { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; }

@media (max-width: 900px) {
  .publicaciones-impresas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Pie: tantas columnas como secciones tenga el menu del CMS -----------
   El prototipo fija cinco -1.65fr y cuatro iguales- porque su menu tenia
   cuatro secciones. El nuestro sale del panel: hoy son cinco mas «Accesos»,
   manana pueden ser otras.

   EL NUMERO LO CUENTA EL PIE, en footer_nuevo.php, y llega en
   `--columnas-pie`. Antes esto era `repeat(auto-fit, minmax(150px, 1fr))`,
   que parecia lo correcto y no lo era: al lado de una columna en `fr`,
   auto-fit reparte lo que sobra DESPUES de que la del logo se sirve, asi
   que nunca llegaba a crear la ultima y «Accesos» caia sola en un renglon
   aparte.

   El valor de reserva -5- es por si alguna vista dibuja el pie sin pasar la
   variable: se ve como se veia antes, no roto. */
footer .cols {
	grid-template-columns: 1.35fr repeat(var(--columnas-pie, 5), minmax(0, 1fr));
}

/* En pantallas angostas mandan las reglas del prototipo, que apilan las
   columnas de a tres y de a dos. Si esta regla siguiera valiendo, seis
   columnas en un telefono darian tiras de 40 px. */
@media (max-width: 1120px) {
	footer .cols { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 600px) {
	footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	footer .cols > div:first-child { grid-column: 1 / -1; }
}

/* ─── La columna de lectura va centrada, como en el prototipo ──────────────
   El prototipo dibuja las páginas de texto en una columna de 880px centrada
   en la pantalla: el renglón arranca bastante a la derecha del logo y termina
   bastante antes del borde derecho. La regla es de `que-es-aadi.css`:
   `width: min(880px, calc(100% - 108px)); margin-inline: auto`.

   Acá estuvo desarmada desde el 23/09, para que el borde izquierdo del texto
   cayera justo abajo del borde izquierdo del logo. malvarez73 pidió el 30/09
   volver a lo del prototipo.

   NO ALCANZA CON SACAR LO NUESTRO Y DEJAR LA REGLA DE ALLÁ. En el prototipo la
   columna cuelga directamente del <main>, así que ese `calc(100% - 108px)` se
   descuenta de la pantalla entera. Acá cuelga de un `.wrap`, que YA descontó su
   margen —54px, 36px, 24px o 20px según el ancho—, y los dos márgenes se
   sumaban: en un teléfono el texto quedaba 40px más angosto que en el
   prototipo, y en una tableta 72px.

   Entonces se guarda el tope —880px— y el margen se deja en manos del `.wrap`,
   que es el que ya lo sabe. Medido contra el prototipo: a 1280px la columna cae
   en los mismos 193–1073px, y a 375px en los mismos 20–355px.

   EN TODAS, AL FINAL. La lista de excepciones arrancó larga —la biblioteca, la
   guía musical, el archivo, la cartelera y sus eventos, las noticias y la nota
   suelta— y malvarez73 las fue pasando a las centradas el mismo 30/09,
   mirándolas una por una. Hoy no queda ninguna ancha. Anotado porque es al
   revés de lo que uno supondría: que una página tenga buscador, lista o grilla
   no alcanza para dejarla ancha; casi todas entran bien en la columna, y la
   cartelera, que perdía una columna de tarjetas, se resolvió mirándola en
   pantalla y no aplicando la regla.

   La clase `pagina-ancha` se deja igual, sin usuarios: es la manija para la
   página que mañana no entre —una tabla ancha, una grilla que no se puede
   apretar—. Se pone en el <main>, al lado de `institutional-page`, desde
   `$data['main_class']` en el controlador.

   */
.institutional-page .reading {
  width: min(880px, 100%);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.institutional-page.pagina-ancha .reading {
  width: 100%;
  margin-inline: 0;
}

/* Y adentro, el `<div class="container">` que emite la plantilla del CMS deja
   de poner su propio margen: la columna de lectura ya lo puso. Si no, el texto
   queda corrido respecto del título, que es lo que pasaba. */
.institutional-page .contenido-cms .container { width: 100%; margin: 0; }

/* El aire de arriba del contenido. Lo ponía la <section class="prose-section">
   que envolvía todo; ahora que el contenido trae las suyas, se pone acá.
   Y si la primera cosa del contenido YA es una sección, se le saca el suyo
   para que no se sumen los dos. */
.institutional-page .contenido-cms { padding-top: 35px; }
.institutional-page .contenido-cms > .prose-section:first-child { padding-top: 0; }

/* CONSEJO DIRECTIVO - el retrato que no se puede ampliar
   -------------------------------------------------------------------------
   Cuando la foto del CMS no da para ampliar, la vista dibuja la imagen sola
   en lugar del boton. Tiene que ocupar exactamente el mismo lugar que el
   boton, o las filas de la grilla se corren unas respecto de otras. Las
   medidas son las mismas de `.portrait-preview > img` en biografias.css. */
.person-image > img.retrato-chico {
	display: block;
	box-sizing: border-box;
	width: 96px;
	height: 120px;
	border-radius: 6px;
	object-fit: cover;
}


/* BIBLIOTECA - el chevron de "Ver catalogo", dibujado en vez de escrito
   -------------------------------------------------------------------------
   El prototipo lo pone como un caracter, U+2304. La columna donde vive el
   contenido es latin1 y no puede guardarlo, asi que el generador lo saca y
   queda el <span> vacio. Se dibuja con dos bordes: no depende de que la
   tipografia tenga ese caracter, que es una apuesta que no siempre sale.

   El giro al abrir sigue siendo el de biblioteca.css, que rota el span. */
.catalog-chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* -45deg lo deja apuntando para abajo; el translate lo centra despues
	   de girar, porque el cuadrado rotado queda mas alto de lo que ocupa. */
	transform: rotate(45deg) translate(-2px, -2px);
}

.library-catalog[open] .catalog-chevron {
	transform: rotate(225deg) translate(-2px, -2px);
}

/* UN BOTON DENTRO DEL CONTENIDO DEL CMS SEGUIA SIENDO UN BOTON
   -------------------------------------------------------------------------
   `contenido-cms.css` le da a todo <a> el color de enlace, y eso le ganaba
   al blanco de `.btn` por especificidad: el boton "Consultar biblioteca"
   quedaba con letra azul sobre fondo azul, ilegible.

   No es solo de la biblioteca: le pasa a cualquier boton que venga adentro
   de una pagina de contenido. Por eso se arregla para todos y no ahi.

   `.btn.sec` es la variante de fondo blanco y letra azul, asi que esa se
   deja como esta. */
.contenido-cms a.btn:not(.sec),
.contenido-cms a.btn:not(.sec):hover {
	color: #fff;
}

.contenido-cms a.btn:hover {
	text-decoration: none;
}

/* FECHAS DE PAGO - el horario se lee como dato, no como texto
   -------------------------------------------------------------------------
   Cada fila tiene tres niveles: la provincia arriba, el horario, y el
   contenido. Con el estilo heredado el horario y el contenido salían
   exactamente iguales -mismo tamaño, mismo color- y la fila se leía como un
   bloque de tres párrafos sueltos.

   Se lo baja al mismo lugar que `.delegate-role` en el consejo directivo,
   que es el dato al lado de un nombre: mismo color y mismo tamaño, para que
   las dos páginas digan lo mismo de la misma forma. */
.payment-schedule .payment-horario {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin-top: 6px !important;
}

/* TESTIMONIOS - la tarjeta dejo de ser un enlace
   -------------------------------------------------------------------------
   No hay una página por libro: /testimonios los muestra a los ocho juntos.
   Las tarjetas son <article>, no <a>.

   El resaltado al pasar el mouse viene de `styles.css`, que las suponía
   clickeables. Una tarjeta que se ilumina y no hace nada al apretarla es
   peor que una que no se ilumina, así que se apaga. */
.testimony-card:hover { border-color: var(--border); }

/* SEDES - el formulario de contacto, cuando algo falta
   -------------------------------------------------------------------------
   `contacto.css` es la hoja del prototipo y no tiene estado de error: allá el
   formulario se valida solo, con los `required` del navegador. Acá además
   contesta el servidor —hay verificación de Google y comprobación del correo—
   y hay que poder señalar qué campo falta.

   El rojo se usa SOLO con el texto al lado: un borde de color, solo, no dice
   qué pasó, y hay gente que no lo distingue. */
.contact-field.error input,
.contact-field.error select,
.contact-field.error textarea {
	border-color: #b42318;
}

.contact-error {
	display: block;
	color: #b42318;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

#contacto-estado.contacto-ok { color: var(--navy); font-weight: 700; }

/* ─── Las fotos de las sedes van verticales, como en el sitio de hoy ──────
   LAS CINCO FOTOS SON VERTICALES: 796x1120 las cuatro primeras y 744x1084 la
   de Neuquén, o sea tres de alto por dos y pico de ancho. Estaban entrando en
   un marco apaisado de 3:2 con `cover`, así que de un edificio entero se veía
   una franja del medio: ni la puerta ni el cartel. Lo marcó malvarez73 el
   13/10.

   Ahora van como en www.aadim.org.ar/sedes: **185 x 260**, la foto completa.
   Esa medida no la inventamos, está medida de ahí.

   `cover` Y NO `fill`. El sitio de hoy usa `fill` —estirar—, que funciona
   porque sus cuatro fotos tienen exactamente la proporción del marco. La de
   Neuquén no: es 0,686 contra 0,711. Con `fill` se estiraría un 3,6%, poco
   pero es deformar; con `cover` se recorta ese 3,6% repartido arriba y abajo,
   que no se ve. Y el día que carguen una foto de otra forma, `cover` la
   acomoda y `fill` la aplasta.

   La columna pasa de 240 a 185 para que no quede aire al costado.

   Y VA ACOTADA DE 601px PARA ARRIBA. `institucionales.css` apila la foto y el
   texto abajo de 600 —`grid-template-columns: 1fr`—, pero esta hoja se carga
   después y con la misma especificidad, así que sin el `@media` le ganaba
   también adentro de su media query: en el teléfono quedaban 185px de foto y
   130 de texto, con el título partido en cuatro renglones y el teléfono
   cortado al medio. */
@media (min-width: 601px) {
	.place-list-with-images > li {
		grid-template-columns: 185px minmax(0, 1fr);
	}
}

.place-list-with-images > li > img {
	display: block;
	width: 185px;
	height: 260px;
	object-fit: cover;
	border-radius: 6px;
}

/* La sede sin foto: el hueco con la misma medida que las que sí tienen, para
   que la fila no se descalce. Va en la misma regla que la foto y no con un
   `aspect-ratio` aparte: si cambia una medida tienen que cambiar las dos. */
.place-list-with-images > li > .image-placeholder {
	display: block;
	width: 185px;
	height: 260px;
	aspect-ratio: auto;
	border: 1px dashed var(--line);
	border-radius: 6px;
}

/* ─── El menú se abre al pasar el mouse ────────────────────────────────────
   Pedido por malvarez73 el 30/09: en el sitio de hoy los submenús se despliegan
   solos al pasar por encima, y hacer clic para cada uno es más incómodo.

   LA REGLA YA EXISTÍA Y ESTABA APAGADA. `base.css` trae
   `@media(hover:hover){.grupo:hover .panel{display:block}}` y `styles.css`,
   que se carga después, la anula con `.grupo:hover .panel{display:none}`: el
   prototipo dejó el menú sólo a clic. Acá se vuelve a prender.

   Sólo con mouse de verdad y sólo en el menú de escritorio. `hover:hover` deja
   afuera las pantallas táctiles, donde «pasar por encima» no existe y el
   navegador lo simula con el primer toque: sin eso, tocar una sección abriría
   el panel y el toque se perdería. Y abajo de 1121px el menú es el del
   teléfono, que se despliega hacia abajo con el botón de las tres rayas; es el
   mismo ancho que usa `app.js`.

   El estado —la flechita que gira, el `aria-expanded`— lo sincroniza `app.js`.
   Esta regla sola alcanza para que el menú ande sin javascript, que antes no
   andaba nada. */
@media (hover: hover) and (min-width: 1121px) {
	.grupo:hover > .panel { display: block; }
}

/* ─── En el teléfono, el carrusel de Testimonios va de a una tarjeta ───────
   El prototipo deja las tarjetas en 85% del ancho, así que se ve una entera y
   un pedazo de la siguiente. Es un recurso conocido —el pedacito avisa de que
   hay más— pero acá no funciona: la tarjeta recortada queda a 34px, lo justo
   para parecer un error de maquetación, y el contador dice «1–2 de 8», que es
   cierto y suena a que se están mostrando dos. Pedido por malvarez73 el 02/10.

   Con 100% la tarjeta ocupa la pista entera y la que sigue arranca después del
   hueco de 16px, o sea fuera de la pantalla: no se asoma nada y el contador
   pasa a decir «1 de 8». El contador no hay que tocarlo —cuenta las que se
   cruzan con la pista, así que se corrige solo—.

   Y el enganche vuelve a `mandatory`. El prototipo lo había aflojado a
   `proximity` justamente para poder dejar la tarjeta a medio camino; sin
   asomo, aflojarlo sólo permitiría que el carrusel quede parado entre dos.

   De 601px para arriba no se toca: ahí entran dos o más tarjetas enteras y el
   asomo no existe. */
@media (max-width: 600px) {
	.testimonials-track {
		grid-auto-columns: 100%;
		scroll-snap-type: x mandatory;
	}
}

/* ─── AADI Haciendo Caminos, en la home ─────────────────────────────────
   ACÁ VIVÍA LA REGLA DE LA FOTO, y se fue entera el 08/10.

   La caja mostraba la foto de cada encuentro al costado del título, primero
   en 64 px y después en 96, que es lo máximo que entraba sin empujar los
   renglones. malvarez73 la sacó igual: a ese tamaño las fotos no se entienden
   —son grupos de gente y carteles con letra chica— y quedaban como manchas.
   Ahora cada renglón lleva su píldora «Ver», como las otras dos cajas de
   Comunidad.

   Y POR ESO ACÁ NO QUEDA NINGUNA REGLA. Con texto y píldora, la caja usa
   exactamente lo que `styles.css` ya declara para `.box li`:
   `minmax(0, 1fr) auto`. La regla que había estaba justamente para dar vuelta
   esas dos columnas, porque la foto iba primero. El `<ul>` conserva la clase
   `caminos` para poder encontrarlo, pero hoy no la usa ninguna hoja.

   Las fotos no se perdieron: el listado y la ficha de cada encuentro las
   muestran grandes, que es donde se ven. */

/* ─── Acciones culturales ─────────────────────────────────────────────────
   La pantalla usa `noticias.css` entera: es la misma clase de lista y
   conviene que se lean igual. Lo único propio es esto.

   EL FILTRO TIENE TRES DESPLEGABLES. `.news-filter` está declarado
   `minmax(200px, 1fr) auto` porque en noticias hay una sola lista y el
   botón; con cuatro cosas en dos columnas, el botón se cae a un renglón
   suyo y queda cruzando todo el ancho. Acá van las cuatro en fila.

   LA CATEGORÍA VA PRIMERA Y ES LA MÁS ANCHA de las tres: sus nombres son
   los largos —«Ciclo AADI en el CCK - Homenajes»— y además es la que
   decide qué años y qué lugares ofrecen las otras dos.

   EL NOMBRE DE LA CLASE SIGUE SIENDO `caminos-filtro`, de cuando esta
   pantalla era sólo Haciendo Caminos. Cambiarlo obligaría a tocar la vista
   y las dos reglas de más abajo sin que nadie vea nada distinto.

   Abajo de 800px vuelven a apilarse, que es lo que ya hace `.news-filter`
   en su propia media query: esta regla no la pisa porque sólo vale de ahí
   para arriba. */
@media (min-width: 801px) {
	.caminos-filtro {
		grid-template-columns: minmax(200px, 1.1fr) minmax(120px, .6fr) minmax(160px, .9fr) auto;
	}
}

/* La cuenta de resultados, con la misma voz que la del Archivo. */
.caminos-cuenta {
	font-size: 13px;
	color: var(--muted);
	margin: 20px 0 14px;
}

/* El paginado. Son dos enlaces y nada más: con 12 páginas, una tira de
   números no agrega nada que no diga «Siguientes», y la cuenta de arriba ya
   dice en cuál se está. */
.caminos-paginado {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 15px;
	font-weight: 700;
}
.caminos-paginado a { text-decoration: none; }
.caminos-paginado a:hover { text-decoration: underline; }
/* Con una sola punta —la primera página y la última— el enlace que queda se
   va a su lado: «Siguientes» a la derecha, «Anteriores» a la izquierda. */
.caminos-paginado a[rel="next"]:only-child { margin-left: auto; }

/* ─── La raya entre Comunidad y el Archivo ────────────────────────────────
   La raya la ponía `#publicaciones` con su `border-bottom`, y como el Archivo
   estaba JUSTO ARRIBA de Comunidad, caía entre las dos. Al darlas vuelta el
   13/10, la raya se fue con el Archivo al final de la página y las dos
   secciones quedaron pegadas, las dos blancas y sin nada que las separara.

   Así que la raya se muda a `#comunidad`, que ahora es la de arriba. Es la
   misma: 1px de `var(--border)`, el gris azulado del resto del sitio.

   Y se le saca al Archivo, que quedó último: ahí abajo sigue el bloque azul
   de «Formá parte de AADI», y una raya clarita contra ese azul no separa
   nada. Tampoco la había antes, cuando la última era Comunidad. */
#comunidad { border-bottom: 1px solid var(--border); }
#publicaciones { border-bottom: 0; }

/* ─── El botón de pausa del hero, solo cuando se lo busca ────────────
   malvarez73 lo quiere fuera de la vista: el hero son diez fotos pasando y
   una píldora blanca encima le saca limpieza.

   NO SE BORRA, SE ESCONDE, y es a propósito. El 14/10 el hero dejó de
   respetar `prefers-reduced-motion` —decisión tomada a conciencia, está
   explicada arriba de `hero-slideshow.js`—, y este botón quedó como la única
   forma de frenar algo que se mueve solo y no termina nunca. Borrarlo
   también sería dejar a esa persona sin ninguna salida.

   Así que aparece con el mouse encima del hero, y también al llegar con el
   teclado, que es como lo encuentra quien no usa mouse.

   TRES DETALLES QUE NO SON CAPRICHO:

     1. `opacity`, no `display:none`. El botón sigue estando para el teclado
        y para los lectores de pantalla; si lo saco del dibujo, no se puede
        llegar con Tab y volvemos al problema de arriba.

     2. Solo donde hay mouse. En una pantalla táctil no existe el «encima
        de», así que esconderlo lo dejaría invisible pero apretable, que es
        peor que mostrarlo. Ahí se queda a la vista.

     3. Si está pausado, no se esconde. Si al pausar desapareciera, no
        habría forma de encontrar cómo volver a arrancarlo. */
@media (hover: hover) {
	.hero-motion { opacity: 0; transition: opacity 160ms linear; }
	.hero:hover .hero-motion,
	.hero-motion:focus-visible,
	.hero-motion.is-paused { opacity: 1; }
}

/* ─── El buscador del encabezado ────────────────────────────────────────
   NO SALE DEL PROTOTIPO: Marcelo no dibujó ningún buscador de sitio, así
   que esto es nuestro y se escribe entero acá.

   LA LUPA tiene la medida del botón de las tres rayas —44 px— y su mismo
   fondo celeste. Son los dos controles del encabezado que no son texto, y
   conviene que se lean como hermanos.

   LA FRANJA baja por debajo del encabezado y ocupa el ancho entero. No va
   adentro de `.wrap` a propósito: ahí tendría que competir por el lugar
   con el menú, y en 1121px no sobra ni un píxel.

   `position: absolute` Y NO `static`: si empujara al contenido, la página
   entera saltaría hacia abajo al abrir la caja. Así se apoya encima, que
   es lo que uno espera de algo que se despliega. */
.top .lupa {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: #edf3fb;
	color: var(--navy);
	cursor: pointer;
}
.top .lupa svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.top .lupa:hover { background: #e2ecf9; color: var(--action); }
.top .lupa:focus-visible { outline: 3px solid var(--oro-oscuro); outline-offset: 3px; }
.top .lupa[aria-expanded="true"] { background: var(--action); color: #fff; }

.top .buscador {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 49;
	background: #fff;
	border-bottom: 1px solid var(--border);
	box-shadow: 0 18px 30px #17345a14;
}
.top .buscador .wrap {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-block: 14px;
}
.top .buscador input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--gris-linea);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	color: var(--navy);
	background: #fff;
}
.top .buscador input:focus-visible {
	outline: 3px solid var(--oro-oscuro);
	outline-offset: 2px;
	border-color: var(--action);
}
/* Las mismas medidas que el botón de la Oficina Virtual, que es el otro
   botón del encabezado. Sin el `padding`, el `.btn` general trae el suyo y
   queda 20px más alto que el campo de al lado, estirando la franja entera. */
.top .buscador .btn {
	flex-shrink: 0;
	min-height: 46px;
	padding: 12px 21px;
	font-size: 14px;
}

/* En el teléfono el encabezado se vuelve fijo con la hoja del menú abierta
   -`html.menu-open .top { position: fixed; inset: 0 }`-. La franja se apoya
   en el borde de abajo del encabezado igual, porque mide 82px ahí. */
@media (max-width: 1120px) {
	.top .buscador .wrap { padding-block: 12px; }
	.top .buscador .btn { padding-inline: 18px; }
}

/* Abajo de 480px el botón «Buscar» se come la caja. Queda la lupa adentro
   del campo: se manda con Enter, que es lo que hace cualquiera en un
   teléfono. */
@media (max-width: 479px) {
	.top .buscador .btn { display: none; }
}

/* ─── La Guía rápida ────────────────────────────────────────────────────
   Todo el sitio en una pantalla. Son seis grupos de enlaces y nada más, así
   que no hace falta ninguna hoja propia: sólo decirle cómo acomodarse.

   `auto-fill` Y NO UN NÚMERO DE COLUMNAS: los grupos salen del menú y el
   menú se edita desde el panel. El día que haya un menú más, o uno menos, la
   grilla se reacomoda sola en vez de dejar un hueco.

   260px ES EL ANCHO MÍNIMO DE UNA COLUMNA, no el de la tarjeta: entra
   «Estatuto y reglamento interno» sin cortarse, que es el renglón más largo
   que hay hoy. */
.guia-rapida {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px 32px;
	margin-top: 8px;
}
.guia-grupo h2 {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}
.guia-grupo h2 a { color: inherit; }
.guia-grupo h2 a:hover { color: var(--action); }
.guia-grupo ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.guia-grupo li { margin: 0; }

/* Los renglones son el cuerpo de la página, así que van del tamaño del
   texto y no más chicos. El área de toque llega a 40px con el padding, que
   es lo que corresponde a una lista pensada para el teléfono. */
.guia-grupo li a {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-suave, #eef2f7);
	color: var(--navy);
	font-size: 15px;
	line-height: 1.4;
}
.guia-grupo li:last-child a { border-bottom: 0; }
.guia-grupo li a:hover { color: var(--action); }

/* ─── El zócalo del pie ─────────────────────────────────────────────────
   El aviso de copyright de un lado y los enlaces de servicio del otro. El
   `space-between` de `base.css` ya los separa; esto sólo junta los enlaces
   entre sí, que sin esta regla quedarían pegados.

   En el teléfono el `flex-wrap` del zócalo los baja a un renglón propio, y
   ahí los 18px de separación siguen alcanzando para no confundirlos con uno
   solo. */
footer .zoc .zoc-enlaces {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* ─── Las tarjetas de Acciones culturales, en la home ───────────────────
   Tres tarjetas con foto, título, una línea y la cuenta de actividades.
   Reemplazan a las cajas de `.comunidad`, que son otra cosa: aquéllas son
   listas de cuatro renglones atadas por un `subgrid`, y acá cada tarjeta
   tiene una foto arriba y texto de alto variable. Por eso clases propias y
   no un retoque de `.box`: forzar el subgrid habría costado más que
   escribir estas veinte líneas.

   LAS TRES FOTOS SALEN A 812×508, el doble de la tarjeta, así que quedan
   nítidas también donde los píxeles se duplican. Las originales las trajo
   malvarez73 el 20/10/2026 a 1200×767, que es casi 16:10: el recorte les
   saca 16 píxeles de alto y no mueve el encuadre.

   ANTES PASARON POR DOS FUENTES PEORES, y vale como advertencia. Primero,
   las redondas del sitio de hoy: PNG de 322×322 con el recorte circular
   hecho en el archivo, esquinas transparentes y debajo un halo claro en vez
   de la foto, así que lo más grande que se podía sacar era el rectángulo
   inscripto en el círculo —273 de ancho para una tarjeta de 406, estirado
   una vez y media—. Después, los álbumes de `uploads/`, que tienen fotos de
   verdad pero desparejas: Capacitaciones tiene 82 actividades y un solo
   álbum, y de ahí salía a 576.

   La moraleja para la próxima: el ancho de la tarjeta son 406, así que
   cualquier foto de 812 o más entra sin estirarse.

   EL RECORTE ES 16:10 Y ESTÁ HECHO EN EL ARCHIVO, no acá. Las tres venían
   con proporciones distintas —una apaisada, una cuadrada y una parada— y
   tres tarjetas de alto desparejo se ven como un error. `object-fit:
   cover` sostiene el recorte si algún día entra una foto de otra medida.

   `overflow: hidden` EN LA TARJETA para que la foto respete la esquina
   redondeada: sin eso asoma en pico sobre el borde. */
.acciones-tarjetas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

/* La tarjeta ENTERA es el enlace: el destino es uno solo y conviene poder
   apretar en cualquier parte, sobre todo en el teléfono. */
.accion-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.accion-tarjeta img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.accion-texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--card-padding);
}
.accion-texto h3 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
	transition: color .18s ease;
}
.accion-texto p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* `margin-top: auto` pega la cuenta al pie de la tarjeta. Las tres líneas
   de texto no miden lo mismo y, sin esto, cada «actividades» quedaría a una
   altura distinta: es lo primero que delata una fila de tarjetas. */
.accion-texto .more {
	margin-top: auto;
	padding-top: 16px;
}

.accion-tarjeta:hover { border-color: var(--action); box-shadow: 0 10px 28px #17345a1a; }
.accion-tarjeta:hover h3 { color: var(--action); }
.accion-tarjeta:focus-visible { outline: 3px solid var(--oro-oscuro); outline-offset: 3px; }

/* 1120px es donde `.comunidad` pasaba a una columna en `styles.css`. Se
   respeta el mismo corte para que la sección no cambie de forma a un ancho
   distinto del resto de la home. */
@media (max-width: 1120px) {
	.acciones-tarjetas { grid-template-columns: 1fr; }
}

/* ─── Los números del hero, en el teléfono ──────────────────────────────
   `styles.css` los reparte con `justify-content: space-between` abajo de
   560px. Eso estaba bien con TRES números: quedaban repartidos a lo ancho.

   El 20/10/2026 salió «4 sedes» y quedaron dos, así que el reparto los
   mandó a los extremos: «+40.000» pegado a la izquierda y «1954» contra el
   borde derecho, con un agujero en el medio. Señalado por malvarez73.

   Van juntos, desde la izquierda. La separación es 32px y no los 38 del
   escritorio: ahí el bloque mide la mitad del ancho y acá lo ocupa entero,
   así que con 38 se despegaban de más.

   ES EL MISMO TROPIEZO QUE EL ZÓCALO DEL PIE, dos días antes: un
   `space-between` escrito para N cosas se ve mal el día que quedan N-1.
   Vale la pena acordarse al sacar algo de una fila.

   VA CON `.hero` ADELANTE, y no es decoración. La regla de `styles.css`
   dice `.hero .datos`, que pesa más que `.datos` sola: escrita a secas, esta
   hoja carga después y aun así perdía, sin ningún aviso. Cuando algo de
   acá «no hace nada», lo primero es contar los selectores del otro lado. */
@media (max-width: 560px) {
	.hero .datos {
		justify-content: flex-start;
		gap: 32px;
	}
}