/* ============================================================
   PORTAL ECATEPEC — maqueta de portada
   Identidad: Manual de Identidad Gráfica (Pantone 7421/465/7402)
   Compone contra la Cédula de Evaluación IHAEM 2026, apartado F:
   superficies planas, sin imágenes de fondo, texturas ni degradados.
   ============================================================ */

:root{
  /* Paleta institucional — hex oficiales del manual */
  --guinda:#691C32;        /* Pantone 7421 C */
  --dorado:#BC955C;        /* Pantone 465 C  */
  --arena:#ECD798;         /* Pantone 7402 C */

  --guinda-fuerte:#4E1425;
  --guinda-claro:#8C2B45;

  /* Neutros con sesgo cálido hacia el vino — elegidos, no heredados */
  --fondo:#FBF9F8;
  --superficie:#FFFFFF;
  --superficie-2:#F5F0EC;
  --borde:#E4DAD4;
  --borde-fuerte:#CFBFB6;
  --tinta:#241017;
  --texto:#3E2C33;
  --suave:#6E5A62;

  /* Semánticos: separados del acento, nunca lo sustituyen */
  --bien:#1F7A4D;
  --regular:#B07000;
  --mal:#B3261E;
  --bien-piso:#E7F3EC;
  --regular-piso:#FBF1DC;
  --mal-piso:#FBEAE8;

  --radio:10px;
  --linea:1px solid var(--borde);
  --ancho:1220px;
}

/* Un solo tema, claro, por decisión: un portal institucional debe verse igual
   para toda la ciudadanía y en cualquier equipo. Por eso no hay bloques de
   tema oscuro y cada color se pinta explícitamente desde los tokens. */

*{box-sizing:border-box}

html{overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--fondo);
  color:var(--texto);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:18px;              /* base 18px: accesibilidad para adultos mayores */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.env{max-width:var(--ancho);margin-inline:auto;padding-inline:24px}

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--tinta);
  margin:0;
  text-wrap:balance;
  line-height:1.15;
}

a{color:inherit}

.rotulo{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--suave);
}

/* Hilo dorado — elemento estructural del manual, no adorno */
.hilo{height:3px;background:var(--dorado)}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--dorado);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- 1. Franja institucional ---------- */
/* Lleva el escudo del Estado de México: lo exige el rubro F.1 inciso d) */
.franja{background:var(--guinda);color:#F6E9DC}
.franja .env{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:62px;flex-wrap:wrap;
}
.franja p{margin:0;font-size:.98rem;font-weight:600;letter-spacing:.02em}
.franja-der{display:flex;align-items:center;gap:16px}
.franja-der img{height:52px;width:auto;display:block}
/* El escudo del Estado es un enlace: se le nota al pasar encima, sin
   moverlo de sitio ni cambiarle el tamaño, que la cédula del IHAEM
   fija cómo debe aparecer. */
.escudo-edomex{display:block;border-radius:6px;transition:opacity .15s}
.escudo-edomex:hover,.escudo-edomex:focus-visible{opacity:.75}
.escudo-edomex:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}
.franja-sep{width:1px;height:34px;background:rgba(246,233,220,.32)}
.redes{display:flex;gap:10px}
.redes a{
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid rgba(246,233,220,.35);border-radius:50%;
  color:#F6E9DC;transition:background .15s,border-color .15s;
}
.redes a:hover{background:var(--dorado);border-color:var(--dorado);color:var(--guinda-fuerte)}
.redes svg{width:15px;height:15px}

/* ---------- 2. Encabezado ---------- */
.cabecera{background:var(--superficie);border-bottom:var(--linea);position:sticky;top:0;z-index:60}
.cabecera .env{display:flex;align-items:center;gap:20px;min-height:88px;position:relative}
.marca img{height:56px;width:auto;display:block}
.menu{margin-left:auto;display:flex;align-items:center;gap:16px}
.menu-lista{display:flex;align-items:center;gap:15px;list-style:none;margin:0;padding:0}
.tiene-sub{position:relative}
.tiene-sub > a{display:inline-flex;align-items:center;gap:6px}
.tiene-sub > a svg{width:11px;height:11px;transition:transform .15s}
.tiene-sub:hover > a svg,.tiene-sub:focus-within > a svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 6px);left:-14px;min-width:248px;
  background:var(--superficie);border:1px solid var(--borde);border-top:3px solid var(--dorado);
  border-radius:0 0 var(--radio) var(--radio);padding:8px 0;margin:0;list-style:none;
  box-shadow:0 14px 32px rgba(36,16,23,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:70;
}
.tiene-sub:hover .submenu,.tiene-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}

/* Menú desplegado por grupos: evita la columna interminable de un solo nivel */
.tiene-sub.ancho{position:static}
.submenu.panel{
  left:auto;right:0;width:min(760px,100%);
  padding:26px 28px;display:grid;gap:24px 30px;
  grid-template-columns:repeat(3,minmax(190px,1fr));
  border-radius:var(--radio);
}
.grupo{min-width:0}
.grupo h5{
  margin:0 0 10px;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--guinda-claro);
  padding-bottom:8px;border-bottom:2px solid var(--dorado);
}
.grupo ul{list-style:none;margin:0;padding:0}
.menu .submenu.panel a{padding:8px 0;font-size:.8rem}
.menu .submenu.panel a:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
.grupo .sangria{padding-left:14px;border-left:1px solid var(--borde);margin:2px 0 6px}
.menu .submenu.panel .sangria a{font-size:.76rem;color:var(--suave);padding:5px 0}
/* .menu a es (0,1,1); esto es (0,2,1) para ganarle sin !important */
.menu .submenu a{
  display:block;padding:11px 18px;font-size:.79rem;font-weight:600;
  text-transform:none;letter-spacing:.01em;color:var(--texto);
  border-bottom:0;white-space:normal;
}
.menu .submenu a:hover{background:var(--superficie-2);color:var(--guinda-claro);border-bottom:0}
.menu a{
  font-size:.73rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:var(--texto);padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.menu a:hover{color:var(--guinda-claro);border-bottom-color:var(--dorado)}
/* Especificidad deliberada: .menu a (0,1,1) le ganaría a .btn-predial (0,1,0)
   y le impondría el color de texto oscuro sobre el guinda. */
.menu a.btn-predial{
  background:var(--guinda);color:#fff;text-decoration:none;
  padding:13px 20px;border-radius:var(--radio);border-bottom:2px solid transparent;
  font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;transition:background .15s;
}
.menu a.btn-predial:hover{background:var(--guinda-fuerte);color:#fff;border-bottom-color:transparent}
.etq-corta{display:none}
.hamburguesa{
  display:none;background:none;border:var(--linea);border-radius:8px;
  padding:9px 11px;cursor:pointer;color:var(--texto);
}

/* ---------- 3. Barra de datos vivos ---------- */
/* Clima · aire · no circula · visitas — lo que el portal actual ya publica */
.datos{background:var(--superficie-2);border-bottom:var(--linea)}
.datos .env{
  display:grid;grid-template-columns:repeat(5,1fr);
}
.dato{
  display:flex;align-items:center;gap:12px;
  padding:14px 22px;border-left:1px solid var(--borde);
}
.dato:first-child{border-left:0;padding-left:0}
.dato-ico{
  width:38px;height:38px;flex:none;border-radius:8px;
  display:grid;place-items:center;background:var(--superficie);
  border:1px solid var(--borde);color:var(--guinda-claro);
}
.dato-ico svg{width:20px;height:20px}
.dato-txt{min-width:0}
.dato-txt .rotulo{display:block;font-size:.63rem;line-height:1.4}
.dato-valor{
  font-weight:700;font-size:.95rem;color:var(--tinta);
  display:flex;align-items:center;gap:7px;
  font-variant-numeric:tabular-nums;
}
.punto{width:9px;height:9px;border-radius:50%;flex:none}
.p-bien{background:var(--bien)}
.p-regular{background:var(--regular)}
.p-mal{background:var(--mal)}
.p-rosa{background:#E0489B}

/* ---------- 4. Video institucional ---------- */
/* Bloque de CONTENIDO delimitado, no imagen de fondo: así cumple F.1 d) */
.video-zona{padding:30px 0 34px}
.video-marco{
  border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;background:var(--superficie);
}
/* Altura fluida en vez de aspect-ratio: con proporción fija el max-height
   encoge también el ancho y deja una franja vacía al costado. */
.video-caja{
  position:relative;width:100%;height:clamp(240px,44vw,540px);
  background:var(--guinda);display:grid;place-items:center;overflow:hidden;
}
.video-caja video{width:100%;height:100%;object-fit:cover;display:block}
.video-marcador{display:grid;place-items:center;gap:16px;text-align:center;padding:24px}
.video-marcador img{height:74px;width:auto;opacity:.95}
.video-marcador p{
  margin:0;color:#F2E2D5;font-size:.82rem;font-weight:500;
  letter-spacing:.03em;max-width:44ch;
}
.play{
  width:76px;height:76px;border-radius:50%;border:2px solid var(--dorado);
  background:transparent;color:var(--arena);cursor:pointer;
  display:grid;place-items:center;transition:background .18s,color .18s;
}
.play:hover{background:var(--dorado);color:var(--guinda-fuerte)}
.play svg{width:28px;height:28px;margin-left:5px}
.video-pie{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 20px;border-top:1px solid var(--borde);flex-wrap:wrap;
}
.video-pie p{margin:0;font-size:.83rem;color:var(--suave);font-weight:500}

/* ---------- 5. Cintillo de noticias ---------- */
.cintillo{background:var(--guinda-fuerte);color:#F3E4D8;overflow:hidden}
.cintillo .env{display:flex;align-items:stretch;gap:0;padding-inline:24px}
.cintillo-tag{
  background:var(--dorado);color:var(--guinda-fuerte);
  padding:11px 18px;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;flex:none;
}
.cintillo-pista{overflow:hidden;flex:1;display:flex;align-items:center;padding-left:22px}
.cintillo-tren{display:flex;gap:52px;white-space:nowrap;animation:correr 46s linear infinite}
.cintillo-tren a{font-size:.85rem;text-decoration:none;font-weight:500;padding:11px 0}
.cintillo-tren a:hover{color:var(--arena)}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cintillo:hover .cintillo-tren{animation-play-state:paused}

/* ---------- Secciones ---------- */
section{padding:64px 0}
.sec-clara{background:var(--superficie)}
.enc{margin-bottom:34px;max-width:70ch}
.enc h2{font-size:clamp(1.6rem,3.1vw,2.25rem);margin-bottom:10px}
.enc p{margin:0;color:var(--suave);font-size:1rem}
.enc .rotulo{display:block;margin-bottom:12px;color:var(--guinda-claro)}

/* ---------- 6. Buscador + trámites ---------- */
.buscador{
  display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;
}
.buscador label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.buscador input{
  flex:1;min-width:250px;
  font-family:inherit;font-size:1rem;
  padding:17px 20px;border:2px solid var(--borde-fuerte);
  border-radius:var(--radio);background:var(--superficie);color:var(--tinta);
}
.buscador input::placeholder{color:var(--suave)}
.buscador input:focus{border-color:var(--guinda);outline:none}
.buscador button{
  font-family:inherit;font-size:.82rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:17px 30px;border:0;border-radius:var(--radio);
  background:var(--guinda);color:#fff;cursor:pointer;transition:background .15s;
}
.buscador button:hover{background:var(--guinda-fuerte)}
.conteo{font-size:.85rem;color:var(--suave);margin:0 0 26px;font-weight:500}

.rejilla{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
}
.tramite{
  display:flex;flex-direction:column;gap:12px;
  padding:22px 20px;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borde);
  border-top:3px solid var(--dorado);border-radius:var(--radio);
  transition:border-color .15s,transform .15s;
}
.tramite:hover{border-color:var(--borde-fuerte);border-top-color:var(--guinda);transform:translateY(-2px)}
.tramite-ico{color:var(--guinda-claro)}
.tramite-ico svg{width:31px;height:31px}
.tramite b{
  font-size:.97rem;font-weight:700;color:var(--tinta);
  letter-spacing:-.01em;line-height:1.3;
}
.tramite span{font-size:.79rem;color:var(--suave);line-height:1.45}
.marca-linea{
  margin-top:auto;font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bien);
  display:flex;align-items:center;gap:6px;
}
.marca-linea::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bien)}
.vacio{
  padding:40px 0;color:var(--suave);font-size:.95rem;display:none;
}

