/*
Theme Name: Hídricos NQN
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.1
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.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).
   ========================================================================== */

@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: 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); }

/* 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; }
.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; }

/* ------------------------------------------------------------------- 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: 120px; width: auto; }
.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: 88px; }
  .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 {
  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;
}
.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;
}
.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; }
}
.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: 2.5rem 0 2.75rem;
}
.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: 1.5rem auto 0; }
/* 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: 84px; max-width: 90%; }
@media (max-width: 768px) {
  .sello-aniversario { padding: 2rem 0 2.25rem; }
  .sello-aniversario .anio { font-size: 1.5rem; }
  .sello-aniversario .leyenda { font-size: 1rem; }
  .sello-aniversario img { width: 90%; margin-top: 1.25rem; }
  .sello-aniversario.monograma img { width: auto; height: 72px; }
}

/* ---------------------------------------------- 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, .sello-aniversario { background: none; border: 0; color: #000; padding: 4pt 0; }
  .sello-aniversario img { 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 */
.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,0) calc(50% + 214px));
}
@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,0) calc(50% + 274px)); }
}
@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,0) 540px); }
}
/* "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); }

/* ------------------------------------------------------------------- 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); }