/* ==================================================================
   BOMBEROS VUELTA DE ROCHA — V8 MASTER EDITION
   Premium Evolution — Production Ready
   Preserva identidad, estructura y funcionalidad.
   ================================================================== */

/* ==================================================================
   1. DESIGN SYSTEM — tokens institucionales
   ================================================================== */
:root {
  /* ——— Motion ——— */
  --duration-glass: 360ms;
  --ease-spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ——— Z-Index ——— */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-lightbox: 400;
  --z-tooltip: 500;

  /* ——— Opacities ——— */
  --opacity-subtle: 0.04;
  --opacity-light: 0.08;
  --opacity-medium: 0.15;
  --opacity-strong: 0.3;
  --opacity-glass: 0.68;

  /* ——— Shadows ——— */
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-card-hover-dark: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lightbox: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-hero-vignette: inset 0 0 120px rgba(0, 0, 0, 0.3);

  /* ——— Glass ——— */
  --glass-border-subtle: rgba(255, 255, 255, 0.06);
  --glass-bg-dark: rgba(0, 0, 0, 0.88);

  /* ——— Blur ——— */
  --blur-glass: 20px;
  --blur-lightbox: 24px;

  /* ——— Spacing ——— */
  --space-card-body: var(--space-xl);

  /* ——— Text Gradients ——— */
  --text-gradient-rojo: linear-gradient(135deg, var(--rojo), var(--rojo-700));
  --text-gradient-marfil: linear-gradient(180deg, var(--marfil) 40%, var(--plata-200));
  --text-gradient-marfil-dark: linear-gradient(180deg, var(--marfil) 50%, var(--plata-300));
}

/* ==================================================================
   ARCHIVO VISUAL — Enlace al archivo audiovisual oficial
   ================================================================== */
.social-archive-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  font-size: var(--text-2sm);
  font-weight: 800;
  text-decoration: none;
}

.social-archive-link span {
  color: var(--social-red);
  transition: transform var(--duration-base) var(--ease-out);
}

.social-archive-link:hover span {
  transform: translate(3px, -3px);
}

.social-archive-link:focus-visible {
  outline: 2px solid var(--social-red);
  outline-offset: 5px;
}

.social-archive-link {
  margin: 1.15rem 1.4rem 1.45rem;
  color: var(--social-ink);
}

.timeline-card--archive {
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 115, 74, 0.12), transparent 38%),
    linear-gradient(145deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 92%, var(--rojo) 8%));
  border-color: color-mix(in srgb, var(--border-color) 72%, var(--rojo) 28%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 34px rgba(24, 20, 18, 0.08);
}

.timeline-card--archive::before {
  height: 6px;
  background: linear-gradient(90deg, var(--rojo) 0 64%, var(--verde) 64%);
}

.timeline-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.timeline-card__top .timeline-date {
  margin: 0;
}

.timeline-card__year {
  padding: 0.4rem 0.55rem;
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde) 26%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.timeline-card__archive {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.35rem;
  padding: 0.8rem;
  color: #f4f1ea;
  background: linear-gradient(135deg, #20201f, #111210);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(17, 18, 16, 0.18);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base), box-shadow var(--duration-base);
}

.timeline-card__archive-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: var(--rojo);
  border-radius: 10px;
}

.timeline-card__archive-icon svg {
  width: 20px;
  height: 20px;
}

.timeline-card__archive-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.timeline-card__archive-copy small {
  color: rgba(244, 241, 234, 0.52);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.timeline-card__archive-copy strong {
  color: #fff;
  font-size: var(--text-2sm);
  line-height: 1.25;
}

.timeline-card__archive-arrow {
  color: #78b494;
  font-size: var(--text-base);
  transition: transform var(--duration-base) var(--ease-out);
}

.timeline-card__archive:hover {
  border-color: rgba(120, 180, 148, 0.48);
  box-shadow: 0 14px 32px rgba(17, 18, 16, 0.26);
  transform: translateY(-2px);
}

.timeline-card__archive:hover .timeline-card__archive-arrow {
  transform: translate(3px, -3px);
}

.timeline-card__archive:focus-visible {
  outline: 2px solid var(--rojo, #c8102e);
  outline-offset: 4px;
}

/* ——— Memoria en movimiento: ventana audiovisual lateral ——— */
.history-film-window {
  width: min(100%, 445px);
  margin: clamp(-2.5rem, -3vw, -1rem) 0 clamp(4rem, 8vw, 7rem) auto;
  overflow: hidden;
  scroll-margin-top: 140px;
  color: #eee9df;
  background: #111110;
  border: 1px solid rgba(36, 33, 30, 0.24);
  box-shadow: 0 24px 64px rgba(38, 29, 22, 0.24);
  transform: translateX(clamp(0px, 3.5vw, 42px));
}

.history-film-window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: 0.7rem 0.85rem;
  color: rgba(238, 233, 223, 0.68);
  background: #1d1c1a;
  border-top: 4px solid var(--history-red, #9c1926);
  border-bottom: 1px solid rgba(238, 233, 223, 0.12);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-film-window__bar b {
  margin-right: 0.45rem;
  color: #fff;
}

.history-film-window__status {
  flex: 0 0 auto;
  padding: 0.28rem 0.42rem;
  color: #dce9df;
  background: rgba(22, 115, 74, 0.28);
  border: 1px solid rgba(65, 161, 112, 0.38);
}

.history-film-window__player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.history-film-window__player iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.history-film-window__body {
  padding: 1.35rem 1.45rem 1.5rem;
}

.page-historia #historia .history-film-window__eyebrow {
  margin: 0 0 0.55rem;
  color: #c8a85d;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-historia #historia .history-film-window__body h2 {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  line-height: 0.98;
}

.page-historia #historia .history-film-window__body > p:not(.history-film-window__eyebrow) {
  margin: 0;
  color: rgba(238, 233, 223, 0.66);
  font-size: var(--text-3sm);
  line-height: 1.62;
}

.history-film-window__details {
  margin-top: 1.1rem;
  color: rgba(238, 233, 223, 0.7);
  border-top: 1px solid rgba(238, 233, 223, 0.12);
  border-bottom: 1px solid rgba(238, 233, 223, 0.12);
}

.history-film-window__details summary {
  position: relative;
  padding: 0.85rem 1.4rem 0.85rem 0;
  color: #eee9df;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.history-film-window__details summary::-webkit-details-marker {
  display: none;
}

.history-film-window__details summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  color: #c8a85d;
  font-size: var(--text-base);
  transform: translateY(-50%);
}

.history-film-window__details[open] summary::after {
  content: "−";
}

.history-film-window__details dl {
  margin: 0 0 0.75rem;
}

.history-film-window__details dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(238, 233, 223, 0.08);
}

.history-film-window__details dt {
  color: rgba(238, 233, 223, 0.45);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  text-transform: uppercase;
}

.history-film-window__details dd {
  margin: 0;
  color: #eee9df;
  font-family: var(--font-display);
  font-size: var(--text-2sm);
}

.page-historia #historia .history-film-window__details > p {
  margin: 0 0 0.85rem;
  color: rgba(238, 233, 223, 0.5);
  font-size: var(--text-2sm);
  line-height: 1.52;
}

.history-film-window__body > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: #eee9df;
  font-size: var(--text-2sm);
  font-weight: 800;
  text-decoration: none;
}

.history-film-window__body > a span {
  color: #c8a85d;
  transition: transform var(--duration-base) var(--ease-out);
}

.history-film-window__body > a:hover span {
  transform: translate(3px, -3px);
}

.history-film-window__body > a:focus-visible,
.history-film-window__details summary:focus-visible {
  outline: 2px solid #c8a85d;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .history-film-window {
    margin-top: 0;
    transform: none;
  }
}

@media (max-width: 520px) {
  .history-film-window {
    width: 100%;
    margin-bottom: 4rem;
  }

  .history-film-window__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .history-film-window__body {
    padding: 1.2rem;
  }
}

/* ==================================================================
   1B. HISTORIA INSTITUCIONAL — edición enciclopédica
   ================================================================== */

.page-historia {
  --history-paper: #171819;
  --history-sheet: #202123;
  --history-ink: #f0ece4;
  --history-muted: #bbb4aa;
  --history-soft: #938d84;
  --history-line: rgba(240, 236, 228, 0.14);
  --history-line-strong: rgba(240, 236, 228, 0.25);
  --history-red: #e34251;
  --history-red-dark: #ff7180;
  --history-gold: #d0b56c;
  --history-note: #332d20;
  --history-shadow: 0 28px 76px -42px rgba(0, 0, 0, 0.72);
  background: var(--history-paper);
}

.page-historia main {
  background: var(--history-paper);
}

/* ——— Portada histórica ——— */
.history-hero {
  position: relative;
  min-height: min(72vh, 760px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  background: #111;
  color: #fff;
}

.history-hero__photo,
.history-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.history-hero__photo {
  z-index: -2;
  object-fit: cover;
  object-position: center 42%;
  filter: none;
  transform: scale(1.01);
}

.history-hero__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.48) 48%, rgba(10, 10, 10, 0.19) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.12) 35%, rgba(10, 10, 10, 0.64) 100%);
}

.history-hero__content {
  width: 100%;
  padding-top: 150px;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.history-kicker {
  margin: 0 0 0.9rem;
  color: var(--history-red);
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.history-hero .history-kicker {
  color: #ff5c6a;
}

.history-hero h1 {
  max-width: 870px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7.2vw, 7rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: 0.03em;
  text-transform: none;
  text-wrap: balance;
}

.history-hero__name {
  max-width: 870px;
  margin: 1.35rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
}

.history-hero__lead {
  max-width: 670px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-base);
  line-height: 1.7;
}

.history-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2.2rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-2sm);
  letter-spacing: 0.035em;
}

.history-hero__meta span {
  padding: 0.2rem 1.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.history-hero__meta span:first-child {
  padding-left: 0;
  border-left: 0;
}

.history-hero__meta strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
}

.history-hero__caption {
  position: absolute;
  right: max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem));
  bottom: 1.25rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--text-2xs);
  letter-spacing: 0.035em;
}

/* ——— Superficie de lectura ——— */
.page-historia .historia {
  background:
    radial-gradient(circle at 8% 4%, rgba(169, 137, 69, 0.08), transparent 24rem),
    var(--history-paper);
}

.page-historia #historia .historia-container,
.page-historia #historia .container {
  width: 100%;
  max-width: 1180px;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem) 5rem;
}

.page-historia #historia h2,
.page-historia #historia h3,
.page-historia #historia h4 {
  color: var(--history-ink);
  text-transform: none;
}

.page-historia #historia p {
  margin: 0 0 1.15em;
  color: var(--history-muted);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1vw, 1.08rem);
  line-height: 1.82;
}

.page-historia #historia ul,
.page-historia #historia ol {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-historia #historia ul li,
.page-historia #historia ol li {
  padding-left: 0;
  color: var(--history-muted);
  font-size: inherit;
  line-height: inherit;
}

.page-historia #historia ul li::before,
.page-historia #historia ol li::before {
  content: none;
}

/* ——— Resumen + ficha ——— */
.history-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(290px, 0.78fr);
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: start;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.history-intro__copy h2 {
  max-width: 710px;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: 0.03em;
}

.page-historia #historia .history-deck {
  max-width: 690px;
  margin-bottom: 1.35rem;
  color: var(--history-ink);
  font-size: clamp(1.23rem, 1.7vw, 1.52rem);
  line-height: 1.55;
}

.history-march-vignette {
  float: right;
  width: min(100%, 285px);
  margin: 0.2rem 0 1.2rem 1.35rem;
  padding: 1rem;
  border: 1px solid var(--history-line);
  border-top: 3px solid var(--history-red);
  background: linear-gradient(180deg, rgba(227, 66, 81, 0.08), rgba(227, 66, 81, 0.02)), var(--history-sheet);
  box-shadow: 0 12px 22px rgba(26, 22, 18, 0.12);
}

.history-march-vignette__kicker {
  margin: 0 0 0.4rem;
  color: var(--history-red-dark);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-historia #historia .history-march-vignette h3 {
  margin: 0 0 0.55rem;
  padding: 0;
  border: 0;
  color: var(--history-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  line-height: 1.05;
}

.page-historia #historia .history-march-vignette > p:not(.history-march-vignette__kicker) {
  margin: 0 0 0.85rem;
  color: var(--history-muted);
  font-size: var(--text-3sm);
  line-height: 1.55;
}

.history-march-player summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.75rem 0.85rem;
  background: var(--history-red);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-3sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  list-style: none;
  text-transform: uppercase;
}

.history-march-player summary::-webkit-details-marker { display: none; }

.history-march-player summary::after {
  content: "↗";
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.history-march-player[open] summary::after {
  content: "×";
  font-size: var(--text-md);
}

.history-march-player summary:focus-visible {
  outline: 3px solid var(--history-gold);
  outline-offset: 3px;
}

.history-march-player__frame {
  margin-top: 0.8rem;
  aspect-ratio: 4 / 3;
  background: #000;
}

.history-march-player__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.history-march-player__fallback {
  display: inline-flex;
  margin-top: 0.7rem;
  color: var(--history-red);
  font-size: var(--text-3sm);
  font-weight: 800;
  text-decoration: none;
}

.history-march-player__fallback:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.history-review-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 1rem;
  max-width: 690px;
  margin-top: 2rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--history-line);
  border-left: 3px solid var(--history-gold);
  background: color-mix(in srgb, var(--history-note) 64%, transparent);
}

.history-review-note span {
  align-self: start;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  background: var(--history-gold);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-historia #historia .history-review-note p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-3sm);
  line-height: 1.6;
}

.history-facts {
  margin: 0;
  border-top: 3px solid var(--history-red);
  background: var(--history-sheet);
  box-shadow: var(--history-shadow);
}

.history-facts div {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--history-line);
}

.history-facts dt {
  margin-bottom: 0.3rem;
  color: var(--history-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.history-facts dd {
  margin: 0;
  color: var(--history-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.42;
}

/* ——— Índice lateral sticky ——— */
.history-body-layout {
  display: grid;
  grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.75rem);
  align-items: start;
}

.history-toc {
  position: sticky;
  top: 96px;
  z-index: 25;
  max-height: calc(100vh - 120px);
  margin: 0;
  padding: 1rem 0.85rem;
  overflow: auto;
  border: 1px solid var(--history-line);
  border-left: 3px solid var(--history-red);
  background: color-mix(in srgb, var(--history-paper) 93%, transparent);
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
}

.history-toc > span {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--history-ink);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.page-historia #historia .history-toc ol {
  display: grid;
  gap: 0.12rem;
  overflow: visible;
}

.history-toc ol::-webkit-scrollbar { display: none; }

.page-historia #historia .history-toc li {
  min-width: 0;
}

