/* ==========================================================================
   Estación Garita — hoja compartida del sitio público
   Identidad v5: contornos duros, sombra troquelada, cero radios.
   La mono es EVENTO (cifras, etiquetas, datos), no el default.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@700;800&family=Barlow:wght@400;500;600;700;800&display=swap");

:root{
  --coral:#DC5A46;   /* Tijuana / AFN */
  --mostaza:#EFCB4E; /* Mexicali / Brújula */
  --cielo:#6BA3C0;   /* Ensenada / El Vigía */
  --navy:#1F3A5F;
  --tinta:#111111;
  --papel:#f6f1ea;
  --track:#e8e4db;
  --gris:#8a8478;

  --fondo:var(--papel);
  --texto:var(--tinta);
  --contorno:var(--tinta);

  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --sans:"Barlow",-apple-system,"Segoe UI",Roboto,sans-serif;
  --off:8px;
  --ancho:1080px;
}

@media (prefers-color-scheme:dark){
  :root{ --fondo:var(--tinta); --texto:var(--papel); --contorno:var(--papel); --track:#2a2a2a; }
}
:root[data-tema="oscuro"]{ --fondo:var(--tinta); --texto:var(--papel); --contorno:var(--papel); --track:#2a2a2a; }
:root[data-tema="claro"]{ --fondo:var(--papel); --texto:var(--tinta); --contorno:var(--tinta); --track:#e8e4db; }

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }

body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- cinta superior ---------- */
.cinta{ background:var(--navy); color:var(--papel); padding:5px 0; overflow:hidden; }
.cinta span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
             white-space:nowrap; padding-left:100%; display:inline-block;
             animation:corre 38s linear infinite; }
@keyframes corre{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .cinta span{ animation:none; padding-left:16px; } }

/* ---------- barra de navegación ---------- */
.barra{ border-bottom:2px solid var(--contorno); position:sticky; top:0; z-index:40;
        background:var(--fondo); }
.barra-int{ max-width:var(--ancho); margin:0 auto; padding:12px 18px;
            display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.marca{ font-family:var(--mono); font-weight:800; font-size:13px; letter-spacing:.06em;
        text-transform:uppercase; text-decoration:none; }
.barra nav{ display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.barra nav a{ font-size:14.5px; font-weight:600; text-decoration:none; padding-bottom:2px;
              border-bottom:2px solid transparent; }
.barra nav a:hover,.barra nav a[aria-current]{ border-bottom-color:var(--coral); }

.idioma{ display:flex; border:2px solid var(--contorno); }
.idioma button{ font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.1em;
                padding:5px 9px; border:none; background:none; color:var(--texto); cursor:pointer; }
.idioma button[aria-pressed="true"]{ background:var(--contorno); color:var(--fondo); }

/* ---------- estructura ---------- */
.marco{ max-width:var(--ancho); margin:0 auto; padding:34px 18px 80px; }
.angosto{ max-width:70ch; }

/* ---------- tipografía ---------- */
h1{ font-family:var(--mono); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
    font-size:clamp(30px,6vw,58px); line-height:1.03; margin:22px 0 14px; }
h2{ font-family:var(--sans); font-weight:800; font-size:clamp(22px,3.2vw,31px);
    line-height:1.18; margin:44px 0 12px; letter-spacing:-.01em; }
h3{ font-family:var(--sans); font-weight:700; font-size:20px; margin:30px 0 8px; }
p{ margin:0 0 18px; }
.entrada{ font-size:20px; line-height:1.55; max-width:62ch; }
blockquote{ margin:26px 0; padding:2px 0 2px 20px; border-left:5px solid var(--mostaza);
            font-size:19px; font-weight:500; }
.etiqueta{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.17em;
           text-transform:uppercase; color:var(--gris); display:block; margin-bottom:10px; }
.credito{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gris); }

/* ---------- cajas troqueladas ---------- */
.caja{ border:2px solid var(--contorno); background:var(--fondo);
       box-shadow:var(--off) var(--off) 0 var(--contorno); padding:22px; margin:26px 0; }
.caja.coral{ box-shadow:var(--off) var(--off) 0 var(--coral); }
.caja.mostaza{ box-shadow:var(--off) var(--off) 0 var(--mostaza); }
.caja.cielo{ box-shadow:var(--off) var(--off) 0 var(--cielo); }

/* ---------- cifras ---------- */
.cifras{ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-end; }
.cifra{ font-family:var(--mono); font-weight:800; font-size:clamp(30px,5vw,48px);
        line-height:1; letter-spacing:-.03em; }
.cifra small{ display:block; font-family:var(--sans); font-weight:600; font-size:13px;
              letter-spacing:0; text-transform:none; color:var(--gris); margin-top:7px; }

/* ---------- el hallazgo: dos columnas enfrentadas ---------- */
.duelo{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid var(--contorno);
        margin:28px 0; box-shadow:var(--off) var(--off) 0 var(--contorno); }
.duelo > div{ padding:22px; }
.duelo > div:first-child{ border-right:2px solid var(--contorno); }
.duelo .bandera{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.12em;
                 text-transform:uppercase; margin-bottom:12px; display:block; }
.duelo .es .bandera{ color:var(--coral); }
.duelo .en .bandera{ color:var(--cielo); }
.duelo .dijo{ font-size:17px; font-weight:600; line-height:1.45; }
.duelo .dijo em{ font-weight:400; color:var(--gris); font-style:normal; font-size:14.5px;
                 display:block; margin-top:10px; }
@media (max-width:720px){
  .duelo{ grid-template-columns:1fr; }
  .duelo > div:first-child{ border-right:none; border-bottom:2px solid var(--contorno); }
}

/* ---------- tarjetas de entrada ---------- */
.rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }
.tarjeta{ border:2px solid var(--contorno); padding:20px; text-decoration:none; display:block;
          background:var(--fondo); transition:transform .12s, box-shadow .12s; }
.tarjeta:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--coral); }
.tarjeta .num{ font-family:var(--mono); font-weight:800; font-size:12px; color:var(--coral);
               letter-spacing:.1em; }
