/* ============================================================
   Perla del Sinú ESP SAS — Sitio Web Institucional
   Estructura tipo portal de gobierno (referencia: medellin.gov.co)
   Marca: verde institucional #004831 · blanco · gris · acento lima.
   Tipografía Inter · iconos planos · carrusel full-bleed.
   ============================================================ */

:root {
  /* ── NEUTROS ──────────────────────────────────────────── */
  --bg:#FFFFFF; --bg-soft:#F4F6F5; --bg-soft-2:#EDF1EF; --surface:#FFFFFF;
  --ink:#1A2B24; --ink-2:#33453D; --ink-3:#5A6B63; --ink-4:#849089; --ink-5:#B4BCB7;
  --gris-900:#1A2B24; --gris-800:#33453D; --gris-700:#5A6B63; --gris-600:#727C77;
  --gris-500:#849089; --gris-400:#A9B1AC; --gris-300:#CDD3CF; --gris-200:#E3E7E4;
  --gris-100:#EFF2F0; --gris-50:#F7F9F8;

  /* ── MARCA ────────────────────────────────────────────── */
  --lima:#C6F24E; --lima-soft:#E8FA9E; --lima-deep:#7C9A16;
  --verde-900:#002A1B; --verde-800:#004831; --verde-700:#015C3F; --verde-600:#007A52;
  --verde-500:#00925F; --verde-400:#00AD76; --verde-300:#3FC397; --verde-100:#54BF02; --verde-50:#E9F5EF;
  --azul-700:#006B9A; --azul-500:#0098DA; --azul-50:#E9F4FA;
  --ambar-600:#C7860E; --ambar-500:#FFA00A; --ambar-50:#FBF0DC;
  --naranja-500:#FF600A;

  /* ── SEMÁNTICOS ───────────────────────────────────────── */
  --primary:var(--verde-800); --primary-hover:var(--verde-700); --primary-active:var(--verde-900);
  --accent:var(--verde-400);
  --success:#2D8F5A; --success-bg:#E7F1EA; --success-ink:#1B5A39;
  --warning:#B47A1E; --warning-bg:#F5EBD3; --warning-ink:#6E4A12;
  --error:#B0382F; --error-bg:#F4DEDB; --error-ink:#6E211B;

  /* ── TIPO ─────────────────────────────────────────────── */
  --font-heading:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.9375rem; --text-lg:1.0625rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.375rem; --text-5xl:3rem; --text-6xl:3.75rem;

  /* ── ESPACIO ──────────────────────────────────────────── */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:6rem;

  /* ── RADIO ────────────────────────────────────────────── */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-2xl:24px; --r-full:999px;

  /* ── SOMBRAS ──────────────────────────────────────────── */
  --sh-xs:0 1px 2px rgba(16,40,30,.05);
  --sh-sm:0 2px 8px rgba(16,40,30,.06);
  --sh-md:0 8px 24px rgba(16,40,30,.10);
  --sh-lg:0 18px 48px rgba(16,40,30,.16);

  --topbar-h:38px; --header-h:76px; --maxw:1240px;
  --ease:cubic-bezier(.22,.7,.28,1); --dur:220ms;
}

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
  color:var(--ink-3);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
img,svg{display:block;max-width:100%}
a{color:var(--verde-700);text-decoration:none;transition:color var(--dur)}
a:hover{color:var(--verde-800)}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--font-heading);color:var(--ink);line-height:1.12;font-weight:800;letter-spacing:-.025em}
ul{list-style:none}
:focus-visible{outline:3px solid var(--verde-400);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:var(--s-4);background:var(--ink);color:#fff;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-md);font-weight:700;z-index:600}
.skip-link:focus{top:var(--s-3)}

/* ── ÍCONOS ───────────────────────────────────────────── */
.ico{width:18px;height:18px;flex:none;display:block}
.ico-14{width:14px;height:14px} .ico-16{width:16px;height:16px} .ico-20{width:20px;height:20px}
.ico-24{width:24px;height:24px} .ico-28{width:28px;height:28px} .ico-32{width:32px;height:32px}
[data-ico]{display:inline-flex;align-items:center;justify-content:center}
[data-ico] svg{width:100%;height:100%}
.ico-tile{width:56px;height:56px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none}
.ico-tile .ico{width:26px;height:26px}
.ico-tile--green{background:var(--verde-50);color:var(--verde-700)}
.ico-tile--blue{background:var(--azul-50);color:var(--azul-700)}
.ico-tile--amber{background:var(--ambar-50);color:#8A5A0A}
.ico-tile--gray{background:var(--gris-100);color:var(--ink-2)}
.ico-tile--lima{background:var(--lima-soft);color:#4F6410}

/* ── LAYOUT ───────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s-6);padding-right:var(--s-6)}
.section{padding:var(--s-16) 0}
.section--tight{padding:var(--s-12) 0}
.section--soft{background:var(--bg-soft)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;margin-bottom:var(--s-8)}
.sec-head__title{display:flex;flex-direction:column;gap:var(--s-2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:800;
  color:var(--verde-600)}
.eyebrow .ico{color:var(--lima);flex:none}
.sec-head h2{font-size:var(--text-4xl)}
.sec-head p{font-size:var(--text-lg);color:var(--ink-3);max-width:60ch;margin-top:var(--s-1)}
.section-head--center{text-align:center;align-items:center;justify-content:center;flex-direction:column}
.section-head--center .eyebrow::before{display:none}

/* ── TOP BAR ──────────────────────────────────────────── */
.topbar{position:relative;background:var(--verde-900);color:rgba(255,255,255,.8);font-size:.78rem;height:var(--topbar-h)}
.topbar__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;height:100%;padding:0 var(--s-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.topbar__left{display:flex;align-items:center;gap:var(--s-4)}
.topbar__left span{display:inline-flex;align-items:center;gap:6px}
.topbar__right{display:flex;align-items:center;gap:var(--s-2)}
.topbar a{color:rgba(255,255,255,.8);font-weight:500}
.topbar a:hover{color:#fff}
.topbar__sep{width:1px;height:16px;background:rgba(255,255,255,.2)}
.topbar__link{display:inline-flex;align-items:center;gap:6px}

/* ── HEADER ───────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:300;background:#fff;border-bottom:1px solid var(--gris-200);
  box-shadow:var(--sh-xs)}
.header__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;height:var(--header-h);padding:0 var(--s-6);
  display:flex;align-items:center;gap:var(--s-6)}

/* ── CAMPAÑA DE TEMPORADA (tema opcional, Ajustes del sitio) ─────────────
   Imagen + íconos SIEMPRE detrás del contenido (z-index:0 vs. *__inner
   arriba en z-index:1) y con pointer-events:none, para que nunca tapen ni
   bloqueen el menú — el pedido explícito era "sin afectar el menú".
   Un solo ícono por extremo (izquierda/derecha), NUNCA en el centro —donde
   está el texto o el menú— con un vaivén corto y lento (sutil). Anclados en
   píxeles fijos al borde real de la barra (no en %), así el logo y los
   botones de la derecha jamás quedan cerca de ellos, sea cual sea el ancho
   de pantalla o si el contenido está centrado dentro de un header más ancho. */
.cabecera-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cabecera-decor__imagen{position:absolute;inset:0;background-size:cover;background-position:center}
.cabecera-decor__iconos{position:absolute;inset:0}
.cabecera-decor__icono{position:absolute;top:50%;font-size:1rem;line-height:1;opacity:.45;
  transform:translateY(-50%);animation:cabecera-flotar 6s ease-in-out infinite}
.cabecera-decor__icono:nth-child(1){left:20px;animation-delay:0s}
.cabecera-decor__icono:nth-child(2){right:20px;font-size:1.15rem;animation-delay:1.8s}
.cabecera-decor__icono--brillo{animation-name:cabecera-brillo}
@keyframes cabecera-flotar{0%,100%{transform:translateY(-50%) translateY(0)}50%{transform:translateY(-50%) translateY(-3px)}}
@keyframes cabecera-brillo{0%,100%{opacity:.3}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.cabecera-decor__icono{animation:none;opacity:.35}}
.brand{display:flex;align-items:center;gap:var(--s-3);flex:none}
.brand img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{color:var(--ink-2);font-weight:600;font-size:.9rem;padding:10px 13px;border-radius:var(--r-md);
  position:relative;white-space:nowrap}
.nav a:hover{color:var(--verde-800);background:var(--verde-50)}
.nav a.is-active{color:var(--verde-800)}
.nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:3px;
  background:var(--lima);border-radius:2px}

/* Ítem del menú con desplegable (hijos de MenuItem) */
.nav__item{position:relative}
.nav__item a .ico{transition:transform var(--dur)}
.nav__item:hover a .ico,.nav__item:focus-within a .ico{transform:rotate(180deg)}
.nav__dropdown{position:absolute;top:100%;left:0;min-width:240px;padding:var(--s-2);margin-top:4px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);border:1px solid var(--gris-100);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);
  z-index:60}
.nav__item:hover .nav__dropdown,.nav__item:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:none}
.nav__dropdown a{display:block;padding:10px 13px;font-size:.88rem;white-space:normal}
.nav__dropdown a:hover{background:var(--verde-50);color:var(--verde-800)}

.header__tools{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.search-btn{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--gris-200);
  background:#fff;color:var(--ink-2);display:grid;place-items:center;transition:all var(--dur)}
.search-btn:hover{background:var(--verde-50);color:var(--verde-800);border-color:var(--verde-400)}
.header__burger{display:none;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--gris-200);
  background:#fff;color:var(--ink);place-items:center}

/* Search overlay */
.search-bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6);overflow:hidden;max-height:0;
  transition:max-height var(--dur) var(--ease)}