.history-toc a {
  display: block;
  padding: 0.52rem 0.55rem;
  border-radius: 3px;
  color: var(--history-muted);
  font-size: var(--text-2sm);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.history-toc a:hover,
.history-toc a:focus-visible {
  background: color-mix(in srgb, var(--history-red) 10%, transparent);
  color: var(--history-red);
}

.history-figure[id] {
  scroll-margin-top: 130px;
}

/* ——— Capítulos ——— */
.history-article {
  counter-reset: history-fig;
}

.history-chapter {
  --history-divider-icon: url('../assets/dividers/imagen-1.webp');
  --history-divider-size: 72px;
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 760px);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  justify-content: center;
  scroll-margin-top: 150px;
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.history-chapter:nth-of-type(2) {
  --history-divider-icon: url('../assets/dividers/imagen-2.webp');
}

.history-chapter:nth-of-type(3) {
  --history-divider-icon: url('../assets/dividers/casco-rojo-fondo.webp');
}

.history-chapter:nth-of-type(4) {
  --history-divider-icon: url('../assets/dividers/imagen-4.webp');
}

.history-chapter:nth-of-type(5) {
  --history-divider-icon: url('../assets/dividers/imagen-5.webp');
}

.history-chapter:nth-of-type(6) {
  --history-divider-icon: url('../assets/dividers/imagen-6.webp');
}

.history-chapter:nth-of-type(7) {
  --history-divider-icon: url('../assets/dividers/imagen-7.webp');
}

.history-chapter::after {
  content: '';
  grid-column: 1 / -1;
  width: 100%;
  height: 86px;
  margin-top: clamp(4rem, 8vw, 7rem);
  background-image:
    var(--history-divider-icon),
    radial-gradient(circle, var(--history-paper) 0 58%, transparent 60%),
    linear-gradient(90deg, transparent, var(--history-line-strong) 16%, var(--history-line) 84%, transparent);
  background-position: center;
  background-repeat: no-repeat;
  background-size:
    var(--history-divider-size) var(--history-divider-size),
    90px 90px,
    100% 1px;
}

.history-chapter__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 124px minmax(0, 760px);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  justify-content: center;
  margin-bottom: 2.2rem;
}

.history-chapter__number {
  grid-column: 1;
  grid-row: 1 / 5;
  position: relative;
  color: var(--history-line-strong);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 6.5rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.07em;
}

.history-chapter__number::after {
  content: '';
  position: absolute;
  left: 0.13em;
  top: calc(100% + 1.2rem);
  width: 1px;
  height: 3rem;
  background: var(--history-red);
}

.page-historia #historia .history-chapter__period {
  grid-column: 2;
  margin: 0 0 0.55rem;
  color: var(--history-red);
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.history-chapter__head h2 {
  grid-column: 2;
  max-width: 740px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.03em;
}

.page-historia #historia .history-chapter__summary {
  grid-column: 2;
  max-width: 650px;
  margin: 1rem 0 0;
  color: var(--history-soft);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.62;
}

.history-chapter__body {
  grid-column: 2;
  min-width: 0;
}

.history-chapter__body > p:first-child {
  color: var(--history-ink);
  font-size: var(--text-md);
}

.history-chapter__body--portrait {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 2rem;
  align-items: start;
}

/* ——— Figuras de archivo ——— */
.history-figure {
  margin: 0;
}

.history-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 8px solid var(--history-sheet);
  outline: 1px solid var(--history-line);
  filter: sepia(0.08) saturate(0.82);
  box-shadow: var(--history-shadow);
}

.history-figure--portrait img {
  aspect-ratio: 0.78;
  object-fit: cover;
}

.history-figure--bio {
  float: right;
  clear: right;
  width: min(250px, 38%);
  margin: 0.4rem 0 1.1rem 1.7rem;
}

.history-figure--bio img {
  border: 1px solid var(--history-line);
  background: var(--history-sheet);
  filter: none;
  outline: none;
  box-shadow: none;
}

.history-figure--pop {
  position: relative;
  margin-top: 2.2rem;
  padding: 0.85rem 0.85rem 1rem;
  background: linear-gradient(180deg, #f7f3ea 0%, #ece5d6 100%);
  box-shadow: 0 10px 22px rgba(26, 22, 18, 0.28);
}

.history-figure--oval {
  float: right;
  clear: right;
  width: min(240px, 36%);
  margin: 1.2rem 0 1.2rem 1.8rem;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.history-figure--oval img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 58% 12%;
  border-radius: 50%;
  border: 3px solid #8b7355;
  box-shadow:
    0 0 0 2px #d4c5a9,
    0 0 0 6px #8b7355,
    0 0 0 8px rgba(139, 115, 85, 0.25),
    0 8px 20px rgba(26, 22, 18, 0.4);
  filter: sepia(0.12) saturate(0.85) contrast(1.05);
}

.history-figure--oval figcaption {
  display: none;
}

.history-figure__cut {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  width: calc(100% - 1.7rem);
  height: auto;
  transform: scale(1.05);
  transform-origin: 50% 76%;
  filter: drop-shadow(0 12px 14px rgba(26, 22, 18, 0.38)) brightness(1.08);
}

.history-figure--video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 4px;
  box-shadow: var(--history-shadow);
}

.history-figure figcaption {
  margin-top: 0.7rem;
  color: var(--history-soft);
  font-size: var(--text-2sm);
  line-height: 1.55;
}

.history-figure figcaption span {
  margin-right: 0.35rem;
  color: var(--history-red);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.history-social-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
  margin: 2.4rem 0 0;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid var(--history-line);
  background:
    linear-gradient(135deg, rgba(133, 24, 31, 0.08) 0%, rgba(133, 24, 31, 0) 38%),
    var(--history-sheet);
  box-shadow: var(--history-shadow);
}

.history-social-feature__copy {
  min-width: 0;
  max-width: 620px;
  padding: 0;
}

.page-historia #historia .history-social-feature__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--history-red);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-historia #historia .history-social-feature h3 {
  margin: 0 0 0.75rem;
  color: var(--history-ink);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.05;
}

.page-historia #historia .history-social-feature p:not(.history-social-feature__eyebrow) {
  margin-bottom: 1.15rem;
  color: var(--history-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.history-social-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--history-red);
  font-weight: 800;
  text-decoration: none;
}

.history-social-feature__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.history-social-feature__embed {
  margin: 0;
  min-width: 0;
}

.history-social-feature__embed iframe {
  display: block;
  width: 100%;
  max-width: 500px;
  min-height: 620px;
  margin-inline: auto;
  border: 0;
  background: #fff;
  box-shadow: 0 12px 24px rgba(26, 22, 18, 0.16);
}

.history-social-feature__embed figcaption {
  margin-top: 0.65rem;
  color: var(--history-soft);
  font-size: var(--text-2sm);
  line-height: 1.5;
}

.history-social-feature__embed figcaption span {
  margin-right: 0.35rem;
  color: var(--history-red);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.history-media-split {
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(0, 1.12fr);
  gap: 2.2rem;
  align-items: start;
  margin-top: 2rem;
}

.history-media-split--portrait {
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
}

.history-media-split--portrait .history-figure img {
  aspect-ratio: 0.77;
  object-fit: cover;
}

/* ——— Notas, listas e hitos ——— */
.history-source-note {
  margin: 2rem 0 0;
  padding: 1.15rem 1.3rem 1.15rem 1.5rem;
  border-left: 3px solid var(--history-gold);
  background: var(--history-note);
}

.history-source-note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--history-ink);
  font-size: var(--text-2xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.page-historia #historia .history-source-note p {
  margin: 0;
  color: var(--history-muted);
  font-family: var(--font-body);
  font-size: var(--text-3sm);
  line-height: 1.62;
}

.page-historia #historia .history-list {
  display: grid;
  gap: 0.65rem;
  margin: 1.1rem 0 0;
}

.page-historia #historia .history-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--history-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
}

.page-historia #historia .history-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  display: block;
  width: 0.42rem;
  height: 1px;
  background: var(--history-red);
}

.page-historia #historia .history-milestones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 2rem 0 0;
  border: 1px solid var(--history-line);
  background: var(--history-line);
}

.page-historia #historia .history-milestones li {
  min-height: 120px;
  padding: 1.2rem;
  background: var(--history-sheet);
}

.history-milestones time {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--history-red);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.history-milestones span {
  color: var(--history-muted);
  font-size: var(--text-3sm);
  line-height: 1.55;
}

.history-law {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.3rem;
  margin-top: 2rem;
  padding: 1.6rem;
  border: 1px solid var(--history-line);
  background: var(--history-sheet);
  box-shadow: var(--history-shadow);
}

.history-law > span {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 50%;
  background: var(--history-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
}

.history-law h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.page-historia #historia .history-law p {
  margin-bottom: 0.7rem;
  font-size: var(--text-base);
  line-height: 1.65;
}

.history-law a {
  color: var(--history-red);
  font-size: var(--text-2sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ——— Viñeta histórica destacada ——— */
.page-historia #historia .history-flash {
  margin: 0 0 2.2rem;
  padding: 1.8rem 1.9rem;
  border: 1px solid var(--history-line-strong);
  border-left: 4px solid var(--history-red);
  background: linear-gradient(180deg, rgba(227, 66, 81, 0.1), rgba(227, 66, 81, 0.03)), var(--history-sheet);
  box-shadow: var(--history-shadow);
}

.history-flash__kicker {
  margin: 0 0 0.6rem;
  color: var(--history-red-dark);
  font-family: var(--font-display);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-flash h3 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.page-historia #historia .history-flash p {
  margin: 0 0 0.85rem;
  font-size: var(--text-base);
  line-height: 1.7;
}

.page-historia #historia .history-flash p:last-child { margin-bottom: 0; }

.history-flash strong { color: var(--history-gold); }

/* ——— Líneas históricas (pistas) y foja ——— */
.page-historia #historia .history-track__title {
  margin: 2.4rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--history-line);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.page-historia #historia .history-milestones--foja {
  grid-template-columns: 1fr;
}

.page-historia #historia .history-milestones--foja li {
  min-height: 0;
  padding: 0.85rem 1.2rem;
}

/* ——— Servicio comunitario: categorías ——— */
.page-historia #historia .history-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 1.4rem;
  border: 1px solid var(--history-line);
  background: var(--history-line);
}

.history-service-card {
  padding: 1.2rem 1.3rem;
  background: var(--history-sheet);
}

.history-service-card h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--history-ink);
}

.page-historia #historia .history-service-card p {
  margin: 0;
  font-size: var(--text-3sm);
  line-height: 1.6;
  color: var(--history-muted);
}

/* ——— Personas mencionadas: fichas ——— */
.page-historia #historia .history-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  margin-top: 1.4rem;
  border: 1px solid var(--history-line);
  background: var(--history-line);
}

.history-person {
  background: var(--history-sheet);
}

.history-person summary {
  position: relative;
  padding: 1rem 2.4rem 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.history-person summary::-webkit-details-marker { display: none; }

.history-person summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 0.95rem;
  color: var(--history-red);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
}

.history-person[open] summary::after {
  content: '−';
}

.history-person summary b {
  display: block;
  color: var(--history-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}

.history-person summary small {
  display: block;
  margin-top: 0.15rem;
  color: var(--history-soft);
  font-size: var(--text-2sm);
}

.history-person summary em {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--history-line-strong);
  border-radius: 99px;
  color: var(--history-muted);
  font-family: var(--font-body);
  font-size: var(--text-3xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.history-person.is-doc summary em {
  border-color: rgba(208, 181, 108, 0.45);
  color: var(--history-gold);
}

.history-person p {
  margin: 0;
  padding: 0 1.15rem 1rem;
  color: var(--history-muted);
  font-size: var(--text-3sm);
  line-height: 1.65;
}

/* ——— Jefaturas: galería de tarjetas ——— */
.page-historia #historia .history-command--cards {
  padding-left: 0;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 1px;
  border: 1px solid var(--history-line);
  background: var(--history-line);
}

.page-historia #historia .history-command--cards::before { display: none; }

.page-historia #historia .history-command--cards li {
  display: block;
  padding: 1.2rem;
  border-bottom: 0;
  background: var(--history-sheet);
}

.page-historia #historia .history-command--cards li::after { display: none; }

.jef-photo {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 0.9rem;
  border: 1px dashed var(--history-line-strong);
  border-radius: 50%;
  color: var(--history-soft);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  background: rgba(240, 236, 228, 0.03);
}

.jef-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.jef-info b {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--history-red-dark);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jef-info span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--history-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}

.page-historia #historia .history-command--cards time {
  display: block;
  color: var(--history-soft);
  font-size: var(--text-2sm);
  font-variant-numeric: tabular-nums;
}

/* ——— Archivo humano ——— */
.history-subtitle {
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--history-line);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.history-subtitle:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.history-roster {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.6rem;
}

.history-figure--group img {
  aspect-ratio: 1.2;
  object-fit: cover;
}

.history-roster__groups {
  border-top: 3px solid var(--history-red);
  background: var(--history-sheet);
  box-shadow: var(--history-shadow);
}

.history-roster details {
  border-bottom: 1px solid var(--history-line);
}

.history-roster summary {
  position: relative;
  padding: 0.95rem 2.7rem 0.95rem 1rem;
  color: var(--history-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.history-roster summary::-webkit-details-marker { display: none; }

.history-roster summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  color: var(--history-red);
  font-size: var(--text-base);
  transform: translateY(-50%);
}

.history-roster details[open] summary::after { content: '−'; }

.page-historia #historia .history-roster details ul {
  display: grid;
  gap: 0.35rem;
  padding: 0 1rem 1rem;
}

.page-historia #historia .history-roster details li {
  color: var(--history-muted);
  font-size: var(--text-2sm);
  line-height: 1.45;
}

.history-roster details li b {
  display: block;
  color: var(--history-red);
  font-size: var(--text-2sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.page-historia #historia .history-roster .history-columns {
  grid-template-columns: 1fr 1fr;
}

.page-historia #historia .history-names {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 1.3rem;
  border-top: 1px solid var(--history-line-strong);
}

.page-historia #historia .history-names li {
  padding: 0.9rem 0.4rem 0.9rem 0;
  border-bottom: 1px solid var(--history-line);
  color: var(--history-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.page-historia #historia .history-names li:nth-child(odd) {
  border-right: 1px solid var(--history-line);
}

.page-historia #historia .history-names li:nth-child(even) {
  padding-left: 1rem;
}

/* ——— Jefaturas ——— */
.page-historia #historia .history-command {
  position: relative;
  display: grid;
  margin-top: 2rem;
  padding-left: 2rem;
}

