/* Sala de exhibición 3D: un solo diseño para la vitrina del FAW WHR Lion y para el garaje de los demás vehículos.
   Cuadrícula simétrica (pedido de Charles, 28-10): columna izquierda con lo que se mira (secciones, vistas,
   interruptores), el vehículo solo en el escenario del centro con su nombre, columna
   derecha del mismo ancho con lo que se sabe (versión, información, colores) y abajo tarjetas de igual ancho.
   Nada flota encima del vehículo. Los botones llevan esquinas cortadas en diagonal, como en un juego de carros.
   Todo cabe en la pantalla (D-02); solo el panel de información se desliza por dentro. */
:root {
  --noche: #05070b;
  --azul: #1149a6;
  --luz: #4d8dff;
  --texto: #f3f5f8;
  --tenue: rgba(243, 245, 248, .62);
  --vidrio: rgba(20, 24, 32, .62);
  --vidrio-alto: rgba(30, 35, 46, .78);
  --claro: rgba(255, 255, 255, .07);
  --canto: inset 0 1px 0 rgba(255, 255, 255, .07);
  --linea: rgba(255, 255, 255, .1);
  --titulo: "Montserrat", "Inter Tight", Arial, sans-serif;
  --cuerpo: "Nunito Sans", "Inter Tight", Arial, sans-serif;
  --firma: "Mr Dafoe", cursive;
  /* Cuadrícula */
  --riel: 88px;
  --m: 22px; --cab: 64px; --pie: 30px; --g: 14px; --lado: clamp(236px, 20vw, 300px); --fila: 112px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--noche); color: var(--texto); font: 500 15px/1.45 var(--cuerpo); -webkit-font-smoothing: antialiased; overflow: hidden; height: 100dvh; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--texto); color: var(--noche); padding: 10px 16px; }
