/* For Export Motos · concesionaria y taller en Av. Roca 1280, desde 1992.
   22/10: más seriedad (pedido de Mateo). Esmalte y tinta de base, superficies blancas y planas, el azul del dinero (el
   campo de financiación y la franja de la patente sobre los precios; además el foco y la selección) y el rojo solo en
   las acciones (y los errores de los formularios). El sistema completo está en DESIGN.md. El logo original es la marca; de la papelería queda un solo objeto:
   la ficha técnica como formulario de casilleros.
   Un radio (6 px). Big Shoulders en tres tamaños (títulos, subtítulos y precios); Public Sans en tres para leer. */

@font-face {
  font-family: "Big Shoulders";
  src: url("/fuentes/big-shoulders.woff2") format("woff2");
  font-weight: 700 800; /* recortada a lo que usa el sitio (herramientas/fuentes.py) */
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fuentes/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --esmalte: #eef0f2;        /* fondo */
  --papel: #ffffff;          /* superficies y fondo de las fotos de producto */
  --gris: #e3e6ea;           /* un escalón de tono: casilleros, controles, hover */
  --gris-2: #c9ced5;
  --borde-campo: #80868f;    /* borde de los campos: 3,67:1 sobre papel y 3,21:1 sobre esmalte (WCAG 1.4.11) */
  --linea: #d6dae0;          /* reglas de tablas y listas */
  --tinta: #0e0f11;
  --tinta-2: #40444c;        /* texto secundario: 9,2:1 sobre blanco, 8,2:1 sobre esmalte */
  --rojo: #b0080c;           /* solo acciones */
  --rojo-hondo: #8c0609;
  --azul: #133c8c;           /* un solo campo: financiación */
  --azul-hondo: #0d2c6a;
  --claro-2: #c9ced6;        /* texto secundario sobre tinta: 12,1:1 */
  --claro-3: #aeb4be;        /* texto terciario sobre tinta: 9,2:1 */
  --azul-claro: #d6e0f5;     /* texto secundario sobre azul */

  --fuente-titulo: "Big Shoulders", "Arial Narrow", sans-serif;
  --fuente-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Public Sans */
  --t-chico: 1rem;
  --t-cuerpo: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --t-bajada: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  /* Big Shoulders */
  --t-pagina: clamp(2.5rem, 1.3rem + 3.9vw, 4.5rem);   /* el h1 de cada página interna */
  --t-titulo: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem); /* h2 de sección, h1 del inicio y el precio de la ficha */
  --t-sub: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); /* h3, títulos de panel y precios de lista */

  --radio: 6px;
  --margen: clamp(16px, 3vw, 40px);
  --hueco: 12px;
  --entre-secciones: clamp(80px, 9vw, 144px);
  --medida: 64ch;
  --alto-barra: 112px;          /* el logo original a 190 px de ancho */
  --alto-barra-compacta: 76px;  /* al bajar, la barra se compacta con transform (sin relayout) */

  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --mueve: cubic-bezier(0.77, 0, 0.175, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --rapido: 160ms;
  --medio: 220ms;

  color-scheme: light;
  accent-color: var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-barra-compacta) + 16px); }
body {
  margin: 0;
  background: var(--esmalte);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.6 var(--fuente-texto);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
strong, b { font-weight: 650; }

/* superficies del navegador */
::selection { background: var(--azul); color: #fff; }
input, textarea { caret-color: var(--rojo); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
/* sobre tinta, rojo o azul el foco va en blanco: el azul daba 1,87:1 sobre tinta (audit, WCAG 1.4.11 y 2.4.7) */
.campo-azul :focus-visible, .campo-tinta :focus-visible, .pie :focus-visible, .pasos-pie :focus-visible, .comparador-barra :focus-visible,
.compra-celu :focus-visible, .pedido-celu :focus-visible, .intro :focus-visible, .comparar:has(input:checked) :focus-visible { outline-color: #fff; }
html { scrollbar-color: var(--gris-2) var(--esmalte); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--esmalte); }
::-webkit-scrollbar-thumb { background: var(--gris-2); border-radius: 6px; border: 2px solid var(--esmalte); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-2); }

.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; /* taste-skill-ignore: solo para lectores de pantalla */
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--margen); top: -60px; z-index: 50; background: var(--tinta); color: #fff;
  padding: 10px 16px; border-radius: var(--radio); text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 12px; }

.envoltura { padding-inline: var(--margen); max-width: 1520px; margin-inline: auto; }
.seccion { padding-top: var(--entre-secciones); }
.panel { background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 40px); }

/* ═════════ tipografía ═════════ */
.titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
h1.titulo { font-size: var(--t-pagina); }
.hero h1.titulo { font-size: var(--t-titulo); }
.subtitulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--t-sub);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.bajada { font-size: var(--t-bajada); line-height: 1.45; max-width: 40ch; text-wrap: pretty; color: var(--tinta); }
.texto { max-width: var(--medida); text-wrap: pretty; }
.texto p + p { margin-top: 0.9em; }
.chico { font-size: var(--t-chico); line-height: 1.5; }
.nota { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.5; max-width: 64ch; }
.confirmar {
  display: inline-block; font-size: 0.875em; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--gris); color: var(--tinta); border-radius: 4px; padding: 0 0.45em;
}
.campo-azul .confirmar { background: rgba(255, 255, 255, 0.16); color: #fff; }
.precio { font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; }

/* ═════════ botones y enlaces ═════════ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 10px 20px;
  background: var(--rojo); color: #fff; border: 0; border-radius: var(--radio);
  font-weight: 600; font-size: var(--t-cuerpo); line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--rapido) var(--salida), background-color var(--medio) ease, border-color var(--medio) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.boton:active { transform: scale(0.97); }
.boton--tinta { background: var(--tinta); }
.boton--papel { background: var(--papel); color: var(--tinta); }
.boton--gris { background: var(--papel); color: var(--tinta); border: 1.5px solid var(--gris-2); }
.boton--claro { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.boton--grande { min-height: 52px; padding: 12px 24px; }
.boton--ancho { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--gris); color: var(--tinta-2); border-color: var(--gris); cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  /* :where() deja la base en (0,2,0): las variantes, con su propio hover, le ganan */
  .boton:where(:not([disabled]):not([aria-disabled="true"])):hover { background: var(--rojo-hondo); }
  .boton--tinta:not([disabled]):hover { background: #2a2d33; }
  .boton--papel:not([disabled]):hover { background: var(--gris); }
  .boton--gris:not([disabled]):hover { background: var(--papel); border-color: var(--tinta); }
  .boton--claro:not([disabled]):hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
}
.boton .flecha { transition: transform var(--medio) var(--salida); }
@media (hover: hover) and (pointer: fine) { .boton:hover .flecha { transform: translateX(3px); } }

.enlace-claro { text-decoration: none; }
.enlace {
  /* subrayado en gris: el rojo queda para los botones y el hover (crítica de taste: más de diez acentos por pantalla) */
  color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tinta-2);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
  transition: text-decoration-color var(--rapido) ease, color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) { .enlace:hover { color: var(--rojo); text-decoration-color: var(--rojo); } }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ═════════ íconos ═════════ */
.icono { width: 24px; height: 24px; flex: none; }
.icono--chico { width: 18px; height: 18px; }
.icono--boton { width: 20px; height: 20px; margin-left: -2px; }

/* ═════════ barra: tinta, con el logo original blanco ═════════ */
.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--tinta); color: #fff;
  transition: transform var(--medio) var(--salida);
}
.barra__fila { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--alto-barra); }
.marca { display: block; flex: none; line-height: 0; border-radius: 4px; transform-origin: 0 50%; transition: transform var(--medio) var(--salida); }
.marca img { width: 190px; height: auto; }
.barra__nav, .barra__herramientas { transition: transform var(--medio) var(--salida); }
.barra__nav { margin-left: auto; }
.barra__links { display: flex; align-items: center; gap: 2px; }
.barra__link, .barra__desplegar {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px;
  background: none; border: 0; border-radius: var(--radio); color: #fff;
  font-weight: 600; text-decoration: none; cursor: pointer; position: relative;
  transition: background-color var(--rapido) ease;
}
.barra__link::after, .barra__desplegar::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.barra__link[aria-current="page"]::after, .barra__desplegar[data-actual]::after { transform: scaleX(1); }
.barra__desplegar .icono { transition: transform var(--medio) var(--salida); margin-right: -4px; }
.barra__desplegar[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
.barra__desplegar[aria-expanded="true"] .icono { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .barra__link:hover, .barra__desplegar:hover { background: rgba(255, 255, 255, 0.1); }
}
.barra__herramientas { display: flex; align-items: center; gap: 4px; }
.barra__icono {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px;
  background: none; border: 0; border-radius: var(--radio); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; position: relative;
  transition: background-color var(--rapido) ease, transform var(--rapido) var(--salida);
}
.barra__icono:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .barra__icono:hover { background: rgba(255, 255, 255, 0.1); } }
.barra__cuenta {
  position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #fff; color: var(--tinta); font: 700 0.75rem/20px var(--fuente-texto); text-align: center; /* blanco: el rojo es solo de las acciones */
}
.barra__cuenta[hidden] { display: none; }
.barra__escribinos { min-height: 44px; padding: 0 18px; margin-left: 8px; }
.barra__menu { display: none; }
.barra .boton:focus-visible, .barra :focus-visible { outline-color: #fff; }

/* compacta al bajar: solo transform, la caja de la barra no cambia de alto */
.barra[data-sin-transicion], .barra[data-sin-transicion] .marca, .barra[data-sin-transicion] .barra__nav, .barra[data-sin-transicion] .barra__herramientas { transition: none; }
.barra[data-compacta] { transform: translateY(calc(var(--alto-barra-compacta) - var(--alto-barra))); }
.barra[data-compacta] .barra__nav, .barra[data-compacta] .barra__herramientas { transform: translateY(calc((var(--alto-barra) - var(--alto-barra-compacta)) / 2)); }
.barra[data-compacta] .marca { transform: translateY(calc((var(--alto-barra) - var(--alto-barra-compacta)) / 2)) scale(0.68); }

@media (max-width: 1079px) {
  :root { --alto-barra: 88px; --alto-barra-compacta: 64px; }
  .marca img { width: 150px; }
  .barra__nav, .barra__escribinos .solo-texto { display: none; }
  .barra__herramientas { margin-left: auto; }
  .barra__menu { display: inline-flex; }
  .barra[data-compacta] .marca { transform: translateY(calc((var(--alto-barra) - var(--alto-barra-compacta)) / 2)) scale(0.72); }
}
@media (max-width: 700px) {
  .barra__icono-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra__escribinos { min-width: 44px; padding: 0 10px; margin-left: 2px; }
  .barra__escribinos span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra__escribinos .icono { margin: 0; }
  .barra__herramientas { gap: 0; }
}
@media (min-width: 701px) { .barra__carrito .barra__icono-texto { display: none; } }

/* ═════════ menú de modelos (compu) ═════════ */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel); color: var(--tinta); padding: 28px 0 32px;
  box-shadow: 0 24px 48px rgba(14, 15, 17, 0.18); /* taste-skill-ignore: panel que se superpone a la página */
  transition: opacity 150ms var(--salida), transform 150ms var(--salida), display 150ms allow-discrete;
}
.mega[hidden] { display: none; opacity: 0; transform: translateY(-4px); }
@starting-style { .mega:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.mega__fila { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.mega__categorias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mega__categoria {
  display: grid; gap: 2px; padding: 12px 14px 16px; border-radius: var(--radio); text-decoration: none; color: var(--tinta);
  transition: background-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) { .mega__categoria:hover { background: var(--esmalte); } }
.mega__categoria:focus-visible { outline-offset: 0; }
.mega__foto { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; }
.mega__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mega__nombre { font: 700 1.25rem/1.05 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; }
.mega__desde { font-weight: 600; }
.mega__cuenta { font-size: var(--t-chico); color: var(--tinta-2); }
.mega__mas { display: grid; gap: 2px; background: var(--esmalte); border-radius: var(--radio); padding: 12px; }
.mega__mas a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radio); font-weight: 600; text-decoration: none; transition: background-color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .mega__mas a:hover { background: var(--papel); } }
.mega__total { font-size: var(--t-chico); color: var(--tinta-2); font-weight: 600; }
.velo-pagina {
  position: fixed; inset: 0; z-index: 35; background: rgba(14, 15, 17, 0.42);
  transition: opacity 150ms var(--salida), display 150ms allow-discrete; /* igual que el panel, que abre a la par */
}
.velo-pagina[hidden] { display: none; opacity: 0; }
@starting-style { .velo-pagina:not([hidden]) { opacity: 0; } }