/* ---------- 7. Datos abiertos ---------- */
.datos-abiertos{background:var(--guinda);color:#F4E7DA}
.datos-abiertos h2,.datos-abiertos .enc p{color:#F4E7DA}
.datos-abiertos .enc .rotulo{color:var(--arena)}
.datos-abiertos .enc p{opacity:.86}
.tabla-datos{
  border:1px solid rgba(244,231,218,.24);border-radius:var(--radio);overflow:hidden;
}
.fila-dato{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:17px 22px;border-top:1px solid rgba(244,231,218,.18);
}
.fila-dato:first-child{border-top:0}
.fila-dato b{display:block;font-size:.98rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.fila-dato span{font-size:.8rem;opacity:.8}
.formatos{display:flex;gap:8px;flex-wrap:wrap}
.formato{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  padding:6px 12px;border-radius:5px;text-decoration:none;
  border:1px solid var(--dorado);color:var(--arena);
  transition:background .15s,color .15s;
}
.formato:hover{background:var(--dorado);color:var(--guinda-fuerte)}

/* Cifras del municipio */
.cifras{
  display:grid;gap:0;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(244,231,218,.24);border-radius:var(--radio);
  margin-bottom:22px;
}
.cifra{padding:20px 22px;border-left:1px solid rgba(244,231,218,.18)}
.cifra:first-child{border-left:0}
.cifra b{
  display:block;font-size:1.5rem;font-weight:800;color:#fff;
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;
}
.cifra span{display:block;font-size:.76rem;opacity:.82;margin-top:4px}
.fuente{
  margin:0 0 30px;font-size:.74rem;opacity:.62;font-style:italic;
}

/* Acceso al visor y al portal completo */
.datos-pie{
  display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:22px;
}
.acceso{
  display:flex;align-items:center;gap:16px;padding:20px 22px;
  border:1px solid rgba(244,231,218,.24);border-radius:var(--radio);
  text-decoration:none;transition:background .15s;
}
.acceso:hover{background:rgba(244,231,218,.07)}
.acceso-ico{
  width:44px;height:44px;flex:none;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--dorado);color:var(--arena);
}
.acceso-ico svg{width:22px;height:22px}
.acceso b{display:block;font-size:.98rem;color:#fff;font-weight:700;letter-spacing:-.01em}
.acceso span{font-size:.8rem;opacity:.82}
.acceso-flecha{margin-left:auto;color:var(--dorado);flex:none}
.acceso-flecha svg{width:19px;height:19px}

/* ---------- Ayuntamiento ---------- */
.gobierno{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.pieza{
  display:flex;flex-direction:column;gap:11px;padding:26px 24px;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borde);
  border-left:3px solid var(--guinda);border-radius:var(--radio);
  transition:border-color .15s,transform .15s;
}
.pieza:hover{border-color:var(--borde-fuerte);border-left-color:var(--dorado);transform:translateY(-2px)}
.pieza-ico{color:var(--guinda-claro)}
.pieza-ico svg{width:30px;height:30px}
.pieza b{font-size:1.06rem;font-weight:800;color:var(--tinta);letter-spacing:-.015em}
.pieza p{margin:0;font-size:.86rem;color:var(--suave);line-height:1.5}
.pieza-mas{
  margin-top:auto;padding-top:6px;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--guinda-claro);display:flex;align-items:center;gap:7px;
}
.pieza-mas svg{width:14px;height:14px}

/* ---------- 8. Noticias ---------- */
.noticias{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.nota{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;transition:border-color .15s;
}
.nota:hover{border-color:var(--borde-fuerte)}
.nota:hover h3{color:var(--guinda-claro)}
/* La foto se recorta al marco: una imagen vertical estiraba su tarjeta
   y dejaba la fila despareja. El recuadro manda, no la imagen. */
.nota-foto{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--superficie-2);
  display:grid;place-items:center;border-bottom:1px solid var(--borde);
  color:var(--borde-fuerte);
}
.nota-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nota-foto svg{width:42px;height:42px}
.nota-cuerpo{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.nota-meta{
  display:flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.etiqueta{color:var(--guinda-claro)}
.fecha{color:var(--suave);font-weight:600;letter-spacing:.05em}
.nota h3{font-size:1.03rem;line-height:1.32}
.nota p{margin:0;font-size:.87rem;color:var(--suave);line-height:1.5}

/* ---------- 9. Convocatorias y gacetas ---------- */
.dos-col{display:grid;gap:34px;grid-template-columns:1.15fr .85fr;align-items:start}
.lista-docs{display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie)}
.doc{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:17px 20px;border-top:1px solid var(--borde);text-decoration:none;
}
.doc:first-child{border-top:0}
.doc:hover{background:var(--superficie-2)}
.doc-ico{
  width:40px;height:40px;border-radius:7px;display:grid;place-items:center;
  background:var(--superficie-2);border:1px solid var(--borde);color:var(--guinda-claro);
}
.doc-ico svg{width:19px;height:19px}
.doc b{display:block;font-size:.94rem;font-weight:700;color:var(--tinta);letter-spacing:-.01em}
.doc span{font-size:.78rem;color:var(--suave)}
.doc-peso{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--suave);white-space:nowrap}

.panel{
  border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--superficie);padding:26px;
}
.panel h3{font-size:1.12rem;margin-bottom:8px}
.panel > p{margin:0 0 20px;font-size:.88rem;color:var(--suave)}
.enlaces{display:flex;flex-direction:column;gap:2px}
.enlaces a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;text-decoration:none;font-size:.91rem;font-weight:600;
  color:var(--texto);border-bottom:1px solid var(--borde);
}
.enlaces a:last-child{border-bottom:0}
.enlaces a:hover{color:var(--guinda-claro)}
.enlaces svg{width:16px;height:16px;flex:none;color:var(--dorado)}