.saltar:focus { top: 12px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#notas-revision { --notas-abajo: calc(100dvh - 54px); }

/* Corte en diagonal de dos esquinas: arriba a la izquierda y abajo a la derecha. --c fija el tamaño. */
.spec, .tarjeta, .panel, .colores, .escenario, .muestra, .ico-caja, .cerrar, .etiquetas span, .cara, kbd {
  clip-path: polygon(var(--c, 10px) 0, 100% 0, 100% calc(100% - var(--c, 10px)), calc(100% - var(--c, 10px)) 100%, 0 100%, 0 var(--c, 10px));
}

/* Botones con la figura del manual de SOLOCAR: paralelogramo inclinado con esquinas redondeadas. El fondo
   (--b) lo pinta una capa inclinada detrás; el texto y el ícono quedan derechos. */
.pestana, .vista, .interruptor, .versiones button, .vehiculos a, .vehiculos button, .paso, .ampliar, .abre-vehiculos, .opcion-veh { position: relative; isolation: isolate; background: none; }
.pestana::before, .vista::before, .interruptor::before, .versiones button::before, .vehiculos a::before, .vehiculos button::before, .paso::before, .ampliar::before, .abre-vehiculos::before, .opcion-veh::before {
  content: ""; position: absolute; inset: 0 var(--inc, 6px); z-index: -1; border-radius: 8px; transform: skewX(-16deg);
  background: var(--b, var(--vidrio)); box-shadow: var(--canto); transition: background .2s;
}
.paso::before, .ampliar::before { --inc: 5px; border-radius: 7px; }

/* ------------------------------------------------------------ fondo de la página */
.fondo { position: fixed; inset: 0; z-index: 0; background: radial-gradient(80% 70% at 50% 30%, #161b25, var(--noche) 75%); }

/* ------------------------------------------------------------ cabecera: marca y vehículos */
.cabeza { position: fixed; z-index: 10; top: 0; left: calc(var(--riel, 0px) + var(--m)); right: var(--m); height: var(--cab); display: flex; align-items: center; }
.marca { display: flex; align-items: center; gap: 12px; font: 600 15px var(--titulo); letter-spacing: .02em; white-space: nowrap; }
.marca i { width: 1.5px; height: 20px; background: var(--texto); }
.marca span { font-weight: 800; letter-spacing: .24em; }
/* Vehículos: pestañas centradas en la pantalla, como la fila de carros del garaje de un juego. */
.fila-veh { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; max-width: calc(100% - 480px); }
.vehiculos.desborda { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.vehiculos { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.vehiculos::-webkit-scrollbar { display: none; }
.vehiculos a, .vehiculos button { --c: 8px; flex: none; display: flex; align-items: center; min-height: 40px; padding: 0 16px; --b: var(--vidrio); font: 700 12.5px var(--titulo); color: var(--tenue); white-space: nowrap; transition: color .2s; }
.vehiculos a:hover, .vehiculos button:hover { color: var(--texto); --b: var(--vidrio-alto); }
.vehiculos [aria-current="true"] { --b: var(--azul); color: #fff; }

/* Menú lateral de vehículos: el botón junto a la marca abre la lista completa con buscador. */
.abre-vehiculos { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; --b: var(--vidrio); font: 700 12.5px var(--titulo); color: var(--texto); transition: color .2s; }
.abre-vehiculos:hover, .abre-vehiculos[aria-expanded="true"] { --b: var(--vidrio-alto); }
.abre-vehiculos .ico { width: 18px; height: 18px; }
.abre-vehiculos b { font: 700 11px var(--titulo); color: var(--tenue); }
.cajon { position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
.cajon-velo { position: absolute; inset: 0; background: rgba(2, 3, 6, .55); opacity: 0; transition: opacity .25s; }
.cajon-panel { --c: 22px; position: absolute; top: 0; bottom: 0; left: var(--riel, 0px); width: min(360px, 88vw); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; padding: 18px 18px 20px;
  background: rgba(9, 12, 18, .96); box-shadow: 24px 0 60px -20px #000, var(--canto); transform: translateX(-104%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%); }
.cajon.abierto { pointer-events: auto; visibility: visible; transition: none; }
.cajon.abierto .cajon-velo { opacity: 1; }
.cajon.abierto .cajon-panel { transform: none; }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; }
.cajon-cab h2 { margin: 0; font: italic 800 22px var(--titulo); letter-spacing: -.01em; }
.cajon-buscar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; background: var(--claro); border-radius: 8px; color: var(--tenue); }
.cajon-buscar input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--texto); font: 600 14px var(--cuerpo); outline: none; }
.cajon-buscar input::placeholder { color: var(--tenue); }
.cajon-buscar:focus-within { box-shadow: 0 0 0 2px var(--luz); }
.cajon-lista { display: grid; align-content: start; gap: 6px; overflow-y: auto; padding: 2px 4px; scrollbar-width: thin; }
.opcion-veh { display: flex; align-items: center; min-height: 62px; padding: 8px 24px; --b: var(--vidrio); color: var(--tenue); text-align: left; text-decoration: none; transition: color .2s; }
.opcion-veh:hover { color: var(--texto); --b: var(--vidrio-alto); }
.opcion-veh[aria-current="true"] { --b: var(--azul); color: #fff; }
.opcion-txt { display: grid; gap: 1px; min-width: 0; }
.opcion-txt small { font: 700 10.5px var(--titulo); letter-spacing: .04em; opacity: .75; }
.opcion-txt b { font: 800 15px var(--titulo); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcion-txt em { font: 600 12px var(--cuerpo); font-style: normal; }
.cajon-vacio { margin: 0; text-align: center; color: var(--tenue); font: 600 13px var(--cuerpo); }

/* ------------------------------------------------------------ cuadrícula */
.sala {
  position: fixed; z-index: 5; top: var(--cab); bottom: var(--pie); left: calc(var(--riel, 0px) + var(--m)); right: var(--m);
  display: grid; gap: var(--g); grid-template-columns: var(--lado) minmax(0, 1fr) var(--lado); grid-template-rows: minmax(0, 1fr) var(--fila);
  grid-template-areas: "izq esc der" "fila fila fila";
}
.lado { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.izq { grid-area: izq; } .der { grid-area: der; }

/* Secciones: lista de botones de igual alto. */
.pestanas { display: grid; gap: 6px; }
.pestana { --c: 10px; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; --b: var(--vidrio); font: 700 13.5px var(--titulo); color: var(--tenue); white-space: nowrap; text-align: left; transition: color .2s; }
.pestana .ico { width: 19px; height: 19px; }
.pestana:hover { color: var(--texto); --b: var(--vidrio-alto); }
.pestana[aria-selected="true"] { color: #fff; --b: var(--azul); }
.pestana b { margin-left: auto; font: 700 11px var(--titulo); color: rgba(255, 255, 255, .4); }
.pestana[aria-selected="true"] b { color: rgba(255, 255, 255, .75); }
/* Vistas en cuadro de 2 × 2 y los interruptores debajo, al pie de la columna. */
.lado-b { margin-top: auto; display: grid; gap: 6px; }
.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vistas:empty, .interruptores:empty { display: none; }
.vista { --c: 10px; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 9px; --b: var(--vidrio); font: 700 12px var(--titulo); color: var(--tenue); transition: color .2s; }
.vista .ico { width: 22px; height: 22px; }
.vista:hover { color: var(--texto); --b: var(--vidrio-alto); }
.vista[aria-pressed="true"] { --b: var(--azul); color: #fff; }
.interruptores { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
/* Interruptor: se ve como interruptor (perilla), no como otra opción elegida (D-33). */
.interruptor { --c: 10px; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; --b: var(--vidrio); font: 700 12.5px var(--titulo); color: var(--tenue); }
.interruptor .ico { width: 18px; height: 18px; }
.interruptor i { --c: 4px; position: relative; margin-left: auto; width: 30px; height: 16px; flex: none; background: rgba(255, 255, 255, .18); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); transition: background .2s; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: #fff; transition: transform .2s; }
.interruptor[aria-checked="true"] { color: var(--texto); }
.interruptor[aria-checked="true"] i { background: var(--azul); }
.interruptor[aria-checked="true"] i::after { transform: translateX(14px); }

/* ------------------------------------------------------------ escenario: solo el vehículo y su nombre */
.escenario { --c: 26px; grid-area: esc; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(180deg, rgba(150, 160, 178, .18), rgba(60, 68, 82, .14) 60%, rgba(10, 12, 18, .4)); box-shadow: var(--canto); }
.escena3d, .marcadores, .cotas, .sin3d { position: absolute; inset: 0; }
.escena3d { transition: opacity .35s; }
.garaje.cargando .escena3d { opacity: 0; }
.escena3d { z-index: 2; touch-action: none; }
.escena3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.escena3d canvas:active { cursor: grabbing; }
.sin3d { z-index: 2; display: grid; place-items: center; padding: 90px 24px 24px; }
.sin3d img { max-width: 100%; max-height: 100%; }
/* Nombre arriba al centro del escenario, con las etiquetas debajo. */
.identidad { position: absolute; z-index: 4; top: 16px; left: 0; right: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; text-align: center; }
.nombre { margin: 0; display: flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.nombre b { font: italic 800 50px/.9 var(--titulo); letter-spacing: -.045em; }
.nombre span { margin-left: 8px; font: 400 46px/.8 var(--firma); transform: rotate(-6deg) translateY(.08em); }
.etiquetas { margin: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.etiquetas span { --c: 6px; padding: 5px 10px; background: rgba(10, 13, 19, .55); font: 700 11.5px var(--titulo); color: var(--tenue); }
.etiquetas .sol { background: var(--azul); color: #fff; }
.identidad > * { animation: llega .9s cubic-bezier(.2, .7, .2, 1) both; }
.identidad .etiquetas { animation-delay: .12s; }
.cargando .identidad > * { animation: none; opacity: 0; }
@keyframes llega { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* Barra de carga del modelo, abajo al centro del escenario. */
.carga { position: absolute; z-index: 5; left: 50%; bottom: 22px; width: 180px; height: 4px; margin-left: -90px; background: rgba(255, 255, 255, .12); overflow: hidden; opacity: 0; transition: opacity .3s; pointer-events: none; }
.carga i { position: absolute; inset: 0; background: var(--luz); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .2s; }
.cargando-3d .carga { opacity: 1; }

/* Puntos de detalle y cotas sobre el vehículo. */
.marcadores, .cotas { z-index: 3; pointer-events: none; }
.punto { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: auto; display: grid; place-items: center; transition: opacity .3s; }
.punto::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--texto); transition: inset .2s; }
.punto::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); }
.punto:hover::before { inset: 10px; }
.punto.tapado { opacity: .25; }
.punto.activo::before { background: var(--luz); }
.punto span { position: absolute; left: 44px; white-space: nowrap; padding: 5px 10px; background: rgba(9, 13, 21, .85); font-size: 12px; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.punto:hover span, .punto:focus-visible span { opacity: 1; transform: none; }
.cota { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 4px 10px; background: rgba(9, 13, 21, .82); text-align: center; white-space: nowrap; transition: opacity .3s, background .2s; }
.cota b { display: block; font: 800 15px/1.1 var(--titulo); font-variant-numeric: tabular-nums; }
.cota span { font-size: 11px; color: var(--tenue); font-weight: 700; }
.cota.marcada { background: var(--azul); }
.cota.marcada span { color: var(--texto); }

/* ------------------------------------------------------------ columna derecha: versión, información y colores */
.versiones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.versiones:empty { display: none; }
.versiones button { --c: 10px; min-height: 46px; --b: var(--vidrio); font: 700 13px var(--titulo); color: var(--tenue); transition: color .2s; }
.versiones button:hover { color: var(--texto); --b: var(--vidrio-alto); }
.versiones button[aria-checked="true"] { --b: var(--azul); color: #fff; }
.panel { --c: 18px; flex: 1 1 auto; min-height: 0; container-type: size; display: flex; flex-direction: column; background: var(--vidrio-alto); box-shadow: var(--canto); overflow: hidden; animation: aparece .35s ease; }
.panel:empty { display: none; }
.panel h2 { margin: 0; font: italic 800 21px/1.1 var(--titulo); letter-spacing: -.02em; }
.panel p { margin: 0; color: var(--tenue); }
.info { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; padding: 18px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.info p { font-size: 13.5px; line-height: 1.5; text-align: justify; hyphens: none; }
.datos { margin: 0; display: grid; }
.datos div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.datos dt { color: var(--tenue); font-weight: 600; }
.datos dd { margin: 0; font: 800 13.5px var(--titulo); text-align: right; font-variant-numeric: tabular-nums; }
.info-pie { margin: auto -18px 0; padding: 12px 18px; display: flex; align-items: baseline; justify-content: space-between; background: rgba(255, 255, 255, .05); }
.info-pie span { font: 700 12.5px var(--titulo); color: var(--tenue); }
.info-pie b { font: italic 800 22px/1 var(--titulo); letter-spacing: -.02em; }
.info > :last-child:not(.info-pie) { margin-bottom: 16px; }
.panel .fuente { font-size: 11.5px; color: rgba(243, 245, 248, .45); text-align: left; }
.fuente a { text-decoration: underline; }
.muestra { --c: 12px; flex: none; height: 56px; background: var(--c-m); box-shadow: inset 0 -18px 26px rgba(0, 0, 0, .35), inset 0 12px 20px rgba(255, 255, 255, .3); }
/* Detalle: la foto 4:5 (1080 × 1350) lo más grande que quepa arriba y el texto debajo. */
.det-foto { position: relative; flex: none; height: min(62cqh, 125cqw); aspect-ratio: 4 / 5; align-self: center; background: #000; }
.det-foto img { width: 100%; height: 100%; object-fit: cover; display: block; animation: aparece .5s ease; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.ampliar { --c: 8px; position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; --b: rgba(0, 0, 0, .55); }
.det-texto { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 14px 18px; display: grid; gap: 8px; align-content: start; }
.det-texto p { font-size: 13.5px; text-align: justify; hyphens: none; }
.det-mini { display: flex; gap: 6px; }
.det-mini button { width: 40px; height: 50px; overflow: hidden; opacity: .5; transition: opacity .2s; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.det-mini button[aria-pressed="true"], .det-mini button:hover { opacity: 1; }
.det-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.det-pasos { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
.det-pasos span { font-size: 12px; font-weight: 700; color: var(--tenue); text-align: center; font-variant-numeric: tabular-nums; }
.paso { --c: 8px; width: 44px; height: 44px; display: grid; place-items: center; --b: var(--claro); }
.paso:hover { --b: rgba(255, 255, 255, .14); }
/* Ficha técnica y medidas. */
.ficha-cab { flex: none; padding: 18px 18px 8px; }
.filas { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 13px; }
.fila dt { color: var(--tenue); font-weight: 600; }
.fila dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.filas dl { margin: 0; animation: aparece .35s ease; }
.medidas .fila:hover dd, .medidas .fila.marcada dd { color: var(--luz); }
.medidas .fila dt b { display: inline-block; min-width: 40px; color: var(--texto); font-family: var(--titulo); font-weight: 800; }
/* Colores: cuadros con esquinas cortadas y el nombre del color elegido debajo. */
.colores { --c: 14px; flex: none; padding: 12px 14px; display: grid; gap: 8px; background: var(--vidrio); box-shadow: var(--canto); }
.colores:empty { display: none; }
.colores p { margin: 0; font: 700 12.5px var(--titulo); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastillas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pastilla { aspect-ratio: 1; min-height: 34px; padding: 0 4px; background: transparent; }
.pastilla::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 6px; transform: skewX(-16deg); background: var(--c-m); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .3); ; transition: box-shadow .2s; }
.pastilla[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--noche), 0 0 0 4px var(--texto); }

/* ------------------------------------------------------------ fila de tarjetas (abajo), todas del mismo ancho */
.contexto { grid-area: fila; min-width: 0; }
.carrusel { display: flex; gap: 10px; height: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
.spec { --c: 16px; position: relative; flex: 1 1 0; min-width: 150px; padding: 13px 16px; overflow: hidden; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--vidrio); box-shadow: var(--canto); }
.ico-caja { --c: 8px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--claro); color: var(--texto); }
.ico-caja .ico { width: 18px; height: 18px; }
.spec-pie { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 1px; min-width: 0; }
.spec-pie small { font: 600 12px var(--cuerpo); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-pie b { font: 700 15.5px/1.15 var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-valor { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: baseline; gap: 6px; font: 600 26px/1 var(--titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec-valor small { font: 600 13px var(--titulo); color: var(--tenue); letter-spacing: 0; margin-left: -3px; }
.spec-valor em { align-self: center; font: 800 11.5px var(--titulo); font-style: normal; padding: 3px 7px; animation: aparece .4s ease; }
.spec-valor em.sube { background: var(--azul); color: #fff; }
.spec-valor em.baja { background: rgba(255, 255, 255, .16); }
.spec.barra .spec-pie { grid-row: 2; align-self: end; }
.pista { grid-column: 1 / -1; grid-row: 3; position: relative; height: 6px; margin-top: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pista i { position: absolute; inset: 0; background: var(--luz); transform: scaleX(var(--v)); transform-origin: left; animation: llena 1s cubic-bezier(.2, .7, .2, 1) both; }
.pista::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(14, 17, 23, .95) calc(10% - 2px) 10%); }
@keyframes llena { from { transform: scaleX(var(--v0, 0)); } }
.spec.con-foto { cursor: pointer; }
.spec.con-foto img { position: absolute; right: 0; top: 0; width: 46%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.spec.con-foto:hover img { transform: scale(1.05); }
.spec.con-foto .spec-pie, .spec.con-foto .ico-caja { position: relative; z-index: 1; }
.spec.con-foto .spec-pie { max-width: 62%; }
.sello-caja { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; padding: 7px 11px; background: rgba(5, 7, 11, .75); font: 700 12px/1.25 var(--titulo); font-style: normal; color: var(--texto); max-width: 116px; text-align: right; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tarjeta { --c: 16px; position: relative; flex: 1 0 140px; height: 100%; padding: 9px 9px 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--vidrio); box-shadow: var(--canto); color: var(--tenue); transition: background .2s, color .2s; }
.tarjeta:hover { color: var(--texto); background: var(--vidrio-alto); }
.tarjeta[aria-pressed="true"] { background: var(--azul); color: #fff; }
.cara { --c: 10px; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cara .num { font: italic 800 32px/1 var(--titulo); letter-spacing: -.04em; }
.tnombre { margin: 7px 0 9px; font: 700 12px/1.2 var(--titulo); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ visor de fotos */
.visor { position: fixed; inset: 0; z-index: 40; background: rgba(3, 4, 7, .95); display: grid; grid-template-rows: 1fr auto; animation: aparece .3s ease; }
.visor-foto { position: relative; min-height: 0; display: grid; place-items: center; padding: 64px 90px 16px; }
.visor-foto img { max-width: 100%; max-height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cerrar { --c: 8px; position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.flecha { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; color: var(--texto); }
.flecha .ico { width: 34px; height: 34px; stroke-width: 1.2; }
.atras { left: 18px; } .adelante { right: 18px; }
.visor-tira { display: flex; gap: 8px; padding: 12px 20px 20px; overflow-x: auto; justify-content: safe center; scrollbar-width: none; }
.visor-tira button { flex: none; width: 48px; height: 60px; overflow: hidden; opacity: .5; transition: opacity .2s; }
.visor-tira button[aria-current="true"], .visor-tira button:hover { opacity: 1; }
.visor-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-cuenta { position: absolute; top: 28px; left: 0; right: 0; text-align: center; font: 700 13px var(--titulo); color: var(--tenue); }

/* ------------------------------------------------------------ pie */
.pie { position: fixed; z-index: 10; left: calc(var(--riel, 0px) + var(--m)); right: var(--m); bottom: 0; height: var(--pie); display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-size: 11px; font-weight: 600; color: rgba(243, 245, 248, .45); }
.pie a:hover { color: var(--texto); }
.atajos { display: flex; gap: 16px; margin-right: auto; }
.atajos span { display: flex; align-items: center; gap: 4px; font: 700 11px var(--titulo); color: var(--tenue); }
kbd { --c: 4px; display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 3px 6px; background: var(--texto); color: var(--noche); font: 800 10px var(--titulo); }
kbd svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aviso { position: fixed; z-index: 50; left: 50%; top: 80px; transform: translate(-50%, -12px); padding: 12px 18px; background: var(--texto); color: var(--noche); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ PC con poca altura */
@media (max-height: 800px) and (min-width: 1100px) {
  :root { --cab: 56px; --pie: 26px; --g: 10px; --fila: 96px; }
  .pestana, .interruptor, .versiones button { min-height: 40px; }
  .vista { padding: 7px 6px 6px; }
  .nombre b { font-size: 42px; } .nombre span { font-size: 38px; }
  .spec { padding: 10px 14px; } .ico-caja { width: 32px; height: 32px; } .spec-valor { font-size: 22px; } .spec-pie b { font-size: 14px; }
  .tarjeta { flex-basis: 120px; }
}
/* ------------------------------------------------------------ tableta y pantallas medianas */
@media (max-width: 1099px) {
  .abre-vehiculos span { display: none; } .abre-vehiculos { padding: 0 14px; }
  :root { --m: 16px; --g: 10px; --lado: 220px; }
  .marca, .atajos { display: none; }
  .fila-veh { max-width: calc(100% - 120px); left: 0; transform: none; }
  .pestana b { display: none; }
}
/* Tableta vertical: escenario arriba a todo el ancho, las dos columnas debajo, lado a lado, y las tarjetas en dos filas. */
@media (max-width: 1099px) and (orientation: portrait) {
  :root { --fila: 196px; }
  .sala { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 300px var(--fila); grid-template-areas: "esc esc" "izq der" "fila fila"; }
  .pestanas { grid-template-columns: 1fr 1fr; }
  .vistas { grid-template-columns: repeat(4, 1fr); }
  .nombre b { font-size: 54px; } .nombre span { font-size: 50px; }
  .carrusel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: visible; }
  .contexto.tarjetas .carrusel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contexto.dos .carrusel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec, .tarjeta { min-width: 0; height: auto; }
}
/* Celular vertical (no es el uso principal): igual a la tableta vertical, más compacto. */
@media (max-width: 640px) { :root { --riel: 0px; } }
@media (max-width: 640px) and (orientation: portrait) {
  :root { --m: 10px; --cab: 54px; --pie: 24px; --g: 8px; --fila: 150px; }
  body { --riel-abajo: calc(var(--fila) + 300px); }
  .sala { grid-template-rows: minmax(0, 1fr) 268px var(--fila); }
  .vehiculos a, .vehiculos button { min-height: 36px; padding: 0 12px; font-size: 11.5px; }
  .pestana { min-height: 40px; padding: 0 10px; gap: 8px; font-size: 12px; }
  .vista span { display: none; } .vista { padding: 9px 4px; }
  .interruptor { min-height: 40px; font-size: 11.5px; }
  .nombre b { font-size: 38px; } .nombre span { font-size: 34px; }
  .etiquetas span:nth-child(n+3) { display: none; }
  .spec { padding: 9px 11px; } .ico-caja { width: 28px; height: 28px; } .ico-caja .ico { width: 15px; height: 15px; }
  .spec-valor { font-size: 18px; } .spec-valor small { font-size: 10.5px; } .spec-valor em, .sello-caja { display: none; }
  .spec-pie small { font-size: 10.5px; } .spec-pie b { font-size: 12.5px; }
  .info, .det-texto { padding: 12px 12px 0; } .ficha-cab { padding: 12px 12px 6px; } .filas { padding: 0 12px 10px; }
  .pastillas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie { gap: 12px; font-size: 10px; justify-content: center; }
  .pie .credito { display: none; }
  .visor-foto { padding: 60px 12px 10px; } .flecha { display: none; }
}
/* Celular acostado y pantallas bajas: tres columnas; a la izquierda dos columnas de íconos iguales (secciones, y
   vistas con interruptores), a la derecha la información, y la fila de abajo compacta. */
@media (orientation: landscape) and (max-height: 620px) {
  :root { --m: 10px; --cab: 48px; --pie: 20px; --g: 8px; --fila: 58px; --lado: 230px; }
  #notas-revision { --notas-abajo: calc(100dvh - 46px); }
  .marca, .atajos, .pie .credito { display: none; }
  .fila-veh { left: 0; transform: none; max-width: calc(100% - 110px); }
  .vehiculos a, .vehiculos button { min-height: 36px; padding: 0 12px; font-size: 11.5px; }
  .sala { grid-template-columns: 98px minmax(0, 1fr) var(--lado); }
  .izq { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 6px; }
  .pestanas, .lado-b { margin: 0; display: grid; grid-auto-rows: minmax(36px, 44px); gap: 5px; align-content: start; }
  .vistas, .interruptores { display: contents; }
  .pestana, .vista, .interruptor { --c: 8px; display: grid; place-items: center; padding: 0; min-height: 36px; gap: 0; }
  .pestana span, .vista span, .interruptor span, .interruptor i, .pestana b { display: none; }
  .interruptor[aria-checked="true"] { --b: var(--azul); color: #fff; }
  .escenario { --c: 18px; }
  .identidad { top: 8px; gap: 4px; }
  .nombre b { font-size: 28px; } .nombre span { font-size: 26px; margin-left: 4px; }
  .etiquetas span { padding: 3px 8px; font-size: 10.5px; } .etiquetas span:nth-child(n+3) { display: none; }
  .versiones button { min-height: 36px; font-size: 12px; }
  .panel { --c: 12px; }
  .info { padding: 12px 12px 0; gap: 8px; } .info p { font-size: 12.5px; } .panel h2 { font-size: 17px; }
  .datos div { padding: 6px 0; font-size: 12px; }
  .det-foto { height: min(70cqh, 125cqw); }
  .det-texto { padding: 10px 12px; } .det-texto p { font-size: 12px; line-height: 1.4; } .det-mini { display: none; }
  .ficha-cab { padding: 12px 12px 6px; } .filas { padding: 0 12px 10px; } .fila { padding: 7px 0; font-size: 12px; }
  .colores { padding: 8px 10px; gap: 5px; } .pastilla { min-height: 26px; }
  .spec { min-width: 132px; padding: 7px 10px; grid-template-rows: minmax(0, 1fr) auto; }
  .ico-caja { width: 26px; height: 26px; } .ico-caja .ico { width: 14px; height: 14px; }
  .spec-valor { font-size: 17px; } .spec-valor small { font-size: 10px; } .spec-valor em, .sello-caja, .spec.barra .spec-pie { display: none; }
  .spec-pie { grid-row: 2; } .spec-pie small { display: none; } .spec-pie b { font-size: 12px; }
  .pista { grid-row: 2; height: 4px; margin-top: 4px; align-self: end; }
  .tarjeta { --c: 10px; flex: 1 0 84px; padding: 4px 4px 0; } .tnombre { font-size: 9.5px; margin: 2px 0 3px; } .cara .num { font-size: 18px; }
  .pie { font-size: 9.5px; gap: 12px; }
  .visor-foto { padding: 12px 70px 6px; }
  .visor-tira { padding: 4px 12px 8px; } .visor-tira button { width: 36px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }