/* =========================================================
   Federación Nacional de Trabajadores Ferroviarios (FENAFER)
   Hoja de estilos principal — v3: "Consola de Andén" (pastel)

   Identidad visual: el tablero de un andén de estación, en
   tonos pastel. Papel cálido para el contenido, y un pastel
   celeste —no oscuro— para la consola de navegación (el riel
   fijo a la izquierda), la portada, el pie y las cabeceras
   internas, con acento durazno para lo destacado y salvia
   para los enlaces. El texto sobre esas superficies pasa a
   ser oscuro, porque un pastel claro con letra blanca no se
   lee bien. Las fichas de "todavía sin foto" (accesos,
   noticias, beneficios, documentos, galerías) son la única
   superficie que se mantiene oscura a propósito, como una
   placa de identificación dentro de un sitio claro.
   Tarjetas con esquina cortada como un boleto picado y
   sombra dura en vez de difusa; tipografía condensada de
   afiche para los títulos y monoespaciada para cifras.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* papel: boleto crudo, superficie de contenido */
  --papel:     #fefcfb;
  --papel-2:   #f6f0f4;
  --papel-3:   #ede4ea;

  /* tinta sobre el papel: el único tono oscuro del sitio */
  --tinta:     #3a3f56;
  --muted:     #7d7a8c;
  --linea:     #e6dfe6;
  --linea-2:   #d9cfe0;

  /* celeste pastel: la consola de navegación, la portada, el pie */
  --carbon:      #d3ddf5;
  --carbon-2:    #c3d1f0;
  --carbon-3:    #b3c5ea;
  --carbon-900:  #a3b8e0;

  /* durazno pastel: color de acento */
  --ambar:      #f8d9c2;
  --ambar-600:  #cc8455;
  --ambar-300:  #fae8d7;
  --ambar-100:  #fdf3ea;

  /* salvia pastel: enlaces y piloto de vía libre */
  --teal:      #c8e6d8;
  --teal-700:  #5c8f73;
  --teal-100:  #e8f5ee;

  /* alerta: rosado rojizo, solo para avisos reales */
  --alerta:      #d98080;
  --alerta-100:  #fbebec;

  /* tonos oscuros reservados para las fichas de "todavía sin foto":
     la única superficie del sitio que se mantiene oscura a propósito */
  --tile-1: #6b84bf;
  --tile-2: #47588a;

  --paper: var(--papel); /* compatibilidad interna */
  --ink:   var(--tinta);
  --line:  var(--linea);

  /* alias de la paleta anterior: algunas fichas ya escritas
     usan estos nombres en línea (style="..."); apuntan a los
     tonos oscuros de "sin foto", no al celeste pastel, para
     que esas placas se sigan viendo como una ficha oscura */
  --grafito-700: var(--tile-1);
  --noche-900:   var(--tile-2);

  /* medidas */
  --wrap:         1200px;
  --wrap-narrow:  820px;
  --rail-w:       248px;   /* ancho del riel de navegación en escritorio */
  --rail-pie:     236px;   /* alto reservado para la franja inferior del riel */
  --notch:        16px;    /* esquina cortada de boleto */
  --r-sm:         2px;
  --r:            2px;
  --r-lg:         2px;
  --r-pill:       2px;

  --sombra-sm: 3px 3px 0 rgba(58,63,86,.14);
  --sombra:    5px 5px 0 rgba(58,63,86,.18);
  --sombra-lg: 7px 7px 0 rgba(58,63,86,.22);
  /* compatibilidad: nombres usados por clases más viejas */
  --shadow-sm: var(--sombra-sm);
  --shadow:    var(--sombra);
  --shadow-lg: var(--sombra-lg);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 76px; /* alto de la cabecera móvil, sin uso en escritorio */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--ambar-600); }
ul, ol { padding-left: 1.15rem; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 {
  font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--tinta);
  font-weight: 800;
  text-wrap: balance;
}
h1 { text-transform: uppercase; }

:focus-visible {
  outline: 3px solid var(--ambar-600);
  outline-offset: 2px;
  border-radius: 0;
}

::selection { background: var(--ambar); color: var(--tinta); }