/* ═════════ menú del celu: pantalla completa ═════════ */
.menu-celu, .buscador { border: 0; padding: 0; color: var(--tinta); }
.menu-celu {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  background: var(--tinta); color: #fff; overscroll-behavior: contain;
  transition: opacity 200ms var(--salida), transform 200ms var(--salida), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.menu-celu:not([open]) { opacity: 0; transform: translateY(-8px); }
@starting-style { .menu-celu[open] { opacity: 0; transform: translateY(-8px); } }
.menu-celu::backdrop { background: var(--tinta); transition: opacity 200ms var(--salida), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.menu-celu:not([open])::backdrop { opacity: 0; }
@starting-style { .menu-celu[open]::backdrop { opacity: 0; } }
.menu-celu__cabeza { display: flex; justify-content: space-between; align-items: center; height: var(--alto-barra); padding-inline: var(--margen); position: sticky; top: 0; background: var(--tinta); z-index: 1; }
.menu-celu .marca img { width: 150px; }
.menu-celu__cuerpo { padding: 8px var(--margen) calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 20px; }
.menu-celu__titulo { font: 700 var(--t-sub)/1 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; color: var(--claro-2); }
.menu-celu__categorias { display: grid; gap: 4px; }
.menu-celu__categoria {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; min-height: 72px; padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.06); border-radius: var(--radio); text-decoration: none; transition: background-color var(--rapido) ease;
}
.menu-celu__categoria:active { background: rgba(255, 255, 255, 0.12); }
.menu-celu__foto { display: block; aspect-ratio: 3 / 2; background: #fff; border-radius: 4px; overflow: hidden; }
.menu-celu__foto img { width: 100%; height: 100%; object-fit: contain; }
.menu-celu__categoria b { display: block; font-weight: 650; font-size: var(--t-bajada); line-height: 1.2; }
.menu-celu__categoria span span { font-size: var(--t-chico); color: var(--claro-2); }
.menu-celu__todas { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; text-decoration: underline; text-decoration-color: var(--tinta-2); }
.menu-celu__links { display: grid; gap: 2px; }
.menu-celu__links a { display: block; padding: 12px 0; font-size: var(--t-bajada); font-weight: 600; text-decoration: none; }
.menu-celu__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rojo); }
.menu-celu__pie { display: grid; gap: 12px; color: var(--claro-2); font-size: var(--t-chico); }
.menu-celu__pie a:not(.boton) { color: #fff; }
.menu-celu :focus-visible { outline-color: #fff; }

/* ═════════ buscador ═════════ */
.buscador {
  width: min(760px, calc(100% - 24px)); max-height: calc(100svh - 48px); margin: calc(var(--alto-barra-compacta) + 12px) auto auto;
  background: var(--papel); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 24px 64px rgba(14, 15, 17, 0.3); /* taste-skill-ignore: diálogo */
}
/* sin animación al abrir ni al cerrar: se abre también con Ctrl o ⌘ + K y una herramienta de teclado tiene que ser instantánea */
.buscador::backdrop { background: rgba(14, 15, 17, 0.55); }
.buscador__cuerpo { display: grid; max-height: calc(100svh - 48px); grid-template-rows: auto auto 1fr auto; }
.buscador__campo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; background: var(--tinta); color: #fff; }
.buscador__campo input {
  width: 100%; min-height: 52px; background: none; border: 0; color: #fff; font-size: var(--t-bajada); font-weight: 600; caret-color: #fff;
}
.buscador__campo input::placeholder { color: var(--claro-3); font-weight: 400; }
.buscador__campo input:focus-visible { outline: none; }
.buscador__campo:focus-within { box-shadow: inset 0 -3px 0 #fff; } /* taste-skill-ignore: foco del campo de búsqueda */
.buscador__campo input::-webkit-search-cancel-button { display: none; }
.buscador__ayuda { padding: 14px 20px 4px; font-size: var(--t-chico); color: var(--tinta-2); }
.buscador__ayuda button { background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--tinta-2); text-underline-offset: 0.25em; cursor: pointer; }
.buscador__resultados { list-style: none; margin: 0; padding: 8px; overflow: auto; overscroll-behavior: contain; }
.buscador__resultados:empty { display: none; }
.buscador__resultados [role="option"] { cursor: pointer; }
.buscador__fila {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 12px 6px 6px;
  border-radius: var(--radio); text-decoration: none; transition: background-color var(--rapido) ease;
}
.buscador__resultados [aria-selected="true"] .buscador__fila { background: var(--esmalte); }
@media (hover: hover) and (pointer: fine) { .buscador__resultados [role="option"]:hover .buscador__fila { background: var(--esmalte); } }
.buscador__resultados img { aspect-ratio: 3 / 2; object-fit: contain; mix-blend-mode: multiply; }
.buscador__resultados b { display: block; font-weight: 650; }
.buscador__resultados .detalle { font-size: var(--t-chico); color: var(--tinta-2); }
.buscador__resultados .valor { font: 800 var(--t-sub)/1 var(--fuente-titulo); white-space: nowrap; }
.buscador__resultados .valor--consultar { font: 600 var(--t-chico)/1.3 var(--fuente-texto); color: var(--tinta-2); }
.buscador__estado { padding: 0 20px 18px; font-size: var(--t-chico); color: var(--tinta-2); }
.buscador__estado:empty { display: none; }
@media (max-width: 700px) {
  .buscador { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .buscador__cuerpo { max-height: none; height: 100%; }
  .buscador__fila { grid-template-columns: 84px minmax(0, 1fr); }
  .buscador__resultados .valor { grid-column: 2; font-size: 1.25rem; }
}

/* ═════════ la firma de la casa: la franja de la patente ═════════
   La franja azul de la patente encabeza cada precio y lleva su rótulo ("Precio de lista, contado", "desde"),
   como la franja de la chapa encabeza la patente. Solo en los precios (elegido por Mateo en el punto de control A). */
.firma-precio { display: inline-grid; justify-items: start; justify-self: start; margin: 0; }
.firma-precio__rotulo {
  justify-self: stretch; background: var(--azul); color: #fff; padding: 3px 10px 4px; border-radius: 4px 4px 0 0;
  font-size: var(--t-chico); font-weight: 600; line-height: 1.3;
}
.firma-precio__valor { padding-top: 8px; font: 800 var(--t-titulo)/1 var(--fuente-titulo); letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.firma-precio--chico .firma-precio__rotulo { font-size: 0.8125rem; padding: 1px 8px 2px; }
.firma-precio--chico .firma-precio__valor { font-size: var(--t-sub); padding-top: 5px; }

/* ═════════ hero: el último cuadro de la intro, de borde a borde ═════════ */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: max(560px, calc(100svh - var(--alto-barra))); max-height: 1100px;
  background: #0b0c0e; color: #fff;
}
.hero__foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__foto > picture, .hero__foto > picture img, .hero__foto > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* velo neutro para el contraste del texto (el único degradé permitido: un velo sobre una foto) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(14, 15, 17, 0.78) 0%, rgba(14, 15, 17, 0.5) 34%, rgba(14, 15, 17, 0) 58%), /* taste-skill-ignore: velo neutro sobre la foto del hero */
    linear-gradient(to top, rgba(14, 15, 17, 0.72) 0%, rgba(14, 15, 17, 0) 46%); /* taste-skill-ignore: velo neutro sobre la foto del hero */
}
.hero__contenido { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); padding-block: 64px clamp(48px, 8vh, 104px); width: 100%; }
.hero__texto { grid-column: 7 / -1; display: grid; gap: 26px; justify-items: start; }
.hero__titulo {
  font: 800 clamp(2.75rem, 5.15vw, 6rem)/0.92 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0;
  text-wrap: balance; max-width: 11.5em;
}
.hero__bajada { font-size: var(--t-bajada); line-height: 1.45; max-width: 36ch; text-wrap: pretty; color: #fff; }
.hero__leyenda { position: absolute; top: 14px; right: var(--margen); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82); background: rgba(14, 15, 17, 0.5); padding: 2px 8px; border-radius: 4px; }
.hero :focus-visible { outline-color: #fff; }
/* en compu el texto se ancla a la imagen, no a la grilla: el cuadro ocupa todo el ancho y el frente de la cub (el puño
   derecho) llega al 53 % del ancho de la pantalla. Con la columna 7, el título tapaba el manubrio y el espejo quedaba
   sobre la "M". El título se mide con el ancho que le queda (cqi): nunca pasa de dos líneas, tampoco en pantallas grandes */
@media (min-width: 1080px) {
  .hero__texto { grid-column: 1 / -1; margin-left: calc(57vw - max(var(--margen), (100vw - 1520px) / 2 + var(--margen))); container-type: inline-size; }
  .hero__titulo { font-size: clamp(2.75rem, 11cqi, 6rem); }
}
@media (max-width: 1079px) {
  .hero__texto { grid-column: 1 / -1; }
  .hero__titulo { font-size: clamp(2.25rem, 9.6vw, 5rem); }
  .hero::before { background: linear-gradient(to top, rgba(14, 15, 17, 0.86) 0%, rgba(14, 15, 17, 0.55) 38%, rgba(14, 15, 17, 0) 64%); } /* taste-skill-ignore: velo neutro sobre la foto del hero */
}
@media (max-width: 700px) {
  .hero { min-height: calc(100svh - var(--alto-barra)); }
  .hero__foto > picture img { object-position: 30% 60%; } /* provisorio: el cuadro vertical del render llega en el punto C */
  .hero__contenido { padding-block: 40px 28px; }
  .hero__texto { gap: 18px; }
  .hero__texto .acciones { width: 100%; display: grid; grid-template-columns: 1fr; }
}
/* con el cuadro vertical del render (llega con celu-final): composición de afiche. El título arriba, sobre el techo
   oscuro; la cub libre en el medio; los botones y el precio abajo, sobre el piso. La imagen se alinea abajo para que la
   cub suba al hueco entre los dos bloques */
@media (max-width: 700px) and (orientation: portrait) {
  /* en celus bajos el texto no deja hueco para la cub: el hero mide al menos 680 px, con los dos botones todavía en la
     primera pantalla (el precio y su nota quedan apenas abajo) */
  .hero--vertical { align-items: stretch; min-height: max(calc(100svh - var(--alto-barra)), 680px); }
  .hero--vertical .hero__foto > picture img { object-position: 50% 100%; }
  .hero--vertical .hero__contenido { padding-block: 28px 24px; }
  /* "Imagen ilustrativa" va sobre la imagen, a media altura en el hueco de la cub: arriba del título se leía como
     antetítulo (taste, eyebrow) */
  .hero--vertical .hero__leyenda { top: 50%; transform: translateY(-50%); }
  .hero--vertical .hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero--vertical .hero__texto .acciones { margin-top: auto; }
  .hero--vertical::before {
    background:
      linear-gradient(to bottom, rgba(14, 15, 17, 0.82) 0%, rgba(14, 15, 17, 0.62) 30%, rgba(14, 15, 17, 0) 48%), /* taste-skill-ignore: velo neutro sobre la foto del hero: los tubos del techo pasan detrás del título */
      linear-gradient(to top, rgba(14, 15, 17, 0.88) 0%, rgba(14, 15, 17, 0.55) 30%, rgba(14, 15, 17, 0) 50%); /* taste-skill-ignore: velo neutro sobre la foto del hero */
  }
}

/* la franja de confianza */
.confianza { background: var(--papel); }
.confianza__lista.envoltura { padding-inline: var(--margen); }
.confianza__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco) clamp(16px, 3vw, 48px); padding-block: clamp(22px, 2.6vw, 34px); }
.confianza__lista li { display: grid; gap: 2px; align-content: start; }
.confianza__lista b { font: 700 var(--t-sub)/1.05 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; }
.confianza__lista span { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.4; }
@media (max-width: 900px) { .confianza__lista { grid-template-columns: 1fr 1fr; row-gap: 20px; } }

