/* ==================================================================
   BOMBEROS VUELTA DE ROCHA — Páginas de divisiones (K9 · D.I.M.)
   Identidad institucional propia. Solo se carga en k9.html y dim.html.
   Reutiliza los tokens de style.css (rojo, marfil, grafito, oro).
   ================================================================== */

:root {
  --div-ink: var(--negro-carbono);
  --div-ink-soft: var(--grafito);
  --div-paper: var(--marfil);
  --div-paper-soft: var(--marfil-100);
  --div-accent: var(--rojo);
  --div-accent-deep: var(--div-accent);
  --div-gold: var(--oro-300);
  --div-line-dark: rgba(245, 243, 239, 0.16);
  --div-line-light: rgba(13, 13, 13, 0.16);
  --div-crest-h: 1px;
  --div-crest-w: 46px;
}

/* Identidad de color por división (docs/DESIGN.md § Divisiones).
   Solo redefinen la capa de acento: la estructura y el resto de tokens no cambian.
   K9 = verde institucional (rescate), DIM = rojo institucional (emergencia motorizada).
   Las bandas oscuras usan el acento brillante; las de papel, la variante -deep
   para mantener contraste AA. */
.div-is--k9 {
  --div-accent: var(--rojo);
  --div-accent-deep: var(--rojo-700);
}

.div-is--dim {
  --div-accent: var(--rojo);
  --div-accent-deep: var(--rojo-700);
}

.div-band--paper { --div-accent: var(--div-accent-deep); }

.div-band {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0;
  overflow: hidden;
}

.div-band--paper {
  background: var(--div-paper);
  color: var(--div-ink);
}

.div-band--deep {
  background: var(--div-ink);
  color: var(--marfil);
  border-top: 1px solid rgba(206, 43, 55, 0.38);
}

.div-band--soft {
  background: var(--div-ink-soft);
  color: var(--marfil);
  border-top: 1px solid rgba(206, 43, 55, 0.22);
}

.div-ghost {
  position: absolute;
  inset: auto 0 auto 0;
  top: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.055);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.div-band--paper .div-ghost {
  color: rgba(13, 13, 13, 0.06);
}

.div-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--div-accent);
}

.div-kicker--soft { color: var(--div-gold); }

.div-kicker::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--div-accent);
}

.div-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--plata-500);
}

.div-band--deep .div-eyebrow,
.div-band--soft .div-eyebrow { color: var(--plata-300); }

.ak {
  color: var(--div-accent);
  font-style: normal;
}

.div-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.div-head__num {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--div-accent);
  padding-top: 10px;
  white-space: nowrap;
}

.div-head__num::after {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin-top: 8px;
}

.div-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.div-lede {
  margin: 18px 0 0;
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--plata-500);
  max-width: 60ch;
}

.div-band--deep .div-lede,
.div-band--soft .div-lede { color: var(--plata-300); }

/* ==================================================================
   NOTICIA INICIAL K9 — presentación editorial con placa de video
   ================================================================== */
.div-news {
  position: relative;
  padding: calc(96px + clamp(54px, 7vw, 86px)) 0 clamp(54px, 8vw, 96px);
  overflow: hidden;
  color: var(--marfil);
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--div-accent) 24%, transparent), transparent 32%),
    linear-gradient(120deg, rgba(0, 0, 0, 0.94) 0%, rgba(13, 13, 13, 0.92) 48%, rgba(13, 13, 13, 0.78) 100%);
  border-bottom: 4px solid var(--rojo);
}

.div-news::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, black, transparent 78%);
  pointer-events: none;
}

/* ==================================================================
   INICIO D.I.M. — VIDEO DE FONDO CON DIFUMINACIÓN

   El texto va sobre el video, full-bleed. Para que no quede un velo
   uniforme se difumina: el `::after` lleva `backdrop-filter` y un
   `mask-image` en degradado, así el desenfoque y el oscurecimiento se
   desvanecen juntos de izquierda a derecha. Detrás del título el video
   está difuso y tapado; a la derecha está nítido y sin velo. No hay
   borde de panel, la integración es gradual.

   El material se re-encodeó con una curva de rodillo de altas luces
   (`curves=all='0/0 0.5/0.52 0.75/0.62 1/0.7'`): el pico de luminancia
   del área de texto bajó de 1.00 a 0.74 y el archivo quedó en 1.87 MB
   (antes 1.68 MB). Eso recupera detalle quemado y le da al scrim el
   margen que antes no había.

   NOTA HONESTA: el contraste final NO está verificado. El único cálculo
   confiable salió de un navegador real midiendo las cajas de los
   glifos; sin navegador, muestrear un rectángulo da falsos positivos
   (los picos caen en el gutter, fuera del texto). Antes de publicar,
   medir el lede y la copy contra el video en un navegador de verdad.
   ================================================================== */