/* ---------- 3. Utilidades ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { position: relative; padding-block: clamp(48px, 7vw, 88px); }
.section--cream { background: var(--papel-2); }
.section--noche {
  background: linear-gradient(170deg, var(--carbon-2) 0%, var(--carbon-900) 100%);
  color: var(--tinta);
}
.section--noche h2, .section--noche h3 { color: var(--tinta); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ambar); color: var(--tinta); padding: 12px 18px; font-weight: 800;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
.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;
}

/* Rótulo de sección: mono, mayúsculas, espaciado, con un separador
   de "boleto perforado" en vez del tramo de riel anterior */
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head--split {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 12px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 10px; flex: none;
  background: repeating-linear-gradient(90deg, var(--teal-700) 0 3px, transparent 3px 7px);
}
.section--noche .eyebrow, .franja .eyebrow, .cta-band .eyebrow { color: var(--ambar-600); }
.section--noche .eyebrow::before, .franja .eyebrow::before, .cta-band .eyebrow::before {
  background: repeating-linear-gradient(90deg, var(--ambar-600) 0 3px, transparent 3px 7px);
}
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); text-transform: uppercase; }
.section-head p { margin-top: 12px; color: var(--muted); max-width: 62ch; font-size: 17px; }
.section--noche .section-head p { color: var(--muted); }

/* Botones: rectos, borde grueso, sombra dura que se "aplasta" al presionar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border: 2px solid var(--tinta);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--tinta);
}
.btn svg { flex: none; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tinta); }
.btn--gold { background: var(--ambar); color: var(--tinta); }
.btn--gold:hover { background: var(--ambar-300); color: var(--tinta); }
.btn--tierra { background: var(--carbon); color: var(--tinta); border-color: var(--tinta); box-shadow: 4px 4px 0 var(--linea-2); }
.btn--tierra:hover { background: var(--carbon-2); box-shadow: 2px 2px 0 var(--linea-2); }
.btn--ghost { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }
.btn--ghost:hover { background: var(--tinta); color: var(--papel); }
.btn--light { background: transparent; color: var(--tinta); border-color: var(--tinta); box-shadow: 4px 4px 0 rgba(58,63,86,.22); }
.btn--light:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn--sm { padding: 9px 16px; font-size: 12px; box-shadow: 3px 3px 0 var(--tinta); }
.btn--sm:hover { box-shadow: 1px 1px 0 var(--tinta); }
.btn--lg { padding: 18px 30px; font-size: 15px; box-shadow: 6px 6px 0 var(--tinta); }
.btn--lg:hover { box-shadow: 3px 3px 0 var(--tinta); }
.btn__peso {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; background: rgba(58,63,86,.12); color: inherit; white-space: nowrap;
}

/* Vía férrea como separador (durmientes en planta) */
.riel {
  height: 12px; width: 100%;
  background:
    linear-gradient(var(--carbon-900), var(--carbon-900)) 0 2px / 100% 2px repeat-x,
    linear-gradient(var(--carbon-900), var(--carbon-900)) 0 8px / 100% 2px repeat-x,
    repeating-linear-gradient(90deg, var(--linea-2) 0 6px, transparent 6px 20px);
  opacity: .8;
}

/* ---------- 4. Barra inferior del riel (antes "barra superior") ----------
   En móvil es una franja angosta arriba, igual que antes. En escritorio
   se ancla al pie del riel de navegación fijo (ver bloque 17).            */
.topbar { background: var(--carbon-900); color: var(--tinta); font-size: 13px; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 42px; flex-wrap: wrap;
}
.topbar__left { display: flex; align-items: center; gap: 8px; }
.topbar__pulse {
  width: 7px; height: 7px; flex: none; background: var(--ambar-600);
  box-shadow: 0 0 0 0 rgba(204,132,85,.7); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(204,132,85,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(204,132,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(204,132,85,0); }
}
.topbar__links { display: flex; align-items: center; gap: 18px; }
.topbar a { color: var(--tinta); }
.topbar a:hover { color: var(--ambar-600); }
.topbar__social { display: flex; gap: 8px; }
.topbar__social a {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid rgba(58,63,86,.25);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.topbar__social a:hover { background: var(--ambar-600); color: var(--papel); border-color: var(--ambar-600); transform: translateY(-2px); }

/* ---------- 5. Riel de navegación (antes "cabecera") ----------
   Bajo 1081px es una barra horizontal fija arriba, como cualquier sitio.
   Desde 1081px se convierte en un riel vertical fijo a la izquierda:
   ver el bloque 17 al final, donde vive toda la transformación.        */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--carbon);
  border-bottom: 3px solid var(--ambar-600);
}
.header::after { content: none; }
.header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand:hover { color: inherit; }
.brand img {
  width: 44px; height: 44px; object-fit: cover; flex: none;
  border: 2px solid var(--ambar-600); background: var(--papel);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--tinta); letter-spacing: 0; text-transform: uppercase;
}
.brand__sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ambar-600);
}

/* Navegacion: en móvil, fila horizontal oculta (se usa el cajón) */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; padding: 9px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--tinta);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--ambar-600); transform: scaleX(0);
  transform-origin: left; transition: transform .25s var(--ease);
}
.nav a:hover { color: var(--tinta); background: rgba(204,132,85,.16); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ambar-600); }
.nav .nav__cta { margin-left: 8px; }
.nav .nav__cta::after { display: none; }