.search-bar.is-open{max-height:90px}
.search-bar__inner{display:flex;gap:var(--s-2);padding:var(--s-3) 0 var(--s-4)}
.search-bar input{flex:1;height:50px;padding:0 var(--s-5);border:1px solid var(--gris-300);
  border-radius:var(--r-md);font-size:1rem;font-family:inherit;color:var(--ink);background:var(--gris-50)}
.search-bar input:focus{outline:none;border-color:var(--verde-500);background:#fff}

/* Drawer móvil */
.drawer-scrim{position:fixed;inset:0;background:rgba(10,25,18,.5);z-index:390;opacity:0;
  pointer-events:none;transition:opacity var(--dur)}
.drawer-scrim.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;z-index:400;
  transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;
  box-shadow:var(--sh-lg)}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
  padding:0 var(--s-5);border-bottom:1px solid var(--gris-200)}
.drawer__head img{height:42px}
.drawer__close{width:42px;height:42px;border:1px solid var(--gris-200);border-radius:var(--r-md);
  background:#fff;color:var(--ink);display:grid;place-items:center}
.drawer nav{display:flex;flex-direction:column;padding:var(--s-3);overflow-y:auto}
.drawer nav a{padding:13px var(--s-4);border-radius:var(--r-md);color:var(--ink-2);font-weight:600}
.drawer nav a.drawer__sub{padding-left:var(--s-8);font-weight:500;font-size:.92rem;color:var(--ink-3)}
.drawer nav a:hover,.drawer nav a.is-active{background:var(--verde-50);color:var(--verde-800)}
.drawer__foot{margin-top:auto;padding:var(--s-5);border-top:1px solid var(--gris-200);display:grid;gap:var(--s-2)}

/* ── BOTONES ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:46px;
  padding:0 var(--s-6);border-radius:var(--r-full);font-size:.95rem;font-weight:700;border:2px solid transparent;
  transition:all var(--dur) var(--ease);white-space:nowrap;letter-spacing:-.01em}
.btn:hover{text-decoration:none}
.btn .ico{width:18px;height:18px}
.btn--sm{min-height:38px;padding:0 var(--s-4);font-size:.85rem}
.btn--lg{min-height:54px;padding:0 var(--s-8);font-size:1.05rem}
.btn--block{width:100%}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;transform:translateY(-1px)}
.btn--lima{background:var(--lima);color:var(--verde-900);border-color:var(--lima)}
.btn--lima:hover{background:#b8e83a;border-color:#b8e83a;color:var(--verde-900);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--verde-800);border-color:var(--gris-300)}
.btn--outline:hover{border-color:var(--verde-700);color:var(--verde-800)}
.btn--ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn--ghost:hover{background:var(--gris-100);color:var(--ink)}
.btn--on-dark{background:#fff;color:var(--verde-800);border-color:#fff}
.btn--on-dark:hover{background:var(--lima);color:var(--verde-900);border-color:var(--lima);transform:translateY(-1px)}
.btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--outline-white:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ══ HERO CARRUSEL (texto + imagen a sangre, después del texto) ══ */
.hero{position:relative;z-index:1;overflow:hidden;background:var(--verde-900)}
.hero::before{content:"";position:absolute;right:-140px;top:-140px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(198,242,78,.10),transparent 70%);pointer-events:none;z-index:1}
.hero::after{content:"";position:absolute;left:-100px;bottom:-160px;width:380px;height:380px;border-radius:50%;
  background:rgba(0,0,0,.14);pointer-events:none;z-index:1}