/* la gama de modelos por tipo (inicio) */
.gama { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: var(--papel); border-radius: var(--radio); padding: 8px; }
.gama__enlace {
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 6px; height: 100%; padding: 12px 16px 20px; border-radius: var(--radio);
  text-decoration: none; transition: background-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) { .gama__enlace:hover { background: var(--esmalte); } .gama__enlace:hover .gama__foto img { mix-blend-mode: multiply; } }
.gama__foto { display: block; aspect-ratio: 3 / 2; margin-bottom: 6px; }
.gama__foto img { width: 100%; height: 100%; object-fit: contain; }
.gama__nombre { font: 700 var(--t-sub)/1.05 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; }
.gama__uso { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.45; }
.gama .firma-precio { margin-top: 6px; }
.gama__consultar { margin-top: 6px; font-weight: 600; align-self: end; }
.gama__ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--tinta-2); text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.nota--precios { margin-top: 14px; }
/* en tablet, 3 arriba y 2 más anchas abajo: sin el hueco de un 3 + 2 en tres columnas */
@media (min-width: 701px) and (max-width: 1100px) {
  .gama { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
  .gama__item { grid-column: span 2; }
  .gama__item:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 700px) {
  .gama { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .gama::-webkit-scrollbar { display: none; }
  .gama__item { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
}

/* ═════════ intro ═════════ */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; }
.intro video, .intro img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.intro__saltar {
  position: absolute; right: var(--margen); bottom: calc(var(--margen) + env(safe-area-inset-bottom)); z-index: 2;
  background: rgba(14, 15, 17, 0.72); color: #fff; border: 0; border-radius: var(--radio);
  min-height: 44px; padding: 0 18px; font-weight: 600; cursor: pointer;
  transition: transform var(--rapido) var(--salida), background-color var(--rapido) ease;
}
.intro__saltar:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .intro__saltar:hover { background: rgba(14, 15, 17, 0.92); } }
.intro[data-sale] { pointer-events: none; }
.intro[data-sale] .intro__saltar { opacity: 0; transition: opacity 150ms var(--salida); }
html[data-intro] body { overflow: hidden; }
/* la tapa del primer pintado (ver el script de la cabeza del inicio): negra como el primer cuadro, debajo de la capa */
html[data-intro] body::before { content: ""; position: fixed; inset: 0; z-index: 99; background: #000; }
/* cierre de la intro: el hero deja de aislar su apilado para que el velo y el texto queden por encima de la capa del video
   (z-index 100) mientras el cuadro se encoge hasta su lugar; la foto queda debajo de la capa y arriba del fondo del hero */
.hero[data-cierre] { isolation: auto; }
.hero[data-cierre] .hero__foto { z-index: 0; }
.hero[data-cierre]::before { z-index: 101; }
.hero[data-cierre] .hero__contenido { position: relative; z-index: 102; }

/* ═════════ encabezado de sección ═════════ */
.encabezado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--hueco); align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.encabezado .titulo { grid-column: 1 / span 6; }
.encabezado .bajada, .encabezado .texto { grid-column: 8 / span 5; }
@media (max-width: 900px) {
  .encabezado { grid-template-columns: 1fr; }
  .encabezado .titulo, .encabezado .bajada, .encabezado .texto { grid-column: auto; }
}

/* ═════════ lista de precios ═════════ */
.lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.lista__grupo { margin-bottom: 36px; }
@media (max-width: 900px) { .lista { grid-template-columns: 1fr; } }
.lista__grupo h3 { margin-bottom: 8px; }
.tabla-precios { width: 100%; border-collapse: collapse; }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.tabla-precios tbody th { font-weight: 600; padding-right: 12px; }
.tabla-precios tbody th a { text-decoration: none; }
.tabla-precios td.cc { color: var(--tinta-2); font-size: var(--t-chico); white-space: nowrap; padding-right: 12px; }
.tabla-precios td.valor { text-align: right; white-space: nowrap; font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--t-sub); line-height: 1; }
.tabla-precios td.valor .consultar { font-family: var(--fuente-texto); font-size: var(--t-chico); background: none; padding: 0; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .tabla-precios tbody tr { transition: background-color var(--rapido) ease; }
  .tabla-precios tbody th a:hover { text-decoration: underline; text-decoration-color: var(--rojo); }
}
.lista-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; margin-top: 8px; padding: 18px 20px; background: var(--esmalte); border-radius: var(--radio); }

/* ═════════ la cub 110, pieza por pieza ═════════ */
.vendida { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--hueco); align-items: stretch; }
.vendida__placa { position: relative; background: var(--papel); border-radius: var(--radio); aspect-ratio: 4 / 3; overflow: hidden; touch-action: pan-y; }
.vendida__placa canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.vendida__placa canvas:active { cursor: grabbing; }
.vendida__placa .respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* oculta del todo cuando el 3D carga: con opacidad 0 nada más, la imagen tapaba el canvas y se llevaba el arrastre */
.vendida__placa[data-3d] .respaldo { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--medio) var(--salida), visibility 0s linear var(--medio); }
.vendida__placa .ayuda { position: absolute; left: 16px; bottom: 14px; font-size: var(--t-chico); color: var(--tinta-2); pointer-events: none; }
.vendida__texto { display: flex; flex-direction: column; gap: 22px; padding: clamp(20px, 3vw, 40px); background: var(--papel); border-radius: var(--radio); }
.segmento { display: inline-flex; padding: 3px; gap: 2px; background: var(--gris); border-radius: calc(var(--radio) + 2px); }
.segmento button, .pestanas button {
  background: none; border: 0; min-height: 40px; padding: 0 14px; border-radius: var(--radio);
  font: 600 var(--t-chico)/1 var(--fuente-texto); color: var(--tinta-2); cursor: pointer;
  transition: color var(--rapido) ease, background-color var(--rapido) ease, border-color var(--rapido) ease, transform var(--rapido) var(--salida);
}
.segmento button:active, .pestanas button:active { transform: scale(0.97); }
/* el elegido en tinta: blanco sobre gris claro daba 1,25:1 (audit, WCAG 1.4.11) */
.segmento button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; }
.pestanas button { border: 1.5px solid var(--gris-2); }
.pestanas button[aria-selected="true"] { color: #fff; background: var(--tinta); border-color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .pestanas button:not([aria-selected="true"]):hover { color: var(--tinta); border-color: var(--tinta); }
  .segmento button:not([aria-pressed="true"]):hover { color: var(--tinta); }
}
.sistema { min-height: 9.5em; }
.sistema h2, .sistema h3 { margin-bottom: 10px; }
.sistema p { max-width: 46ch; }
.sistema__service { margin-top: 10px; font-weight: 600; }
.pieza-tocada { display: grid; gap: 4px; background: var(--esmalte); border-radius: var(--radio); padding: 14px 16px; }
.pieza-tocada[hidden] { display: none; }
.pieza-tocada strong { font-weight: 700; }
.celdas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
@media (max-width: 900px) {
  .vendida { grid-template-columns: 1fr; }
  .vendida__placa { aspect-ratio: 1; }
}

/* ═════════ financiación: el campo azul ═════════ */
.campo-azul { background: var(--azul); color: #fff; padding-block: clamp(64px, 8vw, 128px); margin-top: var(--entre-secciones); }
.campo-azul--arriba { margin-top: 0; }
.campo-azul .titulo { color: #fff; }
.campo-azul .bajada { color: #fff; }
.campo-azul .nota { color: var(--azul-claro); }
.financiacion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.financiacion__texto { display: grid; gap: 22px; align-content: start; }
.simulador { background: var(--azul-hondo); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; }
.simulador label, .simulador legend { font-weight: 600; display: block; margin-bottom: 8px; }
.simulador fieldset { border: 0; padding: 0; margin: 0; }
.control {
  width: 100%; min-height: 48px; background: var(--papel); color: var(--tinta); border: 1.5px solid var(--borde-campo); border-radius: var(--radio); padding: 0 14px;
  font-size: var(--t-cuerpo);
  transition: border-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) { .control:hover { border-color: var(--tinta-2); } }
.simulador .control { border-color: transparent; }
.simulador .control:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
select.control {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230e0f11' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.cuotas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cuotas input { position: absolute; opacity: 0; pointer-events: none; }
.cuotas label {
  margin: 0; display: grid; place-items: center; min-height: 48px; border-radius: var(--radio); background: rgba(255, 255, 255, 0.1);
  font-weight: 600; cursor: pointer; transition: background-color var(--rapido) ease, color var(--rapido) ease, transform var(--rapido) var(--salida);
}
.cuotas label:active { transform: scale(0.96); }
.cuotas input:checked + label { background: #fff; color: var(--azul); }
.cuotas input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cuotas input:not(:checked) + label:hover { background: rgba(255, 255, 255, 0.2); } }
.rango { width: 100%; accent-color: #fff; height: 32px; }
.anticipo-valor { font-weight: 700; }
.resultado { display: grid; gap: 4px; background: #fff; color: var(--tinta); border-radius: var(--radio); padding: 18px 20px; }
.resultado__titulo { font: 700 var(--t-sub)/1.1 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 10px; }
.resultado { margin-top: 8px; }
.resultado__principal { display: grid; gap: 4px; }
.resultado__rotulo { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-2); }
.resultado__valor { font: 800 var(--t-titulo)/1 var(--fuente-titulo); letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; }
.resultado__detalle { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 10px; background: var(--esmalte); border-radius: 4px; font-size: var(--t-chico); }
.resultado__detalle b { font-weight: 650; }
.resultado__nota { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.45; margin-top: 6px; }
.simulador__ayuda { font-size: var(--t-chico); color: var(--azul-claro); margin-top: 4px; }
.campo-azul .enlace { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.financiacion__puntos { display: grid; gap: 8px; font-weight: 600; }
.financiacion__puntos li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.financiacion__puntos li::before { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 900px) {
  .financiacion { grid-template-columns: 1fr; }
  .cuotas { grid-template-columns: repeat(3, 1fr); }
}

/* ═════════ después de la compra ═════════ */
.servicios { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: stretch; }
.servicios__foto { grid-column: 1 / span 5; position: relative; border-radius: var(--radio); overflow: hidden; background: var(--gris); min-height: 520px; }
.servicios__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.servicios__lista { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3vw, 44px); align-content: center; }
.servicio { display: grid; gap: 10px; align-content: start; justify-items: start; }
.servicio p { max-width: 42ch; }
@media (max-width: 900px) {
  .servicios__foto, .servicios__lista { grid-column: 1 / -1; }
  .servicios__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .servicios__lista { grid-template-columns: 1fr; }
}

/* fotos con su epígrafe */
.epigrafe { position: absolute; left: 12px; bottom: 10px; right: 12px; color: #fff; font-size: var(--t-chico); line-height: 1.35; }
.epigrafe span { background: rgba(14, 15, 17, 0.66); padding: 3px 8px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ═════════ cómo comprás ═════════ */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); background: var(--papel); border-radius: var(--radio); padding: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 40px); counter-reset: paso; list-style: none; margin: 0; }
.paso { display: grid; gap: 8px; align-content: start; padding: clamp(20px, 2.4vw, 32px) 0; counter-increment: paso; }
/* sin dígitos (tope de taste por numeración): el orden lo da la posición en la grilla y el <ol> para lectores */
.paso p { color: var(--tinta-2); max-width: 36ch; }
.pasos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: var(--hueco); padding: 18px clamp(20px, 3vw, 40px); background: var(--tinta); color: #fff; border-radius: var(--radio); font-weight: 600; }
.pasos-pie .boton { flex: none; }
@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pasos { grid-template-columns: 1fr; }
}

/* ═════════ preguntas ═════════ */
.preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--hueco); align-items: start; }
.preguntas details { background: var(--papel); border-radius: var(--radio); padding: 0 clamp(18px, 2.4vw, 28px); }
@media (max-width: 900px) { .preguntas { grid-template-columns: 1fr; } }
.preguntas summary {
  list-style: none; cursor: pointer; font-weight: 600; padding: 18px 36px 18px 0; position: relative; border-radius: 4px;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%230e0f11' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--medio) var(--salida);
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { max-width: 56ch; padding-bottom: 18px; color: var(--tinta-2); }
@supports selector(::details-content) {
  .preguntas details { interpolate-size: allow-keywords; }
  .preguntas details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height 220ms var(--salida), opacity 200ms var(--salida), content-visibility 220ms allow-discrete;
  }
  .preguntas details[open]::details-content { height: auto; opacity: 1; }
}

/* ═════════ el local (nosotros) ═════════ */
.local { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.local figure { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--gris); }
.local img { width: 100%; height: 100%; object-fit: cover; }
.local__texto { grid-column: 1 / span 5; display: grid; gap: 16px; align-content: start; background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3.5vw, 48px); }
.local__texto p { max-width: 52ch; }
.local__firma { font-weight: 600; margin-top: 6px; }
.local__vereda { grid-column: 6 / -1; min-height: 420px; }
.local--pagina .local__texto { grid-column: 1 / span 4; }
.local__taller { grid-column: 5 / span 3; aspect-ratio: 3 / 4; }
.local--pagina .local__vereda { grid-column: 8 / -1; }
.local__vereda img { object-position: 62% 50%; }
@media (max-width: 900px) {
  .local__texto { grid-column: 1 / -1; }
  .local__vereda { grid-column: 1 / -1; aspect-ratio: 4 / 3; min-height: 0; }
  .local--pagina .local__texto { grid-column: 1 / -1; }
  .local__taller, .local--pagina .local__vereda { grid-column: span 6; aspect-ratio: 3 / 4; }
}