/* ---------- 10. Pie ---------- */
.pie{background:var(--guinda);color:#EFDFD2;padding:52px 0 0}
.pie-rejilla{
  display:grid;gap:38px;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  padding-bottom:40px;
}
.pie h4{color:#fff;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.pie img.logo-pie{height:60px;width:auto;margin-bottom:16px;display:block}
.pie p{margin:0 0 6px;font-size:.85rem;line-height:1.6;opacity:.9}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie ul a{font-size:.85rem;text-decoration:none;opacity:.9}
.pie ul a:hover{color:var(--arena);opacity:1}
.emergencia{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:.85rem;padding:7px 0;border-bottom:1px solid rgba(239,223,210,.16);
}
.emergencia b{color:var(--arena);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pie-abajo{
  border-top:1px solid rgba(239,223,210,.2);
  padding:20px 0;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.78rem;
}
.pie-abajo a{color:var(--arena);text-decoration:none}
.pie-abajo a:hover{text-decoration:underline}
.visitas-pie{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}

/* ---------- Anexo: nota de la propuesta (no es parte del sitio) ---------- */
.anexo{background:var(--tinta);color:#E7DADF;padding:52px 0}
.anexo h2{color:#fff;font-size:1.5rem;margin-bottom:8px}
.anexo > .env > p{margin:0 0 28px;font-size:.92rem;opacity:.72;max-width:72ch}
.anexo .rotulo{color:var(--dorado);display:block;margin-bottom:12px}
.rubros{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rubro{
  border:1px solid rgba(231,218,223,.2);border-radius:var(--radio);
  padding:20px;display:flex;flex-direction:column;gap:9px;
}
.rubro-alto{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rubro-clave{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--dorado)}
.rubro-pts{font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:20px}
.pts-si{background:rgba(95,203,146,.16);color:#7BD9A9}
.pts-parc{background:rgba(231,178,78,.16);color:#EFC475}
.rubro b{font-size:.95rem;color:#fff;font-weight:700;letter-spacing:-.01em}
.rubro p{margin:0;font-size:.83rem;opacity:.8;line-height:1.55}

/* ---------- Adaptable ---------- */
@media (max-width:1200px){
  /* El botón de predial sobrevive al menú colapsado: es el trámite más buscado */
  .menu-lista{display:none}
  .hamburguesa{display:block}
  .menu{gap:14px;margin-left:auto}
  .dos-col{grid-template-columns:1fr}
  .gobierno{grid-template-columns:1fr}
  .submenu.panel{grid-template-columns:1fr;width:min(340px,100%)}
  .pie-rejilla{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:17px}
  .env{padding-inline:18px}
  .datos .env{grid-template-columns:repeat(2,1fr)}
  .dato{padding:13px 14px;border-left:0}
  .dato:nth-child(odd){padding-left:0}
  .dato:nth-child(even){border-left:1px solid var(--borde)}
  .dato:nth-child(n+3){border-top:1px solid var(--borde)}
  .dato:last-child:nth-child(odd){grid-column:1/-1}
  section{padding:46px 0}
  .fila-dato{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra:nth-child(odd){border-left:0}
  .cifra:nth-child(n+3){border-top:1px solid rgba(244,231,218,.18)}
  .datos-pie{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr;gap:30px}
  .franja p{font-size:.82rem}
  .franja-der img{height:42px}
  .cabecera{position:static}
  .marca img{height:40px}
  .cabecera .env{gap:10px}
  .menu{gap:10px}
  .etq-larga{display:none}
  .etq-corta{display:inline}
  .menu a.btn-predial{padding:11px 16px;font-size:.72rem}
  .cintillo .env{padding-inline:0}
  .cintillo-tag{padding:10px 14px;font-size:.64rem}
  /* En celular el marcador del video no cabía y se cortaba el texto */
  .video-caja{height:clamp(270px,62vw,540px)}
  .video-marcador{gap:11px;padding:18px}
  .video-marcador img{height:48px}
  .video-marcador p{font-size:.73rem;line-height:1.45}
  .play{width:60px;height:60px}
  .play svg{width:23px;height:23px}
  .video-zona{padding:20px 0 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .cintillo-tren{animation:none}
}

/* ---------- Glifo toponímico ---------- */
/* La cédula del IHAEM acepta "glifo, escudo de armas o logo" como identidad
   institucional. El PNG es trazo oscuro, así que se pinta en dorado con una
   máscara en lugar de invertirlo: así conserva el color de la paleta. */
.franja-izq{display:flex;align-items:center;gap:14px;min-width:0}
.glifo{
  width:26px;height:42px;flex:none;
  background:var(--arena);
  -webkit-mask:url("../branding/glifo.png") center/contain no-repeat;
  mask:url("../branding/glifo.png") center/contain no-repeat;
}
/* Si el navegador no soporta máscaras, se muestra la imagen aclarada */
@supports not ((-webkit-mask: url("")) or (mask: url(""))){
  .glifo{background:none;filter:brightness(0) invert(1);opacity:.92}
}
@media (max-width:760px){
  .glifo{width:20px;height:32px}
  .franja-izq{gap:10px}
}

/* ============================================================
   Ajustes de distribución
   ============================================================ */

/* La rejilla de trámites, en cuatro columnas exactas. Con `auto-fill` el
   número de columnas dependía del ancho y dejaba filas incompletas; con
   16 trámites y 4 columnas fijas cierran cuatro filas parejas. */
.rejilla{grid-template-columns:repeat(4,1fr)}

/* Las celdas de la barra medían lo mismo pero su contenido no, así que los
   bloques quedaban descolgados dentro de cajas iguales. Centrarlos empareja
   el conjunto sin tocar los anchos. */
.dato{justify-content:center}
.dato:first-child{padding-left:22px}

/* Las dos columnas de gacetas diferían ~100 px de alto. El panel se estira
   y reparte sus enlaces para cerrar a la misma altura que la lista. */
.dos-col{align-items:stretch}
.dos-col > .panel{display:flex;flex-direction:column}
.dos-col > .panel .enlaces{flex:1;justify-content:space-around}

/* Ritmo vertical parejo: mismo respiro antes y después de cada bloque,
   incluido el del video, que iba con una medida propia. */
section{padding:72px 0}
.video-zona{padding:34px 0 36px}

@media (max-width:1080px){
  .rejilla{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  section{padding:48px 0}
  .dato{justify-content:flex-start}
  .dato:first-child{padding-left:0}
}
@media (max-width:430px){
  .rejilla{grid-template-columns:1fr}
}

/* ============================================================
   Ancho útil
   ============================================================ */

/* El contenedor de 1220 px dejaba 457 px muertos por lado en una pantalla de
   2133 px de ancho CSS. Ahora crece con la ventana, con tope para que las
   filas de tarjetas no se estiren de más. */
:root{--ancho:1680px}
.env{
  width:min(100%,var(--ancho));
  max-width:none;
  padding-inline:clamp(20px,2.4vw,44px);
}

/* El video sí conserva un ancho propio: estirado a 1680 px pediría 945 px de
   alto para respetar el 16:9, y a menos altura YouTube lo enmarca con barras.
   Va centrado, en su proporción real. */
.video-marco{max-width:1180px;margin-inline:auto}
.video-caja{height:auto;aspect-ratio:16/9}

/* Con más ancho, el cintillo y la barra de datos respiran igual */
.cintillo .env{padding-inline:clamp(20px,2.4vw,44px)}

@media (max-width:760px){
  .video-caja{aspect-ratio:auto;height:clamp(270px,62vw,540px)}
}

/* ---------- Zona del video en dos columnas ---------- */
.video-doble{
  display:grid;gap:22px;
  grid-template-columns:minmax(0,1fr) 380px;
  align-items:start;
}
.video-marco{max-width:none;margin-inline:0}
.video-caja iframe{width:100%;height:100%;border:0;display:block}

.video-lista{
  display:flex;flex-direction:column;gap:10px;
  background:var(--superficie);border:1px solid var(--borde);
  border-top:3px solid var(--dorado);border-radius:var(--radio);
  padding:20px;height:100%;
}
.video-lista-tit{
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--guinda-claro);margin:0 0 4px;
}
.video-item{
  display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start;
  text-decoration:none;padding:9px;border-radius:8px;transition:background .15s;
}
.video-item:hover{background:var(--superficie-2)}
.video-mini{
  position:relative;display:block;aspect-ratio:16/9;border-radius:6px;
  overflow:hidden;background:var(--guinda);
}
.video-mini img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
}
.video-play svg{width:26px;height:26px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.video-datos b{
  display:block;font-size:.83rem;font-weight:700;color:var(--tinta);
  line-height:1.32;letter-spacing:-.01em;
}
.video-datos span{display:block;font-size:.72rem;color:var(--suave);margin-top:4px}
.video-vacio{margin:0;font-size:.85rem;color:var(--suave)}
.video-canal{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--guinda-claro);text-decoration:none;
}
.video-canal:hover{color:var(--guinda)}
.video-canal svg{width:16px;height:16px}

@media (max-width:1080px){
  .video-doble{grid-template-columns:1fr}
  .video-lista{height:auto}
  .video-item{grid-template-columns:120px 1fr}
}

/* La lista quedaba corta contra un video de casi 700 px de alto. En vez de
   inventar contenido para rellenar, los elementos reparten el espacio y las
   miniaturas crecen: el bloque cierra parejo con el reproductor. */
.video-doble{grid-template-columns:minmax(0,1fr) 420px}
.video-lista{justify-content:space-between;padding:22px}
.video-item{grid-template-columns:132px 1fr;gap:14px;padding:10px}
.video-datos b{font-size:.88rem}
.video-play svg{width:30px;height:30px}

@media (max-width:1200px){
  .video-doble{grid-template-columns:minmax(0,1fr) 340px}
  .video-item{grid-template-columns:104px 1fr}
}
@media (max-width:1080px){
  .video-doble{grid-template-columns:1fr}
  .video-lista{justify-content:flex-start}
}

/* `margin-top:auto` en el enlace absorbía todo el espacio libre y dejaba los
   videos apelotonados arriba. Sin él, space-between reparte de verdad. */
.video-canal{margin-top:0}

/* ---------- Alineación del menú ---------- */
/* Los rubros con flecha eran inline-flex y los demás se apoyaban en la línea
   base del texto, así que la barra quedaba escalonada. Ahora todos los
   elementos comparten caja y eje, con o sin submenú. */
.menu-lista{align-items:stretch}
.menu-lista > li{display:flex;align-items:center}
.menu-lista > li > a{
  display:inline-flex;align-items:center;gap:6px;
  line-height:1;padding:8px 0;
}
.tiene-sub > a svg{position:relative;top:1px}

/* ---------- Menú desplegado en pantallas chicas ---------- */
.menu-lista.abierto{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  position:absolute;top:100%;left:0;right:0;z-index:80;
  background:var(--superficie);border-top:3px solid var(--dorado);
  box-shadow:0 20px 34px rgba(36,16,23,.16);
  padding:8px 0;max-height:calc(100vh - 150px);overflow-y:auto;
}
.menu-lista.abierto > li{display:block;border-bottom:1px solid var(--borde)}
.menu-lista.abierto > li:last-child{border-bottom:0}
.menu-lista.abierto > li > a{
  display:flex;justify-content:space-between;width:100%;
  padding:15px clamp(20px,2.4vw,44px);border-bottom:0;font-size:.8rem;
}
.menu-lista.abierto > li > a svg{transition:transform .18s}
.menu-lista.abierto > li.desplegado > a svg{transform:rotate(180deg)}

/* El submenú deja de flotar y se vuelve un acordeón */
.menu-lista.abierto .submenu{
  position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:0;border-radius:0;min-width:0;width:auto;
  padding:0 0 10px;display:none;background:var(--superficie-2);
}
.menu-lista.abierto > li.desplegado .submenu{display:block}
.menu-lista.abierto .submenu.panel{grid-template-columns:1fr;gap:14px;padding:14px clamp(20px,2.4vw,44px)}
.menu-lista.abierto .menu .submenu a,
.menu-lista.abierto .submenu a{padding:11px clamp(28px,3vw,52px)}
.menu-lista.abierto .grupo h5{margin-bottom:6px}

/* El video que se está viendo queda marcado en la lista */
.video-item.sonando{background:var(--superficie-2);box-shadow:inset 3px 0 0 var(--dorado)}
.video-item.sonando .video-datos b{color:var(--guinda-claro)}

/* ---------- Pestañas de la columna de video ---------- */
.pestanas{
  display:flex;gap:2px;margin-bottom:14px;
  border-bottom:2px solid var(--borde);
}
.pestana{
  font-family:inherit;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);
  background:none;border:0;border-bottom:3px solid transparent;
  padding:9px 12px;margin-bottom:-2px;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.pestana:hover{color:var(--guinda-claro)}
.pestana.activa{color:var(--guinda);border-bottom-color:var(--dorado)}

.panel-pestana{display:flex;flex-direction:column;gap:8px;flex:1}
.panel-pestana.oculto{display:none}

/* Todas las campañas en la misma caja: las verticales y las horizontales se
   ven parejas en la lista, y el original completo se abre al hacer clic. */
.campana{
  display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;
  text-decoration:none;padding:10px;border-radius:8px;transition:background .15s;
}
.campana:hover{background:var(--superficie-2)}
.campana-caja{
  display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--superficie-2);border:1px solid var(--borde);
}
.campana-caja img{width:100%;height:100%;object-fit:cover;display:block}
.campana-datos b{
  display:block;font-size:.88rem;font-weight:700;color:var(--tinta);
  line-height:1.32;letter-spacing:-.01em;
}
.campana-datos span{display:block;font-size:.72rem;color:var(--suave);margin-top:4px}

@media (max-width:1200px){
  .campana{grid-template-columns:104px 1fr}
}

/* ---------- Visor de programas ---------- */
.visor{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.visor[hidden]{display:none}
.visor-fondo{position:absolute;inset:0;background:rgba(36,16,23,.72);cursor:pointer}
.visor-caja{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(900px,100%);max-height:min(90vh,900px);
  background:var(--superficie);border-radius:var(--radio);
  border-top:4px solid var(--dorado);overflow:hidden;
  box-shadow:0 30px 60px rgba(36,16,23,.4);
}
.visor-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--borde);
}
.visor-titulo{font-size:1.05rem;margin:0;letter-spacing:-.015em}
.visor-cerrar{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:none;border:1px solid var(--borde);border-radius:8px;
  color:var(--texto);cursor:pointer;transition:background .15s,color .15s;
}
.visor-cerrar:hover{background:var(--guinda);border-color:var(--guinda);color:#fff}
.visor-cerrar svg{width:18px;height:18px}
.visor-cuerpo{
  flex:1;min-height:0;overflow:auto;padding:20px;
  display:grid;place-items:center;background:var(--superficie-2);
}
/* La imagen se ve completa: ni recortada ni deformada, sea vertical u horizontal */
.visor-cuerpo img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px}
.visor-pie{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-top:1px solid var(--borde);flex-wrap:wrap;
}
.visor-liga{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--guinda);color:#fff;padding:12px 20px;border-radius:var(--radio);
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s;
}
.visor-liga:hover{background:var(--guinda-fuerte);color:#fff}
.visor-liga[hidden]{display:none}
.visor-liga svg{width:16px;height:16px}
.visor-descarga{font-size:.8rem;color:var(--suave);text-decoration:underline;text-underline-offset:3px}
.visor-descarga:hover{color:var(--guinda-claro)}
body.visor-abierto{overflow:hidden}

@media (max-width:600px){
  .visor{padding:12px}
  .visor-pie{flex-direction:column;align-items:stretch}
  .visor-liga{justify-content:center}
  .visor-descarga{text-align:center}
}

/* ---------- Escenario: carrusel de programas o reproductor ---------- */
.escena{position:relative}
.escena.oculto{display:none}

.carrusel{position:relative;overflow:hidden;background:var(--guinda-fuerte)}
.carrusel-pista{position:relative;aspect-ratio:16/9}
.carrusel-lamina{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.carrusel-lamina.actual{opacity:1;visibility:visible}
/* `contain` y no `cover`: un cartel recortado pierde justo los datos que trae */
.carrusel-lamina img{width:100%;height:100%;object-fit:contain;display:block}

.carrusel-flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;
  background:rgba(36,16,23,.55);border:0;border-radius:50%;
  color:#fff;cursor:pointer;transition:background .15s;z-index:2;
}
.carrusel-flecha:hover{background:var(--guinda)}
.carrusel-flecha svg{width:22px;height:22px}
.carrusel-flecha.atras{left:14px}
.carrusel-flecha.adelante{right:14px}

.carrusel-puntos{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:8px;
}
.carrusel-punto{
  width:34px;height:5px;border:0;border-radius:3px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .2s,width .2s;
}
.carrusel-punto:hover{background:rgba(255,255,255,.75)}
.carrusel-punto.actual{background:var(--dorado);width:52px}

@media (max-width:600px){
  .carrusel-flecha{width:38px;height:38px}
  .carrusel-flecha.atras{left:8px}
  .carrusel-flecha.adelante{right:8px}
  .carrusel-punto{width:26px}
  .carrusel-punto.actual{width:40px}
}

/* El panel activo reparte su contenido en toda la altura disponible: con
   menos de cinco videos quedaba un hueco entre la lista y el enlace del pie. */
.panel-pestana:not(.oculto){justify-content:space-between}

/* ---------- Apilado de la columna ---------- */
/* Repartir el espacio separaba los elementos entre sí cuando había pocos.
   Ahora se apilan desde arriba, pegados, y al crecer la lista se desplaza
   dentro de su caja en vez de estirar la página. */
.panel-pestana:not(.oculto){justify-content:flex-start}
.video-lista{justify-content:flex-start;overflow:hidden}
.panel-pestana{min-height:0;overflow-y:auto;gap:6px}

/* El enlace del canal se queda abajo, separado de la pila */
.video-canal{margin-top:auto}

/* Barra de desplazamiento discreta, en la paleta */
.panel-pestana::-webkit-scrollbar{width:8px}
.panel-pestana::-webkit-scrollbar-track{background:var(--superficie-2);border-radius:4px}
.panel-pestana::-webkit-scrollbar-thumb{background:var(--borde-fuerte);border-radius:4px}
.panel-pestana::-webkit-scrollbar-thumb:hover{background:var(--dorado)}
.panel-pestana{scrollbar-width:thin;scrollbar-color:var(--borde-fuerte) var(--superficie-2)}

/* ---------- Página de la nota ---------- */
.miga{
  display:flex;align-items:center;gap:9px;padding:26px 0 0;
  font-size:.78rem;font-weight:600;color:var(--suave);
}
.miga a{color:var(--guinda-claro);text-decoration:none}
.miga a:hover{text-decoration:underline;text-underline-offset:3px}

.nota-completa{padding:0 0 62px}
.nota-encabezado{max-width:760px;margin:26px 0 30px}
.nota-encabezado h1{font-size:clamp(1.6rem,3.4vw,2.5rem);margin:12px 0 0;line-height:1.2}
.nota-encabezado .nota-meta{margin-bottom:4px}
.nota-entrada{
  margin:18px 0 0;font-size:1.08rem;line-height:1.6;color:var(--suave);
  padding-left:16px;border-left:3px solid var(--dorado);
}

.nota-figura{margin:0 0 30px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde)}
.nota-figura img{width:100%;height:auto;display:block}

/* El cuerpo llega del portal anterior: se acota su ancho y se le da ritmo */
.nota-cuerpo-texto{max-width:70ch;font-size:1.03rem;line-height:1.72}
.nota-cuerpo-texto p{margin:0 0 1.15em}
.nota-cuerpo-texto h2,.nota-cuerpo-texto h3{margin:1.7em 0 .6em;line-height:1.25}
.nota-cuerpo-texto h2{font-size:1.4rem}
.nota-cuerpo-texto h3{font-size:1.15rem}
.nota-cuerpo-texto a{color:var(--guinda-claro);text-underline-offset:3px}
.nota-cuerpo-texto ul,.nota-cuerpo-texto ol{margin:0 0 1.15em;padding-left:1.4em}
.nota-cuerpo-texto li{margin-bottom:.4em}
.nota-cuerpo-texto img{max-width:100%;height:auto;border-radius:var(--radio);margin:1.2em 0}
.nota-cuerpo-texto figure{margin:1.4em 0}
.nota-cuerpo-texto figcaption{font-size:.85rem;color:var(--suave);margin-top:.5em}
.nota-cuerpo-texto blockquote{
  margin:1.4em 0;padding:2px 0 2px 18px;border-left:3px solid var(--dorado);color:var(--suave);
}
.nota-cuerpo-texto table{width:100%;border-collapse:collapse;font-size:.92rem}
.nota-cuerpo-texto td,.nota-cuerpo-texto th{border:1px solid var(--borde);padding:9px 12px;text-align:left}

.liga-externa{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.liga-externa svg{width:15px;height:15px}

.nota-pie{margin-top:40px;padding-top:22px;border-top:1px solid var(--borde)}
.volver{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--guinda-claro);
}
.volver:hover{color:var(--guinda)}
.volver svg{width:16px;height:16px}

/* ---------- Paginación ---------- */
.paginacion{margin-top:38px}
.paginacion svg{width:16px;height:16px}
.paginacion a,.paginacion span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;margin:0 3px 6px 0;
  border:1px solid var(--borde);border-radius:8px;background:var(--superficie);
  color:var(--texto);text-decoration:none;font-size:.9rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.paginacion a:hover{border-color:var(--dorado);color:var(--guinda-claro)}
.paginacion [aria-current="page"] span,
.paginacion span[aria-current="page"]{background:var(--guinda);border-color:var(--guinda);color:#fff}
.paginacion [aria-disabled="true"] span{opacity:.4}
.paginacion nav > div:first-child{display:none}   /* el resumen "Mostrando x a y" duplica el conteo del encabezado */

/* ---------- Artículo a dos columnas ---------- */
/* El cuerpo se queda en su ancho de lectura y el costado se aprovecha, en vez
   de dejar media pantalla vacía en un contenedor de 1680 px. */
.articulo{
  display:grid;gap:48px;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;padding-bottom:62px;
}
.articulo-principal{min-width:0}
.nota-cuerpo-texto{max-width:72ch}
.nota-encabezado{max-width:72ch}

.articulo-lado{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.lado-caja{
  background:var(--superficie);border:1px solid var(--borde);
  border-top:3px solid var(--dorado);border-radius:var(--radio);padding:20px;
}
.lado-titulo{
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--guinda-claro);margin:0 0 14px;
}
.lado-nota{
  display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:start;
  text-decoration:none;padding:9px 0;border-top:1px solid var(--borde);
}
.lado-nota:first-of-type{border-top:0;padding-top:0}
.lado-mini{
  display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;
  background:var(--superficie-2);display:grid;place-items:center;color:var(--borde-fuerte);
}
.lado-mini img{width:100%;height:100%;object-fit:cover}
.lado-mini svg{width:24px;height:24px}
.lado-datos b{display:block;font-size:.83rem;font-weight:700;color:var(--tinta);line-height:1.32}
.lado-datos span{display:block;font-size:.7rem;color:var(--suave);margin-top:4px}
.lado-nota:hover .lado-datos b{color:var(--guinda-claro)}
.lado-liga{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--borde);
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--guinda-claro);text-decoration:none;
}
.lado-liga svg{width:15px;height:15px}
.lado-lista{list-style:none;margin:0;padding:0}
.lado-lista li{border-top:1px solid var(--borde)}
.lado-lista li:first-child{border-top:0}
.lado-lista a{display:block;padding:11px 0;font-size:.88rem;font-weight:600;color:var(--texto);text-decoration:none}
.lado-lista a:hover{color:var(--guinda-claro)}

/* ---------- Secciones documentales ---------- */
.sub-titulo{font-size:1.15rem;margin:34px 0 16px}
.vacio-msg{font-size:.98rem;color:var(--suave);padding:26px 0;max-width:60ch}
.vacio-msg a{color:var(--guinda-claro)}

.rejilla-videos{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-bottom:10px}
.tarjeta-video{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);padding:12px;transition:border-color .15s;
}
.tarjeta-video:hover{border-color:var(--dorado)}
.tarjeta-video-mini{position:relative;display:block;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--guinda)}
.tarjeta-video-mini img{width:100%;height:100%;object-fit:cover;display:block}
.tarjeta-video b{font-size:.9rem;color:var(--tinta);line-height:1.32}
.tarjeta-video > span:last-child{font-size:.74rem;color:var(--suave)}

/* ---------- Transparencia ---------- */
.grupos-transparencia{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.grupo-caja{
  background:var(--superficie);border:1px solid var(--borde);
  border-top:3px solid var(--dorado);border-radius:var(--radio);padding:22px;
}
.grupo-caja h3{font-size:1rem;margin:0 0 12px}
.grupo-caja ul{list-style:none;margin:0;padding:0}
.grupo-caja li{border-top:1px solid var(--borde)}
.grupo-caja li:first-child{border-top:0}
.grupo-caja li.sangria a{padding-left:16px;font-size:.85rem;color:var(--suave)}
.grupo-caja a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;font-size:.91rem;font-weight:600;color:var(--texto);text-decoration:none;
}
.grupo-caja a:hover{color:var(--guinda-claro)}
.grupo-caja svg{width:15px;height:15px;flex:none;color:var(--dorado)}

.aviso-caja{
  margin-top:34px;padding:28px;border-radius:var(--radio);
  background:var(--superficie-2);border:1px solid var(--borde);
}
.aviso-caja h3{font-size:1.15rem;margin:0 0 8px}
.aviso-caja p{margin:0 0 20px;color:var(--suave);max-width:70ch}
.aviso-ligas{display:flex;gap:12px;flex-wrap:wrap}
.btn-guinda,.btn-linea{
  display:inline-flex;align-items:center;padding:13px 22px;border-radius:var(--radio);
  font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
}
.btn-guinda{background:var(--guinda);color:#fff}
.btn-guinda:hover{background:var(--guinda-fuerte);color:#fff}
.btn-linea{border:2px solid var(--guinda);color:var(--guinda)}
.btn-linea:hover{background:var(--guinda);color:#fff}

@media (max-width:1080px){
  .articulo{grid-template-columns:1fr;gap:34px}
  .articulo-lado{position:static}
  .grupos-transparencia{grid-template-columns:repeat(2,1fr)}
  .rejilla-videos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .grupos-transparencia,.rejilla-videos{grid-template-columns:1fr}
}

/* La miga quedaba pegada al rótulo de la sección */
.miga{padding:0 0 22px}
section > .env > .miga:first-child{padding-top:0}

/* Los títulos llegan como los escribió cada área: unos en altas, otros en
   mixtas. En el cintillo, que va corriendo, esa mezcla se nota mucho. Se
   uniforma al pintarlo, no en la base: así el título original se conserva y
   la página de la nota lo muestra como se redactó. */
.cintillo-tren a{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:600;
  font-size:.8rem;
}

/* Mismo criterio en las tarjetas y en el índice de prensa: la mezcla de altas
   y mixtas también se nota ahí. El título en la base no cambia. */
.nota h3,
.lado-datos b{
  text-transform:uppercase;
  letter-spacing:.005em;
}
/* En altas, el interlineado apretado se lee peor: se le da aire */
.nota h3{line-height:1.4;font-size:.96rem}
.lado-datos b{line-height:1.4}

/* Con el contenedor ancho caben 5 columnas y los títulos quedaban en
   tiras de dos o tres palabras por renglón. Cuatro es el tope cómodo. */
.noticias{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));max-width:100%}
@media (min-width:1200px){
  .noticias{grid-template-columns:repeat(4,1fr)}
}

/* Encabezado de sección con su enlace al listado completo */
.enc-con-liga{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;max-width:100%;
}
.h2-liga{text-decoration:none;color:inherit}
.h2-liga:hover{color:var(--guinda-claro)}
.liga-seccion{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:11px 18px;border:2px solid var(--guinda);border-radius:var(--radio);
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--guinda);white-space:nowrap;transition:background .15s,color .15s;
}
.liga-seccion:hover{background:var(--guinda);color:#fff}
.liga-seccion svg{width:15px;height:15px}

/* ---------- Documento en texto ---------- */
.aviso-documento{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;margin:0 0 30px;flex-wrap:wrap;
  background:var(--superficie-2);border:1px solid var(--borde);
  border-left:3px solid var(--dorado);border-radius:var(--radio);
}
.aviso-documento-texto b{display:block;font-size:.92rem;color:var(--tinta)}
.aviso-documento-texto span{display:block;font-size:.83rem;color:var(--suave);margin-top:3px}

/* El texto del PDF ya viene rearmado en párrafos por TextoDocumento. Antes se
   volcaba en crudo con pre-wrap y salía cada oración partida en cuatro
   pedazos, tal como la cortaba el ancho de la hoja. */
/* Sin tope de ancho: la columna del artículo ya lo limita, y con 74ch quedaba
   media pantalla vacía a la derecha. Justificado y con partición de palabras,
   que es como se lee un documento oficial. */
.documento-texto{font-size:.97rem;line-height:1.75}
.documento-texto p{
  margin:0 0 16px;
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
}
.documento-texto h2{
  font-size:1.12rem;color:var(--guinda);margin:34px 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--dorado);letter-spacing:-.01em;
}
.documento-texto h2:first-child{margin-top:0}
/* Los apartados —PRIMERA, SEGUNDA, Artículo Tercero— ordenan la lectura */
.documento-texto h3{
  font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dorado-oscuro);margin:26px 0 10px;
}

.ficha{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.86rem}
.ficha dt{color:var(--suave)}
.ficha dd{margin:0;font-weight:600;color:var(--tinta);text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   Tratamiento editorial de la nota
   ============================================================ */
/* El cuerpo llega sin la apariencia de WordPress —se limpia al importar—,
   así que el diseño lo pone el portal y no el origen. */

.nota-cuerpo-texto{
  font-size:1.06rem;
  line-height:1.78;
  color:var(--texto);
}

/* La primera línea entra más grande: da entrada a la lectura */
.nota-cuerpo-texto > p:first-of-type{
  font-size:1.16rem;
  line-height:1.68;
  color:var(--tinta);
}

.nota-cuerpo-texto p{margin:0 0 1.3em}

/* Subtítulos con el hilo dorado de la identidad */
.nota-cuerpo-texto h2,
.nota-cuerpo-texto h3,
.nota-cuerpo-texto h4{
  margin:2.2em 0 .7em;
  line-height:1.28;
  letter-spacing:-.015em;
  position:relative;
  padding-top:.7em;
}
.nota-cuerpo-texto h2::before,
.nota-cuerpo-texto h3::before{
  content:"";position:absolute;top:0;left:0;
  width:44px;height:3px;background:var(--dorado);
}
.nota-cuerpo-texto h2{font-size:1.45rem}
.nota-cuerpo-texto h3{font-size:1.18rem}
.nota-cuerpo-texto h4{font-size:1.04rem}

/* Las imágenes respiran y se salen un poco del ancho de lectura */
.nota-cuerpo-texto img{
  display:block;width:100%;height:auto;
  border-radius:var(--radio);border:1px solid var(--borde);
  margin:1.9em 0;
}
.nota-cuerpo-texto figure{margin:1.9em 0}
.nota-cuerpo-texto figure img{margin:0}
.nota-cuerpo-texto figcaption{
  margin-top:.7em;font-size:.85rem;color:var(--suave);
  padding-left:14px;border-left:2px solid var(--dorado);
}

/* Citas: el texto se destaca sin recuadro ni fondo */
.nota-cuerpo-texto blockquote{
  margin:1.9em 0;padding:0 0 0 24px;
  border-left:3px solid var(--guinda);
  font-size:1.14rem;line-height:1.6;color:var(--tinta);
}
.nota-cuerpo-texto blockquote p:last-child{margin-bottom:0}

/* Listas con viñeta dorada, en vez del punto por defecto */
.nota-cuerpo-texto ul{list-style:none;padding-left:0;margin:0 0 1.3em}
.nota-cuerpo-texto ul li{position:relative;padding-left:26px;margin-bottom:.6em}
.nota-cuerpo-texto ul li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--dorado);
}
.nota-cuerpo-texto ol{padding-left:1.5em;margin:0 0 1.3em}
.nota-cuerpo-texto ol li{margin-bottom:.6em;padding-left:4px}
.nota-cuerpo-texto ol li::marker{color:var(--guinda-claro);font-weight:700}

.nota-cuerpo-texto a{
  color:var(--guinda-claro);
  text-decoration-color:var(--dorado);
  text-underline-offset:3px;
}
.nota-cuerpo-texto a:hover{color:var(--guinda)}

.nota-cuerpo-texto strong{color:var(--tinta);font-weight:700}

/* Tablas legibles, con encabezado institucional */
.nota-cuerpo-texto table{
  width:100%;border-collapse:collapse;margin:1.9em 0;font-size:.93rem;
  display:block;overflow-x:auto;
}
.nota-cuerpo-texto th{
  background:var(--guinda);color:#fff;text-align:left;
  padding:11px 14px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
}
.nota-cuerpo-texto td{padding:11px 14px;border-bottom:1px solid var(--borde)}
.nota-cuerpo-texto tr:nth-child(even) td{background:var(--superficie-2)}

/* Separador entre secciones del texto */
.nota-cuerpo-texto hr{
  border:0;height:1px;background:var(--borde);margin:2.4em 0;
}

/* El encabezado de la nota, con más presencia */
.nota-encabezado h1{letter-spacing:-.028em}
.nota-entrada{
  font-size:1.14rem;line-height:1.62;color:var(--suave);
  padding-left:18px;border-left:3px solid var(--dorado);
}

/* ============================================================
   Apego al Manual de Identidad Gráfica
   ============================================================
   El manual define tres tintas y nada más:
     Pantone 7421 C · #691C32 · guinda
     Pantone  465 C · #BC955C · dorado
     Pantone 7402 C · #ECD798 · arena

   Las variantes que se usan aquí (guinda-fuerte, guinda-claro) existen solo
   para estados —pasar el cursor, texto sobre fondo oscuro— y se derivan de la
   tinta oficial. No son colores nuevos ni deben usarse como identidad.

   Los neutros son grises cálidos sesgados al vino, no colores de marca.
   Los semánticos (verde, ámbar, rojo) se reservan para calidad del aire y
   estados; jamás sustituyen al guinda ni compiten con él.
   ============================================================ */

/* Las etiquetas de categoría se pintan con las tres tintas del manual, en
   rotación. Antes había tonos inventados que no existen en la identidad. */
.etiqueta{color:var(--guinda)}
.nota:nth-child(3n+2) .etiqueta{color:var(--dorado-oscuro)}
.nota:nth-child(3n+3) .etiqueta{color:var(--guinda-claro)}

:root{
  /* Dorado ajustado para texto: el 465 C puro no alcanza contraste sobre
     blanco, y la accesibilidad manda sobre la fidelidad exacta del tono. */
  --dorado-oscuro:#8A6B33;
}

/* Al limpiar el HTML se quitaron los anchos que traía WordPress, y sin ellos
   toda imagen se estiraba a la columna completa: una foto de rostro de 512 px
   salía a 900. Ahora cada imagen se muestra a su tamaño natural, con el ancho
   de la columna como tope, y centrada. */
.nota-cuerpo-texto img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:1.9em auto;
}

/* Las fotos de retrato (fichas curriculares) no necesitan más que esto */
.nota-cuerpo-texto p > img:only-child{max-width:min(420px,100%)}

/* ============================================================
   Credencial de verificación de servidores públicos
   ============================================================
   Se abre desde el QR de un gafete, en la calle y desde un celular. El
   veredicto —si esa persona es del Ayuntamiento hoy— tiene que leerse antes
   que cualquier otro dato. */

.verificacion{padding:34px 0 62px}
.verificacion .env{max-width:720px}

.credencial{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
}

.credencial-sello{
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;background:var(--guinda);color:#fff;
}
.credencial-sello svg{width:34px;height:34px;flex:none}
.credencial-sello b{display:block;font-size:1.05rem;letter-spacing:-.01em}
.credencial-sello span{display:block;font-size:.82rem;opacity:.88;margin-top:2px}

/* Una baja no puede parecerse a una acreditación válida */
.credencial-sello.alerta{background:#8A1414}
.credencial-baja{border-color:#8A1414;border-width:2px}

.credencial-cuerpo{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:26px 24px}
.credencial-foto{
  width:180px;height:180px;border-radius:var(--radio);overflow:hidden;
  border:2px solid var(--dorado);background:var(--superficie-2);
}
.credencial-foto img{width:100%;height:100%;object-fit:cover;display:block}
.credencial-baja .credencial-foto{border-color:#8A1414;filter:grayscale(1)}

.credencial-datos{min-width:0}
.credencial-numero{
  margin:2px 0 16px;font-size:1.9rem;font-weight:800;color:var(--tinta);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.credencial-detalle{font-size:.95rem;line-height:1.62}
.credencial-detalle p{margin:0 0 .8em}
.credencial-detalle strong{color:var(--tinta)}

.credencial-vigencia{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--borde);font-size:.88rem;
}
.credencial-vigencia dt{color:var(--suave)}
.credencial-vigencia dd{margin:0;font-weight:700;color:var(--tinta)}

.credencial-pie{
  padding:13px 24px;border-top:1px solid var(--borde);background:var(--superficie-2);
}
.credencial-pie p{margin:0;font-size:.78rem;color:var(--suave)}

.aviso-verificacion{
  margin-top:22px;padding:26px;border-radius:var(--radio);
  background:var(--superficie-2);border:1px solid var(--borde);
}
.aviso-verificacion.urgente{border-color:#8A1414;background:#FBEAE8}
.aviso-verificacion h2{font-size:1.1rem;margin:0 0 8px}
.aviso-verificacion p{margin:0 0 20px;color:var(--texto);font-size:.94rem}

@media (max-width:620px){
  .credencial-cuerpo{grid-template-columns:1fr;justify-items:center;text-align:center}
  .credencial-datos{text-align:left;width:100%}
  .credencial-sello{padding:16px 18px}
}

/* La credencial usa el ancho disponible en vez de irse toda hacia abajo:
   a 720 px el fundamento legal producía un scroll largo con 900 px vacíos
   a los costados. La foto y los datos quedan lado a lado. */
.verificacion .env{max-width:1080px}

.credencial-cuerpo{
  grid-template-columns:220px minmax(0,1fr);
  gap:32px;padding:30px 28px;align-items:start;
}
.credencial-foto{width:220px;height:220px}

.credencial-detalle p{margin:0 0 .55em}
.credencial-detalle p:first-child strong{font-size:1.22rem;color:var(--tinta)}
.credencial-detalle strong{font-weight:700}

/* Fundamento legal: disponible, pero sin estorbar */
.credencial-fundamento{border-top:1px solid var(--borde)}
.credencial-fundamento summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 28px;cursor:pointer;list-style:none;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--guinda-claro);
}
.credencial-fundamento summary::-webkit-details-marker{display:none}
.credencial-fundamento summary:hover{background:var(--superficie-2)}
.credencial-fundamento summary svg{width:16px;height:16px;transition:transform .18s;flex:none}
.credencial-fundamento[open] summary svg{transform:rotate(180deg)}
.fundamento-texto{
  padding:4px 28px 22px;font-size:.88rem;line-height:1.65;color:var(--suave);
  columns:2;column-gap:34px;
}
.fundamento-texto p{margin:0 0 .9em;break-inside:avoid}

@media (max-width:820px){
  .credencial-cuerpo{grid-template-columns:1fr;justify-items:center;gap:22px}
  .credencial-datos{width:100%}
  .fundamento-texto{columns:1;padding:4px 20px 20px}
  .credencial-fundamento summary{padding:14px 20px}
}

/* Jerarquía de los datos de la credencial. Llegan como h3 (nombre), p (cargo)
   y h5 (área), así que se les da tratamiento propio en vez de heredar el de
   los títulos de sección. */
.credencial-detalle h3{
  font-size:1.32rem;margin:0 0 4px;line-height:1.25;
  color:var(--tinta);letter-spacing:-.02em;
}
.credencial-detalle h3::before{content:none}
.credencial-detalle p{margin:0 0 12px;font-size:1rem;color:var(--texto)}
.credencial-detalle p strong{font-weight:700;color:var(--texto)}

/* El área o dirección de adscripción: es lo que permite saber si la persona
   tiene algo que hacer en el trámite que dice venir a atender. */
.credencial-detalle h5{
  margin:0;padding:11px 14px;
  font-size:.95rem;font-weight:700;line-height:1.4;
  color:var(--guinda);background:var(--superficie-2);
  border-left:3px solid var(--dorado);border-radius:0 6px 6px 0;
}
.credencial-detalle h5::before{content:none}

/* ---------- Catálogo de trámites del REMTYS ---------- */
.tramite-dep{font-size:.74rem;color:var(--guinda-claro);font-weight:700}
.tramite-datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tramite-costo,.tramite-tiempo{
  font-size:.7rem;padding:3px 8px;border-radius:4px;
  background:var(--superficie-2);color:var(--texto);font-weight:600;
}
.tramite-costo{border-left:2px solid var(--dorado)}

/* Presencial y en línea se distinguen: decir "en línea" a todo manda a la
   gente a buscar un sistema que no existe. */
.marca-presencial{
  margin-top:auto;font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);
  display:flex;align-items:center;gap:6px;
}
.marca-presencial::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--borde-fuerte)}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filtro{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:20px;text-decoration:none;
  border:1px solid var(--borde);background:var(--superficie);
  font-size:.8rem;font-weight:600;color:var(--texto);
}
.filtro:hover{border-color:var(--dorado)}
.filtro.activo{background:var(--guinda);border-color:var(--guinda);color:#fff}
.filtro span{
  font-size:.7rem;padding:1px 7px;border-radius:10px;
  background:var(--superficie-2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.filtro.activo span{background:rgba(255,255,255,.22);color:#fff}

.tramite-resumen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;margin:0 0 26px;
}
.tramite-resumen > div{background:var(--superficie);padding:16px 18px}
.tramite-resumen .rotulo{display:block;font-size:.63rem;margin-bottom:5px}
.tramite-resumen b{font-size:1.02rem;color:var(--tinta);line-height:1.35}

.btn-tramite{margin:0 0 26px}
.doc-suelto{
  border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--superficie);margin:22px 0 0;
}

/* ---------- Ver más ----------
   El catálogo entra de dieciséis en dieciséis: nadie recorre 266 tarjetas de
   una sentada, y cargarlas todas castiga a quien entra desde el teléfono. */
.mas-tramites{display:flex;justify-content:center;margin:28px 0 10px}
.btn-mas{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 28px;border-radius:9px;text-decoration:none;
  background:var(--guinda);color:#fff;font-weight:700;font-size:.9rem;
  transition:background .15s,opacity .15s;
}
.btn-mas:hover{background:var(--guinda-fuerte)}
.btn-mas span{
  font-size:.75rem;font-weight:600;opacity:.75;
  padding-left:10px;border-left:1px solid rgba(255,255,255,.28);
  font-variant-numeric:tabular-nums;
}
.btn-mas.cargando{opacity:.6;pointer-events:none}

/* La tarjeta recibe el foco al apilarse la tanda siguiente; sin esto el
   recuadro del navegador no se ve sobre el filo dorado. */
.tramite:focus-visible{outline:2px solid var(--guinda);outline-offset:3px}

/* ---------- Ficha de un trámite ----------
   Cada apartado del REMTYS es un <section>, y sin estilo propio heredaba el
   relleno de 72px de las secciones de portada: quedaban pantallas enteras en
   blanco entre "Pasos a seguir" y "Forma de pago". */
.bloque-tramite{padding:0;margin:0 0 30px;max-width:72ch}
.bloque-tramite h2{
  font-size:1.12rem;margin:0 0 12px;line-height:1.3;
  padding-bottom:9px;border-bottom:1px solid var(--borde);
}
.bloque-tramite p{margin:0;line-height:1.65}
.lista-tramite,.pasos-tramite{margin:0;padding-left:20px;line-height:1.65}
.lista-tramite li,.pasos-tramite li{margin-bottom:7px}
.lista-tramite li b{color:var(--tinta);margin-right:4px}
/* Las preguntas frecuentes traen pregunta y respuesta en el mismo renglón */
.lista-tramite li span{display:block}
.lista-tramite li span:first-child{font-weight:700;color:var(--tinta)}

/* El PDF cierra la ficha: la misma información, para llevarla impresa. */
.ficha-oficial{margin-top:38px;padding-top:26px;border-top:2px solid var(--dorado)}
.ficha-oficial h2{border-bottom:none;padding-bottom:0}
.ficha-oficial p{margin-bottom:16px;color:var(--suave)}
.tramite-ficha{
  font-size:.7rem;padding:3px 8px;border-radius:4px;
  background:transparent;border:1px dashed var(--borde-fuerte);
  color:var(--suave);font-weight:600;
}

/* ---------- Buscador del catálogo con dependencia ---------- */
.buscador-tramites{
  display:grid;gap:10px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(230px,300px) auto;
}
.buscador-tramites select{
  width:100%;padding:14px 16px;
  border:1px solid var(--borde);border-radius:9px;
  background:var(--superficie);color:var(--tinta);
  font-family:inherit;font-size:1rem;font-weight:600;
}
.buscador-tramites select:focus{border-color:var(--guinda);outline:none}
@media (max-width:900px){
  .buscador-tramites{grid-template-columns:1fr}
}

/* ---------- La ficha en una ventana sobre la lista ----------
   El catálogo tiene 266 trámites: abrir cada uno en su propia página hacía
   perder el lugar y obligaba a volver atrás una y otra vez. La dirección
   sigue existiendo —se comparte, la indexan los buscadores— pero desde el
   catálogo la ficha se lee encima de la lista. */
body.sin-scroll{overflow:hidden}
.modal-tramite{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-tramite[hidden]{display:none}
.modal-fondo{position:absolute;inset:0;background:rgba(35,12,20,.62)}
.modal-caja{
  position:relative;display:flex;flex-direction:column;
  width:min(100%,880px);max-height:min(90vh,900px);
  background:var(--superficie);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 70px rgba(35,12,20,.4);
}
.modal-cabecera{
  display:flex;align-items:center;gap:16px;flex:none;
  padding:18px 22px;background:var(--guinda);color:#fff;
  border-bottom:3px solid var(--dorado);
}
.modal-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:11px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:var(--arena);
}
.modal-ico svg{width:24px;height:24px}
.modal-titulos{display:flex;flex-direction:column;gap:3px;min-width:0}
.modal-dep{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--arena);
}
.modal-titulos b{font-size:1.22rem;font-weight:800;line-height:1.25;letter-spacing:-.015em}
.modal-cerrar{
  margin-left:auto;flex:none;cursor:pointer;
  width:38px;height:38px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:#fff;
}
.modal-cerrar:hover{background:rgba(255,255,255,.15)}
.modal-cerrar svg{width:20px;height:20px}
.modal-cuerpo{flex:1 1 auto;overflow-y:auto;padding:24px 26px}
.modal-cuerpo:focus-visible{outline:none}
.modal-cargando{color:var(--suave);margin:0;padding:30px 0;text-align:center}
.modal-pie{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:14px 22px;border-top:1px solid var(--borde);background:var(--superficie-2);
}
.modal-completa{font-size:.82rem;font-weight:600;color:var(--guinda)}
.btn-dorado{
  cursor:pointer;font-family:inherit;
  padding:11px 24px;border-radius:8px;border:none;
  background:var(--dorado);color:#fff;font-weight:700;font-size:.88rem;
}
.btn-dorado:hover{background:var(--dorado-oscuro)}
@media (max-width:640px){
  .modal-tramite{padding:0}
  .modal-caja{max-height:100vh;height:100%;border-radius:0}
}

/* ---------- Contenido de la ficha ----------
   Se usa igual dentro de la ventana y en la página propia del trámite. */
.ficha-bloque{padding:0;margin:0 0 26px;max-width:74ch}
.ficha-bloque:last-child{margin-bottom:0}
.ficha-bloque h3{
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--guinda);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--borde);
}
.ficha-ico{display:inline-flex;flex:none;color:var(--dorado)}
.ficha-ico svg{width:18px;height:18px}
.ficha-bloque p{margin:0;line-height:1.65}
.ficha-lista,.ficha-pasos{margin:0;padding-left:22px;line-height:1.65}
.ficha-lista li,.ficha-pasos li{margin-bottom:7px}
.ficha-lista li b{color:var(--tinta);margin-right:4px}
.ficha-legal p,.ficha-legal li{font-style:italic;color:var(--suave)}

