/* ==========================================================
   V7 · Modo Consulta — base: tokens, escenario, cabecera, portada, barra y escenas.
   Los bloques están en bloques.css. Marca desde ../../shared/css/tokens.css.
   ========================================================== */
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --ff-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Superficies (oscuro "centro de operaciones") */
  --fondo: #050A14;
  --panel: rgba(9, 16, 30, .74);
  --panel-solido: #0B1424;
  --panel-2: rgba(20, 31, 52, .72);
  --linea: rgba(255, 255, 255, .09);
  --linea-2: rgba(255, 255, 255, .18);
  --texto: #EEF3FB;
  --texto-2: #B3BFD3;
  --texto-3: #8592AB;

  /* Luz: color de la unidad activa. Azul SL aclarado para que funcione sobre fondo oscuro. */
  --luz-sl: #5B93FF;
  --luz: var(--luz-sl);
  --luz-suave: color-mix(in srgb, var(--luz) 16%, transparent);
  --luz-borde: color-mix(in srgb, var(--luz) 45%, transparent);

  --radio: 18px;
  --radio-sm: 10px;
  --cabecera-h: 64px;
  --muelle-h: 76px;
  --ancho: 1320px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --entrada: cubic-bezier(.16, 1, .3, 1);
}
.u-sl { --luz: var(--luz-sl); }
.u-log { --luz: var(--c-log); }
.u-om { --luz: var(--c-om); }
.u-ec { --luz: var(--c-ec); }
.u-rental { --luz: var(--c-rental); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera-h) + var(--muelle-h) + 16px); }
body {
  margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--texto);
  font-family: var(--ff-text); font-size: 1rem; line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 6px; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--texto); color: var(--fondo); border-radius: 8px; font-weight: 600; }
.saltar:focus { top: 12px; }
.mono { font-family: var(--ff-mono); }
.rotulo { font-family: var(--ff-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }

/* ---------------------------------------------------------- escenario (fondo vivo) */
.escenario { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--fondo); transition: --luz .8s; }
.escenario__capa { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--entrada), visibility 0s .9s; }
.escenario__capa.activa { opacity: 1; visibility: visible; transition: opacity .9s var(--entrada), visibility 0s; }

.escenario__faena img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; /* la regla global img{max-width:100%} dejaba una franja a la derecha */ object-fit: cover; opacity: 0; transition: opacity 1.4s ease; filter: saturate(.55) brightness(.62) contrast(1.05); }
.escenario__faena img.visible { opacity: 1; animation: deriva 40s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }

.escenario__mapa, .escenario__mapa.maplibregl-map { position: absolute; background: #0d1628; } /* maplibre-gl.css le pone position: relative */
.escenario__mapa .maplibregl-canvas { outline: none; }
.escenario__mapa .maplibregl-ctrl-attrib { background: rgba(5, 10, 20, .6) !important; color: var(--texto-3); font-size: 10px; }
.escenario__mapa .maplibregl-ctrl-attrib a { color: var(--texto-2); }
.escenario__mapa .maplibregl-ctrl-group { background: var(--panel-solido); border: 1px solid var(--linea); }
.escenario__mapa .maplibregl-ctrl-group button + button { border-top-color: var(--linea); }
.escenario__mapa .maplibregl-ctrl-icon { filter: invert(1) opacity(.8); }

.escenario__showroom { display: grid; place-items: center; }
.showroom__luz { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--luz) 38%, transparent) 0%, transparent 60%); filter: blur(10px); top: 50%; left: 64%; translate: -50% -58%; }
.showroom__piso { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background:
  linear-gradient(180deg, transparent, rgba(5,10,20,.9)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 80px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 80px);
  transform: perspective(600px) rotateX(62deg); transform-origin: bottom; opacity: .7; }
.showroom__equipo { position: absolute; left: 64%; top: 44%; width: min(62vw, 980px); translate: -50% -50%; filter: drop-shadow(0 40px 40px rgba(0,0,0,.6)) drop-shadow(0 0 60px color-mix(in srgb, var(--luz) 25%, transparent));
  transform: perspective(1200px) rotateY(var(--giro-y, 0deg)) rotateX(var(--giro-x, 0deg)); transition: transform .4s ease-out, opacity .6s; }
.showroom__equipo.cambiando { opacity: 0; }
.showroom__equipo { z-index: 1; }
/* Nombre del equipo en grande, detrás de la máquina (la posición la pone escenario.js según el visor). */
.showroom__rotulo { display: none; z-index: 0; position: absolute; right: var(--gutter); top: calc(var(--cabecera-h) + var(--muelle-h) + 56px); text-align: right; font-family: var(--ff-mono); color: var(--texto-2); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.showroom__rotulo b { display: block; font-family: var(--ff-title); text-transform: uppercase; font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: .95; letter-spacing: .02em; color: color-mix(in srgb, var(--luz) 60%, #fff); opacity: .9; }
@media (max-width: 699px) { .showroom__rotulo { font-size: .7rem; } .showroom__rotulo b { font-size: clamp(2rem, 11vw, 3rem); } }

.escenario__red { width: 100%; height: 100%; }

.escenario__tinte { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--luz) 22%, transparent), transparent 55%),
  linear-gradient(90deg, rgba(5,10,20,.85) 0%, rgba(5,10,20,.35) 45%, rgba(5,10,20,.1) 70%),
  linear-gradient(0deg, rgba(5,10,20,.92) 0%, transparent 38%); }