/* ═════════ contacto ═════════ */
.contacto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.contacto__datos { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3vw, 40px); }
.datos { display: grid; gap: 14px; }
.datos div { display: grid; gap: 2px; }
.datos dt { font-size: var(--t-chico); color: var(--tinta-2); }
.datos dd { font-weight: 600; }
.datos a { text-decoration-color: var(--tinta-2); }
.consulta-rapida { grid-column: 5 / span 4; display: grid; gap: 14px; align-content: start; background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3vw, 40px); }
.consulta-rapida label, .consulta label, .libreta__form label { font-weight: 600; font-size: var(--t-chico); display: grid; gap: 6px; }
.mapa { grid-column: 9 / -1; border-radius: var(--radio); overflow: hidden; background: var(--gris); position: relative; min-height: 380px; display: grid; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.85) contrast(1.05); }
.mapa__portada { position: relative; display: grid; grid-template-rows: 1fr auto; background: var(--papel); }
.mapa__foto { position: relative; min-height: 220px; }
.mapa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.mapa__texto { display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 2.6vw, 28px); }
.mapa__texto p { max-width: 34ch; }
@media (max-width: 1100px) {
  .contacto__datos { grid-column: 1 / span 6; }
  .consulta-rapida { grid-column: 7 / -1; }
  .mapa { grid-column: 1 / -1; min-height: 300px; }
}
@media (max-width: 700px) {
  .contacto__datos, .consulta-rapida { grid-column: 1 / -1; }
}

/* ═════════ pie ═════════ */
.pie { background: var(--tinta); color: #fff; padding: clamp(48px, 6vw, 88px) 0 calc(28px + env(safe-area-inset-bottom)); margin-top: var(--entre-secciones); }
/* la frase al lado del logo: con space-between quedaban unos 600 px muertos en el medio a 1440 */
.pie__marca { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-start; gap: 24px 48px; }
.pie__marca img { width: clamp(220px, 24vw, 320px); height: auto; }
.pie__marca p { color: var(--claro-2); max-width: 38ch; }
.pie__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--hueco); margin-top: clamp(40px, 5vw, 64px); }
.pie__cols nav { grid-column: span 2; }
.pie__cols h2 { font-size: var(--t-chico); font-weight: 600; color: #fff; margin-bottom: 12px; }
.pie__cols ul { display: grid; gap: 8px; font-size: var(--t-chico); }
.pie__cols a { text-decoration: none; color: var(--claro-2); }
@media (hover: hover) and (pointer: fine) { .pie__cols a:hover { color: #fff; text-decoration: underline; } }
.pie__datos { grid-column: 9 / -1; font-size: var(--t-chico); color: var(--claro-2); display: grid; gap: 6px; align-content: start; font-style: normal; }
.pie__datos a { color: #fff; }
.pie .confirmar { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pie__final span { max-width: 62ch; }
.pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 48px; font-size: var(--t-chico); color: var(--claro-3); }
.pie__final .boton { min-height: 44px; }
@media (max-width: 900px) {
  .pie__cols nav { grid-column: span 6; }
  .pie__datos { grid-column: 1 / -1; }
}

/* ═════════ páginas internas ═════════ */
.cabecera { padding: clamp(24px, 3.5vw, 48px) 0 clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px var(--hueco); align-items: end; }
.cabecera .titulo { grid-column: 1 / span 7; }
.cabecera .bajada { grid-column: 8 / span 5; }
.migas { grid-column: 1 / -1; font-size: var(--t-chico); color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--tinta-2); }
@media (max-width: 900px) { .cabecera .titulo, .cabecera .bajada { grid-column: 1 / -1; } }

/* catálogo */
.filtros { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; padding: 18px 20px; background: var(--papel); border-radius: var(--radio); }
.filtros label { display: grid; gap: 4px; font-size: var(--t-chico); font-weight: 600; }
.filtros select { min-height: 44px; min-width: 150px; }
.filtros .cuenta { margin-left: auto; font-size: var(--t-chico); color: var(--tinta-2); align-self: center; }
@media (max-width: 700px) {
  .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; padding: 14px; }
  .filtros select { min-width: 0; width: 100%; }
  .filtros .cuenta { margin: 0; align-self: end; padding-bottom: 12px; }
}
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--hueco); margin-top: 24px; }
.moto { display: grid; grid-template-rows: auto 1fr; background: var(--papel); border-radius: var(--radio); overflow: hidden; position: relative; }
.moto__foto { display: block; aspect-ratio: 3 / 2; background: var(--papel); }
.moto__foto img { width: 100%; height: 100%; object-fit: contain; }
.moto__cuerpo { display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; padding: 0 20px 20px; }
.moto__nombre { font-size: var(--t-bajada); font-weight: 650; line-height: 1.25; }
.moto__nombre a { text-decoration: none; }
.moto__uso { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.45; }
.moto__precio { display: grid; gap: 6px; align-content: start; justify-items: start; margin-top: 14px; }
.moto__cuota { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.4; }
/* la falta de precio no grita: texto de cuerpo; el tamaño de display queda para los precios reales (crítica, ronda 1) */
.moto__consultar { font: 650 var(--t-cuerpo)/1.3 var(--fuente-texto); color: var(--tinta); }
.moto__acciones { display: flex; gap: 6px; margin-top: 16px; }
.moto__acciones .boton { flex: 1 1 auto; }
.moto__acciones .boton { min-height: 44px; padding: 0 16px; font-size: var(--t-chico); }
.boton--wa .icono { margin-left: -2px; }
@media (hover: hover) and (pointer: fine) {
  .moto:hover .moto__nombre a { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 1.5px; }
}
.comparar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--papel); border: 1.5px solid var(--gris-2); border-radius: var(--radio); cursor: pointer; font-weight: 600; font-size: var(--t-chico); transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease, transform var(--rapido) var(--salida); }
.comparar:active { transform: scale(0.97); }
.comparar input { width: 18px; height: 18px; margin: 0; accent-color: var(--tinta); }
.comparar:has(input:checked) { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.comparar:has(input:checked) input { accent-color: #fff; }
.vacio { padding: 48px 20px; text-align: center; background: var(--papel); border-radius: var(--radio); }
.comparador-barra {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 26; transform: translate(-50%, 140%);
  display: flex; gap: 10px; align-items: center; background: var(--tinta); color: #fff; padding: 10px 10px 10px 18px; border-radius: var(--radio);
  transition: transform var(--medio) var(--cajon); width: max-content; max-width: calc(100% - 24px);
  box-shadow: 0 8px 24px rgba(14, 15, 17, 0.22); /* taste-skill-ignore: barra flotante, se superpone */
}
.comparador-barra[data-visible] { transform: translate(-50%, 0); }
.comparador-barra .boton { min-height: 44px; }
.tabla-comparar { width: 100%; border-collapse: collapse; background: var(--papel); border-radius: var(--radio); overflow: hidden; font-size: 0.9375rem; }
.tabla-comparar th, .tabla-comparar td { text-align: left; padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla-comparar thead th { font-weight: 700; font-size: var(--t-cuerpo); }
.tabla-comparar tbody th { font-weight: 600; color: var(--tinta-2); width: 18%; }
.dialogo { border: 0; padding: 0; border-radius: var(--radio); width: min(1100px, calc(100% - 24px)); max-height: calc(100svh - 48px); background: var(--esmalte); color: var(--tinta); box-shadow: 0 24px 64px rgba(14, 15, 17, 0.3); /* taste-skill-ignore: diálogo */ }
.dialogo::backdrop { background: rgba(14, 15, 17, 0.55); }
.dialogo {
  transition: opacity 200ms var(--salida), transform 200ms var(--salida), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.dialogo:not([open]) { opacity: 0; transform: scale(0.98); }
@starting-style { .dialogo[open] { opacity: 0; transform: scale(0.98); } }
.dialogo::backdrop { transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
.dialogo:not([open])::backdrop { opacity: 0; }
@starting-style { .dialogo[open]::backdrop { opacity: 0; } }
.dialogo__cuerpo { padding: clamp(18px, 3vw, 36px); display: grid; gap: 20px; overflow: auto; max-height: calc(100svh - 48px); }
.dialogo__cierre { position: sticky; top: 0; justify-self: end; z-index: 2; }

/* ¿te queda? */
.te-queda { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); }
.te-queda svg { width: 220px; height: auto; }
.te-queda output { font-weight: 600; display: block; margin-top: 10px; max-width: 38ch; }
.te-queda label { display: grid; gap: 6px; margin-top: 14px; font-weight: 600; font-size: var(--t-chico); }
.te-queda .control { max-width: 160px; }
@media (max-width: 600px) { .te-queda { grid-template-columns: 1fr; } .te-queda svg { width: 100%; max-width: 260px; } }

/* ficha */
.cabecera--ficha { padding-bottom: clamp(20px, 2.4vw, 32px); }
.ficha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.galeria, .ficha > .datos-clave, .formulario, .te-queda, .incluye { grid-column: 1 / span 7; }
.compra { grid-column: 8 / -1; grid-row: 1 / span 4; align-self: start; position: sticky; top: calc(var(--alto-barra-compacta) + var(--hueco)); display: grid; gap: 18px; background: var(--papel); border-radius: var(--radio); padding: clamp(22px, 2.6vw, 36px); }
/* galería: lista para varias fotos y vista ampliada */
.galeria { display: grid; gap: 8px; }
.galeria__escenario { background: var(--papel); border-radius: var(--radio); aspect-ratio: 3 / 2; position: relative; overflow: hidden; }
.galeria__foto { all: unset; position: absolute; inset: 0; cursor: zoom-in; display: block; }
.galeria__foto[hidden] { display: none; }
.galeria__foto img { width: 100%; height: 100%; object-fit: contain; }
.galeria__foto:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; border-radius: var(--radio); }
.galeria__ampliar { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radio); background: var(--esmalte); color: var(--tinta); transition: background-color var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .galeria__foto:hover .galeria__ampliar { background: var(--gris); } }
.galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; }
.galeria__miniaturas button { flex: 0 0 104px; aspect-ratio: 3 / 2; padding: 4px; background: var(--papel); border: 2px solid transparent; border-radius: var(--radio); cursor: pointer; transition: border-color var(--rapido) ease; }
.galeria__miniaturas button[aria-pressed="true"] { border-color: var(--tinta); }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.galeria__nota { font-size: var(--t-chico); color: var(--tinta-2); }
/* la foto es de otro modelo (el anterior o uno parecido): se dice en la tarjeta, como en la ficha */
.moto__foto-nota { font-size: var(--t-chico); color: var(--tinta-2); }
/* bloque de compra */
.compra__precio { display: grid; gap: 10px; justify-items: start; }
.compra__cuota { font-weight: 600; }
.compra__letra { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.5; }
.compra__consultar { font: 700 var(--t-bajada)/1.25 var(--fuente-texto); }
.compra__ventajas { display: grid; gap: 6px; padding: 16px 18px; background: var(--esmalte); border-radius: var(--radio); font-size: var(--t-chico); font-weight: 600; }
.compra__ventajas li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.compra__ventajas li::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: translateY(-3px) rotate(-45deg); }
.consulta { display: grid; gap: 16px; }
.consulta fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.consulta legend { font-weight: 600; font-size: var(--t-chico); margin-bottom: 8px; padding: 0; }
.consulta__sin-dato { font-size: var(--t-chico); color: var(--tinta-2); }
.consulta__nombre { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.opcional { font-weight: 400; color: var(--tinta-2); }
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.colores input { position: absolute; opacity: 0; pointer-events: none; }
.colores label { width: 40px; height: 40px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px rgba(14, 15, 17, 0.2), 0 0 0 2px var(--papel), 0 0 0 3.5px transparent; cursor: pointer; transition: box-shadow var(--rapido) ease, transform var(--rapido) var(--salida); } /* taste-skill-ignore: anillo de selección de la muestra de color */
.colores label:active { transform: scale(0.94); }
.colores input:checked + label { box-shadow: inset 0 0 0 1px rgba(14, 15, 17, 0.2), 0 0 0 2px var(--papel), 0 0 0 3.5px var(--tinta); } /* taste-skill-ignore: anillo de la muestra elegida */
.colores input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 4px; }
.colores__nombre { font-size: var(--t-chico); margin-top: 6px; }
/* lo que incluye tu 0 km */
.incluye { background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; }
.incluye__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 18px clamp(20px, 3vw, 40px); }
.incluye__lista dt { font-weight: 650; }
.incluye__lista dd { color: var(--tinta-2); font-size: var(--t-chico); line-height: 1.5; margin-top: 2px; }
@media (max-width: 600px) { .incluye__lista { grid-template-columns: 1fr; } }
.encabezado--chico { margin-bottom: 20px; }
.encabezado--chico .titulo { font-size: var(--t-sub); }
.encabezado--chico .bajada { font-size: var(--t-cuerpo); justify-self: end; grid-column: 8 / -1; text-align: right; }
.grilla--fila { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.productos--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grilla--fila, .productos--fila { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .grilla--fila > *, .productos--fila > * { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
  .productos--fila > * { flex-basis: min(56vw, 240px); }
  .encabezado--chico .bajada { justify-self: start; text-align: left; }
}
/* barra de compra fija en el celu: aparece cuando el bloque de compra sale de pantalla */
.compra-celu { display: none; }
@media (max-width: 900px) {
  .compra-celu {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: var(--tinta); color: #fff;
    transform: translateY(105%); transition: transform var(--medio) var(--salida);
  }
  .compra-celu[data-visible] { transform: none; }
  .compra-celu__precio { font: 700 1.125rem/1.2 var(--fuente-texto); white-space: nowrap; }
  .compra-celu .boton { min-height: 44px; }
}
/* visor de fotos ampliadas */
.visor { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; background: var(--papel); color: var(--tinta); transition: opacity 200ms var(--salida), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.visor:not([open]) { opacity: 0; }
@starting-style { .visor[open] { opacity: 0; } }
.visor__barra { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--margen); z-index: 1; }
.visor__barra .barra__icono { color: var(--tinta); background: var(--esmalte); }
.visor__cuenta { font-weight: 600; font-size: var(--t-chico); }
.visor__escenario { position: absolute; inset: 64px 0 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.visor__escenario img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: var(--radio); background: var(--esmalte); color: var(--tinta); cursor: pointer; transition: background-color var(--rapido) ease, transform var(--rapido) var(--salida); }
.visor__flecha:active { transform: translateY(-50%) scale(0.96); }
.visor__flecha--ant { left: var(--margen); }
.visor__flecha--sig { right: var(--margen); }
@media (hover: hover) and (pointer: fine) { .visor__flecha:hover { background: var(--gris); } }
/* la ficha técnica: el único papel que queda, el formulario de casilleros */
.formulario { background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; }
.formulario__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.formulario__grupo h3 { font: 700 1.25rem/1.1 var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 10px; }
.casilleros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.casillero { background: var(--esmalte); border-radius: 3px; padding: 9px 12px 11px; min-height: 64px; }
.casillero dt { font-size: 0.8125rem; color: var(--tinta-2); font-weight: 600; }
.casillero dd { font-weight: 600; margin-top: 2px; line-height: 1.35; }
.casillero--ancho { grid-column: span 2; }
@media (max-width: 600px) { .casilleros { grid-template-columns: 1fr 1fr; } .casillero--ancho { grid-column: span 2; } }
.opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--papel); border: 1.5px solid var(--gris-2); border-radius: var(--radio); cursor: pointer; font-weight: 600; font-size: var(--t-chico); transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease, transform var(--rapido) var(--salida); }
.opciones label:active { transform: scale(0.97); }
.opciones input:checked + label { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.opciones input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opciones input:not(:checked) + label:hover { border-color: var(--tinta); } }
.error { color: var(--rojo); font-weight: 600; font-size: var(--t-chico); min-height: 1.3em; }
@media (max-width: 900px) {
  .galeria, .ficha > .datos-clave, .formulario, .te-queda, .incluye, .compra { grid-column: 1 / -1; grid-row: auto; position: static; }
}

