@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* ==========================================================================
   Estación Garita — piezas compartidas de las páginas de e-garita.org
   (La Baja en Breve, La Migra Bilingüe, /sobre, /prensa).

   Se apoya en garita-v5.css (la identidad v5, copia de GARITA/identidad-v5)
   y solo agrega el layout que se repite entre páginas: la barra de la fila
   (GaritaTicker), el encabezado con El Telar, los banners, las etiquetas de
   ciudad y tema, y el pie. Las reglas del brief se respetan aquí también:
   cero border-radius, contorno de 2px, sombra dura sin blur, Martian Mono
   solo como evento (≥40px o ≤15px), mostaza nunca como texto sobre papel.
   ========================================================================== */


/* ---- Paleta completa (sistema de identidad, ago-2026) y navy profundo ----
   La v5 trae coral, mostaza, cielo y navy; el sistema de identidad de agosto
   (artifact «MorfemAI → Innovatlan → Estación Garita») agrega los secundarios
   de la medalla. Decisión de Jorge (2-oct-2026): que mande el navy profundo y
   que se mezclen más colores, no la página en negro. */
:root {
  --naranja: #E17F3E;
  --terracota: #D4693C;
  --cafe: #A66A3D;
  --polvo: #9FC8D9;
  --navy-profundo: #132A47;
  /* Innovatlán (Design System v1, sep-2026): solo dentro de sus banners. */
  --inn-barro: #E9DECD;
  --inn-tinta: #241B15;
  --inn-tinta-700: #4a3f33;
  --inn-tinta-500: #8b7f6f;
  --inn-claro: #EDE7DC;
  --inn-cobalto: #1D4ED8;
  --inn-cobalto-700: #173FAE;
  --inn-ocre: #DE9B33;
}
/* Modo oscuro: en vez de invertir a negro (tinta), la página se vuelve navy
   profundo. Las cajas y tarjetas siguen siendo papel. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fondo: var(--navy-profundo); --texto: var(--papel); --contorno: var(--papel); }
}
:root[data-theme="dark"] { --fondo: var(--navy-profundo); --texto: var(--papel); --contorno: var(--papel); }

/* Secciones de color extra (sin gradientes: un color plano por sección). */
.bg-naranja { background: var(--naranja); color: var(--tinta); }
.bg-profundo { background: var(--navy-profundo); color: var(--papel); }
.ola--naranja { background-color: var(--naranja); }
.ola--profundo { background-color: var(--navy-profundo); }
.ola--mostaza { background-color: var(--mostaza); }

/* La franja de la medalla: cuadros de la paleta bajo el encabezado. */
.franja-medalla { display: flex; height: 10px; }
.franja-medalla span { flex: 1; }
.franja-medalla span:nth-child(5n+1) { background: var(--coral); }
.franja-medalla span:nth-child(5n+2) { background: var(--mostaza); }
.franja-medalla span:nth-child(5n+3) { background: var(--cielo); }
.franja-medalla span:nth-child(5n+4) { background: var(--naranja); }
.franja-medalla span:nth-child(5n+5) { background: var(--navy); }

/* ---- La fila: GaritaTicker (datos reales de CBP vía /api/garitas) ---- */
.garita-ticker {
  background: var(--tinta);
  border-bottom: 3px solid var(--mostaza);
  overflow: hidden;
  white-space: nowrap;
}
.garita-ticker[hidden] { display: none; }
.garita-ticker__track {
  display: inline-flex;
  width: max-content;
  animation: garita-ticker-scroll 42s linear infinite;
}
.garita-ticker:hover .garita-ticker__track,
.garita-ticker:focus-within .garita-ticker__track { animation-play-state: paused; }
@keyframes garita-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .garita-ticker__track { animation: none; overflow-x: auto; }
}
.garita-ticker__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px;
  color: var(--mostaza); border-right: 1px solid #333;
}
.garita-ticker__min { color: var(--papel); }
.garita-ticker__fuente { color: #b9b2a5; }

/* ---- Encabezado con el logo real ---- */
.encabezado {
  background: var(--fondo);
  border-bottom: 2px solid var(--contorno);
  padding: 14px 0;
}
.encabezado__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.marca { color: var(--texto); }
.marca__logo--cuadro { display: none; }
@media (max-width: 640px) {
  .marca__logo--telar { display: none; }
  .marca__logo--cuadro { display: block; }
}
.nav { display: flex; gap: 20px; flex-wrap: wrap; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---- Banners de Innovatlán, con SU Design System (v1, sep-2026; extracto en
   marca/innovatlan-design-system.md): tipografía sobre barro, sin cajas, sin
   bordes ni sombras, radio 2px, todo a la izquierda, un solo cobalto (el
   botón), wordmark sin acento con el trazo largo. Variante «tinta» para
   fondos claros: wordmark inverso con trazo ocre y botón ocre. ---- */
.franja-banner { padding-top: 22px; padding-bottom: 10px; }
.anuncio {
  display: block; text-decoration: none; border-radius: 2px;
  background: var(--inn-barro); color: var(--inn-tinta);
  padding: clamp(20px, 3vw, 32px) clamp(18px, 3.4vw, 40px);
  font-family: "Source Serif 4", Georgia, serif; text-align: left;
}
.anuncio__etiqueta {
  display: block; margin-bottom: 14px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--inn-tinta-500);
}
.anuncio__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; }
@media (max-width: 760px) { .anuncio__fila { grid-template-columns: 1fr; } }
/* Wordmark: el trazo largo es la tilde de la á (innovatlán). */
.wm {
  position: relative; display: inline-block; font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; font-size: 22px; margin: 4px 0 16px;
}
.wm-acento {
  position: absolute; right: -.06em; top: -.2em; width: 1.42em; height: .115em; border-radius: .06em;
  background: var(--inn-cobalto); transform: rotate(-13deg); transform-origin: 100% 50%;
}
/* El trazo ES la tilde de la á: va en color (cobalto sobre barro, ocre sobre tinta)
   para que se lea como acento, como en el logo (decisión de Jorge, 2-oct-2026). */
