/*
Theme Name: Hídricos — Web principal
Theme URI: https://www.hidricosneuquen.gob.ar/
Author: Subsecretaría de Recursos Hídricos — Provincia del Neuquén
Description: Tema institucional de la Subsecretaría de Recursos Hídricos: marca de gestión NQN según el Manual de marca 2026 (Manrope, azul #00374C, verde, crema, coral, turquesa), calcado del sitio estático de trámites, con la sección Noticias (portada, archivo, categoría, búsqueda y nota). Requiere el plugin "Hídricos — Guía de trámites".
Version: 1.5.99
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: hidricos
*/

/* Cambios del tema
   1.5.97 (2026-10-20) Paquete consolidado: Denuncias sin preguntas de petróleo ni textos ambientales; Hidrocarburos con página mínima y tarjeta «Dónde consultar» (cargos y teléfonos, sin nombres); formularios con presentación en línea: encabezado, archivos del proyecto, guía en gris y nomenclatura con guiones.
   1.5.96 (2026-10-19) Riesgo hídrico: la tarjeta «Preséntelo en línea» nombra los archivos del proyecto y no pide poder cuando el trámite no lo usa.
   1.5.95 (2026-10-19) Trámites de detalle sin PDF de requisitos: se muestra la lista «Documentación a presentar» y el
         paso 1 remite a ella (Certificado de riesgo hídrico, página nueva).
   1.5.94 (2026-10-19) El botón «Mesa de Entradas» del menú lleva al formulario de Contacto en el sitio principal.
   1.5.93 (2026-10-19) Formulario de Contacto del sitio principal (envía el correo desde la web).
   1.5.92 (2026-10-18) Barra de arriba de la web principal: se saca «Trámites» (el acceso queda en el botón
         verde de la portada). Es la barra que arma el tema cuando no hay un menú asignado.
   1.5.91 (2026-10-17) Accesibilidad: «Ir al contenido» visible al enfocar; menú móvil
         cierra con Escape o al tocar afuera y devuelve el foco. Pie: isologotipo al
         90 % del escudo (manual 2026, p. 27).
   1.5.90 (2026-10-16) Denuncias del menú → guía oficial.
   1.5.89 (2026-10-16) Denuncias: las preguntas guía en gris dentro del cuadro «Contanos qué viste»; aria-label genérico en «Provincia del Neuquén».
   1.5.88 (2026-10-16) Denuncias: cuatro preguntas guía debajo de «Contanos qué viste» (sugerencia de Asesoría Legal).
   1.5.87 (2026-10-16) Denuncias: un video corto (hasta 60 s / 40 MB) en el paso 2, también en las anónimas; va a la nube.
   1.5.86 (2026-10-10) Nota con firma digital: sin la línea «Firma del solicitante»
         (queda el recuadro del certificado y los datos del firmante).
   1.5.85 (2026-10-10) Lectura del poder: barra de avance (<progress>) además del texto «hoja N de M».
         Firma Digital con token: las opciones «para mí» se desactivan.
   1.5.84 (2026-10-09) El envío espera a que termine la lectura del poder
         (se podía enviar a mitad y Mesa no veía nada); si falla, lo avisa.
   1.5.83 (2026-10-09) Lectura del poder en el navegador (js/poder.js + lib/ocr:
         pdf.js 3.11.174 y Tesseract.js 5.1.1 con español, alojados, huellas
         verificadas contra npm): busca a quien firma, la empresa, el CUIT y
         el plazo, y se lo adelanta a Mesa. Se carga solo al subir un poder.
   1.5.82 (2026-10-09) El nombre del firmante leído del DNI queda bloqueado
         (antes se podía borrar para agregar tildes).
   1.5.81 (2026-10-09) Firma Digital para otras personas: el nombre y el DNI de
         cada una se leen de SU documento y quedan bloqueados; si no se puede
         leer, «cargarlo a mano» y la solicitud lo dice en letra chica.
   1.5.80 (2026-10-09) Firma Digital: «¿Para quién es el certificado?» y una línea
         del certificado por persona (vista previa y PDF); lo de una sección
         oculta no va al PDF ni al envío.
   1.5.79 (2026-10-09) Sello del pie: solo el monograma «nqn · neuquén cambia
         para vos», sin la leyenda del aniversario (va por RPI) y sin
         condición de año; banda más angosta.
   1.5.78 (2026-10-09) Denuncias, paso 4: los errores salen en el orden de los
         campos (DNI, nombre, domicilio, correo, código, teléfono, DJ).
   1.5.77 (2026-10-08) CLOUD y Certificado de Firma Digital no pasan por GDE: la
         pantalla final anuncia el número de ticket (esquema numero_oficial).
   1.5.76 (2026-10-08) Denuncias, paso 1: «¿Sos la empresa responsable de un
         incidente?» con enlace al trámite formal de 24 h.
   1.5.75 (2026-10-08) Denuncias, auditoría legal: marco legal y «no es canal de
         emergencias» en la página; para qué se usan los datos (Ley 25.326);
         la declaración jurada incluye el consentimiento para compartirlos con
         el área u organismo que intervenga.
   1.5.74 (2026-10-08) Denuncias: aviso (anónimo o con correo) o denuncia formal
         (nota al Subsecretario, DNI leído, domicilio, teléfono, correo
         confirmado y declaración jurada). El aviso anónimo necesita una foto o
         el GPS en el lugar. «Problema con otro usuario del agua» solo formal.
   1.5.73 (2026-10-08) Denuncias, paso 1: qué recibe Hídricos (agua), recuadro
         «¿No es sobre el agua?» (Ambiente, EPAS, 911) y aclaración de que
         cloacas o basura en el agua sí son de Hídricos (Ley 2613, Dec. 790/99
         art. 20); en vertidos, «¿parece petróleo?»; «¿Sabés quién lo hace?».
   1.5.72 (2026-10-08) CLOUD/Certificado: el título «¿Cómo va a confirmar que es usted?» queda
         adentro del cuadro crema (el legend se dibujaba sobre el borde).
   1.5.71 (2026-10-08) Denuncias: el buscador de lugares siempre ofrece «usar
         lo que escribí» (Enter o la última opción): va a curso, localidad o
         «Cómo llegar» y abre el mapa para marcar el punto. La lista se cierra
         al salir del buscador.
   1.5.70 (2026-10-08) CLOUD y Certificado: arriba de la nota se elige cómo se
         valida (firma digital, o DNI + código al correo). Con DNI + correo, el
         DNI leído completa nombre y número (no se tipean) y la aclaración
         tiene que ser la del DNI. Ente público: correo .gov.ar o .gob.ar.
         Opciones de radio alineadas (.campo label les ganaba).
   1.5.69 (2026-10-08) Denuncias: «Identificada» exige leer el DNI del documento
         (foto o escaneo) y ser mayor de 18; si no, anónima o con correo.
         iPhone: «No se pudo guardar en el celular» al enviar. Las fotos se
         guardan como ArrayBuffer (Safari falla al guardar Blob en IndexedDB) y,
         si igual no se puede guardar pero hay señal, la denuncia sale directo.
         El error dice el motivo técnico.
         Revisión de tester: sin fecha de nacimiento legible no se acepta el DNI;
         el borrador guarda la fecha leída (si no, la denuncia guardada sin señal
         se rechazaba al enviarse y el vecino seguía viendo «se envía sola»);
         una denuncia guardada que el servidor rechaza se muestra con el motivo
         y «Corregir y reenviar».
         El vecino ve solo hitos oficiales: Recibida, Con expediente, Cerrada.
   1.5.68 (2026-10-08) Denuncias: categoría «Alambrado o cierre de costa» con su
         ícono; «Peces muertos» pasa a «Otra situación».
   1.5.67 (2026-10-08) Denuncias, revisión de seguridad: lo enviado deja en el
         dispositivo solo número y enlace (nombre, DNI, correo y texto se
         borran); el borrador ya no reaparece después de enviar; «Denuncias
         enviadas desde este dispositivo» con botón para borrarlas y vencimiento
         a los 90 días; aviso si el punto queda a más de 30 km de la localidad;
         aviso de privacidad en «Tus datos».
   1.5.66 (2026-10-07) Denuncias en pasos (con el ajuste del plugin en Sí):
         pantalla para el celular en 5 pasos (qué · fotos · dónde y cuándo ·
         tus datos · revisar), funciona sin señal (service worker + cola en el
         celular), fotos achicadas en el celular, búsqueda de ríos, arroyos,
         lagos, parajes y yacimientos (OpenStreetMap, alojado), lectura del
         DNI por el código de barras (zxing alojado) y seguimiento. Con el
         ajuste en No, la página de siempre.
   1.5.65 (2026-10-07) CLOUD: «¿Para quién es el usuario?» y los datos de cada
         usuario solo si es para otras personas (obligatorios ahí). El mensaje
         del código aparece junto a su botón.
   1.5.64 (2026-10-07) CLOUD: «Solicita en nombre de» empresa u operadora / ente
         público; el poder se pide solo para empresas (esquema poder_si).
   1.5.63 (2026-10-07) Textos: el número oficial de GDE puede ser de
         expediente o de nota.
   1.5.62 (2026-10-07) Trámites con presentación en línea activa (CLOUD, Firma
         Digital en el sitio de prueba): sin el PDF en blanco, que ya no sirve
         para presentarlos; tarjeta «Preséntelo en línea» y botón «Presentar en
         línea». Con el ajuste apagado (oficial), todo sigue igual.
   1.5.61 (2026-10-07) Firma Digital: la línea del sistema de gestión queda
         como vista previa, sin botón «Copiar» (va sola en la solicitud).
   1.5.60 (2026-10-07) El pedido del código manda nombre y empresa para saludar
         en el correo (no se guardan).
   1.5.59 (2026-10-07) Presentación en línea: el botón verde dice «Continuar:
         elegir cómo firmar» y no descarga; la descarga es un paso de «Tengo
         firma digital» (descargar, firmar, subir).
   1.5.58 (2026-10-07) Número de presentación web WEB-AAAA-NNNNNN, aclarado
         como comprobante (el oficial es el expediente de GDE).
   1.5.57 (2026-10-07) Nota formal y editor en todos los formularios con nota;
         encabezado y saludo fijos a la vista (en gris, con sello «lo agrega el
         sistema») y aviso si se los escribe en el cuerpo. Firma Digital pide la
         razón social junto al CUIT. Botones de validación del poder por correo.
   1.5.56 (2026-10-07) PDF de la presentación en línea con el encabezado de la
         familia 2026 (tarjeta + franja azul); la planilla repite la declaración
         jurada o aclara que la firma digital de la hoja 1 cubre todo.
   1.5.55 (2026-10-07) Firma Digital: la línea Argentina;Neuquén;…;DNI se ve
         armándose debajo de los 8 datos, con su estado y botón para copiarla.
   1.5.54 (2026-10-07) Presentación en línea: el poder deja de ser obligatorio
         de entrada; si ya está registrado se usa ese, si no el servidor lo pide.
   1.5.53 (2026-10-06) Localidades: lista de las de Neuquén al escribir,
         corrige mayúsculas y tildes solo, y sugiere «¿Quiso decir…?» ante
         un error de tipeo (neuken → Neuquén). No bloquea otras provincias.
   1.5.52 (2026-10-06) Presentación en línea: el poder se sube en el
         formulario, a la vista desde el principio, no al final.
   1.5.51 (2026-10-06) Presentación en línea de CLOUD SRH y Firma Digital:
         nota formal en papel blanco con editor (negrita, lista), campo de
         firma vacío para token, y panel de envío que aparece solo si el
         plugin la tiene activa (ajuste presentacion_digital).
   1.5.35 (2026-09-27) El formulario de Denuncias lleva el sello de tiempo del
         plugin (campo oculto que pone el servidor). No cambia nada visible.
   1.5.34 (2026-09-27) El nombre también es opcional: se puede denunciar sin
         dejar ningún dato, y la tarjeta azul lo dice de entrada, que es donde
         se lee antes de decidir si uno se anima.
   1.5.33 (2026-09-27) Denuncias: correo y teléfono dejan de ser obligatorios
         —a veces no se quiere dejar ningún dato—, el teléfono descarta letras
         al escribir, y se avisa de errores de tipeo conocidos en el correo
         (gmail.com.ar no recibe correo; gnail.com sí, pero es de un tercero).
         Si no deja correo, la pantalla insiste con el número de referencia.
   1.5.32 (2026-09-25) La pantalla de «denuncia recibida» dice qué revisar si
         el acuse no llega: decía sólo «al correo que dejó», y si el vecino lo
         escribió mal el correo rebota y él espera algo que no va a llegar.
   1.5.31 (2026-09-25) El selector de fotos de Denuncias ACUMULA. Un campo
         de archivos reemplaza la selección cada vez que se abre: elegir una
         foto y volver a apretar para sumar otra borraba la primera, y para
         elegir varias juntas había que saber marcarlas con Ctrl (Nicolás:
         «no me deja adjuntar desde la PC más de una foto»). Ahora se suman
         de a una, se listan con su peso y se pueden quitar, y los topes se
         avisan antes de enviar en vez de después de perder el formulario.
   1.5.30 (2026-09-25) Denuncias: campos de ubicación con botón «Usar mi
         ubicación» (geolocalización del navegador, sin mapas de terceros) y
         hasta 3 fotos. La tarjeta azul deja de estirarse para igualar al
         formulario —dejaba 411 px vacíos abajo, que era el bache que se veía—
         y se pone al día: decía «una foto» cuando ya son tres.
   1.5.29 (2026-09-25) El banner de RPI también en la portada de la guía de
         trámites. El identificador que dio la Provincia es `recursos-hidricos`,
         el ORGANISMO y no un dominio, y las zonas se nombran por posición:
         «Post-Presentacion» es después de la presentación, sea el video del
         institucional o el panel del héroe de la guía. Solo en la PORTADA de
         cada sitio: ellos eligieron una página, no todas, y un banner
         promocional sobre alguien que está tipeando su DNI en /completar/ no
         es lo que pidieron.
   1.5.28 (2026-09-24) Dos arreglos del formulario en línea, los dos salidos
         de una pregunta de Nicolás sobre áridos:
         · La nota que se arma sola mostraba «_______________» en los huecos
           antes de que el vecino escribiera nada, y parecía basura o un
           papel para completar a mano. Ahora, sin ningún dato, ese texto va
           como marcador gris del campo y el valor real aparece recién
           cuando escribe el primero.
         · El borrador se borra de este navegador al descargar el PDF. Ya
           cumplió su función, y en una máquina compartida dejaba el DNI, el
           nombre, el teléfono y el correo del vecino esperando al próximo.
   1.5.27 (2026-09-24) Manrope en WOFF2: las cinco variantes que pide el CSS
         pasan de 552 KB a 151 KB (73% menos) y la página del trámite baja de
         599 a ~200 KB. Es el MISMO archivo comprimido con Brotli, no una
         versión reducida: verificado contorno por contorno (807 glifos y 702
         caracteres idénticos en los cinco pesos, 0 diferencias). El .ttf se
         mantiene como respaldo del @font-face y porque documento.js lo
         necesita tal cual — fontkit no lee WOFF2 y es la letra que se
         incrusta en el PDF que genera el vecino. No se subsetea a propósito.
   1.5.19 (2026-09-23) Un cargo sin titular designado imprimía su nombre dos
         veces seguidas: la entrada se titula con el cargo cuando no hay
         persona, así que el rótulo y el título decían lo mismo (visto en la
         Dirección Provincial Unidad Administración del Agua). Ahora en ese
         caso el cargo va como título y debajo se aclara "Sin titular
         designado", que es la información real.
   1.5.18 (2026-09-23) Quiénes somos: el bloque de Autoridades y el video se
         habían perdido en una edición posterior de la plantilla y la página
         salía sin ellos — se detectó al verificar el render, no leyendo el
         código. Reincorporados al final, después de los organismos de cuenca.
         Además, las tres fotos ahora llevan epígrafe visible: tenían buena
         descripción, pero en el alt, que no se ve (Nicolás: "hay tres fotos
         que no indican nada de quiénes somos"). El alt sigue describiendo la
         imagen y el epígrafe dice qué hace el organismo; son textos distintos
         para no hacérselo leer dos veces a un lector de pantalla.
   1.5.17 (2026-09-22) Quiénes somos, segunda vuelta: el sitio anterior tenía
         más cosas que las que habíamos migrado — la foto del Subsecretario y
         un video institucional. Se suma la sección Autoridades (la primera
         destacada con la foto grande y esquina de 90 px del manual, el resto
         en grilla, con reserva dibujada si alguna no tiene foto) y el video,
         sin autoplay y con portada: un video que arranca solo molesta y
         gasta datos del visitante. Los dos bloques aparecen solo si hay
         contenido cargado.
   1.5.16 (2026-09-22) La tarjeta de CO.DI.NEU era una caja blanca con el
         texto apretado, sin ícono ni jerarquía, al lado de tarjetas que sí
         los tienen (Nicolás: "quedó medio apretado, ponele diseño"). Ahora:
         fondo crema porque es un enlace AFUERA del organismo y no un dato
         propio, ícono en círculo turquesa como el resto de los accesos,
         rótulo "Normativa provincial" sobre el título CO.DI.NEU, esquina
         grande, botón a lo ancho y el pie separado por una regla. Las
         circulares también tenían poco aire: más padding, la etiqueta de
         qué hace alineada a la derecha y realce al pasar el mouse.
   1.5.15 (2026-09-22) Foto en las licitaciones: arriba de la tarjeta con el
         mismo encuadre 3:2 que una nota, y en la ficha con la esquina grande
         y pie de foto opcional (el extracto). Ninguna tipografía propia: todo
         hereda Manrope del body, igual que Trámites y Noticias — Nicolás vio
         otra fuente en una muestra suelta y era que yo le había sacado los
         @font-face al generar el archivo, no el diseño.
   1.5.14 (2026-09-22) Licitaciones, rediseño a partir de la licitación real
         del Corredor del Viento (7 documentos, 186 hojas de pliego). Las
         circulares dejan de ser una fila plana de PDF: cada una lleva la
         etiqueta de QUÉ HACE (modifica el pliego, cambia la fecha, cambia el
         lugar, respuestas a consultas, visita al sitio), y arriba de todo va
         un aviso cuando alguna cambia fecha, lugar o artículos. Es el
         problema real de esa licitación: la Circular N.º 04 prorrogó la
         apertura del 23/06 al 15/07 y la N.º 05 la mudó de edificio, pero el
         pliego sigue diciendo lo viejo — quien lee solo el pliego se presenta
         el día equivocado en el lugar equivocado. La tarjeta del pliego avisa
         además cuánto pesa (186 hojas · 20 MB), que en celular importa.
         Denuncias: número de referencia en pantalla al enviar.
   1.5.13 (2026-09-22) La portada no nombraba a Licitaciones ni Publicaciones
         en ningún lado: un proveedor que entraba a la home no tenía cómo
         enterarse de que había un llamado en curso. Bloque
         "Licitaciones abiertas" (hn_pieza_licitaciones_abiertas) después de
         Últimas noticias, que SOLO se dibuja si hay alguna con estado
         abierta — sin llamados vigentes la portada queda igual que la que
         Nicolás ya aprobó, sin un bloque vacío ocupando lugar. Publicaciones
         y Licitaciones entran además a los accesos rápidos (plugin 1.4.21).
   1.5.12 (2026-09-22) Sección Publicaciones (archive-publicacion.php,
         single-publicacion.php, inc/publicaciones.php y su CSS), calcada de
         Licitaciones para que las dos se lean igual: tarjeta con píldora de
         tipo y año, autores, congreso/revista, y ficha con la referencia
         bibliográfica más la descarga del PDF. Entra al menú de cabecera.
         Además, tarjeta de cortesía a CO.DI.NEU en la ficha de cada
         licitación (pedido de Nicolás). OJO con el rótulo: CO.DI.NEU no
         publica licitaciones, es el Compendio Digital Normativo de la
         Contaduría General —digesto legislativo, capítulos de Contrataciones,
         Proveedores y Obras Públicas—, o sea la normativa que las rige;
         verificado en el sitio. Llamarlo "sistema de licitaciones de la
         provincia" mandaría al proveedor a buscar ahí algo que no está.
   1.5.11 (2026-09-22) Validación de DNI, tres mejoras pedidas por Nicolás
         después de probar producción. Contexto: reportó que "no valida el
         DNI"; al revisarlo en el navegador la validación SÍ estaba y andaba
         (marca al salir del campo y al generar el PDF, y el PDF no sale con
         un DNI mal formado). Lo que había pasado es que cargó un número de
         7 u 8 dígitos, que es un DNI con formato válido y por eso pasaba:
         el sistema comprueba la FORMA del DNI, no que esa persona exista
         (eso requeriría consultar RENAPER en línea, que no tenemos).
         (1) completar.js: en un campo DNI ya no se pueden tipear letras —
         se descartan al escribir, en vez de avisar recién al salir, que era
         lo que hacía que pareciera que no validaba nada. (2) Cruce DNI↔CUIT
         donde los dos son de la MISMA persona física: un CUIL es prefijo
         (20/23/24/27) + los 8 dígitos del DNI + verificador, así que si no
         coinciden hay un error de tipeo que ninguna de las dos reglas por
         separado podía ver. Se declara por esquema (`par_dni`) y hoy solo
         aplica en áridos (titular y apoderado); en obras NO se declara a
         propósito, porque ahí pj_cuit es el CUIT de la EMPRESA y pj_dni el
         del responsable que firma — dos sujetos distintos. Con un CUIT de
         empresa (30/33/34) no se compara nada. (3) Ayuda "7 u 8 números,
         sin puntos." debajo de cada campo DNI; en firma digital se suma a
         la advertencia que ya tenía (ahí un DNI mal obliga a reemitir el
         certificado). Probado en el navegador: filtro de tipeo, cruce con
         CUIL válido de otra persona, DNI de 7 dígitos con cero adelante,
         CUIT de empresa ignorado, `copia_de` intacto y el PDF de áridos
         generado y verificado con PyMuPDF (3 hojas, DNI y CUIT bien
         formateados).
   1.5.10 (2026-09-21) Dos correcciones encontradas al auditar Licitaciones
         contra el diseño ya aprobado de Noticias/Trámites (pedido de
         Nicolás: "mantené la calidad de diseño y de colores"). (1)
         header.php: el menú de cabecera del sitio principal (la rama sin
         menú de WordPress configurado, la que se usa hoy — Nicolás nunca
         armó un menú a mano) no tenía enlaces a Quiénes somos,
         Licitaciones, Canon y Tasas ni Denuncias; se agregan los 4, cada
         uno condicionado a que el destino ya exista, para no imprimir
         enlaces rotos mientras se van creando las páginas. (2)
         .licitacion-cabecera .pastilla fijaba fondo azul/texto blanco a
         mano, distinto de la píldora de categoría de Noticias (fondo
         turquesa/texto azul, la que define el bloque "MANUAL 2026" más
         abajo para .pastilla en general) — la píldora de sector de una
         licitación se veía en otro color que la de categoría de una
         nota, sin motivo de diseño. Se saca el fondo propio y hereda el
         de todo el sitio.
   1.5.8 (2026-09-21) El banner de RPI (ver 1.5.7) quedaba pegado al video
         de arriba y sin separación de "Últimas noticias" — un <div> suelto,
         sin el respiro vertical del resto de la página (Nicolás: "se ve
         desprolijo"). Envuelto en <section class="seccion"> como cualquier
         otro bloque de la portada. El diseño del banner en sí (blanco,
         esquinas rectas) lo pone RPI, no se puede tocar desde acá.
   1.5.7 (2026-09-21) front-page.php: div del banner de RPI (Red de
         Promoción Interna, pedido de la Provincia) entre el video de
         presentación y "Últimas noticias", solo en el sitio principal. Lo
         imprime `hn_rpi_banner_portada()` del plugin (inc/rpi.php). La
         franja de cabecera del aniversario y su reemplazo por RPI son
         cambios del plugin (1.4.17), no del tema.
   1.5.6 (2026-09-18) Primer GIF real subido por Prensa: resultó vertical
         (video de WhatsApp recortado, 478×850). La tarjeta recorta con
         `object-position: center top` (pensado para fotos horizontales) y
         eso dejaba ver solo el cielo, cortando lo importante más abajo del
         cuadro. `hn_foto_nota()` ahora marca `.vertical` cuando el archivo
         es más alto que ancho, y esa clase centra el recorte en vez de
         alinearlo arriba. La resolución baja del archivo (478 px de ancho,
         se estira a ~665 px en la tarjeta) NO se corrige acá — no hay más
         píxeles que los que tiene el archivo; hay que pedirle a Prensa un
         GIF de más resolución en origen (recomendado: 800 px de ancho o más).
   1.5.5 (2026-09-18) GIF animado como imagen destacada de una nota (pedido
         de Nicolás: Prensa va a subir GIF de 3-4 s en algunas notas):
         hn_foto_nota() detecta `image/gif` y sirve el archivo original
         (tamaño `full`) en vez del recorte `noticia-tarjeta`/`noticia-nota`
         — esos recortes los genera WordPress con GD/Imagick al subir la
         foto y solo conservan el primer cuadro, perdiendo la animación
         (comprobado: recorte generado con 1 solo cuadro contra 4 del
         original). El encuadre lo sigue haciendo el CSS existente
         (object-fit: cover), así que no hace falta que el GIF venga ya
         recortado a 3:2. Probado en el WP local: la tarjeta y la nota
         sirven el archivo original sin recortar.
   1.5.4 (2026-09-18) Canon y Tasas (page-canons-y-tasas.php) y Denuncias
         (page-denuncias.php, formulario real con foto — recibido por
         inc/denuncias.php del plugin) — texto transcripto del sitio viejo.
         CSS del formulario: campo trampa antispam invisible, input file,
         estado de error y de "denuncia recibida".
   1.5.3 (2026-09-18) Licitaciones (WP de prueba): archive-licitacion.php,
         taxonomy-sector_licitacion.php y single-licitacion.php — grilla con
         filtro por sector, ficha de lectura del pliego (presupuesto, plazo,
         fechas, lugar) y descarga de pliego + circulares, calcado del layout
         de single-tramite.php. inc/licitaciones.php. Página "Quiénes somos"
         dedicada (page-quienes-somos.php): expande la sección de portada con
         el texto oficial completo del export WXR (Somos, misión, visión,
         objetivos), corrigiendo la dependencia ministerial desactualizada.
   1.5.2 (2026-09-18) "Para quién" destacado en la página del trámite: tarjeta crema con franja e ícono turquesa (.para-quien, ícono `quien`); opción A elegida por Nicolás.
   1.5.1 (2026-09-17) Revisión de seguridad: JSON embebido con JSON_HEX_TAG (índice de búsqueda, esquema del formulario, ld+json); index.php en inc/, lib/, js/, img/, fuentes/.
   1.5.0 (2026-09-16) Manual de marca 2026 definitivo: la capa de muestra se
         fundió en style.css (azul #00374C, sin beige 2, chevrons coral,
         píldoras e íconos turquesa, alerta coral, palabra destacada
         amarilla en títulos: hn_resaltar y el campo `destaca` del
         trámite). Sin estilo-2026.css, muestra2026.js ni HN_MUESTRA_2026.
         Botón "Trámites" en la portada del principal; correos con <wbr>.
   1.4.0 (2026-09-16) Muestra del manual de marca 2026: estilo-2026.css
         (capa que solo actúa con html.manual-2026) y muestra2026.js
         (conmutador "Actual / Manual 2026"), cargados únicamente si
         wp-config.php define HN_MUESTRA_2026. Títulos con palabra
         destacada (hn_resaltar). Sin la constante, nada cambia.
   1.3.5 (2026-09-15) Menú de respaldo del sitio principal con "Trámites"
         (URL del ajuste sitio_tramites) antes de Noticias y Contacto.
   1.3.4 (2026-09-15) La portada del sitio principal de la red tampoco lista
         los trámites cargados (secciones "Trámites por actividad", etc.);
         HNT_VERSION de functions.php se sincroniza con esta cabecera al armar.
   1.3.3 (2026-09-15) En multisitio el sitio principal es siempre el institucional
         (hn_sitio_con_tramites() = false aunque tenga trámites cargados): en
         el WordPress de prueba quedaron trámites de una importación anterior
         y la portada salía como guía en vez de video + noticias.
   1.3.2 (2026-09-14) Sección "Quiénes somos" en la portada del sitio
         principal, después de "Últimas noticias" (Nicolás: la portada
         quedaba corta). inc/portada.php: título con sonrisa sobre fondo
         blanco, el párrafo oficial de la página "Quiénes somos" del sitio
         actual, tres fotos 3:2 con esquinas redondeadas (las del sitio
         viejo: canal, compuerta, pozo sumidero) y "Conocer más" si existe
         la página quienes-somos; debajo, accesos rápidos (Trámites, Mesa
         de Entradas y, si existen las páginas, Denuncias y Canon y tasas).
         Texto, fotos y URL de trámites son ajustes del plugin 1.3.2. El
         subsitio de trámites y el estático no cambian; íconos nuevos
         "alerta" y "tasas".
   1.3.1 (2026-09-13) Revisión en vivo de Nicolás. (1) Nota: la foto
         destacada ya no "pisa" el azul (el margen negativo solo cancelaba el
         relleno de la sección y quedaba pegada): 40 px de aire en escritorio
         y 20 en celular, como turismo y ambiente. (2) Portada con video:
         alto = 100svh menos la barra (560–960 px, antes 630) y sin velo
         global: scrim local AZUL 0,78 hasta pasar la columna de texto y a 0
         al 65 % del ancho (medido con cv2: 5,1:1 en el peor cuadro); el
         agua queda sin tinte. (3) Cabecera sin escudo (queda en el pie y en
         el sello) y bloque de marca del sitio principal igual al del
         estático (isologotipo 84 px, nombre 1.35rem/800 en dos líneas):
         una fila desde 1340 px, botón de menú por debajo. (4) Franja del
         20º Aniversario sobre la cabecera y (6) sello en el pie (los
         imprime el plugin 1.3.1 vía hn_cabecera_antes y hn_pie_antes, solo
         en 2026). (5) "Provincia del Neuquén" de la portada → Ministerio de
         Gobierno. (7) Pie con el escudo grande a la izquierda y "Gobierno /
         de la Provincia / del Neuquén" en beige, como ambiente.
   1.3.0 (2026-09-13) Sitio principal: portada con el video de la represa
         (front-page.php: video_portada / poster_portada del plugin, velo AZUL
         en degradado medido para 4,5:1, botón de pausa, sin autoplay con
         prefers-reduced-motion) y sin la sección de consultas (queda solo en
         el subsitio de trámites; el contacto es el pie, #contacto). Cabecera
         del menú largo en una fila desde 1280 px y botón de menú por debajo
         (body.sitio-principal; nombre en dos líneas cortas; "LICITACIONES"
         normalizado). Variante B de /noticias/ (noticias_variante del
         plugin, por defecto B): cabecera liviana, filtros en una fila, nota
         destacada + 8 en grilla, tarjetas con borde. La A queda intacta.
   1.2.0 (2026-09-13) Sección Noticias: tarjeta (inc/noticias.php), bloque
         "Últimas noticias" en la portada, home.php / category.php / search.php
         (9 por página, filtros, buscador, paginación numerada), single.php
         (volanta, bajada, foto con epígrafe, cuerpo a 720 px, firma "Prensa
         SRH", compartir por URL, relacionadas, anterior/siguiente),
         hn_pie_institucional() con el hook hn_pie_antes_marca, cabecera y
         héroe que se adaptan al sitio principal (sin trámites).
   1.1.2 Leyenda completa de la nota en todos los trámites.
   1.1.1 PDF rediseñados, formulario de áridos. */