/* quiz */
.quiz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.quiz form { grid-column: 1 / span 6; display: grid; gap: var(--hueco); }
.pregunta { background: var(--papel); border-radius: var(--radio); padding: 20px; border: 0; margin: 0; }
.pregunta legend { font-weight: 700; font-size: var(--t-bajada); line-height: 1.3; padding: 0; margin-bottom: 14px; float: left; width: 100%; }
.pregunta legend + * { clear: both; }
.pregunta label:not(.opciones label) { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.pregunta .control { max-width: 160px; }
.quiz__resultado { grid-column: 7 / -1; position: sticky; top: calc(var(--alto-barra) + var(--hueco)); display: grid; gap: 14px; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); }
@media (max-width: 900px) { .quiz form, .quiz__resultado { grid-column: 1 / -1; position: static; } }
.recomendada { display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--esmalte); border-radius: var(--radio); padding: 12px; align-items: center; text-decoration: none; transition: transform var(--rapido) var(--salida); }
.recomendada:active { transform: scale(0.98); }
.recomendada img { aspect-ratio: 3 / 2; object-fit: contain; background: var(--papel); border-radius: 4px; }
.recomendada b { display: block; font-weight: 700; }

/* service: el plan, como tabla */
.libreta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.libreta__hojas { grid-column: 1 / span 7; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); display: grid; gap: 0; }
.libreta__hojas h2 { margin-bottom: 12px; }
.plan { width: 100%; border-collapse: collapse; }
.plan th, .plan td { text-align: left; vertical-align: baseline; padding: 14px 12px; border-bottom: 1px solid var(--linea); transition: background-color var(--medio) ease; }
.plan th { font-weight: 700; white-space: nowrap; }
.plan td { color: var(--tinta-2); font-size: var(--t-chico); }
.plan td.estado-celda { text-align: right; }
.plan .estado { font-size: 0.8125rem; font-weight: 600; border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.plan tr[data-estado="hecho"] .estado { background: var(--gris); color: var(--tinta-2); }
.plan tr[data-estado="toca"] th, .plan tr[data-estado="toca"] td { background: var(--esmalte); }
.plan tr[data-estado="toca"] .estado { background: var(--tinta); color: #fff; }
.libreta__hojas .nota { margin-top: 16px; }
.libreta__form { grid-column: 8 / -1; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; position: sticky; top: calc(var(--alto-barra) + var(--hueco)); }
.libreta__form fieldset { border: 0; padding: 0; margin: 0; }
.libreta__form legend { font-weight: 600; font-size: var(--t-chico); margin-bottom: 6px; }
@media (max-width: 900px) { .libreta__hojas, .libreta__form { grid-column: 1 / -1; position: static; } }
@media (max-width: 560px) { .plan th, .plan td { padding-inline: 6px; } }

/* tienda */
.tienda { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.tienda__productos { grid-column: 1 / span 8; }
.tienda__carrito { grid-column: 9 / -1; position: sticky; top: calc(var(--alto-barra-compacta) + var(--hueco)); }
.categorias-tienda { flex-wrap: wrap; }
.categorias-tienda button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.segmento__n { font-weight: 400; color: var(--tinta-2); margin-left: 2px; }
button[aria-pressed="true"] .segmento__n { color: var(--claro-2); }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--hueco); margin-top: var(--hueco); }
.producto { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 4px; background: var(--papel); border-radius: var(--radio); padding: 0 16px 18px; overflow: hidden; }
.producto[hidden] { display: none; }
.producto__foto { margin: 0 -16px 8px; aspect-ratio: 1; display: grid; place-items: center; background: var(--papel); }
.producto__foto img { width: 100%; height: 100%; object-fit: contain; }
.producto__nombre { font-size: var(--t-cuerpo); line-height: 1.3; font-weight: 650; }
.producto__tipo { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.4; }
.producto__precio { font: 800 var(--t-sub)/1 var(--fuente-titulo); letter-spacing: 0.01em; margin-top: 10px; }
.producto .boton { min-height: 44px; justify-self: stretch; margin-top: 12px; font-size: var(--t-chico); }
.producto .boton[data-hecho] { background: var(--tinta-2); }
.repuesto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 32px; align-items: start; margin-top: clamp(32px, 4vw, 56px); background: var(--papel); border-radius: var(--radio); padding: clamp(22px, 3vw, 36px); }
.repuesto p { color: var(--tinta-2); margin-top: 8px; max-width: 40ch; }
.repuesto__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.repuesto__form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.repuesto__form .error, .repuesto__form .boton { grid-column: 1 / -1; justify-self: start; }
.repuesto__form .error:empty { display: none; }
@media (max-width: 900px) { .repuesto, .repuesto__form { grid-template-columns: 1fr; } }
.carrito { background: var(--papel); border-radius: var(--radio); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; }
.carrito__cabeza { display: flex; align-items: center; gap: 10px; }
.carrito__lista { display: grid; gap: 8px; }
.carrito__vacio { color: var(--tinta-2); font-size: var(--t-chico); }
.carrito__nota { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.45; }
.carrito__totales { display: grid; gap: 6px; padding-top: 4px; }
.carrito__totales div, .resumen__totales div { display: flex; justify-content: space-between; gap: 12px; }
.carrito__totales dt, .resumen__totales dt { color: var(--tinta-2); }
.carrito__totales dd, .resumen__totales dd { font-weight: 650; text-align: right; }
.carrito__totales[hidden] { display: none; }
.boton[aria-disabled="true"] { background: var(--gris); color: var(--tinta-2); cursor: not-allowed; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; background: var(--esmalte); border-radius: var(--radio); padding: 12px 14px; }
/* solo el renglón recién agregado entra (la lista se redibuja con cada cambio de cantidad) */
@media (prefers-reduced-motion: no-preference) { .item--nuevo { animation: entraItem var(--medio) var(--salida); } }
@keyframes entraItem { from { opacity: 0; transform: translateY(-4px); } }
.item__nombre { font-weight: 600; line-height: 1.3; }
.item__unitario { display: block; font-weight: 400; font-size: var(--t-chico); color: var(--tinta-2); }
.item__subtotal { font-weight: 700; text-align: right; white-space: nowrap; align-self: start; }
.item__cant { display: inline-flex; align-items: center; gap: 4px; }
.item__cant span { min-width: 2ch; text-align: center; font-weight: 600; }
.item__cant button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radio); background: var(--papel); color: var(--tinta); cursor: pointer; transition: transform var(--rapido) var(--salida), background-color var(--rapido) ease; }
.item__cant button:active { transform: scale(0.97); }
.icono--cant { width: 18px; height: 18px; }
.item__cant button[disabled] { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .item__cant button:not([disabled]):hover { background: var(--gris); } }
.item__quitar { background: none; border: 0; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--tinta-2); text-underline-offset: 0.25em; font-weight: 600; font-size: var(--t-chico); cursor: pointer; padding: 10px 0; justify-self: end; }
.contador { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--tinta); color: #fff; font: 700 0.8125rem/1 var(--fuente-texto); }
.contador[hidden] { display: none; }
.pedido-celu { display: none; }
@media (max-width: 900px) {
  .tienda__productos, .tienda__carrito { grid-column: 1 / -1; position: static; }
  /* transición y no keyframe: si se vacía el carrito, baja por el mismo camino por el que subió */
  .pedido-celu {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: var(--tinta); color: #fff;
    transition: transform var(--medio) var(--salida), opacity var(--medio) var(--salida), display var(--medio) allow-discrete;
  }
  .pedido-celu[hidden] { display: none; transform: translateY(100%); }
  @starting-style { .pedido-celu:not([hidden]) { transform: translateY(100%); } }
  .pedido-celu .boton { min-height: 44px; }
}