.history-command::before {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--history-line-strong);
}

.page-historia #historia .history-command li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--history-line);
}

.history-command li::after {
  content: '';
  position: absolute;
  left: -1.95rem;
  top: 1.12rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--history-red);
  border-radius: 50%;
  background: var(--history-paper);
}

.history-command li.is-current::after {
  background: var(--history-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--history-red) 16%, transparent);
}

.history-command span {
  color: var(--history-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
}

.history-command time {
  flex: none;
  color: var(--history-soft);
  font-size: var(--text-2sm);
  font-variant-numeric: tabular-nums;
}

.history-command small {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.14rem 0.4rem;
  border-radius: 99px;
  background: var(--history-red);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-nano);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.page-historia #historia .history-footnote {
  margin-top: 1rem;
  color: var(--history-soft);
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  line-height: 1.55;
}

/* ——— Fuentes ——— */
.history-sources {
  scroll-margin-top: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  border-top: 5px solid var(--history-red);
  background: #191a1c;
  box-shadow: 0 30px 80px -45px rgba(0, 0, 0, 0.72);
}

.history-sources h2 {
  margin: 0 0 1rem;
  color: #f4f0e8 !important;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.03em;
}

.page-historia #historia .history-sources p {
  max-width: 560px;
  color: rgba(244, 240, 232, 0.66);
}

.page-historia #historia .history-sources ul {
  display: grid;
  align-content: start;
}

.page-historia #historia .history-sources li {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(244, 240, 232, 0.62);
  font-size: var(--text-2sm);
  line-height: 1.5;
}

.history-sources li a {
  color: rgba(244, 240, 232, 0.84);
  text-decoration: none;
}

.history-sources li a:hover { color: #fff; }

.page-historia .historia-credits {
  margin: 2rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--history-line);
}

.page-historia #historia .historia-credits p {
  margin: 0;
  color: var(--history-soft);
  font-family: var(--font-body);
  font-size: var(--text-2sm);
  line-height: 1.55;
}

/* ——— Responsive ——— */
@media (max-width: 900px) {
  .history-hero {
    min-height: 620px;
  }

  .history-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .history-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .history-facts div:nth-child(odd) {
    border-right: 1px solid var(--history-line);
  }

  .history-body-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .history-toc {
    top: 68px;
    max-height: none;
    margin: 0 calc(clamp(1.25rem, 4vw, 3rem) * -1) clamp(4.5rem, 8vw, 7rem);
    padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
    border-right: 0;
    border-left: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    overflow: visible;
  }

  .history-toc > span {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .page-historia #historia .history-toc ol {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-historia #historia .history-toc li {
    flex: 0 0 auto;
  }

  .history-toc a {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .history-hero {
    min-height: 570px;
  }

  .history-hero__content {
    padding-top: 120px;
    padding-bottom: 5rem;
  }

  .history-hero h1 {
    font-size: clamp(3.15rem, 15vw, 5rem);
  }

  .history-hero__name {
    font-size: var(--text-base);
  }

  .history-hero__lead {
    font-size: var(--text-base);
  }

  .history-hero__meta {
    gap: 0.8rem 0;
  }

  .history-hero__meta span {
    width: 50%;
    padding: 0.2rem 0.8rem;
  }

  .history-hero__meta span:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .history-hero__caption {
    display: none;
  }

  .page-historia #historia .historia-container,
  .page-historia #historia .container {
    padding: 3.5rem 1.15rem 3rem;
  }

  .history-intro__copy h2 {
    max-width: 100%;
    font-size: var(--text-2xl);
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .history-march-vignette {
    float: none;
    width: 100%;
    margin: 1.5rem 0 0;
  }

  .history-review-note {
    grid-template-columns: 1fr;
  }

  .history-review-note span {
    width: fit-content;
  }

  .history-toc {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin: 0 -1.15rem 4.5rem;
    padding: 0.8rem 1.15rem;
  }

  .history-toc > span {
    white-space: normal;
  }

  .history-chapter,
  .history-chapter__head {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 1rem;
    justify-content: stretch;
  }

  .history-chapter {
    padding-bottom: 4.5rem;
  }

  .history-chapter::after {
    height: 68px;
    margin-top: 4rem;
    background-size:
      58px 58px,
      72px 72px,
      100% 1px;
  }

  .history-chapter__head {
    margin-bottom: 1.6rem;
  }

  .history-chapter__number {
    font-size: var(--text-xl);
  }

  .history-chapter__number::after {
    left: 0.1em;
    height: 2rem;
  }

  .history-chapter__head h2 {
    font-size: var(--text-2xl);
  }

  .history-chapter__body {
    grid-column: 1 / -1;
  }

  .history-chapter__body--portrait,
  .history-media-split,
  .history-media-split--portrait,
  .history-social-feature,
  .history-roster,
  .history-sources {
    grid-template-columns: 1fr;
  }

  .history-social-feature {
    gap: 1.1rem;
    margin-top: 2rem;
    padding: 0.9rem;
  }

  .history-social-feature__copy {
    padding: 0;
  }

  .history-social-feature__embed iframe {
    max-width: none;
    min-height: 660px;
  }

  .history-figure--portrait {
    max-width: 360px;
  }

  .history-figure--bio {
    float: none;
    width: min(300px, 100%);
    margin: 0.5rem auto 1.3rem;
  }

  .history-figure--oval {
    float: none;
    width: min(220px, 70%);
    margin: 0.5rem auto 1.3rem;
  }


  .history-media-split .history-figure {
    order: 2;
    margin-top: 0.5rem;
  }

  .history-media-split--portrait .history-figure {
    order: 0;
    max-width: 360px;
  }

  .history-law {
    grid-template-columns: 1fr;
  }

  .history-law > span {
    width: 72px;
    height: 72px;
    font-size: var(--text-base);
  }

  .history-sources {
    padding: 2rem 1.3rem;
  }
}

@media (max-width: 520px) {
  .history-hero__content {
    padding-inline: 1.1rem;
  }

  .history-hero__meta span {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .history-facts {
    grid-template-columns: 1fr;
  }

  .history-facts div:nth-child(odd) {
    border-right: 0;
  }

  .page-historia #historia .history-milestones,
  .page-historia #historia .history-names {
    grid-template-columns: 1fr;
  }

  .page-historia #historia .history-names li:nth-child(odd) {
    border-right: 0;
  }

  .page-historia #historia .history-names li:nth-child(even) {
    padding-left: 0;
  }

  .page-historia #historia .history-roster .history-columns {
    grid-template-columns: 1fr;
  }

  .page-historia #historia .history-command li {
    display: grid;
    gap: 0.2rem;
  }

  .history-command small {
    display: block;
    width: fit-content;
    margin: 0.35rem 0 0;
  }
}

/* ==================================================================
   2. TYPOGRAPHY — escala y ritmo
   ================================================================== */
h1, h2, h3, h4, h5, h6,
p {
  text-wrap: pretty;
}

h1 { letter-spacing: 0.03em; }
h2 { letter-spacing: 0.025em; }
h3 { letter-spacing: 0.02em; }
h4 { letter-spacing: 0.018em; }
h5 { letter-spacing: 0.015em; }
h6 { letter-spacing: 0.012em; }

.eyebrow { letter-spacing: 0.22em; }
.lead { letter-spacing: 0.01em; }

.hero-content .eyebrow {
  letter-spacing: 0.24em;
}

/* ==================================================================
   EYEBROWS / KICKERS EN MARCO
   El marco reemplaza al guion (::before desactivado).
   border con color-mix respeta el rojo propio de cada sección.
   ================================================================== */
.history-kicker,
.social-kicker,
.enrollment-kicker {
  display: inline-block;
}

.eyebrow,
.history-kicker,
.social-kicker,
.enrollment-kicker {
  /* Relleno sólido bordeaux: !important needed porque las secciones
     repintan color/fondo con reglas de mayor especificidad (.hero .kicker etc.) */
  color: var(--marfil) !important;
  background: var(--bordeaux) !important;
  border: 1px solid rgba(245, 243, 239, 0.16) !important;
  border-radius: 2px;
  padding: 0.38rem 0.7rem;
}

/* Los eyebrows de secciones oscuras usan texto-gradiente: anularlo
   para que el texto quede visible sobre el relleno azul */
.section--dark .eyebrow {
  background: var(--bordeaux) !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--marfil) !important;
}

.eyebrow::before {
  display: none;
}


.section--dark .eyebrow {
  background: var(--text-gradient-rojo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ——— Paragraph rhythm ——— */
p + p { margin-top: 1em; }
h1 + p,
h2 + p,
h3 + p { margin-top: var(--space-sm); }
/* El hero gestiona su propio ritmo de entrada */
.hero-content h1 + p { margin-top: 0; }

.section-head p {
  margin-top: var(--space-md);
}

/* ——— Section accent line ——— */
.section-head h1::after,
.section-head h2::after {
  margin-top: var(--space-md);
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--blanco), transparent);
  opacity: 0.9;
  transition: width var(--duration-slow) var(--ease-out);
}

.section-head.is-visible h1::after,
.section-head.is-visible h2::after,
.section-head.revealed h1::after,
.section-head.revealed h2::after {
  width: 64px;
}

/* ——— Section heading hover ——— */
.section-head h1,
.section-head h2 {
  transition: text-shadow var(--duration-slow) var(--ease-out);
}

.section-head h1.reveal-left,
.section-head h2.reveal-left {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out),
    text-shadow var(--duration-slow) var(--ease-out);
}

.section-head:hover h1,
.section-head:hover h2 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ——— Hero titles ——— */
.hero-content h1 {
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(0, 0, 0, 0.15),
    0 4px 40px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.035em;
  background: var(--text-gradient-marfil-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content p.lead {
  text-shadow:
    0 1px 12px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 0, 0, 0.15);
}

/* ——— Dark section headings & Footer ——— */
.section--dark .section-head h1,
.section--dark .section-head h2,
.enrollment-hero .section-head h1,
.site-footer h3 {
  background: var(--text-gradient-marfil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.enrollment-hero .section-head h1 {
  position: relative;
  margin: 1.15rem 0 1.6rem;
  padding-bottom: 1.2rem;
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

.enrollment-hero .section-head h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(90px, 13vw, 170px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blanco), transparent);
  opacity: 0.9;
}

.enrollment-hero .section-head p:not(.eyebrow) {
  max-width: 650px;
  margin: 0;
  color: rgba(244, 240, 232, 0.67);
  font-size: clamp(0.94rem, 1.4vw, 1.08rem);
  line-height: 1.75;
}

.enrollment-hero .section-head .eyebrow {
  background: var(--bordeaux) !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff !important;
}

.site-footer h3 {
  letter-spacing: 0.03em;
}

/* ==================================================================
   3. SUPERFICIES — profundidad ambiental
   ================================================================== */
.section--dark {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(206, 43, 55, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 146, 70, 0.03) 0%, transparent 60%);
}

.section:not(.section--dark):not(.hero):not(.stats):not(.carousel-section) {
  background-image:
    radial-gradient(ellipse at 30% 0%, rgba(206, 43, 55, 0.015) 0%, transparent 50%);
}

.stats {
  background-image:
    radial-gradient(ellipse at 30% 50%, rgba(206, 43, 55, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(0, 146, 70, 0.03) 0%, transparent 60%);
}

.site-footer {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(206, 43, 55, 0.03) 0%, transparent 50%);
}

.carousel-section {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(206, 43, 55, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 146, 70, 0.03) 0%, transparent 50%);
}

/* ==================================================================
   4. HERO — escena inmersiva
   ================================================================== */
/* ——— Light ray overlay ——— */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.015) 50%, transparent 65%),
    radial-gradient(ellipse at 70% 30%, rgba(206, 43, 55, 0.04) 0%, transparent 50%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ——— Vignette ——— */
.hero-bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: var(--shadow-hero-vignette);
  pointer-events: none;
}

/* ——— Emblem entrance ——— */
.hero-emblem {
  animation: emblemIn 1s var(--ease-out) 0.2s both;
}

@keyframes emblemIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ——— Cinematic entrance stagger ——— */
.hero-content h1 {
  animation: titleIn 0.9s var(--ease-out) 0.3s both;
}

.hero-content p.lead {
  animation: subtitleIn 0.8s var(--ease-out) 0.5s both;
}

.hero-content .hero-ctas {
  animation: subtitleIn 0.8s var(--ease-out) 0.6s both;
}

@keyframes titleIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes subtitleIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   5. GLASSMORPHISM — refinado
   ================================================================== */
.site-header.is-scrolled {
  background: #0d0d0d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--glass-border-subtle);
}

/* ==================================================================
   NAVBAR — Two-zone layout
   ================================================================== */
.site-header .header-two-zone {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.site-header .header-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1 1 0%;
  min-width: 0;
  background: var(--header-bg);
  padding: 9px 0;
  z-index: 1;
}

.site-header.is-scrolled .header-left {
  background: #0d0d0d;
}

.lightbox {
  backdrop-filter: blur(var(--blur-lightbox)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--blur-lightbox)) saturate(1.1);
  background: var(--glass-bg-dark);
}

/* ==================================================================
   6. TARJETAS — composición y elevación
   ================================================================== */
.unit-card,
.roster-card,
.news-card,
.timeline-card,
.involve-card,
.missing-card {
  transition:
    transform var(--duration-slow) var(--ease-spring-soft),
    box-shadow var(--duration-slow) var(--ease-out);
  will-change: transform;
}

/* ——— Hover lifts ——— */
.unit-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-8px);
}

.roster-card:hover,
.news-card:hover,
.timeline-card:hover,
.involve-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.missing-card:hover {
  box-shadow: var(--shadow-card-hover-dark);
  transform: translateY(-4px);
}

/* ——— Internal spacing ——— */
.unit-body,
.news-body {
  padding: var(--space-card-body) var(--space-card-body) var(--space-xl);
}

.roster-card,
.timeline-card {
  padding: var(--space-card-body);
}

.involve-card {
  padding: var(--space-2xl);
}

.missing-card {
  padding: var(--space-xl);
}

/* ——— Accent bar animation ——— */
.unit-card::after,
.roster-card::after,
.news-card::after,
.timeline-card::after {
  transition: width 0.6s var(--ease-spring-soft);
}

.unit-card:hover::after,
.roster-card:hover::after,
.news-card:hover::after,
.timeline-card:hover::after {
  width: 100%;
}

/* ——— Gallery ——— */
.gallery-grid figure {
  transition:
    outline-color var(--duration-glass) var(--ease-out),
    box-shadow var(--duration-glass) var(--ease-out),
    transform var(--duration-slow) var(--ease-spring-soft);
}