.anuncio__titulo {
  display: block; margin: 0 0 0 -.04em; max-width: 26ch; text-wrap: balance;
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-weight: 900;
  font-size: max(22px, min(3vw, 34px)); line-height: 1.04; letter-spacing: -.03em;
}
.anuncio__gancho {
  display: block; margin-top: 10px; max-width: 46ch;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: max(19px, min(2vw, 24px)); line-height: 1.16; letter-spacing: -.01em; color: var(--inn-tinta-700);
}
.anuncio__accion { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.anuncio__boton {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 2px;
  background: var(--inn-cobalto); color: #fff; font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600; font-size: 17px; line-height: 1; white-space: nowrap; transition: background .15s ease;
}
.anuncio:hover .anuncio__boton { background: var(--inn-cobalto-700); }
.anuncio__sistema { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .02em; line-height: 1.5; }
.anuncio__sistema span { display: block; color: var(--inn-tinta-700); }
.anuncio__sistema span + span { color: var(--inn-tinta-500); }
/* Variante tinta (sobre fondos claros): wordmark inverso con trazo ocre,
   botón ocre con texto tinta. Nunca cobalto sobre tinta. */
.anuncio--tinta { background: var(--inn-tinta); color: var(--inn-claro); }
.anuncio--tinta .wm-acento { background: var(--inn-ocre); }
.anuncio--tinta .anuncio__gancho, .anuncio--tinta .anuncio__sistema span { color: #c9bfae; }
.anuncio--tinta .anuncio__sistema span + span, .anuncio--tinta .anuncio__etiqueta { color: #B9AE9C; }
.anuncio--tinta .anuncio__boton { background: var(--inn-ocre); color: var(--inn-tinta); }
.anuncio--tinta:hover .anuncio__boton { background: #A96F1C; color: var(--inn-claro); }
/* Compacto (chat): sin las dos líneas de sistema, título más chico. */
.anuncio--compacto { padding: 16px 20px; }
.anuncio--compacto .wm { font-size: 19px; margin-bottom: 10px; }
.anuncio--compacto .anuncio__titulo { font-size: 21px; }
.anuncio--compacto .anuncio__gancho { font-size: 18px; margin-top: 6px; }
.anuncio--compacto .anuncio__sistema { display: none; }

/* ---- Etiquetas de ciudad y tema (Registro 03, datos verificables) ---- */
.etiqueta {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; line-height: 1.3; white-space: nowrap;
}
/* Ciudad: relleno de color (paleta de la medalla). Mostaza lleva texto tinta. */
.c-tijuana        { background: var(--coral);   color: var(--papel); }
.c-mexicali       { background: var(--mostaza); color: var(--tinta); }
.c-ensenada       { background: var(--cielo);   color: var(--tinta); }
.c-tecate         { background: var(--navy);    color: var(--papel); }
.c-rosarito       { background: var(--tinta);   color: var(--papel); }
.c-san-quintin, .c-san-felipe { background: var(--cielo); color: var(--tinta); }
.c-baja-california { background: var(--track); color: var(--tinta); }
/* Tema: contorno, sin relleno — para que nunca compita con la ciudad. */
.t-narco, .t-corrupcion, .t-seguridad, .t-politica, .t-general {
  border: 2px solid var(--contorno); color: var(--texto); padding: 2px 7px;
}

/* ---- Pie ---- */
.pie { padding: 48px 0 40px; text-align: center; }
.pie__lockup { display: flex; justify-content: center; margin-bottom: 22px; }
.pie__lockup .logo-lockup-v { align-items: center; }
.pie__tagline { margin-bottom: 16px; color: var(--mostaza); }
.pie__legal { max-width: 70ch; margin: 0 auto; opacity: 0.85; font-size: 14px; }
.pie a { color: var(--papel); }

/* Encabezado en navy profundo (chat, /sobre, /prensa), igual que la portada. */
.encabezado--profundo { background: var(--navy-profundo); border-bottom: none; }
.encabezado--profundo .marca, .encabezado--profundo .logo-lockup-h__wordmark,
.encabezado--profundo .nav a { color: var(--papel); }