/* ═══════════════════════════════════════════════════════════════════════
   Secciones institucionales — historia, past presidentes, mártires,
   Escuela 1957, proyectos y buzón.

   Continúa la línea del proyecto de gestión «El Sueño Unionista»
   (~/ujc-gestion/estilos.css): la paleta ya era la misma; lo que se trae de
   allá es el tratamiento tipográfico —cuerpo con serifas, rótulos en
   versalita dorada, filetes finos en vez de sombras— para que el sitio y el
   documento se lean como la misma institución y no como una landing.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --serif: Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sans-rotulo: "Helvetica Neue",Arial,sans-serif;
  --linea-fina:#D6CFBF;
  --oro-claro:#E3C877;
}

/* ── Encabezado de sección, calcado del capítulo del documento ────────── */
.seccion{ padding-top:8px }
.seccion > .rotulo{
  font-family:var(--sans-rotulo); font-size:11px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--oro);
  display:block; margin-bottom:10px;
}
.seccion > h1{
  font-family:var(--serif); font-size:clamp(26px,4.2vw,36px); color:var(--verde);
  line-height:1.15; margin:0 0 14px; letter-spacing:-.2px;
}
.seccion > .bajada{
  font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gris);
  line-height:1.45; margin:0 0 26px; padding-bottom:16px; max-width:660px;
  border-bottom:1px solid var(--linea-fina);
}

/* Texto largo de las secciones institucionales: con serifas, como el documento.
   OJO con el nombre: `.doc` a secas ya está tomado en estilos.css por la fila de
   subida de archivos del formulario, que es `display:flex`. Un bloque de texto
   con esa clase se convierte en una fila horizontal — le pasó al aviso de
   privacidad, que dibujó sus diez cláusulas una al lado de la otra, de 95 px de
   ancho, y desbordó la página 1174 px en un teléfono de 390. */
.texto-doc{ font-family:var(--serif); font-size:16.5px; line-height:1.6 }
.texto-doc p{ margin:0 0 .7em }

/* Fuente al pie de cada dato. Es lo que separa un archivo de un folleto. */
.fuente{
  font-family:var(--sans-rotulo); font-size:11.5px; color:var(--gris);
  line-height:1.4; margin-top:12px; padding-top:8px;
  border-top:1px solid var(--linea-fina);
}
.fuente b{ font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  font-size:10px; color:var(--oro); display:block; margin-bottom:3px }

/* ── Línea de tiempo de la historia ───────────────────────────────────── */
.tiempo{ position:relative; margin:0; padding:0 0 0 96px; list-style:none }
.tiempo:before{
  content:""; position:absolute; left:64px; top:10px; bottom:10px;
  width:1px; background:var(--linea-fina);
}
.tiempo li{ position:relative; padding:0 0 34px }
.tiempo li:last-child{ padding-bottom:6px }
.tiempo .anio{
  position:absolute; left:-96px; top:0; width:56px; text-align:right;
  font-family:var(--serif); font-size:21px; font-weight:700; color:var(--verde);
}
.tiempo li:before{
  content:""; position:absolute; left:-33px; top:9px;
  width:9px; height:9px; border-radius:50%;
  background:var(--crema); border:2px solid var(--verde);
}
.tiempo li.lucha_civica:before{ background:var(--verde); }
.tiempo li.fundacion:before{ background:var(--oro); border-color:var(--oro);
  width:11px; height:11px; left:-34px }
.tiempo .fecha{
  font-family:var(--sans-rotulo); font-size:10.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--oro); display:block; margin-bottom:4px;
}
.tiempo h3{ font-family:var(--serif); font-size:19px; color:var(--tinta); margin:0 0 6px }
.tiempo .relato{ font-family:var(--serif); font-size:15.5px; line-height:1.58;
  color:var(--tinta); max-width:620px }
.tiempo .fuente{ max-width:620px }