body.estado-inicio .escenario__tinte { background:
  radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--luz) 26%, transparent), transparent 60%),
  radial-gradient(60% 60% at 50% 55%, rgba(5,10,20,.35), rgba(5,10,20,.85)); }
.escenario__grano { position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Cuadrícula fina de "consola" */
.escenario::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); }

/* Etiqueta de ruta / mapa */
.escenario__info { position: fixed; z-index: 2; left: var(--gutter); bottom: 16px; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-family: var(--ff-mono); font-size: .72rem; color: var(--texto-2); background: rgba(5,10,20,.7); border: 1px solid var(--linea); backdrop-filter: blur(8px); }
.escenario__info.visible { display: inline-flex; }
.escenario__info .ico { color: var(--luz); }

/* Marcadores del mapa */
.marcador { position: relative; width: 16px; height: 16px; }
.marcador__punto { position: absolute; inset: 3px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 3px rgba(5,10,20,.8), 0 0 18px var(--luz); }
.marcador__pulso { position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid var(--luz); opacity: 0; animation: pulso 2.4s ease-out infinite; }
.marcador--oficina .marcador__punto { background: #fff; box-shadow: 0 0 0 3px var(--luz), 0 0 20px var(--luz); }
/* MapLibre posiciona el marcador con transform: la escala va en el punto, no en el contenedor. */
.marcador__punto { transition: transform .3s; }
.marcador.activo { z-index: 2; }
.marcador.activo .marcador__punto { transform: scale(1.5); }
.marcador.activo .marcador__nombre { border-color: var(--luz); background: var(--luz); color: #050A14; }
.marcador__nombre { position: absolute; left: 50%; top: 22px; translate: -50% 0; white-space: nowrap; font-family: var(--ff-mono); font-size: .7rem; font-weight: 500; letter-spacing: .04em; color: #fff; padding: 2px 8px; border-radius: 6px; background: rgba(5,10,20,.78); border: 1px solid var(--linea); }
@keyframes pulso { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------------------------------------------------------- cabecera */
.cabecera { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--cabecera-h); display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(5,10,20,.85), rgba(5,10,20,0)); }
.cabecera__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-left: 290px; } /* deja espacio a la cinta DEMO */
.cabecera__marca img { height: 26px; width: auto; }
body.estado-inicio .cabecera__marca { opacity: 0; pointer-events: none; }
.cabecera__estado { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .06em; color: var(--texto-3); padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; background: rgba(5,10,20,.5); }
.cabecera__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.cabecera__estado[data-estado="ia"]::before { background: #4ADE80; box-shadow: 0 0 10px #4ADE80; }
.cabecera__estado[data-estado="local"]::before { background: var(--c-rental); }
/* Selector Haiku / DeepSeek (comparación de la demo; solo con ?ia y si el Worker tiene ambos modelos) */
.cabecera__ia { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--linea); border-radius: 999px; background: rgba(5,10,20,.5); }
.cabecera__ia[hidden] { display: none; }
.cabecera__ia button { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .04em; color: var(--texto-3); background: none; border: 0; border-radius: 999px; padding: 4px 10px; min-height: 28px; cursor: pointer; transition: background .2s, color .2s; }
.cabecera__ia button:hover { color: var(--texto); }
.cabecera__ia button[aria-pressed="true"] { background: var(--luz-suave); color: var(--texto); box-shadow: inset 0 0 0 1px var(--luz-borde); }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.boton-fantasma { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea-2); background: rgba(5,10,20,.45); color: var(--texto); font-size: .85rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(10px); transition: border-color .2s, background .2s; }
.boton-fantasma:hover { border-color: var(--luz-borde); background: var(--luz-suave); }
.boton-icono { width: 40px; padding: 0; justify-content: center; }

/* ---------------------------------------------------------- portada */
main { position: relative; z-index: 1; }
.inicio { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--cabecera-h) + 24px) var(--gutter) 64px; }
body.estado-escenas .inicio { display: none; }
.inicio__logo { height: clamp(34px, 5vw, 52px); width: auto; margin-bottom: clamp(28px, 5vh, 48px); }
/* Título en una sola línea desde tablet (14-10, diseñador): el tamaño se ajusta al ancho (unos 31 caracteres
   en Oswald mayúscula ≈ 15,5em); en celular no cabe legible y vuelve a dos líneas (ver media de móvil). */