.burger {
  display: none; width: 44px; height: 44px;
  border: 2px solid var(--ambar-600); background: var(--carbon);
  place-items: center; flex: none;
}
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--tinta); position: relative;
  transition: background-color .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--tinta);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Menu movil (cajón), igual en cualquier ancho de pantalla */
.drawer {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(58,63,86,.55);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: var(--papel); padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  transform: translateX(100%); transition: transform .35s var(--ease);
  border-left: 3px solid var(--ambar-600);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 10px; border-bottom: 2px solid var(--tinta);
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em;
}
.drawer__close {
  width: 38px; height: 38px; border: 2px solid var(--tinta);
  display: grid; place-items: center; font-size: 22px; color: var(--tinta); line-height: 1;
}
.drawer a {
  padding: 13px 14px; font-weight: 700; color: var(--tinta);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .2s var(--ease);
}
.drawer a:hover, .drawer a[aria-current="page"] { background: var(--ambar); color: var(--tinta); }
.drawer .btn { margin-top: 12px; }

/* ---------- 6. Portada ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--carbon); }

.hero__bg { position: absolute; inset: 0; z-index: -3; background: var(--carbon); overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* la foto se atenúa para que combine con el pastel del sitio, no para ocultarla */
  filter: saturate(.55) brightness(1.1) contrast(.95);
}

/* tablero perforado: puntos regulares, como una placa remachada de andén.
   El velo de degradado va con transparencia para que la foto de fondo
   se note debajo, teñida del mismo celeste pastel de la consola.        */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 65% at 88% 6%, rgba(204,132,85,.16) 0%, transparent 60%),
    radial-gradient(45% 55% at 6% 96%, rgba(92,143,115,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(163,184,224,.72) 0%, rgba(211,221,245,.5) 55%, rgba(195,209,240,.68) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(58,63,86,.08) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: .5;
}

/* portada de una sola columna: el título arriba a lo ancho, el
   tablero de anuncios abajo, como un cartel de estación */
.hero .wrap {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px);
  padding-block: clamp(48px, 7vw, 84px) clamp(90px, 11vw, 140px);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  border: 1px solid rgba(204,132,85,.55);
  color: var(--ambar-600); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px;
}
.hero__badge span:first-child {
  width: 7px; height: 7px; background: var(--ambar-600); animation: pulse 2.2s infinite;
}
.hero h1 {
  color: var(--tinta); font-size: clamp(38px, 7vw, 92px); line-height: .92; letter-spacing: -.01em;
  max-width: 20ch;
}
.hero h1 em {
  font-style: normal; color: var(--ambar-600);
}
.hero p {
  margin-top: 6px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18.5px);
  max-width: 62ch; line-height: 1.7;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px);
  margin-top: 8px; padding-top: 24px; border-top: 1px dashed rgba(58,63,86,.25);
}
.hero__stat strong {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(24px, 3vw, 34px);
  font-weight: 700; color: var(--ambar-600); letter-spacing: -.01em;
}
.hero__stat span { font-size: 12.5px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; letter-spacing: .03em; }

/* ---------- Horizonte: puente de celosía, señal y tren cruzando ---------- */
.horizonte {
  --h-puente: clamp(64px, 8vw, 104px);
  --y-via:   calc(var(--h-puente) * .58);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(var(--h-puente) + 56px);
  pointer-events: none; overflow: hidden;
}
.horizonte__dunas {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: var(--h-puente);
}
.horizonte__dunas .duna-lejana { fill: rgba(58,63,86,.07); }
.horizonte__dunas .duna-cerca  { fill: var(--papel); }
.horizonte__via {
  position: absolute; left: 0; right: 0;
  bottom: var(--y-via); height: 5px;
  background:
    linear-gradient(rgba(58,63,86,.35), rgba(58,63,86,.35)) 0 0 / 100% 1.5px repeat-x,
    repeating-linear-gradient(90deg, rgba(58,63,86,.22) 0 5px, transparent 5px 16px);
}
.horizonte__senal {
  position: absolute; right: clamp(18px, 6vw, 90px); bottom: calc(var(--y-via) + 6px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal-700);
  box-shadow: 0 0 10px 3px rgba(92,143,115,.7);
  animation: parpadeo 3.6s ease-in-out infinite;
}
@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.tren {
  position: absolute; bottom: calc(var(--y-via) + 2px);
  width: clamp(230px, 30vw, 430px); height: auto;
  color: var(--tinta); opacity: .9;
  transform: translateX(14%);
}
.tren--anda { animation: cruzar 50s linear infinite; }
@keyframes cruzar {
  from { transform: translateX(-40%); }
  to   { transform: translateX(140%); }
}