/* ── Fichas de museo: past presidentes y mártires ─────────────────────── */
.fichas{ display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) }
.ficha{
  background:#fff; border:1px solid var(--linea-fina); padding:0 0 18px;
  display:flex; flex-direction:column;
}
.ficha .retrato{
  aspect-ratio:4/5; background:var(--crema-2); position:relative; overflow:hidden;
  border-bottom:1px solid var(--linea-fina);
}
.ficha .retrato.monograma{ aspect-ratio:5/2 }
.ficha .retrato img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) sepia(.28) hue-rotate(78deg) saturate(1.5) contrast(1.03);
}
/* Sin foto: iniciales sobre papel, no un avatar genérico */
.ficha .sinfoto{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:34px; color:#C6BFAD; letter-spacing:3px;
}
.ficha .cuerpo{ padding:16px 18px 0 }
.ficha .periodo{
  font-family:var(--sans-rotulo); font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--oro); font-weight:700;
}
.ficha h3{ font-family:var(--serif); font-size:19px; color:var(--verde);
  margin:6px 0 8px; line-height:1.25 }
.ficha .semblanza{ font-family:var(--serif); font-size:14.5px; line-height:1.55;
  color:var(--tinta) }
.ficha ul.hitos{ margin:10px 0 0; padding:0; list-style:none }
.ficha ul.hitos li{ font-family:var(--serif); font-size:13.5px; color:var(--gris);
  padding-left:14px; position:relative; margin-bottom:4px; line-height:1.45 }
.ficha ul.hitos li:before{ content:"—"; position:absolute; left:0; color:var(--verde-2) }
/* Pegada al fondo de la ficha: la retícula estira todas las tarjetas de una
   fila al alto de la más alta, y con la fuente flotando a media altura el hueco
   sobrante parecía un error de maquetación. Anclada abajo, es una decisión. */
.ficha .fuente{ margin:14px 18px 0; padding-top:8px; margin-top:auto }

/* ── Períodos por documentar ──────────────────────────────────────────────
   No son fichas: son huecos del archivo, y ocupan lo que ocupa un hueco.     */
.huecos{ margin-top:38px; border-top:1px solid var(--linea-fina); padding-top:20px }
.huecos .rotulo-h{
  font-family:var(--sans-rotulo); font-size:10.5px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gris); display:block; margin-bottom:12px;
}
.huecos ul{ margin:0; padding:0; list-style:none;
  border-top:1px solid var(--linea-fina) }
.huecos li{
  display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:baseline;
  padding:11px 0; border-bottom:1px dotted var(--linea-fina);
}
.huecos li .p{
  font-family:var(--sans-rotulo); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--oro); font-weight:700;
}
.huecos li .q{ font-family:var(--serif); font-size:14.5px; color:var(--gris);
  line-height:1.5 }
.huecos .pie-h{ font-family:var(--serif); font-size:14px; color:var(--gris);
  margin:14px 0 0; line-height:1.55; max-width:640px }

@media(max-width:560px){
  .huecos li{ grid-template-columns:1fr; gap:3px }
}

/* Mártires: fichas más anchas, con más aire */
.martires{ display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.martir{ border-top:2px solid var(--verde); padding-top:20px }
.martir h3{ font-family:var(--serif); font-size:23px; color:var(--verde); margin:0 0 4px }
.martir .cuando{ font-family:var(--sans-rotulo); font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--oro); font-weight:700; margin-bottom:14px }
.martir .relato{ font-family:var(--serif); font-size:15.5px; line-height:1.6 }
.martir .memoria{
  font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.5;
  background:var(--verde-pale); border-left:3px solid var(--verde);
  padding:12px 16px; margin:14px 0 0;
}

/* ── Escuela 1957 ─────────────────────────────────────────────────────── */
.modulos{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) }
.modulo{
  background:#fff; border:1px solid var(--linea-fina); padding:20px 22px;
  display:flex; flex-direction:column;
}
.modulo .codigo{
  font-family:var(--sans-rotulo); font-size:10.5px; font-weight:700; letter-spacing:2px;
  color:var(--oro); text-transform:uppercase;
}
.modulo h3{ font-family:var(--serif); font-size:19px; color:var(--verde);
  margin:7px 0 10px; line-height:1.25 }
.modulo .desc{ font-family:var(--serif); font-size:14.5px; line-height:1.55;
  color:var(--tinta); margin-bottom:14px }
