/* Mientras carga el mapa 3D del hero se dibuja el plano de la planta, de izquierda a derecha.
   Los planos los genera sitio/planos_carga.py. La planta 3D aparece con la clase f-lista: cuando ya cargó
   y pasaron al menos 3 segundos, para que se alcance a ver el dibujo. Sin 3D, el plano se queda completo. */
/* capa propia: así, al trazar, solo se repinta el plano y no todo el encabezado */
#marco .carga-planta{position:absolute;top:3%;bottom:5%;left:var(--carga-izq,38%);right:-1%;pointer-events:none;
  will-change:opacity,transform;transition:opacity .7s ease,transform 1s ease}
#marco .plano{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plano path{fill:none;stroke:var(--violeta);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:planoTraza var(--d,.7s) cubic-bezier(.4,0,.2,1) var(--r,0s) forwards}
.plano path.lineal,.plano path.grilla{animation-timing-function:linear}
.plano .grilla{stroke:#d9d2fc;stroke-width:.6}
.plano .borde{stroke:#b3a5fa;stroke-width:1}
.plano .tubo{stroke-width:1.4}
.plano .cable{stroke:#9b86fb;stroke-width:1}
.plano .pantalla{stroke:#2a2f39;stroke-width:1.4}
.plano .ganado{stroke:#22c55e;stroke-width:1.8}
@keyframes planoTraza{to{stroke-dashoffset:0}}

#marco .carga-texto{position:absolute;right:4%;bottom:5%;margin:0;font-family:var(--titulos);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8c7cf0;transition:opacity .4s ease}
#marco .carga-texto::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:planoPuntos 1.4s steps(4) infinite}
@keyframes planoPuntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* la planta está lista: el plano se desvanece con un leve acercamiento mientras aparece la planta 3D */
html.f-lista #marco .carga-planta{opacity:0;transform:scale(1.08)}
html.f-lista #marco .carga-texto,html.f-sin3d #marco .carga-texto,html.f-ahorro #marco .carga-texto{opacity:0}
html.f-lista #escena{opacity:1;transition:opacity .7s ease .1s}
html.f-lista #etiquetas{opacity:1;transition:opacity .4s ease .5s}
/* en pantalla completa, de una vez */
html.f-viva #marco.explorar #escena,html.f-viva #marco.explorar #etiquetas{opacity:1;transition-delay:0s}
#marco.explorar .carga-planta,#marco.explorar .carga-texto{display:none}
@media (prefers-reduced-motion: reduce){
  .plano path{animation:none;stroke-dashoffset:0}
  #marco .carga-texto::after{animation:none;content:"..."}
}
@media (max-width:900px){
  #marco .carga-planta{top:4%;right:3%;bottom:12%;left:3%}
  #marco .carga-texto{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:2%;white-space:nowrap}
}