/* ============================================================================
   tramites.hidricosneuquen.gob.ar — hoja de estilo
   Paleta del Manual de marca 2026 (MANUAL 2026.pdf, p. 34; verificada sobre
   los vectores del PDF) y Manrope (p. 29), las mismas del tema `nqn2026` de
   generador/marca_srh.py. Lenguaje visual tomado de turismo.neuquen.gob.ar
   (cabecera azul, paneles con esquina curvada, tarjetas con cabecera de
   color) adaptado a marca de gestión: isologotipo + escudo, sin el monograma
   promocional. Componentes del manual 2026: chevrons coral (p. 53), píldoras
   turquesa (p. 54), tarjeta azul con sombra turquesa (p. 54), palabra
   destacada amarilla sobre azul (pp. 40 y 54), formas con esquina grande
   (pp. 44-45). El bloque "MANUAL 2026" al final es lo que se fundió el
   2026-09-16 desde la capa de muestra estilo-2026.css.

   Combinaciones (pp. 35-36, leídas del PDF): sobre azul va amarillo, coral,
   crema, turquesa o verde; sobre crema/blanco va azul, coral, turquesa, verde
   o amarillo; sobre verde SOLO azul o coral (nunca crema, amarillo ni
   turquesa); coral y turquesa no se cruzan; amarillo no va junto al verde.
   Accesibilidad (WCAG 2.1): coral, turquesa y verde NUNCA son texto sobre
   claro (2.1-2.9:1); el texto va en azul. Blanco sobre coral solo en texto
   grande (3.2:1). El AMARILLO se usa solo en la palabra destacada (Nicolás).
   ========================================================================== */

/* Manrope en WOFF2 (2026-09-24): el MISMO archivo comprimido con Brotli, no una
   versión reducida — verificado contorno por contorno, 807 glifos y 702 caracteres
   idénticos en los cinco pesos. 552 KB -> 151 KB. El .ttf queda como respaldo para
   navegadores sin WOFF2 (el navegador baja SOLO el primer formato que entiende) y
   porque documento.js lo necesita tal cual: fontkit no lee WOFF2 y es la letra que
   se incrusta en el PDF que genera el vecino. NO se subsetea: si mañana un texto
   trae un signo poco común, tiene que estar. */
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Regular.woff2") format("woff2"), url("fuentes/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Medium.woff2") format("woff2"), url("fuentes/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-SemiBold.woff2") format("woff2"), url("fuentes/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Bold.woff2") format("woff2"), url("fuentes/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-ExtraBold.woff2") format("woff2"), url("fuentes/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  /* Los seis colores del Manual de marca 2026 (p. 34). El manual 2026 no
     documenta tintas ni beige 2: los "grises" son tintas CALCULADAS del azul
     (tinta = base × p + blanco × (1 − p)) y se declaran como tales; los
     bordes son azul con alfa. Auditado el 2026-09-16. */
  --azul: #00374C;           /* AZUL 2026 (era #2B3E4C) */
  --azul-90: #1A4B5E;        /* hover de botones azules (tinta calculada) */
  --azul-80: #335F70;        /* texto secundario: 7.0:1 sobre blanco, 6.3 sobre crema (tinta calculada) */
  --verde: #87B864;          /* VERDE — nunca lleva texto claro (2.1:1); sobre verde va azul (5.5:1) */
  --verde-80: #9FC683;       /* hover de botones verdes (tinta calculada) */
  --verde-20: #FCF2DC;       /* fondo de avisos: CREMA (el manual no trae tintas) */
  --beige-1: #FCF2DC;        /* CREMA */
  --beige-2: #FCF2DC;        /* BEIGE 2 ya no existe en el manual 2026: crema */
  --coral: #F26054;          /* advertencia (p. 54), chevrons de lista (p. 53); nunca texto sobre claro */
  --turquesa: #00ADB5;       /* píldoras y contenedores de ícono con azul (4.6:1); nunca texto sobre claro */
  --amarillo: #F8C60A;       /* SOLO la palabra destacada del título, sobre azul (7.9:1) */
  --texto: var(--azul);
  --gris: var(--azul-80);
  --borde: rgba(0, 55, 76, .18);   /* bordes: azul con alfa */
  --blanco: #FFFFFF;
  /* La alerta es el coral oficial; el fondo de la caja, crema. */
  --rojo: var(--coral);
  --rojo-fondo: var(--beige-1);
  --sombra: 0 10px 30px rgba(0, 55, 76, 0.10);   /* AZUL al 10 % */
  --radio: 18px;
  --ancho: 1140px;
  --alto-cabecera: 112px;    /* alto de la barra fija (92 en ≤ 860): el héroe con video lo descuenta */
  --fuente: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
button { font-family: inherit; }   /* los botones no heredan la fuente por defecto */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* La cabecera es fija: al saltar a un ancla (#como-presentar) el título
   quedaba tapado. Todo destino de ancla deja lugar para la barra. */
[id] { scroll-margin-top: 130px; }
@media (max-width: 860px) { [id] { scroll-margin-top: 104px; } }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--blanco);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* El skip link tiene que verse al recibir foco (WCAG 2.4.1): el recorte de
   .oculto-visual lo dejaba invisible también para quien navega con teclado. */
.oculto-visual:focus {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  width: auto; height: auto; clip: auto; overflow: visible;
  padding: .7rem 1rem; background: var(--azul); color: var(--blanco);
  border-radius: 999px; font-weight: 700; text-decoration: none;
}

/* Sonrisa: patrón .titulo-con-sonrisa de energianeuquen.gob.ar. Ancho 2 em
   del cuerpo del título, proporción 3.402:1, a la izquierda bajo el texto. */
.con-sonrisa { display: block; }
.con-sonrisa::after {
  content: "";
  display: block;
  width: 2em;
  height: calc(2em / 3.402);
  margin-top: .15em;
  background: url("img/sonrisa.svg") no-repeat left top / contain;
}
.con-sonrisa.azul::after { background-image: url("img/sonrisa_azul.svg"); }
.con-sonrisa.centrada { text-align: center; }
.con-sonrisa.centrada::after { margin-inline: auto; }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  background: var(--azul);
  color: var(--blanco);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 12px rgba(43,62,76,.25);
}
.cabecera .contenedor {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 112px;                 /* barra alta para que el isologotipo mande */
}
/* Dos enlaces distintos: el isologotipo va a la portada de ESTE sitio y el
   nombre del organismo al sitio institucional www.hidricosneuquen.gob.ar. */