.div-news--bg {
  isolation: isolate;
}

.div-news__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: cover;
  object-position: 50% 42%;
  /* La curva de tono ya hizo el trabajo en el encode: no hay que bajar
     la exposicion acá. Un realce minimo para que no quede plano. */
  filter: saturate(1.06) contrast(1.03) brightness(1.04);
  pointer-events: none;
}

/* Orden de capas: video (0) < difusion (1) < trama (2) < contenido (3).
   La trama de ::before es anterior al video en el orden de pintado, asi
   que sin z-index propio el video la tapa. */
.div-news--bg::before { z-index: 2; }

.div-news--bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Difusion + velo en la misma capa: el mask manda sobre ambos, asi que
     el lado derecho queda limpio y el texto se apoya solo en la izquierda. */
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  /* El velo y la difusion se desvanecen justo donde termina el texto
     (~37%), asi que la derecha queda limpia y nitida. Para darle MAS
     video, corré el primer 38% hacia abajo: el texto sigue tapa, pero
     la zona limpia arranca antes. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.48) 48%, rgba(0, 0, 0, 0.1) 56%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.48) 48%, rgba(0, 0, 0, 0.1) 56%, transparent 64%);
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.68) 40%, rgba(8, 8, 8, 0.3) 52%, rgba(8, 8, 8, 0.05) 62%, rgba(8, 8, 8, 0) 70%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.5) 0%, transparent 42%);
  pointer-events: none;
}

/* Sin backdrop-filter no hay difusion: el velo solo, algo mas fuerte
   para compensar que el video se ve nitido justo detras del texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .div-news--bg::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 52%, transparent 64%);
    mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 52%, transparent 64%);
    background:
      linear-gradient(90deg, rgba(8, 8, 8, 0.84) 0%, rgba(8, 8, 8, 0.8) 40%, rgba(8, 8, 8, 0.4) 54%, rgba(8, 8, 8, 0.06) 66%, rgba(8, 8, 8, 0) 74%),
      linear-gradient(0deg, rgba(8, 8, 8, 0.55) 0%, transparent 42%);
  }
}

.div-news--bg .div-news__grid {
  z-index: 3;
  /* El video se lleva la derecha y el texto la izquierda. 0.72fr sobre
     un contenedor de ~1200px deja el texto terminando en ~37% del
     viewport a 1432px, que es donde arranca la zona limpia del video. */
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}

.div-news--bg .div-news__title {
  /* Titulo mas chico: en una columna de ~500px el de 8rem (~470px de
     ancho) desborda y la seccion tiene overflow hidden, o sea lo corta. */
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

/* Sin movimiento no hay video: el gradient base ya es el fondo y la
   difusion se apaga con el, para no dejar el inicio mas plano y oscuro
   que el resto del sitio. */
@media (prefers-reduced-motion: reduce) {
  .div-news__bgvideo { display: none; }
  .div-news--bg::after { content: none; }
}

.div-news__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.div-news__media {
  display: flex;
  justify-content: flex-end;
}

.div-news__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.div-news__strap {
  display: inline-flex;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 8px 12px;
  background: var(--div-accent);
  color: var(--negro);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.div-news__lede,
.div-news__copy {
  max-width: 58ch;
  margin: 18px 0 0;
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--plata-300);
}

.div-news__copy {
  margin-top: 10px;
  font-size: var(--text-base);
  color: var(--plata-400);
}

.div-news__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(22px, 3vw, 34px);
}

.div-news__link,
.div-news__site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.div-news__link {
  background: var(--marfil);
  color: var(--negro);
}

.div-news__site {
  border: 1px solid rgba(245, 243, 239, 0.3);
  color: var(--marfil);
}

.div-news__video {
  position: relative;
  display: block;
  width: min(100%, 430px);
  aspect-ratio: 406 / 720;
  padding: 0;
  border: 1px solid rgba(245, 243, 239, 0.18);
  border-radius: 4px;
  overflow: hidden;
  background: var(--negro);
  color: var(--marfil);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.div-news__video::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.68), transparent 48%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 54%);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.div-news__video::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(245, 243, 239, 0.34);
  pointer-events: none;
}

.div-news__video video {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08);
  transition: transform 0.8s var(--ease-out), filter 0.4s var(--ease-out);
}

.div-news__video:hover video { transform: scale(1.035); filter: saturate(1) contrast(1.12); }
.div-news__video.is-playing video { transform: none; }
.div-news__video.is-playing::before { opacity: 0; }

