/* ============================================================
   Copernicus · Panel — Manual de marca
   Azul Cosmos #0E1A2B · Dorado Solar #D9A441 · Papel Hueso #F4EFE6
   Display: Jost (Futura-like) · Texto: Inter
   Carga DESPUÉS del <style> inline de cada panel → gana cascada.
   Remapea los tokens heredados (--teal/--cyan/--leaf/--amber…). Datos/JS intactos.
   ============================================================ */

:root{
  /* remap de tokens heredados → todo lo que los use vira solo */
  --navy:#0E1A2B; --navy-2:#0A1420;
  --teal:#D9A441; --teal-2:#D9A441; --cyan:#D9A441; --leaf:#D9A441; --amber:#D9A441;
  --muted:#7E8894; --line:rgba(244,239,230,.10);
  /* tokens del sistema */
  --bg:#0E1A2B; --bg-2:#0A1420; --surface:#16273B; --surface-2:#1B2E44;
  --ink:#F4EFE6; --ink-2:#B7C0CC; --line-2:rgba(244,239,230,.18);
  --signal:#D9A441; --signal-2:#E6B45A; --signal-ink:#12100A;
}

/* ---- base ---- */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink-2);
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:48px 48px;
}
a{color:var(--signal)}
main{position:relative; z-index:1}

/* ---- tipografía: Jost (display) + Inter (texto) ---- */
h1,h2,h3,.method h3,.norm .n b{font-family:'Jost','Inter',sans-serif; letter-spacing:-.005em}
h1,h2{color:var(--ink)}
.lead,.desc,.sub,.note,.meta,.foot,.tile .v,.tile .k,.num,figcaption,
.tl-yr,.tl-meta,.tl-scale,.method .val{font-family:'Inter',sans-serif}
/* labels en versalitas geométricas */
.kicker,.eyebrow,.badge,.lab,.method .lab,thead th,.vtag,.maps-link{
  font-family:'Jost','Inter',sans-serif;
}

/* ---- header / marca ---- */
header{background:rgba(14,26,43,.82); border-bottom:1px solid var(--line)}
/* wordmark integrado: el monograma ES la C inicial → "Ⓒopernicus" */
.brand{color:var(--ink); font-family:'Jost','Inter',sans-serif; font-weight:600;
  text-transform:none; letter-spacing:-.005em; font-size:19px; gap:0 !important}
.brand .mark{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.6 5.5 A8 8 0 1 0 16.6 18.5' stroke='%23F4EFE6' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.3' fill='%23D9A441'/%3E%3C/svg%3E") center/contain no-repeat !important;
  width:1.04em !important; height:1.04em !important; margin-right:-.07em !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
}
.brand .mark::after{ display:none !important; }
/* topper: logo idéntico al hero del home (svg crescent + wordmark en mayúsculas) */
header .brand{ text-transform:uppercase !important; letter-spacing:.2em !important; font-weight:500 !important; font-size:15px !important; gap:11px !important; }
header .brand svg{ width:26px !important; height:26px !important; flex:0 0 auto; }
/* "C" legible para bots y lectores de pantalla — el monograma la reemplaza visualmente */
.sr-c{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.back{color:var(--muted); font-family:'Inter',sans-serif}
.back:hover{color:var(--signal)}

/* ---- footer (replicado del home) ---- */
footer{background:var(--bg-2); color:var(--muted); padding:38px 0 22px; border-top:1px solid var(--line);
  position:relative; z-index:1; font-size:14px; font-family:'Inter',sans-serif}
footer .wrap{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px}
footer .brand{font-size:16px; font-weight:600}
footer a{text-decoration:none}
footer .fine{font-size:12.5px; color:var(--muted); max-width:46ch; margin-top:12px; line-height:1.55}
footer .foot-right{text-align:right}
footer a.mailto{color:var(--ink-2)}
footer a.mailto:hover{color:var(--signal)}
footer .foot-copy{margin-top:8px}
footer .foot-agneo{margin-top:6px; font-size:12.5px}
footer .agneo{color:var(--signal)}
footer .disclaimer{max-width:1120px; margin:20px auto 0; padding:14px 24px 0; border-top:1px solid var(--line);
  text-align:center; font-size:9.5px; line-height:1.5; color:var(--muted); opacity:.68}

/* ---- labels de instrumento ---- */
.kicker{color:var(--signal); font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.kicker::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--signal); margin-right:9px; vertical-align:middle}
.eyebrow,.badge{
  color:var(--signal); background:rgba(217,164,65,.09);
  border:1px solid rgba(217,164,65,.30); border-radius:3px;
  text-transform:uppercase; letter-spacing:.14em; font-weight:500;
}