/* checkout */
.progreso { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--hueco); counter-reset: none; }
.progreso li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; background: var(--papel); border-radius: var(--radio); font-weight: 600; font-size: var(--t-chico); color: var(--tinta-2); }
.progreso__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gris); color: var(--tinta); font-size: 0.8125rem; }
.progreso li[aria-current="step"] { color: var(--tinta); }
.progreso li[aria-current="step"] .progreso__n, .progreso li[data-hecho] .progreso__n { background: var(--tinta); color: #fff; }
.checkout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.checkout[hidden], .progreso[hidden] { display: none; }
.checkout__form { grid-column: 1 / span 7; display: grid; gap: var(--hueco); }
.etapa { border: 0; margin: 0; min-width: 0; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 16px; transition: opacity var(--medio) ease; }
.etapa[disabled] { opacity: 0.55; }
.etapa__titulo { padding: 0; float: left; width: 100%; }
.etapa__titulo + * { clear: both; }
.etapa__campos { display: grid; gap: 14px; }
.etapa__campos[hidden] { display: none; }
.etapa__campos > .boton { justify-self: start; }
.etapa label { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.etapa__resumen { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--tinta-2); }
.etapa__resumen[hidden] { display: none; }
.boton-texto { background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; font-weight: 600; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .campos-2 { grid-template-columns: 1fr; } }
.entregas { display: grid; gap: 8px; }
.checkout .entrega { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--gris-2); border-radius: var(--radio); cursor: pointer; font-size: var(--t-cuerpo) !important; transition: border-color var(--rapido) ease, background-color var(--rapido) ease; }
.entrega input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); }
.entrega b { display: block; font-weight: 650; }
.entrega span span { font-weight: 400; font-size: var(--t-chico); color: var(--tinta-2); }
.entrega:has(input:checked) { border-color: var(--tinta); background: var(--esmalte); }
.campos-envio { display: grid; gap: 14px; }
.campos-envio[hidden] { display: none; }
.pago-mp { display: grid; gap: 12px; }
.aviso-demo { background: var(--esmalte); border-radius: var(--radio); padding: 12px 14px; font-size: var(--t-chico); }
.checkout__alternativa { font-size: var(--t-chico); color: var(--tinta-2); }
.boton[aria-busy="true"] { cursor: progress; }
.resumen { grid-column: 8 / -1; position: sticky; top: calc(var(--alto-barra-compacta) + var(--hueco)); background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; }
.resumen__lista { display: grid; gap: 8px; }
.resumen__totales { display: grid; gap: 8px; }
.resumen__total { padding-top: 10px; border-top: 1px solid var(--linea); } /* taste-skill-ignore: renglón del total de una tabla de importes */
.resumen__totales .resumen__total dt { color: var(--tinta); font-weight: 650; }
.resumen__total dd { font: 800 var(--t-sub)/1 var(--fuente-titulo); }
@media (max-width: 900px) {
  .checkout__form, .resumen { grid-column: 1 / -1; position: static; }
  .resumen { order: -1; }
  .progreso { overflow-x: auto; }
}

/* vueltas de Mercado Pago */
.vuelta { display: grid; gap: 20px; justify-items: start; padding: clamp(40px, 6vw, 88px) 0 0; }
.vuelta[hidden] { display: none; }
.vuelta__detalle:empty { display: none; }
.vuelta__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; min-width: min(100%, 720px); }
.vuelta__datos div { background: var(--papel); border-radius: var(--radio); padding: 12px 16px; }
.vuelta__datos dt { font-size: var(--t-chico); color: var(--tinta-2); }
.vuelta__datos dd { font-weight: 650; }

/* páginas: secciones simples */
.bloque-texto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.bloque-texto > * { grid-column: 1 / span 7; }
@media (max-width: 900px) { .bloque-texto > * { grid-column: 1 / -1; } }

/* dónde la retirás (fichas y service) */
.retiro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); margin-top: var(--entre-secciones); align-items: stretch; }
.retiro__texto { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: center; justify-items: start; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); }
.retiro figure { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--gris); aspect-ratio: 4 / 5; }
.retiro figure:nth-of-type(1) { grid-column: 5 / span 3; }
.retiro figure:nth-of-type(2) { grid-column: 8 / span 2; aspect-ratio: auto; }
.retiro figure:nth-of-type(3) { grid-column: 10 / span 3; }
.retiro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .retiro { grid-template-columns: 1fr 1fr; }
  .retiro__texto { grid-column: 1 / -1; }
  .retiro figure:nth-of-type(n) { grid-column: auto; aspect-ratio: 3 / 4; }
  .retiro figure:nth-of-type(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
.foto-taller { border-radius: var(--radio); overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--gris); }
.foto-taller img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* 404 */
.no-esta { min-height: 64svh; display: grid; place-items: center; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .dialogo:not([open]), .dialogo[open] { transform: none; }
  @starting-style { .dialogo[open] { transform: none; } }
  .preguntas details::details-content { transition-property: opacity, content-visibility; }
  .preguntas details[open]::details-content, .preguntas details::details-content { height: auto; }
  .boton:active, .comparar:active, .cuotas label:active, .barra__menu:active, .recomendada:active, .item__cant button:active { transform: none; }
  .boton .flecha { transition: none; }
}

/* catálogo: cuenta, filtros activos y nota de precios (una sola vez) */
.resumen-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.resumen-filtros .cuenta { font-size: var(--t-cuerpo); }
.resumen-filtros .cuenta b { font-weight: 700; }
.resumen-filtros .nota--precios { margin: 0 0 0 auto; }
.activos { display: flex; flex-wrap: wrap; gap: 6px; }
.activos:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: var(--radio);
  background: var(--tinta); color: #fff; font: 600 var(--t-chico)/1 var(--fuente-texto); cursor: pointer;
  transition: background-color var(--rapido) ease, transform var(--rapido) var(--salida);
}
.chip:active { transform: scale(0.96); }
.chip--limpiar { background: none; color: var(--tinta); padding: 0 8px; text-decoration: underline; text-decoration-color: var(--tinta-2); text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .chip:not(.chip--limpiar):hover { background: #2a2d33; } }
@media (max-width: 700px) { .resumen-filtros .nota--precios { margin-left: 0; flex-basis: 100%; } }

/* ficha: las cifras clave, grandes */
.datos-clave { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
/* en el celu, cuatro cifras van de a dos (nunca una sola en la segunda fila) */
@media (max-width: 600px) { .datos-clave[style*="--n:4"] { grid-template-columns: 1fr 1fr; } }
.datos-clave div { background: var(--papel); border-radius: var(--radio); padding: 14px 16px 16px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.datos-clave dt { font-size: var(--t-chico); color: var(--tinta-2); }
.datos-clave dd { font: 700 1.125rem/1 var(--fuente-titulo); text-transform: uppercase; margin-top: 6px; }
.datos-clave b { font: 800 var(--t-titulo)/1 var(--fuente-titulo); letter-spacing: 0.01em; }

/* catálogo: con fotos o como lista de precios */
.vistas { margin-top: 16px; }
.vistas button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.lista-vista { margin-top: 24px; }
.lista-vista[hidden] { display: none; }
.catalogo--lista .grilla, .catalogo--lista .filtros, .catalogo--lista .activos, .catalogo--lista .vacio { display: none; }
.comparador-barra:not([data-visible]) { visibility: hidden; transition: transform var(--medio) var(--cajon), visibility 0s linear var(--medio); }
.pedido-celu span, .pedido-celu .boton { white-space: nowrap; }

/* catálogo: categorías de un toque y filtros plegados en el celu */
.cats-rapidas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--hueco); padding-bottom: 2px; }
.cats-rapidas::-webkit-scrollbar { display: none; }
.cats-rapidas button {
  flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gris-2); border-radius: var(--radio); background: var(--papel);
  font: 600 var(--t-chico)/1 var(--fuente-texto); color: var(--tinta); cursor: pointer;
  transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease, transform var(--rapido) var(--salida);
}
.cats-rapidas button:active { transform: scale(0.96); }
.cats-rapidas button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .cats-rapidas button[aria-pressed="false"]:hover { border-color: var(--tinta); } }
.filtros-boton { display: none; }
@media (max-width: 700px) {
  .filtros-boton { display: inline-flex; min-height: 44px; font-size: var(--t-chico); }
  .filtros:not([data-abierto]) { display: none; }
  .filtros[data-abierto] { margin-top: 10px; }
  .filtros label:first-child { display: none; }
}
@media (min-width: 701px) { .filtros label:first-child { display: none; } }

/* movimiento (filtro de Emil, 22/10): la etapa que se abre en el checkout aparece en vez de saltar,
   y el tilde del pago aprobado se dibuja (momento raro y con emoción: el único gesto de "deleite") */
@media (prefers-reduced-motion: no-preference) {
  .etapa[data-actual] .etapa__campos { animation: apareceEtapa 200ms var(--salida); }
  .vuelta__tilde path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: dibujaTilde 520ms var(--salida) 180ms forwards; }
}
@keyframes apareceEtapa { from { opacity: 0; transform: translateY(4px); } }
@keyframes apareceSuave { from { opacity: 0; } }
@keyframes dibujaTilde { to { stroke-dashoffset: 0; } }
.vuelta__tilde { width: 56px; height: 56px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; }
.vuelta__tilde svg { width: 30px; height: 30px; }

/* movimiento reducido en lo nuevo: sin desplazamientos, solo fundidos o cambios instantáneos */
@media (prefers-reduced-motion: reduce) {
  .barra, .marca, .barra__nav, .barra__herramientas { transition-duration: 0s !important; }
  /* las barras de abajo entran y salen con un fundido, sin desplazamiento */
  .compra-celu, .compra-celu[data-visible] { transform: none; }
  .compra-celu { opacity: 0; visibility: hidden; transition: opacity 150ms var(--salida), visibility 0s linear 150ms; }
  .compra-celu[data-visible] { opacity: 1; visibility: visible; transition: opacity 150ms var(--salida); }
  .comparador-barra, .comparador-barra[data-visible] { transform: translate(-50%, 0); }
  .comparador-barra:not([data-visible]) { opacity: 0; transition: opacity 150ms var(--salida), visibility 0s linear 150ms; }
  .comparador-barra[data-visible] { opacity: 1; transition: opacity 150ms var(--salida); }
  /* el paso nuevo del checkout y la fila nueva del pedido aparecen fundiendo, sin subir */
  .etapa[data-actual] .etapa__campos { animation: apareceSuave 200ms var(--salida); }
  .item--nuevo { animation: apareceSuave var(--medio) var(--salida); }
  .mega[hidden], .menu-celu:not([open]) { transform: none; }
  @starting-style { .mega:not([hidden]), .menu-celu[open] { transform: none; } }
  .barra__icono:active, .cats-rapidas button:active, .chip:active, .colores label:active, .item__cant button:active { transform: none; }
  .barra__desplegar .icono, .preguntas summary::after { transition: none; }
  .segmento button:active, .pestanas button:active, .opciones label:active { transform: none; }
  .visor__flecha:active { transform: translateY(-50%); }
  .pedido-celu[hidden] { transform: none; opacity: 0; }
  @starting-style { .pedido-celu:not([hidden]) { transform: none; opacity: 0; } }
}

/* checkout: miniatura de cada producto en el resumen */
.item--resumen { grid-template-columns: 56px 1fr auto; }
.item--resumen .item__mini { grid-row: span 2; width: 56px; height: 56px; border-radius: 4px; background: var(--papel); display: grid; place-items: center; overflow: hidden; }
.item--resumen .item__mini img { width: 100%; height: 100%; object-fit: contain; }
.item--resumen .item__cant { grid-column: 2; }
.item--resumen .item__quitar { grid-column: 3; }