.modulo .meta{
  display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--sans-rotulo);
  font-size:11.5px; color:var(--gris); padding:10px 0;
  border-top:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina);
}
.modulo .meta b{ color:var(--tinta); font-weight:700 }
.modulo .temario{ margin:14px 0 0; padding:0; list-style:none }
.modulo .temario li{
  font-family:var(--serif); font-size:14px; line-height:1.45; color:var(--tinta);
  padding-left:15px; position:relative; margin-bottom:5px;
}
.modulo .temario li:before{ content:"—"; position:absolute; left:0; color:var(--verde-2) }
.modulo .dirigido{
  font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--gris);
  margin-top:auto; padding-top:14px;
}

/* ── Proyectos ante autoridades ───────────────────────────────────────── */
.proyecto{
  background:#fff; border:1px solid var(--linea-fina);
  border-left:3px solid var(--verde); padding:20px 22px; margin-bottom:16px;
}
.proyecto .cabe{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:10px }
.proyecto .nivel{
  font-family:var(--sans-rotulo); font-size:10px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--oro);
}
.proyecto h3{ font-family:var(--serif); font-size:20px; color:var(--verde); margin:0 0 8px }
.proyecto .resumen{ font-family:var(--serif); font-size:15px; line-height:1.55 }
.proyecto .ante{ font-family:var(--sans-rotulo); font-size:12px; color:var(--gris);
  margin-top:12px }
.marca-estado{
  font-family:var(--sans-rotulo); font-size:10.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; padding:4px 10px; border:1px solid currentColor;
}
.marca-estado.presentado{ color:var(--gris) }
.marca-estado.en_comision{ color:var(--ambar) }
.marca-estado.observado{ color:var(--ambar) }
.marca-estado.aprobado{ color:var(--verde-2) }
.marca-estado.rechazado{ color:var(--rojo) }
.proyecto .seguimiento{ margin:14px 0 0; padding:12px 0 0; list-style:none;
  border-top:1px solid var(--linea-fina) }
.proyecto .seguimiento li{ font-family:var(--serif); font-size:13.5px; color:var(--gris);
  padding-left:15px; position:relative; margin-bottom:5px }
.proyecto .seguimiento li:before{ content:"—"; position:absolute; left:0 }

/* Estado vacío: dice la verdad en vez de aparentar contenido */
.vacio{
  border:1px dashed #CFC7B4; padding:34px 28px; text-align:center;
  font-family:var(--serif); color:var(--gris);
}
.vacio strong{ display:block; font-size:18px; color:var(--tinta); margin-bottom:8px;
  font-weight:400 }
.vacio p{ margin:0 auto; max-width:460px; font-size:14.5px; line-height:1.55 }

/* ── Nota al pie de sección ───────────────────────────────────────────── */
.nota-seccion{
  font-family:var(--serif); font-size:14px; color:var(--gris); line-height:1.55;
  border-top:1px solid var(--linea-fina); margin-top:34px; padding-top:16px;
  max-width:640px;
}
.nota-seccion a{ color:var(--verde-2) }

/* Aclaración de estado: se distingue del resto porque declara lo que la
   institución TODAVÍA NO tiene, y eso tiene que leerse como una declaración,
   no como un párrafo más al pie. */
.nota-seccion.aclaracion{
  border-top:0; border-left:3px solid var(--oro); background:var(--crema-2);
  padding:15px 18px; margin-top:20px; max-width:none;
}
.nota-seccion.aclaracion b{ color:var(--tinta) }

/* ── Buzón ────────────────────────────────────────────────────────────── */
.buzon-intro{ font-family:var(--serif); font-size:16px; line-height:1.6; max-width:640px }
.motivos{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:18px 0 6px }
.motivo{
  border:1px solid var(--linea-fina); background:#fff; padding:12px 14px; cursor:pointer;
  font-family:var(--serif); font-size:14.5px; line-height:1.35; text-align:left;
  color:var(--tinta); transition:border-color .12s, background .12s;
}
.motivo:hover{ border-color:var(--verde-2) }
.motivo.on{ border-color:var(--verde); background:var(--verde-pale); font-weight:700 }
.motivo small{ display:block; font-family:var(--sans-rotulo); font-size:11px;
  color:var(--gris); font-weight:400; margin-top:3px }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── Nav en dos grupos ────────────────────────────────────────────────── */