.gallery-grid figure:hover {
  transform: translateY(-2px);
}

.gallery-grid figure:hover img {
  filter: brightness(1.06) contrast(1.04);
}

/* ==================================================================
   7. BOTONES — todos los estados
   ================================================================== */
.btn {
  transition:
    transform var(--duration-base) var(--ease-spring-soft),
    box-shadow var(--duration-slow) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

.btn:focus-visible {
  /* --focus-ring: variante clara de rojo, legible sobre los fondos
     oscuros donde viven todos los .btn del sitio (estrategia §6.3, §5) */
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ——— Emergency badge ——— */
body > a.emergency-badge {
  transition:
    background var(--duration-base) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    transform var(--duration-base) var(--ease-spring-soft),
    border-color var(--duration-base) var(--ease-out);
}

body > a.emergency-badge:hover {
  transform: translateY(-2px);
}

/* ==================================================================
   8. MICRO-INTERACCIONES — sistema coherente
   ================================================================== */
.brand-logo-img {
  transition: transform var(--duration-base) var(--ease-spring-soft);
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.04);
}

.fab {
  transition:
    transform var(--duration-base) var(--ease-spring-soft),
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    filter var(--duration-base) var(--ease-out);
}

.fab:hover {
  transform: translateY(-3px) scale(1.05);
}

.car-arrow {
  transition: all var(--duration-base) var(--ease-spring-soft);
}

.social-row a {
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-spring-soft);
}

.social-row a:hover {
  transform: translateY(-2px);
}

.main-nav a {
  transition:
    color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
}

.main-nav a[aria-current="page"],
.main-nav .active a {
  position: relative;
}

.main-nav a[aria-current="page"]::after,
.main-nav .active a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-gradient-rojo);
}

/* ——— Nav dropdown (Inscripciones) ——— */
.nav-dropdown {
  position: relative;
}

/* Mobile: nav-mobile-group */
.nav-mobile-group {
  border: none;
  padding: 0;
  margin: 0;
}

.nav-mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: var(--text-3sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  list-style: none;
}

.nav-mobile-group summary::-webkit-details-marker { display: none; }

.nav-mobile-group summary::after {
  content: '▸';
  font-size: var(--text-2sm);
  transition: transform 0.2s ease;
}

.nav-mobile-group[open] summary::after {
  transform: rotate(90deg);
}

.nav-mobile-group .nav-mobile-sub {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 2px solid rgba(245, 243, 239, 0.1);
  margin: 2px 0 6px;
}

.nav-mobile-group .nav-mobile-sub a {
  padding: 8px 0;
  font-size: var(--text-2sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ——— Footer links ——— */
.footer-col a {
  position: relative;
}

.footer-col a::after {
  content: '';
  position: absolute;
  left: 12px;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--rojo);
  opacity: 0.5;
  transition: width var(--duration-slow) var(--ease-out);
}

.footer-col a:hover::after {
  width: calc(100% - 12px);
}

/* ==================================================================
   9. SCROLL REVEAL — sistema narrativo
   ================================================================== */
/* ——— Classic reveal ——— */
.reveal,
.reveal-left {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-visible,
.reveal-left.is-visible {
  opacity: 1;
}

.reveal.is-visible { transform: translateY(0); }
.reveal-left.is-visible { transform: translateX(0); }

/* ==================================================================
   11. ESTADÍSTICAS — presencia
   ================================================================== */
.stat .num {
  text-shadow: 0 0 40px rgba(206, 43, 55, 0.08);
  position: relative;
  background: var(--text-gradient-rojo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat.revealed .num {
  text-shadow:
    0 0 60px rgba(206, 43, 55, 0.15),
    0 0 100px rgba(206, 43, 55, 0.08);
}

.stat.revealed::after {
  background: linear-gradient(90deg, var(--rojo), var(--verde));
}

.stat .label {
  letter-spacing: 0.14em;
}

/* ==================================================================
   12. NAVBAR — solidez
   ================================================================== */
.site-header {
  transition:
    background var(--duration-slow) var(--ease-out),
    backdrop-filter var(--duration-slow) var(--ease-out),
    padding var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-glass) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--glass-border-subtle);
}

/* ==================================================================
   13. DIVISORES
   ================================================================== */
.divider-flag::before,
.divider-flag::after {
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.35), transparent);
}

/* ==================================================================
   14. LIGHTBOX
   ================================================================== */
.lightbox {
  transition: opacity var(--duration-slow) var(--ease-out);
}

.lightbox-content img {
  box-shadow: var(--shadow-lightbox);
}

/* ==================================================================
   15. FOOTER
   ================================================================== */
.footer-bottom {
  border-top-color: rgba(206, 43, 55, 0.06);
}

/* ==================================================================
   16. SCROLLBAR
   ================================================================== */
::-webkit-scrollbar-thumb {
  background: var(--acero);
  border-radius: 4px;
  border: 2px solid var(--negro-carbono);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rojo-700);
}

/* ==================================================================
   17. FOCO ACCESIBLE
   ================================================================== */
:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-color var(--duration-base) var(--ease-out);
}

/* ==================================================================
    18. RESPONSIVE
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero::after {
    display: none;
  }

  .stat.revealed .num {
    text-shadow: none;
  }

  .hero-emblem,
  .hero-content h1,
  .hero-content p.lead,
  .hero-content .hero-ctas {
    animation: none;
  }

  .hero-emblem {
    opacity: 1;
    transform: none;
  }

  .tl-carousel-track,
  .tl-carousel-arrow,
  .tl-carousel-thumb,
  .tl-figure:not(.tl-carousel-slide) img {
    transition: none;
  }

  .tl-tab-panel {
    animation: none;
  }
}

@media (max-width: 980px) {
  .hero::after {
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .section-head.is-visible h1::after,
  .section-head.is-visible h2::after,
  .section-head.revealed h1::after,
  .section-head.revealed h2::after {
    width: 40px;
  }
}

@media (max-width: 600px) {
  .hero-content h1 {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }

  .section-head.is-visible h1::after,
  .section-head.is-visible h2::after,
  .section-head.revealed h1::after,
  .section-head.revealed h2::after {
    width: 32px;
  }

  .subscribe-form__row {
    flex-direction: column;
  }
}

/* ==================================================================
    19. HISTORIA — artículo institucional
   ================================================================== */

/* ——— Hero interior (historia.html) ——— */
.hero-interior {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: 130px 0 var(--space-4xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--negro-carbono);
}

.hi-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hi-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.45) 45%, var(--grafito) 100%);
}

.hi-content {
  position: relative;
  max-width: 980px;
}

.hi-content h1 {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  background: var(--text-gradient-marfil-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hi-content h1 em {
  font-style: normal;
}

.hi-content .lead {
  margin-top: var(--space-md);
  color: var(--plata-300);
  font-size: var(--text-base);
  max-width: 640px;
}

.hi-content .eyebrow {
  color: var(--rojo);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-3sm);
}

/* ——— Artículo: fondo uniforme, capítulos delimitados ——— */
.historia {
  background: var(--grafito);
}

.historia-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: clamp(2rem, 6vw, 8rem);
  padding-right: clamp(2rem, 6vw, 8rem);
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-4xl);
}

.historia-block {
  padding: var(--space-3xl) 0;
}

/* Ritmo entre capítulos: separación limpia en lugar de línea */
.historia-container > .historia-block:not(:last-of-type) {
  margin-bottom: var(--space-2xl);
}

/* ——— Intercalado orgánico de capítulos: impares con velo marfil ——— */
.historia-container > .historia-block:nth-of-type(odd) {
  background: transparent;
}

/* ——— Sección Sociedad y cultura ——— */
.historia-block#personalidades {
  background: transparent;
}

/* ——— Encabezado del capítulo ——— */
.historia-head {
  margin: 0 auto var(--space-lg);
}

.historia-period {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--rojo);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.historia-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--marfil);
}

.historia-head h2::after {
  display: block;
  content: '';
  width: 64px;
  height: 2px;
  margin-top: var(--space-sm);
  background: linear-gradient(90deg, var(--blanco), transparent);
  opacity: 0.9;
}

/* ——— Cuerpo: texto a ancho completo ——— */
.historia-body {
  color: var(--plata-300);
  font-size: var(--text-base);
  line-height: 1.8;
}

.historia-body p + p {
  margin-top: 1em;
}

/* Capítulos con contenido visual recuperan el ancho completo */
.historia-block:has(.tl-figure, .tl-split, .tl-roster-panel, .tl-roster, .tl-carousel) .historia-head,
.historia-block:has(.tl-figure, .tl-split, .tl-roster-panel, .tl-roster, .tl-carousel) .historia-body {
  max-width: 100%;
  margin-inline: 0;
}

/* ——— Apertura editorial: lead + letra capitular ——— */
.historia-block:first-of-type .historia-body > p:first-of-type {
  font-size: var(--text-md);
  color: var(--marfil);
  line-height: 1.75;
}

.historia-block:first-of-type .historia-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  color: var(--rojo);
  float: left;
  padding-right: 0.14em;
  margin-top: 0.06em;
}

/* ——— Imágenes estilo enciclopedia (flotan dentro del texto) ——— */
.tl-figure {
  margin: 0;
}

.tl-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ——— Marco de archivo: línea roja interior + elevación sutil ——— */
.tl-figure:not(.tl-carousel-slide) img {
  border: 1px solid rgba(206, 43, 55, 0.28);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 -3px 0 rgba(206, 43, 55, 0.45),
    0 18px 40px -22px rgba(0, 0, 0, 0.65);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.tl-figure:not(.tl-carousel-slide):hover img {
  transform: scale(1.015);
  box-shadow:
    inset 0 -3px 0 rgba(206, 43, 55, 0.6),
    0 22px 48px -20px rgba(0, 0, 0, 0.75);
}

.tl-figure figcaption {
  margin-top: var(--space-sm);
  color: var(--plata-500);
  font-size: var(--text-3sm);
  line-height: 1.45;
}

/* ——— Imágenes estilo enciclopedia: flotan dentro del texto ——— */
.tl-figure--float {
  float: right;
  width: min(500px, 48%);
  margin: 0.25em 0 var(--space-md) clamp(2rem, 4vw, 3.5rem);
  shape-outside: border-box;
}

.tl-figure--float-left {
  float: left;
  width: min(500px, 48%);
  margin: 0.25em clamp(4rem, 7vw, 7rem) var(--space-md) 0;
  shape-outside: border-box;
}

.tl-figure--float figcaption,
.tl-figure--float-left figcaption {
  font-size: var(--text-3sm);
  font-style: italic;
  color: var(--plata-500);
  margin-top: var(--space-xs);
}

/* ——— Figura de cierre a ancho completo ——— */
.tl-figure--wide {
  margin-top: var(--space-2xl);
}

.tl-figure--wide img {
  width: 100%;
}

/* ——— Split texto-izquierda / imagen-derecha ——— */
.tl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: var(--space-2xl);
  align-items: start;
}

.tl-split--figure-left {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: center;
}

.tl-split-figure {
  margin-top: var(--space-sm);
}

.tl-split-figure img {
  width: 100%;
}

.tl-split-text p + p {
  margin-top: 1em;
}

.tl-figure--narrow {
  width: 60%;
  margin: var(--space-2xl) auto 0;
}

.tl-figure--narrow img {
  width: 100%;
}

/* ——— Panel foto + nómina (tabs a la derecha) ——— */
.tl-roster-panel {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.tl-figure--panel {
  width: 100%;
  margin: 0;
}

.tl-figure--panel img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tl-tabs {
  border: 1px solid rgba(245, 239, 228, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(245, 239, 228, 0.04);
  padding: var(--space-xl);
  align-self: start;
  position: sticky;
  top: 120px;
}

.tl-roster-table-title {
  position: relative;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  color: var(--marfil);
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-roster-table-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, rgba(206, 43, 55, 0.9), transparent);
}

.tl-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tl-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: 1px solid rgba(245, 239, 228, 0.12);
  margin-bottom: var(--space-md);
}

.tl-tabs-nav label {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  color: var(--plata-500);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-base) var(--ease-out);
}

.tl-tabs-nav label small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(206, 43, 55, 0.14);
  color: var(--plata-300);
  font-size: var(--text-2sm);
  font-variant-numeric: tabular-nums;
}

.tl-tabs-nav label:hover {
  color: var(--marfil);
}

#tab-oficiales:checked ~ .tl-tabs-nav label[for="tab-oficiales"],
#tab-bomberos:checked ~ .tl-tabs-nav label[for="tab-bomberos"],
#tab-cadetes:checked ~ .tl-tabs-nav label[for="tab-cadetes"],
#tab-reserva:checked ~ .tl-tabs-nav label[for="tab-reserva"] {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
}

.tl-tab-panel {
  display: none;
}

#tab-oficiales:checked ~ .tl-tab-panel--oficiales,
#tab-bomberos:checked ~ .tl-tab-panel--bomberos,
#tab-cadetes:checked ~ .tl-tab-panel--cadetes,
#tab-reserva:checked ~ .tl-tab-panel--reserva {
  display: block;
  animation: tl-panel-in 0.35s var(--ease-out);
}

@keyframes tl-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tl-tab-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
  row-gap: 2px;
}

.tl-tab-list li {
  padding: 5px 0 5px 18px;
  position: relative;
  color: var(--plata-300);
  font-size: var(--text-base);
  break-inside: avoid;
}

.tl-tab-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--rojo);
  opacity: 0.6;
}

.tl-tab-list--cols {
  grid-template-columns: 1fr 1fr;
}

.tl-tab-list--siete {
  grid-template-columns: 1fr 1fr;
}

.tl-tab-list--siete li {
  padding-left: 14px;
  font-size: var(--text-3sm);
}

.tl-tab-list--siete li::before {
  width: 6px;
}

.tl-tab-list--cargo li span {
  color: var(--plata-500);
  font-size: var(--text-3sm);
  display: block;
}

.historia-body::after {
  content: '';
  display: block;
  clear: both;
}

/* ——— Listas ——— */
.tl-list {
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}

.tl-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--space-sm);
}

.tl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--rojo);
  opacity: 0.7;
}

/* ——— Fichas de personalidades ——— */
.tl-chips {
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.tl-chips li {
  padding: 8px 16px;
  border: 1px solid rgba(201, 169, 78, 0.2);
  border-radius: var(--radius-full);
  background: rgba(201, 169, 78, 0.03);
  color: var(--oro-300);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}

/* ——— Nómina de jefes ——— */
.tl-roster-intro {
  max-width: 56ch;
  color: var(--plata-300);
  font-size: var(--text-base);
  line-height: 1.75;
}

.tl-roster-contexto {
  max-width: 56ch;
  margin-top: 1em;
  color: var(--plata-500);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Cronología vertical: cada jefe como nodo sobre la línea */
.tl-roster {
  position: relative;
  margin: var(--space-lg) 0 0;
  padding: var(--space-xs) 0 var(--space-xs) 44px;
  list-style: none;
  border-radius: var(--radius-lg);
}

.tl-roster::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--rojo), var(--oro));
  opacity: 0.3;
}