.div-news__ticker {
  position: absolute;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.div-news__ticker {
  left: 22px;
  right: 22px;
  bottom: 20px;
  padding-top: 12px;
  border-top: 2px solid var(--div-accent);
  color: var(--marfil);
  text-align: left;
}

.div-news__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 10px;
  justify-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marfil);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
}

.div-news__video.is-playing .div-news__play,
.div-news__video.is-playing .div-news__ticker {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.div-news__play svg {
  width: 62px;
  height: 62px;
  padding: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.div-news__video:hover .div-news__play svg,
.div-news__play:focus-visible svg {
  transform: scale(1.06);
  background: var(--div-accent);
  color: var(--negro);
}

.div-news__link:focus-visible,
.div-news__site:focus-visible,
.div-news__play:focus-visible {
  outline: 2px solid var(--div-accent);
  outline-offset: 4px;
}

/* ==================================================================
   WEB OFICIAL K9 — invitación al portal externo
   ================================================================== */
.div-cartel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--div-line-light);
  border-left: 6px solid var(--div-accent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--div-accent) 10%, transparent), transparent 38%),
    var(--div-paper);
  box-shadow: 0 18px 50px rgba(13, 13, 13, 0.08);
}

.div-cartel__label {
  display: inline-flex;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--div-accent);
}

.div-cartel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--div-ink);
}

.div-cartel p {
  max-width: 76ch;
  margin: 14px 0 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--plata-500);
}

.div-cartel__courses {
  font-family: var(--font-mono);
  font-size: var(--text-2sm) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--div-ink) !important;
}

.div-cartel__aside {
  display: grid;
  gap: 14px;
  justify-items: stretch;
  min-width: min(280px, 100%);
}

.div-cartel__crest {
  display: block;
  width: clamp(118px, 12vw, 154px);
  height: auto;
  margin: 0 auto;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.div-cartel__links {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.div-cartel__visit {
  max-width: 30ch !important;
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 600;
  line-height: 1.12 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--div-ink) !important;
}

.div-cartel__url,
.div-cartel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.div-cartel__url {
  border: 1px solid var(--div-line-light);
  color: var(--div-ink);
}

.div-cartel__btn {
  background: var(--div-accent);
  color: var(--negro);
}

.div-cartel__url:focus-visible,
.div-cartel__btn:focus-visible {
  outline: 2px solid var(--div-accent);
  outline-offset: 3px;
}

.div-prose {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  max-width: 1180px;
}

.div-prose p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-500);
  margin: 0;
}

.div-band--deep .div-prose p,
.div-band--soft .div-prose p { color: var(--plata-300); }

.div-prose p + p { margin-top: 1em; }

.div-pull {
  margin: 0;
  border-left: 3px solid var(--div-accent);
  padding: 6px 0 6px clamp(18px, 2.6vw, 32px);
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--div-ink);
  align-self: center;
}

.div-band--deep .div-pull,
.div-band--soft .div-pull { color: var(--marfil); }

/* ==================================================================
   HERO — portada de división
   ================================================================== */
.div-hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: flex-end;
  color: var(--marfil);
  background-color: var(--div-ink);
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 32%;
  isolation: isolate;
}

.div-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 38%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.14) 100%);
}

.div-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 42%);
}

.div-hero__inner {
  padding-bottom: clamp(56px, 7.5vw, 104px);
  padding-top: calc(96px + 40px);
  width: 100%;
}

.div-hero__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.div-hero__emblem {
  display: block;
  width: 54px;
  height: auto;
  opacity: 0.96;
}

.div-hero__crest {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--plata-300);
}

.div-hero__crest::after {
  content: '';
  width: var(--div-crest-w);
  height: var(--div-crest-h);
  background: var(--div-accent);
}

.div-hero__kick {
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--div-accent);
}

.div-hero__kick--it {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--plata-300);
}

.div-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.9;
  font-size: clamp(2.9rem, 8.4vw, 7.2rem);
  color: var(--marfil);
  max-width: 15ch;
}

.div-hero__title .ak { color: var(--div-accent); }

.div-hero__monogram {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.78;
  font-size: clamp(5rem, 15vw, 12.5rem);
  color: var(--marfil);
  background: linear-gradient(180deg, var(--marfil) 42%, var(--plata-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.div-hero__sub {
  margin: clamp(14px, 2vw, 22px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--marfil);
}

.div-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: clamp(26px, 3.6vw, 44px);
}

.div-hero__tag {
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--plata-300);
}

.div-hero__rule {
  width: 90px;
  height: 3px;
  background: var(--div-accent);
}

.div-hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marfil);
}