nav .grupo{ display:flex; gap:2px; align-items:center }
nav .separador{ width:1px; height:18px; background:rgba(255,255,255,.22); margin:0 10px }

/* «Afiliarme» es la acción del sitio y tiene que verse como tal, pero en un
   registro institucional: un recuadro de filete fino, no una píldora de color. */
nav a.destacado{
  border:1px solid rgba(255,255,255,.42); border-bottom-width:1px;
  padding:7px 14px; color:#fff; margin-right:2px;
}
nav a.destacado:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7) }
nav a.destacado.on{ background:var(--oro-claro); border-color:var(--oro-claro); color:var(--verde) }
#abrir-menu{
  display:none; margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer;
}

/* Franja de portátil: el nav de ocho entradas entra, pero justo. Sin esto,
   entre 900 y 1060 px quedaba más ancho que la ventana y sacaba scroll
   horizontal — el `nowrap` que arregla el menú partido lo empuja hacia afuera
   en vez de plegarlo, así que acá hay que hacerle lugar de verdad. */
@media(max-width:1120px){
  header .wrap{ gap:14px }
  nav a{ font-size:12.5px; padding:7px 7px 6px; letter-spacing:-.1px }
  nav a.destacado{ padding:6px 11px }
  nav .separador{ margin:0 6px }
  header .marca{ font-size:15px }
  header .marca small{ font-size:9px; letter-spacing:1.4px }
}
/* La hamburguesa entra a los 960 px, no a los 760. Entre 761 y 900 el nav de
   ocho entradas no cabía en el `.wrap` y se partía en tres renglones con los
   rótulos cortados a mitad de frase y el separador colgando como un muñón.
   768 px es exactamente un iPad en vertical, o sea el caso, no el borde.
   Con «Estatuto» el nav pasó a nueve entradas y a 901-930 px sacaba scroll
   horizontal (medido: 34 px a 901), así que el umbral subió de 900 a 960. */