.inicio__titulo { font-family: var(--ff-title); font-weight: 600; text-transform: uppercase; font-size: clamp(2rem, 5.2vw, 5.4rem); line-height: 1.08; letter-spacing: .005em; white-space: nowrap; }
/* "podemos ayudarte?" en el color de la unidad que rota en el fondo (13-10, diseñador) */
.inicio__titulo em { font-style: normal; color: var(--luz); }
.inicio__bajada { margin-top: 20px; max-width: 64ch; color: var(--texto-2); font-size: clamp(1rem, 1.3vw, 1.15rem); text-wrap: pretty; }
.inicio__ranura { width: min(100%, 760px); margin-top: clamp(28px, 5vh, 44px); min-height: 68px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 820px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-2); background: rgba(9,16,30,.55); color: var(--texto); font-size: .9rem; backdrop-filter: blur(10px); transition: border-color .2s, background .2s, transform .2s; }
.chip:hover { border-color: var(--luz-borde); background: var(--luz-suave); transform: translateY(-1px); }
.chip .ico { color: var(--luz); }
.inicio__pie { margin-top: 28px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; color: var(--texto-3); font-size: .8rem; }
/* Aviso de privacidad (Ley 21.719): chico pero visible también en celular (.inicio__pie se oculta ahí). */
.inicio__privacidad { margin: 14px auto 0; max-width: 34rem; text-align: center; color: var(--texto-3); font-size: .72rem; line-height: 1.5; }
.inicio__privacidad a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.inicio__privacidad a:hover { color: var(--texto-2); }
.inicio__pie kbd { font-family: var(--ff-mono); font-size: .72rem; padding: 1px 6px; border: 1px solid var(--linea-2); border-radius: 5px; color: var(--texto-2); }

/* ---------------------------------------------------------- barra de consulta */
.barra { view-transition-name: barra; position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 64px; padding: 6px 6px 6px 18px;
  border-radius: 999px; background: rgba(9,16,30,.82); border: 1px solid var(--linea-2); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--luz) 8%, transparent); transition: border-color .25s, box-shadow .25s; }