/* El tablero: lo que la gente busca antes de leer nada más */
.ficha-tablero{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  padding:16px;margin:0 0 26px;
  background:var(--superficie-2);border-radius:11px;
}
.ficha-dato{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 14px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:9px;
}
.ficha-dato-ico{display:inline-flex;flex:none;color:var(--dorado);margin-top:1px}
.ficha-dato-ico svg{width:20px;height:20px}
.ficha-dato .rotulo{display:block;font-size:.63rem;margin-bottom:3px}
.ficha-dato b{font-size:.88rem;font-weight:700;line-height:1.35;color:var(--tinta)}

/* Preguntas frecuentes: pregunta y respuesta, con su propio recuadro */
.ficha-faq{
  padding:18px 20px;background:var(--superficie-2);
  border-left:3px solid var(--dorado);border-radius:0 10px 10px 0;
}
.ficha-faq h3{border-bottom-color:var(--borde-fuerte)}
.ficha-faq dl{margin:0}
.ficha-faq dt{font-weight:700;color:var(--tinta);margin-top:14px}
.ficha-faq dt:first-of-type{margin-top:0}
.ficha-faq dd{margin:4px 0 0;font-style:italic;color:var(--suave);line-height:1.6}
.ficha-faq dd + dt{border-top:1px dashed var(--borde-fuerte);padding-top:14px}