.marca { display: flex; align-items: center; gap: 1.1rem; }
/* El isologotipo NO puede deformarse: el enlace es un ítem flex y con
   `max-width:100%` el navegador lo angostaba manteniendo el alto. Ancho
   fijo derivado de la proporción del asset (372×173). */
.marca a, .marca .organismo { color: var(--blanco); text-decoration: none; display: block; margin: 0; }
.marca a:first-child { flex: none; }          /* el logo no se achica */
.marca .organismo { min-width: 0; }            /* el nombre sí, y parte en líneas */
.marca img { height: 84px; width: 181px; max-width: none; }
.marca .organismo {
  border-left: 1px solid rgba(255,255,255,.35);
  padding-left: 1.1rem;
  line-height: 1.15;
}
.marca .organismo strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.marca .organismo span { display: block; font-size: .95rem; opacity: .85; margin-top: .15em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav a {
  color: var(--blanco); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .55rem .9rem; border-radius: 999px; white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,.12); }
.nav a.destacado { background: var(--verde); color: var(--azul); }
.nav a.destacado:hover { background: var(--verde-80); }
.escudo { height: 64px; width: auto; max-width: none; flex: none; margin-left: .5rem; }
.boton-menu {
  display: none; margin-left: auto;
  background: none; border: 0; color: var(--blanco); cursor: pointer; padding: .5rem;
}
.boton-menu svg { width: 30px; height: 30px; }
@media (max-width: 1180px) {
  .marca .organismo span { display: none; }
  .escudo { display: none; }
  .boton-menu { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--azul); flex-direction: column; align-items: stretch;
    padding: .75rem 1.25rem 1.25rem; gap: .35rem;
  }
  .nav.abierta { display: flex; }
  .nav a { padding: .8rem 1rem; border-radius: 12px; }
}
@media (max-width: 860px) {
  :root { --alto-cabecera: 92px; }
  .cabecera .contenedor { min-height: 92px; }
  .marca img { height: 64px; width: 138px; }
  .marca .organismo strong { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .marca img { height: 52px; width: 112px; }
  .marca .organismo strong { font-size: 1rem; }
}
/* Con un menú largo (el sitio principal trae 8 ítems) el nombre del organismo
   se aplastaba en cuatro líneas: con el menú visible el nombre no se achica
   (dos líneas, 21ch) y los ítems que no entran pasan a una segunda fila. */
@media (min-width: 1181px) {
  .marca .organismo { flex: none; max-width: 21ch; }
  .nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; }
}
/* Por debajo de 360 px no entran isologotipo + "Subsecretaría" + botón de
   menú sin partir la palabra: el nombre se oculta (sigue en el título de la
   pestaña y en el héroe) y la barra queda isologotipo + menú. */
.marca { min-width: 0; }
@media (max-width: 360px) { .marca .organismo { display: none; } }

/* ------------------------------------------------------------------- héroe */
.heroe {
  background: var(--azul);
  background-image:
    radial-gradient(ellipse at 80% 10%, rgba(135,184,103,.28), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(255,255,255,.08), transparent 50%);
  padding: 3.5rem 0 4.5rem;
  color: var(--blanco);
  position: relative; overflow: hidden;
}
/* Sonrisa gigante de fondo, como en las portadas de turismo */
.heroe::before {
  content: ""; position: absolute; right: -8%; bottom: -55%;
  width: 60%; aspect-ratio: 168.29 / 49.47;
  background: url("img/sonrisa.svg") no-repeat center / contain;
  opacity: .18; pointer-events: none;
}
.heroe .contenedor { position: relative; }
.panel-heroe {
  background: var(--verde);
  color: var(--azul);
  border-radius: 90px 0 90px 0;      /* esquinas curvadas: la sonrisa del sistema */
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 760px;
  box-shadow: var(--sombra);
}
.panel-heroe h1 { margin-bottom: .35em; }
/* Tarjeta de marca a la derecha del héroe: la del sitio institucional
   (pedido de Nicolás). Fondo VERDE, texto AZUL en dos pesos, sonrisa azul. */
.heroe-fila { display: flex; gap: 2rem; align-items: stretch; }
.heroe-fila .panel-heroe { flex: 1 1 auto; min-width: 0; }
.tarjeta-marca {
  flex: 0 0 320px; background: var(--verde); color: var(--azul); text-decoration: none;
  border-radius: 0 90px 0 90px; padding: 2.5rem 2rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; justify-content: center;
}
.tarjeta-marca p { font-size: 1.6rem; line-height: 1.2; font-weight: 400; margin: 0; }
.tarjeta-marca p a { color: inherit; text-decoration: none; }
.tarjeta-marca p a:hover, .tarjeta-marca p a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.tarjeta-marca p strong { font-weight: 800; display: block; }
.tarjeta-marca .con-sonrisa::after { margin-top: .4em; }
@media (max-width: 1024px) { .tarjeta-marca { display: none; } }
.panel-heroe p { font-size: 1.15rem; font-weight: 500; max-width: 42ch; margin-bottom: 1.5rem; }
.panel-heroe .botones { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 600px) { .panel-heroe { border-radius: 48px 0 48px 0; } }

/* Cabecera de página interior: banda azul con migas y título */
.heroe-interior { padding: 2.25rem 0 2.75rem; }
.migas { font-size: .9rem; margin-bottom: 1rem; opacity: .9; }
.migas a { color: var(--blanco); }
.migas span { margin-inline: .5em; opacity: .6; }
.heroe-interior h1 { color: var(--blanco); max-width: 20ch; }
.heroe-interior .bajada { font-size: 1.15rem; max-width: 60ch; color: var(--beige-1); margin: 0; }
.heroe-interior .con-sonrisa::after { filter: none; }
/* En el celular la tarjeta de descarga queda al final del artículo: quien
   llega desde un QR quiere el PDF primero. El botón del héroe solo se muestra
   cuando la columna lateral dejó de estar a la vista. */
.descarga-movil { display: none; margin-top: 1.25rem; }
@media (max-width: 900px) { .descarga-movil { display: inline-flex; } }

/* ----------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1;
  border: 2px solid transparent; cursor: pointer; transition: background .15s, transform .15s;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-azul { background: var(--azul); color: var(--blanco); }
.btn-azul:hover { background: var(--azul-90); }
.btn-verde { background: var(--verde); color: var(--azul); }
.btn-verde:hover { background: var(--verde-80); }
.btn-borde { background: transparent; color: var(--azul); border-color: var(--azul); }
.btn-borde:hover { background: var(--azul); color: var(--blanco); }
.btn-claro { background: var(--blanco); color: var(--azul); }
.btn-claro:hover { background: var(--beige-1); }
.btn-grande { font-size: 1.1rem; padding: 1rem 1.6rem; width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- secciones */
.seccion { padding: 3.5rem 0; }
.seccion-beige { background: var(--beige-1); }
.seccion-azul { background: var(--azul); color: var(--blanco); }
.seccion-azul h2 { color: var(--blanco); }
.intro { max-width: 62ch; color: var(--gris); font-size: 1.05rem; }

/* Barra de sección: banda azul con círculo verde y título, como turismo */
.barra-seccion {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--azul); color: var(--blanco);
  border-radius: 999px 14px 14px 999px;
  padding: .5rem 1.5rem .5rem .5rem;
  margin: 0 0 1.75rem;
}
.barra-seccion .circulo {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--verde); display: grid; place-items: center; color: var(--azul);
}
.barra-seccion .circulo svg { width: 34px; height: 34px; }
.barra-seccion h2 { margin: 0; font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
.barra-seccion small { display: block; font-weight: 500; opacity: .85; font-size: .9rem; }

/* ---------------------------------------------------------------- tarjetas */
.grilla {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));   /* en 320 px la tarjeta no supera el ancho */
}
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(43,62,76,.16); }
.tarjeta-cabecera {
  background: var(--azul); color: var(--blanco);
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
}
.tarjeta-cabecera .icono {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--verde); color: var(--azul);
  display: grid; place-items: center;
}
.tarjeta-cabecera .icono svg { width: 28px; height: 28px; }
.tarjeta-cabecera h3 { margin: 0; font-size: 1.15rem; color: var(--blanco); }
.tarjeta-cuerpo { padding: 1.25rem 1.25rem .5rem; flex: 1; }
.tarjeta-cuerpo p { margin-bottom: .75rem; }
.tarjeta-cuerpo .para { font-size: .92rem; color: var(--gris); }
.tarjeta-cuerpo .para strong { color: var(--texto); }
.tarjeta-pie {
  padding: .75rem 1.25rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.tarjeta-pie .btn { font-size: .95rem; padding: .7rem 1.15rem; }
.etiqueta {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: var(--beige-2); color: var(--azul);
  border-radius: 999px; padding: .25rem .7rem; margin-bottom: .6rem;
}

/* --------------------------------------------------------------- otros */
.caja-otros {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 2rem; display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: 1fr auto;
}
.caja-otros h2 { margin-bottom: .35em; }
.caja-otros p { margin: 0; color: var(--gris); max-width: 60ch; }
@media (max-width: 720px) { .caja-otros { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; counter-reset: paso; }
.pasos.horizontal { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pasos li {
  position: relative; padding-left: 4.25rem; counter-increment: paso;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -.1rem;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--verde); color: var(--azul);
  font-weight: 800; font-size: 1.35rem;
  display: grid; place-items: center;
}
.pasos h3 { font-size: 1.1rem; margin-bottom: .25em; }
.pasos p { margin: 0; color: var(--gris); font-size: .98rem; overflow-wrap: anywhere; }   /* correos y «rótulos largos» en celular */
.seccion-azul .pasos p { color: var(--beige-1); }
.correo-destacado {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--blanco); color: var(--azul);
  border-radius: 999px; padding: .7rem 1.25rem; font-weight: 700;
  text-decoration: none; margin-top: .75rem; font-size: 1.05rem;
  word-break: break-all;
}
.correo-destacado svg { width: 1.2em; height: 1.2em; flex: none; }
.correo-destacado:hover { background: var(--beige-1); }

/* ------------------------------------------------------ página de trámite */
.dos-columnas {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}
/* minmax(0, 1fr) y no 1fr: con 1fr el mínimo es el contenido y una palabra
   larga (nombre de un PDF) ensancha la columna y desborda en celular. */
@media (max-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }
.articulo > section { margin-bottom: 2.75rem; }
.articulo p, .articulo li { overflow-wrap: anywhere; }   /* nada desborda en 320 px: correos, archivos, siglas */
.articulo h2 { font-size: 1.55rem; }
.aviso {
  border-left: 6px solid var(--verde);
  background: var(--verde-20);
  border-radius: 0 14px 14px 0;
  padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.aviso.atencion { border-color: var(--rojo); background: var(--rojo-fondo); }
.aviso p:last-child { margin: 0; }
.aviso strong { display: block; margin-bottom: .2em; }
.documentos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.documentos > li {
  background: var(--beige-1); border-radius: 14px; padding: 1rem 1.25rem;
}
.documentos ul li { background: none; padding: 0; border-radius: 0; }
.documentos h3 { font-size: 1.05rem; margin-bottom: .35em; display: flex; gap: .6rem; align-items: center; }
.documentos h3::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); flex: none;
}
.documentos ul { margin: 0; padding-left: 1.6em; color: var(--gris); font-size: .97rem; }
.lateral { position: sticky; top: 100px; display: grid; gap: 1.25rem; }
.lateral > * { min-width: 0; }            /* un nombre de archivo largo no ensancha la columna */
.tarjeta-descarga {
  background: var(--azul); color: var(--blanco);
  border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra);
}
.tarjeta-descarga h2 { color: var(--blanco); font-size: 1.3rem; margin-bottom: .3em; }
.tarjeta-descarga p { color: var(--beige-1); font-size: .95rem; }
.tarjeta-descarga ul { color: var(--beige-1); font-size: .93rem; padding-left: 1.2em; margin-bottom: 1.25rem; }
.tarjeta-descarga .meta { font-size: .85rem; opacity: .8; margin-top: .75rem; text-align: center; overflow-wrap: anywhere; }
.tarjeta-contacto {
  background: var(--beige-1); border-radius: var(--radio); padding: 1.5rem;
}
.tarjeta-contacto h2 { font-size: 1.15rem; }
.tarjeta-contacto p { margin-bottom: .5em; font-size: .95rem; }
.tarjeta-contacto a { font-weight: 700; overflow-wrap: anywhere; }   /* el correo corta antes de la arroba (<wbr>), no a mitad del dominio */
.tarjeta-contacto .dato { display: flex; gap: .6rem; align-items: flex-start; }
.tarjeta-contacto .dato svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .2em; }

/* Buscador de trámites (portada y Otros trámites). Campo blanco en píldora
   con lupa; los resultados caen en una tarjeta blanca debajo. `.claro` es la
   variante para el panel verde del héroe. */
.buscador { position: relative; margin: 0 0 1.25rem; max-width: 640px; }
.campo-busqueda {
  display: flex; align-items: center; gap: .6rem;
  background: var(--blanco); border: 2px solid var(--borde); border-radius: 999px;
  padding: .55rem 1.1rem;
}
.buscador.claro .campo-busqueda { border-color: transparent; box-shadow: 0 6px 18px rgba(43,62,76,.15); }
.campo-busqueda:focus-within { border-color: var(--azul); }
.buscador.claro .campo-busqueda:focus-within { box-shadow: 0 0 0 3px var(--azul); }
.campo-busqueda svg { width: 1.3em; height: 1.3em; flex: none; color: var(--azul); }
.campo-busqueda input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 1.05rem; color: var(--texto); padding: .2rem 0;
}
.campo-busqueda input::placeholder { color: var(--gris); opacity: 1; }
.campo-busqueda input::-webkit-search-cancel-button { -webkit-appearance: none; }
.resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 20;
  list-style: none; margin: 0; padding: .4rem;
  background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra);
  border: 1px solid var(--borde); max-height: 24rem; overflow-y: auto;
}
.resultados li a {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .9rem; border-radius: 12px; text-decoration: none; color: var(--texto);
}
.resultados li a:hover, .resultados li.activo a { background: var(--verde-20); }
.resultados .nombre { font-weight: 600; line-height: 1.3; }
.resultados .nombre mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: .12em; }
.resultados .tipo { font-size: .8rem; color: var(--gris); }
.resultados .tipo.propio { color: var(--azul); font-weight: 700; }
/* En el héroe el panel tiene overflow oculto: la lista no flota, empuja. */
.buscador.claro .resultados { position: static; margin-top: .5rem; }
.resultados .vacio { padding: .7rem .9rem; color: var(--gris); font-size: .95rem; }
.resultados .vacio a { font-weight: 700; }
/* Ítem del catálogo al que se llega desde el buscador */
.rubro li.resaltado, .rubro.resaltado { animation: resaltar 4s ease-out; }
.rubro li.resaltado { border-radius: 6px; }
@keyframes resaltar { 0%, 60% { background: var(--verde); } 100% { background: transparent; } }
.rubro li[id] { scroll-margin-top: 130px; }

/* Catálogo de "Otros trámites": una tarjeta beige por rubro (misma familia
   que .documentos), el rubro con varios grupos ocupa las dos columnas y
   reparte los grupos; el rubro sin detalle va solo con el nombre. */
.catalogo { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .catalogo { grid-template-columns: 1fr; } }
.rubro { background: var(--beige-1); border-radius: 14px; padding: 1.1rem 1.35rem 1.25rem; }
.rubro-ancho { grid-column: 1 / -1; }
.rubro h3 {
  font-size: 1.1rem; margin-bottom: .6em; display: flex; gap: .6rem; align-items: center;
}
.rubro h3::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); flex: none;
}
.rubro .cuenta {
  margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--azul);
  background: var(--verde); border-radius: 999px; padding: .1em .6em;
}
.rubro-grupos { display: grid; gap: 1rem; }
.rubro-ancho .rubro-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
@media (max-width: 640px) { .rubro-ancho .rubro-grupos { grid-template-columns: 1fr; } }
.rubro h4 {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 .4em;
}
.rubro ul { margin: 0; padding-left: 1.3em; color: var(--texto); font-size: .95rem; }
.rubro li { margin-bottom: .3em; }
.rubro li::marker { color: var(--verde); }
.rubro-solo p { margin: 0; color: var(--gris); font-size: .93rem; }
.rubro .para { margin: -.3em 0 .9em; color: var(--gris); font-size: .93rem; }
.rubro-solo .para { margin-bottom: .5em; color: var(--texto); }