.barra:focus-within { border-color: var(--luz-borde); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--luz) 18%, transparent), 0 0 40px color-mix(in srgb, var(--luz) 25%, transparent); }
.barra__chispa { color: var(--luz); font-size: 1.15rem; display: inline-flex; }
.barra input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--texto); }
.barra input::placeholder { color: var(--texto-3); transition: opacity .3s; }
.barra input.rotando::placeholder { opacity: 0; }
.barra__boton { flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; color: var(--texto-2); font-size: 1.15rem; transition: background .2s, color .2s; }
.barra__boton:hover { background: rgba(255,255,255,.07); color: var(--texto); }
.barra__enviar { background: var(--luz); color: #050A14; }
.barra__enviar:hover { background: color-mix(in srgb, var(--luz) 80%, #fff); color: #050A14; }
.barra__boton[hidden] { display: none; }
.barra__contador { position: absolute; right: 124px; bottom: -22px; font-family: var(--ff-mono); font-size: .68rem; color: var(--texto-3); opacity: 0; transition: opacity .2s; }
.barra:focus-within .barra__contador.cerca { opacity: 1; }

/* Muelle: donde queda la barra cuando hay escenas */
.muelle { position: fixed; z-index: 25; left: 0; right: 0; top: var(--cabecera-h); padding: 6px var(--gutter) 0; display: none; justify-content: center; pointer-events: none; }
.muelle .barra { max-width: 760px; min-height: 56px; pointer-events: auto; }
.muelle .barra input { height: 44px; }
.muelle .barra__boton { width: 44px; height: 44px; }
body.estado-escenas .muelle { display: flex; padding-bottom: 16px; background: linear-gradient(180deg, rgba(5,10,20,.8), rgba(5,10,20,0)); }
body.estado-escenas .cabecera { background: rgba(5,10,20,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* ---------------------------------------------------------- escenas */
.escenas { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: calc(var(--cabecera-h) + var(--muelle-h)) var(--gutter) 40vh; }
/* El mapa del fondo se puede arrastrar por los espacios libres entre paneles. */
.escenas, .escena, .escena__cuerpo, .escena__principal, .escena__lateral { pointer-events: none; }
.escena__ventana > *, .escena__principal > *, .escena__lateral > *, .escena__sugerencias > *, .escena__error { pointer-events: auto; }
.escena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-top: 12px; scroll-margin-top: calc(var(--cabecera-h) + var(--muelle-h)); }
.escena > * { grid-column: 1; min-width: 0; }
.escena + .escena { margin-top: 40px; padding-top: 28px; border-top: 1px dashed var(--linea); }
.escena__encabezado { display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.escena__ventana { display: flex; flex-direction: column; gap: 16px; pointer-events: none; }
.escena__encabezado > *, .escena__ventana > * { pointer-events: auto; }
/* Celular y tablet: en "Trabajo" el formulario va antes que el contenido. */
@media (max-width: 1099px) {
  .escena.lateral-primero > .escena__lateral { order: 1; }
  .escena.lateral-primero > .escena__cuerpo { order: 2; }
  .escena.lateral-primero > .escena__sugerencias { order: 3; }
}
.escena__meta { display: flex; align-items: center; gap: 12px; }
.escena__consulta { font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 300; text-transform: uppercase; /* Oswald siempre en mayúsculas (diseñador) */ line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.escena__consulta:focus { outline: none; }
.escena__consulta::before { content: "“"; color: var(--luz); }
.escena__consulta::after { content: "”"; color: var(--luz); }

.entendi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; }
.entendi__ficha { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--luz-borde); background: rgba(5,10,20,.7); font-family: var(--ff-mono); font-size: .78rem; color: var(--texto); backdrop-filter: blur(8px); animation: aparecer .5s var(--entrada) both; animation-delay: calc(var(--i, 0) * 70ms); }
.entendi__ficha span { color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; }
.entendi__ficha.provisional { border-style: dashed; opacity: .75; }
button.entendi__ficha:hover { background: var(--luz-suave); }
.entendi__ficha input { width: 16ch; background: none; border: 0; outline: none; font: inherit; color: var(--texto); }

.respuesta { max-width: 720px; }
.respuesta__pasos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-family: var(--ff-mono); font-size: .72rem; color: var(--texto-3); }
.respuesta__paso { display: inline-flex; align-items: center; gap: 6px; }
.respuesta__paso::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.respuesta__paso.hecho { color: var(--texto-2); }
.respuesta__paso.hecho::before { background: var(--luz); }
.respuesta__paso.activo { color: var(--texto); }
.respuesta__paso.activo::before { background: var(--luz); animation: parpadeo 1s infinite; }
@keyframes parpadeo { 50% { opacity: .2; } }
.respuesta__texto { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.65; color: var(--texto); min-height: 1.6em; }
.respuesta__texto.escribiendo::after { content: ""; display: inline-block; width: .5em; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--luz); animation: parpadeo .8s steps(2) infinite; }
.respuesta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.fuente { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: .7rem; color: var(--texto-2); padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--linea); }
.fuente .ico { color: var(--luz); width: 1.1em; height: 1.1em; }
.respuesta__aviso { font-size: .75rem; color: var(--texto-3); flex-basis: 100%; }
.respuesta__modo { font-family: var(--ff-mono); font-size: .68rem; color: var(--texto-3); margin-left: auto; }

.escena__cuerpo { display: grid; gap: 18px; align-items: start; }
.escena__cuerpo:empty { display: none; }
.escena__principal { display: grid; gap: 18px; min-width: 0; }
.escena__lateral { min-width: 0; display: grid; gap: 18px; }
.escena__lateral:empty { display: none; }

/* Visor: ventana enmarcada donde se ve el escenario de fondo (mapa, showroom, faena). */
.escena__visor { display: none; position: relative; min-height: 260px; border-radius: var(--radio); pointer-events: none;
  border: 1px solid var(--luz-borde); box-shadow: inset 0 0 50px rgba(5,10,20,.55), 0 0 36px color-mix(in srgb, var(--luz) 14%, transparent); }
.escena__visor::before { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .9;
  background:
    linear-gradient(var(--luz), var(--luz)) left top / 18px 2px no-repeat, linear-gradient(var(--luz), var(--luz)) left top / 2px 18px no-repeat,
    linear-gradient(var(--luz), var(--luz)) right top / 18px 2px no-repeat, linear-gradient(var(--luz), var(--luz)) right top / 2px 18px no-repeat,
    linear-gradient(var(--luz), var(--luz)) left bottom / 18px 2px no-repeat, linear-gradient(var(--luz), var(--luz)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--luz), var(--luz)) right bottom / 18px 2px no-repeat, linear-gradient(var(--luz), var(--luz)) right bottom / 2px 18px no-repeat; }
