/* ═══════════════════════════════════════════════════════
   CONCIENCIA HISPANA — base.css
   Design tokens + componentes compartidos (nav, footer,
   donaciones, tooltip, panel, mapa). Las páginas cargan
   este archivo ANTES de su <style> propio, de modo que
   cualquier regla de página puede sobreescribir la base.
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--granate:#7a2430;--granate-osc:#5c1a24;--oro:#c9a227;--oro-claro:#e8ce7a;
--pergamino:#f7f0e1;--pergamino-osc:#efe4cd;--piedra:#e3d5b8;--tinta:#241b14;--tinta-suave:#5f5346;
--anil:#2f4d6b;--blanco:#fffdf6;
--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans','Segoe UI',sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);color:var(--tinta);background:var(--pergamino);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--granate);text-decoration:none;transition:color .2s}
a:hover{color:var(--oro)}
img{max-width:100%;display:block}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(247,240,225,.96);backdrop-filter:blur(10px);box-shadow:0 1px 16px rgba(36,27,20,.08)}
.nav-logo{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--tinta);display:flex;align-items:center;gap:.5rem}
.nav-logo span{color:var(--granate)}
.nav-logo svg{width:24px;height:16px;opacity:.85}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{color:var(--tinta-suave);font-size:.85rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.nav-links a:hover{color:var(--granate)}
.nav-cta{background:var(--granate);color:#fff!important;padding:.5rem 1.25rem;border-radius:2rem;font-weight:700;font-size:.78rem;letter-spacing:.05em}
.nav-cta:hover{background:var(--oro);color:var(--tinta)!important}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--tinta);margin:5px 0}
@media(max-width:768px){
.nav-links{display:none}
.nav-links.mobile-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(247,240,225,.98);box-shadow:0 12px 30px rgba(36,27,20,.15);padding:.5rem 0}
.nav-links.mobile-open a{padding:.9rem 2rem;border-bottom:1px solid rgba(36,27,20,.06)}
.menu-toggle{display:block}
}

/* ─── FOOTER ─── */
.footer{padding:3rem 2rem 2rem;background:var(--tinta);color:rgba(255,255,255,.55);margin-top:0}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
.footer-brand{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:.6rem}
.footer-brand span{color:var(--oro)}
.footer-brand svg{width:24px;height:16px;opacity:.75}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.5);font-size:.8rem}
.footer-links a:hover{color:var(--oro)}
.footer-copy{width:100%;text-align:center;font-size:.72rem;margin-top:1rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:768px){
.footer-inner{flex-direction:column;text-align:center}
.footer-links{justify-content:center}
}