/* Páginas de detalle migradas del WordPress (hidrocarburos, áridos) */
.fichas { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.ficha { background: var(--beige-1); border-radius: 14px; padding: 1rem 1.25rem; }
.ficha h3 { font-size: 1rem; margin-bottom: .3em; display: flex; gap: .6rem; align-items: center; }
.ficha h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); flex: none; }
.ficha p { margin: 0; color: var(--gris); font-size: .97rem; }
.previos { padding-left: 1.4em; color: var(--texto); }
.previos li { margin-bottom: .5em; }
.previos li::marker { color: var(--azul); font-weight: 800; }
.lista-pdf { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.lista-pdf a.pdf {
  display: flex; align-items: center; gap: .9rem; text-decoration: none;
  background: var(--blanco); border: 2px solid var(--borde); border-radius: 14px; padding: .85rem 1.1rem;
}
.lista-pdf a.pdf:hover { border-color: var(--azul); }
.lista-pdf a.pdf > svg { width: 1.6em; height: 1.6em; flex: none; color: var(--azul); }
.lista-pdf a.pdf span { display: flex; flex-direction: column; min-width: 0; }
.lista-pdf a.pdf small { color: var(--gris); font-size: .82rem; word-break: break-all; }
.nota-doc { color: var(--gris); font-size: .93rem; }
.tarjeta-contacto .quien { font-weight: 700; margin: .6em 0 .3em; font-size: .95rem; line-height: 1.3; }
.tarjeta-contacto .quien:first-of-type { margin-top: 0; }
.tarjeta-contacto .nota-tarjeta { color: var(--gris); font-size: .88rem; margin: .6em 0 0; }
.lista-tramites { margin: 0; padding-left: 1.3em; }
.lista-tramites li { margin-bottom: .35em; }
.lista-tramites li::marker, .rubro li::marker { color: var(--verde); }
.lista-tramites a, .rubro li a { font-weight: 600; text-decoration: none; }
.lista-tramites a:hover, .rubro li a:hover { text-decoration: underline; text-underline-offset: .15em; }
.sin-detalle { margin: 0; color: var(--gris); font-size: .95rem; }
.ver-rubro { margin: 1rem 0 0; }
.ver-rubro a { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.ver-rubro a svg { width: 1em; height: 1em; }
.ver-rubro a:hover { text-decoration: underline; text-underline-offset: .15em; }
.articulo .buscador { max-width: none; margin-bottom: 1.5rem; }

/* Lista de trámites relacionados al pie de la página de trámite */
.relacionados { display: flex; flex-wrap: wrap; gap: .6rem; }
.relacionados a {
  text-decoration: none; background: var(--blanco); border: 2px solid var(--borde);
  border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .95rem;
}
.relacionados a:hover { border-color: var(--azul); }

/* --------------------------------------------------------------- contacto */
/* Referencia que pasó Nicolás (2026-09-12): tarjeta azul con la esquina
   inferior derecha muy curvada (la sonrisa del sistema, como .panel-heroe)
   y a la derecha el formulario con campos beige y botón azul a lo ancho.
   Todo con la paleta del manual: azul, beige 1 y 2, blanco. */
.contacto { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }
.tarjeta-contacto-azul {
  background: var(--azul); color: var(--blanco);
  border-radius: 24px 24px 110px 24px; padding: 2.25rem 2.25rem 2.75rem;
  box-shadow: var(--sombra);
}
.tarjeta-contacto-azul h2 { color: var(--blanco); font-size: 1.6rem; margin-bottom: .2em; }
.tarjeta-contacto-azul .rotulo {
  color: var(--beige-2); font-weight: 800; font-size: .85rem; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.tarjeta-contacto-azul .dato { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7em; font-size: 1.02rem; }
.tarjeta-contacto-azul .dato svg { width: 1.25em; height: 1.25em; flex: none; margin-top: .15em; color: var(--verde); }
.tarjeta-contacto-azul .dato a { color: var(--blanco); font-weight: 700; overflow-wrap: anywhere; }
.tarjeta-contacto-azul .nota { color: var(--beige-1); font-size: .93rem; margin: 1.5rem 0 0; max-width: 42ch; }
.tarjeta-contacto-azul .pautas { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tarjeta-contacto-azul .pautas li { padding-left: 1.4rem; position: relative; font-size: .98rem; line-height: 1.45; }
.tarjeta-contacto-azul .pautas li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.tarjeta-contacto-azul .pautas strong { color: var(--beige-2); }
.formulario-contacto { display: grid; gap: .9rem; align-content: start; }
.formulario-contacto input, .formulario-contacto textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--texto);
  background: var(--beige-2); border: 2px solid var(--azul-80); border-radius: 14px;
  padding: .85rem 1.1rem;
}
.formulario-contacto textarea { resize: vertical; min-height: 8rem; }
/* Denuncias: cruce con el trámite formal, una línea chica al pie de la tarjeta azul (2026-10-01). */
.tarjeta-contacto-azul .cruce { margin: 1.25rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--beige-1); }
.tarjeta-contacto-azul .cruce a { color: var(--blanco); font-weight: 700; text-decoration: underline; }
.formulario-contacto input::placeholder, .formulario-contacto textarea::placeholder { color: var(--azul-80); opacity: 1; }
.formulario-contacto input:focus, .formulario-contacto textarea:focus {
  outline: none; border-color: var(--azul); background: var(--blanco); box-shadow: 0 0 0 3px var(--verde-20);
}
.formulario-contacto .btn { margin-top: .25rem; }
.formulario-contacto .ayuda { margin: 0; font-size: .88rem; color: var(--gris); text-align: center; }
.formulario-contacto input[type="file"] {
  background: var(--beige-2); border: 2px dashed var(--azul-80); border-radius: 14px;
  padding: .7rem 1rem; font-size: .95rem;
}
/* Denuncias: campo trampa antispam — invisible para personas videntes y para lectores de pantalla. */
.hn-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-contacto .form-error {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  background: var(--beige-1); border: 1px solid var(--coral); border-radius: 12px;
  padding: .75rem 1rem; color: var(--texto); font-size: .95rem;
}
.formulario-contacto .form-error svg { width: 1.3em; height: 1.3em; flex: none; color: var(--coral); }
.formulario-enviado { justify-items: center; text-align: center; padding: 2rem 1rem; }
.formulario-enviado .ok { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; color: var(--azul); margin: 0; }
.formulario-enviado .ok svg { width: 1.4em; height: 1.4em; color: var(--verde); }

/* "Para quién" destacado en la página del trámite (opción A, 2026-09-18):
   tarjeta CREMA con franja e ícono TURQUESA; rótulo chico en mayúsculas,
   texto en AZUL. Sobre turquesa va azul (4.6:1), nunca blanco. */
.para-quien {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: var(--beige-1); border-left: 6px solid var(--turquesa);
  border-radius: 0 14px 14px 0; padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.para-quien .icono { width: 44px; height: 44px; border-radius: 50%; background: var(--turquesa); color: var(--azul); display: grid; place-items: center; flex: none; }
.para-quien .icono svg { width: 24px; height: 24px; }
.para-quien strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--azul-80); margin-bottom: .2rem; }
.para-quien p { margin: 0; font-size: 1.05rem; color: var(--azul); }
@media (max-width: 480px) { .para-quien { grid-template-columns: 1fr; } .para-quien .icono { width: 36px; height: 36px; } }

/* ------------------------------------------------------------------- pie */
/* Como el pie de turismo: redes a la izquierda en círculos beige, el
   isologotipo grande a la derecha, y una regla verde al cierre. */
.pie { background: var(--azul); color: var(--blanco); padding: 3rem 0 2rem; border-bottom: 8px solid var(--verde); }
.pie-redes {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.15);
}
/* Escudo grande a la izquierda con "Gobierno / de la Provincia / del
   Neuquén" en tres líneas BEIGE (Nicolás, 2026-09-13, como el pie de
   ambiente.neuquen.gov.ar: escudo de ~100 px y texto de ~20 px). Es el
   escudo que salió de la cabecera. Redes al medio, isologotipo a la derecha. */
.pie-gobierno { display: flex; align-items: center; gap: 1rem; }
.pie-escudo { height: 100px; width: auto; flex: none; }
.pie-gobierno p { margin: 0; font-size: 1.25rem; line-height: 1.15; font-weight: 500; color: var(--beige-1); }
.pie-titulo { font-size: 1.15rem; font-weight: 600; margin: 0 0 .9rem; color: var(--blanco); }
.redes { display: flex; gap: 1.4rem; flex-wrap: wrap; }
/* Glifos VERDES sueltos sobre el azul del pie, sin círculo (referencia que
   pasó Nicolás el 2026-09-12). Como son ícono y no texto, el verde sobre azul
   no cae bajo la regla de contraste de texto; igual da 4.7:1. `.pie a`
   pintaría el glifo de blanco: por eso la regla va con más peso. */
.pie .redes a {
  width: 44px; height: 44px; color: var(--verde);
  display: grid; place-items: center; transition: transform .15s, color .15s;
}
.pie .redes a:hover { color: var(--beige-1); transform: translateY(-2px); }
.redes svg { width: 36px; height: 36px; }
.pie-isologo { height: 90px; width: auto; }   /* 90 % del escudo (manual 2026, p. 27) */
.pie-columnas { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
.pie h2 { color: var(--blanco); font-size: 1.1rem; margin-bottom: .6em; }
.pie p { margin: 0 0 .5em; color: var(--beige-1); font-size: .95rem; }
.pie a { color: var(--blanco); font-weight: 600; }
/* Datos con ícono verde, el mismo patrón de las tarjetas de contacto
   (Nicolás, 2026-09-12: le gustó ese diseño para el pie). */
.pie .dato { display: flex; gap: .65rem; align-items: flex-start; }
.pie .dato svg { width: 1.25em; height: 1.25em; flex: none; margin-top: .15em; color: var(--verde); }
/* El correo corta antes de la arroba (<wbr>); solo si aun así no entra, donde sea. */
.pie .dato a { overflow-wrap: anywhere; }
.pie .legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1rem; font-size: .85rem; opacity: .75; }
@media (max-width: 800px) {
  .pie-columnas { grid-template-columns: 1fr; }
  .pie-isologo { height: 72px; }   /* 90 % del escudo de 80 px */
  .pie-escudo { height: 80px; }
  .pie-gobierno p { font-size: 1.1rem; }
}

/* Accesibilidad: foco visible en toda la familia */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarjeta, .btn { transition: none; }
}
/* ------------------------------------------------------- formulario web */
/* Formulario que arma el PDF en el navegador. Un campo por fila, como en los
   PDF; controles de 52 px de alto (dedo); errores en rojo junto al campo.
   ⚠️ Este bloque va ANTES del de impresión: una edición que corte "desde
   @media print hasta el final" no debe llevárselo (pasó el 2026-09-12). */