/* Tablero de anuncios: una franja angosta, tipo panel de salidas,
   NO una caja de carrusel — el mismo mecanismo de siempre (data-slider),
   con otra cara completamente distinta.                                */
.slider {
  position: relative; overflow: hidden;
  background: var(--carbon-2);
  border: 2px solid var(--ambar-600);
}
.slider__track { position: relative; min-height: 92px; }
.slide {
  position: absolute; inset: 0; display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 22px; padding: 16px clamp(18px, 3vw, 30px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide__tag {
  flex: none; padding: 5px 12px;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--tinta); color: var(--ambar-300);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.slide h2 {
  color: var(--tinta); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  font-size: clamp(13px, 1.6vw, 16px); font-weight: 600; letter-spacing: .02em; line-height: 1.3;
  flex: 1 1 320px; min-width: 0;
}
.slide p { display: none; } /* el tablero solo lleva una línea */
.slide a.slide__link {
  flex: none; color: var(--teal-700);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 12.5px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.slide a.slide__link:hover { color: var(--ambar-600); }
.slide a.slide__link svg { transition: transform .3s var(--ease); }
.slide a.slide__link:hover svg { transform: translateX(4px); }

.slider__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px clamp(18px, 3vw, 30px); border-top: 1px solid rgba(204,132,85,.3);
  background: var(--carbon-900);
}
.slider__dots { display: flex; gap: 6px; }
.slider__dots button {
  width: 18px; height: 4px; background: rgba(58,63,86,.2);
}
.slider__dots button[aria-selected="true"] { background: var(--ambar-600); }
.slider__arrows { display: flex; gap: 6px; }
.slider__arrows button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(58,63,86,.25); color: var(--tinta);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.slider__arrows button:hover { background: var(--ambar-600); border-color: var(--ambar-600); color: var(--papel); }

/* ---------- 6b. Estado de la red: tablero nuevo, inventado ----------
   Un semáforo por corredor, como el panel de un despachador.          */
.estado-red {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px; background: var(--tinta); border: 2px solid var(--tinta);
}
.estado-item {
  background: var(--papel); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
  transition: background-color .2s var(--ease);
}
.estado-item:hover { background: var(--papel-2); }
.estado-item__top { display: flex; align-items: center; gap: 10px; }
.estado-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.estado-dot--ok      { background: var(--teal-700);  box-shadow: 0 0 0 4px var(--teal-100); }
.estado-dot--alerta  { background: var(--ambar-600); box-shadow: 0 0 0 4px var(--ambar-100); }
.estado-dot--critico { background: var(--alerta);    box-shadow: 0 0 0 4px var(--alerta-100); }
.estado-item__top span {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.estado-item h3 { font-size: 17px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.estado-item p { font-size: 13.5px; color: var(--muted); }

/* ---------- 7. Accesos directos ---------- */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2px; background: var(--tinta); }
.acceso {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.acceso:hover { transform: translateY(-4px); filter: drop-shadow(var(--sombra)); }
.acceso__img {
  aspect-ratio: 21 / 9; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--tile-1), var(--tile-2));
  color: rgba(253,243,234,.7);
}
.acceso__img img { width: 100%; height: 100%; object-fit: cover; }
.acceso__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.acceso__body h3 { font-size: 18px; text-transform: uppercase; }
.acceso__body p { color: var(--muted); font-size: 14.5px; flex: 1; }
.acceso__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 12.5px; text-transform: uppercase; color: var(--teal-700);
}
.acceso__go svg { transition: transform .3s var(--ease); }
.acceso:hover .acceso__go svg { transform: translateX(4px); }

/* ---------- 8. Noticias ---------- */
.noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }
.noticia {
  display: flex; flex-direction: column; background: var(--papel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.noticia:hover { transform: translateY(-4px); filter: drop-shadow(var(--sombra)); }
.noticia__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(155deg, var(--tile-1), var(--tile-2));
}
.noticia__media img { width: 100%; height: 100%; object-fit: cover; }
.noticia__media--sin-foto {
  display: grid; place-items: center;
  color: rgba(253,243,234,.55);
}
.noticia__date {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; padding: 8px 10px;
  background: var(--tinta); color: var(--ambar-300);
  font-family: 'IBM Plex Mono', monospace; line-height: 1.05;
}
.noticia__date strong { font-size: 19px; font-weight: 700; }
.noticia__date span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.noticia__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chip {
  align-self: flex-start; padding: 4px 11px;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--tinta); color: var(--ambar-300);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.chip--cielo { background: var(--teal-700); color: var(--teal-100); }
.noticia__body h3 { font-size: 19px; line-height: 1.15; text-transform: uppercase; }
.noticia__body h3 a { color: inherit; }
.noticia__body h3 a:hover { color: var(--ambar-600); }
.noticia__body p { color: var(--muted); font-size: 15px; flex: 1; }
.noticia__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 12.5px; text-transform: uppercase; color: var(--teal-700);
}
.noticia__more svg { transition: transform .3s var(--ease); }
.noticia:hover .noticia__more svg { transform: translateX(4px); }