.tarjeta h3{ margin:8px 0 6px; font-size:19px; }
.tarjeta p{ font-size:15px; margin:0; color:var(--gris); }

/* ---------- galería de evidencia ---------- */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.galeria figure{ margin:0; border:2px solid var(--contorno); }
.galeria img{ width:100%; cursor:zoom-in; }
.galeria figcaption{ font-family:var(--mono); font-size:10px; padding:7px 9px;
                     border-top:2px solid var(--contorno); color:var(--gris); }

/* ---------- tabla ---------- */
table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:15.5px; }
th,td{ border:2px solid var(--contorno); padding:10px 12px; text-align:left; vertical-align:top; }
th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    background:var(--track); }
:root[data-tema="oscuro"] th,
@media (prefers-color-scheme:dark){ th{ background:var(--track); } }

/* ---------- botones ---------- */
.boton{ display:inline-block; font-family:var(--mono); font-size:12px; font-weight:800;
        letter-spacing:.1em; text-transform:uppercase; padding:14px 22px; text-decoration:none;
        border:2px solid var(--contorno); background:var(--coral); color:#fff;
        box-shadow:3px 3px 0 var(--contorno); }
.boton:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--contorno); }
.boton.fantasma{ background:transparent; color:var(--texto); }

/* ---------- pie ---------- */
.pie{ border-top:2px solid var(--contorno); margin-top:60px; padding:26px 0 40px;
      font-size:14px; color:var(--gris); }
.pie a{ color:inherit; }

/* ---------- bilingüe: se muestra solo el idioma activo ---------- */
[data-idioma]{ display:none; }
:root[lang="es"] [data-idioma="es"],
:root[lang="en"] [data-idioma="en"]{ display:revert; }