/* ==================================================================
   LA UNIDAD — editorial: 3 conceptos grandes + cuerpo + valores
   ================================================================== */
.div-unidad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: 1180px;
}

.div-unidad__concepts {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--div-line-light);
}

.div-unidad__concept {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--div-line-light);
}

.div-unidad__concept-num {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--div-accent);
}

.div-unidad__concept-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--div-ink);
}

.div-unidad__concept-desc {
  display: block;
  margin-top: 10px;
  max-width: 34ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--plata-500);
}

.div-unidad__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-500);
}

.div-unidad__body p + p { margin-top: 1em; }

.div-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: 0;
  padding-top: clamp(18px, 2.4vw, 26px);
  padding-left: 0;
  border-top: 1px solid var(--div-line-light);
  list-style: none;
}

.div-values li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--div-ink);
}

.div-values li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--div-accent);
}

/* ==================================================================
   DOS COLUMNAS — binomio / texto + foto
   ================================================================== */
.div-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.div-duo__media {
  position: relative;
  margin: 0;
}

.div-duo__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.div-duo__cap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata-500);
}

.div-duo__cap::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--div-accent);
}

.div-duo__body { max-width: 52ch; }

.div-duo__body h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

.div-duo__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-500);
}

.div-duo__body p + p { margin-top: 1em; }

/* ==================================================================
   EL BINOMIO — cadena Confianza → Comunicación → Coordinación
   ================================================================== */
.div-bond {
  display: grid;
  margin-top: clamp(22px, 3vw, 30px);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--div-line-light);
}

.div-bond__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: clamp(13px, 1.8vw, 18px) 0;
  border-bottom: 1px solid var(--div-line-light);
}

.div-bond__step i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--div-accent);
}

.div-bond__step strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--div-ink);
}

.div-bond__note {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-500);
}

/* ==================================================================
   GRILLA DOCUMENTAL — entrenamiento / categorías
   ================================================================== */
.div-docs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 230px;
  gap: var(--space-md);
}

.div-doc {
  position: relative;
  margin: 0;
  overflow: hidden;
  grid-column: span 2;
}

.div-doc--wide { grid-column: span 3; }

.div-doc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 0.9s var(--ease-out), filter 0.4s var(--ease-out);
}

.div-doc:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.06);
}

.div-doc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.06));
}

.div-doc__cap {
  position: absolute;
  left: clamp(16px, 2.2vw, 26px);
  right: clamp(16px, 2.2vw, 26px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 2;
}

.div-doc__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--div-accent);
  margin-bottom: 6px;
}

.div-doc__cap h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marfil);
}

/* Captions arriba (galería documental K9): gradiente invertido para legibilidad */
.div-doc--cap-top::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.78));
}

.div-doc__cap--top {
  bottom: auto;
  top: clamp(14px, 2vw, 22px);
}

/* ==================================================================
   RESPUESTA OPERATIVA (DIM) — copy editorial + video local + áreas
   ================================================================== */
.resp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(8px, 1.5vw, 20px);
}

.resp-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 56ch;
}

.resp-lede {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--div-ink);
}

.resp-copy p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-500);
}

.resp-copy .div-pull { margin-top: 8px; }

.resp-media .div-news__video {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.dim-areas__label {
  margin: clamp(36px, 5vw, 64px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--div-accent);
}

#respuesta-operativa .dim-areas { margin-top: clamp(14px, 1.5vw, 20px); }

/* ==================================================================
   PRESENCIA OPERATIVA (DIM) — copy + díptico de placas verticales
   ================================================================== */
/* Composición en tres tiempos: el copy a la izquierda y, a la derecha,
   dos placas 9:16 del mismo ancho y con el mismo marco — el video propio
   de la División y el reel oficial de la red. El alto de la banda lo
   marca el texto, no la placa: por eso el copy no va debajo. */
.presence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.presence-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 50ch;
}

.presence-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.presence-copy p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--plata-300);
  text-wrap: pretty;
}

/* Ancho del díptico. El techo lo pone el clip local: 404px nativos, así
   que por encima de ~300px por placa el navegador lo escala y se ve blando. */
.presence-plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 34px);
  width: clamp(440px, 46vw, 620px);
}

.presence-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Tres clases a propósito: le gana a `.div-is--dim .div-news__video`
   (0,2,0), que si no impone su aspect-ratio 16/9 y su ancho de 430px. */
.div-is--dim .presence-plate .div-news__video {
  width: 100%;
  aspect-ratio: 9 / 16;
}

/* El reel comparte marco con el video — mismo borde, radio, sombra y
   filete interior — pero sin el degradado de `.div-news__video::before`:
   ese scrim apagaría los controles propios del reproductor de Facebook. */