@media(max-width:960px){
  #abrir-menu{ display:block }
  nav{
    display:none; margin-left:0; width:100%; flex-direction:column; gap:0;
    border-top:1px solid rgba(255,255,255,.18); margin-top:12px; padding-top:8px;
  }
  /* En un teléfono de 568-640 px de alto, el menú abierto medía 543 px con una
     banda de aviso encendida y las dos últimas entradas —«Afiliarme» y
     «Escribinos», justamente las dos llamadas a la acción— quedaban abajo del borde. Y pasa en
     el estado por defecto: `ir()` hace scrollTo(0,0) en cada navegación, así que
     el usuario aterriza siempre donde el menú no entra. Con scroll propio, sí. */
  /* El tope real lo pone institucional.js al abrir, porque depende de dónde
     arranca el menú y eso cambia según haya o no una banda de aviso encendida.
     Acá va el respaldo por si el script no llegó a correr. */
  nav.abierto{ display:flex; max-height:calc(100vh - 108px); overflow-y:auto;
    overscroll-behavior:contain;
    /* En un teléfono bajo el menú no entra entero y hay que desplazarlo. Este
       degradado en el borde inferior es lo único que lo delata: un menú cortado
       a ras, sin sombra, se lee como un menú que termina ahí. Se pega al
       contenedor con background-attachment:local, así que desaparece solo
       cuando el usuario llega al final. */
    background:
      linear-gradient(var(--verde) 30%, rgba(20,86,47,0)) top/100% 24px no-repeat local,
      linear-gradient(rgba(20,86,47,0), var(--verde) 70%) bottom/100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.28), rgba(0,0,0,0))
        top/100% 12px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.28), rgba(0,0,0,0))
        bottom/100% 13px no-repeat scroll;
  }
  nav .grupo{ flex-direction:column; align-items:stretch; width:100% }
  nav .separador{ width:100%; height:1px; margin:8px 0 }
  nav a{ padding:9px 4px; border-radius:0; font-size:15px; border-bottom-width:0 }
  nav a.on{ background:transparent; color:#fff; font-weight:700;
    box-shadow:inset 3px 0 0 #fff; padding-left:12px; border-bottom-color:transparent }
  /* En el menú desplegado, «Afiliarme» es un renglón más: el recuadro de la
     cabecera de escritorio acá solo agrega alto y desalinea la columna. */
  nav a.destacado{ border:0; padding:11px 4px; margin-right:0 }
  nav a.destacado.on{ background:transparent; color:#fff }
  header .wrap{ flex-wrap:wrap }
}
@media(max-width:620px){
  .tiempo{ padding-left:0 }
  .tiempo:before{ left:4px }
  .tiempo li{ padding-left:26px }
  .tiempo li:before{ left:0 }
  .tiempo li.fundacion:before{ left:-1px }
  .tiempo .anio{ position:static; width:auto; text-align:left; display:block;
    margin-bottom:2px; font-size:18px }
  .fichas{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px }
  .ficha h3{ font-size:16px }
  .doc, .modulo .desc{ font-size:15.5px }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECCIONES DE LA SEGUNDA TANDA
   Brigada y Guardia · Filiales · Calendario cívico · Transparencia
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fotografía de archivo ────────────────────────────────────────────────
   El pie y el crédito van SIEMPRE. Una foto histórica sin pie es una foto
   sin valor documental: es lo que separa un archivo de un banco de imágenes. */
.galeria{ display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  margin:26px 0 0 }
.foto figure{ margin:0 }
.foto img{
  width:100%; display:block; border:1px solid var(--linea-fina);
  background:var(--crema-2);
  filter:grayscale(1) sepia(.22) hue-rotate(78deg) saturate(1.35) contrast(1.03);
}
.foto figcaption{
  font-family:var(--serif); font-size:13.5px; line-height:1.45; color:var(--tinta);
  margin-top:9px;
}
.foto .credito{
  display:block; font-family:var(--sans-rotulo); font-size:10.5px; color:var(--gris);
  letter-spacing:.4px; margin-top:5px;
}
.foto.ancha{ grid-column:1/-1 }

/* Plancha reservada para el archivo: compuesta a propósito, nunca un ícono roto */
.galeria.vacia{ grid-template-columns:1fr; margin-top:34px }
.hueco-foto{
  border:1px dashed #CFC7B4; aspect-ratio:16/4.5; position:relative;
  background:url("assets/escudo.png") no-repeat center/68px; opacity:.85;
  display:flex; align-items:flex-end; justify-content:center; padding:14px;
}
.hueco-foto:after{
  content:attr(data-nota); font-family:var(--sans-rotulo); font-size:10.5px;
  letter-spacing:1.2px; text-transform:uppercase; color:#B3AA95;
}

/* ── Cuerpos: Guardia de Honor y Brigada 1957 ─────────────────────────── */
.cuerpo{ margin-bottom:52px; padding-bottom:44px; border-bottom:1px solid var(--linea-fina) }
.cuerpo:last-of-type{ border-bottom:0 }
.cuerpo h2{
  font-family:var(--serif); font-size:clamp(23px,3.4vw,30px); color:var(--verde); margin:0;
}
.cuerpo .bajada-c{
  font-family:var(--serif); font-style:italic; font-size:16.5px; color:var(--gris);
  margin:9px 0 0; max-width:640px;
}
.cuerpo .base{
  display:inline-block; margin-top:14px; font-family:var(--sans-rotulo); font-size:10.5px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--oro); font-weight:700;
  border:1px solid var(--linea-fina); padding:5px 11px;
}
.cuerpo .relato{ font-family:var(--serif); font-size:16px; line-height:1.6; max-width:660px;
  margin-top:20px }

/* La frase que define al cuerpo. Es lo mejor del capítulo: va grande. */
.regla{
  border-left:3px solid var(--verde); background:var(--verde-pale);
  padding:22px 26px; margin:28px 0 0; max-width:700px;
}
.regla q{
  font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); font-style:italic;
  line-height:1.4; color:var(--verde); display:block; quotes:"«" "»";
}
.regla .pie{
  font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--gris);
  margin-top:14px;
}