.hero__viewport{position:relative;min-height:clamp(540px,66vh,660px)}
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,47%)}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero__box-col{position:relative;z-index:3;display:flex;align-items:center;
  padding-left:max(var(--s-6),calc((100vw - var(--maxw)) / 2 + var(--s-6)));padding-right:var(--s-8)}
.hero__box{color:#fff;opacity:0;transform:translateY(24px);max-width:34rem}
.hero__slide.is-active .hero__box{animation:heroIn .8s var(--ease) .15s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero__tag{display:inline-flex;align-items:center;gap:7px;background:var(--lima);color:var(--verde-900);
  font-size:.82rem;font-weight:800;
  padding:6px 13px;border-radius:var(--r-full)}
.hero__box h1{color:#fff;font-size:clamp(1.9rem,3.6vw,var(--text-5xl));line-height:1.06;margin-top:var(--s-5);
  letter-spacing:-.03em}
.hero__box p{color:rgba(255,255,255,.82);font-size:var(--text-lg);margin-top:var(--s-5);max-width:42ch;font-weight:400}
.hero__actions{display:flex;gap:var(--s-3);margin-top:var(--s-8);flex-wrap:wrap}
/* Imagen a sangre con borde curvo (no recto) hacia el texto */
.hero__art{position:relative;z-index:2;height:100%;width:100%;overflow:hidden;opacity:0;transition:opacity .8s var(--ease);
  clip-path:url(#heroCurve)}
.hero__slide.is-active .hero__art{opacity:1;transition-delay:.1s}
.hero__art img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.hero__slide.is-active .hero__art img{animation:heroZoom 6.5s linear forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* Línea decorativa: repite la curva de la imagen pero desplazada hacia el verde (no toca el borde) */
.hero__curve-deco{position:absolute;top:0;height:92%;right:0;width:calc(47% + 24px);z-index:1;pointer-events:none}
.hero__curve-deco path{fill:none;stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:.55}
/* Controles (alineados con el viewport, no con el padding del hero) */
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;
  border-radius:var(--r-full);border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);
  color:#fff;display:grid;place-items:center;transition:all var(--dur);backdrop-filter:blur(4px)}
.hero__arrow:hover{background:var(--lima);color:var(--verde-900);border-color:var(--lima)}
.hero__arrow--prev{left:var(--s-6)} .hero__arrow--next{right:var(--s-6)}
.hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:linear-gradient(0deg,rgba(0,20,13,.4),transparent)}
.hero__foot-inner{max-width:var(--maxw);margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-3);
  display:flex;align-items:center;gap:var(--s-4)}
.hero__dots{display:flex;gap:9px}
.hero__dot{width:38px;height:5px;border-radius:var(--r-full);border:0;background:rgba(255,255,255,.32);
  cursor:pointer;transition:background var(--dur);padding:0}
.hero__dot.is-active{background:var(--lima)}
.hero__count{margin-left:auto;color:rgba(255,255,255,.75);font-size:.8rem;font-weight:600}
.hero__count .mono{color:#fff;font-size:1rem}

/* ══ ACCESOS RÁPIDOS (tiles) ════════════════════════════ */
.quick{position:relative;z-index:5;margin-top:-34px}
.quick__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.quick-tile{background:#fff;border:1px solid var(--gris-200);border-radius:var(--r-xl);padding:var(--s-6);
  box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:var(--s-3);transition:all var(--dur) var(--ease);
  color:inherit}
.quick-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--verde-300);color:inherit}
.quick-tile h3{font-size:1.05rem}
.quick-tile p{font-size:.85rem;color:var(--ink-3)}
.quick-tile__link{margin-top:auto;color:var(--verde-700);font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;gap:6px}
.quick-tile .ico-tile .ico,.quick-tile__link .ico{transition:transform var(--dur)}
.quick-tile:hover .quick-tile__link .ico{transform:translateX(4px)}

/* ══ NOTICIAS ═══════════════════════════════════════════ */
.news-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s-6)}
.news-lead{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:420px;display:flex;
  align-items:flex-end;color:#fff;box-shadow:var(--sh-sm)}
.news-lead__media{position:absolute;inset:0}.news-lead__media svg{width:100%;height:100%}
.news-lead__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,42,27,.92) 0%,rgba(0,42,27,.35) 60%,transparent 100%)}
.news-lead__body{position:relative;z-index:2;padding:var(--s-8)}
.news-lead__body h3{color:#fff;font-size:var(--text-2xl);margin-top:var(--s-3)}
.news-lead__body p{color:rgba(255,255,255,.82);margin-top:var(--s-2)}
.news-side{display:flex;flex-direction:column;gap:var(--s-4)}
.news-item{display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);background:#fff;border:1px solid var(--gris-200);
  border-radius:var(--r-lg);overflow:hidden;transition:all var(--dur) var(--ease)}