.presence-reel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(245, 243, 239, 0.18);
  border-radius: 4px;
  overflow: hidden;
  background: var(--negro);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.presence-reel::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1px solid rgba(245, 243, 239, 0.34);
  pointer-events: none;
}

.presence-reel iframe {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.presence-plate__cap {
  margin: 0;
  display: grid;
  gap: 6px;
}

.presence-plate__cap h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--marfil);
}

/* Etiqueta mono sobre el pie de cada placa: misma firma que el resto de
   las páginas de división. */
.div-reel__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--div-accent);
}

@media (prefers-reduced-motion: reduce) {
  .div-news__video video { transition: none; }
}

/* ==================================================================
   GALERÍA — mosaico editorial
   ================================================================== */
.div-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: var(--space-md);
}

.div-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.div-gallery figure:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.div-gallery figure:nth-child(4) { grid-column: span 2; }

.div-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.9s var(--ease-out), filter 0.4s var(--ease-out);
}

.div-gallery figure:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.06);
}

/* Fondo espejado del bloque Misión (imagen1k9 volteada) */
#mision::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/imagenes home/k9/imagen1k9-fondo.webp') no-repeat center / cover;
  opacity: 0.26;
  pointer-events: none;
}

#mision .container { position: relative; z-index: 1; }

/* ==================================================================
   MISIÓN — banda oscura con datos
   ================================================================== */
.div-mission {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.div-mission__body {
  max-width: 68ch;
}

.div-mission__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-300);
}

.div-mission__body p + p { margin-top: 1em; }

/* ==================================================================
   CIERRE — blockquote institucional
   ================================================================== */
.div-close {
  text-align: center;
  padding-top: clamp(80px, 10vw, 132px);
}

.div-close__seal {
  width: 64px;
  height: auto;
  margin: 0 auto 24px;
  opacity: 0.92;
}

.div-close blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--marfil);
}

.div-close__rule {
  width: 64px;
  height: 3px;
  background: var(--div-accent);
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.div-close__meta {
  margin-top: clamp(26px, 3.6vw, 40px);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--plata-300);
}

.div-close__it {
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  color: var(--div-gold);
}

.div-letters {
  position: relative;
  height: clamp(70px, 10vw, 104px);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)),
    var(--letters) no-repeat center / contain;
  opacity: 0.5;
  filter: saturate(0.7);
  mix-blend-mode: screen;
}

.div-band--paper .div-letters { mix-blend-mode: multiply; opacity: 0.34; }

/* ==================================================================
   DATELINE / dado institucional (DIM)
   ================================================================== */
.div-hero__datum {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3.6vw, 44px);
  border: 1px solid var(--div-line-dark);
  border-left: 3px solid var(--div-accent);
  background: rgba(0, 0, 0, 0.4);
  padding: 16px 22px;
}

.div-hero__datum-label {
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata-300);
}

.div-hero__datum-date {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--marfil);
}

/* ==================================================================
   RESPUESTA OPERATIVA — áreas con íconos de divider (DIM)
   ================================================================== */
.dim-areas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--div-line-light);
  border-left: 1px solid var(--div-line-light);
  margin-top: clamp(30px, 4vw, 48px);
}

.dim-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.9vw, 10px);
  min-height: 140px;
  padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 20px);
  border-right: 1px solid var(--div-line-light);
  border-bottom: 1px solid var(--div-line-light);
}

.dim-area b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--div-accent);
}

/* Íconos SVG inline de las 7 áreas: marca de agua decorativa al fondo.
   Cada área (01-07) tiene su propio trazo en la misma familia (viewBox
   48, trazo 2.5, punta redonda): al fondo, abajo a la derecha, al 70%
   del cuadro, detrás de la numeración y la etiqueta. Heredan el acento
   de la sección por `color` (currentColor en el trazo); el filter de
   tinte que se usaba con los bitmaps no aplica porque rompería el trazo
   del SVG. */
.dim-area__icon-svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  opacity: 0.14;
  color: var(--div-accent-deep);
}

.dim-area span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--div-ink);
}

/* ==================================================================
   QUÉ HACE LA D.I.M. — composición negra en 4 sectores
   ================================================================== */
.dim-sectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--div-line-dark);
  border-left: 1px solid var(--div-line-dark);
}

.dim-sector {
  padding: clamp(26px, 3.6vw, 48px);
  border-right: 1px solid var(--div-line-dark);
  border-bottom: 1px solid var(--div-line-dark);
}

.dim-sector__num {
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--div-gold);
  margin-bottom: 18px;
}

.dim-sector h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marfil);
}

