:root{--bg:#1f2c31;--panel:rgba(48,63,69,.86);--line:#566a69;--text:#f4efe3;--muted:#c9d2ce;--gold:#e8cf98;--ember:#ffd48a;--sea:#1e343b}   /* paleta aclarada: se veía casi negra sin HDR */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(120% 80% at 50% -10%,#33464d 0%,var(--bg) 60%) fixed;color:var(--text);font:16px/1.5 system-ui,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:1320px;margin:0 auto;padding:20px 16px 30px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;animation:fade .9s ease both}
.brand{display:flex;align-items:center;gap:14px}
.mark{width:auto;height:66px;flex:none;filter:drop-shadow(0 0 12px rgba(255,190,100,.4))}
@media (max-width:700px){.mark{height:54px}}
.mark rect{fill:#e9dfc6}.mark .flame{fill:var(--ember);transform-origin:50% 90%;animation:flame 2.6s ease-in-out infinite}
h1{margin:0;font:400 clamp(28px,4vw,38px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:.01em}
.lead{margin:5px 0 0;color:var(--muted);font-size:15px}.lead span{display:block;font-size:13px;opacity:.75;transition:opacity .3s}
.old-link{color:var(--gold);font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap;transition:border-color .2s,background .2s}
.old-link:hover,.old-link:focus-visible{border-color:var(--gold);background:rgba(225,199,143,.08);outline:none}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}
.map-wrap{position:relative;border:1px solid #4a5f60;border-radius:18px;overflow:hidden;height:clamp(440px,76vh,760px);
 background:radial-gradient(90% 80% at 50% 38%,#3d6a77 0%,#2a4f5a 55%,var(--sea) 100%);
 box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.map-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(150,190,200,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,200,.06) 1px,transparent 1px);background-size:56px 56px;
 mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%)}
.map-wrap{perspective:1500px;perspective-origin:50% 28%}
#map{position:relative;display:block;width:100%;height:100%;touch-action:manipulation;overflow:visible;
 transform:rotateX(var(--rx,13deg)) rotateY(var(--ry,0deg)) scale(1.05);transform-origin:50% 64%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* relieve: sombreado de montañas y valles sobre el color de cada comunidad */
#relief{mix-blend-mode:overlay;opacity:0;pointer-events:none;transition:opacity 1.4s ease}
#relief.ready{opacity:.95}
#sparks-layer{pointer-events:none}
.sparks{transition:opacity .5s}
.sparks.dim{opacity:.09}
#sea{fill:transparent}
.island-frame{fill:none;stroke:#34484a;stroke-width:1.2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.inset-label{fill:#7f8e90;font-size:calc(11px*var(--k,1));letter-spacing:.16em}
#land{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
/* tierra */
.community{transition:opacity .5s}
.community.dim{opacity:.09;pointer-events:none}
.halo{fill:none;stroke:#070b0d;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.province{cursor:pointer;outline:none}
.fill{fill:var(--fill,#2d3d3a);stroke:var(--fill,#2d3d3a);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .25s,opacity .4s}
.level-spain .community:hover .fill,.province:focus-visible .fill{filter:brightness(1.3)}
.level-community .community:not(.dim) .fill,.level-province .community:not(.dim) .fill{stroke:rgba(238,231,215,.5);stroke-width:1.1}
.level-community .province:hover .fill,.level-province .province:hover .fill{filter:brightness(1.35)}
.level-province .province.sibling-dim .fill{opacity:.4}
.province.selected .fill{stroke:var(--gold);stroke-width:2.4;animation:breathe 3s ease-in-out infinite}
/* cirios (encendidos desde la iglesia) */
.sparks{pointer-events:none;filter:drop-shadow(0 0 2.5px rgba(255,190,100,.85))}
.cirio{pointer-events:auto;cursor:pointer}
.cirio .wax{fill:#efe4c8}
.cirio .glow{transform-box:fill-box;transform-origin:center;animation:glow 3.2s ease-in-out infinite}
.cirio .flame{fill:#ffd48a;stroke:#ff9d2e;stroke-width:.7;transform-box:fill-box;transform-origin:50% 95%;animation:flame 2.4s ease-in-out infinite}
.cirio.nuevo .glow{animation:nuevo 1.8s ease-out 4}
@keyframes glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
@keyframes nuevo{0%{transform:scale(.3);opacity:0}35%{opacity:1}100%{transform:scale(3.4);opacity:0}}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:rgba(44,58,63,.97);border:1px solid var(--gold);color:var(--text);padding:12px 22px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:opacity .4s,transform .4s;z-index:20;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}/* etiquetas */
.lbl{pointer-events:none;opacity:0;transition:opacity .35s;text-anchor:middle}
.lbl.on{opacity:1}
.lbl text{fill:var(--text);paint-order:stroke;stroke:rgba(7,11,13,.9);stroke-width:calc(3.4px*var(--k,1));stroke-linejoin:round}
.lbl .n{font-size:calc(13px*var(--k,1));font-weight:600;letter-spacing:.01em}
.lbl .c{font-size:calc(11px*var(--k,1));fill:var(--gold)}
.lbl-province .n{font-size:calc(14px*var(--k,1))}
.lbl-province .c{font-size:calc(13px*var(--k,1))}
.lbl-badge{pointer-events:auto;cursor:pointer}
.lbl-badge rect{fill:#2b3b40;stroke:#5a6f6d;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .2s}
.lbl-badge:hover rect,.lbl-badge:focus-visible rect{stroke:var(--gold)}
.lbl-badge text{stroke:none;paint-order:normal}
.leader{fill:none;stroke:#4f6264;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;pointer-events:none}
/* nubes: dos capas con paralaje y su sombra proyectada sobre el mapa (luz desde el noroeste) */
.clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity 1.2s;z-index:2}
.map-wrap.zoomed .clouds{opacity:.4}
.clouds div{position:absolute;left:0;width:200%;background-image:url(nubes.png?v=1);background-repeat:repeat-x;background-size:50% 100%;will-change:transform;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.clouds .layer{opacity:.6}
.clouds .shadow{opacity:.34;filter:brightness(0) blur(2px)}
.clouds .c1,.clouds .s1{top:-8%;height:70%;animation:drift 190s linear infinite}
.clouds .c2,.clouds .s2{top:30%;height:78%;scale:-1 1;animation:drift 290s linear infinite reverse;animation-delay:-110s}
.clouds .layer.c2{opacity:.5}
.clouds .s1{margin:3.2% 0 0 1.8%}
.clouds .s2{margin:4.4% 0 0 -2.4%}.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 90px 24px rgba(4,8,10,.35)}
.back{position:absolute;left:14px;top:14px;z-index:4;background:rgba(44,58,63,.9);backdrop-filter:blur(6px);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font:inherit;font-size:14px;cursor:pointer;animation:fade .4s both;transition:border-color .2s}
.back:hover,.back:focus-visible{border-color:var(--gold);outline:none}
/* panel */
#panel{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:20px;min-height:240px;box-shadow:0 18px 44px rgba(0,0,0,.35);animation:rise 1s .12s cubic-bezier(.2,.7,.2,1) both}
#crumbs{display:flex;flex-wrap:wrap;gap:5px;font-size:13px;color:var(--muted);margin-bottom:12px}
#crumbs button{background:none;border:0;padding:0;color:var(--gold);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#crumbs span.sep{opacity:.45}#crumbs b{font-weight:600;color:var(--text)}
#area-name{margin:0;font:400 28px/1.12 Georgia,'Times New Roman',serif}
.count{margin:10px 0 14px;color:var(--muted)}.count strong{font-size:34px;line-height:1;color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
#area-extra{font-size:13px;color:var(--muted);margin-bottom:14px}
#area-extra p{margin:0 0 8px}
#area-list{display:grid;gap:7px;max-height:46vh;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#5a6f6d transparent}
#area-list button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:rgba(36,49,54,.8);color:var(--text);border:1px solid #4a5d5d;border-radius:11px;padding:10px 13px;font:inherit;cursor:pointer;animation:slide .5s both;animation-delay:calc(var(--i,0)*35ms);transition:border-color .2s,transform .2s,background .2s}
#area-list button:hover,#area-list button:focus-visible{border-color:var(--gold);background:rgba(58,75,80,.9);transform:translateX(3px);outline:none}
#area-list .chip{flex:none;width:12px;height:12px;border-radius:4px;background:var(--chip);box-shadow:0 0 8px var(--chip)}
#area-list .nm{flex:1}#area-list .ct{color:var(--gold);font-variant-numeric:tabular-nums}
.enter{display:block;width:100%;background:linear-gradient(180deg,#ecd49e,#d6b76f);color:#1f241f;border:0;border-radius:12px;padding:13px;font:inherit;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 22px rgba(214,183,111,.25);transition:transform .2s,box-shadow .2s,filter .2s}
.enter:hover,.enter:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(214,183,111,.35);outline:none}
.enter:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.enter-note{font-size:13px;color:var(--muted);margin:10px 0 0}
footer{margin-top:16px;font-size:13px;color:var(--muted)}
footer p{margin:4px 0}.credits{opacity:.7}
#retry{margin-top:8px;background:none;border:1px solid var(--line);color:var(--gold);border-radius:999px;padding:6px 14px;font:inherit;cursor:pointer}
/* diálogo ¿Entrar? */
#enter-dialog{background:#2c3b40;color:var(--text);border:1px solid #4a5a55;border-radius:18px;padding:26px 28px;max-width:400px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(0,0,0,.65);animation:pop .3s cubic-bezier(.2,.8,.2,1) both}
#enter-dialog::backdrop{background:rgba(4,8,10,.62);backdrop-filter:blur(3px)}
#enter-dialog h2{margin:0 0 8px;font:400 24px/1.2 Georgia,'Times New Roman',serif}
#enter-dialog p{margin:0 0 20px;color:var(--muted)}
#enter-dialog .actions{display:flex;gap:10px}
#enter-dialog button{flex:1;padding:12px;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);transition:transform .2s,border-color .2s}
#enter-dialog button:hover,#enter-dialog button:focus-visible{border-color:var(--gold);transform:translateY(-1px);outline:none}
#enter-dialog .yes{background:linear-gradient(180deg,#ecd49e,#d6b76f);color:#1f241f;border:0}
/* animaciones */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(330%)}}
@keyframes flicker{0%,100%{opacity:.22}18%{opacity:.95}42%{opacity:.45}66%{opacity:1}84%{opacity:.35}}
@keyframes breathe{0%,100%{filter:brightness(1.2)}50%{filter:brightness(1.5)}}
@keyframes flame{0%,100%{transform:scale(1,1) rotate(-1deg)}35%{transform:scale(.94,1.06) rotate(1.5deg)}70%{transform:scale(1.04,.96) rotate(-1deg)}}
@media (max-width:860px){.stage{grid-template-columns:1fr}.map-wrap{height:62vh;min-height:380px}#area-list{max-height:none}header{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.level-spain .lbl-community .c{display:none}.lbl-community .n{font-size:calc(10px*var(--k,1))}.lbl-province .n{font-size:calc(12px*var(--k,1))}.lbl-province .c{font-size:calc(11px*var(--k,1))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.spark{opacity:.8}}

/* buscador de personas */
header{position:relative;z-index:40}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.finder{position:relative;flex:1 1 280px;max-width:400px;margin-left:auto}
.finder input{width:100%;font:inherit;font-size:14px;color:var(--text);background:rgba(40,54,59,.85);border:1px solid var(--line);border-radius:999px;padding:9px 16px;backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.finder input::placeholder{color:#8f9b97}
.finder input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,199,143,.14)}
#person-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:rgba(40,54,59,.98);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
#person-results[hidden]{display:none}
#person-results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:var(--text);padding:10px 14px;font:inherit;cursor:pointer}
#person-results button:hover,#person-results button:focus-visible{background:rgba(225,199,143,.1);outline:none}
#person-results button:disabled{opacity:.5;cursor:default}
#person-results strong{display:block;font-weight:500;font-size:14px}
#person-results small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
#person-results p{margin:0;padding:11px 14px;color:var(--muted);font-size:13px}
@media (max-width:860px){header{flex-wrap:wrap}.finder{order:3;flex-basis:100%;max-width:none;margin-left:0}}
@media (max-width:700px){.finder input{font-size:16px}#enter-dialog{width:calc(100vw - 32px)}header{margin-bottom:12px}}

/* Nubes grandes de siempre, ahora más vivas: avanzan más deprisa y, sin parar, se encogen y se aclaran (como si se fueran deshaciendo) y vuelven a crecer. */
@keyframes shrink{0%,100%{scale:1;opacity:var(--o1)}50%{scale:.78 .86;opacity:var(--o2)}}
@keyframes shrinkb{0%,100%{scale:-1 1;opacity:var(--o1)}50%{scale:-.78 .86;opacity:var(--o2)}}
.clouds .layer.c1{--o1:.6;--o2:.34}.clouds .shadow.s1{--o1:.34;--o2:.18}
.clouds .layer.c2{--o1:.5;--o2:.28}.clouds .shadow.s2{--o1:.34;--o2:.18}
.clouds .c1,.clouds .s1{animation:drift 100s linear infinite,shrink 23s ease-in-out infinite;animation-delay:0s,0s}
.clouds .c2,.clouds .s2{animation:drift 150s linear infinite reverse,shrinkb 31s ease-in-out infinite;animation-delay:-60s,-9s}

/* Las nubes se mueven siempre, aunque el sistema tenga activado "reducir movimiento". */
@media (prefers-reduced-motion:reduce){
.clouds .c1,.clouds .s1{animation:drift 100s linear infinite,shrink 23s ease-in-out infinite!important;animation-delay:0s,0s!important}
.clouds .c2,.clouds .s2{animation:drift 150s linear infinite reverse,shrinkb 31s ease-in-out infinite!important;animation-delay:-60s,-9s!important}
}
.clouds canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.online-users{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#dfe8d8;font-size:12px;padding:8px 12px;border:1px solid rgba(154,170,138,.4);border-radius:20px;background:rgba(52,64,50,.82);backdrop-filter:blur(8px)}
.online-users::before{content:"";width:6px;height:6px;border-radius:50%;background:#91c99b}
.online-users[hidden]{display:none}
@media (max-width:860px){.online-users{order:2}}

/* Nitidez: al acercarse (comunidad / provincia) se quita la inclinación 3D; con la perspectiva activa el navegador rasteriza el mapa a baja resolución y se ve pixelado y borroso. */
.map-wrap.zoomed{perspective:none}
.map-wrap.zoomed #map{transform:scale(1.05)}

/* ficha de la persona (cirios del mapa) */
#person-dialog{background:#2c3b40;color:var(--text);border:1px solid #4a5a55;border-radius:18px;padding:26px 28px 22px;max-width:540px;width:calc(100% - 32px);max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.65);animation:pop .3s cubic-bezier(.2,.8,.2,1) both}
#person-dialog::backdrop{background:rgba(4,8,10,.62);backdrop-filter:blur(3px)}
#person-close{position:absolute;top:10px;right:14px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
#person-close:hover{color:var(--text)}
#person-dialog .eyebrow{font-size:10px;letter-spacing:2px;color:#b9a273}
#person-dialog h2{margin:8px 0 4px;font:400 26px/1.2 Georgia,'Times New Roman',serif}
#person-dialog .person-data{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin:20px 0}
#person-dialog dt{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
#person-dialog dd{margin:3px 0 0;font-size:15px}
#person-dialog .detail-section h3{margin:14px 0 4px;font-size:12px;color:var(--gold)}
#person-dialog .detail-section p{margin:0;color:var(--text);font-size:14px}
#person-dialog .detail-note{color:var(--muted);font-size:12px;margin:10px 0 0}
#person-dialog .detail-actions{margin-top:18px}
#person-dialog .locate{display:inline-block;padding:11px 18px;border-radius:12px;background:linear-gradient(180deg,#ecd49e,#d6b76f);color:#1f241f;font-weight:600;text-decoration:none}
.cirio .hit{pointer-events:all}
.cirio:focus-visible .glow{stroke:var(--gold);stroke-width:1}
/* Enlaces legales y solicitud de corrección o retirada */
.legal-links{font-size:12px;margin:8px 0}.legal-links a{color:#e1c78f}
.request-fix{margin:12px 0 0;font-size:13px}.request-fix a{color:#aab4b0;text-decoration:underline}

/* Compra de cirios (Stripe) */
.buy-candle{margin:14px 0 4px;padding:14px;border:1px solid #e1c78f55;border-radius:14px;background:rgba(225,199,143,.06);text-align:left}
.buy-lit{margin:0 0 6px;color:#ffd48a;font-size:13px}
.buy-price{margin:0 0 10px;font-size:15px}.buy-price strong{color:#e1c78f}.buy-price span{font-size:12px;opacity:.75}
.buy-accept{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;margin:0 0 12px;cursor:pointer}.buy-accept input{margin-top:3px;width:18px;height:18px;flex:none}.buy-accept a{color:#e1c78f}
.buy-button{width:100%;padding:12px 16px;border:0;border-radius:12px;font:inherit;font-weight:600;background:linear-gradient(180deg,#ecd49e,#d6b76f);color:#1f241f;cursor:pointer;touch-action:manipulation}
.buy-button:disabled{opacity:.45;cursor:not-allowed}
.buy-message{margin:8px 0 0;font-size:13px;color:#e8a87c}.buy-message:empty{display:none}
.buy-note{margin:8px 0 0;font-size:11px;opacity:.7}