/* Calé Grad · ESTILOS DEL DIBUJO DEL CROQUIS (compartidos: landing y editor del CMS).
   Las piezas las genera js/croquis-dibujo.js; el tema sale de cada dibujo en js/croquis.js. */
/* Paleta del croquis (noche P04) + variantes por destino */
.plano__svg { --suelo: #0d0d16; --agua: #0b1426; --acento: #ff2d45; --panel-p: #12121c; --tenue-p: rgba(243, 243, 248, .6); --linea-p: rgba(255, 255, 255, .12); }
.plano__svg.tema-caribe { --agua: #071d2a; }
.plano__svg.tema-pacifico { --agua: #0a1530; }
.plano__svg.tema-bosque { --suelo: #0b130e; --agua: #0a1a24; }
.plano__svg .p-suelo { fill: var(--suelo); stroke: var(--linea-p); }
.plano__svg .p-agua { fill: var(--agua); }
.plano__svg .p-laguna { fill: color-mix(in srgb, var(--agua) 80%, #1aa3a3 20%); stroke: var(--linea-p); }
.plano__svg .p-calle { fill: #121220; stroke: var(--linea-p); }
.plano__svg .p-ola { fill: none; stroke: var(--acento); stroke-width: 1; opacity: .35; }
.plano__svg .p-arena { fill: color-mix(in srgb, var(--suelo) 70%, #e9c98f 30%); }
.plano__svg .p-reticula { stroke: var(--linea-p); stroke-width: .6; }
.plano__svg .p-techo { fill: color-mix(in srgb, var(--panel-p) 85%, var(--acento) 15%); stroke: var(--acento); stroke-width: 1.2; filter: url(#brillo); }
.plano__svg .p-muro-a { fill: color-mix(in srgb, var(--panel-p) 92%, #000 8%); stroke: var(--acento); stroke-width: .8; stroke-opacity: .7; }
.plano__svg .p-muro-b { fill: color-mix(in srgb, var(--panel-p) 78%, #000 22%); stroke: var(--acento); stroke-width: .8; stroke-opacity: .7; }
.plano__svg .p-ventana { stroke: var(--acento); stroke-width: 1.4; opacity: .55; }
.plano__svg .p-alberca { fill: color-mix(in srgb, var(--agua) 60%, #2ad1ff 40%); stroke: var(--acento); stroke-width: 1.4; filter: url(#brillo); }
.plano__svg .p-lago { fill: color-mix(in srgb, var(--agua) 70%, #2a8fbf 30%); stroke: var(--acento); stroke-width: 1; stroke-opacity: .6; }
.plano__svg .p-camino { fill: none; stroke: var(--acento); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .8; }
.plano__svg .p-palma { fill: color-mix(in srgb, var(--suelo) 40%, #3c8a4a 60%); stroke: var(--acento); stroke-width: .6; stroke-opacity: .5; }
.plano__svg .p-pino { fill: color-mix(in srgb, var(--suelo) 35%, #2f6b3d 65%); stroke: var(--acento); stroke-width: .6; stroke-opacity: .45; }
.plano__svg .p-palapa { fill: color-mix(in srgb, var(--suelo) 30%, #c79a55 70%); stroke: var(--acento); stroke-width: .8; }
.plano__svg .p-teja { fill: color-mix(in srgb, var(--panel-p) 55%, #a0442c 45%); stroke: var(--acento); stroke-width: .9; }
.plano__svg .p-texto { font: 600 9px var(--mono); letter-spacing: .18em; fill: var(--tenue-p); text-transform: uppercase; }
.plano__svg .p-tronco { stroke: color-mix(in srgb, var(--tenue-p) 70%, #8a5a2b 30%); stroke-width: 1.2; }
.plano__svg .p-cable { stroke: #f2b24a; stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; opacity: .9; }
.plano__svg .p-poste { stroke: #f2b24a; stroke-width: 2; }
.plano__svg .p-fuego { fill: #ffb347; filter: url(#brillo); }
.plano__svg .p-fuego-halo { fill: url(#fuego); }
/* Ruta del recorrido (encima del croquis), tipo caramelo: contorno oscuro, base clara y franjas rojas.
   .p-ruta-mascara es la línea que la landing anima con el scroll para irla dibujando. */
.plano__svg .p-ruta-mascara { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.plano__svg .p-ruta__borde { fill: none; stroke: rgba(7, 7, 12, .85); stroke-width: 6.4; stroke-linecap: round; stroke-linejoin: round; }
.plano__svg .p-ruta__base { fill: none; stroke: #fff4ea; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.plano__svg .p-ruta__franjas { fill: none; stroke: var(--acento); stroke-width: 3.8; stroke-dasharray: 7 7; stroke-linejoin: round; }

/* Fogata del croquis de Mazamitla: parpadeo de llama */
.plano__svg .p-fuego { animation: llama .18s steps(2) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes llama { from { opacity: .85; transform: scaleY(.9); } to { opacity: 1; transform: scaleY(1.08); } }

/* Piezas del motor nuevo (js/croquis-motor.js): editor de croquis, landing y CMS */
.plano__svg .e-camino { fill: none; stroke: color-mix(in srgb, var(--suelo) 25%, #e9c98f 75%); stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.plano__svg .e-azul { fill: #1f9fd6; stroke: #bfefff; stroke-width: .6; }
.plano__svg .e-azul2 { fill: #167aa6; stroke: #bfefff; stroke-width: .5; }
.plano__svg .e-poste { stroke: #8fb8c8; stroke-width: 1.2; }
.plano__svg .e-copa-b { fill: color-mix(in srgb, var(--suelo) 45%, #24502f 55%); stroke: var(--acento); stroke-width: .5; stroke-opacity: .35; }
.plano__svg .e-copa { fill: color-mix(in srgb, var(--suelo) 30%, #34703f 70%); stroke: var(--acento); stroke-width: .5; stroke-opacity: .4; }
.plano__svg .e-copa-luz { fill: #6fb36f; opacity: .45; }
.plano__svg .e-anillo { stroke: rgba(0, 0, 0, .45); stroke-width: .6; }
.plano__svg .e-ventana { fill: color-mix(in srgb, #0b1426 70%, var(--acento) 12%); stroke: var(--acento); stroke-width: .5; stroke-opacity: .55; }
.plano__svg .e-balcon { fill: color-mix(in srgb, var(--panel-p) 70%, var(--acento) 18%); stroke: var(--acento); stroke-width: .6; stroke-opacity: .7; }
.plano__svg .e-balcon-canto { fill: color-mix(in srgb, var(--panel-p) 80%, #000 20%); stroke: var(--acento); stroke-width: .5; stroke-opacity: .6; }
.plano__svg .e-barandal { stroke: var(--acento); stroke-width: .6; opacity: .75; }
.plano__svg .e-plano { fill: color-mix(in srgb, var(--panel-p) 62%, #ffffff 18%); stroke: var(--acento); stroke-width: .8; stroke-opacity: .9; }
.plano__svg .e-plano--oscuro { fill: color-mix(in srgb, var(--panel-p) 70%, #000 30%); }
.plano__svg .e-plano--acento { fill: color-mix(in srgb, var(--panel-p) 65%, var(--acento) 35%); }
.plano__svg .e-plano-canto { filter: brightness(.7); }
.plano__svg .e-plano-techo { filter: brightness(1.25); }
.plano__svg .e-orilla { stroke: #bfefff; stroke-width: .6; }
.plano__svg.moviendo .p-techo, .plano__svg.moviendo .p-alberca { filter: none; }
.plano__svg.moviendo .e-plano-canto, .plano__svg.moviendo .e-plano-techo { filter: none; }
.plano__svg .e-sombra { fill: #000; opacity: .28; pointer-events: none; }
.plano__svg .e-sombra-linea { fill: none; stroke: #000; opacity: .25; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.plano__svg .e-texto { fill: var(--tenue-p); letter-spacing: .12em; font-weight: 600; }
/* hojas de palmera: verde oscuro y sin contorno marcado, para que no se vean de caricatura */
.plano__svg .e-hoja { fill: #2a5e33; stroke: #234f2b; stroke-width: .3; opacity: .95; }
.plano__svg .e-hoja-b { fill: #1c4224; stroke: #18391f; stroke-width: .3; opacity: .95; }