.tl-roster li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.tl-roster li::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--marfil-oscuro);
  border: 2px solid var(--rojo);
}

.tl-roster li:hover {
  background: rgba(206, 43, 55, 0.05);
}

.tl-roster li.is-current {
  background: rgba(206, 43, 55, 0.06);
}

.tl-roster li.is-current::before {
  background: var(--rojo);
  border-color: var(--oro);
  border-width: 1px;
  box-shadow: 0 0 0 3px rgba(206, 43, 55, 0.12);
}

.tl-roster li:hover {
  background: rgba(245, 239, 228, 0.06);
  border-left-color: var(--rojo);
}

.tl-roster li.is-current {
  border-left-color: var(--rojo);
  background: rgba(206, 43, 55, 0.06);
}

.tl-roster-name {
  color: var(--marfil);
  font-weight: 700;
  font-size: var(--text-base);
}

.tl-roster-years {
  color: var(--plata-500);
  font-size: var(--text-3sm);
  font-variant-numeric: tabular-nums;
}

/* ——— Sección de jefes sobre fondo marfil ——— */
.historia-block#jefes {
  background-color: var(--marfil-oscuro);
  background-image: url('../assets/dividers/escudo-fondo.webp');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: min(42%, 500px);
  border: 1px solid rgba(26, 29, 32, 0.08);
  box-shadow: 0 30px 60px -30px rgba(13, 13, 13, 0.55);
}

.historia-block#jefes .historia-head h2 {
  color: var(--negro-carbono);
}

.historia-block#jefes .historia-head h2::after {
  background: linear-gradient(90deg, var(--rojo), transparent);
}

.historia-block#jefes .tl-roster-intro {
  color: rgba(26, 29, 32, 0.94);
}

.historia-block#jefes .tl-roster-contexto {
  color: rgba(26, 29, 32, 0.8);
}

.historia-block#jefes .tl-roster li:hover {
  background: rgba(26, 29, 32, 0.04);
}

.historia-block#jefes .tl-roster li.is-current {
  background: rgba(206, 43, 55, 0.07);
}

.historia-block#jefes .tl-roster-name {
  color: var(--negro-carbono);
  font-weight: 800;
}

.historia-block#jefes .tl-roster-years {
  color: rgba(26, 29, 32, 0.72);
  font-weight: 600;
}

.tl-tag-actual {
  flex-basis: 100%;
  display: inline-block;
  width: fit-content;
  padding: 2px 12px;
  border-radius: var(--radius-full);
  background: var(--rojo);
  color: var(--blanco);
  font-size: var(--text-2sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ——— Carrusel galería histórica ——— */
.tl-carousel {
  margin-top: var(--space-xl);
}

.tl-carousel-viewport {
  position: relative;
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tl-carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.tl-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.tl-carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  background: var(--negro);
}

.tl-carousel-slide figcaption {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}

.tl-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.55);
  color: var(--marfil);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(6px);
}

.tl-carousel-arrow:hover {
  background: var(--rojo);
  border-color: var(--rojo);
}

.tl-carousel-arrow svg {
  width: 22px;
  height: 22px;
}

.tl-carousel-arrow--prev {
  left: var(--space-md);
}

.tl-carousel-arrow--next {
  right: var(--space-md);
}

.tl-carousel-thumbs {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-xs);
}

.tl-carousel-thumb {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.tl-carousel-thumb img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
}

.tl-carousel-thumb:hover {
  opacity: 0.85;
}

.tl-carousel-thumb.is-active {
  opacity: 1;
  border-color: var(--rojo);
}

/* ——— Créditos ——— */
.historia-credits {
  padding-top: var(--space-2xl);
}

.historia-credits p {
  color: var(--plata-500);
  font-size: var(--text-3sm);
  line-height: 1.6;
  max-width: var(--container-narrow);
}

.historia-credits strong {
  color: var(--plata-300);
  font-weight: 600;
}

/* ——— Footer institucional ——— */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 var(--space-lg);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(206, 43, 55, 0.10), transparent 45%),
    linear-gradient(180deg, #141617 0%, var(--negro-carbono) 45%);
  box-shadow:
    inset 0 2px 0 0 rgba(206, 43, 55, 0.9),
    inset 0 30px 60px -54px rgba(255, 255, 255, 0.16);
}

/* Riel inferior a todo lo ancho: foto y contenido apoyan en la misma
   línea base, la composición se lee como una sola pieza. */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* Foto como decoración de fondo: full-bleed, con transparencia propia
   (opacity 0.3), detrás de todo el contenido — nada compite con el
   texto, pero la identidad del cuartel está presente en el ambiente. */
.site-footer .footer-photo {
  /* FOTO DESACTIVADA en el rediseño — el footer institucional vive sin
     imagen de fondo; la elegancia sale de tipografía + líneas + paleta.
     Para reintroducir la foto como ambiente, quitar display:none. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
  background: url("../assets/imagen30-footer.webp") right center / auto 130% no-repeat;
  filter:
    brightness(0.85)
    blur(3px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
  pointer-events: none;
}

.site-footer .footer-grid {
  grid-template-columns: minmax(200px, 1.3fr) repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

/* COLUMNA MARCA — compacta, alineada a la izquierda */
.site-footer .footer-brand {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
  text-align: left;
  border-right: 1px solid rgba(206, 43, 55, 0.18);
  padding-right: clamp(1.25rem, 2vw, 2rem);
}

.site-footer .footer-brand .brand {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

.site-footer .footer-brand .brand-logo-img {
  width: 96px;
  height: 96px;
}

.site-footer .footer-brand__description {
  max-width: 280px;
  margin: 0 0 var(--space-sm);
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.site-footer .footer-founded {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-sm);
}

/* Guiño italiano — línea tricolor (verde, blanco, rojo) en el cintillo
   de fundación + lema en cursiva bajo la fecha. La Boca es genovesa:
   el detalle habla de la herencia, sin recargar la composición. */
.site-footer .footer-founded span {
  width: var(--space-lg);
  height: 3px;
  background: linear-gradient(90deg, var(--verde) 0 33%, var(--marfil) 33% 66%, var(--rojo) 66% 100%);
}

.site-footer .footer-motto {
  margin: var(--space-xs) 0 0;
  text-align: left;
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--plata-300);
}

.site-footer .footer-social {
  margin-top: var(--space-sm);
  justify-content: flex-start;
}

.site-footer .footer-social p {
  text-align: left;
}

/* Reset de listas del footer: el reset global de ul/ol solo saca el
   list-style (no el padding), lo que corría los enlaces 40px a la
   derecha del h2. Aquí margin y padding van a cero → todo el contenido
   del footer alinea contra el margen izquierdo del container. */
.site-footer ul {
  margin: 0;
  padding: 0;
}

/* FILA INFO — contacto | explorar | participá */
.site-footer .footer-col--contact {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
}

.site-footer .footer-nav:not(.footer-participate) {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
}

.site-footer .footer-participate {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.footer-contact a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.footer-contact a {
  color: #d5d9dd;
  overflow-wrap: anywhere;
  text-align: left;
}

.footer-contact a:hover {
  color: var(--rojo);
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  color: var(--rojo-texto-oscuro);
}

.footer-brand {
  text-align: left;
}

.footer-brand .brand {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--space-lg);
}

.footer-brand .brand-logo-img {
  width: 96px;
  height: 96px;
}

.footer-brand .brand-text strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.footer-brand .brand-text span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata-300);
}

.footer-brand__description {
  max-width: 560px;
  margin: 1.25rem auto 0;
  text-align: center;
  color: var(--plata-300);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.75;
}

.footer-founded {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
  color: var(--oro-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.footer-founded span {
  width: var(--space-md);
  height: 2px;
  background: var(--oro-300);
}

.site-footer .footer-col h2 {
  position: relative;
  margin: 0 0 var(--space-sm);
  padding-bottom: 8px;
  color: #f2f0ea;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Trazo bordeaux fino: acento al 10%, eco del motivo de "Fundados" */
.site-footer .footer-col h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--space-md);
  height: 1px;
  background: rgba(206, 43, 55, 0.75);
}

.footer-nav a::before {
  content: '›';
  color: var(--plata-500);
  font-size: 1.1em;
  line-height: 1;
  margin-right: 4px;
  transition: transform var(--duration-base) var(--ease-out);
}

.footer-nav a:hover::before {
  transform: translateX(2px);
  color: var(--oro-300);
}

.footer-contact a::after,
.footer-social a::after {
  display: none;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.footer-social p {
  flex-basis: 100%;
  max-width: none;
  margin: 0 0 3px;
  text-align: center;
  color: var(--plata-300);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 34px;
  padding: var(--space-xs) var(--space-md);
  color: #d9d6ce;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-2sm);
  font-weight: 600;
}

.footer-social a:hover {
  color: #fff;
  border-color: rgba(201, 169, 78, 0.55);
  background: rgba(201, 169, 78, 0.08);
}

.footer-social svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--oro-300);
}

.site-footer .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.06);
  padding-top: var(--space-md);
  color: var(--plata-300);
  letter-spacing: 0.08em;
}

/* Separador ceremonial entre los dos renglones del pie */
.site-footer .footer-bottom span:first-child::after {
  content: '·';
  margin: 0 var(--space-sm);
  color: var(--oro-300);
  font-weight: 400;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-contact a:hover {
  color: var(--oro-300);
}

@media (max-width: 980px) {
  .site-footer {
    display: block;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-xl);
  }

  /* Marca: fila completa arriba */
  .site-footer .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(206, 43, 55, 0.18);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  .site-footer .footer-brand .brand {
    justify-content: flex-start;
  }

  .site-footer .footer-brand__description {
    max-width: none;
    -webkit-line-clamp: unset;
    display: block;
  }

  .site-footer .footer-col--contact {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-footer .footer-nav:not(.footer-participate) {
    grid-column: 1;
    grid-row: 3;
  }

  .site-footer .footer-participate {
    grid-column: 2;
    grid-row: 3;
  }

  .footer-participate ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 20px;
  }
}

/* ================================================================
   PLANILLA MOBILE — 5 bloques en 1 columna:
     1. Marca    (logo + nombre | social compacto debajo)
     2. Cuartel  (2 links apilados, tap target 44px)
     3. Explorar (3 links)
     4. Participá (4 links)
     5. Pie      (© + fundación)
   Separadores finos bordeaux entre bloques, gaps tokenizados.
   ================================================================ */
@media (max-width: 760px) {
  /* Margen lateral garantizado del footer en móvil: el .container base
     ya aporta 27px, pero esta regla explícita asegura aire a la izquierda
     aunque otra hoja pise el padding. */
  .site-footer > .container {
    padding-left: clamp(18px, 4.2vw, 27px);
    padding-right: clamp(18px, 4.2vw, 27px);
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    justify-items: stretch;
    text-align: left;
  }

  /* BLOQUE 1 — Marca en columna: fila de logo+nombre, social abajo */
  .site-footer .footer-brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(206, 43, 55, 0.30);
  }

  .site-footer .footer-brand .brand {
    margin-bottom: 0;
    white-space: normal;
  }

  .site-footer .footer-brand .brand-logo-img {
    width: 60px;
    height: 60px;
    flex: none;
  }

  .site-footer .footer-brand .brand-text strong {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .site-footer .footer-brand .brand-text span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .site-footer .footer-brand__description,
  .site-footer .footer-founded {
    display: none;
  }

  /* Decoración mobile — lema italiano visible como firma, y trenza
     tricolor corta que aterriza el bloque marca contra la izquierda */
  .site-footer .footer-motto {
    display: block;
    margin: var(--space-xs) 0 0;
    text-align: left;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--plata-300);
  }

  .site-footer .footer-brand::after {
    content: "";
    width: 60px;
    height: 3px;
    margin-top: var(--space-xs);
    background: linear-gradient(90deg, var(--verde) 0 33%, var(--marfil) 33% 66%, var(--rojo) 66% 100%);
  }

  /* Social compacto: label 10px + pills 32px de alto */
  .site-footer .footer-social {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0;
    gap: var(--space-sm);
  }

  .site-footer .footer-social p {
    flex-basis: 100%;
    margin: 0 0 2px;
    text-align: left;
    font-size: 10px;
  }

  .site-footer .footer-social a {
    min-height: 32px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 12px;
  }

  /* BLOQUE 2 — Cuartel: links apilados a ancho completo */
  .site-footer .footer-col--contact {
    grid-column: 1;
    grid-row: 2;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(206, 43, 55, 0.30);
  }

  .site-footer .footer-col--contact .footer-contact {
    gap: 4px;
  }

  .site-footer .footer-col--contact .footer-contact a {
    width: 100%;
    min-height: 44px;
    align-items: center;
    padding: 10px 0;
  }

  /* BLOQUE 3 y 4 — Explorar + Participá apilados */
  .site-footer .footer-nav:not(.footer-participate) {
    grid-column: 1;
    grid-row: 3;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(206, 43, 55, 0.30);
  }

  .site-footer .footer-participate {
    grid-column: 1;
    grid-row: 4;
  }

  .site-footer .footer-nav h2,
  .site-footer .footer-participate h2 {
    margin: 0 0 var(--space-sm);
  }

  .site-footer .footer-nav ul,
  .site-footer .footer-participate ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
  }

  .site-footer .footer-nav a,
  .site-footer .footer-participate a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* BLOQUE 5 — Pie */
  .site-footer .footer-bottom {
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-sm);
  }
}

/* ==================================================================
   CUERPO SOCIAL — relato visual y comunitario
   ================================================================== */
.page-social {
  --social-bg: #151617;
  --social-surface: #202123;
  --social-ink: #f1eee8;
  --social-muted: #b8b1a8;
  --social-line: rgba(241, 238, 232, 0.15);
  --social-red: #e34251;
  --social-note: #332d20;
  background: var(--social-bg);
}

.page-social main {
  background: var(--social-bg);
  color: var(--social-ink);
}

.social-hero {
  position: relative;
  min-height: min(82vh, 820px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  background: #0b0b0b;
  color: #fff;
}

.social-hero--text {
  min-height: min(76vh, 720px);
  background:
    radial-gradient(circle at 82% 28%, rgba(206, 43, 55, 0.22), transparent 28%),
    linear-gradient(125deg, #090909 0%, #17191b 58%, #090909 100%);
  background-size: auto, auto;
}

.social-hero--text::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(34vw, 460px);
  height: 4px;
  background: var(--rojo);
}

.social-hero__photo,
.social-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.social-hero__photo {
  z-index: -2;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.76) contrast(1.04);
  transform: scale(1.01);
}