.news-item:hover{border-color:var(--verde-300);box-shadow:var(--sh-sm);transform:translateX(3px)}
.news-item__media{position:relative;display:grid;place-items:center;color:#fff}
.news-item__media .ico{width:30px;height:30px;opacity:.95}
.news-item__body{padding:var(--s-3) var(--s-4) var(--s-3) 0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.news-item__body h4{font-size:.95rem;line-height:1.3;font-weight:700}
.news-meta{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-4);font-weight:600}

/* Grid de noticias / historias — la tarjeta vuelve a ser como antes (foto
   fija arriba, cuerpo blanco abajo); lo único que ahora vive sobre la foto
   es el título, con un degradado que solo oscurece la parte de abajo —así
   no "se come" la foto y la marca de agua/logo de la imagen se ve completa. */
.news-card{background:#fff;border:1px solid var(--gris-200);border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;transition:all var(--dur) var(--ease)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--verde-300)}
.news-card__media{height:180px;position:relative;display:flex;align-items:flex-end;color:rgba(255,255,255,.95)}
.news-card__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,42,27,.88) 0%,rgba(0,42,27,.4) 50%,transparent 82%)}
.news-card__media .ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:46px;height:46px}
.news-card__media h3{position:relative;z-index:2;margin:0;padding:var(--s-4);color:#fff;font-size:1.05rem;line-height:1.3}
.news-card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.news-card__body p{font-size:.88rem;color:var(--ink-3)}
.news-card__link{margin-top:auto;padding-top:var(--s-2);color:var(--verde-700);font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;gap:6px}

/* ── CHIP / BADGE ─────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.tag--green{background:var(--verde-50);color:var(--verde-700)}
.tag--lima{background:var(--lima-soft);color:var(--lima-deep)}
.tag--blue{background:var(--azul-50);color:var(--azul-700)}
.tag--amber{background:var(--ambar-50);color:var(--ambar-600)}
.tag--white{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(2px)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--ink-2);
  background:#fff;border:1px solid var(--gris-300);border-radius:var(--r-full);padding:9px 18px;
  transition:all var(--dur);cursor:pointer}
.chip:hover{border-color:var(--verde-400);color:var(--verde-800)}
.chip.is-active{background:var(--verde-800);color:#fff;border-color:var(--verde-800)}

/* ══ SERVICIOS (grid tarjetas) ══════════════════════════ */
.card{background:#fff;border:1px solid var(--gris-200);border-radius:var(--r-xl);overflow:hidden}
.card__body{padding:var(--s-6)}
.card h3{font-size:1.15rem}
.card p{margin-top:var(--s-2);font-size:.9rem;color:var(--ink-3);line-height:1.6}
.card--hover{transition:all var(--dur) var(--ease)}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--verde-300)}
.card--green{background:var(--verde-800);border-color:var(--verde-800);color:rgba(255,255,255,.85)}
.card--green h3{color:#fff}.card--green p{color:rgba(255,255,255,.75)}
.card__link{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-4);font-weight:700;font-size:.88rem;color:var(--verde-700)}
.card__link .ico{width:16px;height:16px;transition:transform var(--dur)}
.card--hover:hover .card__link .ico{transform:translateX(4px)}
.svc__num{font-family:var(--font-mono);font-size:.78rem;color:var(--verde-400);font-weight:700}

.feature{text-align:left}
.feature h3{font-size:1.1rem;margin-top:var(--s-4)}
.feature p{margin-top:var(--s-2);font-size:.9rem;color:var(--ink-3)}

/* ══ TABS (dependencias) ════════════════════════════════ */
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap;border-bottom:2px solid var(--gris-200);margin-bottom:var(--s-8)}
.tab{padding:12px 20px;font-weight:700;font-size:.95rem;color:var(--ink-3);background:none;border:0;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--dur)}
.tab:hover{color:var(--verde-800)}
.tab.is-active{color:var(--verde-800);border-bottom-color:var(--lima)}
.tab-panel{display:none}.tab-panel.is-active{display:block;animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── BANDA VERDE / STATS ──────────────────────────────── */
.band-green{background:var(--verde-800);color:rgba(255,255,255,.85);position:relative;overflow:hidden}
.band-green h2{color:#fff}
.band-green .eyebrow{color:var(--lima)}
.stat{text-align:center;padding:var(--s-6)}
.stat__value{font-size:var(--text-5xl);font-weight:800;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.band-green .stat__value{color:var(--lima)}
.stat__label{margin-top:var(--s-3);font-size:.9rem;color:rgba(255,255,255,.78)}
.stat--ink .stat__value{color:var(--verde-700)} .stat--ink .stat__label{color:var(--ink-3)}

/* ── TICK LIST ────────────────────────────────────────── */
.tick{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-2) 0}
.tick .ico-tile{width:44px;height:44px;border-radius:var(--r-md)}
.tick .ico-tile .ico{width:20px;height:20px}
.tick b{color:var(--ink);font-weight:700;display:block;font-size:1rem}
.tick p{margin-top:2px;font-size:.9rem;color:var(--ink-3)}

/* ── PAGE HERO (interior) ─────────────────────────────── */
.page-hero{background:var(--verde-800);color:#fff;position:relative;overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:0;opacity:.5}
.page-hero__bg::before{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(198,242,78,.14),transparent 70%)}
.page-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:var(--s-16) var(--s-6) var(--s-12)}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,var(--text-5xl));margin-top:var(--s-3);max-width:24ch}
.page-hero p{color:rgba(255,255,255,.8);font-size:var(--text-lg);margin-top:var(--s-4);max-width:62ch}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.72)}
.breadcrumb a{color:rgba(255,255,255,.72)}.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{color:rgba(255,255,255,.4)}

/* ── FORM ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.field label{font-weight:700;font-size:.85rem;color:var(--ink-2)}
.field .req{color:var(--error)}
.input,textarea.input{padding:13px var(--s-4);border:1px solid var(--gris-300);border-radius:var(--r-md);
  font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink);width:100%;transition:all var(--dur)}
.input:focus,textarea.input:focus{outline:none;border-color:var(--verde-500);box-shadow:0 0 0 3px rgba(0,146,95,.14)}
.input::placeholder,textarea.input::placeholder{color:var(--ink-5)}
textarea.input{min-height:140px;resize:vertical;line-height:1.6}
.form-note{font-size:.8rem;color:var(--ink-4);margin-top:var(--s-2)}

.contact-card{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-5);background:#fff;
  border:1px solid var(--gris-200);border-radius:var(--r-xl)}
.contact-card b{color:var(--ink);display:block;font-size:1rem}
.contact-card p,.contact-card a{font-size:.9rem;color:var(--ink-3)}
.social-row{display:flex;gap:var(--s-2)}
.social-btn{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--gris-200);background:#fff;
  color:var(--ink-2);display:grid;place-items:center;transition:all var(--dur)}
.social-btn:hover{background:var(--verde-800);color:#fff;border-color:var(--verde-800)}

/* ── CTA / NEWSLETTER ─────────────────────────────────── */
.newsletter{background:var(--verde-800);border-radius:var(--r-2xl);padding:var(--s-12);position:relative;overflow:hidden}
.newsletter__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.newsletter h2{color:#fff;font-size:var(--text-3xl)}
.newsletter p{color:rgba(255,255,255,.8);margin-top:var(--s-2)}
.newsletter__deco{position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(198,242,78,.16),transparent 70%);z-index:1}