.dim-sector ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dim-sector li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: var(--text-base);
  color: var(--plata-300);
}

.dim-sector li:first-child { border-top: 0; }

.dim-sector li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--div-accent);
  align-self: center;
}

/* ==================================================================
   BANDA FOTOGRÁFICA — prevención DIM (full-bleed decoración)
   ================================================================== */
.div-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--strip-img);
  background-size: cover;
  background-position: center 38%;
  opacity: 0.32;
  pointer-events: none;
}

.div-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.75) 100%),
    linear-gradient(90deg, rgba(13, 13, 13, 0.6) 0%, transparent 60%);
}

.div-strip__copy {
  position: relative;
  z-index: 1;
  max-width: 52ch;
}

.div-strip__copy p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--plata-300);
}

/* ==================================================================
   COORDINACIÓN — flujo D.I.M. → organismos (sin logos)
   ================================================================== */
.div-chain {
  display: grid;
  grid-template-columns: auto 1fr repeat(3, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin-top: clamp(34px, 5vw, 60px);
}

.div-chain__origin {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--div-ink);
  text-align: center;
}

.div-chain__origin b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--marfil);
}

.div-chain__origin span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--div-accent);
}

.div-chain__link {
  justify-self: center;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--div-accent);
}

.div-chain__item {
  padding: clamp(16px, 2.4vw, 26px);
  text-align: center;
  border-top: 1px solid var(--div-line-light);
  border-bottom: 1px solid var(--div-line-light);
}

.div-chain__item svg {
  width: 28px;
  height: 28px;
  color: var(--div-ink);
  margin: 0 auto 12px;
}

.div-chain__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--div-ink);
}

/* ==================================================================
   MODAL DE VIDEO
   ================================================================== */
.vid-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgba(5, 5, 5, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-glass) var(--ease-out), visibility var(--duration-glass);
}

.vid-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.vid-modal__box {
  position: relative;
  width: min(960px, calc(100vw - 40px));
}

.vid-modal video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
}

.vid-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 2px solid var(--div-accent);
  background: transparent;
  color: var(--marfil);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 0;
  cursor: pointer;
}

.vid-modal__close:hover { color: var(--div-accent); }

.vid-modal__cap {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata-300);
  text-align: center;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* ==================================================================
   PALABRAS LATERALES — hero K9 · D.I.M. (plantilla K9/DIM)
   Columna vertical de palabras institucionales, mono, al lado derecho.
   Solo en pantallas anchas; se oculta en móvil para no pisar el título.
   ================================================================== */
.div-words {
  position: absolute;
  top: clamp(128px, 15vh, 200px);
  right: clamp(18px, 2.4vw, 34px);
  z-index: 3;
  display: grid;
  gap: 12px;
  padding: 0 0 0 16px;
  border-left: 4px solid var(--div-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.9);
  writing-mode: horizontal-tb;
  text-align: left;
}

.div-words i { font-style: normal; }

@supports (writing-mode: vertical-rl) {
  .div-words { writing-mode: vertical-rl; text-orientation: mixed; }
}

@media (max-width: 900px) { .div-words { display: none; } }

/* ==================================================================
   BANDA DE DATOS — estadística institucional (plantilla K9/DIM)
   Cinco celdas con valor mono + rótulo. Cinta oscura ceñida.
   ================================================================== */
.div-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--div-line-dark);
  border-left: 1px solid var(--div-line-dark);
}

.div-stat {
  padding: clamp(20px, 2.6vw, 34px) clamp(14px, 2vw, 26px);
  border-right: 1px solid var(--div-line-dark);
  border-bottom: 1px solid var(--div-line-dark);
  text-align: center;
}

.div-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--marfil);
}

.div-stat span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--div-gold);
}

/* ==================================================================
   FLAGLINE ÍTALO-BOQUENSE — cinta tricolor
   Verde · blanco · rojo, como la bandera del barrio y del cuartel.
   ================================================================== */
.div-flagline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: clamp(72px, 6vw, 108px);
  height: 4px;
  overflow: hidden;
}

.div-flagline i:nth-child(1) { background: var(--verde); }
.div-flagline i:nth-child(2) { background: var(--blanco); }
.div-flagline i:nth-child(3) { background: var(--rojo); }

@supports (display: flex) {
  .div-stats { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 720px) {
  .div-stats { grid-template-columns: repeat(2, 1fr); }
  .div-stat:nth-child(5) { grid-column: 1 / -1; }
}

/* ==================================================================
   K9 — ritmo simple después de retirar galería y cierre
   ================================================================== */
.div-is--k9 .div-news {
  padding: calc(88px + clamp(34px, 5vw, 58px)) 0 clamp(42px, 6vw, 72px);
}

.div-is--k9 .div-news__grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: clamp(24px, 4.4vw, 56px);
}