table.compromisos{ width:100%; border-collapse:collapse; margin-top:28px; font-size:14.5px }
table.compromisos th{
  font-family:var(--sans-rotulo); font-size:9.5px; letter-spacing:1.4px;
  text-transform:uppercase; text-align:left; color:#fff; background:var(--verde);
  padding:9px 12px; font-weight:700;
}
table.compromisos td{
  font-family:var(--serif); padding:12px; border-bottom:1px solid var(--linea-fina);
  vertical-align:top; line-height:1.45;
}
table.compromisos tr:nth-child(even) td{ background:#FCFAF5 }
table.compromisos td.medida, table.compromisos td.quien{ color:var(--gris); font-size:13.5px }

/* ── Filiales ─────────────────────────────────────────────────────────── */
.filial-resumen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--linea-fina); background:#fff; margin-bottom:26px;
}
/* Hijo directo, no descendiente: `.filial-resumen div` alcanzaba también a
   `.n` y `.r`, que heredaban el padding y el filete. Cada recuadro terminaba
   midiendo 191 px de alto —más de la mitad aire— con una raya vertical suelta
   en el medio que no correspondía a ningún límite de columna. */
.filial-resumen > div{ padding:18px 20px; border-right:1px solid var(--linea-fina) }
.filial-resumen > div:last-child{ border-right:0 }
.filial-resumen .n{ font-family:var(--serif); font-size:30px; color:var(--verde); line-height:1 }
.filial-resumen .r{
  font-family:var(--sans-rotulo); font-size:10px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--gris); margin-top:6px;
}

.provincia{ border-top:1px solid var(--linea-fina) }
.provincia > summary{
  cursor:pointer; padding:15px 4px; display:flex; align-items:baseline; gap:14px;
  list-style:none;
}
.provincia > summary::-webkit-details-marker{ display:none }
.provincia > summary:before{
  content:"+"; font-family:var(--sans-rotulo); color:var(--oro); font-weight:700;
  width:14px; flex:none;
}
.provincia[open] > summary:before{ content:"–" }
.provincia > summary:hover{ background:var(--crema-2) }
.provincia .pn{ font-family:var(--serif); font-size:19px; color:var(--verde); flex:1 }
.provincia .pc{
  font-family:var(--sans-rotulo); font-size:11.5px; color:var(--gris); white-space:nowrap;
}
.provincia .cuerpo-p{ padding:6px 0 22px 28px }
.municipio{ padding:11px 0; border-bottom:1px dotted var(--linea-fina) }
.municipio:last-child{ border-bottom:0 }
.municipio .mn{ font-family:var(--serif); font-size:15.5px; color:var(--tinta) }
.municipio .cantones{
  font-family:var(--serif); font-size:13.5px; color:var(--gris); line-height:1.5; margin-top:4px;
}
.marca-filial{
  font-family:var(--sans-rotulo); font-size:9.5px; letter-spacing:1.1px;
  text-transform:uppercase; padding:2px 8px; margin-left:9px; border:1px solid currentColor;
  white-space:nowrap;
  /* inline-block + max-width para que, aun sin poder partirse por dentro, la
     insignia nunca sea más ancha que su caja. `nowrap` sola desbordaba. */
  display:inline-block; max-width:100%;
}
.municipio .mn{ overflow-wrap:anywhere }
.marca-filial.verificada{ color:var(--verde-2) }
.marca-filial.por_confirmar{ color:var(--gris) }
.marca-filial.rastro{ color:var(--oro) }

/* ── Calendario cívico ────────────────────────────────────────────────── */
.efemerides{ border-top:2px solid var(--verde) }
.efemeride{
  display:flex; gap:26px; padding:20px 0; border-bottom:1px solid var(--linea-fina);
  align-items:baseline;
}
.efemeride .cuando{
  width:170px; flex:none; font-family:var(--serif); font-size:19px; color:var(--verde);
}
.efemeride .que{ font-family:var(--serif); font-size:16px; line-height:1.5; flex:1 }
.efemeride .anio{
  font-family:var(--sans-rotulo); font-size:12px; color:var(--gris); margin-left:10px;
}
.efemeride.nuestra{ background:var(--verde-pale); padding-left:16px; padding-right:16px;
  margin:0 -16px }
