/*!
 * lavadora-svg.css — el acabado y el movimiento del dibujo de la lavadora.
 *
 * Va aparte del JS a proposito: el JS pone la GEOMETRIA (que pieza y donde) y
 * esto el ACABADO (color, brillo, giro). Asi se puede retocar el aspecto sin
 * tocar el dibujo, y una pagina con otro tema puede pisarlo.
 */
.lv-svg { display:block; width:100%; height:auto; }

/* --- cuerpo --- */
.lv-sombra  { fill:#000; opacity:.35; }
.lv-filo    { stroke:#7b858e; stroke-width:1; opacity:.30; fill:none; }

/* --- panel --- */
.lv-marca   { fill:#e8eef4; font:600 11px/1 "Segoe UI",system-ui,sans-serif;
              letter-spacing:1.6px; }
.lv-carga   { fill:#7c8792; font:400 7px/1 "Segoe UI",system-ui,sans-serif;
              letter-spacing:.6px; }
.lv-dialcara   { fill:#1a1e22; }
.lv-dialmarca  { stroke:#e8eef4; stroke-width:1.6; stroke-linecap:round; }
.lv-display { fill:#05070a; stroke:#2c3238; stroke-width:1; }
/* Los digitos en cian y con tipo de ancho fijo: es lo que los hace leerse como
   un display y no como texto de la pagina. */
.lv-digitos { fill:#7fe7ff; font:600 15px/1 "Consolas","SF Mono",monospace;
              text-anchor:middle; letter-spacing:1px; }
.lv-tecla      { fill:#2a3036; }
.lv-encendida  { fill:#39d98a; }

/* --- cajon del detergente --- */
.lv-cajon    { fill:#20252a; stroke:#3c444c; stroke-width:.8; }
.lv-cajonasa { fill:#5b656e; }

/* --- puerta --- */
.lv-junta   { fill:none; stroke:#0a0d10; stroke-width:5; opacity:.85; }
.lv-tirador { fill:#e9eef2; opacity:.55; }
/* ⚠️ LA PUERTA DECLARA SU BISAGRA AQUI, y eso resuelve un fallo que costo un
   rato. En la escena de las animaciones la maquina va dentro de un `<g>` con
   `transform`, y ahi **el `svgOrigin` de GSAP deja de funcionar**: la puerta y el
   tambor se quedaban clavados mientras el resto del capitulo —la luz, el
   medidor, el brazo— animaba con normalidad. Ni un error en consola.

   Con `transform-box: fill-box` el origen se mide contra la caja del PROPIO
   elemento, asi que `left center` es su borde izquierdo pase lo que pase por
   encima. Quien anima solo pide `scaleX` y no tiene que saber donde esta la
   bisagra — que ademas es cosa del dibujo, no de la escena.

   Y NO lleva `transition`: la tenia, y peleaba con GSAP, que escribe el
   `transform` fotograma a fotograma. */
.lv-puerta  { transform-box:fill-box; transform-origin:left center; }
/* El fondo del tambor, bien oscuro: es un hueco, y un hueco no tiene luz. Es la
   pieza que da la sensacion de PROFUNDIDAD; sin ella el tambor es un disco. */
.lv-fondo   { fill:#0a0d10; opacity:.42; }
.lv-agujeros{ fill:#000; opacity:.42; }
/* Las paletas llevan su propio degradado (desde el JS); aqui solo el filo, que
   es lo que las separa del tambor cuando las dos son metal. */
.lv-paleta  { stroke:#f2f6f8; stroke-width:.6; stroke-opacity:.35; }
/* El cristal ahumado por encima de todo lo de dentro. Sin esto el acero del
   tambor compite con el cromo del aro y las dos cosas se leen en el mismo
   plano — que es lo que pasaba en la primera version. */
.lv-ahumado { fill:#0b1014; opacity:.26; }
/* El reflejo NO gira con el tambor: la luz esta en el cristal, que esta quieto.
   Si girara, el ojo lo lee como una mancha en la ropa. */
.lv-reflejo { fill:#fff; opacity:.10; }
.lv-agua    { transition:y .8s ease; }
.lv-arofase, .lv-luz { transition:opacity .5s, fill .5s, stroke .5s; }

/* --- CALENTANDO ---
   El aro naranja decia «algo pasa»; esto dice «hay calor». Todo apagado por
   defecto y encendido solo en su fase, para que añadir una señal no toque el JS. */
.lv-caliente     { opacity:0; transition:opacity .8s; }
.lv-calor        { opacity:0; transition:opacity .5s; }
.lv-burbuja      { fill:#ffe0b2; opacity:0; }
.lv-resistencia  { fill:#ffd27f; }
.lv-brasa        { fill:#ff5722; }
.lv-f-calentando .lv-brasa { fill:#ff6d3a; }

/* ⚠️ El agua fria se APAGA al calentar, no se deja debajo. Superponer el ambar
   sobre el azul da un VERDE OLIVA —dos tintes casi complementarios mezclados—
   que no se lee ni como frio ni como caliente, solo como sucio. Hay que cambiar
   de agua, no pintar encima.

   ⚠️ Y el `:not(.lv-caliente)` no es adorno: el rectangulo caliente lleva TAMBIEN
   la clase `.lv-agua` (para que el nivel lo mueva un solo bucle), asi que sin el
   `:not` este selector lo apagaria a el tambien. Funcionaria por el orden de las
   reglas, que es justo lo que se rompe al reordenar el archivo sin que nadie
   relacione una cosa con la otra. */
.lv-f-calentando .lv-agua:not(.lv-caliente) { opacity:.12; }
.lv-f-calentando .lv-caliente { opacity:.92; }
.lv-f-calentando .lv-calor    { opacity:1; }
/* La resistencia no brilla fijo: late. Un naranja constante se lee como una
   pieza pintada; latiendo se lee como algo encendido. */
.lv-f-calentando .lv-brasa       { animation:lv-latir 1.9s ease-in-out infinite; }
.lv-f-calentando .lv-resistencia { animation:lv-ascua 1.9s ease-in-out infinite; }
/* Las burbujas: escalonadas y a ritmos distintos, porque a la vez y al mismo
   paso se leen como una fila de puntos subiendo, no como agua hirviendo. */
.lv-f-calentando .lv-burbuja { animation:lv-subir 3.4s ease-in infinite; }
.lv-f-calentando .lv-b0 { animation-duration:3.1s; animation-delay:0s;   }
.lv-f-calentando .lv-b1 { animation-duration:4.0s; animation-delay:.7s;  }
.lv-f-calentando .lv-b2 { animation-duration:3.4s; animation-delay:1.4s; }
.lv-f-calentando .lv-b3 { animation-duration:4.4s; animation-delay:.35s; }
.lv-f-calentando .lv-b4 { animation-duration:3.7s; animation-delay:2.1s; }

@keyframes lv-latir { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes lv-ascua { 0%,100% { fill:#ffc266; } 50% { fill:#fff3d6; } }
/* Suben ~85 px, que es del fondo del tambor a la superficie del agua. Aparecen y
   se desvanecen dentro del recorrido: reventar arriba de golpe canta. */
@keyframes lv-subir {
  0%   { transform:translateY(0)     scale(.6); opacity:0; }
  15%  { opacity:.85; }
  70%  { opacity:.75; }
  100% { transform:translateY(-85px) scale(1.15); opacity:0; }
}

/* --- filtro y patas --- */
.lv-filtro  { fill:#20252a; stroke:#3c444c; stroke-width:.8; }
.lv-filtro2 { fill:none; stroke:#3c444c; stroke-width:.8; }
.lv-pata    { fill:#0f1215; }

/* --- el giro ---
   `transform-box: fill-box` + `transform-origin: center` es lo que hace que gire
   sobre SU centro y no sobre el (0,0) del SVG. Sin eso el tambor sale volando
   fuera del dibujo — y es el error clasico al animar SVG. */
.lv-tambor { transform-box:fill-box; transform-origin:center; }
.lv-giro-no     { animation:none; }
/* Lavar no es girar: es voltear a un lado y a otro. Que lo haga de verdad es la
   diferencia entre parecer una lavadora y parecer un ventilador. */
.lv-giro-lento  { animation:lv-voltear 3.2s ease-in-out infinite; }
.lv-giro-rapido { animation:lv-rodar .55s linear infinite; }

@keyframes lv-rodar   { to { transform:rotate(360deg); } }
@keyframes lv-voltear {
  0%, 100% { transform:rotate(-38deg); }
  50%      { transform:rotate(38deg); }
}

@media (prefers-reduced-motion:reduce) {
  .lv-giro-lento, .lv-giro-rapido { animation:none; }
  .lv-f-calentando .lv-brasa, .lv-f-calentando .lv-resistencia,
  .lv-f-calentando .lv-burbuja { animation:none; }
  .lv-f-calentando .lv-burbuja { opacity:.7; }
  .lv-agua { transition:none; }
}