/* ════════════════════════════════════════════════════════════════════════
   CIFRA Automoción · la escena de la cabecera (19-oct-2026)
   «La torre de la nave»: el tablero del taller como una torre de tiempos de carreras,
   cada coche con su elevador, su matrícula y su estado. El León de Marta (1234 KLM)
   pasa de diagnóstico a listo mientras a ella le llega el vídeo del mecánico, acepta el
   presupuesto con un toque (312,40 € IVA incluido) y recibe el aviso de «listo». Taller
   Ruiz, los coches y los importes son los inventados de la web de Automoción. Los
   colores de los estados son los de la nave y no se tocan: el verde solo dice «listo».
   ════════════════════════════════════════════════════════════════════════ */
.t-automocion .escena-viva { --esc-papel: #18191C; --esc-tinta: #F4F4F2; --esc-tinta-2: #969BA1; --esc-linea: #2C2F34; }
.t-automocion .escena-viva__caja { aspect-ratio: 1 / 1.04; }
.t-automocion .ventana { box-shadow: 0 0 0 1px #2C2F34, 0 2.2em 4em -2em rgb(0 0 0 / .8); }

.a-torre { left: 0; top: 0; width: 53%; z-index: 1; }
.a-torre .ventana__cab { position: relative; font-family: "Archivo", sans-serif; font-style: italic; font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.a-torre .ventana__cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: .35em; background: repeating-conic-gradient(#F4F4F2 0 25%, #0E0F11 0 50%) 0 0 / .35em .35em; opacity: .5; }
.a-vivo { display: inline-flex; align-items: center; gap: .4em; font: 500 .9em/1 var(--f-dato); font-style: normal; letter-spacing: .08em; color: #FF5C6C; text-transform: uppercase; }
.a-vivo::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #FF5C6C; animation: latido 1.4s infinite; }
.a-torre .ventana__cuerpo { display: grid; gap: .3em; padding: .7em .7em .8em; }
.a-coche { display: grid; grid-template-columns: 2.1em 1fr auto; align-items: center; gap: .6em; padding: .5em .55em; border-radius: .5em; background: #141518; border-left: .22em solid var(--e, #7A7F85); font-size: .84em; transition: background-color .4s, border-color .4s; }
.a-coche__pos { font: 800 1em/1 "Archivo", sans-serif; font-style: italic; font-stretch: 125%; color: #969BA1; }
.a-coche__que { display: grid; gap: .15em; min-width: 0; }
.a-coche__que b { font: 500 1em/1 var(--f-dato); letter-spacing: .02em; color: #F4F4F2; }
.a-coche__que small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #969BA1; font-size: .92em; }
.a-estado { padding: .32em .6em; border-radius: .3em; font: 500 .82em/1 var(--f-dato); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--et); background: var(--ef); }
.e-recibido { --e: #7A7F85; --et: #C3C7CC; --ef: #2A2E33; }
.e-diag { --e: #2F6FB0; --et: #8DB8E8; --ef: #1A2C40; }
.e-pieza { --e: #D69A2D; --et: #EDC074; --ef: #3A2F16; }
.e-rep { --e: #C2410C; --et: #F5A07A; --ef: #3D2116; }
.e-listo { --e: #1E9D63; --et: #7BE3B3; --ef: #173A30; }
.a-coche--leon { box-shadow: 0 0 0 1px #3A3E44; }
.a-coche--leon.foco { background: #202226; box-shadow: 0 0 0 .14em #FF5C6C; }
.a-coche--leon.e-listo-borde { border-left-color: #1E9D63; }

.a-whats { right: 0; top: 7%; width: 45%; z-index: 2; --esc-papel: #FFFFFF; --esc-tinta: #111B21; --esc-linea: #E9EDEF; }
.a-whats .ventana__cab { background: #075E54; color: #FFFFFF; border: 0; }
.a-whats .ventana__cab small { color: #BFE6DF; }
.a-whats .ventana__cuerpo { height: 25em; padding: .7em; justify-content: flex-end; overflow: hidden; }
.a-whats .burbuja { font-size: .84em; }
.a-video { position: relative; display: grid; place-items: center; height: 5.6em; margin: .35em 0 .2em; border-radius: .5em; background: linear-gradient(135deg, #2A2E33, #0E0F11); color: #FFFFFF; }
.a-video::before { content: ""; width: 0; height: 0; border-left: 1.1em solid #FFFFFF; border-top: .7em solid transparent; border-bottom: .7em solid transparent; margin-left: .3em; }
.a-video span { position: absolute; left: .5em; bottom: .4em; font: 500 .8em/1 var(--f-dato); }
.a-boton { display: block; margin-top: .45em; padding: .5em; border-radius: .5em; text-align: center; font-weight: 600; color: #027EB5; background: #F4F7F6; }
.a-boton.pulsado { background: #D7263D; color: #FFFFFF; }
.a-importe { display: block; margin-top: .2em; font: 500 1.2em/1.2 var(--f-dato); color: #111B21; }

.a-aceptado { left: 3%; top: 60%; z-index: 4; }
.a-avisado { right: 3%; bottom: 3%; z-index: 4; }
.t-automocion .heroe h1 { font-size: clamp(36px, 4.6vw, 66px); }
.t-automocion .cabeza h2, .t-automocion .hablemos__texto h2 { font-size: clamp(30px, 3.5vw, 48px); }
.t-automocion .sello { --esc-sello: #F4F4F2; --esc-sobre-sello: #0E0F11; }

@container (max-width: 440px) {
  .t-automocion .escena-viva__caja { aspect-ratio: 1 / 1.5; font-size: 3.25cqw; }
  .a-torre { width: 100%; }
  .a-whats { width: 78%; top: 44%; }
  .a-whats .ventana__cuerpo { height: 20em; }
  .a-aceptado { left: 0; top: 40%; }
  .a-avisado { bottom: 0; }
}