.div-is--k9 .div-news__title {
  font-size: clamp(3rem, 8.4vw, 6.8rem);
}

.div-is--k9 .div-news__strap {
  margin-top: clamp(14px, 2vw, 20px);
}

.div-is--k9 .div-news__lede,
.div-is--k9 .div-news__copy {
  max-width: 50ch;
}

.div-is--k9 .div-band {
  padding: clamp(46px, 6.5vw, 78px) 0;
}

.div-is--k9 .div-ghost {
  display: none;
}

.div-is--k9 .div-cartel {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  gap: clamp(18px, 3vw, 36px);
  box-shadow: 0 14px 34px rgba(13, 13, 13, 0.06);
}

.div-is--k9 .div-cartel h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
}

.div-is--k9 .div-cartel p {
  max-width: 68ch;
}

.div-is--k9 .div-head {
  gap: clamp(16px, 3vw, 34px);
  margin-bottom: clamp(26px, 4vw, 44px);
}

.div-is--k9 .div-head h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.35rem);
}

.div-is--k9 .div-unidad,
.div-is--k9 .div-duo,
.div-is--k9 .div-mission {
  gap: clamp(24px, 4vw, 52px);
}

.div-is--k9 .div-values {
  margin-top: clamp(26px, 4vw, 42px);
}

.div-is--k9 .div-docs {
  grid-auto-rows: 190px;
  gap: 12px;
}

/* K9 — sin numeración editorial: solo contenido limpio */
.div-is--k9 .div-head__num,
.div-is--k9 .div-unidad__concept-num,
.div-is--k9 .div-bond__step i,
.div-is--k9 .div-doc__idx { display: none; }

.div-is--k9 .div-head { grid-template-columns: 1fr; }
.div-is--k9 .div-unidad__concept { grid-template-columns: 1fr; }
.div-is--k9 .div-bond__step { grid-template-columns: 1fr; }

/* K9 — Unidad: ancla visual para cada concepto (sin números) */
.div-is--k9 .div-unidad__concept {
  position: relative;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--div-accent);
}
.div-is--k9 .div-unidad__concept-text strong { letter-spacing: 0.06em; }
.div-is--k9 .div-unidad__concept-desc { max-width: 42ch; }

/* ==================================================================
   DIM — ritmo simple, heredado de K9
   (bandas compactas, sin marca de agua y cabeceras ajustadas;
    sin numeración editorial, igual que K9)
   ================================================================== */
.div-is--dim .div-band {
  padding: clamp(46px, 6.5vw, 78px) 0;
}

.div-is--dim .div-ghost {
  display: none;
}

.div-is--dim .div-head {
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 34px);
  margin-bottom: clamp(26px, 4vw, 44px);
}

.div-is--dim .div-head h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.35rem);
}

/* DIM — inicio con video, ritmo heredado de K9
   (placa de video 16:9 porque el clip de inicio es 1280×720;
    el monograma D.I.M. conserva el acento rojo del hero previo) */
.div-is--dim .div-news {
  padding: calc(88px + clamp(34px, 5vw, 58px)) 0 clamp(42px, 6vw, 72px);
}

.div-is--dim .div-news__grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: clamp(24px, 4.4vw, 56px);
}

.div-is--dim .div-news__title {
  font-size: clamp(3rem, 8.4vw, 6.8rem);
}

.div-is--dim .div-news__monogram {
  margin: 0 0 clamp(12px, 1.8vw, 18px);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--div-accent);
}

.div-is--dim .div-news__strap {
  margin-top: clamp(14px, 2vw, 20px);
}

.div-is--dim .div-news__lede,
.div-is--dim .div-news__copy {
  max-width: 50ch;
}

.div-is--dim .div-news__video {
  width: min(100%, 430px);
  aspect-ratio: 16 / 9;
}

@media (max-width: 1080px) {
  .dim-areas { grid-template-columns: repeat(4, 1fr); }
  .div-chain { grid-template-columns: 1fr; }
  .div-chain__link { transform: rotate(90deg); }
  .div-gallery { grid-auto-rows: 200px; }
  .div-gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .div-gallery figure:nth-child(4) { grid-column: span 2; }
  /* El díptico pasa debajo del copy: a esta medida las dos placas en
     línea le robberyan el ancho a la medida de lectura. */
  .presence-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 52px); }
  .presence-copy { max-width: 58ch; }
  .presence-plates { width: min(100%, 520px); margin-inline: auto; }
}