/* ---- superficies (cards, figuras, charts, timeline) ---- */
.card,.chart,.tl,.method,figure,.tile,.norm .n{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
}
.fieldgrid figure{border-radius:6px}
.tile .v{color:var(--ink)}
.tile.accent .v{color:var(--signal)}
.tile .k{color:var(--muted)}

/* método / alcance */
.method h3{color:var(--ink)}
.method .lab{color:var(--signal); font-weight:500; letter-spacing:.1em; text-transform:uppercase}
.method .val{color:var(--ink-2)}
.method .val b{color:var(--ink)}
.method .warn{
  background:rgba(217,164,65,.06); border:1px solid rgba(217,164,65,.22);
  color:var(--ink-2); border-radius:6px;
}

/* figuras */
figure img{background:#081320}
figcaption{border-top:1px solid var(--line); color:var(--muted)}
figcaption b{color:var(--ink-2)}
.expand{
  border:1px solid rgba(217,164,65,.40); background:rgba(10,20,32,.62);
  color:var(--signal); border-radius:6px;
}

/* norma / grid */
.norm .n b{color:var(--ink)}
.norm .n p{color:var(--muted)}

/* botones */
.btn{
  background:var(--signal); color:var(--signal-ink); border:none;
  border-radius:4px; font-weight:600; font-family:'Inter',sans-serif;
}
.btn:hover{background:var(--signal-2)}
.btn.ghost{
  background:rgba(217,164,65,.08); color:var(--signal);
  border:1px solid rgba(217,164,65,.35);
}
.btn.dis{background:var(--surface); color:var(--muted); border:1px solid var(--line)}

/* tabla (panel index) */
.card{overflow:hidden}
thead th{color:var(--signal); border-bottom:1px solid var(--line); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase}
tbody td{border-bottom:1px solid rgba(244,239,230,.06)}
tbody tr:hover{background:rgba(217,164,65,.04)}
.barrio{color:var(--ink)}
.pill.proc{color:var(--muted); background:rgba(244,239,230,.05); border:1px solid var(--line)}

/* timeline (lomacampana) */
.tl-stage,.tl-stage img{background:#081320}
.tl-yr{color:var(--ink); font-family:'Jost','Inter',sans-serif}
.tl-meta{color:var(--ink-2); background:rgba(10,20,32,.6); border-radius:4px}
.tl-ctrl{border-top:1px solid var(--line)}
.tl-ctrl button{
  border:1px solid rgba(217,164,65,.35); background:rgba(217,164,65,.08);
  color:var(--signal); border-radius:4px; font-family:'Inter',sans-serif;
}
.tl-ctrl input[type=range]{accent-color:var(--signal)}

/* charts / leyendas */
.chart{padding:20px 18px 10px}
.lgd{color:var(--muted)}

/* link a Google Maps (sección Localización) */
.maps-link{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 18px;
  font-size:12px; color:var(--signal); text-decoration:none; opacity:.9;
  letter-spacing:.04em; transition:opacity .14s;
}
.maps-link:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.maps-link svg{width:13px; height:13px; flex:0 0 auto}
.maps-link .co{color:var(--muted); letter-spacing:.02em}

/* lockup inline: símbolo + nombre en el cuerpo (presencia de marca) */
.cx{display:inline-flex; align-items:baseline; gap:.32em; font-weight:600; color:var(--ink); white-space:nowrap}
.cx svg{width:.82em; height:.82em; align-self:center; flex:0 0 auto}

@media (max-width:720px){
  body{background-size:40px 40px}
}