/* El PDF cierra la ficha: la misma información, para llevarla impresa. */
.ficha-oficial{margin-top:32px;padding-top:24px;border-top:2px solid var(--dorado)}
.ficha-oficial p{margin-bottom:14px;color:var(--suave)}

/* ---------- Mapa de datos abiertos ---------- */
.mapa-capas{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.capa{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 15px;border-radius:20px;
  border:1px solid var(--borde);background:var(--superficie);
  font-size:.83rem;font-weight:600;color:var(--texto);
}
.capa:hover{border-color:var(--dorado)}
.capa input{accent-color:var(--guinda);width:16px;height:16px;cursor:pointer}
.capa-punto{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.capa-fallida{opacity:.5;cursor:not-allowed}

.mapa-lienzo{
  height:min(66vh,620px);width:100%;
  border:1px solid var(--borde);border-radius:12px;
  background:var(--superficie-2);
}
/* Leaflet pinta sus controles con su propia tipografía; se alinean con la del portal */
.mapa-lienzo .leaflet-container{font-family:inherit}
.pop{display:flex;flex-direction:column;gap:5px;font-size:.83rem;line-height:1.45}
.pop b{color:var(--guinda);font-size:.92rem}
.pop-dato i{
  font-style:normal;font-weight:700;color:var(--suave);
  font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  display:block;
}
.mapa-fuente{margin:12px 0 0;font-size:.76rem;color:var(--suave)}

.mapa-aviso{
  margin-top:30px;padding:20px 22px;
  background:var(--superficie-2);border-left:3px solid var(--dorado);border-radius:0 10px 10px 0;
}
.mapa-aviso h3{margin:0 0 8px;font-size:1rem;color:var(--guinda)}
.mapa-aviso p{margin:0 0 10px;font-size:.87rem;line-height:1.6;color:var(--suave)}
.mapa-aviso ul{margin:0;padding-left:20px;font-size:.87rem;line-height:1.7}
/* La precisión del punto, dicha en su ficha */
.pop-precision{
  display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--borde);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.pop-cruce{color:var(--bien)}
.pop-calle,.pop-colonia{color:var(--dorado-oscuro)}
.mapa-leyenda{
  display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 0;
  font-size:.78rem;color:var(--suave);
}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:7px}
.lp{width:11px;height:11px;border-radius:50%;background:var(--guinda);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.lp-calle{opacity:.7}
.lp-colonia{opacity:.45}

/* ---------- Mapita de la ficha de trámite ---------- */
.mini-mapa{
  height:260px;width:100%;margin:4px 0 10px;
  border:1px solid var(--borde);border-radius:10px;
  background:var(--superficie-2);
}
.ficha-domicilio{margin:0 0 12px;line-height:1.6}
.ficha-precision{margin:0 0 12px;font-size:.78rem;color:var(--suave)}
.ficha-comollegar{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.84rem;font-weight:700;color:var(--guinda);text-decoration:none;
}
.ficha-comollegar:hover{text-decoration:underline;text-underline-offset:3px}
.ficha-comollegar svg{width:15px;height:15px}

/* Pista de la rueda en el mapa grande */
.mapa-pista{
  background:rgba(255,255,255,.92);color:var(--suave);
  padding:5px 10px;border-radius:6px;font-size:.72rem;font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.mapa-activo .mapa-pista{display:none}
/* El recuadro sin encabezado: cuando sólo lleva la explicación */
.mapa-aviso p:last-child{margin-bottom:0}

/* ---------- Buscador del Cabildo: texto, apartado y año ---------- */
.buscador-cabildo{
  display:grid;gap:10px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(210px,260px) minmax(150px,190px) auto;
}
.buscador-cabildo select{
  width:100%;padding:14px 16px;
  border:1px solid var(--borde);border-radius:9px;
  background:var(--superficie);color:var(--tinta);
  font-family:inherit;font-size:1rem;font-weight:600;
}
.buscador-cabildo select:focus{border-color:var(--guinda);outline:none}
@media (max-width:980px){
  .buscador-cabildo{grid-template-columns:1fr 1fr}
  .buscador-cabildo input{grid-column:1/-1}
}
@media (max-width:600px){
  .buscador-cabildo{grid-template-columns:1fr}
}

/* El apartado al que pertenece cada documento, en la lista completa */
.doc-seccion{
  display:inline-block;margin-right:9px;padding:2px 8px;border-radius:4px;
  background:var(--arena);color:var(--guinda);
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- Directorio de la administración pública ---------- */
.rejilla-directorio{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.titular{
  display:flex;align-items:flex-start;gap:15px;
  padding:18px;background:var(--superficie);
  border:1px solid var(--borde);border-left:3px solid var(--dorado);
  border-radius:0 10px 10px 0;
}
.titular-foto{
  flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--arena);
}
.titular-foto img{width:100%;height:100%;object-fit:cover;object-position:top center}
.titular-iniciales{font-size:1.15rem;font-weight:800;color:var(--guinda);letter-spacing:.02em}
.titular-datos{display:flex;flex-direction:column;gap:3px;min-width:0}
.titular-datos b{font-size:.98rem;color:var(--tinta);line-height:1.3}
.titular-dep{font-size:.8rem;font-weight:700;color:var(--dorado-oscuro);line-height:1.35}
.titular-cargo{font-size:.79rem;color:var(--suave);line-height:1.4}
.titular-tel{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  font-size:.82rem;font-weight:600;color:var(--guinda);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.titular-tel:hover{text-decoration:underline;text-underline-offset:3px}
.titular-tel svg{width:14px;height:14px;flex:none}

/* El organigrama es un cuadro de 2304 px: se ve completo y se abre en grande */
.organigrama{display:block;position:relative;text-decoration:none}
.organigrama img{
  width:100%;height:auto;display:block;
  border:1px solid var(--borde);border-radius:12px;background:#fff;
}
.organigrama-pie{
  position:absolute;right:14px;bottom:14px;
  padding:8px 16px;border-radius:8px;
  background:var(--guinda);color:#fff;font-size:.82rem;font-weight:700;
}
.organigrama:hover .organigrama-pie{background:var(--guinda-fuerte)}

/* ---------- SEVAC: armonización contable por trimestre ---------- */
.buscador-sevac{
  display:grid;gap:10px;align-items:stretch;
  grid-template-columns:minmax(120px,180px) minmax(200px,280px);
  justify-content:start;
}
.buscador-sevac select{
  width:100%;padding:14px 16px;
  border:1px solid var(--borde);border-radius:9px;
  background:var(--superficie);color:var(--tinta);
  font-family:inherit;font-size:1rem;font-weight:600;
}
.buscador-sevac select:focus{border-color:var(--guinda);outline:none}

.sevac-seccion{padding:0;margin:0 0 34px}
.sevac-seccion h3{
  display:flex;align-items:center;gap:10px;
  font-size:1rem;color:var(--tinta);margin:0 0 14px;
  padding-bottom:9px;border-bottom:2px solid var(--dorado);
}
/* La letra de la sección es la clave con la que el SEVAC la nombra */
.sevac-letra{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;flex:none;
  background:var(--guinda);color:#fff;font-size:.8rem;font-weight:800;
}
.sevac-cuantos{
  margin-left:auto;font-size:.72rem;font-weight:700;
  color:var(--suave);font-variant-numeric:tabular-nums;
}
.sevac-clave{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;
  color:var(--dorado-oscuro);font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .buscador-sevac{grid-template-columns:1fr}
}

/* ---------- Pestañas de sección en los apartados de transparencia ---------- */
.sec-pestanas{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;
  padding-bottom:14px;border-bottom:1px solid var(--borde);
}
.sec-pestana{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 16px;border-radius:9px;
  border:1px solid var(--borde);background:var(--superficie);
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--texto);
  transition:border-color .15s,background .15s,color .15s;
}
.sec-pestana:hover{border-color:var(--dorado)}
.sec-pestana.activa{background:var(--guinda);border-color:var(--guinda);color:#fff}
.sec-pestana.activa .sevac-letra{background:rgba(255,255,255,.2)}
.sec-pestana-cuantos{
  font-size:.7rem;padding:2px 8px;border-radius:10px;
  background:var(--superficie-2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.sec-pestana.activa .sec-pestana-cuantos{background:rgba(255,255,255,.22);color:#fff}
/* Con pestañas el encabezado de la sección repite lo que ya dice la pestaña */
.sec-pestanas ~ .sevac-seccion > h3{display:none}

/* ---------- Buscador dentro del apartado ---------- */
.buscar-docs{position:relative;margin:14px 0 4px;max-width:520px}
.buscar-docs label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--suave);margin-bottom:6px;
}
.buscar-docs input{
  width:100%;padding:12px 15px;
  border:1px solid var(--borde);border-radius:9px;
  background:var(--superficie);color:var(--tinta);
  font-family:inherit;font-size:.95rem;
}
.buscar-docs input:focus{border-color:var(--guinda);outline:none}
.buscar-docs-cuenta{
  display:block;margin-top:7px;font-size:.78rem;font-weight:600;color:var(--guinda);
}

/* ---------- Dos niveles: los títulos de la Ley y, dentro, sus secciones ----------
   El primer nivel manda sobre el segundo, así que se distingue: pestañas
   más grandes, con línea dorada bajo la activa en lugar de relleno. Sin
   eso, dos tiras de botones idénticos una encima de otra se leen como una
   sola y nadie entiende cuál cambia qué. */
.sec-pestanas-titulo{
  gap:0;padding:0;margin:22px 0 20px;
  border-bottom:2px solid var(--borde);
}
.sec-pestanas-titulo .sec-pestana{
  border:none;border-radius:0;background:none;
  padding:12px 20px;margin-bottom:-2px;
  font-size:.95rem;font-weight:700;color:var(--suave);
  border-bottom:2px solid transparent;
}
.sec-pestanas-titulo .sec-pestana:hover{color:var(--tinta);border-bottom-color:var(--dorado)}
.sec-pestanas-titulo .sec-pestana.activa{
  background:none;color:var(--guinda);border-bottom-color:var(--guinda);
}
.sec-pestanas-titulo .sec-pestana.activa .sec-pestana-cuantos{
  background:var(--guinda);color:#fff;
}
@media (max-width:520px){
  .sec-pestanas-titulo .sec-pestana{padding:12px 12px;font-size:.85rem}
}

/* ---------- Qué es este apartado ----------
   Los fondos van a la vista porque sin saber qué es FAISMUN la lista de
   PDF no dice nada. El resto de la explicación va plegada: sirve la
   primera vez y estorba las siguientes. */
.fichas-apartado{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin:0 0 18px;
}
.ficha-apartado{
  padding:16px 18px;border-radius:11px;
  background:var(--superficie-2);border-left:3px solid var(--dorado);
}
.ficha-apartado b{
  display:block;font-size:.95rem;letter-spacing:.04em;
  color:var(--guinda);margin-bottom:6px;
}
.ficha-apartado p{margin:0;font-size:.92rem;color:var(--texto);line-height:1.55}

.que-es{
  margin:0 0 24px;border:1px solid var(--borde);border-radius:11px;
  background:var(--superficie);
}
.que-es summary{
  cursor:pointer;padding:14px 18px;
  font-size:.92rem;font-weight:700;color:var(--tinta);
}
.que-es summary:hover{color:var(--guinda)}
.que-es[open] summary{border-bottom:1px solid var(--borde)}
.que-es dl{margin:0;padding:16px 18px 18px}
.que-es dt{font-size:.9rem;font-weight:700;color:var(--tinta);margin-top:14px}
.que-es dt:first-child{margin-top:0}
.que-es dd{margin:3px 0 0;font-size:.9rem;color:var(--texto);line-height:1.55}

/* ---------- Sujeto obligado ----------
   Va antes que el año porque manda sobre todo lo demás: cambiar de DIF a
   Ayuntamiento cambia qué años existen. Por eso son enlaces y no pestañas
   de JavaScript: recargan la página con otro contenido. */
.sujetos{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;
}
.sujetos .sujeto{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:9px;text-decoration:none;
  border:1px solid var(--borde);background:var(--superficie);
  font-size:.88rem;font-weight:700;color:var(--texto);
  transition:border-color .15s,background .15s,color .15s;
}
.sujetos .sujeto:hover{border-color:var(--dorado)}
.sujetos .sujeto.activo{background:var(--guinda);border-color:var(--guinda);color:#fff}
.sujeto-cuantos{
  font-size:.7rem;padding:2px 8px;border-radius:10px;
  background:var(--superficie-2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.sujetos .sujeto.activo .sujeto-cuantos{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Programa Anual de Evaluación ----------
   El PAE se revisa por ejercicio completo, no documento por documento: se
   mira si el paquete está entero. Por eso el año manda en la página y la
   numeración corre a lo largo de todo el ejercicio. */
.pae{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:0;
  border:1px solid var(--borde);
  border-radius:14px;
  overflow:hidden;
  background:var(--superficie);
}

.pae-anio{
  display:flex;flex-direction:column;
  padding:34px 26px;
  background:var(--guinda);color:#fff;
}
.pae-siglas{
  font-size:.78rem;font-weight:800;letter-spacing:.24em;
  color:var(--dorado);
}
.pae-cifra{
  font-size:3.1rem;font-weight:800;line-height:1;
  letter-spacing:-.02em;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.pae-otros{
  list-style:none;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.22);
}
.pae-otros li + li{margin-top:2px}
.pae-otros a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:7px;text-decoration:none;
  color:rgba(255,255,255,.72);
  font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background .15s,color .15s;
}
.pae-otros a:hover{background:rgba(255,255,255,.12);color:#fff}
.pae-otros a.activo{background:rgba(255,255,255,.16);color:#fff}
.pae-otros a span{
  font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px;
  background:rgba(0,0,0,.22);color:rgba(255,255,255,.85);
}
.pae-cuantos{
  margin-top:auto;padding-top:26px;
  font-size:.76rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.62);
}

.pae-lista{padding:28px 30px 30px}

.pae-etapa{
  display:flex;align-items:center;gap:11px;
  margin:30px 0 12px;
  font-size:.74rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--suave);
}
.pae-lista > .pae-etapa:first-child{margin-top:0}
.pae-paso{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--dorado);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:0;
}

.pae-docs{list-style:none;margin:0;padding:0}
.pae-docs a{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:baseline;gap:14px;
  padding:12px 14px;border-radius:9px;
  text-decoration:none;color:var(--tinta);
  border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
.pae-docs a:hover{background:var(--superficie-2);border-color:var(--borde)}
.pae-num{
  font-size:.92rem;font-weight:800;color:var(--dorado-oscuro);
  font-variant-numeric:tabular-nums;text-align:right;
}
.pae-docs a:hover .pae-num{color:var(--guinda)}
.pae-nombre{font-size:.97rem;font-weight:600;line-height:1.45}
.pae-peso{
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--suave);white-space:nowrap;font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  .pae{grid-template-columns:1fr}
  .pae-anio{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px;
    padding:22px 20px;
  }
  .pae-cifra{font-size:2.2rem}
  .pae-otros{
    margin:0;padding:0;border-top:none;border-left:1px solid rgba(255,255,255,.22);
    padding-left:18px;display:flex;gap:4px;flex-wrap:wrap;
  }
  .pae-otros li + li{margin-top:0}
  .pae-cuantos{margin:0 0 0 auto;padding:0}
  .pae-lista{padding:22px 18px 24px}
  .pae-docs a{grid-template-columns:26px minmax(0,1fr);gap:10px}
  .pae-peso{grid-column:2;font-size:.7rem}
}

/* ---------- Catálogo de normatividad ----------
   La familia a un lado y el catálogo al otro: es la forma que ya tenía el
   portal anterior y la que la gente reconoce. Lo que cambia es que la
   familia filtra de verdad y que el documento se descarga. */
.normativa{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.normativa-familias{
  display:flex;flex-direction:column;gap:10px;
  position:sticky;top:20px;
}
.normativa-familias .familia{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-radius:10px;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borde);
  border-left:3px solid var(--borde);
  color:var(--tinta);font-size:.95rem;font-weight:700;
  transition:border-color .15s,background .15s,color .15s;
}
.normativa-familias .familia:hover{border-left-color:var(--dorado)}
.normativa-familias .familia.activa{
  background:var(--guinda);border-color:var(--guinda);
  border-left-color:var(--dorado);color:#fff;
}
.familia-cuantas{
  font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:10px;
  background:var(--superficie-2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.normativa-familias .familia.activa .familia-cuantas{background:rgba(255,255,255,.22);color:#fff}

.normativa-lista > h3{
  font-size:1.5rem;font-weight:800;letter-spacing:-.01em;
  color:var(--guinda);margin:0 0 8px;text-wrap:balance;
}
.normativa-entrada{
  max-width:70ch;margin:0 0 6px;color:var(--texto);
}

.norma{
  border:1px solid var(--borde);border-radius:10px;
  background:var(--superficie);margin-bottom:9px;
}
.norma > summary{
  cursor:pointer;list-style:none;
  padding:15px 20px 15px 44px;position:relative;
  font-size:.98rem;font-weight:600;line-height:1.45;color:var(--tinta);
}
.norma > summary::-webkit-details-marker{display:none}
.norma > summary::before{
  content:"";position:absolute;left:20px;top:1.35em;
  width:9px;height:9px;flex:none;
  border-right:2px solid var(--dorado-oscuro);
  border-bottom:2px solid var(--dorado-oscuro);
  transform:translateY(-50%) rotate(-45deg);
  transition:transform .18s;
}
.norma[open] > summary::before{transform:translateY(-50%) rotate(45deg)}
.norma > summary:hover{color:var(--guinda)}
.norma[open] > summary{
  color:var(--guinda);
  border-bottom:1px solid var(--borde);
}

.norma-ficha{padding:18px 20px 20px}
.norma-objeto{
  margin:0 0 16px;max-width:74ch;
  font-size:.94rem;line-height:1.6;color:var(--texto);
}
.norma-objeto b{color:var(--tinta)}

.norma-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px 20px;margin:0 0 18px;
  padding:14px 16px;border-radius:9px;background:var(--superficie-2);
}
.norma-datos dt{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);
}
.norma-datos dd{
  margin:3px 0 0;font-size:.92rem;font-weight:600;color:var(--tinta);
}

.norma-bajar{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:9px;text-decoration:none;
  background:var(--guinda);color:#fff;
  font-size:.88rem;font-weight:700;
  transition:background .15s;
}
.norma-bajar:hover{background:var(--guinda-fuerte)}
.norma-bajar svg{width:17px;height:17px}
.norma-bajar span{
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.75);
}

@media (max-width:820px){
  .normativa{grid-template-columns:1fr;gap:20px}
  .normativa-familias{
    position:static;flex-direction:row;flex-wrap:wrap;
  }
  .normativa-familias .familia{padding:11px 15px;font-size:.88rem}
}

/* ---------- Gacetas: línea de tiempo ----------
   El eje es el tiempo porque una gaceta se ubica por cuándo se publicó, no
   por un número que nadie memoriza. El mes queda a la izquierda como hito y
   las gacetas de ese mes cuelgan de él. */
.gacetas-buscar{margin:0 0 20px;max-width:640px}
.gacetas-buscar label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--suave);margin-bottom:7px;
}
.gacetas-buscar > div{display:flex;gap:9px}
.gacetas-buscar input{
  flex:1;padding:13px 16px;border:1px solid var(--borde);border-radius:9px;
  background:var(--superficie);color:var(--tinta);font-family:inherit;font-size:1rem;
}
.gacetas-buscar input:focus{border-color:var(--guinda);outline:none}
.gacetas-buscar button{
  padding:13px 22px;border:none;border-radius:9px;cursor:pointer;
  background:var(--guinda);color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;
}
.gacetas-buscar button:hover{background:var(--guinda-fuerte)}
.gacetas-pista{margin:8px 0 0;font-size:.78rem;color:var(--suave)}

.gacetas-filtros{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between;margin:0 0 26px;
  padding-bottom:16px;border-bottom:1px solid var(--borde);
}
.gacetas-clase{display:flex;flex-wrap:wrap;gap:8px}
.gacetas-clase a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:8px;text-decoration:none;
  border:1px solid var(--borde);background:var(--superficie);
  font-size:.85rem;font-weight:600;color:var(--texto);
}
.gacetas-clase a:hover{border-color:var(--dorado)}
.gacetas-clase a.activo{background:var(--guinda);border-color:var(--guinda);color:#fff}
.gacetas-clase a span{
  font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:9px;
  background:var(--superficie-2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.gacetas-clase a.activo span{background:rgba(255,255,255,.22);color:#fff}

.gacetas-anios{display:flex;flex-wrap:wrap;gap:4px}
.gacetas-anios a{
  padding:8px 13px;border-radius:7px;text-decoration:none;
  font-size:.88rem;font-weight:700;color:var(--suave);
  font-variant-numeric:tabular-nums;
}
.gacetas-anios a:hover{background:var(--superficie-2);color:var(--tinta)}
.gacetas-anios a.activo{background:var(--dorado);color:#fff}

/* ---- la línea ---- */
.linea{position:relative;padding-left:6px}
.linea-tramo{
  display:grid;grid-template-columns:132px minmax(0,1fr);
  gap:0 26px;align-items:start;
}
.linea-hito{
  position:sticky;top:16px;
  display:flex;flex-direction:column;
  padding:14px 0 30px;
}
.linea-mes{
  font-size:1rem;font-weight:800;color:var(--guinda);line-height:1.1;
}
.linea-anio{
  font-size:.78rem;font-weight:700;color:var(--suave);
  font-variant-numeric:tabular-nums;margin-top:1px;
}
.linea-cuantas{
  margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dorado-oscuro);
}

.linea-gacetas{
  list-style:none;margin:0;padding:0 0 22px 26px;
  border-left:2px solid var(--borde);
}
.linea-gacetas li{position:relative}
.linea-gacetas li + li{margin-top:8px}
.linea-gacetas a{
  display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:15px;align-items:center;
  padding:13px 16px;border-radius:10px;text-decoration:none;
  border:1px solid var(--borde);background:var(--superficie);
  transition:border-color .15s,background .15s;
}
.linea-gacetas a:hover{border-color:var(--dorado);background:var(--superficie-2)}

/* El número va en un sello, que es como se cita una gaceta */
.sello{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--guinda);color:#fff;
  font-variant-numeric:tabular-nums;
}
.sello b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.sello-edicto{background:var(--dorado-oscuro)}

.gaceta-cuerpo{display:block;min-width:0}
.gaceta-cuerpo > b{
  display:block;font-size:.97rem;font-weight:600;line-height:1.4;
  color:var(--tinta);
}
.gaceta-pie{
  display:block;margin-top:4px;
  font-size:.76rem;color:var(--suave);font-variant-numeric:tabular-nums;
}
.gaceta-pie em{font-style:normal;font-weight:700;color:var(--dorado-oscuro)}

@media (max-width:720px){
  .linea-tramo{grid-template-columns:1fr;gap:0}
  .linea-hito{
    position:static;flex-direction:row;align-items:baseline;gap:8px;
    padding:18px 0 10px;
  }
  .linea-cuantas{margin:0 0 0 auto}
  .linea-gacetas{padding-left:16px}
  .gacetas-filtros{flex-direction:column;align-items:flex-start}
}

/* ---------- Avisos de privacidad ----------
   La dependencia va en banda, como pidió el área. Lo que se le añade: sólo
   se dibuja la versión que existe, cada botón dice cuánto pesa, y la banda
   no se come media pantalla. */
.dep{margin:0 0 22px}
.dep-banda{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0;padding:13px 20px;
  background:var(--guinda);color:#fff;
  border-radius:10px 10px 0 0;
  font-size:1rem;font-weight:700;letter-spacing:.01em;
}
.dep-banda span{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:rgba(255,255,255,.72);white-space:nowrap;
}

.dep-tramites{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--borde);border-top:none;border-radius:0 0 10px 10px;
  background:var(--superficie);overflow:hidden;
}
.dep-tramites li{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 20px;
}
.dep-tramites li + li{border-top:1px solid var(--borde)}
.dep-tramites li:hover{background:var(--superficie-2)}

.tramite-nombre{font-size:.95rem;font-weight:600;color:var(--tinta);line-height:1.45}
.tramite-versiones{display:flex;gap:8px;flex:none}

.version{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 14px;border-radius:8px;text-decoration:none;
  border:1px solid var(--borde);background:var(--superficie);
  font-size:.82rem;font-weight:700;color:var(--texto);
  transition:border-color .15s,background .15s,color .15s;
  white-space:nowrap;
}
.version:hover{border-color:var(--dorado)}
.version span{font-size:.68rem;font-weight:600;color:var(--suave);font-variant-numeric:tabular-nums}
/* La integral es la completa: se marca como la principal */
.version-integral{background:var(--guinda);border-color:var(--guinda);color:#fff}
.version-integral:hover{background:var(--guinda-fuerte);border-color:var(--guinda-fuerte)}
.version-integral span{color:rgba(255,255,255,.72)}

@media (max-width:640px){
  .dep-tramites li{flex-direction:column;align-items:flex-start;gap:10px}
  .dep-banda{flex-direction:column;gap:2px}
}