/* ─── DONACIONES (widget del footer) ─── */
.footer-cripto{width:100%;text-align:center;font-size:.78rem;margin-top:1rem;color:rgba(255,255,255,.45)}
.cripto-botones{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.cripto-btn{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:2rem;padding:.42rem 1rem;font-size:.76rem;color:rgba(255,255,255,.75);font-family:var(--sans);cursor:pointer;transition:background .2s,border-color .2s}
.cripto-btn:hover{background:rgba(201,162,39,.14);border-color:var(--oro);color:var(--oro-claro)}
.cripto-btn .icono{font-weight:700;font-size:.9rem;color:var(--oro);display:inline-flex;align-items:center}
.cripto-btn .addr{font-family:ui-monospace,Consolas,monospace;font-size:.68rem;color:rgba(255,255,255,.45)}

/* ─── MODAL DE DONACIÓN ─── */
.cripto-modal{position:fixed;inset:0;z-index:300;background:rgba(36,27,20,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.cripto-modal[hidden]{display:none}
.cm-caja{background:var(--pergamino);border-radius:20px;border:1px solid rgba(36,27,20,.15);box-shadow:0 24px 80px rgba(0,0,0,.4);max-width:420px;width:100%;padding:2rem;position:relative;text-align:center;color:var(--tinta)}
.cm-cerrar{position:absolute;top:.8rem;right:.9rem;background:var(--pergamino-osc);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--tinta)}
.cm-caja h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.cm-caja h3 .icono{color:var(--oro);display:inline-flex}
.cm-addr{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;background:var(--blanco);border:1px dashed rgba(36,27,20,.25);border-radius:10px;padding:.7rem .9rem;word-break:break-all;cursor:pointer;line-height:1.5;transition:border-color .2s}
.cm-addr:hover{border-color:var(--oro)}
.cm-acciones{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.cm-btn{background:var(--granate);color:#fff;border:none;border-radius:2rem;padding:.55rem 1.2rem;font-size:.76rem;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:var(--sans);transition:background .2s}
.cm-btn:hover{background:var(--granate-osc);color:#fff}
.cm-btn.secundario{background:var(--pergamino-osc);color:var(--tinta)}
.cm-btn.secundario:hover{background:var(--oro-claro)}
.cm-qrbox{display:flex;justify-content:center;margin-top:1.1rem;min-height:0}
.cm-qrbox img,.cm-qrbox canvas{border:8px solid #fff;border-radius:10px;box-shadow:0 4px 18px rgba(36,27,20,.18)}
.cm-nota{font-size:.68rem;color:var(--tinta-suave);margin-top:1rem;font-style:italic}

/* ─── TOOLTIP ─── */
.tooltip{position:fixed;pointer-events:none;z-index:250;background:var(--tinta);color:var(--pergamino);font-size:.75rem;font-weight:700;letter-spacing:.05em;padding:.35rem .8rem;border-radius:.5rem;display:none;transform:translate(-50%,-140%);max-width:260px;text-align:center;line-height:1.4}
.tooltip small{display:block;font-weight:400;color:rgba(247,240,225,.75);letter-spacing:.02em}

/* ─── MAPA (componente) ─── */
.mapa-marco{width:90%;max-width:1900px;margin:0 auto;background:var(--blanco);border-radius:22px;border:1px solid rgba(36,27,20,.08);box-shadow:0 12px 50px rgba(36,27,20,.08);padding:1rem;position:relative}
.mapa-svg{width:100%;height:auto;display:block;background:radial-gradient(ellipse at 50% 38%,rgba(47,77,107,.07) 0%,rgba(47,77,107,.03) 50%,rgba(47,77,107,.008) 75%,transparent 85%)}
.mapa-svg .oceano-graticula{fill:none;stroke:var(--anil);stroke-width:.4;opacity:.1}
.mapa-svg .brujula{opacity:.18;pointer-events:none}
.mapa-svg .brujula-circ{fill:none;stroke:var(--anil);stroke-width:.7}
.mapa-svg .brujula-aguja{fill:var(--anil)}
.mapa-svg .brujula-aguja2{fill:var(--granate)}
.mapa-svg .brujula-n{font-family:var(--serif);font-size:10px;fill:var(--anil);letter-spacing:.06em}
.mapa-svg .pais-mudo{fill:#e9dfc9;stroke:#d3c5a3;stroke-width:.4}
.mapa-svg .pais-hispano{fill:#a3402f;stroke:#7a2430;stroke-width:.6;cursor:pointer;transition:fill .2s}
.mapa-svg .pais-hispano:hover,.mapa-svg .pais-hispano.activo{fill:var(--oro)}
.mapa-svg .pais-asociado{fill:#cf9a5b;stroke:#a87838;stroke-width:.6;cursor:pointer;transition:fill .2s}
.mapa-svg .pais-asociado:hover,.mapa-svg .pais-asociado.activo{fill:var(--oro-claro)}
.mapa-svg .pais-todos{fill:#a3402f;stroke:#7a2430;stroke-width:.6;transition:fill .35s}
.mapa-svg .pais-todos.activo{fill:var(--oro)}
.mapa-svg .chincheta circle{fill:var(--granate);stroke:#fff;stroke-width:1.4;transition:fill .2s}
.mapa-svg .chincheta.asoc circle{fill:#cf9a5b}
.mapa-svg .chincheta.interactiva{cursor:pointer}
.mapa-svg .chincheta.interactiva:hover circle,.mapa-svg .chincheta.activo circle{fill:var(--oro)}
.mapa-svg .isla circle{fill:#a3402f;stroke:#fff;stroke-width:1.2;transition:fill .2s}
.mapa-svg .isla.interactiva{cursor:pointer}
.mapa-svg .isla.interactiva:hover circle,.mapa-svg .isla.activo circle{fill:var(--oro)}
.mapa-svg .estrella{cursor:pointer;fill:#cf9a5b;stroke:#fff;stroke-width:1;transition:fill .2s}
.mapa-svg .estrella:hover{fill:var(--oro)}
.mapa-cargando{text-align:center;color:var(--tinta-suave);font-size:.9rem;padding:4rem 1rem}
.mapa-hint{text-align:center;font-size:.76rem;color:var(--tinta-suave);letter-spacing:.06em;text-transform:uppercase;margin-top:.9rem}
.mapa-leyenda{display:flex;justify-content:center;gap:1.6rem;margin-top:.6rem;flex-wrap:wrap;font-size:.72rem;color:var(--tinta-suave)}
.mapa-leyenda span{display:flex;align-items:center;gap:.4rem}
.mapa-leyenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mapa-nota{max-width:720px;margin:1.1rem auto 0;text-align:center;font-size:.74rem;color:var(--tinta-suave);font-style:italic;line-height:1.6}
@media(max-width:920px){.mapa-marco{width:96%}}

/* marcador de lugar exacto (hechos históricos) */
.mapa-svg .marcador-hecho .nucleo{fill:var(--oro);stroke:#fff;stroke-width:1.6}
.mapa-svg .marcador-hecho .anillo{fill:none;stroke:var(--oro);stroke-width:2;animation:pulsoAnillo 1.6s ease-out infinite}
@keyframes pulsoAnillo{0%{r:6;opacity:.9}100%{r:22;opacity:0}}

/* ─── PANEL LATERAL (país / hecho) ─── */
.panel{position:absolute;top:1.2rem;right:1.2rem;width:360px;max-width:calc(100% - 2.4rem);background:var(--blanco);border-radius:18px;border:1px solid rgba(36,27,20,.1);box-shadow:0 16px 60px rgba(36,27,20,.22);padding:1.7rem;z-index:50;opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .3s,transform .3s;max-height:calc(100% - 2.4rem);overflow-y:auto}
.panel.abierto{opacity:1;transform:translateX(0);pointer-events:auto}
.panel-cerrar{position:absolute;top:.8rem;right:.9rem;background:var(--pergamino);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--tinta)}
@media(max-width:920px){
.panel{position:fixed;inset:auto 0 0 0;top:auto;width:100%;max-width:100%;border-radius:20px 20px 0 0;transform:translateY(105%);max-height:72vh}
.panel.abierto{transform:translateY(0)}
}

/* ─── UTILIDADES COMPARTIDAS ─── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}