/* Mapa cantonal en relieve (mapa3d.js). Las alturas se animan con propiedades registradas:
   --lift eleva la losa, --d separa sus capas laterales (grosor) y --alza levanta la ficha flotante. */
@property --lift{syntax:'<number>';inherits:true;initial-value:0}
@property --d{syntax:'<number>';inherits:true;initial-value:1}
@property --alza{syntax:'<number>';inherits:true;initial-value:0}

.cantonal-panel .map-stage{perspective:1300px;isolation:isolate}
#esmeraldas-map.m3d{filter:none;overflow:visible;transform:rotateX(calc(13deg + var(--m3d-rx,0deg))) rotateY(var(--m3d-ry,0deg));transform-origin:50% 60%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* Fondo: terreno, olas y rosa de los vientos */
.m3d-fondo{pointer-events:none}
.m3d-ola{fill:none;stroke:#a9c9c3;stroke-width:1.1;stroke-linecap:round;opacity:.55;animation:m3d-ola 6s ease-in-out infinite alternate}
@keyframes m3d-ola{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.m3d-norte circle{fill:#ffffff;stroke:#d7e5e1;stroke-width:1}
.m3d-norte path{fill:#1d6b58}
.m3d-norte .m3d-norte-sur{fill:#bcd3cd}
.m3d-norte text{font-family:var(--display);font-size:9px;font-weight:800;fill:#1d6b58;text-anchor:middle}
.m3d-leyenda text{font-family:var(--font);font-size:8.5px;font-weight:650;fill:#5d7570;letter-spacing:.3px}
.m3d-leyenda .m3d-leyenda-extremo{font-weight:550;fill:#8aa09a}
.m3d-sombra{fill:#0b2c26;opacity:.3;transform:translate(5px,15px)}

/* Losas */
.m3d-canton{--lift:0;--d:1;cursor:pointer;outline:none;transition:--lift .55s cubic-bezier(.34,1.56,.64,1),--d .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease,filter .4s ease}
.m3d-cuerpo{transform:translateY(calc(var(--lift) * -1px))}
.m3d-lado{fill:var(--lado);stroke:var(--lado);stroke-width:1;stroke-linejoin:round;transform:translateY(calc(var(--k) * var(--d) * 1px))}
.m3d-cara{fill:var(--cara);transition:fill .45s ease}
.m3d-luz{pointer-events:none}
.m3d-brillo{pointer-events:none;opacity:0;transition:opacity .4s ease}
.m3d-borde{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.1;stroke-linejoin:round;pointer-events:none;transition:stroke-width .3s ease}
.m3d-canton:hover{--lift:3.5;--d:1.35}
.m3d-canton:hover .m3d-brillo{opacity:.55}
.m3d-canton:focus-visible .m3d-borde{stroke:#ffd77a;stroke-width:2.4}
.m3d-canton.selected{--lift:12;--d:2.6}
.m3d-canton.selected .m3d-brillo{opacity:1}
.m3d-canton.selected .m3d-borde{stroke-width:2;filter:url(#m3d-f-halo);animation:m3d-halo 2.6s ease-in-out infinite}
.m3d-canton.filtered-out{--d:.7;opacity:.5;filter:saturate(.35)}
.m3d-canton.filtered-out:hover{opacity:.9;filter:none}
@keyframes m3d-halo{0%,100%{stroke:rgba(255,255,255,.95)}50%{stroke:rgba(178,240,219,.95)}}

/* Etiquetas, pin y ficha flotante */
.m3d-etiquetas{pointer-events:none}
.m3d-etiqueta{--lift:0;--alza:0;transition:--lift .55s cubic-bezier(.34,1.56,.64,1),--alza .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.m3d-etiqueta.selected{--lift:12;--alza:26}
.m3d-etiqueta.filtered-out{opacity:.55}
.m3d-ancla{transform:translateY(calc(var(--lift) * -1px))}
.m3d-texto{transform:translateY(calc((var(--lift) + var(--alza)) * -1px))}
.m3d-tallo{fill:#ffffff;opacity:0;transform:translateY(calc(var(--lift) * -1px)) scaleY(calc(15 - var(--alza)));transition:opacity .3s ease}
.m3d-pin,.m3d-pulso{opacity:0}
.m3d-pin{fill:#ffffff;stroke:#0f5c4a;stroke-width:1.4}
.m3d-pulso{fill:none;stroke:#ffffff;stroke-width:1.3;transform-box:fill-box;transform-origin:center}
.m3d-nombre,.m3d-dato{text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-linejoin:round}
.m3d-nombre{font-family:var(--display);font-size:10.5px;font-weight:800;fill:#0f3a31;stroke-width:3.2px;letter-spacing:.1px}
.m3d-dato{font-family:var(--font);font-size:8.6px;font-weight:700;fill:#2a6b5a;stroke-width:2.8px}
.m3d-caja{fill:rgba(12,40,35,.9);stroke:rgba(178,240,219,.55);stroke-width:.8;opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 6px 10px rgba(6,28,24,.35))}
.m3d-etiqueta.selected .m3d-tallo,.m3d-etiqueta.selected .m3d-pin,.m3d-etiqueta.selected .m3d-caja{opacity:1}
.m3d-etiqueta.selected .m3d-pulso{animation:m3d-pulso 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.m3d-etiqueta.selected .m3d-pulso-2{animation-delay:1.1s}
.m3d-etiqueta.selected .m3d-nombre,.m3d-etiqueta.selected .m3d-dato{stroke:none}
.m3d-etiqueta.selected .m3d-nombre{fill:#ffffff}
.m3d-etiqueta.selected .m3d-dato{fill:#9fe6cf}
@keyframes m3d-pulso{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}

/* Entrada escalonada, subida y bajada al seleccionar */
.m3d-aparece{animation:m3d-aparece .9s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes m3d-aparece{0%{opacity:0;--lift:-14;--d:0;--alza:-8}100%{opacity:1}}
.m3d-sube{animation:m3d-sube .75s cubic-bezier(.2,.8,.2,1)}
@keyframes m3d-sube{0%{--lift:0;--d:1;--alza:0}60%{--lift:17;--d:3.2;--alza:31}100%{--lift:12;--d:2.6;--alza:26}}
.m3d-baja{animation:m3d-baja .5s cubic-bezier(.4,0,.2,1)}
@keyframes m3d-baja{0%{--lift:12;--d:2.6;--alza:26}100%{--lift:0;--d:1;--alza:0}}

@media (prefers-reduced-motion:reduce){
 #esmeraldas-map.m3d{transform:rotateX(10deg);transition:none}
 .m3d-canton,.m3d-etiqueta{transition:none}
 .m3d-aparece,.m3d-sube,.m3d-baja,.m3d-ola,.m3d-etiqueta.selected .m3d-pulso,.m3d-canton.selected .m3d-borde{animation:none}
 .m3d-brillo{display:none}
}