.social-hero__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.93) 0%, rgba(8, 8, 8, 0.7) 48%, rgba(8, 8, 8, 0.2) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.12) 34%, rgba(8, 8, 8, 0.88) 100%);
}

.social-hero__content {
  width: 100%;
  padding-top: 160px;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  text-align: left;
}

.social-kicker {
  margin: 0 0 0.85rem;
  color: var(--social-red);
  font-size: var(--text-2sm);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}

.social-hero .social-kicker {
  color: #ff6572;
}

.social-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-align: left;
}

.social-hero--text h1 {
  max-width: 720px;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-align: left;
}

.social-hero__name {
  max-width: 980px;
  margin: 1.2rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(0.78rem, 1.2vw, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.55;
  text-align: left;
  text-transform: uppercase;
}

.social-hero__lead {
  max-width: 720px;
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.65;
  text-align: left;
}

.social-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.social-hero__facts span {
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 1rem clamp(1.4rem, 3vw, 2.8rem) 0 0;
  color: rgba(255, 255, 255, 0.61);
  font-size: var(--text-2sm);
  letter-spacing: 0.05em;
}

.social-hero__facts strong {
  margin-bottom: 0.25rem;
  color: #fff;
  font-size: var(--text-3sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.social-hero__credit {
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

.social-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.social-split,
.social-community-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.social-copy h2,
.social-section__head h2 {
  max-width: 760px;
  margin: 0 0 1.5rem;
  color: var(--social-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-align: left;
  text-wrap: balance;
}

.social-copy > p:not(.social-kicker),
.social-section__head > p:not(.social-kicker) {
  color: var(--social-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  text-align: left;
}

.social-copy > p + p {
  margin-top: 1.15rem;
}

.social-copy .social-lead {
  color: var(--social-ink);
  font-size: clamp(1.08rem, 1.45vw, 1.27rem);
  line-height: 1.75;
}

.social-copy--wide {
  max-width: 1020px;
}

.social-definition {
  margin: 0 0 2rem;
  padding: 1.35rem 1.5rem;
  border-top: 3px solid var(--social-red);
  background: var(--social-surface);
  box-shadow: 0 20px 60px -48px rgba(28, 23, 18, 0.7);
}

.social-definition span {
  color: var(--social-red);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.social-definition p {
  margin: 0.55rem 0 0;
  color: var(--social-ink);
  font-size: var(--text-base);
  line-height: 1.7;
}

.social-source-note,
.social-verification {
  border-left: 3px solid var(--social-red);
  background: var(--social-note);
}

.social-source-note {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
}

.social-source-note strong {
  color: var(--social-ink);
  font-size: var(--text-2sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.social-source-note p {
  margin: 0.45rem 0 0;
  color: var(--social-muted);
  font-size: var(--text-3sm);
  line-height: 1.65;
}

.social-origin-gallery {
  position: relative;
  padding-bottom: 3.5rem;
}

.social-figure {
  position: relative;
  margin: 0;
  background: var(--social-surface);
  box-shadow: 0 28px 70px -48px rgba(28, 23, 18, 0.7);
}

.social-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.social-figure figcaption {
  padding: 1rem 1.15rem 1.15rem;
  color: var(--social-muted);
  font-size: var(--text-2sm);
  line-height: 1.55;
  border-top: 1px solid var(--social-line);
}

.social-figure figcaption strong {
  color: var(--social-ink);
}

.social-figure--wide img {
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
}

.social-figure--document {
  width: min(72%, 430px);
  margin: -4rem 0 0 auto;
  border: 8px solid var(--social-bg);
}

.social-section--river {
  background: #111315;
  color: #f5f3ef;
}

.social-section--river .social-kicker {
  color: #ff6572;
}

.social-section--river .social-section__head h2 {
  color: #f5f3ef;
}

.social-section--river .social-section__head > p:not(.social-kicker) {
  max-width: 820px;
  color: rgba(245, 243, 239, 0.7);
}

.social-section__head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.social-river-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.social-section--river .social-figure {
  background: #1b1d20;
  box-shadow: 0 30px 80px -50px #000;
}

.social-section--river .social-figure figcaption {
  color: rgba(245, 243, 239, 0.63);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.social-section--river .social-figure figcaption strong {
  color: #fff;
}

.social-river-grid .social-figure img {
  aspect-ratio: 1.48 / 1;
  object-fit: cover;
}

.social-figure--feature {
  margin-top: 3.5rem;
}

.social-verification {
  max-width: 880px;
  margin: clamp(3rem, 7vw, 6rem) 0 0 auto;
  padding: 1.4rem 1.6rem;
  background: rgba(206, 43, 55, 0.09);
}

.social-verification span {
  color: #ff6572;
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.social-verification p {
  margin: 0.5rem 0 0;
  color: rgba(245, 243, 239, 0.71);
  font-size: var(--text-3sm);
  line-height: 1.7;
}

.social-section--community {
  background: var(--social-surface);
}

.social-section--community > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.64fr);
  align-items: start;
  gap: clamp(3rem, 7vw, 7rem);
}

.social-community-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
}

.social-community-carousel {
  min-width: 0;
  overflow: hidden;
  background: var(--social-bg);
  border: 1px solid var(--social-line);
  box-shadow: 0 26px 70px -52px rgba(28, 23, 18, 0.72);
}

.social-carousel__heading {
  padding: 1.5rem 1.6rem 1.25rem;
  border-bottom: 1px solid var(--social-line);
}

.social-carousel__heading > span {
  color: var(--social-red);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.social-carousel__heading h3 {
  margin: 0.55rem 0 0;
  color: var(--social-ink);
  font-size: var(--text-xl);
  line-height: 1;
}

.social-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.social-carousel__track {
  display: grid;
}

.social-carousel__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition:
    opacity 320ms var(--ease-out),
    transform 420ms var(--ease-out),
    visibility 0s linear 420ms;
}

.social-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.social-carousel__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.social-carousel__slide:first-child img {
  object-position: center 56%;
}

.social-carousel__slide:last-child img {
  object-position: center 38%;
}

.social-carousel__slide figcaption {
  min-height: 90px;
  padding: 1rem 1.3rem 1.2rem;
  color: var(--social-muted);
  border-top: 1px solid var(--social-line);
  font-size: var(--text-2sm);
  line-height: 1.55;
}

.social-carousel__slide figcaption strong {
  color: var(--social-ink);
}

.social-carousel__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--social-line);
}

.social-carousel__arrows {
  display: flex;
  gap: 6px;
}

.social-carousel__arrows button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--social-ink);
  background: var(--social-surface);
  border: 1px solid var(--social-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}

.social-carousel__arrows button:hover,
.social-carousel__arrows button:focus-visible {
  color: #fff;
  border-color: var(--social-red);
  background: var(--social-red);
}

.social-carousel__arrows button:focus-visible,
.social-carousel__dots button:focus-visible {
  outline: 2px solid var(--social-red);
  outline-offset: 3px;
}

.social-carousel__arrows svg {
  width: 17px;
  height: 17px;
}

.social-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.social-carousel__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--social-line);
  cursor: pointer;
  transition: width var(--duration-base), border-radius var(--duration-base), background var(--duration-base);
}

.social-carousel__dots button[aria-current="true"] {
  width: 24px;
  border-radius: 999px;
  background: var(--social-red);
}

.social-carousel__counter {
  min-width: 38px;
  color: var(--social-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-align: right;
}

.social-section--service .social-split {
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.08fr);
}

.social-press {
  max-width: 570px;
  transform: rotate(-0.7deg);
}

.social-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.social-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.25rem;
  color: var(--social-ink);
  font-size: var(--text-3sm);
  font-weight: 700;
  text-decoration: none;
}

.social-text-link span {
  color: var(--social-red);
  transition: transform var(--duration-base) var(--ease-out);
}

.social-text-link:hover span {
  transform: translateX(4px);
}

.social-section--membership {
  background: var(--social-surface);
  border-top: 1px solid var(--social-line);
}

.social-section--membership .social-section__head > p:not(.social-kicker) {
  max-width: 760px;
}

.social-membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--social-line);
  border: 1px solid var(--social-line);
}

.social-membership-card {
  min-height: 280px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--social-bg);
}

.social-membership-card > span {
  color: var(--social-red);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
}

.social-membership-card h3 {
  margin: 3.2rem 0 1rem;
  color: var(--social-ink);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1;
}

.social-membership-card p {
  margin: 0;
  color: var(--social-muted);
  font-size: var(--text-3sm);
  line-height: 1.72;
}

.social-membership-note {
  max-width: 930px;
  margin: 1.5rem 0 0;
  color: var(--social-muted);
  font-size: var(--text-2sm);
  line-height: 1.65;
}

.social-membership-note strong {
  color: var(--social-ink);
}

@media (max-width: 900px) {
  .social-split,
  .social-community-grid,
  .social-section--community > .container,
  .social-section--service .social-split {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .social-section--service .social-copy {
    grid-row: 1;
  }

  .social-press {
    grid-row: 2;
  }

  .social-membership-grid {
    grid-template-columns: 1fr;
  }

  .social-membership-card {
    min-height: 0;
  }

  .social-membership-card h3 {
    margin-top: 1.8rem;
  }
}

@media (max-width: 680px) {
  .social-hero {
    min-height: 690px;
  }

  .social-hero__photo {
    object-position: 62% center;
  }

  .social-hero__veil {
    background:
      linear-gradient(90deg, rgba(8, 8, 8, 0.88), rgba(8, 8, 8, 0.48)),
      linear-gradient(180deg, rgba(8, 8, 8, 0.25) 25%, rgba(8, 8, 8, 0.94) 88%);
  }

  .social-hero__content {
    padding-top: 125px;
    padding-bottom: 3.5rem;
  }

  .social-hero h1 {
    font-size: var(--text-xl);
  }

  .social-hero--text h1 {
    font-size: var(--text-2xl);
    line-height: 1;
  }

  .social-hero__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .social-hero__facts span {
    min-width: 0;
    padding-right: 1rem;
  }

  .social-hero__facts span:last-child {
    grid-column: 1 / -1;
  }

  .social-figure--document {
    width: 88%;
    margin-top: -1.5rem;
    border-width: 5px;
  }

  .social-river-grid {
    grid-template-columns: 1fr;
  }

  .social-figure--feature {
    margin-top: 0;
  }

  .social-verification {
    margin-top: 2.5rem;
  }

  .social-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .social-actions .btn,
  .social-text-link {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-carousel__slide {
    transition: none;
  }
}

/* ==================================================================
   INSCRIPCIONES — Recorrido de participación
   ================================================================== */
.page-enrollment {
  --enroll-paper: #121413;
  --enroll-card: #191b1a;
  --enroll-ink: #f0ede6;
  --enroll-muted: #a4a69f;
  --enroll-line: rgba(240, 237, 230, 0.14);
  --enroll-red: #a7192a;
  --enroll-green: #176b48;
  background: var(--enroll-paper);
}

.enrollment-main {
  overflow: hidden;
  color: var(--enroll-ink);
  background: var(--enroll-paper);
}

.enrollment-kicker {
  margin: 0;
  color: var(--enroll-red);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-transform: uppercase;
}

.enrollment-hero .enrollment-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.68rem 0.9rem 0.62rem;
  color: #fff;
  background: rgba(12, 13, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid var(--enroll-red);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.enrollment-hero {
  position: relative;
  min-height: 760px;
  padding: clamp(9rem, 14vw, 11rem) 0 clamp(5rem, 9vw, 7rem);
  overflow: hidden;
  color: #f4f0e8;
  background: #101110;
}

.enrollment-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 13% 85%, rgba(167, 25, 42, 0.28), transparent 31%),
    radial-gradient(circle at 88% 16%, rgba(23, 107, 72, 0.22), transparent 27%);
  pointer-events: none;
}

.enrollment-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 17, 16, 0.85) 0%, rgba(16, 17, 16, 0.7) 38%, rgba(16, 17, 16, 0.35) 72%, rgba(16, 17, 16, 0.15) 100%);
}

.enrollment-hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 9vw, 8rem);
}

.enrollment-hero__copy {
  max-width: 920px;
}

.enrollment-hero__copy .section-head {
  max-width: 780px;
  margin-bottom: 0;
}

.enrollment-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.enrollment-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1rem;
  color: #fff;
  border: 1px solid rgba(244, 240, 232, 0.24);
  font-size: var(--text-2sm);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--duration-base), border-color var(--duration-base), transform var(--duration-base);
}

.enrollment-action--primary {
  background: var(--enroll-red);
  border-color: var(--enroll-red);
}

.enrollment-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(244, 240, 232, 0.48);
  transform: translateY(-2px);
}

.enrollment-action--primary:hover {
  background: #c42034;
  border-color: #c42034;
}

.enrollment-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.6;
  filter: saturate(0.7) contrast(1.1);
}

.enrollment-hero__stripe {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: 5fr 1fr 2fr;
  height: 7px;
}

.enrollment-hero__stripe span:nth-child(1) { background: var(--enroll-red); }
.enrollment-hero__stripe span:nth-child(2) { background: #ece8df; }
.enrollment-hero__stripe span:nth-child(3) { background: var(--enroll-green); }

.enrollment-paths {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    linear-gradient(rgba(23, 24, 23, 0.035) 1px, transparent 1px) 0 0 / 100% 54px,
    var(--enroll-paper);
  scroll-margin-top: 120px;
}

.enrollment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 6rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.enrollment-heading h2,
.enrollment-process h2,
.enrollment-form-intro h2 {
  margin: 0.65rem 0 0;
  color: var(--enroll-ink);
  font-size: var(--text-2xl);
  line-height: 0.87;
  text-transform: none;
}

.enrollment-heading > p {
  margin: 0;
  color: var(--enroll-muted);
  font-size: var(--text-3sm);
  line-height: 1.75;
}

.enrollment-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}

.enrollment-path {
  position: relative;
  display: flex;
  min-height: 430px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  overflow: hidden;
  background: var(--enroll-card);
  border: 1px solid var(--enroll-line);
  flex-direction: column;
  transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base);
}

.enrollment-path::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--enroll-line);
  transition: background var(--duration-base), height var(--duration-base);
}

.enrollment-path:hover,
.enrollment-path.is-selected {
  border-color: color-mix(in srgb, var(--enroll-red) 45%, var(--enroll-line));
  box-shadow: 0 22px 52px rgba(20, 22, 20, 0.11);
  transform: translateY(-5px);
}