.efemeride.nuestra .cuando{ font-weight:700 }
.efemeride.nuestra:after{
  content:"La Unión"; font-family:var(--sans-rotulo); font-size:9.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--oro); font-weight:700; flex:none;
}

/* ── Transparencia ────────────────────────────────────────────────────── */
.corte{
  display:grid; grid-template-columns:150px 1fr; gap:4px 22px; padding:16px 0;
  border-bottom:1px solid var(--linea-fina); align-items:baseline;
}
.corte .fecha-c{ font-family:var(--serif); font-size:16px; color:var(--verde) }
.corte .nums{ font-family:var(--serif); font-size:14.5px; color:var(--tinta) }
.corte .hash{
  grid-column:2; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:var(--gris); word-break:break-all; margin-top:3px;
}
.declaracion{
  border:1px solid var(--linea-fina); background:#fff; padding:22px 26px; margin-top:30px;
}
.declaracion h3{
  font-family:var(--serif); font-size:19px; color:var(--verde); margin:0 0 10px;
}
.declaracion p{ font-family:var(--serif); font-size:15px; line-height:1.6; margin:0 0 .7em }
.declaracion p:last-child{ margin-bottom:0 }

@media(max-width:620px){
  .cuerpo .relato, .regla q{ font-size:15.5px }
  table.compromisos{ font-size:13.5px }
  table.compromisos th, table.compromisos td{ padding:9px 8px }
  .efemeride{ flex-direction:column; gap:5px }
  .efemeride .cuando{ width:auto }
  .efemeride.nuestra:after{ margin-top:4px }
  .corte{ grid-template-columns:1fr }
  .corte .hash{ grid-column:1 }
  .provincia .cuerpo-p{ padding-left:14px }
}

/* ── Aviso de privacidad ───────────────────────────────────────────────────
   Se lee como un documento con cláusulas numeradas, igual que el proyecto de
   gestión, y no como una página de «términos y condiciones»: la numeración es
   lo que permite que alguien reclame citando «la cláusula IV». */
.sumario-aviso{
  border:1px solid var(--linea-fina); border-left:3px solid var(--oro);
  background:var(--crema-2); padding:18px 20px; margin:0 0 30px;
}
.sumario-aviso h3{
  font-family:var(--sans-rotulo); font-size:11px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--oro);
  margin:0 0 10px;
}
.sumario-aviso ul{ margin:0; padding-left:18px }
.sumario-aviso li{
  font-family:var(--serif); font-size:15.5px; line-height:1.5;
  color:var(--tinta); margin-bottom:7px;
}
.sumario-aviso li:last-child{ margin-bottom:0 }

.clausulas{ font-family:var(--serif); font-size:16.5px; line-height:1.6 }
.clausula{ margin:0 0 30px; max-width:660px }
.clausula h3{
  font-family:var(--serif); font-size:19px; color:var(--verde);
  margin:0 0 10px; display:flex; align-items:baseline;
}
.clausula h3 .n{
  font-family:var(--sans-rotulo); font-size:11px; font-weight:700;
  letter-spacing:1.6px; color:var(--verde-2); flex:0 0 42px;
}
.clausula p{ margin:0 0 .7em }
.clausula ul{ margin:0 0 .7em; padding-left:0; list-style:none }
.clausula ul li{
  position:relative; padding-left:22px; margin-bottom:8px; line-height:1.55;
}
.clausula ul li:before{
  content:"—"; position:absolute; left:0; color:var(--verde-2);
}
.clausula .cierre{ color:var(--gris); font-style:italic }
.clausula .descarga{ margin-top:14px }
.clausula .descarga a{
  display:inline-block; font-family:var(--sans-rotulo); font-size:12px;
  font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--verde); text-decoration:none;
  border:1px solid var(--verde); padding:9px 16px;
}
.clausula .descarga a:hover{ background:var(--verde); color:var(--crema) }

@media(max-width:560px){
  .clausula h3{ display:block }
  .clausula h3 .n{ display:block; margin-bottom:2px }
}