.escena.con-visor > .escena__visor { display: block; }
/* Showroom: sin marco ni rótulo; la máquina flota grande sobre el fondo y desborda el espacio. */
.escena.visor-libre > .escena__visor { border-color: transparent; box-shadow: none; min-height: 300px; }
.escena.visor-libre > .escena__visor::before, .escena.visor-libre .visor__rotulo { display: none; }
.visor__rotulo { position: absolute; left: 18px; bottom: 16px; max-width: calc(100% - 36px); font-family: var(--ff-mono); font-size: .72rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor__rotulo:not(:empty) { padding: 6px 10px; border-radius: 8px; background: rgba(5,10,20,.72); border: 1px solid var(--linea); backdrop-filter: blur(6px); }
.visor__rotulo .ico { color: var(--luz); vertical-align: -.25em; margin-right: 6px; }
@media (max-width: 699px) {
  .visor__rotulo { font-size: .66rem; }
  .escena__sugerencias .sugerencias__lista { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .sugerencias__lista::-webkit-scrollbar { display: none; }
  .sugerencias__lista .chip { scroll-snap-align: start; }
}
.escena__sugerencias { display: grid; gap: 10px; margin-top: 4px; }
.escena__sugerencias:empty { display: none; }
.sugerencias__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.escena__sugerencias .chip { font-size: .86rem; min-height: 38px; white-space: nowrap; }
.escena__error { padding: 12px 16px; border-radius: var(--radio-sm); border: 1px solid rgba(255,137,50,.4); background: rgba(255,137,50,.08); color: var(--texto); font-size: .9rem; }

/* ---------------------------------------------------------- panel de vidrio (base de todos los bloques) */
.panel { position: relative; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); padding: clamp(18px, 2.2vw, 28px); container-type: inline-size; }
.panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--luz), transparent); opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--luz) 10%, transparent), transparent 60%); }
  .panel:hover::after { opacity: 1; }
}
.panel__cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel__cabeza .ico { color: var(--luz); }
.panel__titulo { font-family: var(--ff-title); font-size: clamp(1.3rem, 2.2vw, 1.75rem); text-transform: uppercase; letter-spacing: .01em; }
.entra { animation: aparecer .7s var(--entrada) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Aviso flotante */
.aviso { position: fixed; z-index: 60; left: 50%; bottom: 28px; translate: -50% 20px; opacity: 0; padding: 10px 16px; border-radius: 999px; background: var(--texto); color: var(--fondo); font-size: .88rem; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: opacity .25s, translate .25s; pointer-events: none; }
.aviso.visible { opacity: 1; translate: -50% 0; }

/* ---------------------------------------------------------- escritorio: consola */
@media (min-width: 1100px) {
  /* Consola: la pregunta arriba a todo el ancho; debajo, la respuesta a la izquierda y, a su misma
     altura, el visor (si hay mapa o showroom) o el cotizador/formulario (fijo al hacer scroll). */
  .escena { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); column-gap: 18px; }
  .escena > .escena__encabezado { grid-column: 1 / -1; grid-row: 1; }
  .escena > .escena__ventana { grid-column: 1; grid-row: 2; }
  .escena > .escena__cuerpo { grid-column: 1; grid-row: 3; }
  .escena > .escena__sugerencias { grid-column: 1; grid-row: 4; }
  .escena > .escena__lateral { grid-column: 2; grid-row: 2 / span 3; align-self: start; position: sticky; top: calc(var(--cabecera-h) + var(--muelle-h) + 12px); }
  .escena.con-visor > .escena__visor { grid-column: 2; grid-row: 2; min-height: 300px; }
  .escena.visor-libre > .escena__visor { min-height: 380px; }
  .escena.con-visor > .escena__lateral { grid-row: 3 / span 2; }
  /* Sin columna derecha ocupada, el contenido usa todo el ancho. */
  .escena:not(.con-lateral):not(.con-visor) > *, .escena.con-visor:not(.con-lateral) > .escena__cuerpo, .escena.con-visor:not(.con-lateral) > .escena__sugerencias { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- tablet */
@media (max-width: 1099px) {
  .cabecera__estado { display: none; }
}

/* ---------------------------------------------------------- móvil: app */
@media (max-width: 699px) {
  :root { --cabecera-h: 56px; --muelle-h: 0px; --radio: 16px; }
  .cabecera__marca { display: none; }
  /* La cinta DEMO ocupa la izquierda: el selector de IA baja bajo la cabecera, a la derecha. */
  .cabecera__ia { position: fixed; top: calc(var(--cabecera-h) - 2px); right: var(--gutter); }
  .cabecera__ia button { min-height: 26px; padding: 3px 9px; }
  body.estado-inicio .cabecera__marca { opacity: 0; }
  .cabecera__acciones .boton-fantasma span { display: none; }
  .cabecera__acciones .boton-fantasma { width: 40px; padding: 0; justify-content: center; }
  .inicio { justify-content: flex-end; padding-bottom: 28px; }
  .inicio__titulo { font-size: clamp(2.5rem, 12vw, 3.6rem); white-space: normal; max-width: 18ch; text-wrap: balance; }
  .inicio__hola { display: block; }   /* en celular "¡Hola!" va en su propia línea */
  .inicio__pie { display: none; }
  .muelle, body.estado-escenas .muelle { top: auto; bottom: 0; padding: 18px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(5,10,20,.95) 55%, rgba(5,10,20,0)); }
  .escenas { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .escena__ventana { gap: 12px; }
  .escena__consulta { font-size: 1.35rem; }
  .barra { padding-left: 14px; }
  .barra__contador { display: none; }
  .escenario__info { display: none !important; } /* en celular la ruta se ve en su bloque */
  .aviso { bottom: calc(96px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); white-space: normal; text-align: center; border-radius: 16px; }
  .showroom__equipo { left: 50%; top: 30%; width: 96vw; }
  .showroom__luz { left: 50%; }
  .showroom__rotulo { display: none; }
}

/* "Reducir animaciones" (shared/js/movimiento.js) */
html[data-movimiento="reducido"] .escenario__faena img.visible { animation: none; }
html[data-movimiento="reducido"] .marcador__pulso { animation: none; opacity: 0; }
}

/* Botón de tema: sol en oscuro (pasar a claro), luna en claro. Solo en la portada: las escenas son siempre oscuras. */
.boton-tema .ico-luna, html[data-tema="claro"] .boton-tema .ico-sol { display: none; }
html[data-tema="claro"] .boton-tema .ico-luna { display: inline-block; }
body.estado-escenas .boton-tema { display: none; }
.inicio__logo--claro, html[data-tema="claro"] body.estado-inicio .inicio__logo--oscuro { display: none; }
html[data-tema="claro"] body.estado-inicio .inicio__logo--claro { display: block; }

/* Portada en modo oscuro: foto al 80 % (14-10, antes 100 %); las escenas siguen al 100 %. */
html:not([data-tema="claro"]) body.estado-inicio .escenario__faena img.visible { opacity: .8; }

/* Transición de la barra al muelle */
::view-transition-group(barra) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* ---------------------------------------------------------- tema claro (14-10, diseñador)
   Sigue el tema del dispositivo o el botón sol/luna de la cabecera (html[data-tema], lo fija el script del <head>).
   Primero solo cubría la portada; desde el 14-10 (tarde) también las escenas: paneles blancos, mapa claro
   (estilo "positron" de OpenFreeMap, ver escenario.js), foto de faena aclarada y showroom con piso claro.
   El modo oscuro no cambia: todo lo de abajo cuelga de html[data-tema="claro"].
   Texto en color de unidad: --luz-texto y --luz-tinta (desde el 15-10 = el color principal tal cual; antes 62 % / 50 % con tinta).
   Texto sobre fondo --luz: --luz-on (desde el 15-10, blanco en todos, pedido del diseñador). */
:root { --luz-on: #050A14; }
html[data-tema="claro"] body {
  color-scheme: light;
  --fondo: #F3F6FB;
  --panel: rgba(255, 255, 255, .84);
  --panel-solido: #FFFFFF;
  --panel-2: rgba(241, 245, 251, .9);
  --texto: #0B1220;
  --texto-2: #364258;
  --texto-3: #56627A;
  --linea: rgba(11, 18, 32, .1);
  --linea-2: rgba(11, 18, 32, .16);
  --luz-sl: #0956F5;
  --tenue: rgba(11, 18, 32, .035);   /* reemplaza los rgba(255,255,255,.03) del oscuro */
  --compacta: rgba(241, 245, 251, .9);
  background: var(--fondo);
}
html[data-tema="claro"] :is(body, .u-sl, .u-log, .u-om, .u-ec, .u-rental) {
  /* 15-10 (diseñador, a prueba): en claro, los colores principales tal cual (antes 62 % y 50 % mezclados con tinta). */
  --luz-texto: var(--luz);
  --luz-tinta: var(--luz);
  --luz-suave: color-mix(in srgb, var(--luz) 14%, transparent);
  --luz-borde: color-mix(in srgb, var(--luz) 50%, transparent);
}
html[data-tema="claro"] :is(body, .u-sl, .u-log, .u-om, .u-ec, .u-rental) { --luz-on: #FFFFFF; }   /* 15-10 (diseñador): texto blanco en todos los botones de color (antes tinta sobre los colores claros) */

/* Logos a color */
.cabecera__marca .logo--claro, html[data-tema="claro"] .cabecera__marca .logo--oscuro { display: none; }
html[data-tema="claro"] .cabecera__marca .logo--claro { display: block; }

/* Escenario */
html[data-tema="claro"] .escenario { background: var(--fondo); }
html[data-tema="claro"] .escenario__faena img { filter: saturate(.85) brightness(1.02); }
html[data-tema="claro"] .escenario__faena img.visible { opacity: .35; }
html[data-tema="claro"] body.estado-inicio .escenario__faena img.visible { opacity: .27; }   /* 14-10: .62 → .47 → .27 */
html[data-tema="claro"] .escenario__tinte { background:
  radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--luz) 18%, transparent), transparent 55%),
  linear-gradient(90deg, rgba(243,246,251,.88) 0%, rgba(243,246,251,.4) 45%, rgba(243,246,251,.08) 70%),
  linear-gradient(0deg, rgba(243,246,251,.92) 0%, transparent 38%); }
