:root{
  /* Marca */
  --grad-1:#4B2E83;
  --grad-2:#000000;
  --gold:#D4AF37;
  --ink:#0B0F14;
  --muted:#6C7283;
  --card:#ffffff;
  --soft:#F7F8FB;
  --line:#E6E8EE;
  --stroke:#2456A6;

  /* Nodos claros */
  --violet:#C1B5F6; /* A,B,C,D */
  --lime:#CBEA7B;   /* E,F,G,H */
  --sun:#B6EA8B;    /* I (verde +) */
  --lav:#D9C9FF;    /* J */
  --red:#FFC1C1;    /* banda baja */
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--soft);color:var(--ink)}

/* Hero (arregla la pérdida de fondo) */
.hero{
  background:linear-gradient(270deg,var(--grad-1) 0%, var(--grad-2) 74%);
  color:#fff;
  padding:56px 20px 36px;
  min-height:190px; /* asegura visibilidad del gradiente */
}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
h1{font-weight:800;letter-spacing:.2px;margin:0 0 8px;font-size:clamp(26px,4vw,40px)}
.lead{opacity:.9;margin:0 0 20px}

/* Formulario */
.form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.field{position:relative;flex:1 1 340px}
.field-date{max-width:260px}
.field input{
  width:100%;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;padding:0 14px;outline:none;
  backdrop-filter:blur(3px)
}
.field input::placeholder{color:rgba(255,255,255,.75)}
.btn{height:48px;border-radius:10px;border:0;padding:0 20px;font-weight:600;cursor:pointer}
.btn-primary{background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn i{font-style:normal;margin-right:8px}

/* Tarjetas y secciones */
section{margin:28px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 28px rgba(17,24,39,.08)}
.pad{padding:16px}
.title-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.title-row h2{margin:0;font-size:20px}
.audio-btn{display:inline-flex;gap:6px;align-items:center;font-weight:600;border-radius:999px;padding:6px 12px;background:#fff;border:1px solid var(--line);cursor:pointer}
.audio-btn svg{width:16px;height:16px}
.hidden{display:none !important}

/* Intro */
.introBox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px}
.introTitle{font-weight:700;font-size:20px}

/* 3 principales */
.main3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px}
.numCard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px}
.numCard .big{font-size:48px;font-weight:800;color:#1f2937;line-height:1}
.numCard .subtitle{font-weight:700;margin-top:6px}
.numCard p{margin:8px 0 0;color:var(--muted);font-size:14px}
.numCard.active{box-shadow:0 0 0 2px var(--gold) inset}

/* 7 principales */
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px}
.chip{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:12px;cursor:pointer;display:flex;gap:8px;align-items:center}
.chip .v{font-weight:800}
.chip.active{box-shadow:0 0 0 2px var(--gold) inset}
details{border-top:1px dashed var(--line)}
summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
details[open] summary{background:#FFF7E6}
.desc{padding:0 16px 16px 16px;color:#374151}

/* MAPA */
#pinaculoSvg{margin-left: -58px;overflow: initial;}
.mapGrid{display:grid;grid-template-columns:1fr 380px;gap:16px;padding:12px}
.canvasWrap{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.watermark{position:absolute;top:14px;left:14px;opacity:.18}
.legend{padding:12px 0 0 0;color:#6b7280;font-size:12px}
.fs-bar{display:flex;justify-content:flex-end;padding:6px 6px 12px}
.fs-btn{font-size:12px;border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer}
.mapList{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.mapListHeader{padding:12px 14px;font-weight:800;color:#374151;border-bottom:1px solid var(--line)}
.mapListScroller{height:940px;overflow:auto}
.mItem{display:flex;gap:10px;padding:12px 14px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
.mItem:hover{background:#F7FAFF}
.mItem.active{background:#FFF7E6;box-shadow:inset 0 0 0 2px var(--gold)}
.mTag{min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-weight:800;border:2px solid var(--gold);color:#1f2937}
.mTitle{font-weight:700}
.mVal{margin-left:auto;color:#6b7280}
.node{cursor:pointer;transition:transform .2s ease}
.node:hover{transform:scale(1.04)}
.pulse{animation:pulse 1.2s ease-out 1}
@keyframes pulse{0%{filter:drop-shadow(0 0 0 rgba(212,175,55,.0))}40%{filter:drop-shadow(0 0 10px rgba(212,175,55,.7))}100%{filter:drop-shadow(0 0 0 rgba(212,175,55,.0))}}

/* Etapas */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px}
.stage{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.stage .big{font-size:40px;font-weight:800}
.stage.active{box-shadow:0 0 0 2px var(--gold) inset}
.ctaBar{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px}
.btn-sec{border:1px solid var(--line);background:#fff;height:40px;padding:0 14px;border-radius:10px;cursor:pointer}
.btn-yellow{background:#FDE68A;border:1px solid #F59E0B;height:40px;padding:0 14px;border-radius:10px;cursor:pointer}

/* Responsive */
@media (max-width: 1020px){
  .main3{grid-template-columns:repeat(2,1fr)}
  .mapGrid{grid-template-columns:1fr}
  .mapListScroller{height:auto;max-height:520px}
}
@media (max-width: 680px){
  .main3{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .field{flex:1 1 100%}
  .field-date{max-width:none}
}

/* Impresión */
@media print{
  @page{size:A4;margin:18mm 14mm}
  body{background:#fff}
  header.hero, .audio-btn, .fs-bar, .ctaBar{display:none !important}
  .wrap{max-width:none}
  .card{box-shadow:none;border-color:#ddd}
  .mapListScroller{height:auto;overflow:visible}
  .mapGrid{grid-template-columns:1fr 1fr}
  .legend{color:#777}
  .print-header, .print-footer{display:flex !important}
  .page-break{break-after:page}
}

/* Encabezado / pie impresión */
.print-header, .print-footer{display:none}
.print-header{align-items:center;gap:16px;border-bottom:1px solid #e5e7eb;padding:8px 0;margin:8px 0 16px}
.print-header img{height:38px}
.ph-title{font-size:18px;font-weight:800}
.ph-meta{font-size:14px}
.print-footer{justify-content:center;color:#6b7280;border-top:1px solid #e5e7eb;padding-top:8px;margin-top:16px}


/* === Navbar v2: black background, white links, gold hover/active === */
.site-nav{
  background:#000 !important;
  border-bottom:1px solid #0a0a0a;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 20px; }
.brand img{ height:52px; width:auto; display:block; }

.nav-menu{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-menu a{
  display:block; padding:10px 14px; border-radius:10px;
  text-decoration:none; font-weight:400; letter-spacing:.2px;
  color:#fff; transition: color .15s ease, background .15s ease, border-color .15s ease;
  border-bottom:2px solid transparent;
}
.nav-menu a:hover,
.nav-menu a:focus{
  color:#C4A43E; background:rgba(255,255,255,0.06);
  border-bottom-color:#C4A43E;
}
.nav-menu a.active{ color:#C4A43E; border-bottom-color:#C4A43E; }

.nav-toggle{
  display:none; border:1px solid #333; color:#fff; background:#000;
  border-radius:10px; padding:8px 12px; cursor:pointer; font-size:16px;
}
.nav-toggle:hover{ color:#C4A43E; border-color:#555; }

@media (max-width: 760px){
  .brand img{ height:44px; }
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; right:16px; top:68px; background:#000; border:1px solid #222; border-radius:12px;
    padding:8px; display:none; flex-direction:column; min-width:220px; box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .nav-menu.open{ display:flex; }
  .nav-menu a{ color:#fff; }
  .nav-menu a:hover{ color:#C4A43E; background:rgba(255,255,255,0.06); }
}