.control[aria-invalid="true"] { border-color: var(--rojo); }

/* ═════════ requisitos legales de vender online y lo que suma la opción C (22/10, noche) ═════════ */
/* pie: el botón de arrepentimiento, la Ventanilla Única Federal (Res. 274/2021: el texto va en tres renglones), la
   política de privacidad y, en la tienda, los datos del vendedor. Un escalón de tono sobre la tinta, sin filetes */
.pie__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; padding: 20px 24px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radio); font-size: var(--t-chico); }
.pie__legal .boton { min-height: 44px; }
.pie__ventanilla { color: #fff; font-weight: 600; line-height: 1.3; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }
.pie__enlace { color: var(--claro-2); text-underline-offset: 3px; }
.pie__vendedor { flex-basis: 100%; color: var(--claro-3); }
.pie__vendedor span { color: #fff; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .pie__ventanilla:hover, .pie__enlace:hover { color: #fff; text-decoration-color: #fff; } }

/* Ley 27.743: el neto en letra menor que el precio final, con la leyenda de la norma (sin el dato no se muestra) */
.precio-neto { font: 600 0.8125rem/1.35 var(--fuente-texto); letter-spacing: 0.01em; color: var(--tinta-2); margin-top: 4px; }
.tabla-precios .precio-neto { display: block; text-align: right; }

/* Ley 25.326: la casilla de consentimiento, con la finalidad dicha y la política a mano */
.consentimiento { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; align-items: start; font-size: var(--t-chico); line-height: 1.45; }
.consentimiento input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinta); cursor: pointer; }
.consentimiento label { display: block; font-weight: 400; font-size: var(--t-chico); cursor: pointer; }
.consentimiento a { grid-column: 2; justify-self: start; }
.consentimiento input[aria-invalid="true"] { outline: 2px solid var(--rojo); outline-offset: 2px; }
.contacto__arrepentimiento, .checkout__arrepentimiento { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.5; }

/* botón de arrepentimiento: el formulario y, al mandarlo, el código */
.tramite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.tramite__form, .tramite__hecho { grid-column: 1 / span 7; display: grid; gap: 14px; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 2.6vw, 32px); }
.tramite__form[hidden], .tramite__hecho[hidden] { display: none; }
.tramite__form > label, .tramite__form .campos-2 label { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.tramite__form > .boton { justify-self: start; }
.tramite__hecho:focus { outline: none; }
.tramite__codigo { justify-self: start; padding: 14px 18px; background: var(--esmalte); border-radius: var(--radio); font: 800 var(--t-titulo)/1 var(--fuente-titulo); letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums; user-select: all; }
.tramite__info { grid-column: 9 / span 4; display: grid; gap: 16px; align-content: start; }
.tramite__pasos { display: grid; gap: 14px; }
.tramite__pasos dt { font-weight: 700; }
.tramite__pasos dd { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.5; }
textarea.control { min-height: 96px; padding-block: 10px; resize: vertical; line-height: 1.5; }
@media (max-width: 900px) { .tramite__form, .tramite__hecho, .tramite__info { grid-column: 1 / -1; } }

/* política de privacidad: una columna de lectura, con la tabla real de qué datos y para qué */
.legal { display: grid; gap: clamp(28px, 3vw, 40px); max-width: 920px; background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3vw, 48px); }
.legal section { display: grid; gap: 10px; }
.legal p { max-width: 68ch; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: var(--t-chico); line-height: 1.5; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linea); }
.tabla-legal thead th { color: var(--tinta-2); font-weight: 600; }
.tabla-legal tbody th { font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
  .tabla-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-legal tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .tabla-legal th, .tabla-legal td { display: block; padding: 0; border: 0; }
  .tabla-legal td:last-child { color: var(--tinta-2); }
}

/* Res. 915-E/2017: con la tasa del local, la cuota con interés va con el CFT (más visible que la TEA), la TEA, el precio
   de contado, el anticipo y el precio total financiado. Sin la tasa no se muestra */
.resultado__principal[hidden], .resultado__tasa[hidden] { display: none; }
.resultado__tasa { display: grid; gap: 8px; }
.resultado__cft { font: 800 var(--t-sub)/1.1 var(--fuente-titulo); letter-spacing: 0.01em; }
.resultado__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: var(--t-chico); }
.resultado__legal div { display: flex; justify-content: space-between; gap: 8px; }
.resultado__legal dt { color: var(--tinta-2); }
.resultado__legal dd { font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .resultado__legal { grid-template-columns: 1fr; } }

/* solicitud de financiación (opción C): el porqué a la izquierda, el formulario a la derecha */
.solicitud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.solicitud__texto { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: start; padding-right: clamp(0px, 3vw, 48px); }
.solicitud__puntos { display: grid; gap: 14px; }
.solicitud__puntos dt { font-weight: 700; }
.solicitud__puntos dd { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.5; }
.solicitud__resumen { padding: 12px 16px; background: var(--papel); border-radius: var(--radio); font-weight: 600; }
.solicitud__resumen:empty { display: none; }
.solicitud__form { grid-column: 6 / span 7; display: grid; gap: 14px; background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 2.6vw, 32px); }
.solicitud__form .campos-2 label { display: grid; gap: 6px; font-weight: 600; font-size: var(--t-chico); }
.solicitud__form fieldset, .libreta__form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.solicitud__form legend, .libreta__form legend { font-weight: 600; font-size: var(--t-chico); margin-bottom: 8px; padding: 0; }
.libreta__form [data-correo][hidden] { display: none; }
@media (max-width: 900px) { .solicitud__texto, .solicitud__form { grid-column: 1 / -1; } .solicitud__texto { padding-right: 0; } }

/* kit de entrega sugerido (ficha): el total y el botón a la izquierda, los productos en escalones de tono a la derecha.
   En el celu, primero los productos y después el total con el botón */
.kit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.kit__texto { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; padding-right: clamp(0px, 3vw, 48px); }
.kit__texto .acciones { justify-self: start; }
.kit__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.kit__total span { font-weight: 600; color: var(--tinta-2); }
/* el total del kit en tamaño de subtítulo: no puede ser el número más grande de la ficha (crítica, ronda 2) */
.kit__total b { font: 800 var(--t-sub)/1 var(--fuente-titulo); letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; }
.kit__lista { grid-column: 6 / span 7; display: grid; gap: 4px; }
.kit__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 10px 14px 10px 10px; background: var(--papel); border-radius: var(--radio); }
.kit__foto { grid-row: span 2; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; background: var(--esmalte); border-radius: 4px; }
.kit__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kit__nombre { grid-row: span 2; display: grid; gap: 2px; line-height: 1.35; }
.kit__nombre span { font-size: var(--t-chico); color: var(--tinta-2); }
.kit__precio { display: grid; justify-items: end; font: 800 var(--t-sub)/1 var(--fuente-titulo); letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.kit__solo { justify-self: end; min-height: 32px; font-size: var(--t-chico); }
.kit__solo[data-hecho] { text-decoration: none; }
@media (max-width: 900px) {
  .kit__texto { display: contents; }
  .kit__texto > *, .kit__lista { grid-column: 1 / -1; }
  .kit__lista { order: 3; margin-block: 6px 10px; }
  .kit__total { order: 4; }
  .kit__texto .acciones { order: 5; }
  .kit__texto .nota { order: 6; }
}
@media (max-width: 560px) {
  .kit__item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 12px; }
  .kit__foto { width: 56px; height: 56px; }
}

