@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,900&family=Instrument+Serif:ital@0;1&family=Source+Serif+4:opsz,wght@8..60,600&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 (innovatlan.com): solo dentro de sus banners. */
  --inn-barro: #E9DECD;
  --inn-tinta: #241B15;
  --inn-cobalto: #1D4ED8;
}
/* 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: su propia marca (innovatlan.com) dentro de la
   nuestra — fondo barro, wordmark en Fraunces 900 con el acento cobalto, frase
   en Instrument Serif. El contorno y la sombra dura cobalto son el puente con
   la v5. Siempre dicen «Patrocinado». ---- */
.franja-banner { padding-top: 22px; padding-bottom: 10px; }
.anuncio {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: var(--inn-barro); color: var(--inn-tinta); text-decoration: none;
  border: 2px solid var(--inn-tinta); box-shadow: 7px 7px 0 var(--inn-cobalto);
  padding: 18px 22px; position: relative;
}
.anuncio:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--inn-cobalto); }
.anuncio__etiqueta {
  position: absolute; top: -11px; left: 16px; background: var(--inn-tinta); color: var(--inn-barro);
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px;
}
.anuncio__marca {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; font-weight: 900;
  font-size: 26px; letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
.anuncio__a { position: relative; display: inline-block; }
.anuncio__acento {
  position: absolute; left: 50%; top: -.06em; width: .13em; height: .3em; border-radius: .035em;
  background: var(--inn-cobalto); transform: translateX(-40%) rotate(22deg);
}
.anuncio__titulo {
  display: block; font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144;
  font-weight: 900; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.12; letter-spacing: -.02em;
}
.anuncio__texto {
  display: block; margin-top: 6px; font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.25; color: #4a3f33;
}
.anuncio__boton {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 16px; white-space: nowrap;
  background: var(--inn-cobalto); color: #fff; padding: 13px 20px; border-radius: 2px;
}
@media (max-width: 760px) {
  .anuncio { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px 18px; }
  .anuncio__boton { justify-self: start; }
}
.anuncio--compacto { padding: 14px 18px; gap: 16px; }
.anuncio--compacto .anuncio__marca { font-size: 20px; }
.anuncio--compacto .anuncio__titulo { font-size: 18px; }
.anuncio--compacto .anuncio__texto { font-size: 16px; }
.anuncio--compacto .anuncio__boton { padding: 10px 16px; font-size: 15px; }

/* ---- 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); }