.noticia--destacada { grid-column: 1 / -1; flex-direction: row; }
.noticia--destacada .noticia__media { flex: 1 1 46%; aspect-ratio: auto; min-height: 300px; }
.noticia--destacada .noticia__body { flex: 1 1 54%; justify-content: center; padding: clamp(24px, 3vw, 44px); }
.noticia--destacada .noticia__body h3 { font-size: clamp(24px, 3vw, 34px); }

/* Paginacion */
.paginacion { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 13.5px;
  border: 2px solid var(--tinta); color: var(--tinta); background: var(--papel);
  transition: all .2s var(--ease);
}
.paginacion a:hover { background: var(--tinta); color: var(--papel); }
.paginacion .is-current { background: var(--ambar); border-color: var(--tinta); color: var(--tinta); }
.paginacion .dots { border: 0; background: none; }

/* ---------- 9. Cabecera de paginas internas ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(168deg, rgba(195,209,240,.78) 0%, rgba(211,221,245,.62) 58%, rgba(163,184,224,.8) 100%),
    url('../img/cabecera-interna.jpg') center 42% / cover no-repeat;
  color: var(--tinta);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(rgba(58,63,86,.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.page-hero .wrap { padding-block: clamp(36px, 5vw, 64px) clamp(96px, 12vw, 156px); }
.page-hero h1 { color: var(--tinta); font-size: clamp(32px, 5.5vw, 62px); }
.page-hero p { margin-top: 14px; color: var(--muted); max-width: 66ch; font-size: 17px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ambar-600); }
.breadcrumb span { color: var(--linea-2); }
.breadcrumb .is-current { color: var(--ambar-600); font-weight: 700; }

/* ---------- 9b. Noticia completa ---------- */
.page-hero .chip { background: var(--tinta); color: var(--ambar-300); margin-bottom: 14px; }
.not-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 22px; padding-top: 20px; border-top: 1px dashed rgba(58,63,86,.25);
}
.not-fecha {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
}
.not-fecha svg { color: var(--ambar-600); }
.not-compartir {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid rgba(58,63,86,.3); color: var(--tinta);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.not-compartir:hover { background: var(--ambar-600); border-color: var(--ambar-600); color: var(--papel); }

.not-portada {
  margin: 0 0 clamp(28px, 4vw, 44px);
  overflow: hidden; border: 2px solid var(--tinta);
}
.not-portada img { width: 100%; height: auto; display: block; }

.not-galeria { margin-top: clamp(40px, 6vw, 64px); }
.not-galeria h2 {
  font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 3px double var(--tinta); text-transform: uppercase;
}
.not-galeria__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.not-foto {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--tinta);
  transition: transform .2s var(--ease);
}
.not-foto:hover { transform: translateY(-3px); }
.not-foto img { width: 100%; height: 100%; object-fit: cover; }

.not-vecinas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--tinta);
  margin-top: clamp(40px, 6vw, 64px); border-top: 3px double var(--tinta); padding-top: 32px;
}
.not-vecina {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  background: var(--papel);
  transition: background-color .2s var(--ease);
}
.not-vecina:hover { background: var(--papel-2); }
.not-vecina span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-700);
}
.not-vecina strong {
  font-family: 'Big Shoulders Display', sans-serif; font-size: 18px; line-height: 1.2;
  color: var(--tinta); text-transform: uppercase; font-weight: 700;
}
.not-vecina--der { text-align: right; grid-column: 2; }
.not-volver { margin-top: 36px; display: flex; justify-content: center; }

.not-estado { min-height: 46svh; display: grid; place-items: center; }
.not-cargando {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 15.5px; font-weight: 600;
}
.not-rueda {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--linea); border-top-color: var(--ambar-600);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .not-vecinas { grid-template-columns: 1fr; }
  .not-vecina--der { text-align: left; grid-column: 1; }
  .not-galeria__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- 10. Contenido de texto ---------- */
.prose { font-size: 16.5px; line-height: 1.8; color: var(--tinta); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(23px, 2.8vw, 30px); margin-top: 2em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 3px double var(--tinta); }
.prose h3 { font-size: clamp(17px, 1.8vw, 19px); margin-top: 1.7em; color: var(--teal-700); font-family: 'IBM Plex Mono', monospace; }
.prose strong { color: var(--tinta); }
.prose ol, .prose ul { padding-left: 1.4rem; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--ambar-600); font-weight: 700; }
.prose__boton { margin-top: 1.8em; }
.prose blockquote {
  border-left: 4px solid var(--ambar-600); padding: 6px 0 6px 22px;
  color: var(--muted); font-size: 17.5px; font-style: italic;
}
.prose .articulo { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--teal-700); text-transform: uppercase; }

