/* ==========================================================================
   UGEL · sitio público
   Verde + azul claro sobre neutros (#FFFFFF, #F8F9FA, texto #333333)
   ========================================================================== */

/* ---------- Tipografía: Montserrat, servida desde este mismo sitio ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-800.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400i.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600i.woff') format('woff'); }
/* Títulos: Outfit (licencia OFL, ver fonts/OFL-Outfit.txt). Solo letras del español y signos: 17 KB. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-700.woff') format('woff'); }

:root {
  --green-800: #18583A;
  --green-700: #1F6B43;
  --green-600: #2A8250;   /* botones: verde de marca con contraste AA para texto blanco */
  --green-brand: #2E8B57; /* verde de marca: iconos, cifras y bordes */
  --green-500: #3CB371;
  --green-200: #C5E8D4;
  --green-100: #E3F4EA;
  --green-50: #F1FAF5;
  --sky-50: #F2FAFD;
  --sky-100: #E3F3F9;
  --sky-200: #B0E0E6;
  --sky-300: #ADD8E6;
  --sky-400: #87CEEB;
  --sky-ink: #1E5670;
  --ink: #333333;
  --ink-soft: #5A646C;
  --line: #DDE5E9;
  --bg-soft: #F8F9FA;
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --header-h: 88px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
h1, h2, h3, p, ul { margin-top: 0; }
a { color: var(--green-700); }
:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 3px; border-radius: 4px; }

.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; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--green-600); color: #fff; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
.container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.icon { width: 24px; height: 24px; flex: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.3rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: .975rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green-600); color: #fff; }
.btn--primary:hover { background: var(--green-700); }
.btn--ghost { border-color: var(--green-brand); background: transparent; color: var(--green-700); }
.btn--ghost:hover { background: var(--green-50); }
.btn--sky { background: var(--sky-200); color: var(--green-800); }
.btn--sky:hover { background: #fff; }
.btn--small { padding: .55rem .95rem; font-size: .9rem; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(20, 60, 50, .5); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.brand__text small { margin-top: 4px; font-size: .74rem; line-height: 1.2; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 14px; }
.nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__list a {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: .84rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav__list a:hover { background: var(--sky-100); color: var(--sky-ink); }
.nav__list a[aria-current="true"] { background: var(--green-50); color: var(--green-700); font-weight: 600; }

.nav-toggle {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer;
  transition: background-color .2s;
}
.nav-toggle:hover { background: var(--sky-100); }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }

/* ---------- Slider principal ---------- */
.hero { padding-top: 0; }
.slider {
  --interval: 7000ms;
  --gutter: max(1.25rem, calc((100% - 1200px) / 2)); /* alinea textos y controles con el resto del sitio */
  position: relative; width: 100%;
  height: clamp(460px, 66vh, 640px);
  height: clamp(460px, calc(100svh - var(--header-h) - 70px), 720px);
  overflow: hidden; isolation: isolate;
  border-radius: 0; background: #143D2C; color: #fff;
}
.slider__viewport { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }
.slide__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: contrast(1.05) saturate(1.1); }

/* Fondos de ejemplo (cuaderno cuadriculado) mientras no haya videos o imágenes */
.slide__media--a, .slide__media--b, .slide__media--c { background-color: #1F7A6A; }
.slide__media--a {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    radial-gradient(60% 90% at 88% 12%, rgba(176,224,230,.6), transparent 62%),
    radial-gradient(55% 70% at 8% 95%, rgba(60,179,113,.65), transparent 62%),
    linear-gradient(135deg, #2E8B57 0%, #1F7A6A 55%, #2B84A8 100%);
}
.slide__media--b {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    radial-gradient(60% 90% at 12% 15%, rgba(173,216,230,.6), transparent 62%),
    radial-gradient(55% 70% at 92% 90%, rgba(46,139,87,.65), transparent 62%),
    linear-gradient(135deg, #2B84A8 0%, #2A8A9A 50%, #2E8B57 100%);
}
.slide__media--c {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    radial-gradient(60% 80% at 50% 0%, rgba(135,206,235,.55), transparent 62%),
    radial-gradient(60% 70% at 100% 100%, rgba(60,179,113,.55), transparent 62%),
    linear-gradient(160deg, #1F7A6A 0%, #2E8B57 55%, #3CB371 100%);
}

.slide__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 16, 12, .34) 0%, rgba(4, 16, 12, 0) 55%),
    linear-gradient(180deg, rgba(4, 16, 12, 0) 58%, rgba(4, 16, 12, .5) 100%);
}
.slide__content { position: absolute; left: var(--gutter); bottom: max(0px, calc(100% - 100svh)); width: min(780px, calc(100% - 2.5rem)); padding: 0 0 120px; }
.slide__content > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.slide.is-active .slide__content > * { opacity: 1; transform: none; }
.slide.is-active .slide__content > *:nth-child(2) { transition-delay: .12s; }
.slide.is-active .slide__content > *:nth-child(3) { transition-delay: .24s; }
.slide__title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
  margin: 0 0 1rem; font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
}
.slide__text { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); max-width: 46ch; margin: 0 0 1.6rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); opacity: .94; }

.slider__bottom {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(0px, calc(100% - 100svh)); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 0 clamp(20px, 3vw, 32px);
}
.slider.is-single .slider__bottom { display: none; }
.slider__bars { display: flex; gap: 8px; flex: 0 1 380px; }
.bar { position: relative; flex: 1; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); }
.bar span { position: absolute; left: 0; top: 8px; width: 0; height: 4px; border-radius: 4px; background: #fff; }
.bar.is-done span { width: 100%; }
.bar.is-active span { animation: bar-fill var(--interval) linear forwards; }
.slider.is-paused .bar.is-active span { animation-play-state: paused; }
.bar.is-video.is-active span { animation: none; }
@keyframes bar-fill { from { width: 0; } to { width: 100%; } }

.slider__buttons { display: flex; gap: 8px; }
.round-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--sky-200); color: var(--green-800); cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.round-btn:hover { background: var(--green-600); color: #fff; }
.round-btn:active { transform: scale(.95); }
.round-btn .icon { width: 20px; height: 20px; }
.ico-play { display: none; }
.slider.is-user-paused .ico-play { display: block; }
.slider.is-user-paused .ico-pause { display: none; }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--soft { background: var(--bg-soft); }
.section--sky { background: var(--sky-50); }
.section--tight { padding-top: 0; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1rem clamp(2rem, 6vw, 5rem); align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.section-head h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.section-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.section-head__side p { max-width: 54ch; margin: 0; color: var(--ink-soft); }

/* UGEL 360° – cabecera centrada impactante */
#ugel360 .section-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: clamp(32px, 5vw, 60px);
}
#ugel360 .section-head h2 {
  font-size: clamp(2.8rem, 2rem + 3vw, 5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-brand) 50%, #1aa76d 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: .4rem;
}
#ugel360 .section-head__side p { display: none; }
#ugel360 .section-head__side { align-items: center; }
.link-more {
  display: inline-flex; align-items: center; gap: .45rem; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--green-200); color: var(--green-700); font-weight: 600; text-decoration: none;
  transition: border-color .2s, gap .2s;
}
.link-more:hover { border-color: var(--green-brand); gap: .7rem; }
.link-more .icon { width: 18px; height: 18px; }

/* ---------- UGEL 360° – bento rediseñado ---------- */

/* Grid principal: tarjeta grande + 4 tarjetas pequeñas (2x2) */
.bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

/* Tarjeta base – sin padding, overflow hidden para que la foto encaje */
.tile {
  --tile-bg: #fff; --tile-bg-hover: #f4fbfd; --tile-line: var(--line);
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--tile-line); border-radius: 16px;
  background: var(--tile-bg); color: var(--ink); text-decoration: none;
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -16px rgba(20, 70, 40, .22);
  border-color: var(--green-200);
}

/* Foto encajada perfectamente arriba */
.tile__thumb {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--sky-100);
  flex-shrink: 0;
}
.tile__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.tile:hover .tile__thumb img { transform: scale(1.05); }

/* Placeholder cuando no hay foto */
.tile__thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sky-100) 0%, var(--green-100) 100%);
  color: var(--green-brand);
}
.tile__thumb--empty .icon { width: 40px; height: 40px; opacity: .35; }

/* Contenido debajo de la foto */
.tile__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 18px 20px 20px;
}

/* Fila superior: fecha + botón go */
.tile__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}

/* Fecha */
.tile__date {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--green-100); color: var(--green-700);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
}
.tile__date .icon { width: 12px; height: 12px; }

/* Botón flecha */
.tile__go {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--green-700); flex-shrink: 0;
  transition: background-color .25s, border-color .25s, color .25s;
}
.tile__go .icon { width: 16px; height: 16px; }
.tile:hover .tile__go { border-color: var(--green-600); background: var(--green-600); color: #fff; }

/* Títulos y textos */
.tile h3 {
  margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tile p {
  margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── TARJETA GRANDE (primera, ocupa 2 filas) ── */
.tile--feature {
  grid-column: 1; grid-row: 1 / 3;
}
.tile--feature .tile__thumb {
  aspect-ratio: 4/5;  /* más alta para la tarjeta grande */
  min-height: 260px;
}
.tile--feature h3 {
  font-size: clamp(1.25rem, .9rem + .9vw, 1.65rem);
  letter-spacing: -.02em; line-height: 1.2;
  -webkit-line-clamp: 4;
}
.tile--feature .tile__body { padding: 22px 24px 24px; }

/* ── Variante sin foto (tile--sky para noticias sin imagen) ── */
.tile--sky {
  --tile-bg: var(--sky-100); --tile-bg-hover: #e8f6fb; --tile-line: #cfe8f0;
}
.tile--sky .tile__thumb--empty {
  background: linear-gradient(135deg, #d6eef8 0%, #c8e8f4 100%);
}
.tile--sky .tile__date { background: #fff; }

/* Quitar overflow en tarjetas sin foto para padding limpio */
.tile--news { }
.tile--news .tile__thumb--empty { aspect-ratio: 3/2; min-height: 120px; }

/* Ícono para tarjetas manuales (sin noticias de Facebook) */
.tile__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--green-100); color: var(--green-brand);
}
.tile--sky .tile__icon { background: #fff; }

/* Hover sin desplazar tarjetas manuales (sin foto) */
.tile--feature.tile--no-photo:hover { background: var(--sky-100); }

/* ---------- UGEL 360° – publicaciones: 5 columnas, foto completa, fecha y título ---------- */

/* Esta sección ocupa todo el ancho de la pantalla (con un margen pequeño) para que las fotos se vean grandes */
.container--wide { width: calc(100% - clamp(24px, 2.4vw, 80px)); }

/*
 * Fondo de la sección: azul petróleo profundo con destellos verdes y celestes (colores de la UGEL) y una trama
 * muy fina de puntos. Es un fondo neutro y oscuro: deja que los colores de cada publicación sean los protagonistas.
 */
.section--360 {
  position: relative; color: #fff;
  background:
    radial-gradient(60% 55% at 8% 0%, rgba(46, 139, 87, .38) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(55% 55% at 96% 100%, rgba(30, 110, 150, .45) 0%, rgba(30, 110, 150, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #0c1c2a 0%, #0a2530 55%, #0b2a26 100%);
}
/* Cabecera de la sección sobre el fondo oscuro */
#ugel360.section--360 .section-head h2 {
  background: linear-gradient(135deg, #ffffff 0%, #c9f4dc 55%, #8fe0c0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#ugel360.section--360 .link-more { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
#ugel360.section--360 .link-more:hover { border-bottom-color: #8fe0c0; }

/* Cuadrícula fija: 5 columnas iguales (10 publicaciones = 2 filas) */
.gallery360 {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 28px);
}

/*
 * Tarjeta "ambiental": su color sale de su propia foto. Debajo va la misma foto muy difuminada (post__ambient)
 * y encima un degradado oscuro que garantiza que la fecha y el título siempre se lean, sea cual sea la foto.
 * El tamaño de las letras sigue el ancho de la tarjeta (unidades cqw), así se leen bien en pantallas muy anchas.
 */
.post {
  --pad: clamp(8px, .7vw, 14px);  /* grosor del marco */
  container-type: inline-size;
  position: relative; isolation: isolate; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--pad) var(--pad) 0;
  border-radius: 20px;
  background: linear-gradient(160deg, #16384a 0%, #12402f 100%);  /* mientras carga la foto, o si no tiene */
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; text-decoration: none; overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.post__ambient {
  position: absolute; z-index: 0; top: -15%; left: -15%; width: 130%; height: 130%;
  object-fit: cover; filter: blur(34px) saturate(1.5) brightness(.9);
  transition: filter .4s var(--ease);
}
.post::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 16, 24, .12) 0%, rgba(6, 16, 24, .5) 55%, rgba(6, 16, 24, .86) 100%);
}
.post:hover, .post:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .9);
}
.post:hover .post__ambient, .post:focus-visible .post__ambient { filter: blur(30px) saturate(1.8) brightness(1.05); }
.post:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 3px; }

/*
 * Caja de foto uniforme (4:5) para que todas las tarjetas queden alineadas. La foto se muestra ENTERA (contain);
 * lo que sobra a los lados o arriba/abajo se rellena con la misma foto difuminada, nunca con recortes.
 */
.post__photo {
  position: relative; z-index: 2; isolation: isolate; flex: none; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: hidden; background: #0c1c2a;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .16);
}
.post__bg {
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; z-index: -1;
  object-fit: cover; filter: blur(18px) saturate(1.5) brightness(.6);
}
.post__img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.post__photo--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e5670 0%, #2e8b57 100%); color: #fff;
}
.post__photo--empty .icon { width: 40px; height: 40px; opacity: .55; }

/* Fecha y título */
.post__body {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .65rem;
  padding: clamp(10px, 4cqw, 18px) 4px clamp(12px, 5cqw, 22px);
}
.post__date {
  display: inline-flex; align-items: center; gap: .4em; max-width: 100%;
  padding: .3em .8em; border-radius: 14px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .78rem; font-size: clamp(.7rem, 3.3cqw, 1.05rem);
  font-weight: 700; line-height: 1.25; letter-spacing: .01em;
}
.post__date .icon { width: 1.05em; height: 1.05em; flex: none; }
.post__title {
  margin: 0; font-size: 1.02rem; font-size: clamp(.9rem, 4.6cqw, 1.7rem);
  font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  min-height: 2.7em;  /* dos líneas: los títulos cortos no desalinean la fila */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Responsive */

/* ---------- Convocatorias ---------- */
.calls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.call {
  display: flex; flex-direction: column; gap: .7rem; padding: 26px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: background-color .3s, border-color .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.call:hover { border-color: var(--green-200); background: var(--green-50); transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(31, 107, 67, .55); }
.call__top { display: flex; align-items: center; gap: 10px; }
.call__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--green-100); color: var(--green-brand); }
.chip { padding: 4px 11px; border-radius: 999px; background: var(--sky-100); color: var(--sky-ink); font-size: .8rem; font-weight: 600; }
.badge-new { margin-left: auto; padding: 4px 11px; border-radius: 999px; background: var(--green-600); color: #fff; font-size: .75rem; font-weight: 700; }
.call h3 { margin: .25rem 0 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.call p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.call__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
}
.call__date { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .88rem; }
.call__date .icon { width: 18px; height: 18px; }
.empty { padding: 28px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); text-align: center; }

/* ---------- Comunidad ---------- */
.community {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 72px); align-items: center; overflow: hidden;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--radius); background: var(--sky-100);
}
.community__copy h2 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.community__copy > p { max-width: 46ch; color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2rem 0 0; padding: 0; list-style: none; }
.stat { display: flex; flex-direction: column; padding: 20px 22px; border: 1px solid #CFE8F0; border-radius: var(--radius); background: #fff; }
.stat__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 10px; background: var(--green-100); color: var(--green-brand); }
.stat__icon .icon { width: 20px; height: 20px; }
.stat__num { color: var(--green-brand); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 4px; color: var(--ink-soft); font-size: .92rem; line-height: 1.35; }
.art { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Enlaces directos ---------- */
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.link-tile {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none;
  transition: border-color .25s, box-shadow .25s var(--ease), transform .25s var(--ease);
}
.link-tile__icon {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--sky-100); color: var(--sky-ink);
  transition: background-color .25s, color .25s;
}
.link-tile .icon--sm { width: 16px; height: 16px; margin-left: auto; color: var(--ink-soft); }
.link-tile:hover { border-color: var(--green-brand); transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(31, 107, 67, .6); }
.link-tile:hover .link-tile__icon { background: var(--green-600); color: #fff; }

/* ---------- Pie de página ---------- */
.site-footer { background: #333333; color: rgba(255, 255, 255, .82); font-size: .975rem; }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px clamp(32px, 6vw, 80px); padding-block: clamp(48px, 6vw, 80px);
}
.footer__title { margin: 0 0 1rem; color: #fff; font-size: 1rem; font-weight: 700; }
.footer__about p { max-width: 42ch; margin: 1.1rem 0 0; }
.contact, .footer__links { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.contact li { display: flex; align-items: flex-start; gap: .75rem; }
.contact .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--green-500); }
.site-footer a { color: var(--sky-200); text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; text-decoration: none; }
.brand--light .brand__text small { color: rgba(255, 255, 255, .7); }
.footer__bar { padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .65); font-size: .875rem; }
.footer__bar p { margin: 0; }