html[data-tema="claro"] body.estado-inicio .escenario__tinte { background:
  radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--luz) 30%, transparent), transparent 62%),
  radial-gradient(60% 60% at 50% 55%, rgba(243,246,251,.72), rgba(243,246,251,.32)); }
html[data-tema="claro"] .escenario__grano { opacity: .04; }
html[data-tema="claro"] .escenario::after { background-image: linear-gradient(rgba(11,18,32,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,18,32,.04) 1px, transparent 1px); }
html[data-tema="claro"] .escenario__mapa, html[data-tema="claro"] .escenario__mapa.maplibregl-map { background: #E9EEF5; }
html[data-tema="claro"] .escenario__mapa .maplibregl-ctrl-attrib { background: rgba(255,255,255,.75) !important; }
html[data-tema="claro"] .escenario__mapa .maplibregl-ctrl-icon { filter: none; }
html[data-tema="claro"] .marcador__punto { box-shadow: 0 0 0 3px #fff, 0 0 14px var(--luz); }
html[data-tema="claro"] .marcador--oficina .marcador__punto { background: #fff; box-shadow: 0 0 0 3px var(--luz), 0 0 14px var(--luz); }
html[data-tema="claro"] .marcador__nombre { background: rgba(255,255,255,.92); color: var(--texto); border-color: var(--linea-2); }
html[data-tema="claro"] .marcador.activo .marcador__nombre { color: var(--luz-on); }
html[data-tema="claro"] .showroom__piso { background:
  linear-gradient(180deg, transparent, rgba(243,246,251,.95)),
  repeating-linear-gradient(90deg, rgba(11,18,32,.07) 0 1px, transparent 1px 80px),
  repeating-linear-gradient(0deg, rgba(11,18,32,.07) 0 1px, transparent 1px 80px); }
html[data-tema="claro"] .showroom__equipo { filter: drop-shadow(0 36px 30px rgba(11,18,32,.28)) drop-shadow(0 0 50px color-mix(in srgb, var(--luz) 22%, transparent)); }
html[data-tema="claro"] .showroom__rotulo b { color: var(--luz-texto); }
html[data-tema="claro"] :is(.escenario__info, .visor__rotulo:not(:empty)) { background: rgba(255,255,255,.85); }

/* Cabecera, muelle y barra */
html[data-tema="claro"] .cabecera { background: linear-gradient(180deg, rgba(243,246,251,.9), rgba(243,246,251,0)); }
html[data-tema="claro"] body.estado-escenas .cabecera { background: rgba(243,246,251,.85); }
html[data-tema="claro"] body.estado-escenas .muelle { background: linear-gradient(180deg, rgba(243,246,251,.85), rgba(243,246,251,0)); }
@media (max-width: 699px) {
  html[data-tema="claro"] .muelle, html[data-tema="claro"] body.estado-escenas .muelle { background: linear-gradient(0deg, rgba(243,246,251,.96) 55%, rgba(243,246,251,0)); }
}
html[data-tema="claro"] :is(.cabecera__estado, .cabecera__ia, .boton-fantasma) { background: rgba(255,255,255,.7); }
html[data-tema="claro"] .chip { background: rgba(255,255,255,.72); border-color: color-mix(in srgb, var(--luz) 30%, rgba(11,18,32,.12)); }
html[data-tema="claro"] .chip:hover { background: color-mix(in srgb, var(--luz) 14%, #fff); }
/* Caja de consulta: fondo claro + detalles en el color de la unidad (borde, chispa, botón, foco) */
html[data-tema="claro"] .barra { background: rgba(255,255,255,.92); border-color: color-mix(in srgb, var(--luz) 45%, transparent);
  box-shadow: 0 18px 50px rgba(11,18,32,.12), 0 0 0 6px color-mix(in srgb, var(--luz) 12%, transparent); }
html[data-tema="claro"] .barra:focus-within { border-color: var(--luz-texto);
  box-shadow: 0 18px 50px rgba(11,18,32,.14), 0 0 0 6px color-mix(in srgb, var(--luz) 22%, transparent); }
html[data-tema="claro"] .barra__boton:hover { background: rgba(11,18,32,.06); }
html[data-tema="claro"] .barra__enviar { background: var(--luz-texto); color: #fff; }
html[data-tema="claro"] .barra__enviar:hover { background: color-mix(in srgb, var(--luz-texto) 85%, #000); color: #fff; }
html[data-tema="claro"] :focus-visible { outline-color: var(--luz-texto); }

/* Escenas y paneles */
html[data-tema="claro"] .panel { box-shadow: 0 18px 44px rgba(11,18,32,.1), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-tema="claro"] .entendi__ficha { background: rgba(255,255,255,.85); }
html[data-tema="claro"] .escena__visor { box-shadow: inset 0 0 40px rgba(255,255,255,.35), 0 0 30px color-mix(in srgb, var(--luz) 14%, transparent); }
html[data-tema="claro"] :is(.fuente, .boton--sec, .b-servicio__proyecto, .filtro, .tel__prefijo, .resumen-solicitud, .tabs, .ventas__barra, .pilar, .b-industrias span, .proyecto, .cliente, .oficina, .b-noticias .sl-news__item, .b-noticias .sl-news__media) { background: var(--tenue); }
html[data-tema="claro"] .filtro[aria-pressed="true"] { background: var(--luz); }
html[data-tema="claro"] .oficina.activa, html[data-tema="claro"] a.b-servicio__proyecto:hover, html[data-tema="claro"] .boton--sec:hover { background: var(--luz-suave); }
html[data-tema="claro"] .tarjeta-unidad { background: linear-gradient(160deg, color-mix(in srgb, var(--luz) 14%, transparent), var(--tenue) 60%); }
html[data-tema="claro"] .equipo { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--luz) 16%, transparent), var(--tenue) 70%); }
html[data-tema="claro"] .equipo:hover, html[data-tema="claro"] .equipo[aria-pressed="true"] { box-shadow: 0 16px 36px rgba(11,18,32,.14), 0 0 26px color-mix(in srgb, var(--luz) 18%, transparent); }
html[data-tema="claro"] :is(.equipo img, .b-ficha__img img) { filter: drop-shadow(0 12px 12px rgba(11,18,32,.25)); }
html[data-tema="claro"] .b-servicio__media::after { background: linear-gradient(0deg, rgba(255,255,255,.96), transparent 55%); }
@container (min-width: 700px) { html[data-tema="claro"] .b-servicio__media::after { background: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.9)); } }
html[data-tema="claro"] .b-servicio__media .insignia { background: rgba(255,255,255,.9); }
html[data-tema="claro"] .control { background: #fff; }
html[data-tema="claro"] .control--ia { background: color-mix(in srgb, var(--luz) 7%, #fff); }
html[data-tema="claro"] .campo__error { color: #C62828; }
html[data-tema="claro"] .control[aria-invalid="true"] { border-color: #C62828; }
html[data-tema="claro"] .completitud__barra { background: rgba(11,18,32,.08); }
html[data-tema="claro"] .completitud__barra span { box-shadow: none; }
html[data-tema="claro"] .ventas__ficha { background: #fff; }
html[data-tema="claro"] .prioridad--alta { background: rgba(198,40,40,.1); color: #B71C1C; }
html[data-tema="claro"] .prioridad--media { background: rgba(255,198,41,.22); color: #6B5200; }
html[data-tema="claro"] .prioridad--baja { background: rgba(11,18,32,.06); }
html[data-tema="claro"] .b-ruta__mapa { background: radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--luz) 10%, transparent), rgba(255,255,255,.7)); }
html[data-tema="claro"] .b-ruta__rotulo { stroke: rgba(255,255,255,.9); }
html[data-tema="claro"] .hito::before { box-shadow: none; }
html[data-tema="claro"] .b-noticias .is-loading .sl-news__item { background: linear-gradient(90deg, rgba(11,18,32,.03), rgba(11,18,32,.07), rgba(11,18,32,.03)); background-size: 200% 100%; }

/* Texto e íconos en el color de la unidad: oscurecido para que se lea sobre blanco */
html[data-tema="claro"] :is(.inicio__titulo em, .cifra b, .b-ruta__dato b) { color: var(--luz-texto); }
html[data-tema="claro"] :is(.insignia, .enlace, .b-noticias .sl-news__all, .b-noticias .sl-news__fallback a, .equipo__tipo, .campo__ia, .campo__label .req, .hito__cuando, .b-unidad__marca b,
  .barra__chispa, .chip .ico, .panel__cabeza .ico, .b-lista li .ico, .pilar .ico, .oficina b .ico, .b-faq summary .ico, .tarjeta-unidad .ico, a.b-servicio__proyecto > .ico,
  .fuente .ico, .visor__rotulo .ico, .escenario__info .ico, .b-brochure__icono) { color: var(--luz-tinta); }
html[data-tema="claro"] .escena__consulta::before, html[data-tema="claro"] .escena__consulta::after { color: var(--luz-tinta); }
/* Texto sobre fondo del color de la unidad (en oscuro --luz-on es siempre tinta, como antes) */
.boton:not(.boton--sec):not(.boton--wa), .filtro[aria-pressed="true"], .tab[aria-selected="true"] { color: var(--luz-on); }
html[data-tema="claro"] .boton--sec { color: var(--texto); }
html[data-tema="claro"] :is(.filtro[aria-pressed="true"], .tab[aria-selected="true"]) { color: var(--luz-on); }   /* bloques.css se carga después y las dejaba en tinta */
html[data-tema="claro"] .boton--wa { color: #FFFFFF; }   /* 15-10 (diseñador): texto blanco en botones de color; antes #06240f */