/* Layout con indice lateral */
.layout-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.toc {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--carbon); border: 2px solid var(--tinta); padding: 22px; color: var(--tinta);
}
.toc h2 { font-size: 12px; font-family: 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar-600); margin-bottom: 14px; }
.toc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: block; padding: 8px 10px; font-size: 13.5px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; color: var(--tinta); border-left: 3px solid transparent;
  transition: all .2s var(--ease);
}
.toc a:hover, .toc a.is-active { background: rgba(204,132,85,.16); border-left-color: var(--ambar-600); color: var(--ambar-600); }

/* Tarjeta de aviso */
.aviso {
  display: flex; gap: 16px; padding: 20px 22px;
  background: var(--ambar-100); border: 2px solid var(--tinta);
}
.aviso__icon {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--tinta); color: var(--ambar-300);
}
.aviso h3 { font-size: 16.5px; margin-bottom: 4px; text-transform: uppercase; }
.aviso p { font-size: 15px; color: var(--muted); }
.aviso--cielo { background: var(--teal-100); border-color: var(--teal-700); }
.aviso--cielo .aviso__icon { background: var(--teal-700); color: var(--teal-100); }
.aviso--cielo p { color: #33513f; }

/* ---------- 11. Grillas de tarjetas ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 2px; background: var(--tinta); }

/* Beneficios */
.beneficio {
  display: flex; flex-direction: column; background: var(--papel);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.beneficio:hover { transform: translateY(-4px); filter: drop-shadow(var(--sombra)); }
.beneficio img, .beneficio > div:first-child {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  background: linear-gradient(155deg, var(--tile-1), var(--tile-2));
}
.beneficio__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.beneficio__body h3 { font-size: 17px; text-transform: uppercase; }
.beneficio__body p { font-size: 14.5px; color: var(--muted); flex: 1; }
.beneficio__ir {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--teal-700);
}
.beneficio__ir svg { transition: transform .3s var(--ease); }
.beneficio:hover .beneficio__ir svg { transform: translateX(3px); }

.beneficio-intro {
  max-width: 74ch; margin-bottom: clamp(32px, 5vw, 52px);
  font-size: 17px; line-height: 1.75; color: var(--tinta);
}
.beneficio-intro p + p { margin-top: 1em; }
.beneficio-intro strong { color: var(--tinta); }
.beneficio-intro .btn { margin-top: 24px; }
.beneficio-intro small {
  display: block; margin-top: 12px; font-size: 13.5px; color: var(--muted);
}

/* Documentos */
.doc {
  display: flex; gap: 18px; align-items: center; padding: 20px;
  background: var(--papel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.doc:hover { transform: translateY(-3px); filter: drop-shadow(var(--sombra-sm)); }
.doc img, .doc > div:first-child {
  width: 88px !important; height: 88px !important; aspect-ratio: 1 / 1 !important;
  object-fit: cover; flex: none;
  background: linear-gradient(155deg, var(--tile-1), var(--tile-2));
}
.doc__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doc__body h3 { font-size: 16.5px; text-transform: uppercase; }
.doc__body p { font-size: 14px; color: var(--muted); }
.doc__ir {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--teal-700);
}
.doc__ir svg { transition: transform .3s var(--ease); }
.doc:hover .doc__ir svg { transform: translateX(3px); }

/* Hojas de documentos escaneados */
.hojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2px; background: var(--tinta); }
.hoja {
  margin: 0; display: flex; flex-direction: column;
  background: var(--papel);
}
.hoja > a {
  display: block; position: relative; background: var(--papel-2);
  border-bottom: 2px solid var(--tinta);
}
.hoja img {
  width: 100%; height: 220px; object-fit: cover; object-position: top center;
  display: block;
}
.hoja figcaption { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hoja figcaption h3 { font-size: 16px; line-height: 1.3; text-transform: uppercase; }
.hoja figcaption p { font-size: 14.5px; color: var(--muted); }
.hoja figcaption p:only-child { font-size: 15.5px; font-weight: 600; color: var(--tinta); }
.hoja figcaption::after {
  content: 'Toca para leerlo completo';
  margin-top: auto; padding-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--teal-700);
}
.hoja > a + figcaption::after, .hoja:not(:has(> a)) figcaption::after { content: none; }

/* Galerias: fichas del andén, "todavía sin foto" a propósito */
.galeria {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 190px; padding: 20px; overflow: hidden;
  background: linear-gradient(158deg, var(--tile-1) 0%, var(--tile-2) 100%);
  color: var(--papel); border: 1px solid rgba(204,132,85,.25);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.galeria:hover { transform: translateY(-4px); filter: drop-shadow(var(--sombra)); color: var(--papel); }
.galeria::before {
  content: ''; position: absolute; right: -16px; top: -16px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,217,194,.35), transparent 68%);
  transition: transform .4s var(--ease);
}
.galeria:hover::before { transform: scale(1.15); }
.galeria__icon {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(253,243,234,.12); border: 1px solid rgba(253,243,234,.25); margin-bottom: auto;
}
.galeria h3 { position: relative; color: var(--papel); font-size: 17px; margin-top: 16px; text-transform: uppercase; }
.galeria span { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ambar-300); text-transform: uppercase; }