/* ---------- visor de imagen ---------- */
.visor{ position:fixed; inset:0; background:rgba(17,17,17,.94); z-index:90;
        display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.visor img{ max-width:100%; max-height:92vh; border:2px solid var(--papel); }
.visor[hidden]{ display:none; }

/* ==========================================================================
   CAPA BRIEF — recursos tomados de projetobrief.com, adaptados a la v5.
   No se copia su paleta (ellos van a negro+amarillo puro); se toman sus
   DISPOSITIVOS, que resultan compatibles porque la v5 ya trae mostaza y navy.
   ========================================================================== */

/* ---- el guion bajo como firma ----
   Su recurso más distintivo: "causas_". En Martian Mono queda mejor que en su
   propia tipografía, porque la mono ya insinúa terminal y cursor. */
.guion::after{
  content:"_";
  color:var(--coral);
  font-weight:800;
  animation:parpadeo 1.3s step-end infinite;
}
@keyframes parpadeo{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .guion::after{ animation:none; } }

/* ---- la cifra enorme, sin caja ----
   Ellos las ponen a 48-64px, alineadas a la izquierda, sin recuadro ni adorno.
   El dato ES el elemento gráfico; meterlo en una caja lo debilita. */
.dato{ margin:40px 0; max-width:34ch; }
.dato .n{
  font-family:var(--mono); font-weight:800;
  font-size:clamp(46px,9vw,88px); line-height:.92; letter-spacing:-.045em;
  display:block;
}
.dato .n.coral{ color:var(--coral); }
.dato .n.cielo{ color:var(--cielo); }
.dato .n.mostaza{ color:var(--mostaza); }
.dato p{ font-size:17px; line-height:1.45; margin:14px 0 0; max-width:30ch; }

.datos-fila{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
             gap:30px; margin:42px 0; }
.datos-fila .dato{ margin:0; }

/* ---- marcador amarillo ----
   Su caja de resaltado, hecha con degradado para que el trazo termine en la
   línea base y no rodee la palabra como una etiqueta. */
.marca{
  background:linear-gradient(transparent 58%, var(--mostaza) 58%, var(--mostaza) 94%, transparent 94%);
  padding:0 2px; font-weight:600;
}
:root[data-tema="oscuro"] .marca,
:root:not([data-tema="claro"]) .marca{ color:var(--tinta); }
@media (prefers-color-scheme:light){ :root:not([data-tema="oscuro"]) .marca{ color:inherit; } }

/* ---- sección oscura a sangre ----
   Rompe el ritmo del papel. Ellos la usan para el hero y para los cortes. */
.oscuro{ background:var(--navy); color:var(--papel); padding:62px 0; margin:56px 0; }
.oscuro .marco{ padding-top:0; padding-bottom:0; }
.oscuro h2{ margin-top:0; }
.oscuro .etiqueta{ color:var(--mostaza); }
.oscuro .dato .n{ color:var(--mostaza); }
.oscuro a{ color:var(--mostaza); }

/* ---- pasos numerados ----
   Círculos 01, 02, 03 — lo único redondo que la v5 se permite, y a propósito:
   funciona como excepción porque todo lo demás es esquina viva. */
.pasos{ list-style:none; padding:0; margin:34px 0; counter-reset:paso; }
.pasos li{ counter-increment:paso; display:flex; gap:18px; margin-bottom:26px;
           align-items:flex-start; }
.pasos li::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--mono); font-weight:800; font-size:13px;
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  border:2px solid var(--contorno); display:grid; place-items:center;
}
.pasos li b{ display:block; margin-bottom:4px; font-size:17.5px; }
.pasos li span{ font-size:15.5px; color:var(--gris); }
.oscuro .pasos li::before{ border-color:var(--mostaza); color:var(--mostaza); }
.oscuro .pasos li span{ color:#c9c3b6; }

/* ---- acordeón ----
   Su "clique para ver": parte los bloques densos sin esconder información. */
details.plegable{ border-top:2px solid var(--contorno); padding:16px 0; }
details.plegable:last-of-type{ border-bottom:2px solid var(--contorno); }
details.plegable summary{ cursor:pointer; font-weight:700; font-size:17px;
                          list-style:none; display:flex; justify-content:space-between;
                          gap:16px; align-items:center; }
details.plegable summary::-webkit-details-marker{ display:none; }
details.plegable summary::after{ content:"+"; font-family:var(--mono); font-weight:800;
                                 font-size:20px; color:var(--coral); }
details.plegable[open] summary::after{ content:"\2212"; }
details.plegable > *:not(summary){ margin-top:14px; font-size:16px; }

/* ---- regla fina de sección ---- */
.regla{ border:none; border-top:2px solid var(--contorno); margin:52px 0; }