.enrollment-path:hover::after,
.enrollment-path.is-selected::after {
  height: 6px;
  background: var(--enroll-red);
}

.enrollment-path__number {
  position: absolute;
  top: 1.2rem;
  right: 1.3rem;
  color: var(--enroll-line);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
}

.enrollment-path > svg {
  width: 56px;
  height: 56px;
  margin-bottom: auto;
  color: var(--enroll-red);
}

.enrollment-path__type {
  margin: 2.5rem 0 0.65rem;
  color: var(--enroll-green);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.enrollment-path h3 {
  margin: 0 0 0.85rem;
  color: var(--enroll-ink);
  font-size: var(--text-xl);
  line-height: 0.92;
  text-transform: none;
}

.enrollment-path > p:not(.enrollment-path__type) {
  margin: 0;
  color: var(--enroll-muted);
  font-size: var(--text-2sm);
  line-height: 1.67;
}

.enrollment-path > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 1.35rem;
  padding: 0.85rem 0 0;
  color: var(--enroll-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--enroll-line);
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 800;
  cursor: pointer;
}

.enrollment-path > button span {
  color: var(--enroll-red);
  transition: transform var(--duration-base);
}

.enrollment-path > button:hover span {
  transform: translateX(4px);
}

.enrollment-process {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  color: #f4f0e8;
  background:
    radial-gradient(circle at 88% 20%, rgba(23, 107, 72, 0.18), transparent 28%),
    #121312;
}

.enrollment-process__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(3rem, 10vw, 9rem);
}

.enrollment-process h2 {
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.6rem);
}

.enrollment-process ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enrollment-process li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid rgba(244, 240, 232, 0.14);
}

.enrollment-process li:first-child {
  padding-top: 0;
}

.enrollment-process li > span {
  color: var(--enroll-red);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.enrollment-process li strong {
  display: block;
  color: #fff;
  font-size: var(--text-3sm);
}

.enrollment-process li p {
  margin: 0.4rem 0 0;
  color: rgba(244, 240, 232, 0.57);
  font-size: var(--text-2sm);
  line-height: 1.6;
}

.enrollment-form-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--enroll-paper);
  scroll-margin-top: 110px;
}

.enrollment-form-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(3rem, 9vw, 8rem);
}

.enrollment-form-intro {
  position: sticky;
  top: 125px;
  background: url('../assets/imagen 16.webp') center / cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  padding: 2.5rem 2rem;
  color: #fff;
  min-height: 480px;
}

.enrollment-form-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  z-index: 0;
}

.enrollment-form-intro > * {
  position: relative;
  z-index: 1;
}

.enrollment-form-intro h2 {
  font-size: clamp(3.2rem, 6vw, 5.8rem);
  color: #fff;
}

.enrollment-form-intro > p:not(.enrollment-kicker) {
  margin: 1.3rem 0 0;
  color: rgba(255,255,255,.7);
  font-size: var(--text-3sm);
  line-height: 1.75;
}

.enrollment-form-intro__note {
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.06);
  border-left: 4px solid var(--enroll-green);
}

.enrollment-form-intro__note strong {
  color: var(--enroll-ink);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enrollment-form-intro__note p {
  margin: 0.35rem 0 0;
  color: var(--enroll-muted);
  font-size: var(--text-2sm);
  line-height: 1.6;
}

.enrollment-form-intro > a {
  display: inline-flex;
  gap: 0.5rem;
  margin-top: 1.4rem;
  color: var(--enroll-green);
  font-size: var(--text-2sm);
  font-weight: 800;
  text-decoration: none;
}

.enrollment-form-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--enroll-card);
  border: 1px solid var(--enroll-line);
  box-shadow: 0 25px 65px rgba(20, 22, 20, 0.1);
}

.enrollment-form-card fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.enrollment-form-card fieldset + fieldset {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--enroll-line);
}

.enrollment-form-card legend {
  width: 100%;
  margin-bottom: 1.5rem;
  color: var(--enroll-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.enrollment-form-card legend span {
  margin-right: 0.55rem;
  color: var(--enroll-red);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
}

.enrollment-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.enrollment-field {
  margin-bottom: 1.1rem;
}

.enrollment-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--enroll-ink);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enrollment-field label > span {
  color: var(--enroll-red);
}

.enrollment-field label small {
  color: var(--enroll-muted);
  font-size: var(--text-nano);
  font-weight: 600;
}

.enrollment-field input,
.enrollment-field select,
.enrollment-field textarea {
  width: 100%;
  padding: 0.9rem 0.95rem;
  color: var(--enroll-ink);
  background: var(--enroll-paper);
  border: 1px solid var(--enroll-line);
  border-radius: 0;
  font: inherit;
  font-size: var(--text-3sm);
  transition: background var(--duration-base), border-color var(--duration-base), box-shadow var(--duration-base);
}

.enrollment-field input:focus,
.enrollment-field select:focus,
.enrollment-field textarea:focus {
  background: var(--enroll-card);
  border-color: var(--enroll-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--enroll-red) 13%, transparent);
  outline: none;
}

.enrollment-field input::placeholder,
.enrollment-field textarea::placeholder {
  color: color-mix(in srgb, var(--enroll-muted) 62%, transparent);
}

.enrollment-field textarea {
  min-height: 130px;
  resize: vertical;
}

.enrollment-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.enrollment-privacy {
  padding: 1rem 1.1rem;
  border: 1px solid var(--enroll-line);
  background: color-mix(in srgb, var(--enroll-card) 86%, transparent);
}

.enrollment-privacy label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--enroll-ink);
  font-size: var(--text-2sm);
  line-height: 1.55;
  cursor: pointer;
}

.enrollment-privacy input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
  accent-color: var(--enroll-red);
}

.enrollment-privacy strong {
  color: var(--enroll-red);
}

.enrollment-privacy p {
  margin: 0.65rem 0 0 1.85rem;
  color: var(--enroll-muted);
  font-size: var(--text-2xs);
  line-height: 1.55;
}

.enrollment-privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.enrollment-submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--enroll-line);
}

.enrollment-submit p {
  margin: 0;
  color: var(--enroll-muted);
  font-size: var(--text-2xs);
  line-height: 1.5;
}

.enrollment-submit p span {
  color: var(--enroll-red);
}

.enrollment-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  color: #fff;
  background: var(--enroll-red);
  border: 1px solid var(--enroll-red);
  font: inherit;
  font-size: var(--text-2sm);
  font-weight: 800;
  cursor: pointer;
  transition: background var(--duration-base), transform var(--duration-base);
}

.enrollment-submit button:hover {
  background: #c42034;
  transform: translateY(-2px);
}

.page-enrollment .form-status {
  margin: 1rem 0 0;
  border-radius: 0;
  font-size: var(--text-2sm);
  text-align: left;
}

@media (max-width: 920px) {
  .enrollment-hero__grid,
  .enrollment-heading,
  .enrollment-process__grid,
  .enrollment-form-layout {
    grid-template-columns: 1fr;
  }

  .enrollment-hero {
    min-height: 0;
  }

  .enrollment-hero__video {
    width: 100%;
    object-position: center;
    opacity: 0.5;
  }

  .enrollment-paths__grid {
    grid-template-columns: 1fr;
  }

  .enrollment-path {
    min-height: 340px;
  }

  .enrollment-form-intro {
    position: static;
  }
}

@media (max-width: 620px) {
  .enrollment-hero {
    padding-top: 8.5rem;
    /* En móviles el hero de 760px se siente como un bloque negro vacío */
    min-height: 0;
    padding-bottom: clamp(4rem, 12vw, 5rem);
  }

  .enrollment-hero .enrollment-kicker {
    padding: 0.6rem 0.72rem 0.55rem;
    font-size: var(--text-3xs);
    letter-spacing: 0.11em;
  }

  .enrollment-hero__copy h1,
  .enrollment-hero__copy .section-head h1 {
    font-size: var(--text-2xl);
  }

  .enrollment-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .enrollment-hero::after {
    /* Menos velo oscuro que antes (0.9/0.42): se ve la foto de bomberos */
    background: linear-gradient(90deg, rgba(16, 17, 16, 0.74) 0%, rgba(16, 17, 16, 0.38) 100%);
  }

  .enrollment-hero__video {
    width: 100%;
    opacity: 0.55;
  }

  .enrollment-heading h2,
  .enrollment-process h2,
  .enrollment-form-intro h2 {
    font-size: var(--text-2xl);
  }

  .enrollment-path {
    min-height: 380px;
  }

  .enrollment-form-card {
    padding: 1.35rem 1rem;
  }

  .enrollment-form-row,
  .enrollment-submit {
    grid-template-columns: 1fr;
  }

  .enrollment-submit button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enrollment-hero__video {
    opacity: 0.35;
  }

  .enrollment-action,
  .enrollment-path,
  .enrollment-path::after,
  .enrollment-path > button span,
  .enrollment-submit button {
    transition: none;
  }
}

/* ——— Responsive historia ——— */
@media (max-width: 860px) {
  .hero-interior {
    padding: 110px 0 var(--space-4xl);
  }

  .historia-container {
    padding-top: var(--space-4xl);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .historia-block {
    padding: var(--space-2xl) 0;
  }

  .historia-block {
    padding: var(--space-3xl) var(--space-lg);
  }

  .tl-figure--float,
  .tl-figure--float-left {
    float: none;
    width: 100%;
    margin: var(--space-md) 0;
  }

  .tl-figure--wide {
    margin-top: var(--space-xl);
  }

  .tl-split,
  .tl-split--figure-left {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tl-roster-panel {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }

  .tl-figure--panel img {
    aspect-ratio: 16 / 9;
  }

  .tl-tabs-nav label {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--text-3sm);
    padding: var(--space-sm) var(--space-xs);
  }

  .tl-tab-list {
    grid-template-columns: 1fr;
  }

  .tl-tab-list--cols {
    grid-template-columns: 1fr;
  }

  .tl-tab-list--siete {
    grid-template-columns: 1fr;
  }

  .tl-carousel-thumbs {
    grid-template-columns: none;
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }

  .tl-carousel-thumb {
    flex: 0 0 auto;
    width: 84px;
  }

  .tl-carousel-thumb img {
    height: 52px;
  }

  .tl-carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .tl-carousel-arrow svg {
    width: 16px;
    height: 16px;
  }
}

/* ==================================================================
   EVENTOS Y FECHAS — Agenda institucional / archivo público
   ================================================================== */
.page-events {
  --events-paper: #121413;
  --events-card: #191b1a;
  --events-ink: #f0ede6;
  --events-muted: #a4a69f;
  --events-line: rgba(240, 237, 230, 0.14);
  --events-red: #a7192a;
  --events-green: #176b48;
  --events-gold: #b49755;
  background: var(--events-paper);
}

.event-album {
  width: min(100%, 760px);
  margin-top: 1.4rem;
  outline: none;
}

.event-album__viewport {
  position: relative;
  aspect-ratio: 2.35 / 1;
  overflow: hidden;
  background: #181a18;
  box-shadow: 0 18px 42px rgba(17, 18, 16, 0.2);
}

.event-album__viewport::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(10, 11, 10, 0.84));
}

.event-album__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity 700ms ease, visibility 700ms ease, transform 5s ease;
}

.event-album__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.event-album__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-album__slide figcaption {
  position: absolute;
  right: 5.5rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.event-album__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(13, 15, 13, 0.72);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
  transition: color var(--duration-base), background var(--duration-base), transform var(--duration-base);
}

.event-album__arrow--previous { left: 0.8rem; }
.event-album__arrow--next { right: 0.8rem; }

.event-album__arrow:hover,
.event-album__arrow:focus-visible {
  color: #fff;
  background: var(--events-red);
  outline: 2px solid #fff;
  outline-offset: 2px;
  transform: translateY(-50%) scale(1.08);
}