/* Álbumes que ya tienen foto: la misma ficha, pero con la imagen real
   detrás, teñida con el mismo degradado oscuro que usan las fichas
   "todavía sin foto" — para que ambas convivan sin desentonar. */
.galeria--foto {
  background-image:
    linear-gradient(158deg, rgba(107,132,191,.68) 0%, rgba(71,88,138,.82) 100%),
    var(--foto);
  background-size: cover;
  background-position: center;
}

/* Directiva */
.directiva-foto {
  margin: 0 auto; max-width: 1000px; overflow: hidden;
  background: var(--papel); border: 2px solid var(--tinta);
}
.directiva-foto img { width: 100%; height: auto; display: block; }

.directivo {
  background: var(--papel); border: 2px solid var(--tinta); text-align: center;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.directivo:hover { transform: translateY(-4px); filter: drop-shadow(var(--sombra)); }
.directivo__photo {
  aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(158deg, var(--tile-1), var(--tile-2));
}
.directivo__photo img { width: 100%; height: 100%; object-fit: cover; }
.directivo__photo svg { color: rgba(253,243,234,.4); }
.directivo__body { padding: 18px 18px 22px; }
.directivo__cargo {
  display: inline-block; padding: 4px 12px; margin-bottom: 10px;
  background: var(--tinta); color: var(--ambar-300);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.directivo__body h3 { font-size: 17px; text-transform: uppercase; }
.directivo__body p { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Multimedia */
.video {
  overflow: hidden; border: 2px solid var(--tinta);
  background: var(--tile-2);
}
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video__caption { padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--papel); font-family: 'IBM Plex Mono', monospace; background: var(--tile-2); }

/* ---------- 12. Franja del andén ---------- */
.franja {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(56px, 8vw, 108px);
  background:
    repeating-linear-gradient(115deg, rgba(58,63,86,.035) 0 2px, transparent 2px 32px),
    linear-gradient(200deg, var(--carbon-900) 0%, var(--carbon-2) 60%, var(--carbon) 100%);
  color: var(--tinta); text-align: center;
}
.franja h2 { color: var(--tinta); font-size: clamp(28px, 4.6vw, 50px); max-width: 20ch; margin-inline: auto; text-transform: uppercase; }
.franja p { color: var(--muted); margin-top: 18px; font-size: 17.5px; max-width: 60ch; margin-inline: auto; }
.franja__cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px; margin-top: 48px; background: rgba(58,63,86,.12);
}
.franja__cifra { background: var(--papel); padding: 26px 18px; }
.franja__cifra strong {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700; letter-spacing: -.01em; color: var(--ambar-600);
}
.franja__cifra span { font-size: 13.5px; color: var(--muted); }
.franja__botones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 40px;
}

