:root{
  --bg:#f7faff; /* airy */
  --text:#0b1220;
  --muted:#475569;
  --card:#ffffff;
  --border:#d7e2ff;
  /* Vibrant brand accents */
  --accent:#06b6d4;   /* cyan */
  --accent-2:#a855f7; /* violet */
  --accent-3:#f97316; /* orange */
  --accent-4:#e11d48; /* crimson */
  --tilata:#22c55e;   /* green */
  --ekiraya:#ef4444;  /* red */
}
[data-theme="dark"]{
  --bg:#0a0f1e;
  --text:#e6edf7;
  --muted:#a5b4cf;
  --card:#0f172a;
  --border:#1e2a4a;
  --accent:#22d3ee;
  --accent-2:#c084fc;
  --accent-3:#fb923c;
  --accent-4:#fb7185;
  --tilata:#34d399;
  --ekiraya:#f87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(120deg, var(--bg), #eef6ff);
  color:var(--text);
}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
  background:linear-gradient(90deg, rgba(255,255,255,0.86), rgba(255,255,255,0.55)),
             linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0.6rem 1rem;
}
.brand{display:flex; align-items:center; gap:0.6rem}
.brand-mark{width:34px;height:34px;border-radius:10px; display:grid;place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-weight:700;}
.brand-text{display:flex; flex-direction:column; line-height:1}
.actions{display:flex; gap:0.5rem}
.btn{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none; border-radius:10px; padding:0.55rem 0.8rem; cursor:pointer}
.btn:hover{opacity:.9}
.btn.outline{background:transparent; color:var(--text); border:1px solid var(--border)}

.container{max-width:1200px; margin:0 auto; padding:1rem}
.lead{color:var(--muted)}
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0}
.chip{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:.4rem .8rem; cursor:pointer}
.chip:hover{border-color:var(--accent); box-shadow:0 0 0 3px rgba(6,182,212,.15)}

.map-wrapper{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width: 980px){
  .map-wrapper{grid-template-columns:1fr 320px}
}
.details{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.details .actions{display:flex; gap:.5rem}

svg{width:100%; height:auto; background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25)),
    radial-gradient(1200px 400px at 10% -10%, rgba(6,182,212,.08), transparent 60%),
    radial-gradient(1200px 400px at 90% 110%, rgba(168,85,247,.08), transparent 60%);
  border:1px solid var(--border); border-radius:16px}
.cluster-card{fill:var(--card); stroke:var(--border); stroke-width:1}
.title-bg{display:none}
.cluster-title{font-weight:700}
.label{font-size:14px}
.wrap{white-space:pre-wrap}
.node circle{fill:#fff; stroke-width:10; filter: drop-shadow(0 6px 18px rgba(0,0,0,.10))}
.node circle.tilata{stroke: var(--tilata)}
.node circle.ekiraya{stroke: var(--ekiraya)}
.node text{font-size:14px; user-select:none}
.node{cursor:pointer}
.node:hover text{fill:var(--accent-2)}
.node.active circle{outline:4px solid rgba(59,130,246,.25)}

.legend-card{fill:var(--card); stroke:var(--border)}
.legend text{font-size:14px}
.legend-title{font-weight:700}
.legend .tilata{fill:var(--tilata)}
.legend .ekiraya{fill:var(--ekiraya)}
.legend .ref{fill:var(--accent-4)}

.link{display:none}

.comparador{margin-top:1.5rem}
.comparador .cols{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width: 780px){
  .comparador .cols{grid-template-columns:1fr 1fr}
}
.panel{background:linear-gradient(135deg, var(--card), rgba(255,255,255,.8)); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Convivencia carousel */
.carousel{display:grid; grid-auto-flow:column; grid-auto-columns: 84%; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.2rem;}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius:10px}
.card{scroll-snap-align:start; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06);}
.card header{display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem}
.dot{width:10px;height:10px;border-radius:999px; display:inline-block}
.dot.tilata{background:var(--tilata)}
.dot.ekiraya{background:var(--ekiraya)}
.dot.ref{background:var(--accent-4)}
.btn.small{padding:.35rem .6rem; font-size:.9rem; border-radius:8px}
@media (min-width: 980px){
  .carousel{grid-auto-columns: 32%}
}

.modal{border:none; border-radius:16px; padding:0; width:min(720px, 96vw)}
.modal::backdrop{background:rgba(2,6,23,.4)}
.modal-content{border:1px solid var(--border); border-radius:16px; background:var(--card);}
.modal-content header, .modal-content footer{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--border)}
.modal-content footer{border-top:1px solid var(--border); border-bottom:none}
.modal-content article{padding:1rem}
blockquote{border-left:4px solid var(--accent); margin:0; padding:.2rem .8rem; color:var(--muted)}
.apa{font-size:.95rem; color:var(--muted)}
.icon{background:transparent; border:none; font-size:1.1rem; cursor:pointer}

/* Utility */
h1,h2,h3{margin:.4rem 0}
p{line-height:1.6}