@media (max-width: 820px) {
  .div-news__grid,
  .div-cartel { grid-template-columns: 1fr; }
  .div-news__grid { gap: 28px; }
  .div-news__media { justify-content: center; max-width: 620px; }
  .div-is--k9 .div-news__title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .div-is--k9 .div-news__video { width: min(100%, 300px); margin-inline: auto; }
  .div-is--k9 .div-news__strap { letter-spacing: 0.06em; font-size: 11px; line-height: 1.4; text-wrap: balance; }
  .div-is--k9 .div-news { padding-top: calc(88px + clamp(32px, 5.5vw, 44px)); padding-bottom: clamp(36px, 6vw, 48px); }
  .div-is--k9 .div-news__grid { grid-template-columns: 1fr; gap: 30px; }
  .div-is--k9 .div-news__strap { margin-top: 18px; }
  .div-is--k9 .div-news__lede { margin-top: 20px; }
  .div-is--dim .div-news { padding-top: calc(88px + clamp(32px, 5.5vw, 44px)); padding-bottom: clamp(36px, 6vw, 48px); }
  .div-is--dim .div-news__grid { grid-template-columns: 1fr; gap: 30px; }
  .div-is--dim .div-news__title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .div-is--dim .div-news__video { width: min(100%, 300px); margin-inline: auto; }
  .div-is--dim .div-news__strap { letter-spacing: 0.06em; font-size: 11px; line-height: 1.4; text-wrap: balance; margin-top: 18px; }
  .div-is--dim .div-news__lede { margin-top: 20px; }
  /* A una columna el texto ocupa todo el ancho, asi que no hay franja
     libre para abrir la difusion: se mantiene parejo. Blur mas chico
     porque backdrop-filter sobre un video en movimiento es caro. */
  .div-news--bg::after {
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
    background:
      linear-gradient(90deg, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.66) 62%, rgba(8, 8, 8, 0.58) 100%),
      linear-gradient(0deg, rgba(8, 8, 8, 0.52) 0%, transparent 44%);
  }
  /* El reparto 60/40 es de escritorio: en una columna no hay franja
     derecha para reservar, asi que el titulo vuelve a su escala normal. */
  .div-news--bg .div-news__grid { grid-template-columns: minmax(0, 1fr); }
  .div-news--bg .div-news__title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .div-news__bgvideo { object-position: 50% 34%; }
  .div-hero { background-position: center 26%; }
  .div-hero::before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.42) 100%); }
  .div-hero__title { font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .div-prose,
  .div-duo,
  .div-mission,
  .div-unidad,
  .dim-sectors { grid-template-columns: 1fr; }
  .div-duo__media { max-width: 520px; }
  .div-values { justify-content: flex-start; }
  .div-docs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .div-doc { grid-column: span 1 !important; grid-row: span 1 !important; }
  .div-head { grid-template-columns: 1fr; gap: 10px; }
  .div-head__num { padding-top: 0; }
  .presence-grid { gap: 40px; }
  .presence-copy { max-width: none; }
  .presence-plates { width: min(100%, 440px); gap: 16px; }
  .resp-grid { grid-template-columns: 1fr; gap: 28px; }
  .resp-media { max-width: 520px; }
}

@media (max-width: 520px) {
  .div-news { padding-top: calc(82px + 38px); }
  .div-news__actions { align-items: stretch; flex-direction: column; }
  .div-news__link,
  .div-news__site { width: 100%; }
  .div-news__ticker { left: 16px; right: 16px; bottom: 16px; }
  .div-news__play span { display: none; }
  .div-is--k9 .div-news__video { width: min(100%, 240px); }
  .div-is--k9 .div-news { padding-bottom: clamp(34px, 7vw, 44px); }
  .div-is--k9 .div-news__grid { gap: 26px; }
  .div-is--k9 .div-news__strap { margin-top: 16px; }
  .div-is--k9 .div-news__lede { margin-top: 18px; }
  .div-is--dim .div-news { padding-bottom: clamp(34px, 7vw, 44px); }
  .div-is--dim .div-news__grid { gap: 26px; }
  .div-is--dim .div-news__video { width: min(100%, 240px); }
  .div-is--dim .div-news__strap { margin-top: 16px; }
  .div-is--dim .div-news__lede { margin-top: 18px; }
  .div-cartel { padding: 20px; }
  .div-docs { grid-template-columns: 1fr; }
  .dim-areas { grid-template-columns: repeat(2, 1fr); }
  .div-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .div-gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .div-gallery figure:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .div-hero__datum { grid-template-columns: 1fr; }
  .presence-plates { grid-template-columns: 1fr; width: min(100%, 280px); gap: 28px; }
}