/* las barras fijas del celu (compra en la ficha, pedido en la tienda) no tapan el final del pie */
@media (max-width: 900px) {
  body:has(.compra-celu) .pie, body:has(.pedido-celu:not([hidden])) .pie, body:has(.quiz-celu:not([hidden])) .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* catálogo: "Comparar" es una casilla liviana debajo de "Ver" y "WhatsApp" (sobre la foto tapaba espejos y manubrios) */
.comparar--linea { justify-self: start; align-self: start; margin-top: 4px; padding: 0 2px; min-height: 40px; background: none; border: 0; font-size: var(--t-chico); }
.comparar--linea:has(input:checked) { background: none; color: var(--tinta); }
.comparar--linea:has(input:checked) input { accent-color: var(--tinta); }

/* tienda: los productos sin foto van como renglones de lista de precios, sin caja gris (crítica, ronda 1);
   en el celu, las tarjetas con foto en dos columnas */
.producto--renglon { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 24px; padding: 16px 20px; }
.producto--renglon .producto__precio { margin-top: 0; }
.producto__cierre { display: grid; justify-items: end; text-align: right; }
.producto--renglon .boton { margin-top: 0; justify-self: end; }
@media (max-width: 560px) {
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .producto { padding: 0 12px 14px; }
  .producto .boton { padding-inline: 10px; }
  .producto--renglon { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; gap: 10px 16px; }
}
.kit__item--sin-foto { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; min-height: 72px; }

/* ═════════ ritmo del inicio (crítica, ronda 1): campo azul, fachada a sangre y campo de tinta ═════════ */
/* la cub 110 sobre tinta, de borde a borde: el despiece sale de la caja blanca y el texto va directo sobre el campo */
.campo-tinta { background: var(--tinta); color: #fff; padding-block: clamp(64px, 8vw, 128px); margin-top: var(--entre-secciones); }
.campo-tinta--pagina { margin-top: clamp(16px, 2vw, 24px); }
.campo-tinta .titulo, .campo-tinta .bajada { color: #fff; }
.campo-tinta .vendida__placa { background: #17191c; }
.campo-tinta .vendida__placa .ayuda { color: var(--claro-3); }
.campo-tinta .vendida__texto { background: none; padding: clamp(4px, 1vw, 12px) 0 0 clamp(0px, 2.5vw, 40px); }
.campo-tinta .segmento { background: rgba(255, 255, 255, 0.1); }
.campo-tinta .segmento button, .campo-tinta .pestanas button { color: #fff; }
.campo-tinta .segmento button[aria-pressed="true"] { background: #fff; color: var(--tinta); }
.campo-tinta .pestanas button { border-color: rgba(255, 255, 255, 0.4); }
.campo-tinta .pestanas button[aria-selected="true"] { background: #fff; color: var(--tinta); border-color: #fff; }
@media (hover: hover) and (pointer: fine) { .campo-tinta .pestanas button[aria-selected="false"]:hover { border-color: #fff; } }
.campo-tinta .nota { color: var(--claro-2); }
.campo-tinta .pieza-tocada { background: rgba(255, 255, 255, 0.08); }
.campo-tinta .enlace { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
@media (max-width: 900px) { .campo-tinta .vendida__texto { padding: 12px 0 0; } }

/* el local: la fachada a sangre y el texto apoyado sobre su borde de abajo; la vereda arranca donde termina la foto */
.local__fachada { position: relative; width: 100%; aspect-ratio: 21 / 8; max-height: 82vh; overflow: hidden; background: var(--gris); }
.local__fachada img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.local__fachada .epigrafe { left: auto; right: var(--margen); bottom: 14px; text-align: right; }
.seccion-local .local { --apoyo: clamp(72px, 9vw, 160px); margin-top: calc(-1 * var(--apoyo)); position: relative; z-index: 1; align-items: start; }
.seccion-local .local__vereda, .seccion-local .local__taller { margin-top: var(--apoyo); }
@media (max-width: 900px) {
  .local__fachada { aspect-ratio: 4 / 3; }
  .local__fachada .epigrafe { left: var(--margen); right: var(--margen); text-align: left; }
  .seccion-local .local { margin-top: var(--hueco); }
  .seccion-local .local__vereda, .seccion-local .local__taller { margin-top: 0; }
}

/* las páginas de sección: las migas y el título, sin el aire de una sección del inicio en el medio */
.cabecera--migas { padding-bottom: 0; }
.envoltura:has(> .cabecera--migas) + .seccion { padding-top: clamp(16px, 2vw, 24px); }

/* un botón con hidden se oculta de verdad (.boton es inline-flex) */
.boton[hidden] { display: none; }

/* el cierre con dos fotos (service y contacto ya muestran la otra) */
.retiro--dos figure:nth-of-type(1) { grid-column: 5 / span 4; }
.retiro--dos figure:nth-of-type(2) { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .retiro--dos figure:nth-of-type(n) { grid-column: auto; aspect-ratio: 3 / 4; } }

/* checkout en el celu: el resumen plegado arriba, con la cuenta y el total; "Ver detalle" lo abre */
.resumen__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumen__mini { font-weight: 650; font-variant-numeric: tabular-nums; }
.resumen__mini[hidden], .resumen__detalle[hidden] { display: none; }
.resumen__detalle { display: grid; gap: 14px; }

/* quiz en el celu: una barra al pie lleva al resultado, que queda debajo de la última pregunta */
.quiz-celu { display: none; }
@media (max-width: 900px) {
  /* transición y no keyframe: la prende y apaga el scroll, así que tiene que poder darse vuelta a mitad de camino */
  .quiz-celu {
    display: inline-flex; position: fixed; left: var(--margen); right: var(--margen); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; min-height: 48px;
    transition: transform var(--medio) var(--salida), opacity var(--medio) var(--salida), background-color var(--medio) ease, border-color var(--medio) ease, display var(--medio) allow-discrete;
  }
  .quiz-celu[hidden] { display: none; transform: translateY(calc(100% + 12px + env(safe-area-inset-bottom))); }
  @starting-style { .quiz-celu:not([hidden]) { transform: translateY(calc(100% + 12px + env(safe-area-inset-bottom))); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .quiz-celu[hidden] { transform: none; opacity: 0; }
  @starting-style { .quiz-celu:not([hidden]) { transform: none; opacity: 0; } }
}

/* con una barra fija abajo (compra, pedido, quiz o comparador), el foco y los saltos no quedan debajo de ella (audit, WCAG 2.4.11) */
html:has(.compra-celu[data-visible], .pedido-celu:not([hidden]), .quiz-celu:not([hidden]), .comparador-barra[data-visible]) { scroll-padding-bottom: 96px; }

/* en pantallas táctiles, cada control de los flujos de compra mide al menos 44 px (audit: había de 34 a 40) */
@media (pointer: coarse) {
  .chip, .kit__solo, .comparar--linea, .buscador__ayuda button, .segmento button, .pestanas button { min-height: 44px; }
  .item__cant button, .colores label { min-width: 44px; min-height: 44px; }
  .buscador__ayuda button { display: inline-flex; align-items: center; }
}

/* despiece en el celu: la imagen del render y "Ver en 3D"; la ayuda de arrastrar aparece recién con el 3D */
.vendida__placa:not([data-3d]) .ayuda { display: none; }
.ver-3d { position: absolute; left: 16px; bottom: 16px; z-index: 1; }

/* el bloque de compra fijo nunca queda más alto que la ventana: si no entra (pantallas bajas), se desplaza por dentro */
@media (min-width: 901px) {
  .compra { max-height: calc(100vh - var(--alto-barra-compacta) - 2 * var(--hueco)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* si igual no entra, el borde de abajo funde mientras quede algo por ver: antes quedaba un renglón partido por el borde */
  .compra[data-desborda] { mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); } /* taste-skill-ignore: máscara que avisa que el bloque sigue, no es un relleno */
}
/* en pantallas de compu bajas, el bloque se compacta: a 1440×900 entra entero */
@media (min-width: 901px) and (max-height: 960px) {
  .compra { gap: 12px; padding: 22px; }
}

/* ficha en el celu: la foto, las cuatro cifras en una fila compacta pegada a ella y enseguida el bloque de compra con el
   precio (crítica ronda 1: el precio arriba; ronda 2: las cifras pegadas a la foto, no después del formulario) */
@media (max-width: 900px) {
  .ficha > .galeria { order: 1; }
  .ficha > .datos-clave { order: 2; margin-top: -4px; }
  .ficha > .compra { order: 3; }
  .ficha > :not(.galeria, .datos-clave, .compra) { order: 4; }
}
@media (max-width: 600px) {
  .datos-clave, .datos-clave[style*="--n:4"] { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .datos-clave div { padding: 10px 8px 12px; gap: 2px; }
  .datos-clave b { font-size: 1.625rem; }
  .datos-clave dd { font-size: 0.875rem; }
  .datos-clave dt { font-size: 0.875rem; }
}

/* ficha sin precio: la firma igual encabeza el bloque, con "A consultar" a la escala de un subtítulo (no de un precio) */
.firma-precio--consultar .firma-precio__valor { font-size: var(--t-sub); padding-top: 8px; }

/* tienda: en los renglones, "Agregar" compacto junto al precio; el negro lleno queda para las tarjetas con foto,
   que en el celu dicen "Agregar" sin partirse en dos renglones */
.boton--compacto { min-height: 40px; padding: 0 16px; font-size: var(--t-chico); }
@media (max-width: 560px) {
  .agregar-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .producto--renglon { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .producto--renglon .producto__texto { grid-row: 1 / span 2; }
  .producto--renglon .boton { grid-column: 2; justify-self: end; align-self: end; }
}

/* celu: las categorías rápidas bajan de línea (cortadas a mitad de palabra parecían rotas) y los tipos de moto del
   inicio van en grilla de dos, con la quinta a lo ancho (el riel cortaba el texto adentro del panel) */
@media (max-width: 700px) {
  .cats-rapidas { flex-wrap: wrap; overflow: visible; }
  .gama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; gap: 4px; }
  .gama__item { flex: none; }
  .gama__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gama__enlace { padding: 10px 10px 14px; }
}

/* checkout: lo que no tiene foto va sin miniatura (como en la tienda, sin pictogramas) */
.item--resumen.item--sin-mini { grid-template-columns: minmax(0, 1fr) auto; }
.item--resumen.item--sin-mini .item__cant { grid-column: 1; }
.item--resumen.item--sin-mini .item__quitar { grid-column: 2; }

/* ficha: el kit de entrega como parte de la consulta por WhatsApp */
.consulta__kit { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-chico); font-weight: 600; cursor: pointer; }
.consulta__kit input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinta); }

/* tienda: "Consultar precio" en letra de cuerpo, como en el catálogo (el tamaño de precio queda para los precios) */
.producto__precio--consultar { font: 650 var(--t-cuerpo)/1.3 var(--fuente-texto); letter-spacing: 0; }
.buscador__sin-foto { display: block; aspect-ratio: 3 / 2; }

/* catálogo en el celu: tarjeta horizontal (foto a la izquierda, datos y acciones a la derecha). En una columna,
   31 motos eran unas 20 pantallas (crítica, ronda 2) */
@media (max-width: 560px) {
  #grilla .moto { grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  #grilla .moto__foto { align-self: center; }
  #grilla .moto__cuerpo { padding: 14px 12px 12px 0; grid-template-rows: none; gap: 2px; }
  #grilla .moto__nombre { font-size: var(--t-cuerpo); }
  #grilla .moto__precio { margin-top: 8px; gap: 4px; }
  #grilla .moto__acciones { margin-top: 10px; }
  #grilla .moto__acciones .boton { padding: 0 10px; }
  #grilla .comparar--linea { margin-top: 2px; }
}

/* hero: la firma de la casa con el precio más bajo del catálogo, debajo de las acciones */
/* la oferta y su nota van juntas: la nota aclara la cifra que tiene arriba */
.hero__oferta-bloque { display: grid; gap: 8px; margin-top: 22px; }
.hero__oferta { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 16px; color: #fff; }
.hero__oferta .firma-precio__valor { color: #fff; }
.hero__oferta-moto { color: #fff; font-size: var(--t-chico); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .hero__oferta-moto:hover { text-decoration-color: #fff; } }
.hero__nota { font-size: var(--t-chico); color: #fff; } /* blanca: en gris quedaba en 3,5:1 sobre los reflejos del piso (detector, 1440) */
@media (max-width: 700px) { .hero__oferta-bloque { margin-top: 14px; } }

/* catálogo: la cabecera de controles en un contenedor que se ordena según el ancho. En compu, chips, filtros, vista y
   conteo; en el celu, el botón de filtros y la vista en un renglón, y la ayuda de comparar se oculta (la casilla ya lo
   dice): así la primera moto entra en la primera pantalla (crítica, ronda 2) */
.catalogo__controles { display: flex; flex-direction: column; }
.catalogo__controles > .cats-rapidas { order: 1; }
.catalogo__controles > .filtros { order: 2; }
.catalogo__controles > .catalogo__fila { order: 3; }
.catalogo__controles > .resumen-filtros { order: 4; }
.catalogo__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 700px) {
  .catalogo__controles > .catalogo__fila { order: 2; }
  .catalogo__controles > .filtros { order: 3; }
  .nota__comparar { display: none; }
  .resumen-filtros { margin-top: 10px; }
}
@media (max-width: 700px) { .vista-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ═════════ ritmo (crítica, ronda 2) ═════════ */
/* en compu, toda segunda columna arranca donde arranca el texto del hero (columna 7): las bajadas, el texto de la cub,
   la vereda del local y los servicios. Antes eran cinco x distintas */
@media (min-width: 901px) {
  .encabezado .bajada, .encabezado .texto { grid-column: 7 / -1; }
  .encabezado--chico .bajada { grid-column: 8 / -1; }
  .vendida { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vendida__placa { grid-column: 1 / span 6; }
  .vendida__texto { grid-column: 7 / -1; }
  .campo-tinta .vendida__texto { padding-left: 0; }
  .local:not(.local--pagina) .local__texto { grid-column: 1 / span 6; }
  .local:not(.local--pagina) .local__vereda { grid-column: 7 / -1; }
  .servicios__foto { grid-column: 1 / span 6; }
  .servicios__lista { grid-column: 7 / -1; }
  /* las preguntas: el título a la izquierda y la lista en la segunda columna */
  #preguntas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
  #preguntas > .encabezado { grid-column: 1 / span 5; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 0; }
  #preguntas > .encabezado .titulo, #preguntas > .encabezado .bajada { grid-column: 1 / -1; }
  #preguntas > .preguntas { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); }
}
/* preguntas: un escalón de tono sobre el gris, no paneles blancos */
.preguntas details { background: rgba(14, 15, 17, 0.04); }
.preguntas details[open] { background: var(--papel); }

/* "Cómo comprás" sobre tinta: los pasos en un escalón de tono claro y la barra final en blanco */
.campo-tinta--pasos .pasos { background: rgba(255, 255, 255, 0.06); }
.campo-tinta--pasos .paso .subtitulo { color: #fff; }
.campo-tinta--pasos .paso p { color: var(--claro-2); }
.campo-tinta--pasos .pasos-pie { background: #fff; color: var(--tinta); }
.campo-tinta--pasos .pasos-pie :focus-visible { outline-color: var(--azul); }

/* el error va debajo del campo que lo tiene; en las filas de dos campos ocupa el ancho entero y el campo vecino
   no se corre (dense) */
.error--campo { min-height: 0; margin-top: -6px; transition: opacity var(--rapido) var(--salida), transform var(--rapido) var(--salida); }
@starting-style { .error--campo { opacity: 0; transform: translateY(-4px); } }
.campos-2 { grid-auto-flow: row dense; }
.campos-2 > .error--campo { grid-column: 1 / -1; }
.consentimiento + .error--campo { padding-left: 34px; }

/* pedido: la red de "Quitar" (deshacer durante 8 s) */
.deshacer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; background: var(--esmalte); border-radius: 4px; font-size: var(--t-chico); transition: opacity var(--rapido) var(--salida), transform var(--rapido) var(--salida); }
@starting-style { .deshacer { opacity: 0; transform: translateY(-4px); } }
.deshacer .boton-texto { min-height: 32px; }

/* estilos que estaban en línea en el JS y en el generador (audit, P3) */
.tabla-comparar__marco { overflow-x: auto; }
.tabla-comparar__lista { display: grid; gap: 6px; margin-top: 12px; }
.recomendada__porque { display: block; margin-top: 2px; }
.quiz__lista { display: grid; gap: 10px; }

/* debajo de los tipos de moto: la nota de precios y el acceso al quiz, para quien no sabe cuál elegir */
.gama__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 14px; }
.gama__pie .nota--precios { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  @starting-style { .error--campo, .deshacer { transform: none; } }
}