/* ---------- Página del panel (marcador de posición) ---------- */
.page-center { display: grid; place-items: center; min-height: 100vh; margin: 0; background: var(--sky-50); }
.notice { max-width: 520px; margin: 20px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.notice h1 { margin-bottom: .75rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.notice p { margin-bottom: 1.5rem; color: var(--ink-soft); }

/* ---------- Animaciones ---------- */
html.js .reveal { opacity: 0; }
html.js .reveal.is-visible { opacity: 1; animation: fade-up .7s var(--ease) var(--d, 0ms) backwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

html.js .art .char { opacity: 0; }
html.js .art-wrap.is-visible .char { opacity: 1; animation: char-in .9s var(--ease) var(--d, 0s) backwards; }
@keyframes char-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.float { animation: float-y 6s ease-in-out infinite; }
.float.f2 { animation-duration: 7s; animation-delay: -2s; }
.float.f3 { animation-duration: 6.5s; animation-delay: -4s; }
.float.f4 { animation-duration: 8s; animation-delay: -1s; }
.float.f5 { animation-duration: 5.5s; animation-delay: -3s; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Si el script no cargó, el contenido se muestra igual */
html.reveal-fallback .reveal, html.reveal-fallback .art .char { opacity: 1 !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .art .char { opacity: 1; }
  html.js .reveal.is-visible, html.js .art-wrap.is-visible .char { animation: none; }
  .float { animation: none; }
  .slide, .slide.is-active { transition-duration: .01s; }
  .slide__content > * { transition: none; }
  .bar.is-active span { animation: none; width: 100%; }
}

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1020px) {
  .bento { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tile--feature { grid-column: 1 / -1; grid-row: auto; }
  .tile--feature .tile__thumb { aspect-ratio: 16/7; }
  .community { grid-template-columns: 1fr; }
  .community__art { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 1160px) {
  .nav-toggle { display: grid; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 12px 20px 22px; border-bottom: 1px solid var(--line); background: #fff;
    box-shadow: 0 22px 30px -24px rgba(20, 60, 50, .45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__list a { padding: 12px; }
  .nav .btn { width: 100%; }
  .nav__admin { align-self: flex-start; width: 40px; height: 40px; }
}

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .slide__content { padding-bottom: 112px; }
}

@media (max-width: 1099px) {
  /* Tablet: 2 columnas (10 publicaciones = 5 filas) */
  .gallery360 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 519px) {
  /* Celular: una publicación por fila */
  .gallery360 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .tile--feature .tile__thumb { aspect-ratio: 16/9; }
  .stat__num { font-size: 1.85rem; }
  .stats { gap: 10px; }
  .stat { padding: 16px; }
  .slider { height: clamp(500px, 78vh, 600px); }
  .slider__bars { flex-basis: 140px; }
  .slider__buttons { gap: 6px; }
  .round-btn { width: 40px; height: 40px; }
  .brand__text small { display: none; }
}

/* ---------- Logotipo subido desde el panel ---------- */
.brand__logo {
  display: block; flex: none; width: auto; max-width: 240px; height: 64px; object-fit: contain;
}
.site-footer .brand__logo { height: 44px; }

/* Pantallas anchas: el logotipo ocupa el costado izquierdo de la cabecera */
@media (min-width: 1560px) {
  .site-header__inner { justify-content: flex-end; }
  .site-header .brand { position: absolute; left: 56px; top: 0; bottom: 0; gap: 14px; }
  .site-header .brand__logo { height: 80px; max-width: none; }
}

/* Lema junto al logotipo: dos renglones */
.brand__motto {
  max-width: 11em; padding: .04em .14em .1em 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-style: italic; font-weight: 600; letter-spacing: .005em;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.95rem); line-height: 1.12;
  color: var(--green-700); text-wrap: balance;
}
@media (max-width: 1180px) { .brand__motto { font-size: 1.4rem; } }
@media (max-width: 1160px) { .brand__motto { font-size: 1.3rem; } }
@media (max-width: 560px) { .brand__motto { font-size: 1.08rem; } .brand__logo { height: 54px; } }

/* ---------- Acceso al panel: solo el candado ---------- */
.nav__admin {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border: 1.5px solid var(--green-brand); border-radius: var(--radius-sm);
  background: transparent; color: var(--green-700); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav__admin:hover { background: var(--green-600); color: #fff; }
.nav__admin .icon { width: 15px; height: 15px; }

/* ---------- Página de convocatorias ---------- */
.page-hero { padding-top: clamp(40px, 6vw, 72px); }
.page-hero h1 { margin: 0 0 .75rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.page-hero p { max-width: 56ch; margin: 0; color: var(--ink-soft); }
.section--list { padding-top: clamp(28px, 4vw, 44px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.filter {
  padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}
.filter:hover { border-color: var(--green-brand); color: var(--green-700); }
.filter.is-active { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pager a, .pager span {
  min-width: 42px; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-weight: 600; text-align: center; text-decoration: none;
}
.pager a:hover { border-color: var(--green-brand); color: var(--green-700); }
.pager .is-current { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.pager .is-disabled { opacity: .45; }

/* ==========================================================================
   Cabecera: cinta oscura translúcida sobre el video (que sube hasta arriba)
   ========================================================================== */
.site-header {
  /* matices suaves de azul, verde, limón, amarillo y plomo sobre la cinta oscura */
  background: linear-gradient(100deg, rgba(30, 111, 181, .34) 0%, rgba(27, 154, 92, .26) 35%, rgba(140, 198, 63, .17) 58%, rgba(244, 208, 63, .12) 78%, rgba(141, 153, 166, .2) 100%);
  box-shadow: inset 0 0 0 100vmax rgba(6, 22, 34, .6), inset 0 -1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  border-bottom: 0;
  transition: box-shadow .35s;
}
/* al bajar por la página, la cinta se vuelve más sólida para que se lea sobre el blanco */
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: inset 0 0 0 100vmax rgba(6, 22, 34, .9), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 10px 26px -12px rgba(4, 18, 30, .6); }
/* páginas sin video: la cinta es sólida desde el inicio */
body:not(:has(.hero)) .site-header { box-shadow: inset 0 0 0 100vmax rgba(6, 22, 34, .92), inset 0 -1px 0 rgba(255, 255, 255, .12); }

/* el video sube hasta el borde superior, por detrás de la cinta */
.hero { margin-top: calc(var(--header-h) * -1); }
.slider {
  height: auto; aspect-ratio: var(--ratio, 2.4); min-height: 440px; max-height: max(620px, 120svh);
  background: #0a1814;
}
.slider.is-measured { transition: aspect-ratio .6s var(--ease); }
@media (max-width: 560px) { .slider { height: auto; } }

/* Brillo suave que recorre la cinta */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: header-sheen 9s ease-in-out infinite;
}
@keyframes header-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* Luz que sigue al cursor dentro de la cinta */
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.site-header:hover::after { opacity: 1; }

/* Logotipo sin placa: directo sobre la cinta */
.brand { color: #fff; }
.brand__logo {
  box-sizing: content-box; height: 62px; padding: 0; background: none; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  transition: transform .3s var(--ease), filter .3s;
}
.brand:hover .brand__logo { transform: translateY(-2px) rotate(-1.5deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
@media (min-width: 1560px) { .site-header .brand__logo { height: 76px; } }
@media (max-width: 560px) { .brand__logo { height: 52px; } }

/* Lema y menú en blanco, con sombra suave */
.brand__motto { color: #fff; text-shadow: 0 1px 3px rgba(2, 14, 26, .7), 0 0 16px rgba(2, 14, 26, .35); }
.brand__text small { color: rgba(255, 255, 255, .88); }

.nav__list a {
  color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(2, 14, 26, .6);
  transition: background-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.nav__list a:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.nav__list a[aria-current="true"] { background: #fff; color: #0b4a2f; text-shadow: none; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }

.nav__admin {
  border-color: rgba(255, 255, 255, .75); color: #fff; background: rgba(255, 255, 255, .1);
  transition: transform .25s var(--ease), background-color .2s, box-shadow .2s, color .2s;
}
.nav__admin:hover { background: #fff; color: #0b4a2f; transform: scale(1.1) rotate(-8deg); box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
.nav-toggle { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; }
.nav-toggle:hover { background: rgba(255, 255, 255, .26); }

/* Móvil: el menú desplegable sigue siendo blanco y legible */
@media (max-width: 1160px) {
  .nav { border-bottom: 0; }
  .nav__list a { color: var(--ink); text-shadow: none; }
  .nav__list a:hover { background: var(--sky-100); color: var(--sky-ink); transform: none; box-shadow: none; }
  .nav__list a[aria-current="true"] { background: var(--green-50); color: var(--green-700); box-shadow: none; }
  .nav__admin { background: #fff; color: var(--green-700); border-color: var(--green-brand); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before { animation: none; opacity: 0; }
  .brand:hover .brand__logo, .nav__list a:hover, .nav__admin:hover { transform: none; }
}

/* Página de convocatorias: conteo en los filtros y enlace de regreso */
.filter__n { display: inline-block; min-width: 1.5em; margin-left: .3em; padding: 0 .45em; border-radius: 999px; background: var(--sky-100); color: var(--sky-ink); font-size: .78rem; font-weight: 700; line-height: 1.6; text-align: center; }
.filter.is-active .filter__n { background: rgba(255, 255, 255, .22); color: #fff; }
.page-hero .link-more { margin-top: 1.1rem; }

/* ---------- Convocatorias: cinco tarjetas con la persona "saliendo" de la tarjeta (efecto 3D) ---------- */
.call-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 96px 18px; margin: 0; padding: 84px 0 0; list-style: none; }
.call-types > li { display: flex; flex: 1 1 200px; min-width: 0; max-width: 250px; }
.call-type {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%;
  border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, var(--sky-100) 0%, #fff 62%);
  box-shadow: 0 24px 44px -30px rgba(30, 86, 112, .6);
  transition: box-shadow .35s var(--ease);
}
.call-type:hover { box-shadow: 0 34px 54px -28px rgba(30, 86, 112, .7); }

/* Zona de la persona: mismo alto útil dentro de la tarjeta (170px) en las tres variantes */
.call-type__art { position: relative; flex: none; width: 100%; height: 170px; }

/* Persona recortada: sin marco, sobresale por arriba y por los lados; solo se corta por abajo */
.call-type__art--cutout { height: 250px; margin-top: -80px; clip-path: inset(-140px -40px 0 -40px); }
.call-type__art--cutout::before {
  content: ""; position: absolute; left: 50%; bottom: -34px; width: 84%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: linear-gradient(160deg, var(--green-200) 0%, var(--green-500) 100%); opacity: .55;
}
.call-types > li:nth-child(even) .call-type__art--cutout::before { background: linear-gradient(160deg, var(--sky-200) 0%, var(--sky-400) 100%); opacity: .7; }
.call-type__art--cutout img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 14px rgba(10, 40, 35, .32)) drop-shadow(0 2px 3px rgba(10, 40, 35, .28));
  transform: perspective(700px) rotateY(calc(var(--rx, 0) * 9deg)) rotateX(calc(var(--ry, 0) * -6deg)) translateY(var(--lift, 0px)) scale(var(--sc, 1));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
.call-type.is-cutout:hover .call-type__art--cutout img {
  --lift: -8px; --sc: 1.05;
  filter: drop-shadow(0 26px 20px rgba(10, 40, 35, .36)) drop-shadow(0 3px 4px rgba(10, 40, 35, .3));
}

/* Foto con fondo (no recortada): dentro de la tarjeta */
.call-type__art--photo { overflow: hidden; border-radius: 28px 28px 0 0; }
.call-type__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* Dibujo de respaldo cuando no hay foto */
.call-type__art--svg { display: flex; align-items: flex-end; justify-content: center; padding-top: 14px; }
.avatar { display: block; width: auto; max-width: 100%; height: 100%; overflow: visible; }
.call-type.is-empty .avatar, .call-type.is-empty .call-type__art--cutout img { opacity: .8; }

/* Textos, siempre centrados */
.call-type__body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .4rem; width: 100%; padding: 8px 18px 24px; }
.call-type__label { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.call-type__sub { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.4; }
.call-type__last { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding-top: 16px; }
.call-type__lasttitle {
  margin: 0; min-height: 2.7em; font-size: .92rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.call-type__date { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: .4rem; margin: 0; color: var(--ink-soft); font-size: .85rem; white-space: nowrap; }
.call-type__date .icon { width: 16px; height: 16px; }
.call-type__new { margin: 0; padding: 2px 10px; }
.call-type__btn { width: 100%; }
.call-type__all { color: var(--green-700); font-size: .85rem; font-weight: 600; }
.call-type__none { margin: auto 0 0; padding-top: 16px; color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 559px) {
  .call-types { gap: 92px 16px; padding-top: 84px; }
  .call-types > li { flex-basis: 100%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-type__art--cutout img { transition: none; transform: none; }
}

/* ---------- Convocatorias: fondo oscuro de la misma familia que UGEL 360° ---------- */
/* Empieza con el mismo color con el que termina UGEL 360° (#0b2a26), para que las dos secciones se unan sin corte. */
.section--conv {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 50% at 94% 0%, rgba(30, 110, 150, .42) 0%, rgba(30, 110, 150, 0) 70%),
    radial-gradient(60% 55% at 4% 100%, rgba(46, 139, 87, .40) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #0b2a26 0%, #0a2530 50%, #0c1c2a 100%);
}
.section--conv .section-head h2 {
  background: linear-gradient(135deg, #ffffff 0%, #c9f4dc 55%, #8fe0c0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--conv .section-head__side p { color: rgba(255, 255, 255, .78); }
.section--conv .link-more { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.section--conv .link-more:hover { border-bottom-color: #8fe0c0; }

/* Tarjetas de vidrio sobre el fondo oscuro */
.section--conv .call-type {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 30px 50px -30px rgba(0, 0, 0, .75);
}
.section--conv .call-type:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(143, 224, 192, .35), 0 38px 60px -28px rgba(0, 0, 0, .85);
}
.section--conv .call-type__label { color: #fff; }
.section--conv .call-type__sub { color: rgba(255, 255, 255, .72); }
.section--conv .call-type__lasttitle { color: #fff; }
.section--conv .call-type__date, .section--conv .call-type__none { color: rgba(255, 255, 255, .72); }
.section--conv .call-type__all { color: #8fe0c0; }

/* Resplandor de color detrás de cada persona y sombra que se vea sobre fondo oscuro */
.section--conv .call-type__art--cutout::before {
  opacity: 1;
  background: radial-gradient(circle at 50% 38%, rgba(143, 224, 192, .95) 0%, rgba(46, 139, 87, .6) 55%, rgba(46, 139, 87, 0) 100%);
}
.section--conv .call-types > li:nth-child(even) .call-type__art--cutout::before {
  opacity: 1;
  background: radial-gradient(circle at 50% 38%, rgba(176, 224, 230, .95) 0%, rgba(30, 130, 180, .6) 55%, rgba(30, 130, 180, 0) 100%);
}
.section--conv .call-type__art--cutout img {
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .5));
}
.section--conv .call-type.is-cutout:hover .call-type__art--cutout img {
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 2px rgba(255, 255, 255, .6));
}
.section--conv .empty { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .75); }

/* ---------- Convocatorias: la persona es el centro de atención (grande, nítida y sin opacidad) ---------- */
.call-types { gap: 132px 18px; padding-top: 122px; }
.call-type__art--cutout { height: 290px; margin-top: -120px; clip-path: inset(-170px -30px 0 -30px); }
.call-type__art--cutout::before { bottom: -30px; width: 88%; }
.call-type__art--cutout img {
  inset: auto; left: -6%; bottom: 0; width: 112%; height: 100%; max-width: none;
  opacity: 1;
  transform: none;                         /* en reposo no se transforma: así la imagen se dibuja a su resolución real */
  image-rendering: auto;
  filter: contrast(1.05) saturate(1.1) drop-shadow(0 18px 16px rgba(0, 0, 0, .5));
}
/* Las tarjetas sin convocatorias NO se apagan: la persona se ve igual de viva */
.call-type.is-empty .avatar,
.call-type.is-empty .call-type__art--cutout img { opacity: 1; filter: none; }
.call-type.is-empty .call-type__art--cutout img { filter: contrast(1.05) saturate(1.1) drop-shadow(0 18px 16px rgba(0, 0, 0, .5)); }
/* Giro 3D solo al pasar el mouse */
.section--conv .call-type.is-cutout:hover .call-type__art--cutout img {
  transform: perspective(700px) rotateY(calc(var(--rx, 0) * 9deg)) rotateX(calc(var(--ry, 0) * -6deg)) translateY(-8px) scale(1.04);
  filter: contrast(1.05) saturate(1.1) drop-shadow(0 28px 22px rgba(0, 0, 0, .55));
}
@media (max-width: 559px) {
  .call-types { gap: 128px 16px; padding-top: 122px; }
}

/* ---------- Convocatorias: cabecera igual a la de UGEL 360° (centrada, mismo tamaño y peso) ---------- */
#convocatorias .section-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: clamp(8px, 2vw, 24px);
}
#convocatorias .section-head h2 {
  margin: 0 0 .4rem; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em;
}
#convocatorias .section-head__side { align-items: center; gap: 1rem; }
#convocatorias .section-head__side p { max-width: 52ch; margin-inline: auto; font-size: 1.05rem; }

/* ---------- Menos espacio entre UGEL 360° y Convocatorias ---------- */
#ugel360.section--360 { padding-bottom: clamp(36px, 4vw, 56px); }
.section--conv { padding-top: clamp(20px, 2.5vw, 36px); }

/* ======================================================================
   ENTIDAD: botón con menú desplegable y página (Quiénes somos, Unidades, Oficinas, Directorio)
   ====================================================================== */
.nav__item--drop { position: relative; }
.nav__drop-link { display: inline-flex !important; align-items: center; gap: 4px; }
.nav__caret { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav__item--drop:hover .nav__caret,
.nav__item--drop:focus-within .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 210px;
  margin: 0; padding: 14px 8px 8px; list-style: none;
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s var(--ease), visibility 0s linear .18s;
}
.nav__sub::before {   /* la tarjeta del menú (el relleno de arriba mantiene el cursor dentro al bajar) */
  content: ""; position: absolute; inset: 8px 0 0 0; z-index: -1; border-radius: 14px;
  background: linear-gradient(180deg, #0f2a38 0%, #0b2028 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .65);
}
.nav__item--drop:hover > .nav__sub,
.nav__item--drop:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__sub a { display: block; padding: 10px 14px; text-align: left; white-space: nowrap; }
.nav__sub a:hover { transform: none; }

.section--entidad-hero { padding-block: clamp(44px, 6vw, 84px) clamp(36px, 4vw, 56px); }
.section--entidad-hero .section-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.section--entidad-hero .section-head h1 {
  margin: 0 0 .6rem; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, #ffffff 0%, #c9f4dc 55%, #8fe0c0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--entidad-hero .section-head p { max-width: 54ch; margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }

.entidad-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.entidad-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
  color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background-color .2s, transform .2s var(--ease), color .2s;
}
.entidad-tab .icon { width: 18px; height: 18px; }
.entidad-tab:hover { background: #fff; color: #0b4a2f; transform: translateY(-2px); }

.entidad-sec { scroll-margin-top: calc(var(--header-h) + 8px); }
.entidad-sec--alt { background: var(--sky-50); }
.entidad-sec__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); }
.entidad-sec__icon {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px;
  background: var(--green-100); color: var(--green-700);
}
.entidad-sec__icon .icon { width: 26px; height: 26px; }
.entidad-sec__head h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.entidad-sec__head p { margin: .3rem 0 0; color: var(--ink-soft); max-width: 60ch; }

.entidad-about { display: grid; gap: 20px; }
.entidad-about__item {
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
  padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.entidad-about__item:not(:has(img)) { grid-template-columns: 1fr; }
.entidad-about__img { width: clamp(120px, 18vw, 220px); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.entidad-about__item h3 { margin: 0 0 .35rem; font-size: 1.25rem; color: var(--green-700); }
.entidad-about__sub { margin: 0 0 .6rem; font-weight: 600; color: var(--sky-ink); }
.entidad-about__item p { margin: 0 0 .8rem; line-height: 1.7; }
.entidad-about__item p:last-child { margin-bottom: 0; }

.units, .people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.unit, .person {
  display: flex; flex-direction: column; gap: .35rem; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.unit:hover, .person:hover { transform: translateY(-4px); border-color: var(--green-200); box-shadow: 0 18px 30px -22px rgba(20, 60, 50, .5); }
.unit h3, .person h3 { margin: .35rem 0 0; font-size: 1.1rem; line-height: 1.25; }
.unit__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--green-100); color: var(--green-700); }
.unit__icon .icon { width: 23px; height: 23px; }
.unit__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); }
.unit__sub, .person__role { margin: 0; font-weight: 600; font-size: .92rem; color: var(--sky-ink); }
.unit__text, .person__text { margin: .2rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }

.person { align-items: center; text-align: center; }
.person__photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--green-100); }
.person__photo--initials {
  display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--green-brand), #1e6e96);
}
.person__contact { display: grid; gap: 6px; width: 100%; margin: .6rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.unit .person__contact { text-align: left; }
.person__contact li { display: flex; align-items: center; gap: 8px; font-size: .9rem; min-width: 0; }
.person .person__contact li { justify-content: center; }
.person__contact .icon { width: 16px; height: 16px; flex: none; color: var(--green-brand); }
.person__contact a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.person__contact a:hover { color: var(--green-700); text-decoration: underline; }

/* Móvil: dentro del menú blanco, Entidad muestra sus partes debajo, sangradas */
@media (max-width: 1160px) {
  .nav__caret { display: none; }
  .nav__sub {
    position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
    padding: 2px 0 6px 14px; margin-left: 12px; border-left: 2px solid var(--green-200);
  }
  .nav__sub::before { display: none; }
  .nav__item--drop:hover > .nav__sub, .nav__item--drop:focus-within > .nav__sub { transform: none; }
  .nav__sub a { padding: 10px 12px; font-weight: 500; }
  .entidad-about__item { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__caret { transition: none; }
}

/* ======================================================================
   COMUNIDAD: mapa de distritos -> colegios -> ficha del colegio
   ====================================================================== */
.section--comm { padding-top: clamp(40px, 5vw, 72px); }
.comm-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(24px, 3.5vw, 44px); }
.comm-head h2 {
  margin: 0 0 .7rem; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-brand) 50%, #1aa76d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.comm-head p { max-width: 58ch; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

.section--comm > .container { width: min(1480px, 100% - 2.5rem); }
.comm { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }

/* Mapa: sin caja ni fondo, grande, flotando sobre la página; cada distrito es una pieza que se levanta (efecto 3D) */
.comm__map { position: relative; display: flex; flex-direction: column; overflow: visible; perspective: 1400px; }
.comm__stage {
  --rx: 6deg; --ry: 0deg; --mx: 50%; --my: 40%;
  position: relative; line-height: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 50% 60%;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.comm__stage.is-tilting { transition: transform .12s linear; }
.comm__img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 20px 18px rgba(18, 52, 44, .3));   /* sombra del mapa sobre la página */
  transition: opacity .35s;
}
/* Al levantar un distrito (cursor o foco) se oculta la imagen base: si no, queda un "fantasma" duplicado debajo de la pieza */
.comm__map.has-hover .comm__img { opacity: 0; transition: none; }
.comm__map.has-hover .pieces, .comm__map.has-selection .pieces { filter: drop-shadow(0 20px 18px rgba(18, 52, 44, .3)); }
.comm__map.has-selection .comm__img { opacity: 0; }       /* con un distrito elegido se ven solo las piezas (los demás se atenúan) */
.comm__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.dpiece { pointer-events: none; }
.dpiece__lift { transform-box: fill-box; transform-origin: 50% 60%; transition: transform .42s cubic-bezier(.2, .9, .25, 1.15); }
/* Grosor del bloque (pasos hacia abajo) y sombra proyectada sobre el mapa; en reposo todo vale cero para que la transición sea suave */
.dpiece__fx {
  filter:
    drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side))
    drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side)) drop-shadow(0 0 0 var(--side))
    drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: filter .42s cubic-bezier(.2, .9, .25, 1.15), opacity .3s;
}
.dpiece__rim { fill: none; stroke: rgba(255, 255, 255, 0); stroke-width: 2.2; stroke-linejoin: round; transition: stroke .3s; }

.dpiece.is-hover .dpiece__lift, .dpiece.is-selected .dpiece__lift { transform: translateY(-24px) scale(1.035); }
.dpiece.is-hover .dpiece__fx, .dpiece.is-selected .dpiece__fx {
  filter:
    drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side))
    drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side)) drop-shadow(0 3px 0 var(--side))
    drop-shadow(0 24px 16px rgba(18, 40, 36, .42));
}
.dpiece.is-hover .dpiece__rim, .dpiece.is-selected .dpiece__rim { stroke: rgba(255, 255, 255, .95); }
.dpiece.is-selected:not(.is-hover) .dpiece__lift { transform: translateY(-18px) scale(1.025); }
.dpiece__fx { opacity: 1; }
.dpiece.is-dim:not(.is-hover) .dpiece__fx { opacity: .34; }

.dist { fill: transparent; stroke: none; cursor: pointer; outline: none; }
.dist:focus-visible { stroke: #fff; stroke-width: 4; stroke-dasharray: 12 7; }

.comm__tip {
  position: absolute; z-index: 5; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; line-height: 1.3;
  transform: translate(-50%, -150%); background: #0b2a26; color: #fff; font-size: .85rem; font-weight: 700;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6);
}
.comm__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--ink-soft); font-size: .92rem; }
.comm__hint .icon { width: 17px; height: 17px; flex: none; color: var(--green-brand); }

/* Fuente de las cifras: texto centrado bajo el panel, resaltado, con filetes a los lados */
.comm__source {
  grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; padding: 0;
  font-size: 1.02rem; line-height: 1.3; text-align: center; color: var(--ink);
}
.comm__source::before, .comm__source::after { content: ""; flex: 1 1 0; max-width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(46, 139, 87, .55)); }
.comm__source::after { background: linear-gradient(270deg, transparent, rgba(46, 139, 87, .55)); }
.comm__source-lbl { font-weight: 800; letter-spacing: .02em; color: var(--green-brand); }
.comm__source-name { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(251, 191, 36, .85); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.comm__source-name:hover, .comm__source-name:focus-visible { color: var(--green-brand); border-color: var(--green-brand); }
@media (max-width: 960px) { .comm__source { grid-column: auto; margin-top: 0; } }

/* Panel derecho */
.comm__panel { min-width: 0; padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 24px 40px -34px rgba(20, 60, 50, .5); }
.comm__panel [data-view] { animation: commIn .35s var(--ease) both; }
.comm__panel [hidden] { display: none !important; }
@keyframes commIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.comm__panel .stats { margin-top: 0; gap: 10px; }
.comm__panel .stat { padding: 14px 16px; border-color: var(--line); background: var(--sky-50); }
.comm__panel .stat__icon { width: 32px; height: 32px; margin-bottom: 8px; }
.comm__panel .stat__num { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.comm__panel .stat__label { font-size: .85rem; }
.comm__sub-title { margin: 22px 0 10px; font-size: 1rem; font-weight: 800; color: var(--ink); }

.dist-rows, .schools { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dist-row, .school-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.dist-row:hover, .school-row:hover { border-color: var(--green-brand); background: var(--green-50); transform: translateX(3px); box-shadow: 0 10px 18px -16px rgba(20, 60, 50, .6); }
.dist-row:focus-visible, .school-row:focus-visible, .comm__back:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }
.dist-row__name { flex: 1; font-weight: 700; }
.dist-row__n { font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.dist-row__n small { font-weight: 600; color: var(--ink-soft); }
.dist-row .icon { width: 18px; height: 18px; color: var(--green-brand); flex: none; }

.comm__back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 12px 6px 8px; border: 0; border-radius: 999px;
  background: var(--sky-100); color: var(--sky-ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease);
}
.comm__back:hover { background: var(--sky-200); transform: translateX(-2px); }
.comm__back .icon { width: 16px; height: 16px; }
.comm__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.comm__title:focus { outline: none; }
.comm__cap { margin: .3rem 0 0; color: var(--ink-soft); }

.comm__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 16px; padding: 0; list-style: none; }
.comm__totals--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comm__total { display: flex; flex-direction: column; padding: 12px 12px 10px; border-radius: 12px; background: var(--green-50); border: 1px solid var(--green-100); }
.comm__num { color: var(--green-700); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.comm__lbl { margin-top: 3px; color: var(--ink-soft); font-size: .8rem; line-height: 1.25; }

.comm__search { display: block; margin-bottom: 10px; }
.comm__input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--sky-50); font: inherit; box-sizing: border-box;
}
.comm__input:focus { outline: 3px solid var(--sky-400); border-color: var(--green-brand); background: #fff; }
.schools { max-height: min(46vh, 380px); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; scrollbar-width: thin; }
.school-row__ico { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; flex: none; border-radius: 10px; background: var(--green-100); color: var(--green-700); }
.school-row__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.school-row__txt strong { font-size: .95rem; overflow-wrap: anywhere; }
.school-row__txt small { color: var(--ink-soft); font-size: .8rem; }
.school-row__go { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
.comm__empty { margin: 8px 0 0; padding: 18px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--ink-soft); text-align: center; }

.school-photo { margin: 0 0 16px; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: var(--sky-100); }
.school-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.school-photo.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--sky-ink); background: linear-gradient(135deg, var(--sky-100), var(--green-100)); }
.school-photo.is-empty .icon { width: 54px; height: 54px; opacity: .7; }
.school-photo figcaption { font-size: .85rem; font-weight: 600; opacity: .8; }
.school-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: .7rem 0 0; }
.school-level { padding: 4px 12px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .82rem; font-weight: 700; }
.school-where { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: .9rem; }
.school-where .icon { width: 16px; height: 16px; color: var(--green-brand); }

@media (max-width: 960px) {
  .comm { grid-template-columns: 1fr; }
  .schools { max-height: 320px; }
}
@media (max-width: 480px) {
  .comm__totals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .comm__total { padding: 10px 8px 8px; }
  .comm__lbl { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .comm__panel [data-view] { animation: none; }
  .dist-row, .school-row { transition: none; }
  .comm__stage, .dpiece__lift, .dpiece__fx, .dpiece__rim { transition: none; }
  .comm__stage { transform: none; }
}

/* ======================================================================
   FONDO CLARO Y DE COLOR (reemplaza el fondo oscuro de Convocatorias)
   Celeste suave -> verde menta, con las mismas tarjetas, ahora en blanco translúcido.
   ====================================================================== */
.section--conv {
  color: var(--ink);
  background:
    radial-gradient(55% 55% at 94% 0%, rgba(135, 206, 235, .60) 0%, rgba(135, 206, 235, 0) 70%),
    radial-gradient(60% 60% at 4% 100%, rgba(60, 179, 113, .38) 0%, rgba(60, 179, 113, 0) 70%),
    radial-gradient(rgba(30, 86, 112, .10) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #d9f1f8 0%, #e3f6ec 55%, #f1faf5 100%);
}
.section--conv .section-head h2 {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-brand) 55%, #1aa0b8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--conv .section-head__side p { color: var(--ink-soft); }
.section--conv .link-more { color: var(--green-800); border-bottom-color: rgba(31, 107, 67, .4); }
.section--conv .link-more:hover { border-bottom-color: var(--green-brand); }

.section--conv .call-type {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .72) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 24px 40px -26px rgba(30, 86, 112, .45), 0 2px 0 rgba(255, 255, 255, .8) inset;
}
.section--conv .call-type:hover {
  box-shadow: 0 0 0 1px rgba(46, 139, 87, .35), 0 32px 50px -26px rgba(30, 86, 112, .55);
}
.section--conv .call-type__label { color: var(--green-800); }
.section--conv .call-type__sub { color: var(--ink-soft); }
.section--conv .call-type__lasttitle { color: var(--ink); }
.section--conv .call-type__date, .section--conv .call-type__none { color: var(--ink-soft); }
.section--conv .call-type__all { color: var(--green-700); }
.section--conv .call-type__art--cutout::before {
  background: radial-gradient(circle at 50% 38%, rgba(60, 179, 113, .75) 0%, rgba(60, 179, 113, .38) 55%, rgba(60, 179, 113, 0) 100%);
}
.section--conv .call-types > li:nth-child(even) .call-type__art--cutout::before {
  background: radial-gradient(circle at 50% 38%, rgba(135, 206, 235, .95) 0%, rgba(30, 130, 180, .45) 55%, rgba(30, 130, 180, 0) 100%);
}
.section--conv .call-type__art--cutout img,
.call-type.is-empty .call-type__art--cutout img {
  filter: contrast(1.05) saturate(1.1) drop-shadow(0 16px 14px rgba(18, 52, 44, .35));
}
.section--conv .empty { border-color: rgba(30, 86, 112, .25); color: var(--ink-soft); }

/* Comunidad: fondo suave de color en vez de blanco liso, continuando el de Convocatorias */
.section--comm {
  background:
    radial-gradient(50% 45% at 100% 30%, rgba(135, 206, 235, .28) 0%, rgba(135, 206, 235, 0) 70%),
    radial-gradient(50% 45% at 0% 70%, rgba(60, 179, 113, .20) 0%, rgba(60, 179, 113, 0) 70%),
    linear-gradient(180deg, #f1faf5 0%, #ffffff 40%, #f2fafd 100%);
}

/* ======================================================================
   UGEL TRANSPARENTE (sobre Comunidad): verde vivo y oscuro, ilustraciones profesionales
   ====================================================================== */
.section--transp {
  position: relative; overflow: hidden; color: #fff;
  padding-bottom: clamp(48px, 6vw, 84px);
  background:
    radial-gradient(60% 55% at 8% 0%, rgba(46, 139, 87, .38) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(55% 55% at 96% 100%, rgba(26, 130, 90, .40) 0%, rgba(26, 130, 90, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #0b2a26 0%, #07241a 55%, #04160e 100%);
}
.section--transp .comm-head h2 {
  background: linear-gradient(135deg, #ffffff 0%, #d6ffe6 55%, #7dfab5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--transp .comm-head p { color: rgba(255, 255, 255, .85); }
.transp {
  list-style: none; margin: 0 auto; padding: 84px 0 0; max-width: 1020px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 110px clamp(16px, 2.2vw, 30px);
}
.transp__card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  height: 100%; padding: 0 20px 26px; border-radius: 24px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .07) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 50px -30px rgba(0, 20, 8, .8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.transp__card:hover, .transp__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(125, 250, 181, .55), 0 38px 60px -28px rgba(0, 20, 8, .9);
}
.transp__art { display: block; width: 100%; height: 120px; margin-top: 0; position: relative; pointer-events: none; }
.transp__art::before {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 80%; aspect-ratio: 1; transform: translateX(-50%) translateY(14%);
  background: radial-gradient(circle at 50% 50%, rgba(125, 250, 181, .55) 0%, rgba(34, 214, 117, .22) 55%, rgba(34, 214, 117, 0) 72%);
}
.transp__art img {
  position: absolute; left: 50%; bottom: -30px; width: 100%; max-width: none; height: 270px; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%);
  transition: transform .35s var(--ease);
}
.transp__card:hover .transp__art img { transform: translateX(-50%) translateY(-8px) scale(1.04); }
.transp__label { margin-top: 30px; font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.transp__sub { font-size: .95rem; color: rgba(255, 255, 255, .8); }
.transp__go {
  margin-top: 10px; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #04401f; background: #7dfab5; transition: transform .3s var(--ease), background .3s;
}
.transp__card:hover .transp__go { transform: translateX(4px); background: #fff; }
@media (max-width: 860px) {
  .transp { grid-template-columns: 1fr; max-width: 340px; padding-top: 84px; gap: 110px; }
}
@media (prefers-reduced-motion: reduce) { .transp__card, .transp__art img { transition: none; } }

/* Comunidad: degradado visible de blanco a menta y celeste (se une con Enlaces directos) */
.section--comm {
  background: linear-gradient(180deg, #ffffff 0%, #eaf8f0 38%, #dff2f8 72%, #cfeaf5 100%);
}

/* ======================================================================
   PORTADA: el video se ve completo (sin quedar bajo la cinta ni cortado) y botón de sonido
   ====================================================================== */
.hero { margin-top: 0; }
.slider {
  height: auto; aspect-ratio: var(--ratio, 2.4); min-height: 0;
  max-height: calc(100svh - var(--header-h));              /* siempre cabe completo en la pantalla */
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(34, 214, 117, .18) 0%, rgba(34, 214, 117, 0) 70%),
    linear-gradient(180deg, #0a2a1c 0%, #06150f 100%);
}
.slider:has(.slide__content) { min-height: min(440px, calc(100svh - var(--header-h))); }
.slide__media { object-fit: contain; }
@media (max-width: 560px) { .slider { height: auto; } }
.slider__sound { position: absolute; top: 14px; right: 14px; z-index: 5; }
.slider__sound[hidden] { display: none; }
.slider__sound .ico-off { display: none; }
.slider__sound[aria-pressed="false"] .ico-on { display: none; }
.slider__sound[aria-pressed="false"] .ico-off { display: block; }

/* ======================================================================
   DEGRADADO EN TODO EL SITIO
   ====================================================================== */
body { background: linear-gradient(180deg, #ffffff 0%, #f1faf5 100%) fixed; }
.section--soft:not(.section--360) {
  background:
    radial-gradient(50% 50% at 100% 0%, rgba(135, 206, 235, .25) 0%, rgba(135, 206, 235, 0) 70%),
    linear-gradient(180deg, #f1faf5 0%, #f6fbfd 100%);
}
.section--sky {
  background:
    radial-gradient(55% 55% at 0% 100%, rgba(60, 179, 113, .18) 0%, rgba(60, 179, 113, 0) 70%),
    linear-gradient(180deg, #cfeaf5 0%, #e4f4fa 45%, #f1faf5 100%);
}
.entidad-sec { background: linear-gradient(180deg, #ffffff 0%, #f1faf5 100%); }
.entidad-sec--alt { background: linear-gradient(180deg, #e3f4fa 0%, #f2fafd 100%); }
.site-footer {
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(34, 170, 100, .22) 0%, rgba(34, 170, 100, 0) 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(30, 110, 150, .30) 0%, rgba(30, 110, 150, 0) 70%),
    linear-gradient(180deg, #0f2f26 0%, #0a1c18 100%);
}

/* Portada: la cinta conserva su fondo oscuro de siempre (detrás hay un fondo verde oscuro) y el video empieza justo debajo de ella, completo */
.hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + 10px);
  background: linear-gradient(180deg, #0a2a1c 0%, #06150f 100%);
}
.slider { max-height: calc(100svh - var(--header-h) - 10px); }

/* Portada: el video ocupa todo el ancho del cuadro (sin franjas a los lados ni recortes); la altura sigue a la del video */
.slider { max-height: none; background: #06150f; }
.slide__media { object-fit: cover; }          /* la portada ya tiene la misma proporción que el video, así que no recorta */
.slider__sound-label { display: none; }
.slider__sound.is-hint { width: auto; padding: 0 16px 0 12px; border-radius: 999px; gap: 8px; display: inline-flex; align-items: center; animation: sound-pulse 1.8s ease-in-out infinite; }
.slider__sound.is-hint .slider__sound-label { display: inline; font-size: .85rem; font-weight: 700; white-space: nowrap; }
@keyframes sound-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(125, 250, 181, .55); } 50% { box-shadow: 0 0 0 10px rgba(125, 250, 181, 0); } }
@media (prefers-reduced-motion: reduce) { .slider__sound.is-hint { animation: none; } }

.slider__sound.is-noaudio { animation: none; background: rgba(255, 255, 255, .92); color: #7a2a1d; }

/* ======================================================================
   CORRECCIONES DE RESPONSIVIDAD MÓVIL — 2026-10
   Estos bloques van al final del archivo para ganar en la cascada CSS
   y anular los valores que rompían el diseño en celulares.
   ====================================================================== */

/* --- 1. Slider / Video: limitar altura al 100 % del viewport en móvil ---
   El bloque anterior estableció "max-height: none" en .slider, lo que
   hace que un video vertical (ratio < 1, p. ej. WhatsApp en modo retrato)
   ocupe más de una pantalla completa en teléfonos.
   Aquí restauramos el límite de altura para todas las pantallas ≤ 900 px. */
@media (max-width: 900px) {
  .slider {
    max-height: calc(100svh - var(--header-h));
    overflow: hidden;   /* cortar cualquier contenido que desborde el cuadro */
    min-height: 0;
  }
  /* Asegurar que el viewport interno y cada diapositiva también se corten */
  .slider__viewport {
    max-height: inherit;
    overflow: hidden;
  }
  .slide {
    overflow: hidden;
  }
  /* El media (video o imagen) ocupa exactamente el cuadro del slider;
     "cover" recorta el exceso sin dejar franjas negras. */
  .slide__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* --- 2. Pantallas muy pequeñas (≤ 480 px): ajustes complementarios --- */
@media (max-width: 480px) {
  /* Bento grid y galería 360: evitar desbordamiento horizontal */
  .bento,
  .gallery360 {
    overflow-x: hidden;
  }
  /* Tarjetas de convocatoria: que el texto no rompa el ancho */
  .call-type__body {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .call-type__lasttitle {
    font-size: .9rem;
    line-height: 1.4;
  }
  /* Panel de comunidad: reducir relleno en pantalla muy pequeña */
  .comm__panel {
    padding: 14px 12px;
  }
  /* Números grandes del panel (estadísticas): escalar con el ancho */
  .comm__num {
    font-size: clamp(1.2rem, 5vw, 2rem);
  }
  /* "UGEL Transparente": las tarjetas tienen max-width: 340px pero el
     contenedor lateral agrega márgenes; en un teléfono de 360 px se
     saldría. Aquí lo ajustamos. */
  .transp {
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
  }
}

/* --- 3. Prevenir scroll horizontal global en cualquier móvil --------- */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  /* Las imágenes/videos en flujo normal no deben exceder su contenedor */
  img:not(.slide__media):not(.post__bg):not(.post__ambient),
  video:not(.slide__media) {
    max-width: 100%;
  }
  /* Contenedores de sección */
  .container,
  .container--wide {
    box-sizing: border-box;
  }
}

/* ======================================================================
   CORRECCIONES MÓVIL — FASE 2 — 2026-10
   360, Convocatorias, Comunidad y adaptatividad general
   ====================================================================== */

/* --- UGEL 360: máximo 4 noticias visibles en móvil (menos scroll) ----- */
@media (max-width: 768px) {
  .gallery360 > .post:nth-child(n+5) { display: none; }
  .bento > li:nth-child(n+5),
  .bento > .tile:nth-child(n+5)      { display: none; }
}

/* --- Convocatorias: columna única y tarjetas compactas en móvil ------- */
@media (max-width: 768px) {
  .call-types {
    flex-direction: column;
    align-items: center;
    gap: 80px 0;
    padding-top: 80px;
  }
  .call-types > li {
    flex: none !important;
    width: 100%;
    max-width: 340px;
  }
  /* Arte (ilustración recortada): más baja para reducir altura de sección */
  .call-type__art--cutout {
    height: 180px;
    margin-top: -70px;
    clip-path: inset(-80px -20px 0 -20px);
  }
  .call-type__art--cutout img {
    height: 100%;
  }
  /* Ajuste del resplandor detrás de la ilustración */
  .call-type__art--cutout::before {
    bottom: -20px;
    width: 80%;
  }
}

/* --- Comunidad: scroll correcto al panel (no queda bajo el header) ---- */
@media (max-width: 960px) {
  .comm__panel {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }
  /* Asegurar que los paths SVG del mapa reciban eventos táctiles */
  .dpiece,
  .dpiece__lift,
  .dpiece__fx,
  .dpiece__rim { pointer-events: none; }
  .dist {
    pointer-events: all;
    cursor: pointer;
    touch-action: manipulation;
  }
}

/* --- Padding de secciones reducido en móvil (página más corta) -------- */
@media (max-width: 768px) {
  .section { padding-block: clamp(28px, 5vw, 48px); }
  .section--comm { padding-bottom: clamp(28px, 5vw, 48px); }
}

/* ======================================================================
   MAPA DE COMUNIDAD · panel de distrito más dinámico
   Cifras animadas, peso del distrito en la UGEL, niveles con filtros,
   orden y búsqueda, navegación entre distritos y enlace directo.
   ====================================================================== */
.comm__toprow { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.comm__toprow .comm__back { margin-bottom: 14px; }
.comm__copy {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.comm__copy:hover { border-color: var(--green-brand); color: var(--green-700); background: var(--green-50); }
.comm__copy:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }
.comm__copy .icon { width: 15px; height: 15px; }
.comm__desc { margin: .75rem 0 0; color: var(--ink); line-height: 1.55; font-size: .97rem; }

.comm__share { margin: 0 0 10px; }
.comm__share-txt { margin: 0 0 6px; font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }
.comm__share-txt strong { color: var(--green-700); }
.comm__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--green-100); }
.comm__bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green-brand), #5BBF8A); transition: width .9s var(--ease); }
.comm__ratio { margin: 0 0 14px; color: var(--ink-soft); font-size: .88rem; }

.comm__levels { display: flex; gap: 3px; height: 10px; margin: 4px 0 10px; }
.comm__seg { flex: 1 1 0; min-width: 8px; border-radius: 999px; }
.comm__seg--0, .chip--0::before { background: #2E8B57; }
.comm__seg--1, .chip--1::before { background: #3C9DC2; }
.comm__seg--2, .chip--2::before { background: #86BC7A; }
.comm__seg--3, .chip--3::before { background: #5B7DB1; }
.comm__seg--4, .chip--4::before { background: #C9A04A; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.chip[class*="chip--"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip b { font-variant-numeric: tabular-nums; color: var(--green-700); }
.chip:hover { border-color: var(--green-brand); background: var(--green-50); transform: translateY(-1px); }
.chip[aria-pressed="true"] { border-color: var(--green-brand); background: var(--green-brand); color: #fff; }
.chip[aria-pressed="true"] b { color: #fff; }
.chip:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }

.comm__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.comm__tools .comm__search { margin: 0; }
.comm__select {
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--sky-50); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer;
}
.comm__select:focus { outline: 3px solid var(--sky-400); border-color: var(--green-brand); background: #fff; }
.comm__count { margin: 0 0 8px; color: var(--ink-soft); font-size: .82rem; }

.school-row__bar { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--green-100); }
.school-row__bar i { display: block; height: 100%; border-radius: inherit; background: var(--green-brand); opacity: .75; }

.comm__emptycard {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; padding: 22px 18px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 14px; background: var(--sky-50);
}
.comm__emptyico { width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--green-100); color: var(--green-700); }
.comm__emptycard strong { font-size: 1rem; line-height: 1.3; }
.comm__emptycard p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.comm__jump-title { margin-top: 8px; color: var(--ink-soft); font-size: .84rem; font-weight: 600; }
.comm__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.comm__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.comm__step {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.comm__step--next { justify-content: flex-end; text-align: right; }
.comm__step:hover { border-color: var(--green-brand); background: var(--green-50); }
.comm__step--prev:hover { transform: translateX(-2px); }
.comm__step--next:hover { transform: translateX(2px); }
.comm__step:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }
.comm__step .icon { width: 18px; height: 18px; flex: none; color: var(--green-brand); }
.comm__step-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.comm__step-txt small { color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.comm__step-txt strong { font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }

.dist-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 5px; }
.dist-row__main .dist-row__name { flex: none; }
.dist-row__bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--green-100); }
.dist-row__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-brand), #5BBF8A); }
.dist-row__sub { color: var(--ink-soft); font-size: .76rem; font-weight: 500; }

@media (max-width: 480px) {
  .comm__tools { grid-template-columns: 1fr; }
  .comm__pager { grid-template-columns: 1fr; }
  .comm__step--next { justify-content: space-between; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .comm__bar-fill { transition: none; }
  .chip, .comm__step, .comm__copy { transition: none; }
}

/* ENTIDAD · unidades, oficinas y directorio por unidad */
.unit__sigla {
  align-self: flex-start; display: inline-block; padding: 3px 11px; border-radius: 999px;
  background: var(--green-100); color: var(--green-700); font-size: .78rem; font-weight: 800; letter-spacing: .06em;
}
.unit__offices { margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.unit__offices-title { display: block; margin-bottom: .35rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.unit__offices ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.unit__offices a {
  display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .85rem; color: var(--ink); text-decoration: none; transition: background-color .2s, border-color .2s;
}
.unit__offices a:hover { background: var(--green-100); border-color: var(--green-200); }
.unit__more { margin-top: auto; padding-top: .7rem; font-weight: 700; font-size: .9rem; color: var(--green-700); text-decoration: none; }
.unit__more:hover { text-decoration: underline; }
.unit { scroll-margin-top: calc(var(--header-h) + 12px); }

.org-group + .org-group { margin-top: clamp(28px, 4vw, 44px); }
.org-group__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.25rem; color: var(--green-700); }

.dir-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
.dir-nav .chip { text-decoration: none; }
.dir-group { scroll-margin-top: calc(var(--header-h) + 12px); }
.dir-group + .dir-group { margin-top: clamp(32px, 4.5vw, 52px); }
.dir-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--green-100); }
.dir-group__head h3 { margin: 0; font-size: 1.4rem; letter-spacing: -.01em; }
.dir-group__count { margin-left: auto; font-size: .88rem; color: var(--ink-soft); }
.dir-sub { margin-top: 26px; padding-left: 16px; border-left: 3px solid var(--green-200); scroll-margin-top: calc(var(--header-h) + 12px); }
.dir-sub__title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1.05rem; color: var(--sky-ink); }
.dir-sub__title .icon { width: 20px; height: 20px; }
.dir-sub__empty { margin: 0; color: var(--ink-soft); font-size: .92rem; font-style: italic; }
.person h4 { margin: .35rem 0 0; font-size: 1.05rem; line-height: 1.25; }
@media (max-width: 640px) { .dir-sub { padding-left: 10px; } .dir-group__count { margin-left: 0; } }

/* ======================================================================
   PALETA DEL PORTAL: VERDE · BLANCO · AMARILLO (noviembre 2026)
   (Actualizada: fondos en verde; el amarillo queda en detalles: barras de títulos, botones y bordes.)
   Los colores del logo de la UGEL marcan el ritmo de la portada (oscuro y claro alternados):
     UGEL 360° ......... verde oscuro, título blanco con dorado
     Convocatorias ..... verde claro con poco degradado
     UGEL Transparente . verde oscuro
     Comunidad ......... verde-amarillo claro (el mapa)
     Enlaces directos .. verde oscuro, título blanco con dorado y logos en versión clara
     UGEL.GOB .......... verde claro (en modulos/accesos/estilos.css)
     Pie de página ..... verde profundo
   Todos los títulos centrados llevan una barra amarilla debajo.
   ====================================================================== */
:root {
  --amarillo: #F5C400;
  --amarillo-2: #FFD84D;
  --amarillo-claro-1: #FFFCEE;
  --amarillo-claro-2: #FFF2C4;
  --blanco-1: #FFFFFF;
  --blanco-2: #F7FBF8;
  --verde-oscuro-1: #0B2A26;
  --verde-oscuro-2: #04160E;
  --puntos-verdes: radial-gradient(rgba(46, 139, 87, .07) 1px, transparent 1.5px) 0 0 / 26px 26px;
  --puntos-dorados: radial-gradient(rgba(176, 132, 0, .12) 1px, transparent 1.5px) 0 0 / 26px 26px;
}
body { background: #fff; line-height: 1.75; }

/* --- Fondos por sección (versión verde) ---
   Verde claro con poco degradado: UGEL 360°, Convocatorias, Enlaces directos (y UGEL.GOB en accesos/estilos.css).
   Verde-amarillo claro: Comunidad (el mapa).
   Verde oscuro, como estaba: UGEL Transparente y el pie de página. */
#ugel360.section--360,
#ugel360.section--soft,
.section--conv,
.section--sky,
.entidad-sec {
  color: var(--ink);
  background: var(--puntos-verdes), linear-gradient(180deg, #F2F9F4 0%, #DDEFE3 100%);
}
#ugel360.section--360,
#ugel360.section--soft { background: var(--puntos-verdes), linear-gradient(180deg, #F7FBF8 0%, #E6F3EA 100%); }
.section--comm,
.entidad-sec--alt {
  color: var(--ink);
  background: var(--puntos-verdes), linear-gradient(180deg, #F7FAE6 0%, #E7F1C9 100%);
}
.section--transp {
  background:
    radial-gradient(60% 55% at 8% 0%, rgba(46, 139, 87, .40) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(45% 45% at 96% 100%, rgba(245, 196, 0, .14) 0%, rgba(245, 196, 0, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, var(--verde-oscuro-1) 0%, #07241a 55%, var(--verde-oscuro-2) 100%);
}

/* --- Títulos: verde sobre blanco y amarillo, blanco con dorado sobre verde --- */
#ugel360.section--360 .section-head h2,
#ugel360 .section-head h2,
#convocatorias .section-head h2,
.section--conv .section-head h2,
.comm-head h2 {
  background: linear-gradient(135deg, #1F6B43 0%, #2E8B57 55%, #1aa76d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--transp .comm-head h2 {
  background: linear-gradient(135deg, #ffffff 0%, #FFF3B8 55%, #FFD84D 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Barra amarilla bajo cada título centrado */
#ugel360 .section-head h2::after,
#convocatorias .section-head h2::after,
.comm-head h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: .5rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--amarillo-2) 100%);
}

/* --- UGEL 360°: fondo blanco; las tarjetas de Facebook conservan sus colores --- */
#ugel360.section--360 .link-more { color: #1F6B43; border-bottom-color: rgba(31, 107, 67, .35); }
#ugel360.section--360 .link-more:hover { border-bottom-color: var(--amarillo); }
#ugel360 .post { border-color: rgba(16, 42, 67, .08); box-shadow: 0 22px 40px -24px rgba(16, 42, 67, .55); }
#ugel360 .post:hover,
#ugel360 .post:focus-visible { border-color: var(--amarillo); box-shadow: 0 30px 50px -24px rgba(16, 42, 67, .6), 0 0 0 2px rgba(245, 196, 0, .7); }

/* --- Convocatorias: sobre amarillo, enlace verde y círculos verde/amarillo detrás de las fotos --- */
.section--conv .link-more { color: #1F6B43; border-bottom-color: rgba(31, 107, 67, .4); }
.section--conv .link-more:hover { border-bottom-color: var(--amarillo); }
.section--conv .call-type { box-shadow: 0 24px 40px -26px rgba(20, 70, 40, .40), 0 2px 0 rgba(255, 255, 255, .8) inset; }
.section--conv .call-type:hover { box-shadow: 0 0 0 2px rgba(245, 196, 0, .75), 0 32px 50px -26px rgba(20, 70, 40, .45); }
.section--conv .call-types > li:nth-child(even) .call-type__art--cutout::before {
  background: radial-gradient(circle at 50% 38%, rgba(255, 216, 77, .95) 0%, rgba(245, 196, 0, .45) 55%, rgba(245, 196, 0, 0) 100%);
}

/* --- UGEL Transparente: verde con detalles dorados --- */
.transp__go { background: var(--amarillo); color: #2B2100; }
.transp__card:hover .transp__go { background: #fff; color: #1F6B43; }
.transp__card:hover,
.transp__card:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 216, 77, .65), 0 38px 60px -28px rgba(0, 20, 8, .9);
}
.transp__art::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 216, 77, .45) 0%, rgba(46, 139, 87, .25) 55%, rgba(46, 139, 87, 0) 72%);
}

/* --- Comunidad: blanco, con las cifras en tarjetas amarillo suave --- */
.comm__total,
.comm__panel .stat { background: #FFFFFF; border-color: rgba(46, 139, 87, .18); }
.comm__panel .stat__icon { background: #E8F3EC; color: #1F6B43; }
.comm__panel { border-color: rgba(46, 139, 87, .14); }

/* --- Interlineado: párrafos e introducciones con más aire --- */
main p { line-height: 1.75; }
.comm-head p,
.section-head p,
.section-head__side p { font-size: 1.08rem; line-height: 1.75; }
.comm-head h2,
.section-head h2,
.page-hero h1,
.community__copy h2,
.entidad-sec__head h2,
.section--entidad-hero .section-head h1 { line-height: 1.15; letter-spacing: -.02em; padding-bottom: .05em; }
.call-type__sub,
.stat__label,
.comm__lbl,
.unit__text,
.person__text { line-height: 1.55; }

/* Enlaces directos: título y texto centrados */
#enlaces .comm-head { margin-bottom: clamp(8px, 1.5vw, 16px); }
#enlaces { padding-bottom: clamp(24px, 3vw, 40px); }

/* ======================================================================
   SECCIONES OSCURAS: UGEL 360° y Enlaces directos
   Fondo verde oscuro (el mismo de UGEL Transparente), letras blancas y
   títulos en blanco con dorado, como UGEL Transparente.
   ====================================================================== */
#ugel360.section--360,
#ugel360.section--soft,
#enlaces.section--sky {
  color: #fff;
  background:
    radial-gradient(55% 60% at 92% 0%, rgba(46, 139, 87, .38) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(40% 50% at 4% 100%, rgba(245, 196, 0, .10) 0%, rgba(245, 196, 0, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, var(--verde-oscuro-1) 0%, #07241a 55%, var(--verde-oscuro-2) 100%);
}
#enlaces.section--sky {
  background:
    radial-gradient(50% 60% at 6% 0%, rgba(46, 139, 87, .40) 0%, rgba(46, 139, 87, 0) 70%),
    radial-gradient(40% 50% at 96% 100%, rgba(245, 196, 0, .10) 0%, rgba(245, 196, 0, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, var(--verde-oscuro-1) 0%, #07241a 55%, var(--verde-oscuro-2) 100%);
}
/* Título blanco que pasa a dorado (como UGEL Transparente), sin contorno */
#ugel360.section--360 .section-head h2,
#ugel360.section--soft .section-head h2,
#enlaces.section--sky .comm-head h2 {
  background: linear-gradient(135deg, #ffffff 0%, #FFF3B8 55%, #FFD84D 100%);
  -webkit-background-clip: text; background-clip: text;
  color: #fff;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
#enlaces .comm-head p {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
#ugel360.section--360 .link-more,
#ugel360 .link-more {
  color: #fff;
  border-bottom-color: rgba(255, 216, 77, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
#ugel360.section--360 .link-more:hover,
#ugel360 .link-more:hover { color: #FFE27A; border-bottom-color: var(--amarillo); }
/* Tarjetas de Facebook sobre el verde oscuro: borde claro fino y sombra más profunda */
#ugel360 .post { border-color: rgba(255, 255, 255, .14); box-shadow: 0 26px 44px -24px rgba(0, 0, 0, .85); }
#ugel360 .post:hover,
#ugel360 .post:focus-visible { border-color: var(--amarillo); box-shadow: 0 32px 54px -24px rgba(0, 0, 0, .9), 0 0 0 2px rgba(245, 196, 0, .8); }

/* Carrusel de Enlaces directos sobre oscuro: nombres en blanco */
#enlaces .orbit-link { color: #fff; }
#enlaces .orbit-link__label { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
#enlaces .orbit-link:hover .orbit-link__label { color: #FFE27A; }
#enlaces .orbit-link:focus-visible { outline-color: #FFE27A; }
#enlaces .orbit-link__icon { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 24px -12px rgba(0, 0, 0, .7); }
/* Logos: versión clara creada sola (las letras oscuras pasan a blanco) con sombra profunda;
   si un logo no tiene versión clara (JPG, SVG o enlace externo), lleva un contorno blanco. */
#enlaces .orbit-link__logo.is-oscuro { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
#enlaces .orbit-link__logo.is-contorno {
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
#enlaces .orbit-link:hover .orbit-link__logo.is-oscuro,
#enlaces .orbit-link:focus-visible .orbit-link__logo.is-oscuro { filter: drop-shadow(0 0 16px rgba(255, 216, 77, .45)) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }

/* ======================================================================
   DIRECTORIO INTERACTIVO (página Entidad)
   Árbol: Dirección arriba y las unidades como ramas. Al tocar una unidad se ve su equipo
   (jefe resaltado en dorado y el personal debajo). Al tocar a una persona se abre su ficha.
   ====================================================================== */
.org { --linea: #9CCFB0; margin-top: 6px; }
.org__search { position: relative; max-width: 560px; margin: 0 auto 10px; }
.org__input {
  width: 100%; height: 54px; padding: 0 20px 0 50px;
  border: 2px solid rgba(46, 139, 87, .25); border-radius: 999px; background: #fff;
  color: var(--ink); font: inherit; font-size: 1rem;
  box-shadow: 0 12px 26px -20px rgba(20, 60, 30, .55);
  transition: border-color .2s, box-shadow .2s;
}
.org__input:focus { outline: none; border-color: #2E8B57; box-shadow: 0 0 0 4px rgba(245, 196, 0, .35); }
.org__search-ico { position: absolute; left: 18px; top: 50%; display: flex; color: #2E8B57; transform: translateY(-50%); }
.org__search-ico .icon { width: 20px; height: 20px; }
.org__hint { margin: 0 0 30px; color: var(--ink-soft); font-size: .95rem; text-align: center; }

/* --- Árbol --- */
.org__tree { position: relative; margin-bottom: 34px; }
.org__root { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 34px; }
.org__root::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 34px; margin-left: -1.5px; border-radius: 3px; background: var(--linea); }
.org__root .org-grid--root { margin-bottom: 0; }
.org__branches {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 34px 0 0; list-style: none;
}
.org__branch { position: relative; display: flex; }
.org__branch::before { content: ""; position: absolute; left: 50%; top: -34px; width: 3px; height: 34px; margin-left: -1.5px; background: var(--linea); }
.org__branch::after { content: ""; position: absolute; top: -34px; left: -8px; right: -8px; height: 3px; background: var(--linea); }
.org__branch:first-child::after { left: 50%; }
.org__branch:last-child::after { right: 50%; }
.org__branch:only-child::after { display: none; }

.org-unit {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  padding: 16px 12px 14px; border: 2px solid rgba(46, 139, 87, .18); border-radius: 20px; background: #fff;
  color: var(--ink); font: inherit; text-align: center; cursor: pointer;
  box-shadow: 0 14px 28px -22px rgba(20, 60, 30, .6);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s, color .25s;
}
.org-unit:hover, .org-unit:focus-visible { transform: translateY(-3px); border-color: #F5C400; }
.org-unit.is-active { border-color: #1F6B43; background: linear-gradient(160deg, #1F6B43 0%, #2E8B57 100%); color: #fff; box-shadow: 0 18px 30px -18px rgba(20, 60, 30, .8); }
.org-unit__sigla { padding: 3px 10px; border-radius: 999px; background: #FFF3C4; color: #7A5C00; font-size: .74rem; font-weight: 800; letter-spacing: .06em; line-height: 1.4; }
.org-unit.is-active .org-unit__sigla { background: #F5C400; color: #2B2100; }
.org-unit__foto { width: 74px; aspect-ratio: 4 / 5; overflow: hidden; border: 3px solid #fff; border-radius: 12px; background: #DCE7EF; box-shadow: 0 0 0 2px rgba(46, 139, 87, .25); }
/* La foto es de cuerpo entero: en el círculo pequeño se acerca a la cara */
/* Fotos de cuerpo entero: marco vertical, la persona centrada de la cabeza a los pies */
.org-unit__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.org-unit__img--ini { display: grid; place-items: center; transform: none; color: #1F6B43; font-weight: 800; background: #E8F3EC; }
.org-unit__name { font-size: .9rem; font-weight: 800; line-height: 1.3; }
.org-unit__head { font-size: .72rem; line-height: 1.35; opacity: .8; }
.org-unit__count { margin-top: 2px; color: #2E8B57; font-size: .75rem; font-weight: 700; }
.org-unit.is-active .org-unit__count { color: #FFE27A; }
.org-unit--root { flex-direction: row; gap: 12px; width: auto; padding: 10px 22px; border-radius: 999px; }
.org-unit--root .org-unit__name { font-size: 1rem; }

/* --- Tarjetas de personas --- */
/* Las tarjetas van centradas en cada fila, aunque la unidad tenga pocas personas */
.org-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.org-grid--lead, .org-grid--root { margin-bottom: 26px; }
.org-grid__item { display: flex; width: 220px; }
.org-grid--lead .org-grid__item, .org-grid--root .org-grid__item { width: 290px; }
.org-person {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; overflow: hidden;
  padding: 16px 14px 16px; border: 1px solid rgba(46, 139, 87, .16); border-radius: 18px; background: #fff;
  color: var(--ink); font: inherit; text-align: center; cursor: pointer;
  box-shadow: 0 14px 28px -24px rgba(20, 60, 30, .6);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.org-person::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #1F6B43, #2E8B57); }
.org-person:hover, .org-person:focus-visible { transform: translateY(-4px); border-color: #F5C400; box-shadow: 0 22px 34px -22px rgba(20, 60, 30, .7); }
.org-person__foto { width: 100%; max-width: 176px; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid rgba(46, 139, 87, .2); border-radius: 14px; background: #DCE7EF; }
.org-person__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .35s var(--ease); }
.org-person:hover .org-person__img { transform: scale(1.04); }
.org-person__img--ini { display: grid; place-items: center; color: #1F6B43; font-size: 2rem; font-weight: 800; background: #E8F3EC; }
.org-person__name { font-size: .84rem; font-weight: 800; line-height: 1.3; letter-spacing: .01em; }
.org-person__role { padding: 4px 10px; border-radius: 999px; background: #E8F3EC; color: #1F6B43; font-size: .7rem; font-weight: 700; line-height: 1.35; letter-spacing: .03em; }
.org-person__contact { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid #EEF2EF; color: var(--ink-soft); font-size: .72rem; line-height: 1.4; }
.org-person__contact span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; word-break: break-all; }
.org-person__contact .icon { width: 14px; height: 14px; color: #2E8B57; }
.org-person--lead, .org-person--root { border: 2px solid #F5C400; box-shadow: 0 22px 40px -24px rgba(120, 90, 0, .55); }
.org-person--lead::before, .org-person--root::before { height: 6px; background: linear-gradient(90deg, #1F6B43, #F5C400); }
.org-person--lead .org-person__foto, .org-person--root .org-person__foto { max-width: 230px; border: 3px solid #F5C400; }
.org-person--lead .org-person__name, .org-person--root .org-person__name { font-size: .98rem; }
.org-person--lead .org-person__role, .org-person--root .org-person__role { background: #1F6B43; color: #FFE27A; font-size: .76rem; }

/* --- Equipo de cada unidad --- */
.org-team { margin-top: 24px; padding: 26px clamp(14px, 3vw, 32px) 30px; border: 1px solid rgba(46, 139, 87, .12); border-radius: 26px; background: rgba(255, 255, 255, .72); }
.org.is-js .org-team { margin-top: 0; }
.org.is-js .org-grid--sin-js { display: none; }
.org-team.is-entrando { animation: org-entra .45s var(--ease) both; }
.org-team__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; padding-bottom: 14px; text-align: center; }
.org-team__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #2E8B57 20%, #F5C400 50%, #2E8B57 80%, transparent); }
.org-team__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #E8F3EC; color: #1F6B43; }
.org-team__head h3 { margin: 0; color: #1F6B43; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.org-team__count { padding: 3px 12px; border-radius: 999px; background: #1F6B43; color: #fff; font-size: .75rem; font-weight: 700; }
.org-team__empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--ink-soft); }
.org__results { margin-bottom: 20px; }
.org__results-title { margin: 0 0 16px; color: #1F6B43; font-weight: 700; text-align: center; }
@keyframes org-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Ficha de la persona --- */
.org-ficha {
  width: min(760px, calc(100% - 28px)); max-height: calc(100% - 40px); padding: 0; overflow: auto;
  border: 0; border-radius: 26px; background: #fff; color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.org-ficha[open] { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); animation: org-ficha .35s cubic-bezier(.2, 1.2, .35, 1) both; }
.org-ficha::backdrop { background: rgba(4, 22, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.org-ficha__foto { display: flex; align-items: center; justify-content: center; padding: 22px; background: linear-gradient(160deg, #1F6B43 0%, #2E8B57 100%); }
.org-ficha__foto img { display: block; width: 100%; max-width: 250px; margin: 0 auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border: 4px solid #F5C400; border-radius: 18px; background: #DCE7EF; }
.org-ficha__ini { display: grid; place-items: center; width: 180px; aspect-ratio: 1; border-radius: 50%; background: #FFF3C4; color: #1F6B43; font-size: 3.4rem; font-weight: 900; }
.org-ficha__datos { display: flex; flex-direction: column; gap: 10px; padding: 32px 30px 28px; }
.org-ficha__sigla { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #FFF3C4; color: #7A5C00; font-size: .78rem; font-weight: 800; letter-spacing: .06em; }
.org-ficha__nombre { margin: 0; padding-right: 30px; color: #1F6B43; font-size: 1.45rem; font-weight: 900; line-height: 1.25; }
.org-ficha__cargo { margin: 0; color: var(--ink); font-size: .92rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.org-ficha__oficina { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border: 1px solid rgba(46, 139, 87, .15); border-radius: 14px; background: #F2F8F4; font-size: .92rem; line-height: 1.5; }
.org-ficha__oficina .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #2E8B57; }
.org-ficha__texto { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.org-ficha__contacto { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.org-ficha__contacto a { display: inline-flex; align-items: center; gap: 8px; color: #1F6B43; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.org-ficha__contacto a:hover { text-decoration: underline; text-decoration-color: #F5C400; }
.org-ficha__nota { display: flex; gap: 8px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.org-ficha__nota svg { flex: none; margin-top: 3px; color: #2E8B57; }
.org-ficha__nota a { display: inline; }
.org-ficha__x {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: #fff; color: #1F6B43; font-size: 24px; line-height: 38px; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.org-ficha__x:hover { background: #FFF3C4; }
@keyframes org-ficha { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* --- Tablet y celular: las ramas se apilan, unidas por la línea del centro --- */
@media (max-width: 900px) {
  .org__branches { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .org__branch::before { top: -14px; height: 14px; }
  .org__branch:first-child::before { top: -14px; }
  .org__branch::after { display: none; }
  .org-unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "foto sigla count" "foto name count" "foto head count"; align-items: center; gap: 2px 12px; text-align: left; }
  .org-unit__foto { grid-area: foto; width: 58px; }
  .org-unit__sigla { grid-area: sigla; justify-self: start; }
  .org-unit__name { grid-area: name; }
  .org-unit__head { grid-area: head; }
  .org-unit__count { grid-area: count; margin: 0; }
  .org-unit--root { display: flex; }
  .org-grid { gap: 12px; }
  .org-grid__item { width: calc(50% - 6px); }
  .org-grid--lead .org-grid__item, .org-grid--root .org-grid__item { width: min(100%, 260px); }
  .org-ficha[open] { grid-template-columns: 1fr; }
  .org-ficha__foto img { max-width: 210px; }
  .org-ficha__datos { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .org-unit, .org-person, .org-person__img { transition: none; }
  .org-team.is-entrando, .org-ficha[open] { animation: none; }
}

/* Menú del celular abierto: Kimito (el chat) se esconde para no tapar UGEL.GOB ni Contacto */
body:has(.nav.is-open) .kim { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }

/* ======================================================================
   TIPOGRAFÍA DE TÍTULOS Y TEXTOS CENTRADOS (noviembre 2026)
   Títulos en Outfit (más moderna y compacta; los títulos largos entran mejor en el celular).
   El texto corrido sigue en Montserrat.
   ====================================================================== */
:root { --font-titulos: 'Outfit', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
h1, h2, h3,
.acc-bar__title,
.call-type__label,
.transp__label,
.acc-foot__title,
.stat__num {
  font-family: var(--font-titulos);
}
.comm-head h2,
.section-head h2,
.page-hero h1,
.community__copy h2,
.entidad-sec__head h2,
.section--entidad-hero .section-head h1,
.acc-bar__title {
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* UGEL 360°: fecha y título centrados en cada tarjeta */
.post__body { align-items: center; text-align: center; }
.post__title { letter-spacing: 0; line-height: 1.3; }

/* Cuadrícula de noticias centrada: si un día hay 9 publicaciones (una se ocultó por el filtro),
   la última fila queda al centro en vez de dejar un hueco a la derecha. */
.gallery360 { --cols: 5; --gap: clamp(10px, 1vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.gallery360 > .post { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (max-width: 1099px) { .gallery360 { --cols: 2; } }
@media (max-width: 519px) { .gallery360 { --cols: 1; } }

/* Encabezados centrados también en las páginas internas (Convocatorias y Entidad),
   con el mismo verde degradado y la barra amarilla de la portada */
.page-hero { text-align: center; }
.page-hero p { margin-inline: auto; }
.page-hero h1,
.entidad-sec__head h2 {
  background: linear-gradient(135deg, #1F6B43 0%, #2E8B57 55%, #1aa76d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero h1::after,
.entidad-sec__head h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: .5rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--amarillo-2) 100%);
}
.filters { justify-content: center; }
.entidad-sec__head { flex-direction: column; justify-content: center; gap: 12px; text-align: center; }
.entidad-sec__head p { margin-inline: auto; }

/* ======================================================================
   ENTIDAD: FONDO FORMAL Y ELEGANTE, TODO CENTRADO (noviembre 2026)
   Quiénes somos · Unidades · Oficinas · Directorio
   Marfil con un rombo muy suave (inspirado en los tejidos andinos), verde institucional
   y detalles en dorado antiguo. Las tarjetas son blancas con un filo dorado.
   ====================================================================== */
:root {
  --ent-verde: #14432C;
  --ent-verde-2: #1F6B43;
  --ent-oro: #B8913A;
  --ent-oro-suave: rgba(184, 145, 58, .28);
  --ent-texto: #3C4A44;
  --ent-texto-2: #5B6B63;
  --ent-rombos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%231F6B43' stroke-opacity='.055'/%3E%3Cpath d='M28 21l7 7-7 7-7-7z' fill='%23B8913A' fill-opacity='.07'/%3E%3C/svg%3E") 0 0 / 56px 56px;
  --ent-adorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='14' viewBox='0 0 170 14'%3E%3Cpath d='M0 7h68M102 7h68' stroke='%23B8913A' stroke-width='1.4'/%3E%3Cpath d='M85 1l6 6-6 6-6-6z' fill='%23B8913A'/%3E%3Cpath d='M73 7l2.5-2.5L78 7l-2.5 2.5zM92 7l2.5-2.5L97 7l-2.5 2.5z' fill='%23B8913A' fill-opacity='.65'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Portada de Entidad: un filo dorado la separa del resto */
.section--entidad-hero { border-bottom: 1px solid rgba(201, 162, 74, .55); }

/* Fondos: marfil con rombos (Quiénes somos, Oficinas) y blanco perla (Unidades, Directorio) */
.entidad-sec {
  color: var(--ent-texto);
  border-top: 1px solid var(--ent-oro-suave);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    var(--ent-rombos),
    linear-gradient(180deg, #FBF9F3 0%, #F2EDE0 100%);
}
.entidad-sec--alt {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F4EE 100%);
}

/* Encabezado de cada parte: medallón, título verde sólido y adorno dorado */
.entidad-sec .entidad-sec__head { gap: 14px; margin-bottom: clamp(28px, 3.5vw, 46px); }
.entidad-sec .entidad-sec__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--ent-verde);
  box-shadow: 0 0 0 1px rgba(184, 145, 58, .6), 0 0 0 6px #fff, 0 0 0 7px var(--ent-oro-suave), 0 16px 28px -18px rgba(20, 67, 44, .55);
}
.entidad-sec .entidad-sec__icon .icon { width: 27px; height: 27px; }
.entidad-sec .entidad-sec__head h2 {
  background: none; color: var(--ent-verde); -webkit-text-fill-color: var(--ent-verde);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); letter-spacing: .005em;
}
.entidad-sec .entidad-sec__head h2::after {
  width: 170px; height: 14px; margin: .8rem auto 0; border-radius: 0; background: var(--ent-adorno);
}
.entidad-sec .entidad-sec__head p { max-width: 58ch; color: var(--ent-texto-2); font-size: 1.06rem; }

/* Tarjetas: blancas, filo dorado, línea superior verde a dorado */
.entidad-sec .entidad-about__item,
.entidad-sec .unit {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--ent-oro-suave);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 44px -32px rgba(20, 67, 44, .55);
}
.entidad-sec .entidad-about__item::before,
.entidad-sec .unit::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ent-verde) 0%, #2E8B57 50%, var(--ent-oro) 100%);
}
.entidad-sec .unit:hover { border-color: rgba(184, 145, 58, .6); box-shadow: 0 28px 48px -30px rgba(20, 67, 44, .6); }

/* Quiénes somos: tarjetas lado a lado, foto arriba y texto centrado */
.entidad-about { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.entidad-sec .entidad-about__item {
  grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 18px;
  padding: 22px 22px 30px; text-align: center;
}
.entidad-about__item:only-child { max-width: 820px; margin-inline: auto; }
.entidad-sec .entidad-about__img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; box-shadow: 0 0 0 1px var(--ent-oro-suave); }
.entidad-sec .entidad-about__item h3 { margin: 0 0 .3rem; color: var(--ent-verde); font-size: 1.45rem; }
.entidad-sec .entidad-about__sub { margin: 0 0 .9rem; color: #9A7A2C; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.entidad-sec .entidad-about__item p { max-width: 54ch; margin-inline: auto; color: var(--ent-texto); }

/* Unidades y oficinas: tarjetas centradas; la última fila también queda al centro */
.entidad-sec .units { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.entidad-sec .unit { flex: 0 1 270px; align-items: center; padding: 28px 20px 22px; text-align: center; }
.entidad-sec .unit__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: #F6F1E2; color: var(--ent-verde);
  box-shadow: 0 0 0 1px rgba(184, 145, 58, .5), 0 0 0 5px #fff, 0 0 0 6px rgba(184, 145, 58, .2);
}
.entidad-sec .unit__img { box-shadow: 0 0 0 1px var(--ent-oro-suave); }
.entidad-sec .unit__sigla { align-self: center; margin-top: .45rem; background: var(--ent-verde); color: #F3E2A8; letter-spacing: .12em; }
.entidad-sec .unit h3 { color: var(--ent-verde); font-size: 1.08rem; }
.entidad-sec .unit__sub { color: #9A7A2C; }
.entidad-sec .unit__text { color: var(--ent-texto-2); }
.entidad-sec .unit__offices ul { justify-content: center; }
.entidad-sec .unit .person__contact { text-align: center; }
.entidad-sec .unit .person__contact li { justify-content: center; }
.entidad-sec .unit__more {
  align-self: center; margin-top: auto; padding: 8px 18px; border: 1px solid rgba(20, 67, 44, .25); border-radius: 999px;
  color: var(--ent-verde); text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.entidad-sec .unit__more:hover { background: var(--ent-verde); border-color: var(--ent-verde); color: #fff; text-decoration: none; }
.entidad-sec .org-group__title { justify-content: center; color: var(--ent-verde); }

/* Oficinas (o cualquier parte todavía vacía): aviso sobrio y centrado */
.entidad-sec .empty {
  max-width: 620px; margin: 0 auto; padding: 30px 28px;
  background: #fff; border: 1px solid var(--ent-oro-suave); border-radius: 18px;
  color: var(--ent-texto-2); font-size: 1.02rem;
  box-shadow: 0 24px 44px -34px rgba(20, 67, 44, .5);
}
.entidad-sec .empty::before { content: ""; display: block; width: 120px; height: 12px; margin: 0 auto 14px; background: var(--ent-adorno); }

/* Directorio: líneas del árbol en dorado suave y buscador con filo dorado */
#directorio .org { --linea: #CDB880; }
#directorio .org__input { border-color: var(--ent-oro-suave); }
#directorio .org__input:focus { border-color: var(--ent-oro); box-shadow: 0 0 0 4px rgba(184, 145, 58, .18); }
@media (max-width: 600px) {
  .entidad-sec .unit { flex: 1 1 100%; max-width: 440px; }
  .entidad-sec .entidad-about__item { padding: 16px 16px 24px; }
}

/* ======================================================================
   ENTIDAD REORGANIZADA (noviembre 2026)
   Nosotros (fachada + Misión y Visión) · Unidades (jefes de línea)
   Oficinas (foto y ficha al tocar) · Directorio general completo
   ====================================================================== */

/* --- Nosotros: dos columnas, fachada a la izquierda y Misión y Visión a la derecha --- */
.nos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; max-width: 1120px; margin: 0 auto; }
.nos__fachada {
  display: flex; flex-direction: column; margin: 0; padding: 10px;
  background: #fff; border: 1px solid var(--ent-oro-suave); border-radius: 22px;
  box-shadow: 0 30px 54px -36px rgba(20, 67, 44, .65);
}
.nos__img { display: block; flex: 1; width: 100%; min-height: 440px; object-fit: cover; border-radius: 15px; }
.nos__img--vacia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(184, 145, 58, .22) 0%, rgba(184, 145, 58, 0) 70%),
    var(--ent-rombos),
    linear-gradient(160deg, #14432C 0%, #0B2A26 100%);
  color: #F3E2A8; text-align: center;
}
.nos__img--vacia img { width: min(190px, 60%); height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.nos__img--vacia strong { color: #fff; font-family: var(--font-titulos); font-size: 1.6rem; }
.nos__img--vacia span { font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.nos__pie { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px 4px; color: var(--ent-texto-2); font-size: .92rem; text-align: center; }
.nos__pie .icon { flex: none; width: 18px; height: 18px; color: var(--ent-oro); }
.nos__textos { display: flex; flex-direction: column; gap: 20px; }
.nos__item {
  position: relative; flex: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px clamp(20px, 3vw, 36px) 28px; text-align: center;
  background: #fff; border: 1px solid var(--ent-oro-suave); border-radius: 22px;
  box-shadow: 0 26px 46px -34px rgba(20, 67, 44, .55);
}
.nos__item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ent-verde) 0%, #2E8B57 50%, var(--ent-oro) 100%); }
.nos__ico {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #F6F1E2; color: var(--ent-verde);
  box-shadow: 0 0 0 1px rgba(184, 145, 58, .55), 0 0 0 6px #fff, 0 0 0 7px var(--ent-oro-suave);
}
.nos__item h3 { margin: 16px 0 6px; color: var(--ent-verde); font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; }
.nos__item h3::after { content: ""; display: block; width: 120px; height: 12px; margin: 8px auto 0; background: var(--ent-adorno); }
.nos__sub { margin: 0 0 8px; color: #9A7A2C; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nos__item p:not(.nos__sub) { max-width: 54ch; margin: 6px auto 0; color: var(--ent-texto); font-size: 1.04rem; line-height: 1.8; }
@media (max-width: 860px) {
  .nos { grid-template-columns: 1fr; }
  .nos__img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --- Unidades: el jefe de línea de cada una --- */
.jefes { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.jefe {
  position: relative; overflow: hidden; flex: 0 1 340px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 22px 22px; text-align: center;
  background: #fff; border: 1px solid var(--ent-oro-suave); border-radius: 22px;
  box-shadow: 0 26px 46px -34px rgba(20, 67, 44, .55);
  transition: border-color .25s, box-shadow .25s;
}
.jefe::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ent-verde) 0%, #2E8B57 50%, var(--ent-oro) 100%); }
.jefe:hover { border-color: rgba(184, 145, 58, .6); box-shadow: 0 30px 52px -32px rgba(20, 67, 44, .62); }
.jefe__foto {
  display: block; width: 150px; aspect-ratio: 4 / 5; margin: 0 0 10px; padding: 0; overflow: hidden;
  border: 0; border-radius: 16px; background: #EEF1EC; color: var(--ent-verde); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(184, 145, 58, .6), 0 0 0 6px #fff, 0 0 0 7px var(--ent-oro-suave), 0 18px 30px -18px rgba(20, 67, 44, .6);
  transition: transform .25s var(--ease);
}
.jefe__foto:hover, .jefe__foto:focus-visible { transform: translateY(-3px); }
.jefe__foto:focus-visible { outline: 3px solid var(--ent-oro); outline-offset: 8px; }
.jefe__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jefe__img--ini, .jefe__foto--vacia { display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; }
.jefe__foto--vacia { cursor: default; }
.jefe .unit__sigla { margin-top: 4px; }
.jefe__unidad { margin: 4px 0 2px; color: var(--ent-verde); font-size: 1.12rem; line-height: 1.25; }
.jefe__nombre { margin: 4px 0 0; color: #1D2B26; font-size: .95rem; font-weight: 700; }
.jefe__cargo { margin: 0; color: #9A7A2C; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jefe__texto { margin: 10px 0 0; color: var(--ent-texto-2); font-size: .95rem; line-height: 1.65; }
.jefe__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.jefe__link { color: #9A7A2C; font-size: .88rem; font-weight: 700; text-decoration: none; }
.jefe__link:hover { text-decoration: underline; }
.jefe__btn {
  padding: 8px 18px; border: 1px solid rgba(20, 67, 44, .25); border-radius: 999px;
  color: var(--ent-verde); font-size: .9rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.jefe__btn:hover { background: var(--ent-verde); border-color: var(--ent-verde); color: #fff; }

/* --- Oficinas: tarjetas con foto agrupadas por unidad --- */
.ofis { display: grid; gap: clamp(30px, 4vw, 48px); }
.ofis__unidad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; color: var(--ent-verde); font-size: 1.2rem; text-align: center; }
.entidad-sec .ofis__unidad .unit__sigla, .entidad-sec .dir__cab .unit__sigla { margin: 0; }
.ofis__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.ofis__grid > li { display: flex; flex: 0 1 250px; }
.ofi {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  padding: 12px 12px 16px; text-align: center; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--ent-oro-suave); border-radius: 18px;
  box-shadow: 0 22px 40px -32px rgba(20, 67, 44, .55);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.ofi:hover, .ofi:focus-visible { transform: translateY(-4px); border-color: rgba(184, 145, 58, .65); box-shadow: 0 28px 46px -30px rgba(20, 67, 44, .6); }
.ofi:focus-visible { outline: 3px solid var(--ent-oro); outline-offset: 3px; }
.ofi__foto { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: linear-gradient(160deg, #F6F1E2 0%, #EDE6D2 100%); color: var(--ent-verde); }
.ofi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .4s var(--ease); }
.ofi:hover .ofi__foto img { transform: scale(1.04); }
.ofi__foto .icon { width: 34px; height: 34px; opacity: .7; }
.ofi__nombre { margin-top: 6px; color: var(--ent-verde); font-family: var(--font-titulos); font-size: 1.06rem; font-weight: 700; line-height: 1.25; }
.ofi__resp { color: #9A7A2C; font-size: .78rem; font-weight: 700; }
.ofi__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ent-texto-2); font-size: .86rem; line-height: 1.5; }
.ofi__mas { margin-top: auto; padding-top: 8px; color: var(--ent-verde); font-size: .84rem; font-weight: 700; }

/* Ficha de la oficina (usa la misma ventana que la de las personas) */
.ofi-ficha .ofi-ficha__foto img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
.org-ficha__foto { background: linear-gradient(160deg, var(--ent-verde) 0%, #1F6B43 100%); }
.org-ficha__foto img { border-color: #D9BD6A; }
.ofi-ficha__sub { margin: 0; color: #9A7A2C; font-weight: 700; }
.ofi-ficha__texto { margin: 0 0 6px; color: var(--ent-texto); line-height: 1.7; }
.ofi-ficha__eq { margin: 12px 0 6px; color: #9A7A2C; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ofi-ficha__gente { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ofi-persona {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px;
  border: 1px solid var(--ent-oro-suave); border-radius: 12px; background: #FBF9F3;
  font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.ofi-persona:hover, .ofi-persona:focus-visible { border-color: var(--ent-oro); background: #fff; }
.ofi-persona__img { flex: none; width: 44px; height: 54px; border-radius: 8px; object-fit: cover; object-position: 50% 15%; }
.ofi-persona__img--ini { display: grid; place-items: center; background: #E8F3EC; color: var(--ent-verde); font-weight: 800; }
.ofi-persona > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ofi-persona strong { color: #1D2B26; font-size: .88rem; }
.ofi-persona em { color: var(--ent-texto-2); font-size: .76rem; font-style: normal; }
.ofi-ficha__contacto { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ofi-ficha__contacto li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.ofi-ficha__contacto .icon { width: 16px; height: 16px; color: var(--ent-oro); }

/* --- Directorio general: todo el personal, por unidad, con el jefe arriba --- */
.dir__grupo {
  margin-top: clamp(26px, 3.5vw, 40px); padding: clamp(18px, 2.5vw, 28px);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--ent-oro-suave); border-radius: 24px;
  box-shadow: 0 26px 46px -40px rgba(20, 67, 44, .5);
}
.dir__grupo[hidden] { display: none; }
.dir__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; text-align: center; }
.dir__cab h3 { margin: 0; color: var(--ent-verde); font-size: 1.25rem; }
.dir__n { color: #9A7A2C; font-size: .82rem; font-weight: 700; }
.dir__jefe { margin-bottom: 20px; }
.dir__grid .org-grid__item[hidden], .dir__jefe .org-grid__item[hidden] { display: none; }
.org-person__oficina { padding: 2px 9px; border-radius: 999px; background: #F6F1E2; color: #7A5C00; font-size: .68rem; font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
.dir__vacio { max-width: 560px; margin: 18px auto 0; padding: 18px; border: 1px dashed var(--ent-oro-suave); border-radius: 14px; background: #fff; color: var(--ent-texto-2); text-align: center; }
.org-person--lead { border-color: #D9BD6A; }
.org-person--lead::before { background: linear-gradient(90deg, var(--ent-verde), var(--ent-oro)); }

@media (max-width: 600px) {
  .jefe { flex-basis: 100%; max-width: 440px; }
  .ofis__grid > li { flex: 1 1 calc(50% - 9px); }
  .ofi { padding: 8px 8px 12px; }
  .ofi__desc { display: none; }
}
/* Directorio general más compacto: entra más gente por fila (foto de cuerpo entero, como antes) */
.dir .org-grid { gap: 16px; }
.dir .org-grid__item { width: 186px; }
.dir .dir__jefe .org-grid__item { width: 230px; }
.dir .org-person { padding: 12px 10px 12px; gap: 6px; }
.dir .org-person__foto { max-width: 140px; }
.dir .org-person--lead .org-person__foto { max-width: 180px; }
.dir .org-person__name { font-size: .8rem; }
.dir .org-person__role { font-size: .66rem; }
.dir .dir__jefe { margin-bottom: 16px; }
@media (max-width: 600px) {
  .dir .org-grid__item { width: calc(50% - 8px); }
  .dir .dir__jefe .org-grid__item { width: 70%; }
}
.dir__grupo, .ofis__grupo, .jefe { scroll-margin-top: calc(var(--header-h) + 16px); }


/* ======================================================================
   CONVOCATORIAS: vista previa del enlace a GOB.PE (portada y página de convocatorias).
   Un clic agranda la vista previa; doble clic la abre en gob.pe (assets/js/convocatorias.js).
   ====================================================================== */
.cprevs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.cprev {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1px solid #E1E8E4; border-radius: 18px; background: #fff; color: var(--ink);
  box-shadow: 0 16px 32px -26px rgba(4, 25, 15, .55);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
  -webkit-user-select: none; user-select: none; /* el doble clic no selecciona texto */
}
.cprev:hover { transform: translateY(-4px); border-color: rgba(184, 145, 58, .6); box-shadow: 0 26px 44px -26px rgba(4, 25, 15, .6); }
.cprev:focus-visible { outline: 3px solid #F3C64A; outline-offset: 3px; }
.cprev__media { position: relative; display: grid; place-items: center; aspect-ratio: 1.91 / 1; overflow: hidden; background: linear-gradient(150deg, #F1FAF5, #FFF6DC); }
.cprev__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #F1FAF5; transition: transform .4s var(--ease); }
.cprev:hover .cprev__media img { transform: scale(1.04); }
.cprev__arte { display: grid; place-items: center; width: 46%; max-width: 150px; }
.cprev__arte svg { width: 100%; height: auto; }
.cprev__tipo, .cprev__pdf {
  position: absolute; top: 12px; padding: .28em .8em; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cprev__tipo { left: 12px; background: #14432C; color: #fff; }
.cprev__pdf { right: 12px; background: #fff; color: #B42318; box-shadow: 0 0 0 1px rgba(180, 35, 24, .35); }
.cprev__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 18px 14px; }
.cprev__meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-soft); font-size: .84rem; white-space: nowrap; }
.cprev__meta .icon { width: 16px; height: 16px; }
.cprev__meta .badge-new { margin-left: auto; }
.cprev__titulo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #14432C; font-size: 1.05rem; line-height: 1.3; }
.cprev__titulo a { color: inherit; text-decoration: none; }
.cprev__texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.cprev__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid #EEF2EF; font-size: .8rem; }
.cprev__sitio { display: inline-flex; align-items: center; gap: 5px; color: #1F6B43; font-weight: 700; }
.cprev__sitio .icon { width: 15px; height: 15px; }
.cprev__ayuda { color: #8A979F; }
.cprevs__ayuda { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; color: rgba(255, 255, 255, .78); font-size: .86rem; }
.cprevs__ayuda .icon { width: 16px; height: 16px; }
.cprevs__ayuda--claro { margin: 0 0 16px; color: var(--ink-soft); }
.cprevs__vacio { margin: 0; padding: 26px; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 16px; color: rgba(255, 255, 255, .85); text-align: center; }
@media (hover: none) { .cprev__ayuda { display: none; } }

/* Recuadro grande */
.cprev-dlg { width: min(760px, calc(100% - 28px)); max-height: calc(100% - 28px); padding: 0; overflow: auto; border: 0; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.cprev-dlg::backdrop { background: rgba(4, 25, 15, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cprev-dlg[open] { animation: cprev-entra .28s var(--ease); }
@keyframes cprev-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.cprev-dlg__x { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #14432C; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.cprev-dlg__x .icon { width: 20px; height: 20px; }
.cprev-dlg__media { margin: 0; aspect-ratio: 1.91 / 1; background: #F1FAF5; }
.cprev-dlg__media[hidden] { display: none; }
.cprev-dlg__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cprev-dlg__body { display: grid; gap: 10px; padding: 22px clamp(18px, 3vw, 30px) 26px; }
.cprev-dlg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--ink-soft); font-size: .88rem; }
.cprev-dlg__titulo { margin: 0; padding-right: 30px; color: #14432C; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.25; }
.cprev-dlg__texto { margin: 0; color: var(--ink); line-height: 1.6; }
.cprev-dlg__sitio { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #1F6B43; font-size: .9rem; font-weight: 700; }
.cprev-dlg__sitio .icon { width: 16px; height: 16px; }
.cprev-dlg__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cprev, .cprev__media img { transition: none; } .cprev:hover, .cprev:hover .cprev__media img { transform: none; } .cprev-dlg[open] { animation: none; } }
.cprevs__tactil { display: none; }
@media (hover: none) { .cprevs__pc { display: none; } .cprevs__tactil { display: inline; } }

/* ======================================================================
   ENLACES DIRECTOS: franja fija bajo el carrusel de la portada.
   Todos los sistemas a la vista, sin moverse; logos en versión clara sobre el verde.
   ====================================================================== */
#enlaces.enl-franja { padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px); }
#enlaces.enl-franja .comm-head { margin-bottom: clamp(14px, 2vw, 22px); }
#enlaces.enl-franja .comm-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
#enlaces.enl-franja .comm-head p { margin-top: .4rem; font-size: .98rem; }
.enl { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px clamp(8px, 1.6vw, 22px); margin: 0 auto; padding: 0; list-style: none; max-width: 1240px; }
.enl__li { display: flex; flex: 0 1 158px; }
.enl__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 104px; padding: 12px 10px; border-radius: 16px;
  color: #fff; text-align: center; text-decoration: none;
  transition: transform .25s var(--ease), background-color .25s;
}
.enl__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 62px; object-fit: contain; transition: transform .3s var(--ease), filter .3s; }
.enl__logo.is-oscuro { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.enl__logo.is-contorno { filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.enl__ico {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .28), transparent 55%), var(--orb, #1F8A5B); color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 24px -12px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease);
}
.enl__ico .icon { width: 26px; height: 26px; }
.enl__label { color: #fff; font-size: .88rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.enl__item:hover, .enl__item:focus-visible { transform: translateY(-4px); background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.enl__item:hover .enl__logo, .enl__item:focus-visible .enl__logo { transform: scale(1.06); }
.enl__item:hover .enl__logo.is-oscuro, .enl__item:focus-visible .enl__logo.is-oscuro { filter: drop-shadow(0 0 16px rgba(255, 216, 77, .45)) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.enl__item:hover .enl__ico, .enl__item:focus-visible .enl__ico { transform: translateY(-2px) scale(1.06); }
.enl__item:hover .enl__label, .enl__item:focus-visible .enl__label { color: #FFE27A; }
.enl__item:focus-visible { outline: 3px solid #FFE27A; outline-offset: 2px; }
@media (max-width: 640px) {
  .enl { gap: 6px; }
  .enl__li { flex-basis: calc(33.333% - 4px); }
  .enl__item { min-height: 88px; padding: 10px 4px; gap: 8px; }
  .enl__logo { max-height: 44px; }
  .enl__ico { width: 46px; height: 46px; }
  .enl__ico .icon { width: 22px; height: 22px; }
  .enl__label { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .enl__item, .enl__logo, .enl__ico { transition: none; }
  .enl__item:hover, .enl__item:focus-visible, .enl__item:hover .enl__ico, .enl__item:hover .enl__logo { transform: none; }
}
/* en pantallas anchas, todos los enlaces en una sola fila; una línea dorada separa la franja de UGEL 360° */
@media (min-width: 900px) {
  .enl { flex-wrap: nowrap; gap: clamp(6px, 1.2vw, 18px); }
  .enl__li { flex: 1 1 0; min-width: 0; max-width: 176px; }
}
#enlaces.enl-franja { border-bottom: 1px solid rgba(243, 198, 74, .45); }

/* ======================================================================
   ENLACES DIRECTOS AL COSTADO (computadora): escondidos detrás de la pestaña "Enlaces".
   Un clic en la pestaña abre la barra; otro clic, Esc o un clic fuera la cierran.
   Cada enlace muestra su logo (Panel > Enlaces directos) o, si no tiene, su ícono.
   ====================================================================== */
.dock {
  --dock-tab: 34px;
  position: fixed; right: 0; top: 50%; z-index: 45;
  display: flex; align-items: center;
  transform: translate(calc(100% - var(--dock-tab)), -50%);
  transition: transform .35s var(--ease);
}
.dock.is-open { transform: translate(0, -50%); }
html:not(.js) .dock { transform: translate(0, -50%); } /* sin JavaScript se queda abierta */
.dock__tab {
  position: relative; flex: none; /* sin z-index: el nombre de cada enlace pasa por encima de la pestaña */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: var(--dock-tab); margin-right: -1px; padding: 12px 0 14px;
  border: 1px solid rgba(243, 198, 74, .6); border-right: 0; border-radius: 14px 0 0 14px;
  background: rgba(8, 38, 25, .96); color: #F3C64A; font: inherit; cursor: pointer;
  box-shadow: -10px 12px 26px -16px rgba(0, 0, 0, .7);
  transition: background-color .2s, color .2s;
}
html:not(.js) .dock__tab { display: none; }
.dock__tab .icon { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.dock.is-open .dock__tab .icon { transform: rotate(180deg); }
.dock__tab-txt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dock__tab:hover { background: #0A3020; color: #FFE27A; }
.dock__tab:focus-visible { outline: 2px solid #F3C64A; outline-offset: 2px; }
.dock__panel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px 8px; border: 1px solid rgba(243, 198, 74, .45); border-right: 0; border-radius: 18px 0 0 18px;
  background: rgba(8, 38, 25, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
}
/* cerrada: la barra queda fuera de la pantalla y no se puede llegar a ella con el teclado */
html.js .dock:not(.is-open) .dock__panel { visibility: hidden; transition: visibility 0s linear .35s; }
.dock__titulo { margin: 0 0 2px; color: #F3C64A; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dock__lista { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dock__item { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; text-decoration: none; transition: background-color .2s; }
.dock__item--logo { width: 118px; height: 48px; }
.dock__logo { display: block; width: auto; height: auto; max-width: 104px; max-height: 32px; object-fit: contain; transition: transform .25s var(--ease); }
.dock__logo.is-contorno { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.dock__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .28), transparent 55%), var(--orb, #1F8A5B);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.dock__ico .icon { width: 20px; height: 20px; }
/* el nombre sale hacia la izquierda al pasar el mouse o al llegar con el teclado */
.dock__txt {
  position: absolute; right: calc(100% + 12px); top: 50%; z-index: 2; transform: translate(8px, -50%);
  padding: .5em 1em; border: 1px solid rgba(243, 198, 74, .55); border-radius: 999px;
  background: #0A3020; color: #fff; font-size: .86rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease), visibility 0s linear .25s;
}
.dock__item:hover, .dock__item:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.dock__item:hover .dock__ico, .dock__item:focus-visible .dock__ico { transform: scale(1.1); box-shadow: 0 0 0 2px #F3C64A, 0 0 18px -2px rgba(243, 198, 74, .6); }
.dock__item:hover .dock__logo, .dock__item:focus-visible .dock__logo { transform: scale(1.06); }
.dock__item:hover .dock__txt, .dock__item:focus-visible .dock__txt { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.dock__item:focus-visible { outline: 2px solid #F3C64A; outline-offset: 1px; }
/* La barra lateral (.dock) es ahora el único modo de "Enlaces directos", en computadora Y en celular.
   La franja de la portada (#enlaces.enl-franja) queda solo de respaldo para pantallas muy bajas
   (p. ej. el celular en horizontal), donde la barra lateral no alcanza a caber verticalmente. */
#enlaces.enl-franja { display: none; }
@media (max-height: 520px) {
  .dock { display: none; }
  #enlaces.enl-franja { display: block; }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock__tab .icon, .dock__txt, .dock__ico, .dock__logo { transition: none; } }
@media print { .dock { display: none; } }

/* ======================================================================
   PORTAL DE TRANSPARENCIA ESTÁNDAR: logo a la derecha de la cabecera
   Sin fondo blanco; en la cabecera oscura la palabra "estándar" va en blanco.
   En el celular va dentro del menú, con sus colores originales.
   ====================================================================== */
.site-header__inner > .nav { margin-left: auto; }
.pte { display: flex; align-items: center; flex: none; padding: 4px 6px; border-radius: 12px; text-decoration: none; transition: transform .25s var(--ease), background-color .25s; }
.pte img { display: block; width: auto; height: 48px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.pte:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .08); }
.pte:focus-visible { outline: 2px solid #F3C64A; outline-offset: 2px; }
@media (min-width: 1560px) {
  .site-header .pte { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); }
  .site-header .pte:hover { transform: translateY(calc(-50% - 2px)); }
  .pte img { height: 62px; }
}
/* pantallas medianas: el logo se achica y el menú no se parte en dos renglones */
@media (min-width: 1161px) { .nav__list a { white-space: nowrap; } }
@media (max-width: 1440px) and (min-width: 1161px) { .site-header__inner { gap: 14px; } .pte { padding: 2px 4px; } .pte img { height: 42px; } }
@media (max-width: 1280px) and (min-width: 1161px) { .pte img { height: 34px; } }
.nav__pte { display: none; }
@media (max-width: 1160px) {
  .site-header__inner > .pte { display: none; }
  .nav__pte { display: block; align-self: flex-start; padding: 4px 0; border-radius: 10px; }
  .nav__pte img { display: block; width: auto; height: 46px; }
  .nav__pte:focus-visible { outline: 2px solid var(--green-brand); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .pte, .site-header .pte:hover, .pte:hover { transition: none; } .pte:hover { transform: none; } }
@media print { .pte, .nav__pte { display: none; } }

/* UGEL 360: video de Facebook, reproducción solo después de pulsar el botón. */
.post--video { cursor: default; }
.post__video-mark { position:absolute; z-index:4; top:10px; left:10px; padding:5px 10px; color:#fff; font-size:.68rem; letter-spacing:.07em; font-weight:800; border-radius:6px; background:rgba(6,26,40,.9); }
.post__video-play { z-index:5; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 15px; border:1px solid #fff; border-radius:99px; background:rgba(12,57,45,.91); color:#fff; cursor:pointer; font-size:.9rem; font-weight:800; box-shadow:0 8px 28px #0009; }
.post__video-play:hover, .post__video-play:focus-visible { background:#145c40; outline:2px solid #fff; }
.post__video-play .icon { width:22px; height:22px; }
.post__video-external { color:#fff; font-size:clamp(.72rem,2.4cqw,.9rem); font-weight:700; text-underline-offset:3px; }
.post__video-external .icon {width:1em; height:1em; vertical-align:middle;}
.fb-video-dialog { width:min(94vw,680px); max-height:94vh; border:1px solid #cbd5e1; border-radius:14px; padding:0; background:#fff; color:#17252b; box-shadow:0 28px 80px #0009; }
.fb-video-dialog::backdrop { background:rgba(0,0,0,.75); }
.fb-video-dialog__panel { padding:clamp(12px,3vw,20px); }
.fb-video-dialog__header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.fb-video-dialog__header button { border:1px solid #ddd; border-radius:8px; padding:8px 12px; background:#fff; color:#15242d; cursor:pointer; }
.fb-video-dialog__frame { background:#111; min-height:210px; border-radius:8px; overflow:hidden; }
.fb-video-dialog__frame iframe { display:block; width:100%; height: min(64vh,560px); border:0; }
.fb-video-dialog__panel p {font-size:.85rem; line-height:1.5; margin:12px 0 6px;}
.fb-video-dialog__panel > a { display:inline-block; margin:5px 0; font-weight:700; color:#086644; }

/* Fecha límite y vigencia: nunca se deduce de la fecha de publicación. */
.conv-plazo { display:inline-block; align-self:start; width:max-content; max-width:100%; border-radius:7px; padding:5px 9px; font-size:.76rem; font-weight:750; line-height:1.35; border:1px solid #d0d9dd; background:#f1f5f9; color:#344256; }
.conv-plazo--vigente { border-color:#9bdec0; background:#e4f7ed; color:#155e3f; }
.conv-plazo--cerrada { border-color:#f8b6b6; background:#fff0f0; color:#922a32; }