.formulario { min-width: 0; }
.bloque {
  border: 0; padding: 1.5rem; margin: 0 0 1.5rem;
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
}
.bloque legend {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.35rem; font-weight: 800; padding: 0; margin-bottom: .25rem;
}
.bloque legend .num {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none;
  background: var(--verde); color: var(--azul); font-size: 1.05rem;
  display: grid; place-items: center;
}
.bloque .opcional {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--beige-2); border-radius: 999px; padding: .2rem .6rem; margin-left: .25rem;
}
.intro-bloque { color: var(--gris); margin-bottom: 1.25rem; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .35rem; }
.campo .ast { color: var(--rojo); }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: var(--beige-1); border: 2px solid var(--borde); border-radius: 12px;
  padding: .75rem .9rem; min-height: 52px;
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); background: var(--blanco); box-shadow: 0 0 0 3px rgba(135,184,103,.45); }
.campo .ayuda { font-size: .9rem; color: var(--gris); margin: .35rem 0 0; }
.campo .error { font-size: .92rem; color: var(--rojo); font-weight: 600; margin: .35rem 0 0; min-height: 0; }
.campo.con-error input, .campo.con-error textarea { border-color: var(--rojo); background: var(--rojo-fondo); }
.campo-date input { max-width: 240px; }
.campo-dni input, .campo-cuit input, .campo-tel input { max-width: 360px; }
.campo-lugar input { max-width: 420px; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.acciones .btn-grande { width: auto; }
.acciones .estado { width: 100%; margin: .25rem 0 0; font-weight: 600; color: var(--gris); }
.acciones .estado.error { color: var(--rojo); }
.cierre {
  background: var(--verde-20); border-left: 6px solid var(--verde);
  border-radius: 0 var(--radio) var(--radio) 0; padding: 1.5rem; margin-top: 1rem;
}
.cierre .pasos li { margin-bottom: .5rem; }
.cierre .pasos ul { color: var(--gris); font-size: .98rem; margin: .25rem 0 0; }
.cierre .btn { margin-top: .75rem; }
.tarjeta-descarga .o { text-align: center; margin: .6rem 0; color: var(--beige-1); font-size: .9rem; opacity: .85; }
.tarjeta-descarga .btn-claro { background: var(--blanco); }
@media (max-width: 600px) {
  .bloque { padding: 1.1rem; border-radius: 14px; }
  .acciones .btn-grande { width: 100%; }
}

/* Opciones (botones de radio): una por fila, toda la fila es clicable */
.campo-opciones { border: 0; padding: 0; margin: 0 0 1.1rem; }
.campo-opciones legend { font-weight: 700; padding: 0; margin-bottom: .35rem; }
.opciones { display: grid; gap: .5rem; }
.opcion, .campo .opcion {   /* .campo label (display:block) le ganaba: el texto caía debajo del botón */
  display: flex; align-items: center; gap: .75rem; cursor: pointer;
  background: var(--beige-1); border: 2px solid var(--borde); border-radius: 12px;
  padding: .7rem .9rem; min-height: 52px; font-weight: 500;
}
.campo .opcion { margin-bottom: 0; }
.dni-arriba { background: var(--crema, #FCF2DC); border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.dni-arriba { border: 0; min-width: 0; }
/* El legend de un fieldset se dibuja SOBRE el borde; flotado queda adentro del cuadro crema. */
.dni-arriba legend { float: left; width: 100%; padding: 0; margin: 0 0 .7rem; font-weight: 700; font-size: 1.05rem; }
.dni-arriba legend + * { clear: both; }
.dni-arriba .obligatorio { color: var(--rojo); }
.dni-arriba p { margin: 0 0 .6rem; }
.dni-arriba .estado { font-weight: 600; }
.dni-arriba .estado.error { color: var(--rojo); }
.dni-arriba .ayuda { margin: 0; }
.dni-arriba .enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.campo input[readonly] { opacity: .85; cursor: not-allowed; }
.opcion input { width: 1.25rem; height: 1.25rem; accent-color: var(--azul); flex: none; margin: 0; }
.opcion:has(input:checked) { border-color: var(--azul); background: var(--blanco); }
.campo.con-error .opcion { border-color: var(--rojo); }

/* Grupos repetibles ("+ Agregar otra persona") */
.grupo { position: relative; }
.grupos-extra .grupo { border-top: 2px dashed var(--borde); padding-top: 1rem; margin-top: 1rem; }
.grupo-titulo {
  display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--azul);
  margin: 0 0 .75rem; font-size: 1.05rem;
}
.grupo-titulo .quitar { margin-left: auto; font-size: .85rem; padding: .45rem .9rem; }
.agregar { margin-top: .25rem; }

/* Aviso de rechazo / obligación: mismo par de colores que la caja "alerta" de
   los PDF. El mensaje se entiende sin el color; el rojo es refuerzo. */
.alerta-roja {
  background: var(--rojo-fondo); border: 2px solid var(--rojo); color: var(--rojo);
  border-radius: 14px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; font-size: 1.02rem;
}
.alerta-roja strong { color: var(--rojo); }

/* ---------------------------------------------------------------- noticias */
/* Sección Noticias (2026-09-13, especificación en
   web/_relevamiento_noticias/especificacion_noticias.md §5). Tarjeta calcada
   de turismo.neuquen.gob.ar (foto 3:2 arriba, pastilla de categoría arriba a
   la derecha, título, resumen, "Leer más") sobre la .tarjeta que ya existe.
   Pastilla: VERDE con texto AZUL (4.79:1, decisión D6). Resumen y fecha en
   AZUL 80 % (6.03:1 sobre blanco). El verde nunca es color de texto. */
.noticia { position: relative; }
.noticia-foto {
  aspect-ratio: 3 / 2; overflow: hidden; position: relative;
  background: var(--beige-1);
}
.noticia-foto img, .noticia-foto svg {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
/* GIF vertical como destacada (2026-09-18): "center top" da por hecho una
   foto horizontal con lo importante más abajo del cuadro; en un video de
   celular vertical eso deja ver solo el cielo. hn_foto_nota() marca .vertical
   cuando el archivo es más alto que ancho (ver inc/noticias.php). */
.noticia-foto img.vertical { object-position: center; }
.pastilla {
  display: inline-block; background: var(--verde); color: var(--azul);
  font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.3; padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
}
/* Token alternativo (D6): si sobre fotos muy claras la pastilla verde se
   pierde, pasar a AZUL + blanco (11.08:1). Descomentar estas dos líneas:
.pastilla { background: var(--azul); color: var(--blanco); }
.heroe-interior .pastilla { outline: 2px solid var(--beige-1); } */
a.pastilla:hover, a.pastilla:focus-visible { background: var(--verde-80); }
.noticia-foto .pastilla { position: absolute; top: 1rem; right: 1rem; max-width: calc(100% - 2rem); }
.noticia-cuerpo { padding: 1.25rem 1.25rem .5rem; flex: 1; }
.noticia-volanta { font-size: .95rem; font-weight: 600; color: var(--gris); margin: 0 0 .3rem; }
.noticia-titulo { font-size: clamp(1.15rem, 5vw, 1.375rem); line-height: 1.25; margin: 0 0 .5rem; }
.noticia-titulo a { color: var(--azul); text-decoration: none; }
/* Un solo enlace por tarjeta (el título) y toda la tarjeta clicable. */
.noticia-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.noticia:hover .noticia-titulo a, .noticia-titulo a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.noticia-titulo a:focus-visible { outline: none; }
.noticia:has(.noticia-titulo a:focus-visible) { outline: 3px solid var(--azul); outline-offset: 3px; }
.noticia-resumen {
  font-size: .95rem; line-height: 1.5; color: var(--gris); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.noticia-pie {
  padding: .75rem 1.25rem 1.25rem; margin-top: auto;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
}
.noticia-pie time { font-size: .875rem; font-weight: 500; color: var(--gris); }
.leer-mas {
  font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--azul); display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.leer-mas svg { width: 1em; height: 1em; }
.seccion-noticias .con-sonrisa { margin-bottom: 1.5rem; }
.seccion-noticias .intro { margin-top: -1rem; margin-bottom: 1.75rem; }
.centrado { text-align: center; margin: 2rem 0 0; }

/* "Quiénes somos" en la portada del sitio principal (tema 1.3.2, 2026-09-14):
   fondo blanco después del beige de noticias, título con sonrisa, un párrafo
   oficial a ancho de lectura, tres fotos 3:2 con esquinas redondeadas y una
   fila de accesos rápidos (tarjetas BEIGE 1 con borde BEIGE 2, círculo verde
   con el ícono en AZUL: mismo lenguaje que las tarjetas de trámite). */
.seccion-somos { background: var(--blanco); }
.somos-texto .con-sonrisa { margin-bottom: 1.25rem; }
.somos-texto .intro { color: var(--texto); font-size: 1.1rem; max-width: 66ch; margin-bottom: .9rem; }
.somos-mas { margin: 1.25rem 0 0; }
.somos-fotos {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.somos-fotos li { margin: 0; min-width: 0; }
.somos-fotos img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radio); box-shadow: var(--sombra); background: var(--beige-1);
}
/* En celular la primera foto va a lo ancho y las otras dos de a mitades: tres apiladas eran 700 px de foto. */
@media (max-width: 600px) {
  .somos-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
  .somos-fotos li:first-child { grid-column: 1 / -1; }
}
/* Página "Quiénes somos": las mismas 3 fotos, apiladas en la columna lateral. */
.somos-fotos-lateral { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.somos-fotos-lateral li { margin: 0; }
.somos-fotos-lateral img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radio); box-shadow: var(--sombra); background: var(--beige-1);
}
.somos-fotos-lateral li:nth-child(1) img { border-radius: 90px 18px 18px 18px; }
.somos-fotos-lateral li:nth-child(2) img { border-radius: 18px 18px 90px 18px; }
.somos-fotos-lateral li:nth-child(3) img { border-radius: 18px 90px 18px 18px; }
/* Las tres fotos de "Quiénes somos", a lo ancho: apaisadas, del mismo alto y
   con la esquina grande del manual alternada, para que se lean como una banda
   y no como tres tarjetas sueltas. En celular pasan a una por fila. */
.somos-fotos-seccion { padding-top: 0; }
.somos-fotos-banda {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.somos-fotos-banda li { margin: 0; min-width: 0; }
.somos-fotos-banda figure { margin: 0; }
.somos-fotos-banda img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
  border-radius: var(--radio); box-shadow: var(--sombra); background: var(--beige-1);
}
.somos-fotos-banda li:nth-child(1) img { border-radius: 72px 18px 18px 18px; }
.somos-fotos-banda li:nth-child(2) img { border-radius: 18px 18px 18px 18px; }
.somos-fotos-banda li:nth-child(3) img { border-radius: 18px 72px 18px 18px; }
.somos-fotos-banda figcaption {
  color: var(--gris); font-size: .92rem; line-height: 1.45; margin-top: .6rem;
}
@media (max-width: 860px) {
  .somos-fotos-banda { grid-template-columns: 1fr; gap: 1.25rem; }
  .somos-fotos-banda li:nth-child(n) img { border-radius: 72px 18px 18px 18px; }
}

.accesos { margin-top: 2.5rem; }
.accesos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accesos li { margin: 0; min-width: 0; }
.accesos a {
  display: flex; align-items: center; gap: .9rem; min-height: 44px; height: 100%;
  text-decoration: none; color: var(--azul);
  background: var(--beige-1); border: 2px solid var(--beige-2); border-radius: var(--radio);
  padding: .9rem 1rem; transition: border-color .15s, background .15s;
}
.accesos a:hover, .accesos a:focus-visible { border-color: var(--azul); background: var(--blanco); }
.accesos .circulo {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--verde); color: var(--azul); display: grid; place-items: center;
}
.accesos .circulo svg { width: 26px; height: 26px; }
.acceso-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.acceso-texto strong { font-size: 1.05rem; font-weight: 800; }
.acceso-texto small { font-size: .85rem; color: var(--gris); margin-top: .15em; overflow-wrap: anywhere; }
@media (max-width: 900px) { .accesos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .accesos ul { grid-template-columns: minmax(0, 1fr); } }

/* Archivo /noticias/: buscador en el héroe, filtros por categoría y
   paginación numerada (44 px de alto: mínimo táctil). */
.buscador-notas { max-width: 640px; margin: 1.25rem 0 0; }
.campo-busqueda button {
  background: none; border: 0; padding: 0; margin: 0; color: var(--azul); cursor: pointer;
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
}
.campo-busqueda button:hover { background: var(--beige-1); }
.campo-busqueda button svg { width: 1.3em; height: 1.3em; }
.heroe-interior .buscador-notas .campo-busqueda { border-color: transparent; box-shadow: 0 6px 18px rgba(43,62,76,.15); }
.heroe-interior .buscador-notas .campo-busqueda:focus-within { box-shadow: 0 0 0 3px var(--verde); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.filtros a {
  text-decoration: none; background: var(--blanco); border: 2px solid var(--borde);
  border-radius: 999px; padding: .4rem 1rem; font-weight: 600; font-size: .95rem;
  min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; color: var(--azul);
}
.filtros a:hover { border-color: var(--azul); }
.filtros a[aria-current="page"] { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.filtros small { font-size: .8rem; font-weight: 700; color: var(--gris); }
.filtros a[aria-current="page"] small { color: var(--beige-1); }
.grilla-noticias { margin-top: .25rem; }
.sin-notas { background: var(--beige-1); border-radius: var(--radio); padding: 2rem; text-align: center; }
.sin-notas p { margin: 0 0 1rem; color: var(--gris); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.paginacion .page-numbers {
  min-width: 44px; height: 44px; padding: 0 .9rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  font-weight: 700; text-decoration: none; color: var(--azul);
  background: var(--blanco); border: 2px solid var(--borde);
}
.paginacion a.page-numbers:hover { background: var(--beige-2); border-color: var(--beige-2); }
.paginacion .page-numbers.current { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.paginacion .page-numbers.dots { border-color: transparent; }
.paginacion .page-numbers svg { width: 1em; height: 1em; }
.paginacion .prev svg { transform: rotate(180deg); }

/* La nota: cabecera azul (pastilla, volanta, título, bajada, fecha y firma),
   foto destacada debajo con aire, cuerpo a ancho de lectura (45 rem =
   720 px, 60-75 caracteres por línea).
   La foto iba "montada" sobre el azul con margin-top -3.5rem, pero ese
   valor solo cancelaba el relleno de .seccion: la foto arrancaba justo en
   el borde del azul, ni montada ni separada (Nicolás, 2026-09-13: "se ve
   pegada"). turismo y ambiente no montan la foto: título sobre fondo
   plano y la imagen 40 px más abajo. Queda igual: 40 px de aire en
   escritorio (2.5rem) y 20 en celular. */
.heroe-nota { padding-bottom: 2.75rem; }
.heroe-nota .pastilla { margin-bottom: 1rem; }
.heroe-nota .volanta { color: var(--beige-1); font-size: 1.1rem; font-weight: 500; margin: 0 0 .4rem; }
.heroe-nota h1 { max-width: 24ch; }
.heroe-nota .meta {
  color: var(--beige-1); font-size: .95rem; margin: 1.1rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
}
.heroe-nota .meta .sep { opacity: .6; }
.nota { max-width: 45rem; margin-inline: auto; }
.nota-foto { margin: -1rem 0 2rem; position: relative; }          /* .seccion trae 3.5rem: quedan 2.5rem = 40 px */
@media (max-width: 768px) { .nota-foto { margin-top: -2.25rem; } }   /* 1.25rem = 20 px */
.nota-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
.nota-foto figcaption, .nota-cuerpo figcaption { font-size: .875rem; color: var(--gris); margin-top: .6rem; line-height: 1.4; }
.nota-cuerpo > :first-child { margin-top: 0; }
.nota-cuerpo p, .nota-cuerpo li { font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.nota-cuerpo p { margin: 0 0 1.25em; }
.nota-cuerpo h2 { font-size: 1.625rem; margin: 1.75em 0 .5em; }
.nota-cuerpo h3 { font-size: 1.375rem; margin: 1.5em 0 .5em; }
.nota-cuerpo h4 { font-size: 1.15rem; margin: 1.25em 0 .4em; }
.nota-cuerpo ul, .nota-cuerpo ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.nota-cuerpo li { margin-bottom: .35em; }
.nota-cuerpo ul li::marker { color: var(--verde); }
.nota-cuerpo ol li::marker { color: var(--azul); font-weight: 800; }
.nota-cuerpo a { color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.nota-cuerpo strong { font-weight: 700; }
.nota-cuerpo blockquote, .nota-cuerpo .wp-block-quote {
  border-left: 6px solid var(--verde); background: var(--verde-20);
  border-radius: 0 14px 14px 0; margin: 1.5rem 0; padding: 1rem 1.25rem;
}
.nota-cuerpo blockquote p { font-size: 1.1rem; font-weight: 500; }
.nota-cuerpo blockquote p:last-of-type { margin-bottom: 0; }
.nota-cuerpo blockquote cite { display: block; margin-top: .5em; font-style: normal; font-size: .9rem; color: var(--gris); }
.nota-cuerpo figure { margin: 1.5rem 0; }
.nota-cuerpo .wp-block-image img { width: 100%; height: auto; border-radius: 14px; }
.nota-cuerpo .wp-block-image.alignleft, .nota-cuerpo .wp-block-image.alignright { float: none; margin-inline: 0; }
.nota-cuerpo .wp-block-image.aligncenter { text-align: center; }
/* Galería: grilla pareja, cada foto cuadrada recortada (las notas mezclan
   fotos apaisadas y verticales de celular). WordPress imprime en línea el
   CSS del bloque (figure flex, anchos en calc) y el de "layout" (.is-layout-flex):
   estas reglas van con más especificidad para pisarlo. Acepta el markup
   nuevo (figure > figure.wp-block-image) y el viejo (ul > li.blocks-gallery-item). */
.nota .nota-cuerpo .wp-block-gallery, .nota .nota-cuerpo .wp-block-gallery.is-layout-flex {
  display: grid; gap: .75rem; margin: 1.5rem 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.nota .nota-cuerpo .wp-block-gallery .blocks-gallery-grid { display: contents; list-style: none; margin: 0; padding: 0; }
/* El CSS del bloque núcleo sube su especificidad con `:not(#individual-image)`
   (un id): para pisarlo hay que usar el mismo truco. */
.nota .nota-cuerpo .wp-block-gallery figure.wp-block-image:not(#individual-image), .nota .nota-cuerpo .wp-block-gallery li {
  display: block; width: auto; margin: 0; min-width: 0; flex: none;
}
.nota .nota-cuerpo .wp-block-gallery figure figcaption { display: none; }
.nota .nota-cuerpo .wp-block-gallery img, .nota .nota-cuerpo .wp-block-gallery figure.wp-block-image:not(#individual-image) img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; flex: none;
}
.nota .nota-cuerpo .wp-block-gallery .wp-lightbox-container { display: block; }
.nota .nota-cuerpo .wp-block-gallery .wp-lightbox-container button { border-radius: 14px; }
/* Botón "ampliar" del lightbox nativo (aparece al pasar el mouse): en la paleta. */
.nota .nota-cuerpo .wp-lightbox-container button.lightbox-trigger:not(#individual-image) { color: var(--azul); background-color: var(--blanco); border: 0; border-radius: 10px; }
@media (max-width: 480px) {
  .nota .nota-cuerpo .wp-block-gallery, .nota .nota-cuerpo .wp-block-gallery.is-layout-flex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}
.nota-cuerpo .wp-block-table, .nota-cuerpo .tabla-scroll { overflow-x: auto; margin: 1.5rem 0; }
.nota-cuerpo table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.nota-cuerpo th, .nota-cuerpo td { border: 1px solid var(--borde); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.nota-cuerpo th { background: var(--beige-1); font-weight: 700; }
.nota-cuerpo .wp-block-embed { margin: 1.5rem 0; }
.nota-cuerpo .wp-block-embed__wrapper { position: relative; }
.nota-cuerpo .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }
.nota-cuerpo .wp-block-audio audio, .nota-cuerpo .wp-block-video video { width: 100%; }
.nota-cuerpo .wp-block-video video { border-radius: 14px; }
.nota-cuerpo .wp-block-file { background: var(--beige-1); border-radius: 14px; padding: .85rem 1.1rem; margin: 1.5rem 0; }
.nota-cuerpo .wp-block-file a { font-weight: 700; }
.nota-cuerpo .wp-block-file .wp-block-file__button { display: inline-block; margin-left: .5rem; }
.nota-cuerpo .wp-block-separator { border: 0; border-top: 2px solid var(--borde); margin: 2rem auto; width: 6rem; }
/* Firma institucional (D5: "Prensa SRH", nunca la persona) */
.firma {
  display: flex; gap: .85rem; align-items: center; margin-top: 2.5rem;
  background: var(--beige-1); border-radius: 14px; padding: 1rem 1.25rem;
}
.firma .circulo { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--verde); color: var(--azul); display: grid; place-items: center; }
.firma .circulo svg { width: 24px; height: 24px; }
.firma p { margin: 0; font-size: .95rem; color: var(--gris); }
.firma strong { display: block; color: var(--azul); font-size: 1.05rem; }
/* Compartir: enlaces por URL (WhatsApp, X, Facebook, correo) y copiar. Sin SDK. */
.compartir { border-top: 2px solid var(--borde); margin-top: 2rem; padding-top: 1.5rem; }
.compartir h2 { font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: .75rem; }
.compartir-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.compartir .btn { font-size: .92rem; padding: .6rem 1rem; font-family: inherit; }
.compartir .btn svg { width: 1.15em; height: 1.15em; }
.compartir .estado { margin: .6rem 0 0; font-size: .9rem; color: var(--gris); font-weight: 600; min-height: 1.4em; }
/* Anterior / siguiente */
.nota-nav { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.nota-nav a {
  display: block; text-decoration: none; background: var(--blanco); border: 2px solid var(--borde);
  border-radius: 14px; padding: .9rem 1.1rem; min-width: 0;
}
.nota-nav a:hover { border-color: var(--azul); }
.nota-nav .siguiente { text-align: right; }
.nota-nav small { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: .25rem; }
.nota-nav span { font-weight: 600; line-height: 1.3; display: block; overflow-wrap: anywhere; }
@media (max-width: 600px) { .nota-nav { grid-template-columns: 1fr; } .nota-nav .siguiente { text-align: left; } }
.relacionadas .con-sonrisa { margin-bottom: 1.5rem; }
.relacionadas .centrado { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ------------------------------------- cabecera del sitio principal (WP) */
/* El sitio principal del multisitio trae 8 ítems + "Mesa de Entradas"; el de
   trámites, 4. Todo lo de este bloque cuelga de `body.sitio-principal` (lo
   pone el tema cuando el sitio no tiene trámites), así el subsitio y el
   estático no cambian. El bloque de marca es EL MISMO del estático
   (Nicolás, 2026-09-13: la marca grande): isologotipo de 84 px, separador y
   el nombre a 1.35rem/800 en dos líneas ("Subsecretaría de" / "Recursos
   Hídricos", 21ch), sin la línea "Guía de trámites", que es del subsitio.
   Sin escudo en la barra (queda en el pie y en el sello): el isologotipo
   ya identifica a la provincia. Medido con measureText en Manrope: marca
   423 px + 17 de separación + nav de 846 px (9 rótulos a 14 px/500, relleno
   7,2 px por lado, botón verde) = 1286 px → entra en una fila desde un
   contenedor de 1286, o sea una ventana de 1326: el corte va en 1340 px
   (a 1366 el contenedor es 1326 y quedan 40 px de aire). A 1280 el
   contenedor es de 1240 y no entra ni con relleno mínimo (827 px de nav):
   por debajo de 1340 va el botón de menú, nunca dos filas. 14 px es el
   tamaño de los ítems de turismo (14/600, relleno 13×7): el piso. */
.sitio-principal .cabecera .contenedor { width: min(1326px, 100% - 2.5rem); gap: 1rem; }
.sitio-principal .nav a { font-size: .875rem; font-weight: 500; padding: .5rem .45rem; text-transform: none; letter-spacing: 0; }
.sitio-principal .nav a.destacado { padding: .5rem .8rem; margin-left: .25rem; font-weight: 700; }
@media (min-width: 1340px) {
  .sitio-principal .nav { flex-wrap: nowrap; gap: 0; }
}
/* Por debajo de 1340 el sitio principal pasa al botón de menú (el subsitio
   lo hace a 1180). Mismo panel desplegable que el general. */
@media (max-width: 1339px) {
  .sitio-principal .boton-menu { display: block; }
  .sitio-principal .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--azul); flex-direction: column; align-items: stretch;
    padding: .75rem 1.25rem 1.25rem; gap: .35rem;
  }
  .sitio-principal .nav.abierta { display: flex; }
  .sitio-principal .nav a { padding: .8rem 1rem; border-radius: 12px; font-size: 1rem; font-weight: 600; }
  .sitio-principal .nav a.destacado { margin-left: 0; }
}

/* ------------------------------------------ franja del 20º Aniversario */
/* Decreto 103/2026, art. 1º: durante 2026 toda página web institucional
   lleva "en su encabezado" la leyenda del 20º aniversario de la reforma de
   la Constitución. Como en www.neuquen.gob.ar y turismo: una franja fina
   beige por encima de la barra azul, una línea centrada de ~15 px. Ellos
   ponen "20° aniversario" en verde cursiva; acá va en AZUL cursiva 700
   (el verde nunca es texto: 2.1:1). AZUL sobre BEIGE 1 da 9.95:1. La
   franja va ANTES de la cabecera fija: se va con el scroll y no suma al
   alto de la barra. En celular parte en dos líneas, nunca desborda. La
   imprime el plugin (hn_franja_aniversario, hook hn_cabecera_antes) y el
   estático (generar_web.franja_aniversario), solo si el año es 2026. */
.franja-aniversario {
  background: var(--beige-1); color: var(--azul); border-bottom: 1px solid var(--beige-2);
  text-align: center; font-size: .9375rem; line-height: 1.3; padding: .4rem 1rem;
}
.franja-aniversario p { margin: 0; overflow-wrap: anywhere; }
.franja-aniversario strong { font-weight: 800; }
.franja-aniversario em { font-style: italic; font-weight: 700; }
/* Sello del aniversario en el pie (Nicolás, 2026-09-13): la composición de
   tramitur.neuquen.gov.ar —leyenda en dos líneas y debajo el monograma
   "nqn · neuquén cambia para vos" + escudo "Gobierno de la Provincia del
   Neuquén"— como banda BEIGE 1 entre el contenido y el pie azul. "20°
   aniversario" en AZUL 800 (tramitur lo pone en verde). Imagen al 40 %
   del contenedor en escritorio y 90 % en celular. Misma condición de año. */
.sello-aniversario {
  background: var(--beige-1); color: var(--azul); border-top: 1px solid var(--beige-2);
  text-align: center; padding: 1.75rem 0;
}
/* 2026-10-09 (Nicolás): la leyenda del aniversario salió de acá (la pone RPI
   en la cabecera); queda solo el monograma, en una banda más angosta. Las
   reglas de .anio y .leyenda quedan por si vuelve una leyenda. */
.sello-aniversario p { margin: 0; overflow-wrap: anywhere; }
.sello-aniversario .anio { font-size: 1.875rem; line-height: 1.2; letter-spacing: -.01em; }
.sello-aniversario .anio strong { font-weight: 800; }
.sello-aniversario .leyenda { font-size: 1.125rem; line-height: 1.35; margin-top: .25em; }
.sello-aniversario img { display: block; width: 40%; max-width: 100%; height: auto; margin: 0 auto; }
/* Variante por defecto: solo el monograma (600×237). Va por alto, no por
   ancho: al 40 % quedaría un monograma de 180 px de alto. 84 px = la
   proporción del completo (escudo de ~70 px) más un poco. */
.sello-aniversario.monograma img { width: auto; height: 76px; max-width: 90%; }
@media (max-width: 768px) {
  .sello-aniversario { padding: 1.5rem 0; }
  .sello-aniversario .anio { font-size: 1.5rem; }
  .sello-aniversario .leyenda { font-size: 1rem; }
  .sello-aniversario img { width: 90%; }
  .sello-aniversario.monograma img { width: auto; height: 64px; }
}

/* ---------------------------------------------- portada con video (WP) */
/* Héroe de la portada del sitio principal: el video de dron sobre la represa
   del WordPress viejo, como el video de portada de turismo.neuquen.gob.ar.
   Alto (Nicolás, 2026-09-13: "más grande"): toda la ventana por debajo de
   la barra fija —100svh menos --alto-cabecera—, mínimo 560, máximo 960
   (turismo, medido en vivo el 2026-09-13: 614 px a 1366×768 y 864 a
   1920×1080, o sea el 80 % de la ventana; en celular 325). Antes era
   clamp(440px, 70vh, 640px) = 630 a 1366×900. La franja del aniversario
   (2026) va antes de la barra y se va con el scroll: sitio.js mide su alto
   real y lo pone en --alto-franja para que al cargar el héroe termine
   justo en el borde de la ventana (sin JS, 33–53 px por debajo).
   Velo: el anterior era global (AZUL 0,78 hasta el 62 % y 0,30 en el borde
   derecho) y dejaba el agua "apagada". Ahora el tinte es LOCAL: un
   degradado horizontal AZUL 0,78 desde el borde izquierdo hasta pasar el
   borde derecho de la columna de texto (el texto termina en 50 % − 10 px:
   contenedor de 1140 centrado, columna de 560) y a 0 unos 190 px más a la
   derecha; el resto del cuadro, sin tinte. El 0,78 sale de medir con cv2
   la luminancia local máxima (promedio 9×9) de los 364 cuadros en la zona
   del texto a cada ancho: 0,91–0,94 → BEIGE 1 necesita alfa 0,72–0,735
   para 4,5:1; 0,78 da 5,1:1 y deja margen. En celular el texto va abajo y
   el scrim sube desde el borde inferior (400 px planos, a 0 en 540). */
.heroe-video {
  position: relative; overflow: hidden; background: var(--azul); color: var(--beige-1);
  min-height: clamp(560px, calc(100vh - var(--alto-cabecera) - var(--alto-franja, 0px)), 960px);
  min-height: clamp(560px, calc(100svh - var(--alto-cabecera) - var(--alto-franja, 0px)), 960px);
  display: flex; align-items: center; padding: 3rem 0;
}
.heroe-video::before { display: none; }              /* sin la sonrisa gigante de fondo: ya hay imagen */
.heroe-video .fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.heroe-video .velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(43,62,76,.78) 0, rgba(43,62,76,.78) calc(50% + 24px), rgba(43,62,76,0) calc(50% + 214px));
}
.heroe-video .contenedor { position: relative; }
.heroe-video-texto { max-width: 560px; }
.heroe-video h1 { color: var(--beige-1); margin-bottom: .35em; }
.heroe-video .bajada { font-size: 1.15rem; font-weight: 500; max-width: 46ch; margin: 0 0 1.5rem; color: var(--beige-1); }
.heroe-video .botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-contorno-claro { background: transparent; color: var(--beige-1); border-color: var(--beige-1); }
.btn-contorno-claro:hover, .btn-contorno-claro:focus-visible { background: var(--beige-1); color: var(--azul); }
/* El video de fondo se mueve solo y dura más de 5 s: tiene que poder
   detenerse (WCAG 2.2.2). Con prefers-reduced-motion no arranca y el mismo
   botón lo reproduce si el vecino quiere. */
.video-pausa {
  position: absolute; right: 1.25rem; bottom: 1.25rem; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--beige-1); background: var(--azul); color: var(--beige-1); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.video-pausa svg { width: 22px; height: 22px; }
.video-pausa:hover, .video-pausa:focus-visible { background: var(--beige-1); color: var(--azul); }
/* Con el contenedor a 100 % − 2.5rem (≤ 1180) la columna de texto termina
   en 50 % + 70 px (a 1024): el tramo plano se corre. */
@media (max-width: 1180px) {
  .heroe-video .velo { background: linear-gradient(90deg, rgba(43,62,76,.78) 0, rgba(43,62,76,.78) calc(50% + 84px), rgba(43,62,76,0) calc(50% + 274px)); }
}
@media (max-width: 768px) {
  .heroe-video {
    min-height: clamp(520px, calc(100vh - var(--alto-cabecera) - var(--alto-franja, 0px)), 760px);
    min-height: clamp(520px, calc(100svh - var(--alto-cabecera) - var(--alto-franja, 0px)), 760px);
    align-items: flex-end; padding: 6rem 0 2.5rem;
  }
  .heroe-video .velo { background: linear-gradient(0deg, rgba(43,62,76,.78) 0, rgba(43,62,76,.78) 400px, rgba(43,62,76,0) 540px); }
  .heroe-video .bajada { font-size: 1.05rem; }
  .video-pausa { right: 1rem; bottom: auto; top: 1rem; }
}

/* -------------------------------------------- noticias, variante B (WP) */
/* Segunda propuesta para /noticias/ (Nicolás, 2026-09-13: "más limpia, que
   las notas sobresalgan"). Se elige en Ajustes → Guía de trámites
   (noticias_variante); la A queda intacta. Qué cambia: sin banda azul —
   título con sonrisa azul y buscador chico a la derecha sobre blanco—,
   filtros como pastillas discretas en una sola fila (en celular se
   desplazan de lado), la nota más reciente destacada a ancho completo (foto
   16:9 al 60 %, texto al lado), grilla con más aire, tarjetas con borde
   BEIGE 2 y sombra solo al pasar o enfocar, título 20/700, extracto en 3
   líneas, sin "Leer más" (el título es el enlace; queda una flecha). */
.archivo-b { padding: 2rem 0 3.5rem; }
.archivo-b-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: 1.5rem;
}
.archivo-b .migas { color: var(--gris); opacity: 1; margin-bottom: .6rem; }
.archivo-b .migas a { color: var(--azul); }
.archivo-b h1 { margin: 0; }
.archivo-b h1.con-sonrisa::after { margin-top: .05em; }
.archivo-b .bajada { color: var(--gris); font-size: 1.05rem; max-width: 60ch; margin: .75rem 0 0; }
.archivo-b .buscador-notas { margin: 0; flex: 0 1 380px; }
.archivo-b .campo-busqueda { padding: .4rem .6rem .4rem 1rem; }
.archivo-b .campo-busqueda input { font-size: .95rem; }
.filtros-b {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 0 .75rem; margin: 0 0 2rem; border-bottom: 1px solid var(--borde);
}
/* En táctil, una sola fila que se desplaza de lado (las 7 pastillas miden
   ~1010 px: a 1366 entran en una fila; a 1024 con mouse es mejor que envuelvan). */
@media (max-width: 768px) {
  .filtros-b { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
}
.filtros-b a {
  flex: none; text-decoration: none; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .875rem;
  min-height: 38px; display: inline-flex; align-items: center; gap: .35rem; color: var(--azul);
}
.filtros-b a:hover { border-color: var(--azul); }
.filtros-b a[aria-current="page"] { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.filtros-b small { font-size: .75rem; font-weight: 700; color: var(--gris); }
.filtros-b a[aria-current="page"] small { color: var(--beige-1); }
/* La nota más reciente, destacada: foto grande a la izquierda, texto a la derecha. */
.destacada {
  display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: center;
  margin: 0 0 2.5rem; position: relative; border-radius: var(--radio);
}
.destacada .noticia-foto { aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; }
.destacada .noticia-foto img, .destacada .noticia-foto svg { object-position: center; }
.destacada .noticia-cuerpo { padding: 0; }
.destacada .pastilla { margin-bottom: .9rem; }
.destacada .noticia-volanta { font-size: 1rem; }
.destacada .noticia-titulo { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; font-weight: 800; margin-bottom: .6rem; }
.destacada .noticia-resumen { font-size: 1.05rem; -webkit-line-clamp: 4; }
.destacada .noticia-pie { padding: 1rem 0 0; justify-content: flex-start; }
.destacada:has(.noticia-titulo a:focus-visible) { outline-offset: 6px; }
@media (max-width: 860px) { .destacada { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }
.grilla-b { gap: 2rem; }
.tarjeta-b { box-shadow: none; border: 1px solid var(--borde); }
.tarjeta-b:hover { transform: none; box-shadow: 0 14px 32px rgba(43,62,76,.14); }
.tarjeta-b .noticia-titulo { font-size: 1.25rem; font-weight: 700; }
.tarjeta-b .noticia-resumen { -webkit-line-clamp: 3; }
.tarjeta-b .noticia-pie { padding: .6rem 1.25rem 1.15rem; }
.noticia-pie .flecha { color: var(--azul); width: 1.1em; height: 1.1em; flex: none; }
.noticia:hover .noticia-pie .flecha { transform: translateX(3px); }
.noticia-pie .flecha svg { width: 100%; height: 100%; display: block; transition: transform .15s; }

/* Impresión de las páginas web (no del PDF): la hoja de requisitos de un
   trámite impresa desde el navegador tiene que quedar legible en blanco y
   negro. Los navegadores no imprimen fondos: la cabecera azul quedaría
   blanca con texto blanco, así que se reemplaza por una línea de texto
   (.solo-impresion) y el pie por sus datos en texto plano. */
.solo-impresion { display: none; }
@media print {
  .cabecera, .nav, .boton-menu, .btn, .descarga-movil, .lateral .tarjeta-descarga,
  .pie-redes, .pie-isologo, .pie-escudo, .alerta-roja, .acciones, .relacionados, .caja-otros .btn, .buscador, .formulario-contacto,
  .compartir, .nota-nav, .filtros, .filtros-b, .paginacion, .relacionadas, .buscador-notas, .leer-mas, .heroe-video .fondo, .heroe-video .velo, .video-pausa, .accesos, .somos-fotos { display: none !important; }
  .heroe-nota .volanta, .heroe-nota .meta, .heroe-nota .pastilla { color: #000; background: none; padding: 0; }
  .nota-foto { margin-top: 0; }
  .franja-aniversario { background: none; border: 0; color: #000; padding: 4pt 0; }
  .sello-aniversario { display: none; }
  .solo-impresion { display: block; font-size: 10pt; color: #000; border-bottom: 1pt solid #000; padding-bottom: 4pt; margin-bottom: 12pt; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .heroe, .heroe-interior, .seccion-azul, .seccion-beige { background: none !important; color: #000; padding: 0; }
  .heroe-video, .heroe-video h1, .heroe-video .bajada { min-height: 0; color: #000; }
  .heroe::before { display: none; }
  .heroe-interior h1, .heroe-interior .bajada, .seccion-azul h2, .seccion-azul .pasos p, .migas, .migas a { color: #000; }
  .panel-heroe { background: none; box-shadow: none; padding: 0; color: #000; }
  .con-sonrisa::after { display: none; }
  .dos-columnas { display: block; }
  .lateral { position: static; }
  .tarjeta, .bloque, .tarjeta-contacto, .aviso, .documentos > li, .rubro { box-shadow: none; border: 1pt solid #999; background: none; break-inside: avoid; }
  .tarjeta-cabecera { background: none; color: #000; border-bottom: 1pt solid #999; }
  .tarjeta-cabecera h3 { color: #000; }
  .tarjeta-cabecera .icono, .barra-seccion .circulo { display: none; }
  .barra-seccion { background: none; color: #000; border-bottom: 2pt solid #000; border-radius: 0; padding: 0; }
  .barra-seccion h2 { color: #000; }
  .pasos li, .articulo > section { break-inside: avoid; }
  .pasos li::before { background: none; border: 1pt solid #000; color: #000; }
  .aviso.atencion { border-left: 4pt solid #000; }
  .pie { background: none; color: #000; padding: 12pt 0 0; border-top: 1pt solid #000; border-bottom: 0; }
  .pie h2, .pie p, .pie a { color: #000; }
  .pie-columnas { display: block; }
  a[href^="mailto:"]::after { content: ""; }
  @page { margin: 15mm; }
}

/* ============================================================================
   MANUAL 2026 — componentes fundidos desde la capa de muestra (2026-09-16).
   Van al final para pisar, por orden, las reglas de arriba con el mismo
   selector. Referencias: páginas del MANUAL 2026.pdf.
   ========================================================================== */
h1, h2 { line-height: 1.05; letter-spacing: -.012em; }
h1 { font-weight: 800; }

/* Palabra destacada en el título (p. 31): AMARILLO sobre azul (p. 40, 7.9:1).
   Sobre el panel crema del héroe el amarillo no sirve como texto (1.4:1):
   va como resaltador detrás del texto azul (crema→amarillo, p. 35; 7.9:1). */
.resaltada { color: var(--amarillo); }
.panel-heroe .resaltada {
  color: var(--azul); background: var(--amarillo);
  border-radius: .35em; padding: 0 .18em; margin: 0 -.05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Sonrisa: el mismo trazo, pero como máscara para que tome el color del
   token (el SVG azul viejo lleva #2B3E4C pintado). */
.con-sonrisa::after {
  background: var(--verde); margin-top: .3em;
  -webkit-mask: url("img/sonrisa.svg") no-repeat left top / contain;
  mask: url("img/sonrisa.svg") no-repeat left top / contain;
}
.con-sonrisa.azul::after { background: var(--azul); -webkit-mask-image: url("img/sonrisa.svg"); mask-image: url("img/sonrisa.svg"); }
.heroe::before {
  background: var(--verde);
  -webkit-mask: url("img/sonrisa.svg") no-repeat center / contain;
  mask: url("img/sonrisa.svg") no-repeat center / contain;
  opacity: .22;
}

/* ---------------------------------------------------------------- cabecera */
.cabecera { box-shadow: 0 2px 12px rgba(0,55,76,.25); }

/* ------------------------------------------------------------------- héroe */
/* El panel del héroe pasa de verde a CREMA (azul→crema, p. 35; tarjetas
   crema de p. 53): sobre verde la palabra destacada no puede ser amarilla
   (p. 36). La tarjeta de marca sigue verde con texto azul. */
.heroe {
  background-image:
    radial-gradient(ellipse at 80% 10%, rgba(0,173,181,.30), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(255,255,255,.06), transparent 50%);
}
.panel-heroe { background: var(--beige-1); }
.buscador.claro .campo-busqueda { border-color: var(--borde); box-shadow: none; }
.buscador.claro .campo-busqueda:focus-within { border-color: var(--azul); box-shadow: none; }
.panel-heroe .btn-claro { border-color: var(--azul); }
.heroe-interior .bajada { color: var(--beige-1); }
.heroe-interior h1 .resaltada { color: var(--amarillo); }

/* ----------------------------------------------------------------- botones */
.btn-verde { background: var(--verde); color: var(--azul); }   /* azul→verde (p. 35); sin cambio */

/* -------------------------------------------------- etiquetas y píldoras */
/* Píldora TURQUESA con texto azul en mayúsculas chicas (p. 54 "POR CANALES
   OFICIALES"; p. 53 categoría). 4.6:1. */
.etiqueta, .pastilla, .bloque .opcional {
  background: var(--turquesa); color: var(--azul);
}
a.pastilla:hover, a.pastilla:focus-visible { background: var(--verde); }
.rubro .cuenta { background: var(--turquesa); }

/* Íconos: azules sobre círculo TURQUESA (Nicolás, 2026-09-16). Es una de
   las combinaciones recomendadas (azul→turquesa y crema→turquesa, p. 35;
   contenedores de ícono turquesa en p. 42) y da 4.6:1 para el trazo. Los
   números de paso siguen en verde. */
.tarjeta-cabecera .icono, .barra-seccion .circulo,
.accesos .circulo, .firma .circulo {
  background: var(--turquesa); color: var(--azul);
}

/* -------------------------------------------------------------- listas */
/* Chevron "›" CORAL como marca de lista (p. 53): reemplaza el punto verde. */
.documentos h3::before, .rubro h3::before, .ficha h3::before {
  content: "›"; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--coral); font-size: 1.5em; line-height: .8; font-weight: 800;
}
.documentos ul, .rubro ul, .lista-tramites,
.nota-cuerpo ul, .tarjeta-descarga ul, .aviso ul {
  list-style: none; padding-left: 1.1em;
}
.documentos ul li, .rubro ul li, .lista-tramites li,
.nota-cuerpo ul li, .tarjeta-descarga ul li, .aviso ul li {
  position: relative;
}
.documentos ul li::before, .rubro ul li::before, .lista-tramites li::before,
.nota-cuerpo ul li::before, .tarjeta-descarga ul li::before, .aviso ul li::before {
  content: "›"; position: absolute; left: -1.1em; top: -.08em;
  color: var(--coral); font-weight: 800; font-size: 1.25em; line-height: 1.2;
}
.tarjeta-descarga ul li::before { color: var(--turquesa); }
.tarjeta-contacto-azul .pautas li::before { background: var(--turquesa); }

/* ----------------------------------------------------------------- avisos */
/* Información: crema con borde TURQUESA. Advertencia: crema con borde CORAL
   y el título en píldora coral con texto blanco grande (≥ 19 px bold: texto
   grande, 3.2:1 admitido). El cuerpo sigue en azul (11.4:1). */
.aviso { background: var(--beige-1); border-left-color: var(--turquesa); }
.aviso.atencion { border-left-color: var(--coral); background: var(--beige-1); }
.aviso.atencion::before {
  content: "Atención"; display: inline-block; background: var(--coral); color: var(--blanco);
  font-weight: 800; font-size: 1.1875rem; line-height: 1.2; padding: .3em .8em; border-radius: 999px; margin-bottom: .6em;
}
.alerta-roja { background: var(--beige-1); border-color: var(--coral); color: var(--azul); }
.alerta-roja strong { color: var(--azul); }
.campo .ast { color: var(--coral); }
.campo .error, .acciones .estado.error { color: var(--azul); }
.campo .error:not(:empty)::before { content: "› "; color: var(--coral); font-weight: 800; }
.campo.con-error input, .campo.con-error textarea { border-color: var(--coral); background: var(--beige-1); }
.campo input:focus, .campo textarea:focus { box-shadow: 0 0 0 3px rgba(0,173,181,.45); }
.cierre { background: var(--beige-1); border-left-color: var(--turquesa); }
.resultados li a:hover, .resultados li.activo a { background: var(--beige-1); }
.resultados .nombre mark { text-decoration-color: var(--turquesa); }
@keyframes resaltar2026 { 0%, 60% { background: var(--turquesa); } 100% { background: transparent; } }
.rubro li.resaltado, .rubro.resaltado { animation-name: resaltar2026; }

/* --------------------------------------------------------------- tarjetas */
/* Sombra desplazada de color (p. 54 "Llevá…": tarjeta azul con sombra
   turquesa). Solo en tarjetas azules; el par coral→amarillo de "Evitá…" no
   se usa (el amarillo queda para la palabra destacada). */
.tarjeta-descarga { box-shadow: 10px 10px 0 var(--turquesa); border-radius: 24px 24px 24px 64px; }
.tarjeta-descarga p, .tarjeta-descarga ul { color: var(--beige-1); }
.tarjeta-contacto { background: var(--blanco); border: 2px solid var(--borde); }
.tarjeta { box-shadow: var(--sombra); }
.tarjeta:hover { box-shadow: 0 16px 36px rgba(0,55,76,.16); }
.tarjeta-b { border-color: var(--borde); }
.tarjeta-contacto-azul { border-radius: 24px 24px 110px 24px; box-shadow: 12px 12px 0 var(--turquesa); }
.tarjeta-contacto-azul .rotulo { color: var(--beige-1); }
.tarjeta-contacto-azul .pautas strong { color: var(--beige-1); }
.formulario-contacto input, .formulario-contacto textarea { background: var(--beige-1); border-color: var(--azul-80); }
.formulario-contacto input:focus, .formulario-contacto textarea:focus { box-shadow: 0 0 0 3px rgba(0,173,181,.45); }
.accesos a { background: var(--blanco); border-color: var(--borde); }
.accesos a:hover, .accesos a:focus-visible { border-color: var(--azul); background: var(--beige-1); }

/* -------------------------------------------------------------- portada WP */
/* El velo del héroe oscurece el video SOLO donde va el texto: el crema sobre
   el video pelado no llega al contraste mínimo. Ahora se degrada en ~720 px
   y con pasos intermedios; antes caía de 0.80 a 0 en 190 px de un tirón y el
   ojo leía eso como una raya vertical — "la portada tiene dos tonos en el
   mismo video" (Nicolás, 2026-09-24). Sobre el texto no cambia nada: mismo
   0.80 y mismo contraste; cambia cuánto tarda en desaparecer. */
.heroe-video .velo {
  background: linear-gradient(90deg, rgba(0,55,76,.80) 0, rgba(0,55,76,.80) calc(50% + 24px), rgba(0,55,76,.70) calc(50% + 120px), rgba(0,55,76,.52) calc(50% + 250px), rgba(0,55,76,.30) calc(50% + 400px), rgba(0,55,76,.12) calc(50% + 560px), rgba(0,55,76,0) calc(50% + 720px));
}
@media (max-width: 1180px) {
  .heroe-video .velo { background: linear-gradient(90deg, rgba(0,55,76,.80) 0, rgba(0,55,76,.80) calc(50% + 84px), rgba(0,55,76,.70) calc(50% + 180px), rgba(0,55,76,.52) calc(50% + 300px), rgba(0,55,76,.30) calc(50% + 440px), rgba(0,55,76,.12) calc(50% + 580px), rgba(0,55,76,0) calc(50% + 720px)); }
}
@media (max-width: 768px) {
  .heroe-video .velo { background: linear-gradient(0deg, rgba(0,55,76,.80) 0, rgba(0,55,76,.80) 400px, rgba(0,55,76,.62) 470px, rgba(0,55,76,.38) 550px, rgba(0,55,76,.16) 630px, rgba(0,55,76,0) 720px); }
}
/* "Quiénes somos": fotos recortadas en formas con una esquina grande
   (pp. 44-45: cápsulas, círculos y bloques con una esquina redondeada). */
.somos-fotos li:nth-child(1) img { border-radius: 90px 18px 18px 18px; }
.somos-fotos li:nth-child(2) img { border-radius: 18px 18px 90px 18px; }
.somos-fotos li:nth-child(3) img { border-radius: 18px 90px 18px 18px; }

/* ---------------------------------------------------------------- noticias */
.destacada .noticia-foto { border-radius: 24px 24px 24px 96px; }
.nota-foto img { border-radius: 24px 24px 96px 24px; }
.noticia-cuerpo .noticia-volanta { color: var(--azul-80); }
.nota-cuerpo blockquote, .nota-cuerpo .wp-block-quote { background: var(--beige-1); border-left-color: var(--turquesa); }
.nota-cuerpo th { background: var(--beige-1); }
.filtros a:hover, .filtros-b a:hover { border-color: var(--turquesa); background: var(--beige-1); }
.paginacion a.page-numbers:hover { background: var(--beige-1); border-color: var(--turquesa); }
.heroe-nota .pastilla { background: var(--turquesa); color: var(--azul); }
.noticia-pie .flecha { color: var(--coral); }

/* ------------------------------------------------------------- licitaciones */
.pastilla-estado {
  display: inline-flex; align-items: center; padding: .3em .9em; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.4;
}
.pastilla-estado.abierta { background: var(--amarillo); color: var(--azul); }   /* 1.5.98 (Nicolás, 2026-10-20): amarillo + azul (combinación del manual); antes turquesa, igual que la categoría. Única excepción a «amarillo solo en la palabra destacada», pedida por él */
.pastilla-estado.cerrada { background: var(--beige-1); color: var(--azul); border: 1px solid var(--borde); }
.pastilla-estado.adjudicada { background: var(--verde); color: var(--azul); }
.licitacion-heroe-estado { margin: .75rem 0; }
.grilla-licitaciones { margin-top: .25rem; }
.tarjeta.licitacion { padding: 1.25rem 1.25rem 1rem; }
.licitacion-cabecera { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.licitacion-cabecera .pastilla { position: static; }   /* sin fondo propio: hereda turquesa/azul, igual que la categoría de Noticias (p. 53-54) */
.licitacion-titulo { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; }
.licitacion-titulo a { color: var(--azul); text-decoration: none; }
.licitacion-titulo a:hover, .licitacion-titulo a:focus-visible { text-decoration: underline; }
.licitacion-objeto { color: var(--gris); font-size: .95rem; margin-bottom: .75rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.licitacion-datos { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
.licitacion-datos li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--texto); }
.licitacion-datos svg { width: 1.1em; height: 1.1em; flex: none; color: var(--turquesa); }
.licitacion-pie { border-top: 1px solid var(--borde); padding-top: .75rem; }
.licitacion-pie a { color: var(--azul); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.licitacion-pie svg { width: 1.1em; height: 1.1em; color: var(--coral); }
.buscador-licitaciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 100%; }
.archivo-b .buscador-licitaciones { flex: 1 1 520px; }
.buscador-licitaciones .campo-busqueda { flex: 1 1 260px; }
.buscador-licitaciones-selects { display: flex; gap: .5rem; flex-wrap: wrap; }
.buscador-licitaciones select {
  border: 2px solid var(--borde); border-radius: 999px; background: var(--blanco);
  padding: .5rem 2rem .5rem 1rem; font: inherit; font-size: .92rem; color: var(--texto);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300374C'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5' stroke='%2300374C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1em;
}
.buscador-licitaciones select:focus-visible { outline: none; border-color: var(--azul); }

/* ------------------------------------------------------------------- pie */
/* Pie: azul con la regla verde de cierre, como hasta ahora (azul→verde).
   Redes: verde, y AMARILLO al pasar el mouse (Nicolás, 2026-09-16; ícono
   sobre azul, no texto). */
.pie .redes a:hover, .pie .redes a:focus-visible { color: var(--amarillo); }

/* Sello del aniversario: el monograma queda como en el diseño vigente (84 px,
   sin efecto al pasar el mouse): Nicolás, 2026-09-16. */
.franja-aniversario { border-bottom-color: var(--borde); }
.sello-aniversario { border-top-color: var(--borde); }


/* Ficha de la publicación: rótulo arriba, valor debajo, como la ficha técnica
   de un trámite. La referencia bibliográfica puede traer URL largas. */
.pagina-tramite .ficha dt { font-weight: 700; color: var(--azul); margin-top: .8rem; }
.pagina-tramite .ficha dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
/* Tarjeta de cortesía a CO.DI.NEU. Es un enlace AFUERA del organismo, así que
   se distingue de las tarjetas de datos propios: fondo crema, ícono en círculo
   turquesa como el resto de los accesos, y aire suficiente para que no se lea
   apretada (Nicolás, 2026-09-22: "quedó medio apretado"). */
.codineu {
  background: var(--beige-1);
  border: 1px solid var(--borde);
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: 24px 24px 24px 72px;
}
.codineu-cabecera { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.codineu-cabecera .circulo {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--turquesa); color: var(--azul); display: grid; place-items: center;
}
.codineu-cabecera .circulo svg { width: 26px; height: 26px; }
.codineu-rotulo {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris);
}
.codineu-cabecera h2 { margin: .1rem 0 0; font-size: 1.35rem; line-height: 1.1; }
.codineu p { margin: 0 0 1.1rem; line-height: 1.55; }
.codineu .btn { width: 100%; justify-content: center; }
.codineu .meta {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--borde);
  color: var(--gris); font-size: .85rem; line-height: 1.5;
}
.codineu .meta span { opacity: .85; }

/* Bloque de licitaciones abiertas en la portada: misma cabecera que
   "Últimas noticias" (título con sonrisa a la izquierda, botón a la derecha). */
.seccion-licitaciones .seccion-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem;
}
.seccion-licitaciones .seccion-cabecera h2 { margin: 0; }

/* Circulares de una licitación: cada una con la etiqueta de qué hace.
   Las que cambian fecha o lugar van en coral porque son las que hacen perder
   una oferta si no se leen; enmienda en turquesa; el resto, informativas. */
.circulares { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.circulares { gap: .65rem; }
.circular {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
  padding: 1rem 1.15rem;
  transition: border-color .15s, box-shadow .15s;
}
.circular:hover { border-color: var(--turquesa); box-shadow: 0 6px 18px rgba(0, 55, 76, .08); }
.circular > a { display: inline-flex; align-items: center; gap: .5em; color: var(--azul); font-weight: 600; text-decoration: none; flex: 1 1 260px; overflow-wrap: anywhere; }
.circular > a:hover, .circular > a:focus-visible { text-decoration: underline; }
.circular > a svg { width: 1.15em; height: 1.15em; flex: none; color: var(--turquesa); }
.circular-tipo {
  display: inline-flex; align-items: center; padding: .32em .85em; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; margin-left: auto;
  background: var(--beige-1); color: var(--azul); border: 1px solid var(--borde);
}
.circular-tipo.tipo-prorroga, .circular-tipo.tipo-lugar { background: var(--beige-1); border-color: var(--coral); color: var(--azul); }
.circular-tipo.tipo-enmienda { background: var(--turquesa); border-color: var(--turquesa); color: var(--azul); }
.circular-meta { color: var(--gris); font-size: .82rem; white-space: nowrap; }
/* Número de referencia de una denuncia: es el dato que se lleva el vecino, así
   que se lee aparte del resto del mensaje de confirmación. */
.formulario-enviado .referencia {
  background: var(--beige-1); border: 1px solid var(--borde); border-radius: 12px;
  padding: .7rem .9rem; margin: .75rem 0 0; color: var(--azul);
}

/* Foto de una licitación (obra, render o plano). Mismo encuadre 3:2 y misma
   esquina grande que la foto de una nota, para que las dos secciones se lean
   igual. Es opcional: sin foto la tarjeta queda como estaba. */
.licitacion-foto { margin: -1.25rem -1.25rem 1rem; overflow: hidden; }
.licitacion-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.licitacion-imagen { margin: 0 0 1.5rem; }
.licitacion-imagen img { display: block; width: 100%; border-radius: 24px 24px 96px 24px; }
.licitacion-imagen figcaption { color: var(--gris); font-size: .9rem; margin-top: .5rem; }

/* ------------------------------------------------------------- autoridades */
/* La primera (el Subsecretario) va destacada con la foto grande al costado;
   el resto en grilla. Fotos con la esquina grande del manual (pp. 44-45). */
.seccion-autoridades h2 { margin-bottom: 1.75rem; }
.autoridad-principal {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 1.75rem; align-items: center;
  background: var(--beige-1); border: 1px solid var(--borde);
  border-radius: 24px 24px 24px 96px; padding: 1.75rem;
}
.autoridad-principal .autoridad-foto img { border-radius: 90px 18px 18px 18px; }
.autoridad-principal h3 { margin: .2rem 0 .3rem; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; }
.autoridad-foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.autoridad-cargo {
  margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris);
}
.autoridad-area { margin: .25rem 0 .5rem; color: var(--gris); }
.autoridades-grilla {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.autoridad { background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px 18px 18px 64px; padding: 1.1rem; }
.autoridad .autoridad-foto { margin-bottom: .9rem; }
.autoridad .autoridad-foto img { border-radius: 64px 14px 14px 14px; }
.autoridad h3 { margin: .2rem 0 .2rem; font-size: 1.15rem; line-height: 1.25; }
.autoridad-foto.sin-foto {
  aspect-ratio: 3 / 4; display: grid; place-items: center;
  background: var(--beige-1); border-radius: 64px 14px 14px 14px; color: var(--turquesa);
}
.autoridad-foto.sin-foto svg { width: 48px; height: 48px; }
.seccion-autoridades .dato { margin: .4rem 0 0; font-size: .92rem; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .autoridad-principal { grid-template-columns: 1fr; text-align: left; padding: 1.25rem; }
}
/* Video institucional: sin autoplay, con portada. */
.video-somos {
  width: 100%; display: block; border-radius: 24px 24px 96px 24px;
  background: var(--azul); margin-top: 1.5rem;
}

/* ------------------------------------------------------- quiénes somos 2026 */
/* Apertura: el texto manda y el clip acompaña. En celular el video va primero
   porque entra completo y el texto queda largo debajo. */
.somos-apertura-grilla { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1.15fr .85fr; }
.somos-apertura-grilla.sin-video { grid-template-columns: 1fr; max-width: 68ch; }
.somos-apertura-texto h2 { margin-top: 0; }
.somos-marco { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.somos-marco .pastilla { position: static; }
/* El clip es decorativo: sin controles, en bucle y silenciado. Una esquina
   grande, como las fotos del manual. */
.somos-video { margin: 0; }
.somos-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 24px 24px 96px 24px; background: var(--azul);
}
@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento no debería recibir un bucle infinito. */
  .somos-video video { animation-play-state: paused; }
}

/* Misión y visión: dos tarjetas comparables, no dos párrafos seguidos. */
.somos-mv { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.somos-mv-tarjeta { padding: 1.75rem 1.5rem; }
.somos-mv-tarjeta .circulo {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--turquesa); color: var(--azul); margin-bottom: 1rem;
}
.somos-mv-tarjeta .circulo svg { width: 28px; height: 28px; }
.somos-mv-tarjeta h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.somos-mv-tarjeta p { margin: 0; color: var(--gris); line-height: 1.6; }

/* Objetivos: grilla con ícono. Eran diez viñetas seguidas y no se leían. */
.somos-objetivos {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.somos-objetivo { display: flex; gap: .9rem; align-items: flex-start; }
.somos-objetivo .circulo {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--turquesa); color: var(--azul);
}
.somos-objetivo .circulo svg { width: 24px; height: 24px; }
.somos-objetivo p { margin: 0; line-height: 1.55; }

/* Organismos de cuenca: salían enterrados dentro del último objetivo. */
.somos-organismos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.somos-organismos li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  background: var(--beige-1); border: 1px solid var(--borde); border-radius: 14px;
  padding: .9rem 1.1rem;
}
.somos-sigla {
  flex: none; font-weight: 800; color: var(--azul); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 999px; padding: .15em .75em; font-size: .85rem;
}
.somos-organismo-nombre { flex: 1 1 240px; color: var(--azul); }

@media (max-width: 860px) {
  .somos-apertura-grilla { grid-template-columns: 1fr; }
  .somos-apertura-grilla .somos-video { order: -1; }
}

/* Epígrafe de las fotos de "Quiénes somos": dice QUÉ muestra la foto. Sin él
   eran tres imágenes sin contexto (Nicolás, 2026-09-23). */
.somos-fotos-lateral figure { margin: 0; }
.somos-fotos-lateral figcaption {
  color: var(--gris); font-size: .88rem; line-height: 1.45; margin-top: .5rem;
}

/* Denuncias: fila del botón de ubicación + coordenadas (2026-09-25). El botón
   va primero porque es el camino bueno; el campo de texto es el respaldo para
   quien no está en el lugar. En celular se apilan, que es donde más se usa. */
.formulario-contacto .campo-grupo { border: 0; padding: 0; margin: 0 0 4px; }
.formulario-contacto .campo-grupo legend {
  padding: 0; margin: 0 0 8px; font-weight: 700; color: var(--crema);
}
.formulario-contacto .fila-geo { display: flex; gap: 10px; align-items: stretch; }
.formulario-contacto .fila-geo input { flex: 1 1 auto; min-width: 0; margin: 0; }
.formulario-contacto .fila-geo .btn { flex: 0 0 auto; white-space: nowrap; margin: 0; }
@media (max-width: 560px) {
  .formulario-contacto .fila-geo { flex-direction: column; }
}

/* La tarjeta azul de Denuncias NO se estira para igualar al formulario
   (2026-09-25). El contenedor .contacto es una grilla con align-items:stretch,
   pensada para la sección de contacto de la portada, donde las dos columnas
   miden parecido. Acá el formulario es mucho más largo -y creció más todavía
   al sumarle la ubicación- así que la tarjeta se estiraba y dejaba 411 px
   vacíos abajo, que era lo que se veía como un bache. Rellenarlo con texto
   sería tapar el síntoma: la tarjeta tiene que medir lo que mide su contenido.
   Va con clase propia para no tocar la portada. */
.contacto-denuncias { align-items: start; }

/* Lista de fotos elegidas en Denuncias (2026-09-25). Va dentro de la tarjeta
   azul del formulario, así que el texto es crema y el botón de quitar tiene
   que leerse sobre azul: borde crema y fondo transparente. */
.formulario-contacto .lista-fotos { list-style: none; margin: 8px 0 0; padding: 0; }
.formulario-contacto .lista-fotos li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; margin: 0 0 6px; border-radius: 8px;
  background: rgba(252, 242, 220, .12); color: var(--crema); font-size: .95rem;
}
.formulario-contacto .lista-fotos .quitar {
  flex: 0 0 auto; border: 1px solid var(--crema); background: transparent;
  color: var(--crema); border-radius: 999px; padding: 2px 12px;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.formulario-contacto .lista-fotos .quitar:hover { background: var(--crema); color: var(--azul); }

/* Aviso de error de tipeo en el correo de Denuncias (2026-09-25). Va dentro de
   la tarjeta azul, así que se lee en crema; el nombre sugerido es un botón para
   aceptarlo de un toque, no un texto que haya que volver a escribir. */
.formulario-contacto .aviso-tipeo {
  margin: -4px 0 10px; font-size: .95rem; color: var(--amarillo);
}
.formulario-contacto .aviso-tipeo .corregir {
  border: 0; background: var(--amarillo); color: var(--azul);
  border-radius: 999px; padding: 1px 10px; margin: 0 2px;
  font: inherit; font-weight: 700; cursor: pointer;
}

/* Denuncias: mapa para marcar el lugar (2026-10-03). Alto suficiente para tocar con el dedo. */
.mapa-denuncia { height: 340px; margin: .25rem 0 0; border: 2px solid var(--azul-80); border-radius: 14px; overflow: hidden; z-index: 0; }
.mapa-denuncia[hidden] { display: none; }
.pin-denuncia { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--coral); border: 3px solid var(--blanco); transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 55, 76, .45); }
#d-mapa-abrir { width: 100%; }
#d-mapa-abrir[hidden] { display: none; }

/* ── Editor del cuerpo de la nota (presentación digital, completar.js) ──
   Se ve como la hoja: blanco, cuerpo justificado con sangría e interlineado
   1,5, igual que la nota que arma documento.js. Solo negrita y lista. */
.editor-nota { border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco); overflow: hidden; }
.editor-barra { display: flex; gap: .4rem; padding: .45rem; background: var(--beige-1); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.editor-barra button { font: inherit; font-size: .9rem; color: var(--azul); background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; padding: .35rem .75rem; cursor: pointer; min-height: 40px; }
.editor-barra button:hover, .editor-barra button:focus-visible { border-color: var(--azul); }
.editor-hoja { min-height: 16rem; padding: 1.25rem 1.5rem; line-height: 1.5; color: var(--azul); text-align: justify; outline: none; overflow-wrap: anywhere; }
.editor-hoja p { margin: 0 0 .5em; text-indent: 2.2em; }
.editor-hoja ul { margin: 0 0 .5em 1.2em; padding-left: 1.2em; }
.editor-hoja:focus-visible { box-shadow: inset 0 0 0 2px var(--turquesa); }
.campo.con-error .editor-nota { border-color: var(--coral); }
.editor-pie { margin: 0; padding: .5rem 1rem .7rem; font-size: .85rem; color: var(--gris); background: var(--blanco); }
@media (max-width: 600px) { .editor-hoja { padding: 1rem; text-align: left; } }

/* ── Presentación en línea (panel que arma completar.js tras generar) ── */
.presentar { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
.presentar .modo-firma .opcion span { line-height: 1.4; }
.presentar .pd-digital, .presentar .pd-declaracion { margin: .5rem 0 1.25rem; padding: 1rem 1.25rem; background: var(--beige-1); border-radius: 12px; }
.presentar .pd-pasos { margin: 0 0 1rem; padding-left: 1.3rem; }
.presentar .pd-pasos li { margin: .3rem 0; }
.presentar .pd-dj { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; line-height: 1.45; }
.presentar .pd-dj input { margin-top: .25rem; width: 1.2rem; height: 1.2rem; flex: none; }
.presentar input[type=file] { display: block; width: 100%; padding: .6rem; border: 1px dashed var(--azul-80); border-radius: 10px; background: var(--blanco); font: inherit; }
.presentar #pd_codigo { max-width: 10rem; font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.presentar .enlace { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; font: inherit; cursor: pointer; }
.presentar .pd-enviar { margin-top: .5rem; }
.pd-listo .pd-numero { font-size: 2rem; margin: .25rem 0 1rem; }
.presentar .modo-firma .opcion { display: flex; align-items: flex-start; gap: .6rem; }
.presentar .modo-firma .opcion input { margin-top: .3rem; flex: none; }
.presentar .modo-firma .opcion span { display: block; flex: 1; }

/* Sugerencia de localidad («¿Quiso decir Neuquén?»), completar.js */
.campo .sugerencia { margin: .3rem 0 0; font-size: .9rem; color: var(--gris); }
.campo .sugerencia:empty { display: none; }
.campo .sugerencia .enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* Línea del certificado de firma digital, armándose a la vista (completar.js) */
.cadena-vista { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px dashed var(--azul-80); border-radius: 12px; background: var(--beige-1); }
.cadena-vista.ok { border-style: solid; border-color: var(--verde); }
.cadena-vista .cadena-titulo { margin: 0 0 .5rem; font-weight: 700; color: var(--azul); }
.cadena-vista .cadena-linea { display: block; white-space: pre-line; padding: .6rem .75rem; background: var(--blanco); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; color: var(--azul); overflow-wrap: anywhere; min-height: 1.4em; }
.cadena-vista .cadena-estado { margin: .5rem 0 .75rem; font-size: .9rem; color: var(--gris); }
.cadena-vista.ok .cadena-estado { color: var(--azul); font-weight: 600; }

/* Encabezado y saludo fijos de la nota, a la vista arriba y abajo del editor
   (completar.js): se ven como en la hoja pero en gris y con un sello, para
   que nadie los vuelva a escribir en el cuerpo. */
.editor-fijo { position: relative; padding: 1rem 1.5rem .5rem; color: var(--gris); opacity: .75; user-select: none; background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,55,76,.035) 12px 24px); }
.editor-fijo p { margin: 0 0 .15rem; line-height: 1.45; }
.editor-fijo .ef-fecha { text-align: right; margin-bottom: .8rem; }
.editor-fijo .ef-fuerte { font-weight: 700; }
.editor-fijo .ef-sd { display: flex; gap: 3.5rem; margin-bottom: .6rem; }
.editor-fijo .ef-ref { text-align: right; font-weight: 700; }
.editor-fijo-pie { padding: .25rem 1.5rem .9rem; border-top: 1px dashed var(--borde); }
.editor-fijo-pie p { text-indent: 2.2em; }
.editor-sello { position: absolute; top: .4rem; left: 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); background: var(--beige-1); border-radius: 999px; padding: .1rem .55rem; }
.editor-fijo-pie .editor-sello { position: static; display: inline-block; margin-top: .3rem; }
.editor-hoja { border-top: 1px dashed var(--borde); }
.editor-hoja:empty::before { content: attr(data-vacio); color: var(--gris); opacity: .7; }
/* Guía en gris sobre la hoja vacía (esquema guia_nota): no se puede tocar, se escribe encima. */
.editor-nota { position: relative; }
.editor-hoja + .editor-guia { margin-top: -16rem; min-height: 16rem; padding: 1.25rem 1.5rem; color: var(--gris); opacity: .8; pointer-events: none; line-height: 1.5; position: relative; }
.editor-guia p { margin: 0 0 .4em; }
.editor-guia[hidden] { display: none; }
@media (max-width: 600px) { .editor-hoja + .editor-guia { padding: 1rem; } }
.editor-aviso { margin: 0; padding: 0 1rem; font-size: .9rem; color: var(--azul); font-weight: 600; background: var(--blanco); }
.editor-aviso:not(:empty) { padding: .6rem 1rem; border-left: 4px solid var(--coral); }
@media (max-width: 600px) { .editor-fijo { padding: .9rem 1rem .4rem; } .editor-fijo .ef-sd { gap: 2rem; } }
.cadena-vista .cadena-ayuda { margin: -.25rem 0 .6rem; font-size: .9rem; color: var(--gris); }

/* ═══ DENUNCIAS EN PASOS (2026-10-07) ═══════════════════════════════════
   Pantalla para el celular, de a un paso por vez. Primero el celular: a
   partir de 720 px solo se centra en una columna. Botones de 52 px de alto
   (se usa con una mano, en el campo). Colores del manual 2026: azul y crema
   de base, turquesa para lo elegido, coral solo para errores y avisos. */
.dp-contenedor { max-width: 680px; }
.dp { position: relative; }
.dp-barra { display: flex; gap: 6px; margin: 0 0 .5rem; }
.dp-barra[hidden], .dp-de[hidden], #dp-form[hidden], .dp-listo[hidden] { display: none; }
.dp-barra span { flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 55, 76, .12); transition: background .3s; }
.dp-barra span.on { background: var(--turquesa); }
.dp-de { margin: 0 0 1rem; font-size: .9rem; color: var(--gris); font-weight: 600; }
.dp-paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.dp-paso[hidden] { display: none; }
.dp-titulo { font-size: 1.6rem; line-height: 1.2; font-weight: 800; color: var(--azul); margin: 0 0 1rem; padding: 0; outline: none; }
.dp-opc { font-weight: 500; font-size: .85em; color: var(--gris); }
.dp-etiqueta { display: block; font-weight: 700; margin: 1.1rem 0 .35rem; }
.dp input[type=text], .dp input[type=email], .dp input[type=tel], .dp input[type=search], .dp input[type=date], .dp textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--azul); background: var(--blanco);
  border: 2px solid var(--borde); border-radius: 14px; padding: .8rem .9rem; min-height: 52px; }
.dp input[hidden] { display: none; }
.dp textarea { min-height: 120px; resize: vertical; }
.dp input:focus, .dp textarea:focus { border-color: var(--turquesa); outline: 3px solid rgba(0, 173, 181, .25); outline-offset: 0; }
.dp-ayuda { font-size: .92rem; color: var(--gris); margin: .5rem 0 0; }
.dp-ok { color: var(--azul); font-weight: 600; }
.dp-error { margin: 1rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: var(--beige-1); border-left: 5px solid var(--coral); font-weight: 700; }
.dp-error[hidden] { display: none; }
#dp-lejos { font-weight: 500; }
.dp-subtitulo { font-weight: 800; font-size: 1.15rem; margin: 1.6rem 0 .5rem; }

/* Categorías: tarjetas de toque grande, dos por fila */
.dp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.dp-cat { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .9rem .8rem; border: 2px solid var(--borde);
  border-radius: 18px 18px 18px 4px; background: var(--blanco); cursor: pointer; transition: border-color .2s, background .2s, transform .1s; }
.dp-cat:active { transform: scale(.98); }
.dp-cat input, .dp-op input, .dp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.dp-cat-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--beige-1); display: grid; place-items: center; }
.dp-cat-ic svg, .dp-agregar svg { width: 26px; height: 26px; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dp-cat-t { font-weight: 800; line-height: 1.2; }
.dp-cat-b { font-size: .85rem; color: var(--gris); line-height: 1.3; }
.dp-cat:has(input:checked), .dp-op:has(input:checked) { border-color: var(--turquesa); background: #E6F7F8; }
.dp-cat:has(input:checked) .dp-cat-ic { background: var(--turquesa); }
.dp-cat:has(input:focus-visible), .dp-op:has(input:focus-visible), .dp-pill:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Opciones grandes (en el lugar / lo vi antes; niveles de identidad) */
.dp-dos, .dp-niveles { display: grid; gap: .65rem; }
.dp-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-op { position: relative; display: block; padding: .9rem 1rem; border: 2px solid var(--borde); border-radius: 16px; background: var(--blanco); cursor: pointer; }
.dp-op strong { display: block; font-size: 1.05rem; }
.dp-op small { display: block; color: var(--gris); font-size: .88rem; margin-top: .15rem; line-height: 1.35; }
.dp-niveles .dp-op { padding-left: 3.1rem; }
.dp-niveles .dp-op::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--azul-80); background: var(--blanco); box-sizing: border-box; }
.dp-niveles .dp-op:has(input:checked)::before { border: 7px solid var(--turquesa); }
.dp-bloque { margin: 1rem 0 0; }
.dp-bloque[hidden], #dp-con-dni[hidden], #dp-codigo-caja[hidden] { display: none; }
.dp-pill { position: relative; display: inline-block; }
.dp-pill span { display: inline-block; padding: .65rem 1.1rem; border-radius: 999px; border: 2px solid var(--borde); font-weight: 700; background: var(--blanco); cursor: pointer; }
.dp-pill input:checked + span { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.dp-tres { display: flex; flex-wrap: wrap; gap: .5rem; }
#dp-cuando-fecha { margin-top: .6rem; }
.dp-sugerencia { background: var(--beige-1); border-radius: 12px; padding: .7rem .9rem; margin: 0 0 .7rem; }
.dp-sugerencia[hidden] { display: none; }

/* Botones */
.dp-boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 52px; padding: .8rem 1.4rem; border: 0;
  border-radius: 999px; background: var(--azul); color: var(--blanco); font: inherit; font-weight: 800; font-size: 1.02rem; cursor: pointer; text-decoration: none; }
.dp-boton:hover { background: var(--azul-90); color: var(--blanco); }
.dp-boton:disabled { opacity: .55; cursor: wait; }
.dp-boton-claro { background: var(--beige-1); color: var(--azul); border: 2px solid var(--turquesa); width: 100%; }
.dp-boton-claro:hover { background: #E6F7F8; color: var(--azul); }
.dp-boton-borde { background: transparent; color: var(--azul); border: 2px solid var(--borde); }
.dp-boton-borde:hover { background: var(--beige-1); color: var(--azul); }
.dp-boton[hidden], .dp-enlace[hidden] { display: none; }
.dp-enlace { background: none; border: 0; padding: .2rem 0; color: var(--azul); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dp-acciones { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .6rem; margin: 1.5rem -16px 0; padding: .8rem 16px calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--blanco) 75%, rgba(255, 255, 255, 0)); }
.dp-acciones #dp-siguiente { flex: 1; }

/* Fotos */
.dp-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.dp-agregar { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; border: 2px dashed var(--turquesa);
  border-radius: 16px; background: var(--beige-1); font-weight: 700; font-size: .9rem; cursor: pointer; text-align: center; padding: .4rem; }
.dp-agregar[hidden] { display: none; }
.dp-miniatura { position: relative; aspect-ratio: 1; border-radius: 16px; background: rgba(0, 55, 76, .1) center / cover no-repeat; }
.dp-miniatura.cargando::after { content: "Achicando…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--azul); }
.dp-quitar { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 55, 76, .85); color: var(--blanco); font-size: 1.2rem; line-height: 1; cursor: pointer; }

/* Lugar */
.dp-mapa { height: 320px; margin: 1rem 0 0; border-radius: 18px; overflow: hidden; border: 2px solid var(--borde); z-index: 0; }
.dp-mapa[hidden] { display: none; }
.dp-buscador { position: relative; }
.dp-sugerencias { list-style: none; margin: .3rem 0 0; padding: .3rem; border: 2px solid var(--borde); border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra); }
.dp-sugerencias[hidden] { display: none; }
.dp-sugerencias li { padding: .6rem .7rem; border-radius: 10px; cursor: pointer; }
.dp-sugerencias li small { display: block; color: var(--gris); }
.dp-sugerencias li:hover, .dp-sugerencias li[aria-selected=true] { background: #E6F7F8; }
.dp-sugerencias li.vacio { cursor: default; color: var(--gris); }
.dp-alcance { margin-top: -.2rem; }
.dp-empresa { margin: 1.1rem 0 0; font-size: .92rem; }
.dp-otros { margin: 1.1rem 0 .4rem; padding: .7rem .9rem; border: 2px solid var(--borde); border-radius: 12px; background: var(--blanco); }
.dp-otros summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.dp-otros ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.dp-otros li { margin: .35rem 0; }
.dp-op input:disabled + span { opacity: .45; }
.dp-dj { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 .4rem; padding: .8rem .9rem; border: 2px solid var(--azul); border-radius: 12px; background: var(--blanco); font-weight: 600; cursor: pointer; }
.dp-marco { margin: 1.6rem 0 0; font-size: .85rem; color: var(--gris); max-width: 62ch; }
.dp-datos-uso { margin-top: .8rem; }
.dp-dj input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--azul); }
.dp-sugerencias li.libre { border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px; margin-top: .2rem; }
.dp-sugerencias li.libre strong { color: var(--azul); }
#dp-de-foto { margin-bottom: .4rem; }
.dp-fuente { font-size: .8rem; }

/* Código del correo */
.dp-codigo { margin: .6rem 0 0; }
.dp .dp-codigo-input { letter-spacing: .5em; text-align: center; font-size: 1.5rem; font-weight: 800; max-width: 14rem; }

/* Revisar */
.dp-resumen { margin: 0; }
.dp-resumen > div { padding: .8rem 0; border-bottom: 1px solid var(--borde); }
.dp-resumen dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; }
.dp-resumen dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.dp-resumen dd .dp-enlace { margin-left: .4rem; font-size: .9rem; }
.dp-sin-red { background: var(--beige-1); border-radius: 12px; padding: .7rem .9rem; }

/* Listo / guardada */
.dp-listo { text-align: center; padding: 1rem 0 2rem; outline: none; }
.dp-listo h2 { font-size: 1.7rem; margin: .5rem 0; }
.dp-sello { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--turquesa); position: relative; animation: dp-aparece .5s ease-out; }
.dp-sello::after { content: ""; position: absolute; left: 30px; top: 16px; width: 20px; height: 38px; border: solid var(--blanco); border-width: 0 7px 7px 0; transform: rotate(45deg); }
.dp-sello-espera { background: var(--beige-1); border: 4px solid var(--turquesa); box-sizing: border-box; }
.dp-sello-espera::after { left: 34px; top: 14px; width: 0; height: 26px; border-width: 0 0 0 6px; border-color: var(--azul); transform: none; box-shadow: 6px 18px 0 -1px var(--azul); }
@keyframes dp-aparece { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dp-sello { animation: none; } .dp-barra span { transition: none; } }
.dp-numero { display: inline-block; font-size: 1.9rem; font-weight: 800; letter-spacing: .02em; background: var(--beige-1); border-radius: 16px 16px 16px 4px; padding: .7rem 1.2rem; margin: .5rem 0 1rem; overflow-wrap: anywhere; }
.dp-aviso { background: var(--beige-1); border-left: 5px solid var(--coral); border-radius: 12px; padding: .8rem 1rem; text-align: left; }
.dp-botones { display: flex; flex-direction: column; gap: .6rem; }
.dp-listo .dp-linea { text-align: left; max-width: 360px; margin: 1rem auto; }

/* Línea de estados (pantalla final y seguimiento) */
.dp-linea { list-style: none; padding: 0 0 0 1.6rem; margin: 1rem 0; position: relative; }
.dp-linea::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 3px; background: rgba(0, 55, 76, .12); border-radius: 2px; }
.dp-linea li { position: relative; padding: 0 0 1rem .6rem; }
.dp-linea li::before { content: ""; position: absolute; left: -1.5rem; top: .25rem; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: 3px solid rgba(0, 55, 76, .25); box-sizing: border-box; }
.dp-linea li.hecho::before { background: var(--turquesa); border-color: var(--turquesa); }
.dp-linea li.falta { color: var(--gris); }
.dp-linea .dp-fecha, .dp-linea .dp-texto { display: block; font-size: .9rem; color: var(--gris); }
.dp-linea .dp-texto { color: var(--azul); }

/* Seguimiento */
.dp-seguimiento .dp-rotulo { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--gris); font-weight: 700; margin: 0; }
.dp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.dp-chips span { background: var(--beige-1); border-radius: 999px; padding: .3rem .8rem; font-weight: 600; font-size: .92rem; }
.dp-nota { font-size: .9rem; color: var(--gris); }

/* Avisos de arriba: sin señal y denuncias guardadas */
.dp-red { background: var(--azul); color: var(--beige-1); border-radius: 14px; padding: .75rem 1rem; margin: 0 0 1rem; }
.dp-red[hidden], .dp-mis[hidden] { display: none; }
.dp-mis { margin: 0 0 1rem; }
.dp-mis .dp-espera { background: var(--beige-1); border-left: 5px solid var(--turquesa); border-radius: 12px; padding: .7rem .9rem; margin: 0 0 .5rem; }
.dp-mis details { font-size: .95rem; }
.dp-mis summary { cursor: pointer; font-weight: 700; }

@media (min-width: 720px) {
  .dp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-acciones { position: static; margin: 1.5rem 0 0; padding: 0; background: none; }
  .dp-botones { flex-direction: row; justify-content: center; }
  .dp-boton-claro { width: auto; }
}

/* DNI de cada persona adicional (Firma Digital para otras personas, 2026-10-09):
   el nombre y el DNI se leen del documento y quedan bloqueados. */
.dni-persona { background: var(--beige-1); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; }
.dni-persona-ayuda { margin: 0 0 .6rem; font-size: .95rem; }
.dni-persona-estado { margin: .5rem 0 0; font-size: .95rem; }
.btn-texto { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: .4rem .2rem; font: inherit; font-size: .92rem; }
.grupo input[readonly] { background: rgba(0, 55, 76, .05); cursor: not-allowed; }

/* Lectura del poder (2026-10-09): ayuda para Mesa, no frena el envío. */
.poder-lectura { margin: .6rem 0 0; font-size: .95rem; }
.poder-lectura.leyendo { color: var(--gris); }
.poder-lectura.aviso { border-left: 4px solid var(--coral); padding-left: .6rem; }
.poder-lectura.ok { border-left: 4px solid var(--turquesa); padding-left: .6rem; }

/* Avance de la lectura del poder (2026-10-10): barra nativa, liviana. */
.poder-lectura progress { display: block; width: 100%; height: 8px; margin-top: .4rem; accent-color: var(--turquesa, #00ADB5); border-radius: 4px; }
.poder-lectura .poder-avance { display: block; }
.opcion.deshabilitada { opacity: .45; cursor: not-allowed; }
.solo-terceros { margin: .5rem 0 0; font-size: .95rem; color: var(--azul); }