.event-album__counter {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.event-album__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0 0;
  color: var(--events-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-album__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.event-album__dots button {
  width: 22px;
  height: 3px;
  padding: 0;
  background: var(--events-line);
  border: 0;
  cursor: pointer;
  transition: width var(--duration-base), background var(--duration-base);
}

.event-album__dots button[aria-current="true"] {
  width: 38px;
  background: var(--events-red);
}

.event-album__dots button:focus-visible {
  outline: 2px solid var(--events-red);
  outline-offset: 4px;
}

@media (max-width: 620px) {
  .event-album__viewport {
    aspect-ratio: 1.25 / 1;
  }

  .event-album__slide img {
    object-position: center;
  }

  .event-album__slide figcaption {
    right: 4rem;
    font-size: var(--text-nano);
  }

  .event-album__arrow {
    width: 34px;
    height: 34px;
  }

  .event-album__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Event share buttons */
.event-share {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.event-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245, 243, 239, 0.15);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.event-share__btn:hover {
  background: rgba(245, 243, 239, 0.1);
  border-color: rgba(245, 243, 239, 0.3);
}

/* ==================================================================
   FAQ — Preguntas frecuentes
   ================================================================== */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid rgba(245, 243, 239, 0.12);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: var(--text-md);
  font-weight: 300;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  line-height: 1.7;
  opacity: 0.85;
}

.faq-item summary:hover {
  background: rgba(245, 243, 239, 0.04);
}

/* ==================================================================
   SUBSCRIBE FORM — Novedades
   ================================================================== */
.section-intro {
  max-width: 520px;
  margin-top: var(--space-sm);
  opacity: 0.85;
  line-height: 1.7;
}

.subscribe-form__row {
  display: flex;
  gap: 0.5rem;
  max-width: 520px;
}

.subscribe-form__row input[type="email"] {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(245, 243, 239, 0.2);
  border-radius: 4px;
  background: rgba(245, 243, 239, 0.06);
  color: inherit;
  font-size: var(--text-base);
}

.subscribe-form__row button {
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.subscribe-form__consent {
  margin-top: 0.75rem;
  font-size: var(--text-3sm);
  opacity: 0.7;
}

.subscribe-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.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;
}

/* ==================================================================
   CÓMO ACTUAR — Header (rediseño sobrio)
   ================================================================== */
.act-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 48px 24px 40px;
}

.act-header__badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1.5px solid rgba(100, 160, 220, 0.6);
  border-radius: 4px;
  color: rgba(140, 185, 220, 0.9);
  font-size: var(--text-2sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.act-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 28px;
  line-height: 1.2;
}

.act-header__lead {
  max-width: 640px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* ==================================================================
   TIPOGRAFÍA — subtítulos con marco bordeaux +1px
   ================================================================== */
.eyebrow { font-size: calc(var(--text-xs) + 1px); }
.hero-content .eyebrow { font-size: calc(var(--text-2sm) + 1px); }
.hi-content .eyebrow { font-size: calc(var(--text-3sm) + 1px); }
.history-kicker { font-size: calc(var(--text-2sm) + 1px); }
.social-kicker { font-size: calc(var(--text-2sm) + 1px); }
.enrollment-kicker { font-size: calc(var(--text-2xs) + 1px); }

/* ==================================================================
   TIPOGRAFÍA — footer (escritorio: valores legibles; el móvil se
   redefine más abajo con @media max-760)
   ================================================================== */
.site-footer .footer-brand .brand-text strong { font-size: clamp(1.35rem, 2.5vw, 1.875rem); }
.site-footer .footer-brand .brand-text span { font-size: 15px; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; color: #c3c5c9; }
.site-footer .footer-brand p,
.site-footer .footer-brand__description { font-size: 14px; line-height: 1.65; font-weight: 300; color: #c3c5c9; }
.site-footer .footer-brand .footer-founded { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--oro-300); }
.site-footer .footer-bottom { font-size: 12px; color: #c3c5c9; }
.site-footer .footer-col h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: #f2f0ea; }
.site-footer .footer-col a,
.site-footer .footer-contact a { font-size: 14px; }
.site-footer .footer-social p { font-size: 12px; }

/* ==================================================================
   MOBILE FOOTER — tipografía legible (viene después del bloque +1px
   para ganar por cascada con la misma especificidad)
   ================================================================== */
@media (max-width: 760px) {
  .site-footer .footer-brand .brand-text strong { font-size: 1rem; }
  .site-footer .footer-brand .brand-text span { font-size: 10px; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; color: var(--plata-300); }
  .site-footer .footer-brand p,
  .site-footer .footer-brand__description { font-size: 13px; line-height: 1.6; font-weight: 300; color: #c3c5c9; }
  .site-footer .footer-brand .footer-founded { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--oro-300); }
  .site-footer .footer-col h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.18em; }
  .site-footer .footer-col a,
  .site-footer .footer-contact a { font-size: 15px; line-height: 1.55; color: #d6d3cb; }
  .site-footer .footer-social p { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--plata-300); }
  .site-footer .footer-social a { font-size: 12px; }
  .site-footer .footer-motto { font-size: 12px; }
  .site-footer .footer-bottom span { font-size: 12px; color: #a9aeb4; }
}

/* ==================================================================
   UNIDADES — mini carrusel de fotos (ej. serie de autobombas M40-M43)
   ================================================================== */
.unit-carousel {
  position: relative;
}

.unit-carousel .unit-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.unit-carousel .unit-photo.is-active {
  opacity: 1;
  visibility: visible;
}

.unit-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.unit-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.unit-carousel__dot.is-active {
  background: var(--rojo, #CE2B37);
  transform: scale(1.2);
}

/* ==================================================================
   DIM — galería de despliegues en la página dim.html
   ================================================================== */
.dim-gallery {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
}

.unit-detail-photo {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.dim-gallery figure {
  margin: 0;
  min-height: 100%;
}

.dim-gallery figure img {
  border-radius: var(--radius-md);
  transition: transform 0.8s var(--ease-out);
}

.dim-gallery figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .dim-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}

/* ==================================================================
   AUTOBOMBAS — flota por tipo (autobombas.html)
   ------------------------------------------------------------------
   Bloque nuevo al final del archivo. No reordena ni reformatea nada
   de lo anterior: css/style.css sigue siendo la base de `.unit-*` y
   esta capa corrige cinco cosas concretas.

   1. La grilla estaba en orden numerico (M2, M25, M30...). El numero
      correlativo no informa nada; el TIPO si. Cada grupo ahora es una
      banda con su tipo, ordenado por rol en una respuesta (agua ->
      ataque urbano -> apoyo -> carga pesada -> altura), y las areas
      especiales van aparte porque no son moviles de ataque.

   2. FIRMA: el numero de unidad pasa a ser el ancla visual de la card,
      estarcido sobre una chapa oscura, en --font-display (Barlow
      Condensed es la voz correcta: una cara condensada de pintor de
      letreros). Es lo unico que se empuja fuerte; el resto queda quieto.
      DIM y K9 no llevan chapa: no son moviles y no tienen numero.

   3. CONTRASTE: `--rojo` (#CE2B37) sobre la card oscura (#22262A) da
      2.92:1 y no pasa AA. El numero usa `--rojo-texto-oscuro` (#FF6572),
      5.33:1 sobre la chapa — el mismo arreglo que ya hace
      css/cuerpo-activo.css para `.unit-code`.

   4. CAPAS: `.unit-play` era `inset: 0` con `z-index: 3`, el mismo
      z-index que `.unit-carousel__dots` y mas adelante en el DOM, asi
      que se comia los clicks de los dots. Ahora es un control compacto
      arriba a la derecha (z-index 5) y los dots quedan en 3 al pie.

   5. PISO TIPOGRAFICO: `--text-xs` son 6px y `--text-sm` son 10px. Ni
      `.unit-body p` ni `.unit-play__text` (que no tenia regla propia y
      heredaba 6px) quedan por debajo de 12px.
   ================================================================== */

/* ------------------------------------------------------------------
   0. PORTADA DE AUTOBOMBAS
   ------------------------------------------------------------------
   Fondo full-bleed con `portada autobomba.jpg`.

   LA IMAGEN ES CHICA: 510x340. A 1440px de ancho de escritorio eso es un
   escalado de ~2.8x en horizontal y ~4x en vertical. Si la foto se viera
   limpia, el pixelado seria lo primero que se lee. Por eso el fondo va
   con desenfoque fuerte y encima un velo oscuro: la foto aporta clima,
   no detalle.

   LA FOTO TIENE TEXTO INCUSTADO: el escudo con "Bomberos Voluntarios
   Vuelta de Rocha" aparece espejado (es un reflejo en el cristal de la
   cabina) y abajo se lee un "35..." recortado. El velo tiene que quedar
   bastante opaco para que nada de eso se lea ni compita con el texto de
   arriba. Si alguna vez se sube una version grande de esta foto, sacar
   el `blur` y aligerar el velo: es la unica razon de que esten tan
   fuertes.

   Orden de capas: foto (0) < velo (1) < contenido (2). El `isolation`
   es lo que deja usar z-index sin que la foto se escape hacia el fondo
   de la pagina. */

.fleet-cover {
  position: relative;
  min-height: min(66vh, 620px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--space-2xl);
  background: #0b0b0b;
}

.fleet-cover__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: blur(14px) saturate(1.05);
  /* El desenfoque abre bordes translucidos en los cuatro lados; el
     escalado extra los saca de vista. */
  transform: scale(1.12);
  pointer-events: none;
}

.fleet-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0.7) 52%, rgba(8, 8, 8, 0.42) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.22) 58%, rgba(8, 8, 8, 0.5) 100%);
}

.fleet-cover__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Compensa el header fijo: sin esto el titulo queda debajo. */
  padding-top: 150px;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* El lede largo sobre una foto con velo se vuelve ilegible si ocupa
   todo el ancho. */
.fleet-cover__content .section-head p {
  max-width: 46ch;
}

@media (max-width: 700px) {
  .fleet-cover {
    min-height: min(58vh, 480px);
  }
  /* Menos desenfoque en movil: la foto se escala menos y el pixelado
     tiene menos que esconder. */
  .fleet-cover__photo {
    filter: blur(10px) saturate(1.05);
  }
}

/* ------------------------------------------------------------------
   1. AGRUPACION POR TIPO
   ------------------------------------------------------------------ */
.fleet-group {
  margin-bottom: var(--space-2xl);
}

.fleet-group:last-child {
  margin-bottom: 0;
}

.fleet-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.fleet-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.fleet-group__role {
  margin: 0;
  font-size: var(--text-3sm);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------
   2. FIRMA — chapa con el numero estarcido
   ------------------------------------------------------------------ */
.unit-plate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--negro-carbono);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-right-radius: var(--radius-md);
  font-family: var(--font-display);
  line-height: 0.82;
}

.unit-plate__prefix {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--plata-300);
}

.unit-plate__num {
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--rojo-texto-oscuro);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------
   3. PISO TIPOGRAFICO Y PESO DE LOS DATOS
   ------------------------------------------------------------------ */
.fleet .unit-body h3 {
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.fleet .unit-body p {
  margin-bottom: 0;
  font-size: var(--text-3sm);
  line-height: 1.5;
}

/* El chasis es dato de segunda: se lee, pero no compite con el tipo.
   Queda en mono chico, como las etiquetas tecnicas del sistema. */
.fleet .unit-spec {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------
   4. CAPAS — dots bajo el control de video, y dots con area de click
   ------------------------------------------------------------------ */
.fleet .unit-carousel__dots {
  z-index: 3;
  bottom: var(--space-sm);
  gap: 0;
}

/* El punto visible sigue siendo de 10px; el area de click pasa a 24px
   para no ser un target diminuto cuando la unidad tiene 7 o 9 fotos. */
.fleet .unit-carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fleet .unit-carousel__dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.fleet .unit-carousel__dot.is-active {
  background: transparent;
  transform: none;
}

.fleet .unit-carousel__dot.is-active::before {
  background: var(--rojo-texto-oscuro);
  border-color: var(--rojo-texto-oscuro);
  transform: scale(1.2);
}

.fleet .unit-carousel__dot:focus-visible {
  outline: 2px solid var(--rojo-texto-oscuro);
  outline-offset: -2px;
}

/* Si el JS no corre, la primera foto sigue viéndose en vez de dejar
   el marco vacio.

   El `:not([data-ready])` es lo que sostiene la regla: CSS no puede
   distinguir "el carrusel todavia no inicializo" de "la foto 0 esta
   apagada", porque en los dos casos la foto 0 es simplemente la primera
   y no tiene `.is-active`. Sin este marcador el fallback la dejaba en
   `opacity: 1` para siempre y el carrusel mostraba dos fotos apiladas
   en todo momento. `initCarousel` (js/main.js) pone `data-ready` al
   inicializar, y a partir de ahi manda la regla de `.is-active`. */
.unit-carousel:not([data-ready]) .unit-photo:first-of-type {
  opacity: 1;
  visibility: visible;
}

/* Control de video compacto: no es mas la capa a pantalla completa. */
.fleet .unit-play {
  inset: var(--space-sm) var(--space-sm) auto auto;
  z-index: 5;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-full);
  background: rgba(10, 12, 14, 0.72);
  font-size: var(--text-2sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.fleet .unit-play:hover {
  background: rgba(206, 43, 55, 0.85);
}

.fleet .unit-play__icon {
  width: 28px;
  height: 28px;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(10, 12, 14, 0.5);
}

.fleet .unit-play__icon svg {
  width: 13px;
  height: 13px;
  margin-left: 1px;
}

/* `.unit-play__text` no tenia ninguna regla en todo el proyecto, asi
   que heredaba 6px de --text-xs. Ahora tiene piso propio. */
.fleet .unit-play__text {
  font-size: var(--text-2sm);
  line-height: 1;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------
   5. FOTOS DE LA UNIDAD — entrada al lightbox existente
   ------------------------------------------------------------------ */
.unit-gallery {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-2sm);
  line-height: 1;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

/* Glifo de marco: el control es de fotos, no de video. */
.unit-gallery::after {
  content: '';
  width: 16px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.75;
}

.unit-gallery:hover {
  color: var(--marfil);
  border-color: var(--plata-500);
  background: rgba(255, 255, 255, 0.04);
}

.unit-gallery:focus-visible {
  outline: 2px solid var(--rojo-texto-oscuro);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   6. AREAS ESPECIALES — sin chapa ni numero estarcido
   ------------------------------------------------------------------ */
.fleet-group--special .unit-card {
  background: var(--bg-secondary);
}

.fleet-group--special .unit-code {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 3px 8px;
  border: 1px solid var(--oro-700);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--oro-300);
}

/* ------------------------------------------------------------------
   7. DOSSIER DE VIDEO
   ------------------------------------------------------------------
   Modal aparte del #lightbox: el clip es vertical (404x720 ~= 9/16) y
   antes entraba con object-fit: contain en un marco 16/10, o sea con
   bandas negras y ~35% del ancho en uso. Aca el marco es vertical y el
   clip lo ocupa entero.
   ------------------------------------------------------------------ */
.dossier {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(5, 5, 5, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dossier.is-open {
  display: flex;
}

.dossier-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  width: min(760px, 100%);
  max-height: 100%;
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.dossier-media {
  flex: 0 0 auto;
  width: min(264px, 38%);
}

.dossier-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: var(--negro-carbono);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.dossier-data {
  flex: 1 1 auto;
  min-width: 0;
}

.dossier-code {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--rojo-texto-oscuro);
}

.dossier-title {
  margin: 0 0 var(--space-md);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-primary);
}

.dossier-facts {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.dossier-fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
}

.dossier-fact dt {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dossier-fact dd {
  margin: 0;
  font-size: var(--text-3sm);
  color: var(--text-primary);
}

.dossier-clips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.dossier-clips[hidden] {
  display: none;
}

.dossier-clip {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.dossier-clip:hover {
  color: var(--marfil);
  border-color: var(--plata-500);
}

.dossier-clip.is-active {
  color: var(--marfil);
  border-color: var(--rojo-texto-oscuro);
  background: rgba(255, 101, 114, 0.12);
}

.dossier-clip:focus-visible {
  outline: 2px solid var(--rojo-texto-oscuro);
  outline-offset: 2px;
}

.dossier-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}

.dossier-close:hover {
  background: var(--rojo);
}

.dossier-close svg {
  width: 22px;
  height: 22px;
}

.dossier-close:focus-visible {
  outline: 2px solid var(--rojo-texto-oscuro);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   8. ADAPTACIONES
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .fleet-group__title {
    font-size: var(--text-lg);
    letter-spacing: 0.1em;
  }

  .unit-plate {
    padding: 6px 12px 6px 8px;
  }

  .unit-plate__num {
    font-size: clamp(2.1rem, 1.1rem + 6.5vw, 3rem);
  }

  .dossier {
    padding: var(--space-sm);
  }

  .dossier-panel {
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md);
  }

  .dossier-media {
    width: min(240px, 62%);
    margin: 0 auto;
  }

  .dossier-close {
    top: var(--space-sm);
    right: var(--space-sm);
  }
}

/* ------------------------------------------------------------------
   9. MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fleet .unit-play,
  .fleet .unit-play__icon,
  .fleet .unit-gallery,
  .fleet .unit-carousel__dot,
  .fleet .unit-carousel__dot::before,
  .unit-plate__num,
  .dossier,
  .dossier-clip,
  .dossier-close {
    transition: none;
  }
}