/* ══ FOOTER ═════════════════════════════════════════════ */
.footer{background:var(--verde-900);color:rgba(255,255,255,.7)}
.footer__top{max-width:var(--maxw);margin:0 auto;padding:var(--s-16) var(--s-6) var(--s-10);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s-8)}
.footer h4{color:#fff;font-size:1rem;margin-bottom:var(--s-4);font-weight:700}
.footer a{color:rgba(255,255,255,.7);font-size:.9rem}
.footer a:hover{color:var(--lima)}
.footer li{line-height:2.2}
.footer__brand-logos{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.footer__brand img{height:48px;background:#fff;padding:8px 12px;border-radius:var(--r-md)}
/* Logo de la Alcaldía: versión blanca pensada para fondo oscuro, va directo
   sobre el verde del pie sin la caja blanca (a diferencia del logo de Perla,
   que sí la necesita porque su texto es verde oscuro). */
.footer__brand img.footer__brand-logo--plano{height:60px;background:none;padding:0;border-radius:0}
.footer__brand p{margin-top:var(--s-4);max-width:40ch;font-size:.9rem}
.footer__contact li{display:flex;align-items:flex-start;gap:8px;line-height:1.6;margin-bottom:var(--s-2);font-size:.9rem}
.footer__contact .ico{width:17px;height:17px;color:var(--lima);margin-top:3px;flex:none}
.footer__tags{max-width:var(--maxw);margin:0 auto;padding:var(--s-8) var(--s-6);border-top:1px solid rgba(255,255,255,.12)}
.footer__tags h4{margin-bottom:var(--s-4)}
.footer__tag-cloud{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.footer__tag-cloud a{padding:6px 13px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-full);
  font-size:.82rem;font-weight:500}
.footer__tag-cloud a:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.footer__bar{border-top:1px solid rgba(255,255,255,.12)}
.footer__bar-inner{max-width:var(--maxw);margin:0 auto;padding:var(--s-5) var(--s-6);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:var(--s-3);font-size:.8rem}
.footer__legal{display:flex;flex-direction:column;gap:4px}
.footer__credit{opacity:.65}
.footer__credit a{color:inherit;text-decoration:underline}
.footer__social{display:flex;gap:var(--s-2)}
.footer__social a{width:38px;height:38px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:rgba(255,255,255,.8)}
.footer__social a:hover{background:var(--lima);color:var(--verde-900);border-color:var(--lima)}

/* ── GRID HELPERS ─────────────────────────────────────── */
.grid{display:grid;gap:var(--s-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-10);align-items:center}
.cols-side{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--s-8);align-items:start}
.text-center{text-align:center}.muted{color:var(--ink-4)}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.lead{font-size:var(--text-lg);color:var(--ink-2);line-height:1.7}

/* ── REVEAL ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.09s}.reveal-delay-2{transition-delay:.18s}
.reveal-delay-3{transition-delay:.27s}.reveal-delay-4{transition-delay:.36s}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media(max-width:1080px){
  .quick__grid{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav{display:none}.header__burger{display:grid}
}
@media(max-width:820px){
  .news-feature{grid-template-columns:1fr}
  .cols-2,.cols-side{grid-template-columns:1fr;gap:var(--s-8)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .newsletter__inner{grid-template-columns:1fr}
  .hero__arrow{width:44px;height:44px}
  .hero__slide{grid-template-columns:1fr}
  .hero__box-col{padding-left:var(--s-6);padding-right:var(--s-6)}
  .hero__art{display:none}
  .hero__curve-deco{display:none}
  .topbar__left span:not(:first-child){display:none}
}
@media(max-width:560px){
  :root{--header-h:64px}
  .quick{margin-top:var(--s-8)}
  .quick__grid,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .section{padding:var(--s-12) 0}
  .sec-head h2{font-size:var(--text-3xl)}
  .footer__top{grid-template-columns:1fr}
  .hero{padding:var(--s-10) 0 var(--s-16)}
  .hero__arrow{display:none}
  .hero__viewport{height:auto;min-height:420px}
  .news-lead{min-height:340px}
  /* Buscador del header: el botón no entra al lado del campo en pantallas
     angostas — se apilan en dos filas para que nada se salga de la pantalla. */
  .search-bar.is-open{max-height:160px}
  .search-bar__inner{flex-wrap:wrap}
  .search-bar input{flex:1 1 100%}
  .search-bar__inner .btn{flex:1 1 100%;justify-content:center}
  /* Barra superior: la dirección no entra junto a los dos accesos de PQRS y
     todo terminaba amontonado en dos líneas — en móvil se oculta (ya está en
     Contacto) y quedan centrados solo "Consultar PQRS" / "Radicar PQRS". */
  .topbar__left{display:none}
  .topbar__inner{justify-content:center}
  /* Si hay mensaje de campaña, sí queremos verlo en móvil: se muestra en su
     propia línea (truncado si no cabe) y debajo quedan los accesos de PQRS. */
  .topbar--con-mensaje{height:auto}
  .topbar--con-mensaje .topbar__inner{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;row-gap:4px}
  .topbar--con-mensaje .topbar__left{display:flex;flex:1 1 100%;min-width:0}
  .topbar--con-mensaje .topbar__left span:not(:first-child){display:none}
  .topbar--con-mensaje .topbar__left span:first-child{flex:1 1 auto;min-width:0;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar--con-mensaje .topbar__right{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   ACCESIBILIDAD — widget flotante + modos
   (unidades en px para no verse afectado por el escalado de texto)
   ============================================================ */

/* Botón flotante (pestaña lateral derecha) */
.a11y-fab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:1000;width:52px;height:52px;
  border:0;border-radius:10px 0 0 10px;background:#1F5AE0;color:#fff;display:grid;place-items:center;
  cursor:pointer;box-shadow:-2px 2px 14px rgba(16,40,30,.22);transition:width .18s ease,background .18s ease}
.a11y-fab:hover{background:#1747b8;width:58px}
.a11y-fab svg{width:28px;height:28px}
.a11y-fab:focus-visible{outline:3px solid #C6F24E;outline-offset:2px}

/* Panel */
.a11y-panel{position:fixed;top:50%;right:64px;transform:translateY(-50%) translateX(20px);z-index:1000;
  width:250px;max-height:86vh;overflow-y:auto;background:#fff;border:1px solid #E3E7E4;border-radius:12px;
  box-shadow:0 18px 48px rgba(16,40,30,.22);padding:10px;opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease}
.a11y-panel.is-open{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.a11y-panel__head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 12px;
  border-bottom:1px solid #EFF2F0;margin-bottom:6px}
.a11y-panel__head b{font-family:Inter,sans-serif;font-size:15px;color:#1A2B24;font-weight:800;letter-spacing:-.01em}
.a11y-panel__close{width:30px;height:30px;border:0;background:none;color:#5A6B63;border-radius:6px;
  display:grid;place-items:center;cursor:pointer}
.a11y-panel__close:hover{background:#EFF2F0;color:#1A2B24}
.a11y-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;background:none;
  border-radius:8px;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;color:#33453D;font-weight:600;
  text-align:left;letter-spacing:-.01em;text-decoration:none;transition:background .15s ease,color .15s ease}
.a11y-item:hover{background:#F4F6F5;color:#004831}
.a11y-item svg{width:19px;height:19px;flex:none;color:#5A6B63}
.a11y-item:hover svg{color:#004831}
.a11y-item.is-active{background:#E9F5EF;color:#004831}
.a11y-item.is-active svg{color:#004831}
.a11y-item.is-active::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:#54BF02}
.a11y-item--reset{color:#B0382F}.a11y-item--reset svg{color:#B0382F}
.a11y-item--reset:hover{background:#F4DEDB;color:#6E211B}
.a11y-sep{height:1px;background:#EFF2F0;margin:6px 4px}

@media(max-width:560px){
  .a11y-panel{right:10px;left:10px;width:auto;top:auto;bottom:78px;transform:translateY(20px)}
  .a11y-panel.is-open{transform:translateY(0)}
  .a11y-fab{top:auto;bottom:16px;transform:none;border-radius:12px}
}

/* ── Modos aplicados a #a11y-content ──────────────────────── */
#a11y-content.a11y-grayscale{filter:grayscale(1)}
#a11y-content.a11y-contrast{filter:contrast(1.45)}
#a11y-content.a11y-negative{filter:invert(1) hue-rotate(180deg)}
#a11y-content.a11y-grayscale.a11y-contrast{filter:grayscale(1) contrast(1.45)}

/* Subrayar enlaces */
#a11y-content.a11y-underline a{text-decoration:underline !important;text-underline-offset:3px}

/* Fuente legible */
#a11y-content.a11y-legible,#a11y-content.a11y-legible *{
  font-family:Verdana,'Segoe UI',Tahoma,Arial,sans-serif !important;
  letter-spacing:normal !important;word-spacing:.06em !important;line-height:1.75 !important}

/* Fondo claro (neutraliza superficies oscuras) */
#a11y-content.a11y-light .band-green,
#a11y-content.a11y-light .page-hero,
#a11y-content.a11y-light .newsletter,
#a11y-content.a11y-light .hero,
#a11y-content.a11y-light .card--green,
#a11y-content.a11y-light .news-lead,
#a11y-content.a11y-light .footer{background:#ffffff !important;color:#1A2B24 !important;border:1px solid #E3E7E4}
#a11y-content.a11y-light .band-green h2,#a11y-content.a11y-light .band-green *,
#a11y-content.a11y-light .page-hero *,
#a11y-content.a11y-light .newsletter *,
#a11y-content.a11y-light .hero__box *,
#a11y-content.a11y-light .card--green *,
#a11y-content.a11y-light .news-lead__body *,
#a11y-content.a11y-light .footer *{color:#1A2B24 !important}
#a11y-content.a11y-light .hero__media,
#a11y-content.a11y-light .news-lead__media{display:none !important}
#a11y-content.a11y-light .hero__tag,
#a11y-content.a11y-light .tag--lima,
#a11y-content.a11y-light .eyebrow{background:#E9F5EF !important;color:#015C3F !important}
#a11y-content.a11y-light .footer a:hover,
#a11y-content.a11y-light .newsletter a{color:#015C3F !important}
#a11y-content.a11y-light .btn--lima{background:#004831 !important;color:#fff !important;border-color:#004831 !important}
#a11y-content.a11y-light .btn--outline-white{color:#004831 !important;border-color:#004831 !important}

/* Modal Mapa del sitio */
.a11y-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;
  background:rgba(10,25,18,.55);opacity:0;visibility:hidden;transition:opacity .2s ease}
.a11y-modal.is-open{opacity:1;visibility:visible}
.a11y-modal__card{background:#fff;border-radius:16px;max-width:640px;width:100%;max-height:84vh;overflow-y:auto;
  padding:28px;box-shadow:0 24px 60px rgba(16,40,30,.3);font-family:Inter,sans-serif}
.a11y-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.a11y-modal__head h3{font-size:22px;color:#1A2B24}
.a11y-modal__close{width:38px;height:38px;border:1px solid #E3E7E4;background:#fff;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;color:#1A2B24}
.a11y-sitemap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.a11y-sitemap h4{font-size:14px;font-weight:800;color:#849089;margin-bottom:10px}
.a11y-sitemap a{display:block;padding:7px 0;color:#33453D;font-weight:600;font-size:15px}
.a11y-sitemap a:hover{color:#004831}
@media(max-width:560px){.a11y-sitemap{grid-template-columns:1fr}}

/* ============================================================
   BLOQUES DINÁMICOS — noticias, artículo, PQRS y consulta.
   Todo con los tokens ya definidos arriba; sin colores sueltos.
   ============================================================ */

/* Aviso superior (se activa desde el panel) */
.site-aviso{display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap;
  background:var(--verde-800);color:#fff;font-size:.84rem;font-weight:600;padding:10px var(--s-4);text-align:center}
.site-aviso a{color:var(--lima);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.site-aviso a:hover{text-decoration:underline}

/* Etiqueta gris (categorías sin color propio) */
.tag--gray{background:var(--gris-100);color:var(--ink-2)}

/* Paginación del listado */
.pagination{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;margin-top:var(--s-10)}

/* Estado vacío de listados */
.empty-state{text-align:center;padding:var(--s-16) var(--s-6);border:1px dashed var(--gris-300);
  border-radius:var(--r-xl);background:#fff}
.empty-state .ico{width:52px;height:52px;color:var(--gris-300);margin-bottom:var(--s-4)}
.empty-state h3{font-size:1.25rem}
.empty-state p{color:var(--ink-3);margin:var(--s-2) 0 var(--s-6)}

/* ---- Artículo ---- */
.page-hero--article .page-hero__inner h1{max-width:22ch}
@media (min-width:961px){.page-hero--article .page-hero__inner h1{max-width:34ch}}
/* El cuerpo debe ocupar todo el ancho de la columna, igual que la imagen de
   portada arriba (`.article-portada` no tiene max-width): sin esto el límite
   de 70ch de `.prose` deja un hueco a la derecha del texto que no coincide
   con el borde de la imagen. */
.article-layout .prose{max-width:none}
/* Fecha, tiempo de lectura y autor: importantes para la transparencia
   institucional (el ciudadano necesita ver claro cuándo se publicó y quién
   firma) — pedido explícito 2026-08-19 de subirle visibilidad. Se probaron
   3 variantes (chips sueltos, luego firma editorial con "·") antes de que
   el usuario eligiera esta: una sola barra unida con divisores internos
   entre cada dato, en vez de piezas sueltas o texto corrido. */
.article-meta{display:inline-flex;flex-wrap:wrap;margin-top:var(--s-6);
  background:rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden}
.article-meta__item{display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;font-size:.88rem;font-weight:600;color:#fff;
  border-right:1px solid rgba(255,255,255,.16)}
.article-meta__item:last-child{border-right:none}
.article-meta__item .ico{color:var(--lima);flex:none}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-10);align-items:start}
@media (max-width:960px){.article-layout{grid-template-columns:1fr}}
.article-aside{position:sticky;top:var(--s-6)}
@media (max-width:960px){.article-aside{position:static}}

.article-portada{margin:0 0 var(--s-8)}
.article-portada img{width:100%;border-radius:var(--r-xl);display:block}
.article-portada figcaption{font-size:.8rem;color:var(--ink-4);margin-top:var(--s-2)}

.prose{font-size:1.02rem;line-height:1.75;color:var(--ink-2);max-width:70ch}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{font-size:1.5rem;color:var(--ink);margin-top:var(--s-10);line-height:1.25}
.prose h3{font-size:1.2rem;color:var(--ink);margin-top:var(--s-8)}
.prose h4{font-size:1.05rem;color:var(--ink);margin-top:var(--s-6)}
.prose ul,.prose ol{padding-left:var(--s-6)}
.prose li+li{margin-top:var(--s-2)}
.prose a{color:var(--verde-700);font-weight:600}
.prose img{max-width:100%;height:auto;border-radius:var(--r-lg)}
.prose blockquote{border-left:3px solid var(--lima);background:var(--bg-soft);
  padding:var(--s-4) var(--s-5);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--gris-200);padding:8px 10px;text-align:left}
.prose th{background:var(--bg-soft)}

/* ---- Documentos adjuntos (artículo) ---- */
.adjuntos-block{margin-top:var(--s-8)}
.adjuntos-block h3{font-size:1.05rem;color:var(--ink);margin-bottom:var(--s-3)}
.adjuntos-block__lista{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.adjuntos-block__lista li a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px solid var(--gris-200);border-radius:var(--r-lg);text-decoration:none;
  transition:border-color var(--dur),background var(--dur)}
.adjuntos-block__lista li a:hover{border-color:var(--verde-400);background:var(--bg-soft)}
.adjuntos-block__lista .ico:first-child{color:var(--verde-700);flex:none}
.adjuntos-block__texto{display:flex;flex-direction:column;flex:1;min-width:0}
.adjuntos-block__texto b{color:var(--ink);font-size:.92rem}
.adjuntos-block__texto small{color:var(--ink-3);font-size:.78rem}
.adjuntos-block__lista .ico:last-child{color:var(--ink-4);flex:none}

.article-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  margin-top:var(--s-10);padding-top:var(--s-6);border-top:1px solid var(--gris-200)}
.article-share{display:flex;align-items:center;gap:var(--s-2);font-size:.85rem;font-weight:700;color:var(--ink-3)}

/* ---- Formulario de PQRS ---- */
.pqrs-form .card{border-radius:var(--r-xl)}
.pqrs-paso{display:flex;align-items:center;gap:var(--s-3);font-size:1.3rem;margin-bottom:var(--s-6)}
.pqrs-paso>span{width:32px;height:32px;border-radius:50%;background:var(--verde-800);color:#fff;
  display:grid;place-items:center;font-size:.9rem;font-weight:800;flex:none}

.pqrs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 var(--s-5)}

.pqrs-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-3)}
.pqrs-tipo{cursor:pointer}
.pqrs-tipo input{position:absolute;opacity:0;width:0;height:0}
.pqrs-tipo__box{display:flex;flex-direction:column;gap:6px;height:100%;padding:var(--s-4);
  border:1.5px solid var(--gris-200);border-radius:var(--r-lg);background:#fff;
  transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.pqrs-tipo__box .ico{color:var(--verde-700)}
.pqrs-tipo__box b{font-size:.98rem;color:var(--ink)}
.pqrs-tipo__box small{font-size:.78rem;color:var(--ink-3);line-height:1.45}
.pqrs-tipo:hover .pqrs-tipo__box{border-color:var(--verde-400);transform:translateY(-2px)}
.pqrs-tipo input:checked + .pqrs-tipo__box{border-color:var(--verde-800);box-shadow:0 0 0 3px var(--verde-50)}
.pqrs-tipo input:focus-visible + .pqrs-tipo__box{outline:2px solid var(--azul-500);outline-offset:2px}

.pqrs-check{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) 0;
  font-size:.88rem;color:var(--ink-2);line-height:1.55;cursor:pointer}
.pqrs-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--verde-800)}

.pqrs-error{margin-top:var(--s-4);background:var(--error-bg);color:var(--error-ink);
  padding:12px 14px;border-radius:var(--r-md);font-size:.88rem;font-weight:600}

.pqrs-ok{text-align:center;background:#fff;border:1px solid var(--gris-200);border-radius:var(--r-xl);
  padding:var(--s-12) var(--s-6);box-shadow:var(--sh-sm)}
.pqrs-ok .ico{width:56px;height:56px;color:var(--verde-500);margin-bottom:var(--s-4)}
.pqrs-ok h2{font-size:1.6rem}
.pqrs-ok p{color:var(--ink-3);margin-top:var(--s-2)}
.pqrs-radicado{display:inline-block;margin:var(--s-5) 0 var(--s-3);padding:14px var(--s-8);
  background:var(--bg-soft);border:1px dashed var(--gris-300);border-radius:var(--r-lg);
  font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;letter-spacing:.06em;color:var(--verde-800)}

/* ---- Consulta de radicado ---- */
.consulta-head{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-start}
.consulta-radicado{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.05rem;color:var(--verde-800);
  background:var(--verde-50);padding:10px var(--s-4);border-radius:var(--r-md);white-space:nowrap}

.consulta-pasos{list-style:none;display:flex;gap:0;margin:var(--s-8) 0 var(--s-6);padding:0}
.consulta-pasos li{flex:1;position:relative;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink-4)}
.consulta-pasos li::before{content:"";position:absolute;top:9px;left:0;right:50%;height:2px;background:var(--gris-200)}
.consulta-pasos li::after{content:"";position:absolute;top:9px;left:50%;right:0;height:2px;background:var(--gris-200)}
.consulta-pasos li:first-child::before,.consulta-pasos li:last-child::after{display:none}
.consulta-pasos li.is-done::before,.consulta-pasos li.is-done::after,
.consulta-pasos li.is-active::before{background:var(--verde-400)}
.consulta-pasos__punto{position:relative;z-index:1;display:block;width:20px;height:20px;margin:0 auto var(--s-2);
  border-radius:50%;background:#fff;border:2.5px solid var(--gris-300)}
.consulta-pasos li.is-done .consulta-pasos__punto{background:var(--verde-400);border-color:var(--verde-400)}
.consulta-pasos li.is-active .consulta-pasos__punto{background:var(--azul-500);border-color:var(--azul-500);
  box-shadow:0 0 0 4px var(--azul-50)}
.consulta-pasos li.is-done,.consulta-pasos li.is-active{color:var(--ink)}

.consulta-estado{background:var(--bg-soft);border-radius:var(--r-lg);padding:var(--s-5)}
.consulta-estado b{color:var(--verde-800);font-size:1.05rem}
.consulta-estado p{color:var(--ink-3);font-size:.9rem;margin-top:4px}

.consulta-dato{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--gris-100)}
.consulta-dato span{font-size:.8rem;color:var(--ink-4);font-weight:700}
.consulta-dato b{color:var(--ink);font-size:.92rem}

.consulta-respuesta{background:#fff;border:1px solid var(--gris-200);border-left:3px solid var(--lima);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s-4) var(--s-5);margin-top:var(--s-3)}

/* ---- Popups (Página Web → Popups en el panel) ---- */
.site-popup[hidden]{display:none}
.site-popup--modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;
  background:rgba(10,25,18,.55);opacity:0;transition:opacity .2s ease}
.site-popup--modal.is-open{opacity:1}
.site-popup--modal .site-popup__box{max-width:720px;transform:translateY(12px);transition:transform .25s ease}
.site-popup--modal.is-open .site-popup__box{transform:translateY(0)}

.site-popup--banner{position:fixed;left:0;right:0;bottom:0;z-index:1200;padding:var(--s-4);
  transform:translateY(110%);transition:transform .3s ease}
.site-popup--banner.is-open{transform:translateY(0)}
.site-popup--banner .site-popup__box{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:var(--s-5)}
.site-popup--banner .site-popup__media{width:64px;height:64px;flex:none;border-radius:var(--r-md)}
.site-popup--banner .site-popup__body{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.site-popup--banner .site-popup__body h3{font-size:1rem}
.site-popup--banner .site-popup__body p{margin:0;font-size:.85rem}

.site-popup__box{position:relative;background:#fff;border-radius:var(--r-xl);width:100%;
  box-shadow:0 24px 60px rgba(16,40,30,.3);overflow:hidden}
.site-popup__close{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gris-200);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.site-popup__close:hover{background:var(--gris-100)}
.contact-map{width:100%;aspect-ratio:16/7;min-height:280px}
.contact-map iframe{width:100%;height:100%;border:0;display:block}
.dir-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-6)}
.dir-step{display:flex;align-items:flex-start;gap:var(--s-3)}
.dir-step>span{width:32px;height:32px;border-radius:50%;background:var(--verde-800);color:#fff;
  display:grid;place-items:center;font-size:.9rem;font-weight:800;flex:none}
.dir-step b{color:var(--ink);display:block;font-size:.95rem}
.dir-step p{font-size:.85rem;color:var(--ink-3);margin-top:2px}
.site-popup__media{width:100%;aspect-ratio:3/2;overflow:hidden}
.site-popup__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
a.site-popup__media{cursor:pointer}
a.site-popup__media:hover img{transform:scale(1.03)}
.site-popup__body{padding:var(--s-6)}
.site-popup__body h3{font-size:1.3rem;color:var(--ink);margin-bottom:var(--s-2)}
.site-popup__body p{color:var(--ink-3);font-size:.92rem;line-height:1.5;margin-bottom:var(--s-4)}
.site-popup__body .btn{margin-bottom:0}
.consulta-respuesta p{color:var(--ink-2);font-size:.94rem;line-height:1.65}

/* ── Galería de imágenes 3D (bloque "galeria") ───────────── */
.galeria3d{position:relative;padding:var(--s-6) 0}
.galeria3d__track{position:relative;height:360px;perspective:1400px}
.galeria3d__item{position:absolute;top:0;left:50%;width:340px;height:360px;
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);cursor:pointer;
  transition:transform .5s var(--ease),opacity .5s var(--ease);will-change:transform,opacity}
.galeria3d__item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.galeria3d__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:48px;height:48px;
  border-radius:var(--r-full);border:1px solid var(--gris-200);background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-md);transition:all var(--dur)}
.galeria3d__arrow:hover{background:var(--verde-50);color:var(--verde-800);border-color:var(--verde-400)}
.galeria3d__arrow--prev{left:var(--s-4)}
.galeria3d__arrow--next{right:var(--s-4)}
.galeria3d__dots{display:flex;justify-content:center;gap:8px;margin-top:var(--s-6)}
.galeria3d__dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--gris-300);
  cursor:pointer;transition:all var(--dur)}
.galeria3d__dot.is-active{background:var(--verde-700);width:24px;border-radius:var(--r-full)}
@media(max-width:640px){
  .galeria3d__track{height:260px}
  .galeria3d__item{width:230px;height:260px}
  .galeria3d__arrow{width:40px;height:40px}
  .galeria3d__arrow--prev{left:var(--s-2)}
  .galeria3d__arrow--next{right:var(--s-2)}
}

/* ── Galería-slider dentro de un bloque "texto_imagen" ───── */
.txtimg-galeria{position:relative;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg)}
.txtimg-galeria__track{position:relative;width:100%;aspect-ratio:4/3}
.txtimg-galeria__slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.txtimg-galeria__slide.is-active{opacity:1}
.txtimg-galeria__slide img{width:100%;height:100%;object-fit:cover;display:block}
.txtimg-galeria__dots{position:absolute;left:0;right:0;bottom:var(--s-4);display:flex;justify-content:center;gap:8px}
.txtimg-galeria__dot{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.6);
  cursor:pointer;transition:all var(--dur);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.txtimg-galeria__dot.is-active{background:#fff;width:22px;border-radius:var(--r-full)}