/* ------------------------------------------------------------------
   Propuesta 02 · Portal clásico
   Municipalidad de María Pinto — Vector Web 2026
   Patrón de portal municipal chileno (referencia estructural: buin.cl),
   con la identidad, los textos y los datos de María Pinto.
   ------------------------------------------------------------------ */

:root {
  --cian: #0498a7;
  --cian-claro: #17b3c2;
  --cian-osc: #036c78;
  --navy: #102d57;
  --navy-osc: #0a1e3c;
  --verde: #2f7a54;
  --lima: #7bc043;
  --coral: #ee714f;
  --sol: #f2c14e;
  --morado: #5b3f9e;
  --gris: #f0f3f6;
  --gris-linea: #d8e0e8;
  --texto: #1f2b38;
  --suave: #5b6b7c;
  --wrap: 1240px;
  --sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

h1, h2, h3 { font-weight: 900; line-height: 1.15; margin: 0; }
a { color: var(--cian-osc); }

:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--sol); color: #000; font-weight: 700; padding: .8rem 1.3rem;
}
.skip:focus { left: 0; }

/* ---------- Cinta de revisión ---------- */

.revision {
  background: #0b1b30; color: #b9cadb; font-size: .76rem;
  padding: .5rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  justify-content: center; align-items: center;
}
.revision a { color: #c7f36b; font-weight: 700; }

/* ---------- Barra legal ---------- */

.legal { border-bottom: 1px solid var(--gris-linea); background: #fff; }
.legal ul {
  width: min(100% - 1rem, var(--wrap)); margin-inline: auto;
  list-style: none; padding: 0; margin-block: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.legal li { border-right: 1px solid var(--gris-linea); }
.legal li:first-child { border-left: 1px solid var(--gris-linea); }
.legal a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: var(--texto);
  padding: .5rem .6rem; min-height: 46px;
  border-bottom: 3px solid transparent;
}
.legal a:hover { background: var(--gris); border-bottom-color: var(--cian); }
.legal span { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.legal strong { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 860px) {
  .legal ul { display: flex; flex-wrap: wrap; border-left: 1px solid var(--gris-linea); }
  .legal li { flex: 1 1 30%; border-bottom: 1px solid var(--gris-linea); }
  .legal li:first-child { border-left: 0; }
}
@media (max-width: 560px) {
  .legal li { flex: 1 1 45%; }
}

/* ---------- Barra de navegación ---------- */

.barra { background: var(--cian); position: relative; z-index: 30; }
.barra-int {
  width: min(100% - 1.5rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marca { flex: none; padding: .3rem 0; }
.marca img { display: block; width: clamp(96px, 11vw, 124px); height: auto; background: #fff; border-radius: 4px; padding: .25rem .4rem; }

.menu-btn {
  display: none; margin-left: auto;
  font: inherit; font-weight: 700;
  background: var(--cian-osc); color: #fff; border: 0;
  padding: .6rem 1rem; cursor: pointer;
}

.nivel1 { display: flex; flex-wrap: wrap; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.nivel1 > li { position: relative; }
.nivel1 > li > a,
.nivel1 > li > button {
  display: flex; align-items: center; gap: .25rem;
  font: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 1rem .55rem; height: 100%;
}
.nivel1 > li > a:hover,
.nivel1 > li > button:hover,
.nivel1 > li > button[aria-expanded="true"] { background: var(--cian-osc); }

.sub {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 250px; list-style: none; margin: 0; padding: .35rem 0;
  background: #fff; border: 1px solid var(--gris-linea);
  box-shadow: 0 12px 28px rgba(16, 45, 87, .18);
  display: none;
}
.tiene-sub.abierto .sub { display: block; }
.sub a {
  display: block; padding: .6rem 1rem;
  color: var(--texto); text-decoration: none; font-size: .88rem;
}
.sub a:hover { background: var(--gris); color: var(--cian-osc); }

/* ---------- Carrusel ---------- */

/* El banner completo del municipio, sin recortar: es una pieza diseñada y se
   respeta entera. Debajo, una franja con el plazo y la acción, en el color de
   la campaña, para que en el teléfono haya siempre algo legible y tocable. */
.carrusel { position: relative; background: var(--navy); }
.lamina { position: relative; }

.lam-img { display: flex; align-items: center; justify-content: center; line-height: 0; }
.lam-img img { display: block; max-width: 100%; width: auto; height: auto; }

/* Los banners del municipio no vienen todos con la misma proporción. En vez de
   recortarlos —hay letra chica pegada a los bordes: el teléfono de CGE abajo, el
   letrero de «cierre seguro»— se les fija una altura común y se centran. Lo que
   sobra a los lados lo toma el color de la campaña, y el carrusel deja de saltar
   de alto al cambiar de lámina. */
@media (min-width: 700px) {
  .lam-img { height: clamp(300px, 37vw, 500px); }
  .lam-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  /* Cada banner se encuadra donde conviene: el de CGE lleva el teléfono en una
     franja al pie y el de cierre de pasajes un letrero abajo del todo. */
  .lam-1 .lam-img img { object-position: 86% 50%; }
  .lam-3 .lam-img img { object-position: 44% 50%; }
  .lam-2 .lam-img img { object-position: 50% 20%; }
  .lam-4 .lam-img img { object-position: 50% 6%; }
  .lam-5 .lam-img img { object-position: 50% 13%; }
  .lam-6 .lam-img img { object-position: 50% 79%; }
  /* El del SOAP es el único con letra en los dos bordes: los titulares arriba y
     dos sellos —«cobertura completa», «respuesta inmediata»— al pie. Hasta que
     la altura llega al tope de 500 px sobra tan poco (7,8 %) que repartido a
     medias no toca ni lo uno ni lo otro. Pasado ese punto el sobrante crece
     (35 % a 1920 px) y ya no caben los dos: se corta por abajo, que sacrifica
     los sellos enteros en vez de partir el titular. */
  .lam-7 .lam-img img { object-position: 50% 50%; }
}
/* Desde aquí el sobrante ya pasa del 10 %, o sea que cortando por abajo los
   sellos se van enteros. Antes de este ancho el corte los partiría. */
@media (min-width: 1390px) {
  .lam-7 .lam-img img { object-position: 50% 0%; }
}

.lam-pie {
  position: relative; z-index: 3; background: inherit;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem;
  margin: 0; padding: .85rem clamp(1rem, 4vw, 2rem);
  color: #fff;
}
.lam-plazo { flex: 1 1 14rem; font-size: clamp(.88rem, 1.5vw, 1rem); font-weight: 500; }
.lam-cta {
  flex: none; text-decoration: none; background: #0b1b30; color: #fff;
  font-size: clamp(.85rem, 1.4vw, .95rem); font-weight: 700;
  padding: .6rem 1.2rem;
}
.lam-cta::after { content: " →"; }

/* Los puntos van centrados en absoluto sobre esta franja y se le montaban
   encima al texto a partir de unos 800 px. Apretar el texto no servía: por
   debajo de 860 px cada punto es un botón de 40 px para el dedo, y entre los
   siete ocupan 280 px de centro. Así que se hace lo mismo que en el teléfono,
   darles banda propia debajo de la fila. Cuesta un poco de alto y a cambio no
   hay forma de que choquen, midan lo que midan. */
@media (min-width: 621px) {
  .lam-pie { padding-bottom: 3.4rem; }
  .lam-cta { margin-left: auto; }
}
@media (min-width: 861px) {
  /* Aquí los puntos vuelven a ser de 10 px: hace falta mucha menos banda. */
  .lam-pie { padding-bottom: 2.2rem; }
}
.lam-img:hover + .lam-pie .lam-cta,
.lamina:hover .lam-cta { background: #fff; color: var(--navy); }

.lam-1 { background: linear-gradient(100deg, #3b2a7a, #5b3f9e 60%, #7a5bc4); }
.lam-2 { background: linear-gradient(100deg, #06485a, var(--cian-osc) 60%, var(--cian)); }
.lam-3 { background: linear-gradient(100deg, #8c3d1c, var(--coral) 60%, var(--sol)); }
.lam-4 { background: linear-gradient(100deg, #073844, #12707f 60%, #2aa3ac); }
.lam-5 { background: linear-gradient(100deg, #7a3d10, #c9711f 60%, #e8a33a); }
.lam-6 { background: linear-gradient(100deg, #10305c, #1d5aa0 60%, #4090d2); }
.lam-7 { background: linear-gradient(100deg, #0b1f38, #163554 60%, #2f5f8c); }
.lam-3 .lam-cta, .lam-5 .lam-cta { background: #4a2409; }

/* Flechas y puntos van sobre la imagen, no sobre la franja. */
.flecha {
  position: absolute; top: min(12.5vw, 180px); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: clamp(34px, 2.6vw, 40px); height: clamp(34px, 2.6vw, 40px);
  border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 1.3rem; line-height: 1;
  background: rgba(11,27,48,.58); color: #fff;
}
.flecha:hover { background: rgba(11,27,48,.8); }
.prev { left: clamp(8px, 1.4vw, 18px); }
.next { right: clamp(8px, 1.4vw, 18px); }

.puntos {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: .95rem;
  display: flex; gap: .45rem;
}
.punto {
  width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.45); border: 0; padding: 0;
}
.punto.activo { background: #fff; }

@media (max-width: 620px) {
  /* En el teléfono el banner queda muy bajo para leerlo: la franja carga el
     mensaje y los puntos se van bajo ella para no taparla. */
  .lam-pie { flex-direction: column; align-items: stretch; padding-bottom: 2.4rem; }
  /* En columna, flex-basis pasa a ser alto: hay que soltarlo o abre un hueco. */
  .lam-plazo { flex: 0 0 auto; }
  .lam-cta { align-self: stretch; text-align: center; }
  .flecha { background: rgba(11,27,48,.58); }
}

/* ---------- Accesos ---------- */

.accesos { background: var(--navy); padding: 1.5rem 0 2rem; }

.cuadros {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .cuadros { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .cuadros { grid-template-columns: repeat(8, 1fr); } }

/* Ficha ilustrada: la imagen cubre el fondo y el texto va encima, sobre un velo
   que baja del transparente al oscuro para que se lea sobre cualquier dibujo.
   El rótulo sigue siendo texto —no está dentro de la imagen—, así que el
   buscador y el lector de pantalla lo leen igual. */
.cuadro {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 178px; padding: 1rem .95rem;
  text-align: left; text-decoration: none; color: #fff;
  border: 2px solid rgba(255,255,255,.22);
}
.cuadro-arte {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.cuadro::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,27,48,0) 30%, rgba(11,27,48,.66) 62%, rgba(11,27,48,.9));
  transition: background .25s;
}
.cuadro > .texto-cuadro { position: relative; z-index: 2; }
.cuadro:hover { border-color: #fff; }
.cuadro:hover .cuadro-arte { transform: scale(1.08); }
.cuadro:hover::after { background: linear-gradient(180deg, rgba(11,27,48,.1) 30%, rgba(4,152,167,.55) 70%, rgba(3,108,120,.9)); }
.cuadro .texto-cuadro { display: flex; flex-direction: column; gap: .3rem; }
.cuadro strong { font-size: .92rem; line-height: 1.2; }
.cuadro em {
  font-style: normal; font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}
/* La flecha aparece al acercar el cursor: avisa que la ficha lleva a algún sitio. */
.cuadro em::after {
  content: " →"; opacity: 0; margin-left: -.6em;
  transition: opacity .25s, margin-left .25s;
}
.cuadro:hover em::after { opacity: 1; margin-left: .15em; }

.c-navy { background: #16386b; }
.c-teal { background: var(--cian-osc); }
.c-verde { background: var(--verde); }
.c-coral { background: #c9542f; }
.c-morado { background: var(--morado); }
.c-sol { background: #b3811a; }

.anchos {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 700px) { .anchos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .anchos { grid-template-columns: repeat(4, 1fr); } }
.ancho {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  height: 100%; padding: 1rem 1.15rem; min-height: 92px;
  text-decoration: none; color: #fff;
}
.ancho-arte {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.ancho::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,27,48,.85) 30%, rgba(11,27,48,.35) 70%, rgba(11,27,48,.1));
  transition: background .25s;
}
.ancho > strong, .ancho > span { position: relative; z-index: 2; }
.ancho:hover .ancho-arte { transform: scale(1.06); }
.ancho:hover::after { background: linear-gradient(90deg, rgba(3,108,120,.9) 30%, rgba(4,152,167,.45) 70%, rgba(4,152,167,.15)); }
.ancho strong { font-size: 1rem; }
.ancho span { font-size: .8rem; opacity: .88; }

.a-navy { background: #1d4a8f; }
.a-verde { background: #3f7d3a; }
.a-teal { background: var(--cian); }
.a-gris { background: #4b5b6c; }

.destacados-btn { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 560px) { .destacados-btn { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .destacados-btn { grid-template-columns: repeat(4, 1fr); } }
.destacados-btn a {
  /* height: 100% para que los cuatro midan lo mismo aunque un rótulo crezca:
     antes el <a> se quedaba en su alto de contenido y el más largo sobresalía. */
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  height: 100%; min-height: 66px; padding: .85rem 1rem;
  text-align: center; text-decoration: underline; text-underline-offset: 3px;
  background: var(--cian); color: #fff; font-weight: 700; font-size: .95rem;
}
.destacados-btn .btn-txt { line-height: 1.3; }
.destacados-btn li:nth-child(2) a { background: #16386b; }
.destacados-btn li:nth-child(3) a { background: var(--verde); }
.destacados-btn li:nth-child(4) a { background: var(--morado); }
.destacados-btn a:hover { filter: brightness(1.15); }

/* ---------- Mostrador · ¿Qué necesita hacer? ---------- */

/* Viene pegado a la grilla de accesos, que también es navy: el filete cian
   marca el corte para que no se lea como una sola mancha oscura. */
.mostrador {
  background: var(--navy);
  border-top: 4px solid var(--cian);
  color: #fff;
  padding: clamp(2rem, 4.5vw, 3.2rem) 0 clamp(2rem, 4vw, 2.8rem);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 88px);
}
.mostrador .sobre {
  margin: 0 0 .6rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sol);
}
.mostrador h2 {
  margin-bottom: .6rem;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  color: #fff;
}
.mostrador .bajada {
  margin: 0 0 1.6rem; max-width: 54ch;
  color: #cfdcec; font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.buscador {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 3px solid var(--cian);
  max-width: 46rem;
}
.buscador:focus-within { border-color: var(--sol); box-shadow: 0 0 0 4px rgba(242,193,78,.35); }
.lupa { width: 24px; height: 24px; margin-left: 1rem; color: var(--navy); flex: none; }
.buscador input {
  flex: 1; min-width: 0;
  font: inherit; font-size: clamp(1rem, 1.9vw, 1.25rem);
  padding: 1rem .9rem; border: 0; outline: 0;
  color: var(--texto); background: transparent;
}
.buscador input::placeholder { color: #7d8ea3; }
.buscador button {
  font: inherit; font-size: 1.05rem;
  background: transparent; border: 0; cursor: pointer;
  padding: .6rem 1rem; color: var(--suave);
}
.buscador button:hover { color: var(--navy); }

.frecuentes { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.frecuentes > span { font-size: .82rem; font-weight: 700; color: #cfdcec; }
.frecuentes ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.atajo {
  font: inherit; font-size: .86rem; font-weight: 500;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid #3d5d8f; padding: .45rem .85rem; cursor: pointer;
}
.atajo:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- Trámites y servicios ---------- */

.tramites { padding: 2.5rem 0 3rem; }
.tramites-cab {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem;
}
.tramites h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: var(--navy); }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro {
  font: inherit; font-size: .84rem; font-weight: 500;
  background: #fff; color: var(--navy);
  border: 1px solid var(--gris-linea);
  padding: .45rem .85rem; cursor: pointer;
}
.filtro:hover { border-color: var(--cian); color: var(--cian-osc); }
.filtro.activo { background: var(--navy); border-color: var(--navy); color: #fff; }

.conteo { margin: 0 0 1.1rem; font-size: .85rem; font-weight: 500; color: var(--suave); }

.lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
}
.tramite {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gris-linea);
  border-left: 5px solid var(--cian);
  padding: 1.15rem 1.25rem 1.25rem;
}
.tramite:hover { background: var(--gris); border-left-color: var(--navy); }
.tramite h3 { margin-bottom: .45rem; font-size: 1.08rem; color: var(--navy); }
.t-desc { margin: 0 0 .75rem; font-size: .94rem; }
.t-req { margin: 0 0 .9rem; font-size: .87rem; color: var(--suave); }
.t-req strong { color: var(--texto); font-weight: 700; }
.t-meta { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }

.canal, .unidad {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .5rem;
}
.canal.linea { background: var(--cian-osc); color: #fff; }
.canal.hora { background: var(--sol); color: #43300a; }
.canal.presencial { background: #dde5ee; color: var(--navy); }
.unidad { background: var(--gris); color: var(--suave); }

.t-ir {
  margin-top: auto; align-self: flex-start;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  color: var(--cian-osc);
  border-bottom: 2px solid var(--cian); padding-bottom: 2px;
}
.t-ir::after { content: " →"; }
.t-ir:hover { color: var(--navy); border-bottom-color: var(--navy); }

.sin-resultados {
  margin: 0; background: #fff;
  border: 1px solid var(--gris-linea);
  border-left: 5px solid var(--coral);
  padding: 1.15rem 1.3rem;
}

/* ---------- Franja de títulos ---------- */

.franja-titulos { background: var(--cian); padding: 1.5rem 0; }
.franja-titulos .wrap { display: grid; gap: .5rem; }
.franja-titulos h2 { color: #fff; font-size: clamp(1.4rem, 2.8vw, 2rem); text-align: center; }

/* ---------- Sesiones del Concejo ---------- */

.reproductor { background: var(--gris); border-bottom: 1px solid var(--gris-linea); padding: 1.8rem 0 2.4rem; }
.repro-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .repro-grid { grid-template-columns: 1.9fr 1fr; gap: 1.75rem; align-items: start; } }

.repro-marco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #06131f; border: 1px solid var(--gris-linea);
}
.repro-marco img, .repro-marco iframe {
  width: 100%; height: 100%; display: block; border: 0; object-fit: cover;
}
.repro-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,45,87,.28); border: 0; cursor: pointer;
  transition: background .15s;
}
.repro-play:hover { background: rgba(16,45,87,.48); }
.repro-play > span {
  display: flex; align-items: center; justify-content: center;
  width: clamp(54px, 6.5vw, 78px); height: clamp(54px, 6.5vw, 78px);
  border-radius: 50%; background: var(--cian); border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.repro-play > span::after {
  content: ""; margin-left: .2em;
  border-style: solid; border-width: .5em 0 .5em .86em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(18px, 2.2vw, 26px);
}
.repro-play:hover > span { background: var(--cian-osc); }

.repro-pie { margin: .85rem 0 0; }
.repro-pie strong { display: block; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--navy); line-height: 1.25; }
.repro-fecha { display: block; font-size: .78rem; color: var(--suave); margin-bottom: .2rem; }

.repro-encabezado {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--suave);
}
.repro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
@media (min-width: 900px) {
  /* La lista no puede crecer más que el video: si no, la fila se descuadra. */
  .repro-lista { max-height: 27rem; overflow-y: auto; padding-right: .35rem; }
}
.repro-item {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--gris-linea);
  border-left: 4px solid transparent; padding: .4rem;
}
.repro-item:hover { border-left-color: var(--cian); }
.repro-item.activo { border-left-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.repro-item img { flex: none; display: block; width: 92px; height: 52px; object-fit: cover; }
.repro-txt { min-width: 0; }
.repro-txt strong { display: block; font-size: .87rem; font-weight: 700; color: var(--navy); line-height: 1.25; }
.repro-item .repro-fecha { font-size: .71rem; margin-bottom: .15rem; }

.repro-mas { margin: .8rem 0 0; }
.repro-mas a { font-size: .85rem; font-weight: 700; color: var(--cian-osc); }

/* ---------- Concejo ---------- */

.concejo { background: var(--gris); padding: 2.5rem 0; border-block: 1px solid var(--gris-linea); }
.concejo h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-bottom: 1.25rem; color: var(--navy); }
.tabla-sesiones { width: 100%; border-collapse: collapse; background: #fff; font-size: .92rem; }
.tabla-sesiones th, .tabla-sesiones td { padding: .8rem .9rem; text-align: left; border: 1px solid var(--gris-linea); }
.tabla-sesiones thead th { background: var(--navy); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tabla-sesiones tbody tr:nth-child(even) { background: #fafcfe; }

@media (max-width: 720px) {
  .tabla-sesiones thead { display: none; }
  .tabla-sesiones, .tabla-sesiones tbody, .tabla-sesiones tr, .tabla-sesiones td { display: block; width: 100%; }
  .tabla-sesiones tr { margin-bottom: .9rem; border: 1px solid var(--gris-linea); }
  .tabla-sesiones td { border: 0; border-bottom: 1px solid var(--gris-linea); }
  .tabla-sesiones td::before {
    content: attr(data-th) ": ";
    display: block; margin-bottom: .2rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--suave);
  }
  .tabla-sesiones td:first-child::before { content: none; }
  .tabla-sesiones td:first-child { font-weight: 700; color: var(--navy); background: #f3f7fb; }
}

/* ---------- Verticales ---------- */

/* ---------- Instagram ---------- */

/* El municipio publica sus noticias en Instagram, así que este muro hace de
   sección de noticias. A diferencia del de mpinto.cl, que solo muestra la foto,
   aquí cada ficha lleva la fecha y la primera frase del texto encima: así se
   entiende de qué va sin salir del sitio, y el enlace tiene un nombre que el
   lector de pantalla puede anunciar. */
.instagram { padding: 1.8rem 0 2.4rem; }

.ig-cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem;
  padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--gris-linea);
}
.ig-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  border: 2px solid var(--cian); padding: 2px; background: #fff;
}
.ig-quien { flex: 1 1 16rem; }
.ig-cuenta {
  display: block; color: var(--navy); font-weight: 700; text-decoration: none;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}
.ig-cuenta:hover { color: var(--cian-osc); text-decoration: underline; }
.ig-bio { margin: .15rem 0 0; color: var(--suave); font-size: .88rem; }
.ig-seguir {
  flex: none; text-decoration: none; font-weight: 700; font-size: .9rem;
  background: var(--navy); color: #fff; padding: .65rem 1.2rem;
}
.ig-seguir:hover { background: var(--cian-osc); }

.ig-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }

.ig-grid a {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--navy-osc); text-decoration: none; color: #fff;
}
.ig-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: reduce) { .ig-grid img { transition: none; } }

/* El velo va siempre puesto, no solo al pasar por encima: en el teléfono no hay
   «pasar por encima» y el texto tiene que leerse igual. */
.ig-pie {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: block; padding: 2.4rem .7rem .7rem;
  background: linear-gradient(to top, rgba(6, 20, 40, .93) 38%, rgba(6, 20, 40, .72) 62%, transparent);
}
.ig-fecha {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cian-claro);
}
.ig-txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .8rem; line-height: 1.35; margin-top: .15rem;
}
.ig-tipo {
  position: absolute; top: .5rem; right: .6rem; z-index: 2;
  font-size: .95rem; line-height: 1; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.ig-grid a:hover img, .ig-grid a:focus-visible img { transform: scale(1.05); }
.ig-grid a:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

/* En el teléfono la ficha es chica y el velo se come la foto: se aprieta. */
@media (max-width: 619px) {
  .ig-pie { padding: 1.6rem .55rem .55rem; }
  .ig-fecha { font-size: .63rem; }
  .ig-txt { font-size: .74rem; }
}

.ig-mas { margin: 1.3rem 0 0; text-align: center; }
.ig-mas a { color: var(--cian-osc); font-weight: 700; font-size: .92rem; }

.verticales { padding: 0 0 2.5rem; }
.verticales ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .verticales ul { grid-template-columns: repeat(4, 1fr); } }
.vert {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
  min-height: 190px; padding: 1.1rem 1.2rem;
  text-decoration: none; color: #fff;
}
.vert strong { font-size: clamp(1.02rem, 4.4vw, 1.25rem); line-height: 1.15; overflow-wrap: break-word; }
.vert span { font-size: .82rem; opacity: .9; overflow-wrap: break-word; }
.v-1 { background: linear-gradient(165deg, var(--cian), #0b6f92); }
.v-2 { background: linear-gradient(165deg, var(--morado), #33246b); }
.v-3 { background: linear-gradient(165deg, #eef1f5, #cfd8e2); color: var(--navy); }
.v-3 span { color: var(--suave); }
.v-4 { background: linear-gradient(165deg, #4b5b6c, #26313d); }
.vert:hover { filter: brightness(1.1); }

/* ---------- Pie ---------- */

.pie { background: var(--navy-osc); color: #cfdcec; }
.pie-grid { display: grid; gap: 2rem; padding: 2.5rem 0 2rem; }
@media (min-width: 860px) { .pie-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.5rem; } }
.pie-marca img { background: #fff; border-radius: 4px; padding: .4rem .6rem; width: 130px; height: auto; }
.pie-marca p { font-size: .88rem; margin: .9rem 0 0; }
.pie-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie-links a, .pie-contacto a { color: #cfdcec; text-decoration: none; font-size: .88rem; }
.pie-links a:hover, .pie-contacto a:hover { color: #fff; text-decoration: underline; }
.pie-links a::before { content: "› "; color: var(--cian); }
.pie-contacto h2 { font-size: .95rem; color: #fff; margin-bottom: .8rem; }
.pie-contacto p { margin: 0 0 .7rem; font-size: .88rem; }
.rrss { display: flex; gap: .5rem; }
.rrss a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff;
}
.rrss svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.rrss a:hover { background: var(--cian); }

.pie-interno { margin: 1.1rem 0 0; font-size: .82rem; }
.pie-interno span { display: block; margin-top: .3rem; font-size: .72rem; color: #7f93ad; }

.pie-legal { border-top: 1px solid rgba(255,255,255,.16); padding: 1rem 0 1.5rem; }
.pie-legal .wrap { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; }
.pie-legal p { margin: 0; font-size: .78rem; color: #93a8c0; }
.pie-legal a { color: var(--sol); }

/* ══════════════ PÁGINAS INTERIORES ══════════════ */

.miga { background: var(--gris); border-bottom: 1px solid var(--gris-linea); font-size: .82rem; }
.miga .wrap { padding: .7rem 0; color: var(--suave); }
.miga a { color: var(--cian-osc); text-decoration: none; }
.miga a:hover { text-decoration: underline; }
.miga span { margin: 0 .35rem; color: var(--gris-linea); }

.pagina-cab {
  background: var(--navy);
  border-top: 4px solid var(--cian);
  color: #fff;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.pagina-sobre {
  margin: 0 0 .5rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sol);
}
.pagina-cab h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); color: #fff; margin-bottom: .6rem; }
.pagina-bajada { margin: 0; max-width: 62ch; color: #cfdcec; font-size: clamp(.98rem, 1.4vw, 1.08rem); }

.pagina-cuerpo { padding: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(2rem, 4vw, 3rem); }
.pagina-cuerpo > .wrap > * + * { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

.pagina-pie { background: var(--gris); border-top: 1px solid var(--gris-linea); padding: 1.5rem 0 1.8rem; }
.pagina-pie p { margin: 0; max-width: 70ch; font-size: .92rem; color: var(--suave); }

/* ---------- Texto corrido ---------- */

.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--navy); margin: 2rem 0 .7rem; }
.prosa > h2:first-child { margin-top: 0; }
.prosa p { margin: 0 0 1rem; }
.prosa ul, .prosa ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prosa li { margin-bottom: .45rem; }
.prosa li::marker { color: var(--cian-osc); font-weight: 700; }
.prosa strong { font-weight: 700; color: var(--navy); }
.prosa .nota { font-size: .88rem; color: var(--suave); border-left: 3px solid var(--gris-linea); padding-left: .9rem; }

/* ---------- Concejalas y concejales ---------- */

.concejales h2 {
  margin: 0 0 1.1rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--navy);
}
.rejilla-concejo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  /* Sin tope, en un monitor ancho cada retrato se iría a 400 px de alto y la
     página se convertiría en una galería de fotos con el texto de propina. */
  max-width: 980px;
}
/* A dos columnas ya desde 480 px: en una sola, la foto cuadrada se lleva la
   pantalla entera de un teléfono grande y hay que hacer scroll para leer las
   comisiones de una sola persona. */
@media (min-width: 480px) { .rejilla-concejo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla-concejo { grid-template-columns: repeat(3, 1fr); } }

.concejal {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gris-linea); border-top: 4px solid var(--cian);
}
.concejal img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  /* Los seis retratos están tomados igual, de frente y con el letrero municipal
     detrás: encuadrando un poco arriba las caras quedan a la misma altura. */
  object-fit: cover; object-position: 50% 42%;
}
/* Por debajo de dos columnas la foto se achata un poco: cuadrada y a ancho
   completo mediría más de 300 px de alto y empujaría el texto fuera de vista. */
@media (max-width: 479px) { .concejal img { aspect-ratio: 4 / 3; } }
.concejal-txt { padding: 1rem 1.1rem 1.2rem; }
.concejal h3 {
  margin: 0 0 .9rem; padding-bottom: .7rem;
  font-size: 1.02rem; line-height: 1.25; color: var(--navy);
  border-bottom: 1px solid var(--gris-linea);
}

.comision + .comision { margin-top: .85rem; }
.comision-rol {
  margin: 0 0 .3rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cian-osc);
}
.comision ul { list-style: none; margin: 0; padding: 0; }
.comision li {
  position: relative; padding-left: .85rem; margin-bottom: .2rem;
  font-size: .87rem; line-height: 1.4;
}
.comision li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; background: var(--gris-linea);
}

/* ---------- Perfil con retrato ---------- */

/* Foto y biografía en la misma rejilla. Si la foto fuera un bloque aparte, el
   texto no la acompañaría —la prosa está limitada a 68 caracteres de ancho— y
   quedaría un hueco a su derecha en las pantallas grandes. */
.perfil { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 760px) {
  .perfil { grid-template-columns: 268px 1fr; gap: 2rem; }
}

.perfil-foto {
  margin: 0; background: var(--gris);
  border: 1px solid var(--gris-linea); border-top: 4px solid var(--cian);
}
.perfil-foto img {
  display: block; width: 100%; height: auto;
  /* La foto viene de un retrato de estudio: se limita el ancho en el teléfono
     para que no ocupe media pantalla antes del texto. */
  max-width: 268px; margin-inline: auto;
}
.perfil-foto figcaption {
  padding: .8rem 1rem 1rem; text-align: center;
  border-top: 1px solid var(--gris-linea);
}
.perfil-foto strong { display: block; color: var(--navy); font-size: 1.02rem; line-height: 1.25; }
.perfil-foto span { display: block; margin-top: .15rem; font-size: .84rem; color: var(--suave); }

.perfil-texto { max-width: 62ch; }
.perfil-texto > h2:first-child { margin-top: 0; }

.aviso {
  margin: 0; max-width: 68ch;
  background: #fffaed; border: 1px solid #e8d391; border-left: 5px solid var(--sol);
  padding: .95rem 1.1rem; font-size: .94rem;
}
.aviso span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: -.2rem;
  border-radius: 50%; background: var(--sol); color: #43300a;
  font-weight: 900; font-size: .8rem;
}

/* ---------- Caja destacada ---------- */

.destacado-caja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  background: var(--cian-osc); color: #fff; padding: 1.3rem 1.5rem;
}
.destacado-caja strong { display: block; font-size: 1.2rem; }
.destacado-caja p { margin: .3rem 0 0; font-size: .94rem; color: #d6f2f6; }
.destacado-cta {
  flex: none;
  background: var(--sol); color: #43300a;
  font-weight: 700; text-decoration: none; padding: .75rem 1.3rem;
}
.destacado-cta:hover { background: #fff; color: var(--navy); }

/* ---------- Listas de documentos ---------- */

.docs h2, .enlaces h2, .videos h2, .ficha-datos h2, .visor-cab h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--navy); margin-bottom: 1rem;
}
.docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 720px) { .docs ul { grid-template-columns: repeat(2, 1fr); } }
.docs a {
  display: flex; align-items: center; gap: .85rem;
  background: #fff; border: 1px solid var(--gris-linea); border-left: 5px solid var(--cian);
  padding: .85rem 1rem; text-decoration: none; color: var(--navy);
}
.docs a:hover { background: var(--gris); border-left-color: var(--navy); }
.doc-tipo {
  flex: none; width: 2.6rem; padding: .25rem 0;
  background: var(--navy); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-align: center;
}
.docs a:hover .doc-tipo { background: var(--cian-osc); }
.doc-txt { flex: 1; min-width: 0; }
.doc-txt strong { display: block; font-size: .95rem; font-weight: 500; line-height: 1.3; }
.doc-txt em { font-style: normal; font-size: .76rem; color: var(--suave); }
.doc-baja { flex: none; color: var(--cian-osc); font-size: 1.1rem; }

.doc-descarga {
  flex: none; background: var(--navy); color: #fff;
  font-size: .85rem; font-weight: 700; text-decoration: none; padding: .6rem 1.1rem;
}
.doc-descarga:hover { background: var(--cian-osc); color: #fff; }

/* ---------- Ficha de datos ---------- */

.ficha-datos dl { margin: 0; display: grid; gap: 1px; background: var(--gris-linea); border: 1px solid var(--gris-linea); }
@media (min-width: 700px) { .ficha-datos dl { grid-template-columns: repeat(2, 1fr); } }
.ficha-datos div { background: #fff; padding: .9rem 1.1rem; }
.ficha-datos dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.ficha-datos dd { margin: .3rem 0 0; font-size: .98rem; font-weight: 500; color: var(--navy); }
.ficha-datos a { color: var(--cian-osc); }

/* ---------- Enlaces relacionados ---------- */

.enlaces ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 720px) { .enlaces ul { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.enlaces a {
  display: block; height: 100%;
  background: #fff; border: 1px solid var(--gris-linea); border-top: 4px solid var(--navy);
  padding: 1rem 1.15rem; text-decoration: none; color: var(--navy);
}
.enlaces a:hover { border-top-color: var(--cian); background: var(--gris); }
.enlaces strong { display: block; font-size: 1rem; }
.enlaces strong::after { content: " →"; color: var(--cian-osc); }
.enlaces span { display: block; margin-top: .3rem; font-size: .86rem; color: var(--suave); }

/* ---------- Visor de documentos y planillas ---------- */

.visor-cab { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.visor-cab h2 { margin-bottom: 0; }
.visor iframe {
  display: block; width: 100%; height: min(80vh, 760px);
  border: 1px solid var(--gris-linea); background: var(--gris);
}
.visor-nota { margin: .7rem 0 0; font-size: .82rem; color: var(--suave); }

/* ---------- Rejilla de videos ---------- */

.videos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.videos li { border: 1px solid var(--gris-linea); background: #fff; }
.video { display: block; text-decoration: none; color: var(--texto); }
.miniatura {
  position: relative; display: block; line-height: 0;
  border-bottom: 1px solid var(--gris-linea); background: #16386b;
}
.miniatura img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  background: rgba(16,45,87,.26); transition: background .15s;
}
.video:hover .play { background: rgba(16,45,87,.5); }
.nota-txt { display: block; padding: .8rem .9rem 1rem; }
.nota-fecha { display: block; margin: 0 0 .35rem; font-size: .74rem; color: var(--suave); }
.videos strong { font-size: .93rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.video:hover strong { color: var(--cian-osc); }

/* ---------- Toque cómodo en pantallas táctiles ----------
   Medido a 390 px: los puntos del carrusel eran de 10x10 y varios enlaces de
   16 px de alto. Con el dedo eso no se acierta. Aquí no cambia el aspecto, solo
   crece la zona sensible; y la barra de transparencia sube de 9 a 12 px, que
   es información obligatoria y tiene que leerse. */

@media (max-width: 860px) {
  .legal span { font-size: .7rem; }
  .legal strong { font-size: .76rem; }
  .legal a { padding: .55rem .6rem; min-height: 54px; }

  /* El punto sigue midiendo 10 px; lo que crece es el botón que lo rodea. */
  .puntos { gap: 0; }
  .punto {
    width: 40px; height: 40px; padding: 0; border-radius: 0;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
  }
  .punto::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.5);
  }
  .punto.activo { background: transparent; }
  .punto.activo::before { background: #fff; }

  .flecha { width: 42px; height: 42px; }

  .atajo, .filtro { min-height: 42px; }
  .t-ir { padding: .5rem 0; }
  .miga a { display: inline-block; padding: .3rem 0; }
  .pie-links a, .pie-contacto a { display: inline-block; padding: .3rem 0; }
  .rrss a { width: 42px; height: 42px; }
  .rrss svg { width: 21px; height: 21px; }
  .repro-mas a, .pie-legal a { display: inline-block; padding: .35rem 0; }
}

/* ---------- Móvil ---------- */

@media (max-width: 980px) {
  .menu-btn { display: block; }
  .barra nav { flex-basis: 100%; display: none; }
  .barra nav.abierto { display: block; }
  .nivel1 { flex-direction: column; align-items: stretch; padding-bottom: .5rem; }
  .nivel1 > li > a,
  .nivel1 > li > button { width: 100%; padding: .85rem .4rem; justify-content: space-between; }
  .sub { position: static; box-shadow: none; border: 0; background: rgba(255,255,255,.95); margin: 0 0 .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Este bloque va al FINAL de la hoja a propósito: una media query no añade
   especificidad, así que si fuera antes, las reglas de base —que tienen la
   misma— ganarían por ir después y no se aplicaría nada de esto. */

/* ---------- Ajustes para pantallas pequeñas ----------

   Repaso del 1 de septiembre de 2026, midiendo las 27 páginas a 360, 414, 768,
   1024, 1280 y 1440 px. No había ni un desborde horizontal, pero sí dos cosas
   que en un teléfono estorban y que en un sitio municipal —donde mucha gente
   que consulta es mayor y entra desde el móvil— importan más que en otros
   sitios: rótulos por debajo de los 11 px y enlaces sueltos de 18 px de alto,
   difíciles de acertar con el dedo.

   Se sube el suelo de tamaño solo donde el texto es información, no adorno, y
   se le da cuerpo a los enlaces que van solos (teléfono, correo, «ver todas»).
   De 620 px para arriba no cambia nada: ahí el diseño ya estaba bien. */

@media (max-width: 619px) {

  /* Rótulos que estaban entre 9 y 11 px. */
  .legal span { font-size: .72rem; }
  .legal strong { font-size: .78rem; }
  .doc-tipo { font-size: .72rem; }
  .cuadro .texto-cuadro em { font-size: .78rem; }
  .canal, .unidad { font-size: .74rem; }
  .repro-item .repro-fecha { font-size: .78rem; }
  .ig-fecha { font-size: .72rem; }
  .vert span { font-size: .86rem; }
  .pie-interno span { font-size: .78rem; }
  .ficha-datos dt { font-size: .76rem; }
  .nota-fecha { font-size: .8rem; }
  .comision-rol { font-size: .74rem; }
  .concejal p { font-size: .9rem; }

  /* Enlaces que van solos: el dedo necesita algo más que la altura de la línea.
     Se les da cuerpo sin sacarlos del flujo, para no descuadrar los párrafos. */
  .pagina-pie p a,
  .ficha-datos dd a,
  .ig-mas a,
  .ig-cuenta,
  .pie-legal a {
    display: inline-block; padding: .45rem 0; line-height: 1.35;
  }
  .pagina-pie p { line-height: 1.8; }

  /* El teléfono y el correo son las dos acciones que más se tocan en un móvil:
     van como bloque, con sitio de sobra. */
  .ficha-datos dd a[href^="tel:"],
  .ficha-datos dd a[href^="mailto:"] {
    display: inline-block; padding: .45rem .7rem; margin: .15rem 0;
    background: #fff; border: 1px solid var(--gris-linea);
    text-decoration: none; font-weight: 700;
  }
  .ficha-datos dd a[href^="tel:"]:hover,
  .ficha-datos dd a[href^="mailto:"]:hover { border-color: var(--cian); }
}