/* ---------- 13. Formulario ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; color: var(--tinta); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .02em; }
.field input, .field textarea, .field select {
  padding: 13px 16px; border: 2px solid var(--tinta);
  background: var(--papel); font-size: 15.5px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ambar-600); box-shadow: 3px 3px 0 var(--ambar);
}
.field small { font-size: 12.5px; color: var(--muted); }
.form__nota { font-size: 13.5px; color: var(--muted); }

.ad-trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.form__aviso {
  padding: 13px 16px; font-size: 14.5px; font-weight: 600;
  border: 2px solid transparent;
}
.form__aviso--ok     { background: var(--teal-100); border-color: var(--teal-700); color: #33513f; }
.form__aviso--error  { background: var(--alerta-100); border-color: var(--alerta); color: #7a4040; }
.form__aviso--espera { background: var(--papel-2); border-color: var(--linea); color: var(--muted); }

.contacto-info { display: flex; flex-direction: column; gap: 2px; background: var(--tinta); }
.contacto-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  background: var(--papel);
}
.contacto-item__icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--tinta); color: var(--ambar-300);
}
.contacto-item h3 { font-size: 14px; margin-bottom: 3px; text-transform: uppercase; }
.contacto-item p, .contacto-item a { font-size: 14.5px; color: var(--muted); }
.contacto-item a:hover { color: var(--ambar-600); }

/* ---------- 14. Franja CTA ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--carbon); border: 2px solid var(--ambar-600);
  padding: clamp(32px, 5vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
}
.cta-band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--ambar-600) 0 18px, transparent 18px 30px);
}
.cta-band h2 { color: var(--tinta); font-size: clamp(23px, 3.2vw, 34px); text-transform: uppercase; }
.cta-band p { color: var(--muted); margin-top: 10px; max-width: 52ch; }

/* ---------- 15. Pie ---------- */
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon-900) 100%);
  color: var(--tinta); padding-top: clamp(52px, 6vw, 76px);
}
.footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--ambar-600) 0 18px, transparent 18px 30px);
  opacity: .7;
}
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 48px);
  padding-bottom: 44px;
}
.footer h3 { color: var(--tinta); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--muted); font-size: 14.5px; }
.footer a:hover { color: var(--ambar-600); }
.footer__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.footer__brand img { width: 52px; height: 52px; border: 2px solid var(--ambar-600); background: var(--papel); }
.footer__brand strong { color: var(--tinta); font-family: 'Big Shoulders Display', sans-serif; font-size: 16px; line-height: 1.2; display: block; text-transform: uppercase; }
.footer__brand span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-600); }
.footer__desc { font-size: 14.5px; line-height: 1.7; max-width: 42ch; }
.footer__social { display: flex; gap: 8px; margin-top: 20px; }
.footer__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(58,63,86,.2); color: var(--tinta);
  transition: all .2s var(--ease);
}
.footer__social a:hover { background: var(--ambar-600); color: var(--papel); border-color: var(--ambar-600); transform: translateY(-3px); }
.footer__legal {
  border-top: 1px solid rgba(58,63,86,.18); padding-block: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 13px; font-family: 'IBM Plex Mono', monospace; color: var(--muted);
}
.footer__legal p { max-width: 70ch; }

/* Volver arriba */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ambar); color: var(--tinta); border: 2px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--tinta);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--tinta); color: var(--ambar-300); }

/* ---------- 16. Animacion de entrada ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 17. Riel de navegación en escritorio ----------
   A partir de 1081px, la cabecera deja de ser una barra horizontal
   y se convierte en un riel fijo a la izquierda, con la franja
   inferior (antes barra superior) anclada a su pie. Es la
   reubicación más grande del rediseño: la navegación entera cambia
   de sitio, no solo de color.                                      */
@media (min-width: 1081px) {
  html { scroll-padding-top: 24px; }

  .header {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
    z-index: 100; border-bottom: 0; border-right: 3px solid var(--ambar-600);
    overflow: hidden;
  }
  .header .wrap {
    flex-direction: column; align-items: flex-start; justify-content: center; height: 100%;
    padding: 30px 22px calc(var(--rail-pie) + 20px);
    overflow-y: auto; min-height: 0;
  }
  .brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav {
    flex-direction: column; align-items: stretch; width: 100%; gap: 2px;
    margin-top: 30px;
  }
  .nav a { padding: 12px 12px; text-align: left; }
  .nav a::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .nav .nav__cta { margin-left: 0; margin-top: 16px; width: 100%; }

  .topbar {
    position: fixed; left: 0; bottom: 0; width: var(--rail-w); height: var(--rail-pie);
    z-index: 101; border-top: 1px solid rgba(58,63,86,.2); overflow-y: auto;
  }
  .topbar .wrap {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 12px; height: 100%; min-height: 0; padding-block: 16px;
  }
  .topbar__left { align-items: flex-start; }
  .topbar__left span:last-child { font-size: 11.5px; line-height: 1.5; }
  .topbar__links { flex-direction: column; align-items: flex-start; gap: 10px; }

  main, .footer { margin-left: var(--rail-w); }

  .toc { top: 24px; }
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .layout-doc { grid-template-columns: 1fr !important; }
  .toc { position: static; }
  .noticia--destacada { flex-direction: column; }
  .noticia--destacada .noticia__media { min-height: 220px; }
  .topbar__links { display: none; }
}
@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .brand__name { font-size: 13px; max-width: 190px; }
  .doc { flex-direction: column; align-items: flex-start; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .not-vecinas { grid-template-columns: 1fr; }
}

/* ---------- 19. Accesibilidad e impresion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .horizonte .tren { transform: translateX(28%); }
}

@media print {
  .topbar, .header, .drawer, .to-top, .slider__nav, .cta-band, .footer__social, .horizonte { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  main, .footer { margin-left: 0 !important; }
}