/* =============================================================================
   mapa.css — A-MAPA1: la pieza parts/mapa/mapa.php. Fachada dibujada (SVG en línea) en vista inclinada con manzanas en
   relieve y el alfiler en el centro. Solo tokens del tema: parejo de noche y de día. La carga la plantilla que usa la
   pieza (hoy, Contacto por c100_nos_preparar).
   ========================================================================== */
.c100-mapa { display: grid; gap: 12px; max-width: 760px; }
/* style.css trae una .c100-mapa vieja (la Contacto de antes: dos columnas desde 900 px, padding y ancho de página); aquí
   la pieza manda: una columna, sin padding y a lo ancho de su caja. Doble clase para ganarle sin !important. */
.c100-mapa.c100-mapa { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; max-width: none; width: 100%; margin-inline: 0; padding-inline: 0; }
.c100-mapa__vivo { width: 100%; }
/* A-MAPA2: a todo el ancho de la columna, alto fijo (280 en teléfono, 360 desde 768): la fachada y el mapa vivo ocupan
   exactamente el mismo hueco, así el cambio no mueve nada (CLS 0) */
.c100-mapa__caja { position: relative; height: 280px; overflow: hidden; border: 1px solid var(--rl); border-radius: 20px; background: var(--s); isolation: isolate; }
/* la vista inclinada: el plano plano, girado sobre su eje horizontal; el alfiler queda derecho, fuera del plano */
.c100-mapa__plano { position: absolute; inset: -30% -25% -10%; transform: perspective(900px) rotateX(46deg) rotateZ(-8deg); transform-origin: 50% 62%; }
.c100-mapa__plano svg { display: block; width: 100%; height: 100%; }
.c100-mapa__calle { fill: color-mix(in oklab, var(--g) 70%, var(--s)); }
.c100-mapa__manzana { fill: color-mix(in oklab, var(--tx) 7%, var(--s)); }
.c100-mapa__lado { fill: color-mix(in oklab, var(--tx) 22%, var(--s)); }
.c100-mapa__techo { fill: color-mix(in oklab, var(--tx) 13%, var(--s)); }
.c100-mapa__parque { fill: color-mix(in oklab, var(--ok, #2aa565) 22%, var(--s)); }
.c100-mapa__av { stroke: color-mix(in oklab, var(--ai) 30%, var(--g)); stroke-width: 14; fill: none; }
.c100-mapa__av--diag { stroke-width: 18; }
.c100-mapa__glorieta { fill: color-mix(in oklab, var(--ok, #2aa565) 30%, var(--s)); stroke: color-mix(in oklab, var(--ai) 30%, var(--g)); stroke-width: 10; }
/* un velo hacia el horizonte, como la niebla de un mapa inclinado */
.c100-mapa__caja::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--s) 0%, color-mix(in oklab, var(--s) 0%, transparent) 38%); pointer-events: none; }
.c100-mapa__pin { position: absolute; z-index: 2; left: 50%; top: 52%; width: 40px; height: 52px; margin: -52px 0 0 -20px; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.c100-mapa__pin svg { display: block; width: 100%; height: 100%; }
.c100-mapa__pin path { fill: var(--go, var(--ai)); }
.c100-mapa__pin circle { fill: var(--g); }
.c100-mapa__pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 22px; height: 8px; margin-left: -11px; border-radius: 50%; background: color-mix(in oklab, var(--go, var(--ai)) 45%, transparent); animation: c100-mapa-pulso 2.4s ease-out infinite; z-index: -1; }
@keyframes c100-mapa-pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c100-mapa__pin::after { animation: none; } }
/* el mapa vivo (con token): la fachada es un botón; el mapa ocupa el mismo hueco */
button.c100-mapa__caja { display: block; width: 100%; padding: 0; color: inherit; font: inherit; cursor: pointer; }
button.c100-mapa__caja:focus-visible { outline: 2px solid var(--aico, var(--ai)); outline-offset: 3px; }
.c100-mapa__ver { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rl); border-radius: 12px; background: var(--s); color: var(--tx); font-weight: 700; }
.c100-mapa__vivo { position: relative; height: 280px; overflow: hidden; border: 1px solid var(--rl); border-radius: 20px; background: var(--s); }
.c100-mapa__vivo .mapboxgl-ctrl-group button { width: 44px; height: 44px; }
.c100-mapa__vivo .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { background-size: 30px; }
@media (min-width: 768px) { .c100-mapa__caja, .c100-mapa__vivo { height: 360px; } }
/* los botones, en un renglón debajo del mapa y alineados a la izquierda */
.c100-mapa__acc { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
/* .c100-mapa__acc .btn: el alto de todos (BOTONES 3D) */