/* Buscador por vehículo — División Automotriz (07/10/2026). Barra lateral + resultados agrupados por tipo y marca.
   Nicolas, 13/10/2026: la barra es la de Preline UI (sidebar «offcanvas» con acordeones, preline.co, MIT), en negro. Medidas de Tailwind
   tal cual, pasadas a px: ancho w-64 = 256 px; cabecera p-4 = 16 px, título text-xl 20/28 px semibold; ítems py-2 px-2.5 = 8 × 10 px,
   text-sm 14/20 px, separación icono-texto gap-x-3.5 = 14 px, rounded-lg = 8 px, entre ítems space-y-1 = 4 px; subítems con sangría
   ps-7 = 28 px; insignia py-0.5 px-1.5 text-xs redondeada; acordeón y cajón con transición de 300 ms. Colores = tema oscuro de Preline
   (neutral 200/500/600/700) salvo el fondo: Preline usa neutral-800 (#262626) y Nicolas pidió negro. Bajo 1024 px (lg) la barra es un
   cajón que entra desde la izquierda con el botón «Buscar repuesto», como en Preline. */
.bq { --pl-bg: #000000; --pl-line: #404040; --pl-fg: #e5e5e5; --pl-hover: #404040; --pl-active: #404040; --pl-layer: #262626;
  --pl-pill: #525252; --pl-muted: #a3a3a3; --pl-thumb: #737373;
  display: grid; grid-template-columns: calc(282px * var(--sb-k, 1)) minmax(0, 1fr); gap: 0; align-items: start; margin-top: 34px; }
/* Nicolas, 14/10/2026 («this is how it should look», su maqueta a 1440 px): en pantallas más anchas que 1440 px la barra entera (ancho,
   texto, iconos) crece en proporción a la ventana, --sb-k = ancho de la ventana / 1440 (lo pone buscador-auto.js, máximo 1,6), para que
   ocupe la misma parte de la pantalla que en la maqueta: 282 px a 1440, 376 px a 1920. */
/* Nicolas, 14/10/2026: barra 10 % más ancha (256 → 282 px), pegada al borde izquierdo, con las esquinas derechas redondeadas. */
.bq-side { zoom: var(--sb-k, 1); position: sticky; top: calc(var(--header-h, 85px) / var(--sb-k, 1)); height: calc((100vh - var(--header-h, 85px)) / var(--sb-k, 1)); display: flex; flex-direction: column;
  background: var(--pl-bg); border-right: 1px solid var(--pl-line); border-radius: 0 28px 28px 0; overflow: hidden; color: var(--pl-fg); font-size: 14px; line-height: 20px; }
.bq-side-head { padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none; }
.bq-side h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: #fff; white-space: nowrap; }   /* una línea junto al botón de plegar */
.bq-cerrar-side { display: none; justify-content: center; align-items: center; width: 24px; height: 24px; margin-right: -8px; padding: 0; background: var(--pl-layer); border: 1px solid var(--pl-line); border-radius: 9999px; color: #d4d4d4; cursor: pointer; }
.bq-cerrar-side:hover { background: var(--pl-line); }
.bq-plegar { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; margin-right: -4px; padding: 0; background: none;
  border: 1px solid var(--pl-line); border-radius: 8px; color: #d4d4d4; cursor: pointer; flex: none; }
.bq-plegar:hover { background: var(--pl-hover); color: #fff; }
.bq-side .bq-oem-mini { display: none; }   /* solo con la barra plegada; antes perdía contra .bq-nav-item (fallo publicado en PR #30) */
/* Barra plegada: tira de 64 px con solo los iconos (como la «mini sidebar» de Preline). */
@media (min-width: 1024px) {
  .bq { transition: grid-template-columns 300ms cubic-bezier(0.4, 0, 0.2, 1); }
  .bq.bq-mini { grid-template-columns: calc(64px * var(--sb-k, 1)) minmax(0, 1fr); }
  .bq-mini .bq-side-head { justify-content: center; padding: 16px 8px; }
  .bq-mini .bq-side h3, .bq-mini .pl-txt, .bq-mini .pl-flecha, .bq-mini .bq-ac-cuerpo, .bq-mini .bq-oem-box { display: none !important; }
  .bq-mini .bq-plegar { margin: 0; }
  .bq-mini .bq-side .bq-oem-mini { display: flex; }
  .bq-mini .bq-nav-item { justify-content: center; padding: 10px; }
  .bq-mini .bq-side-nav { padding: 0 8px 16px; overflow-x: hidden; }
}
.pl-ico { width: 16px; height: 16px; flex: none; }
.bq-side-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; scrollbar-width: thin; scrollbar-color: var(--pl-thumb) var(--pl-line); }
.bq-side-nav::-webkit-scrollbar { width: 8px; }
.bq-side-nav::-webkit-scrollbar-track { background: var(--pl-line); }
.bq-side-nav::-webkit-scrollbar-thumb { background: var(--pl-thumb); border-radius: 0; }
.bq-nav, .bq-ac-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bq-nav-item, .bq-check { width: 100%; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; line-height: 20px; text-align: start; color: var(--pl-fg); text-decoration: none; cursor: pointer; }
.bq-nav-item:hover, .bq-check:hover { background: var(--pl-hover); }
.bq-nav-item:focus-visible, .bq-check:has(input:focus-visible) { outline: none; background: var(--pl-hover); }
.pl-flecha { margin-left: auto; }
.bq-ac .pl-arriba, .bq-ac.abierto .pl-abajo { display: none; }
.bq-ac.abierto .pl-arriba { display: block; }
.bq-ac-cuerpo { width: 100%; overflow: hidden; transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.bq-ac-lista { padding: 4px 0 0 28px; }
#bq-lineas, #bq-brands { display: flex; flex-direction: column; gap: 4px; }   /* space-y-1 entre filas, como los subítems de Preline */
.bq-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bq-check:has(input:checked) { background: var(--pl-active); color: #fff; }
.bq-check span { flex: 1; }
.bq-check b { margin-left: auto; display: inline-flex; align-items: center; padding: 2px 6px; font-size: 12px; line-height: 16px; font-weight: 400;
  background: var(--pl-pill); color: var(--pl-fg); border-radius: 9999px; font-variant-numeric: tabular-nums; }
.bq-vacio { font-size: 14px; color: var(--pl-muted); margin: 0; padding: 8px 10px; }
.bq-oem-box { padding: 0 10px 12px; }
.bq-ac-campos { padding: 0 10px 8px 10px; }
.bq-side label.bq-field { display: block; margin: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pl-muted); }
.bq-ac-campos label.bq-field { margin-top: 10px; }
.bq-ac-campos label.bq-field:first-child { margin-top: 4px; }
.bq-oem-campo { position: relative; }
.bq-oem-campo .pl-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pl-muted); pointer-events: none; }
.bq-side select, .bq-side input[type="search"] { width: 100%; display: block; padding: 8px 12px; font: inherit; font-size: 14px; line-height: 20px;
  background: var(--pl-layer); border: 1px solid var(--pl-line); border-radius: 8px; color: #fff; appearance: none; -webkit-appearance: none; }
.bq-side input[type="search"] { padding-left: 36px; }
.bq-side select { padding-right: 36px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.bq-side input[type="search"]::placeholder { color: var(--pl-muted); }
.bq-side select:disabled { color: #737373; cursor: not-allowed; }
.bq-side select:focus, .bq-side input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bq-hint { display: block; font-size: 12px; line-height: 16px; color: var(--pl-muted); margin-top: 6px; }
/* Botón «Buscar repuesto» (el «Open» de Preline, estilo secondary: gris 900, blanco) y velo del cajón: solo bajo 1024 px. */
.bq-abrir { display: none; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  background: #111827; color: #fff; border: 1px solid transparent; border-radius: 8px; box-shadow: 0 1px rgba(0, 0, 0, .05); cursor: pointer; }
.bq-velo { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .5); }
/* La hoja blanca de los resultados: esquina redondeada sobre el fondo oscuro, hasta el borde derecho y hasta el pie. */
.bq-main { background: transparent; min-height: calc(100vh - var(--header-h, 85px)); padding: 19px clamp(24px, 4vw, 64px) clamp(40px, 4vw, 64px) clamp(24px, 4vw, 58px); }
.bq-cabecera { margin-bottom: 36px; }
.bq-main h2 { margin-bottom: 10px; }
.bq-nota { font-size: 15px; color: var(--muted); max-width: 760px; margin: 0; }
.bq-inicio { background: var(--wash); border-radius: var(--radius); padding: 32px 36px; color: var(--muted); margin: 28px 0 0; }
.bq-inicio a { color: var(--ink); font-weight: 600; }
.bq-ayuda { margin-top: 40px; }
.bq-grupo { margin-top: 44px; }
.bq-grupo > h3 { font-size: clamp(22px, 1.9vw, 28px); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.bq-grupo h3 span { font-weight: 400; color: var(--muted); font-size: .8em; margin-left: 8px; }
@media (max-width: 1023px) {
  .bq { grid-template-columns: 1fr; margin-top: 0; }
  .bq-abrir { display: inline-flex; justify-self: start; margin: 24px var(--gutter, 16px) 0; }
  .bq-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 282px; height: auto; transform: translateX(-100%); visibility: hidden;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 300ms; }
  .bq-side.abierta { transform: translateX(0); visibility: visible; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
  .bq-cerrar-side { display: flex; }
  .bq-plegar { display: none; }
  .bq-main { min-height: 0; padding: 16px var(--gutter, 16px) 56px; }
}
/* Nicolas, 28/10/2026 («improve the design of the sidebar», con la tienda de Tesla como referencia): la barra sigue negra, del mismo
   ancho, con el mismo plegado y el mismo cajón en el teléfono; cambia el dibujo de adentro. Un solo margen izquierdo para todo (sin la
   sangría de 28 px de los subítems), secciones separadas por líneas finas en lugar de bloques apretados, rótulos pequeños en mayúsculas,
   campos de 42 px, casillas visibles (naranja con visto negro al marcarlas) en lugar de filas resaltadas, conteos en gris sin pastilla,
   y «Limpiar la búsqueda» como enlace discreto al final. */
.bq { --pl-sep: #1f1f1f; --pl-campo: #121212; --pl-borde: #2e2e2e; --pl-gris: #8f8f8f; }
.bq-side { border-right: 0; }
.bq-side-head { padding: 22px 20px 18px 22px; border-bottom: 1px solid var(--pl-sep); }
.bq-side h3 { font-size: 18px; line-height: 26px; }
.bq-plegar { border-color: var(--pl-borde); color: var(--pl-gris); }
.bq-plegar:hover { background: var(--pl-campo); color: #fff; }
.bq-side-nav { padding: 0 14px 24px; scrollbar-color: #333 transparent; }
.bq-side-nav::-webkit-scrollbar-track { background: transparent; }
.bq-side-nav::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.bq-oem-box { padding: 20px 8px 22px; border-bottom: 1px solid var(--pl-sep); }
.bq-nav { gap: 0; }
.bq-ac { border-bottom: 1px solid var(--pl-sep); }
.bq-ac-boton.bq-nav-item { padding: 17px 8px; border-radius: 0; font-size: 15px; font-weight: 600; color: #fff; }
.bq-ac-boton .pl-ico { color: var(--pl-gris); transition: color .15s; }
.bq-nav-item:hover, .bq-nav-item:focus-visible { background: none; }
.bq-ac-boton:hover .pl-ico, .bq-ac-boton:focus-visible .pl-ico { color: #fff; }
.bq-ac-lista { padding: 0 0 18px; }
.bq-ac-campos { padding: 0 8px; }
.bq-side label.bq-field { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-gris); margin: 0 0 8px; }
.bq-ac-campos label.bq-field { margin-top: 16px; }
.bq-ac-campos label.bq-field:first-child { margin-top: 2px; }
.bq-side select, .bq-side input[type="search"] { height: 42px; padding-top: 0; padding-bottom: 0; background-color: var(--pl-campo); border-color: var(--pl-borde); border-radius: 6px; transition: border-color .15s; }
.bq-side select:not(:disabled):hover, .bq-side input[type="search"]:hover { border-color: #4a4a4a; }
.bq-side select:disabled { color: #5c5c5c; border-color: #1f1f1f; background-color: #0a0a0a; }
.bq-hint { color: #6f6f6f; margin-top: 8px; }
#bq-lineas, #bq-brands { gap: 0; padding: 0 0 0 4px; }
.bq-check { gap: 12px; padding: 7px 4px; border-radius: 0; color: #d4d4d4; }
.bq-check::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #555; border-radius: 3px; background: transparent center / 12px no-repeat; transition: background-color .15s, border-color .15s; }
.bq-check:hover, .bq-check:has(input:focus-visible) { background: none; color: #fff; }
.bq-check:hover::before { border-color: #8a8a8a; }
.bq-check:has(input:focus-visible)::before { box-shadow: 0 0 0 2px var(--accent); }
.bq-check:has(input:checked) { background: none; color: #fff; font-weight: 600; }
.bq-check:has(input:checked)::before { border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.bq-check b { padding: 0; background: none; color: var(--pl-gris); font-size: 13px; }
.bq-vacio { color: #6f6f6f; padding: 6px 4px; }
#bq-limpiar { margin-top: 10px; padding: 12px 8px; gap: 10px; font-size: 14px; color: var(--pl-gris); }
#bq-limpiar:hover, #bq-limpiar:focus-visible { color: #fff; }
@media (min-width: 1024px) {
  .bq-mini .bq-side-head { padding: 22px 8px 18px; }
  .bq-mini .bq-ac { border-bottom: 0; }
  .bq-mini .bq-nav-item { padding: 12px; border-radius: 8px; }
  .bq-mini .bq-nav-item:hover { background: var(--pl-campo); }
  .bq-mini .bq-side-nav { padding: 12px 8px 16px; }
}

/* Fernando, 07/10/2026 — tarjetas con foto en lugar de tabla. Al pasar el mouse, la foto se cubre de naranja con «Ver detalle»
   (el mismo gesto que el muro de marcas, .logo-hover) y la tarjeta toma el borde naranja de las demás tarjetas (.pclass:hover). */
.bq-n { font-weight: 400; color: var(--muted); font-size: .55em; margin-left: 10px; vertical-align: middle; }
.bq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(22px, 2.2vw, 36px); margin-top: 22px; }
.bq-card { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 5px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; }
.bq-card:hover, .bq-card:focus-within { box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
/* Nicolas, 13/10/2026: brillo copiado de Uiverse «dylanharriscameron/stupid-mole-90» (MIT). Valores del original: capa esmerilada 5 px
   dentro del borde (blanco .95, desenfoque 24 px, radio 10 px, contorno blanco 2 px) y mancha desenfocada 12 px que recorre el borde en 5 s.
   Cambios: color rojo → naranja Contix; la mancha mide 75 % × 60 % de la tarjeta (150 px de una de 200 × 250) para que recorra el mismo
   camino en una tarjeta más alta; solo se ve y se mueve al pasar el mouse; sin el z-index 1111 del original (taparía la cabecera). */
.bq-glow-bg { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; z-index: 2; background: rgba(255, 255, 255, .95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 10px; overflow: hidden; outline: 2px solid white; pointer-events: none; }
.bq-glow { position: absolute; z-index: 1; top: 50%; left: 50%; width: 75%; height: 60%; border-radius: 50%; background-color: var(--accent); filter: blur(12px); pointer-events: none;
  opacity: 0; transition: opacity .3s; animation: bq-glow-bounce 5s infinite ease; animation-play-state: paused; }
.bq-card:hover .bq-glow, .bq-card:focus-within .bq-glow { opacity: 1; animation-play-state: running; }
@keyframes bq-glow-bounce {
  0% { transform: translate(-100%, -100%) translate3d(0, 0, 0); }
  25% { transform: translate(-100%, -100%) translate3d(100%, 0, 0); }
  50% { transform: translate(-100%, -100%) translate3d(100%, 100%, 0); }
  75% { transform: translate(-100%, -100%) translate3d(0, 100%, 0); }
  100% { transform: translate(-100%, -100%) translate3d(0, 0, 0); }
}
.bq-card > .bq-card-link, .bq-card > .bq-card-cta { position: relative; z-index: 3; }
.bq-card-link { display: block; color: inherit; text-decoration: none; flex: 1; }
.bq-foto { position: relative; aspect-ratio: 1 / 1; background: var(--white); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bq-foto img { width: 100%; height: 100%; object-fit: contain; padding: 0; }   /* las fotos ya traen su margen blanco (Fernando, 10/10/2026) */
/* «Ver detalles» (Nicolas, 13–14/10/2026): etiqueta negra que sigue al cursor sobre la foto, 14 px encima de la punta (opción B). */
.bq-foto { cursor: pointer; }
.bq-tip { position: fixed; left: 0; top: 0; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #111; color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 600; border-radius: 8px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .15s ease; white-space: nowrap; }
.bq-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #111; transform: rotate(45deg); border-radius: 2px; }
.bq-tip.on { opacity: 1; }
.bq-sinfoto { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--wash); color: #b4b4b4; }
.bq-sinfoto svg { width: 34%; max-width: 120px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.bq-sinfoto span { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #9a9a9a; }
.bq-card-txt { padding: 16px 18px 6px; }
.bq-card-brand { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.bq-card-brand span { font-weight: 400; color: var(--muted); }
.bq-card h4 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.bq-card-oem { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-card-oem span, .bq-card-app span { font-weight: 400; color: var(--muted); }
.bq-card-app { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Nicolas, 09/10/2026: «Agregar al carrito» con icono y texto, naranja, primero; «Cotizar» por WhatsApp debajo. Igual que en la ficha. */
.bq-card-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 18px; }
.bq .bq-card-cta .btn.wa-link { width: 100%; justify-content: center; padding: 9px 12px; font-size: 14px; gap: 8px; }
.btn.bq-add { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 10px 12px; font-size: 14px; white-space: nowrap; background: var(--accent); border: 1px solid var(--accent); color: var(--ink); }
.btn.bq-add:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.cart-ico { width: 20px; height: 20px; }
/* Nicolas, 09/10/2026: «Ver más productos» es una barra a todo el ancho pegada a la rejilla; el «Contáctenos» de abajo se quitó (ya está el bloque de WhatsApp al pie). */
.bq-mas-row { display: flex; margin-top: clamp(22px, 2.2vw, 36px); }
.bq-mas-row .btn.bq-mas { width: 100%; justify-content: center; padding: 16px 20px; font-size: 16px; }
.bq-mas span { font-weight: 400; }

/* Ficha del producto y el ingreso: diálogos nativos (<dialog>), como el catálogo de las páginas de mangueras (.cat-dialog). */
.bq-dialog { border: 0; border-radius: 18px; padding: 0; box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--text); }
.bq-dialog::backdrop { background: rgba(0,0,0,.55); }
.bq-cerrar { position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; }
.bq-cerrar:hover { background: var(--wash); }
.bq-ficha { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); }
.bq-ficha-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bq-ficha-fotos { padding: 36px; }
.bq-ficha-main { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bq-ficha-main img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.bq-sinfoto.grande span { font-size: 13px; }
.bq-ficha-fotos { position: sticky; top: 0; align-self: start; }
.bq-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.bq-thumb { aspect-ratio: 1 / 1; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; }
.bq-thumb.vacio { display: flex; align-items: center; justify-content: center; background: var(--wash); cursor: default; color: #c4c4c4; }
.bq-thumb.vacio svg { width: 42%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bq-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bq-thumb.on, button.bq-thumb:hover { border-color: var(--accent); }
.bq-ficha-txt { padding: 40px 40px 36px; border-left: 1px solid var(--line); }
.bq-ficha-brand { margin: 0 0 8px; padding-right: 48px; font-size: 18px; font-weight: 600; color: var(--ink); }
.bq-ficha-brand span { font-weight: 400; color: var(--muted); }
.bq-ficha-txt h2 { font-size: clamp(28px, 2.4vw, 38px); margin: 0 0 14px; }
.bq-ficha-desc { margin: 0 0 6px; font-size: 16px; line-height: 1.55; }
.bq-ficha-txt h5 { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.bq-ficha-oem { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bq-ficha-oem span { border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-weight: 600; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.bq-ficha-apps { list-style: none; margin: 0; padding: 0; max-height: 176px; overflow-y: auto; font-size: 15px; }
.bq-ficha-apps li { padding: 7px 0 7px 18px; border-bottom: 1px solid var(--line); position: relative; }
.bq-ficha-apps li::before { content: ""; position: absolute; left: 2px; top: calc(7px + .72em - 3px); width: 6px; height: 6px; border-radius: 50%; background: #cfcfcf; }
.bq-ficha-apps li.calza { color: var(--ink); font-weight: 600; }
.bq-ficha-apps li.calza::before { background: var(--accent); }
.bq-compra { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.bq-compra-fila { display: flex; gap: 12px; margin-bottom: 12px; }
.bq-compra-fila .bq-add-big { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.bq-compra .bq-wa-big { display: flex; justify-content: center; width: 100%; margin-bottom: 12px; }
.bq-ingreso .bq-field { display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.bq-cant { display: inline-flex; border: 1px solid #cfcfcf; border-radius: var(--radius); overflow: hidden; }
.bq-cant button { width: 46px; border: 0; background: var(--wash); font-size: 20px; cursor: pointer; color: var(--ink); }
.bq-cant button:hover { background: var(--accent); }
.bq-cant input { width: 70px; border: 0; border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; text-align: center; font: inherit; font-size: 17px; padding: 11px 0; -moz-appearance: textfield; }
.bq-cant input::-webkit-inner-spin-button, .bq-cant input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bq-ingreso { width: min(480px, calc(100vw - 32px)); padding: 44px 40px 36px; }
.bq-ingreso h2 { margin: 0 0 10px; }
.bq-ingreso > p { margin: 0 0 6px; font-size: 16px; }
.bq-ingreso input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: var(--radius); color: var(--ink); }
.bq-ingreso input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.bq-ingresar { width: 100%; margin-top: 24px; }
.bq-ingreso .form-note { margin: 14px 0 0; }
.bq-ingreso-pie { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px !important; }
.bq-ingreso-pie a { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .bq-ficha { width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
  .bq-ficha-grid { grid-template-columns: 1fr; }
  .bq-ficha-fotos { position: static; padding: 56px 20px 0; border-right: 0; }
  .bq-thumbs { max-width: 420px; margin-left: auto; margin-right: auto; gap: 8px; }
  .bq-ficha-main { max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 3; }
  .bq-ficha-txt { padding: 24px 20px 32px; border-left: 0; }
  .bq-ficha-apps { max-height: none; }
  .bq-compra-fila { flex-wrap: wrap; }
  .bq-compra-fila .bq-add-big { flex: 1 1 170px; }
}
/* Teléfono: una tarjeta por fila, foto a la izquierda. */
@media (max-width: 600px) {
  .bq-grid { grid-template-columns: 1fr; gap: 12px; }
  .bq-card-link { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .bq-foto { aspect-ratio: auto; min-height: 104px; border-bottom: 0; border-right: 1px solid var(--line); border-radius: 10px 0 0 10px; }
  .bq-foto img { padding: 0; }
  .bq-sinfoto span { display: none; }
  .bq-sinfoto svg { width: 46px; }
  .bq-card-txt { padding: 12px 14px 4px; }
  .bq-card h4 { font-size: 16px; margin-bottom: 4px; }
  .bq-card-brand { font-size: 14px; margin-bottom: 2px; }
  .bq-card-oem { font-size: 14px; margin-bottom: 2px; }
  .bq-card-app { font-size: 13px; -webkit-line-clamp: 1; }
  .bq-card-cta { padding: 10px 14px 12px; border-top: 1px solid var(--line); }
}

/* Nicolas, 09/10/2026: botón oscuro del banner «Portal de clientes fidelizados» (solo Automotriz); abre el diálogo de ingreso. */
.btn.portal-link { display: inline-flex; align-items: center; gap: 10px; background: #1d1d1d; border-color: #3a3a3a; color: var(--white); }
.btn.portal-link:hover { background: #000; border-color: #000; }
.portal-ico { width: 22px; height: 22px; flex: none; }

/* 14/10/2026: en el teléfono el banner de esta página lleva tres botones apilados y no cabía en la altura fija de 360 px de todos los
   banners (style.css); aquí crece con su contenido. Las demás páginas no cambian. */
@media (max-width: 700px) {
  body[data-page="buscador-automotriz.html"] .hero.small .wrap { height: auto; }
}

/* ---------------------------------------------------------------- Tienda de clientes fidelizados (26/10/2026, Nicolas)
   Precios en tarjetas y fichas (solo con sesión), tira de sesión sobre los resultados, botón «Agregado» y la página «Mi pedido»
   (pedido-automotriz.html, prefijo tp-). Mismos tokens del sitio: negro sobre naranja, bordes #e6e6e6, esquinas 14 px como .bq-card. */
.bq-card-precio { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-card-precio span, .bq-ficha-precio span { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.bq-card-precio.consultar, .tp-consultar { font-weight: 500; color: var(--muted); }
.bq-ficha-precio { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-ficha-precio .bq-ficha-sub { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--text); }
.bq-ficha-precio .bq-ficha-sub b { color: var(--ink); }
.btn.bq-add.agregado, .btn.bq-add-big.agregado { background: var(--ink); border-color: var(--ink); color: var(--white); }
.bq-ficha-ir { margin: -2px 0 12px; font-size: 15px; }
.bq-ficha-ir a { color: var(--ink); font-weight: 600; }
.bq-sesion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 14px; color: var(--text); }
.bq-sesion b { color: var(--ink); font-weight: 600; }
.bq-sesion-pedido { color: var(--ink); font-weight: 600; text-decoration: none; padding: 6px 12px; border-radius: 6px; background: var(--accent); }
.bq-sesion-pedido:hover { background: var(--accent-dark); }
.bq-salir { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bq-salir:hover { color: var(--ink); }
.btn.portal-link.con-sesion { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.bq-ingreso-error { color: #b42318; }
.bq-ingreso-error:not([hidden]) { display: block; }
.bq-ingreso .bq-ingresar:disabled { opacity: .6; cursor: wait; }

/* Página «Mi pedido» */
.tp .wrap { max-width: var(--wrap); }
.tp-cargando { color: var(--muted); }
.tp-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 32px; }
.tp-cab h2 { margin: 0; }
.tp-cab .bq-sesion { margin: 0; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.tp-items, .tp-resumen, .tp-ingreso, .tp-confirma, .tp-orden { background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.tp-items { padding: 8px 8px 18px; }
.tp-scroll { overflow-x: auto; }
.tp-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tp-tabla th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.tp-tabla td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tp-tabla tbody tr:last-child td { border-bottom: 0; }
.tp-tabla .tp-num, .tp-tabla th.tp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-tabla .tp-sub { font-weight: 600; color: var(--ink); }
.tp-foto { width: 72px; }
.tp-foto img, .tp-sinfoto { display: block; width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.tp-sinfoto { display: flex; align-items: center; justify-content: center; background: var(--wash); color: #c4c4c4; }
.tp-sinfoto svg { width: 40%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tp-desc b { display: block; color: var(--ink); font-weight: 600; }
.tp-desc span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.tp-cant .bq-cant { transform: scale(.86); transform-origin: left center; }
.tp-x { width: 44px; text-align: right; }
.tp-quitar { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.tp-quitar:hover { border-color: var(--ink); color: var(--ink); }
.tp-acciones { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 18px 12px 0; font-size: 15px; }
.tp-acciones a { color: var(--ink); font-weight: 600; text-decoration: none; }
.tp-acciones a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-vaciar { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tp-vaciar:hover { color: var(--ink); }
.tp-vacio { padding: 56px 24px; text-align: center; }
.tp-vacio p { font-size: 18px; margin: 0 0 22px; }
.tp-resumen { padding: 28px 28px 26px; position: sticky; top: calc(var(--header-h, 85px) + 24px); }
.tp-resumen h3 { font-size: 20px; margin: 0 0 18px; }
.tp-datos { display: grid; gap: 10px; margin: 0 0 6px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.tp-datos div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; font-size: 15px; }
.tp-datos dt { color: var(--muted); }
.tp-datos dd { margin: 0; color: var(--ink); font-weight: 500; }
.tp-datos-fila { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-bottom: 0; padding-bottom: 0; margin-bottom: 22px; }
.tp-datos-fila div { grid-template-columns: 1fr; gap: 4px; }
.tp-resumen .bq-field, .tp-ingreso .bq-field { display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.tp-resumen input, .tp-resumen select, .tp-resumen textarea, .tp-ingreso input { width: 100%; font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid #cfcfcf; border-radius: var(--radius); color: var(--ink); background: var(--white); }
.tp-resumen textarea { resize: vertical; min-height: 64px; }
.tp-resumen textarea[hidden] { display: none; }
.tp-resumen #tp-dir-otra:not([hidden]) { margin-top: 8px; }
.tp-resumen input:focus, .tp-resumen select:focus, .tp-resumen textarea:focus, .tp-ingreso input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tp-totales { margin: 24px 0 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15px; }
.tp-totales div { display: flex; justify-content: space-between; align-items: baseline; }
.tp-totales b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.tp-totales .tp-total { font-size: 19px; }
.tp-totales .tp-total b { font-size: 24px; font-weight: 700; }
.btn.tp-enviar { width: 100%; text-align: center; font-size: 17px; padding: 16px 20px; }
.btn.tp-enviar:disabled { opacity: .45; cursor: not-allowed; }
.tp-resumen .bq-nota { margin-top: 14px; font-size: 14px; }
.tp-ingreso { max-width: 520px; padding: 40px 40px 34px; }
.tp-ingreso h2 { margin: 0 0 10px; }
.tp-ingreso > p { margin: 0 0 6px; font-size: 16px; }
.tp-ingreso .bq-ingresar { width: 100%; margin-top: 22px; }
.tp-confirma { padding: 32px 32px 28px; }
.tp-confirma-txt { font-size: 17px; max-width: 760px; margin: 0 0 22px; }
.tp-tabla tfoot td { padding: 8px 12px; border: 0; text-align: right; color: var(--text); }
.tp-tabla tfoot tr:first-child td { padding-top: 16px; border-top: 1px solid var(--line); }
.tp-tabla tfoot .tp-total td { font-size: 18px; font-weight: 700; color: var(--ink); }
.tp-tabla-fija td:nth-child(2) { white-space: nowrap; }
.tp-cta { margin-top: 24px; }
.tp-historial { margin-top: 48px; }
.tp-historial h3 { font-size: 22px; margin: 0 0 16px; }
.tp-orden { margin-bottom: 12px; }
.tp-orden summary { display: grid; grid-template-columns: 110px 1fr 1fr 140px 110px; gap: 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 15px; }
.tp-orden summary::-webkit-details-marker { display: none; }
.tp-orden summary b { color: var(--ink); }
.tp-orden summary .tp-num { text-align: right; font-weight: 600; color: var(--ink); }
.tp-estado { justify-self: end; padding: 4px 10px; border-radius: 999px; background: var(--wash); font-size: 13px; color: var(--ink); }
.tp-orden[open] summary { border-bottom: 1px solid var(--line); }
.tp-orden .tp-scroll { padding: 4px 8px 12px; }
@media (max-width: 1020px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, …): la tabla no ensancha la columna ni la página en el teléfono */
  .tp-col { min-width: 0; }
  .tp-resumen { position: static; }
  .tp-orden summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tp-dos { grid-template-columns: 1fr; }
  .tp-resumen, .tp-confirma, .tp-ingreso { padding: 22px 18px; }
  .tp-tabla th:nth-child(1), .tp-foto { display: none; }
  .tp-tabla td { padding: 12px 8px; }
  .tp-datos div { grid-template-columns: 1fr; gap: 2px; }
  .bq-sesion { font-size: 13px; }
  .bq-salir { margin-left: 0; }
}
.bq-card-precio s, .bq-ficha-precio s, .tp-tabla s { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.tp-tabla s { display: block; margin: 2px 0 0; }
.tp-col .tp-historial { margin-top: 32px; }   /* el historial va bajo la tabla, en la columna izquierda, junto al formulario */

/* ---------------------------------------------------------------- Carrito flotante (26/10/2026, Nicolas): icono fijo abajo a la derecha,
   aparece con el primer producto del pedido (tienda.js, pintarFlotante); «Mi pedido» solo al pasar el cursor; número en una insignia.
   Tres colores a elegir (data-variante): verde, amarillo, negro. Nunca el naranja de los demás botones (su pedido). */
.carrito-flotante { position: fixed; right: 28px; top: calc(var(--header-h, 85px) + 28px); z-index: 55; display: flex; align-items: center; height: 76px; border-radius: 999px;
  background: var(--cf-bg, #1f9d55); color: var(--cf-fg, #fff); text-decoration: none; box-shadow: 0 14px 34px -12px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .35s ease-out, transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.carrito-flotante.on { opacity: 1; transform: none; }
.carrito-flotante:hover, .carrito-flotante:focus-visible { background: var(--cf-bg-hover, #187f44); outline: none; }
.carrito-flotante .cart-ico { width: 34px; height: 34px; margin: 0; flex: none; }
/* 26/10/2026 (Nicolas, segunda vuelta: «Mi pedido should only appear when you hover over it, like a pop-up»): el círculo no cambia de
   forma; al pasar el cursor sale un globo oscuro encima con el texto y una puntita, como un tooltip. */
.carrito-flotante { width: 76px; justify-content: center; }
.carrito-flotante .cf-txt { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, -6px); white-space: nowrap; padding: 8px 14px; border-radius: 8px;
  background: #111; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s; }
.carrito-flotante .cf-txt::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: #111; }
.carrito-flotante:hover .cf-txt, .carrito-flotante:focus-visible .cf-txt { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

.carrito-flotante .cf-n { position: absolute; top: -4px; right: -4px; min-width: 28px; height: 28px; padding: 0 8px; font-size: 14px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--cf-badge, #fff); color: var(--cf-badge-fg, #000); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; border: 2px solid var(--white); box-sizing: border-box; }
.carrito-flotante.pulso { animation: cf-pulso .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes cf-pulso { 35% { transform: scale(1.12); } }
.carrito-flotante[data-variante="lima"] { --cf-bg: #4caf50; --cf-bg-hover: #3f9343; --cf-fg: #fff; --cf-badge: #fff; --cf-badge-fg: #000; }   /* 27/10/2026: «Grande Lima» */
.carrito-flotante[data-tamano="grande"] { width: 90px; height: 90px; } .carrito-flotante[data-tamano="grande"] .cart-ico { width: 40px; height: 40px; }
.carrito-flotante[data-tamano="grande"] .cf-n { min-width: 32px; height: 32px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .carrito-flotante, .carrito-flotante .cf-txt { transition: none; } .carrito-flotante.pulso { animation: none; } }
@media (max-width: 640px) { .carrito-flotante { right: 14px; top: calc(var(--header-h, 71px) + 14px); width: 60px; height: 60px; } .carrito-flotante .cart-ico { width: 27px; height: 27px; } }
.btn.portal-link[hidden] { display: none; }   /* con sesión el botón del portal se oculta (tienda.js); .btn fija display y pisaría el atributo hidden */
/* 26/10/2026 (Nicolas, cuarta vuelta: «when you put "Agregar al carrito", there is an animation on that little circle… it becomes bigger…
   a shiny gradient that's very visible»): al agregar, el círculo salta (escala 1,3), se aclara un instante, un anillo se expande y un
   brillo diagonal lo cruza; la insignia salta también. ~0,9 s. Con «reducir movimiento», nada de esto. */
.carrito-flotante { overflow: visible; }
.carrito-flotante::before { content: ""; position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 50%, transparent 70%); background-size: 260% 100%; background-position: 130% 0;
  opacity: 0; pointer-events: none; }
.carrito-flotante::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 3px solid var(--cf-bg, #1f9d55); opacity: 0; pointer-events: none; }
.carrito-flotante.celebra { animation: cf-salto .9s cubic-bezier(.22, 1, .36, 1); }
.carrito-flotante.celebra::before { animation: cf-brillo .9s ease-out; }
.carrito-flotante.celebra::after { animation: cf-anillo .9s ease-out; }
.carrito-flotante.celebra .cf-n { animation: cf-insignia .9s cubic-bezier(.22, 1, .36, 1); }
@keyframes cf-salto { 0% { transform: scale(1); } 25% { transform: scale(1.3); background: #34c46e; } 55% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes cf-brillo { 0% { opacity: 0; background-position: 130% 0; } 15% { opacity: 1; } 70% { opacity: 1; background-position: -30% 0; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes cf-anillo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes cf-insignia { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .carrito-flotante.celebra, .carrito-flotante.celebra::before, .carrito-flotante.celebra::after, .carrito-flotante.celebra .cf-n { animation: none; } }

/* ---------------------------------------------------------------- Tienda como shop.tesla.com (Nicolas, 28/10/2026: «Tesla shop wins.
   Copy that to the T»). Medidas tomadas de las capturas de shop.tesla.com (cart y panel «Item Added»); tipo, colores y botones son los
   del sitio: naranja con texto negro, nunca el azul de Tesla. El carrito lima flotante no cambia. 29/10/2026 (Nicolas): sin panel «Producto agregado»; «Mi pedido» y
   «Finalizar pedido» quedan como en la opción A (este bloque). */

/* «Mi pedido» = el carrito de Tesla: filas sin encabezados a la izquierda, «Resumen del pedido» en una tarjeta con sombra a la derecha. */
.tp-cab { align-items: flex-end; }
.tp-cab h2 { font-size: clamp(32px, 2.6vw, 40px); }
.tc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 432px); gap: clamp(32px, 6vw, 112px); align-items: start; }
.tc-col { min-width: 0; }
.tc-lista { list-style: none; margin: 0; padding: 0; }
.tc-fila { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.tc-fila:first-child { padding-top: 8px; }
.tc-foto { display: flex; width: 112px; height: 112px; align-items: center; justify-content: center; }
.tc-foto img { width: 100%; height: 100%; object-fit: contain; }
.tc-foto .tp-sinfoto { width: 100%; height: 100%; border: 0; }
.tc-nombre { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.tc-cod { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text); }
.tc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 14px; font-size: 15px; color: var(--text); }
.tc-cant { display: inline-flex; align-items: center; gap: 10px; }
.tc-paso { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius, 3px); }
.tc-paso button { width: 34px; height: 34px; border: 0; background: none; font-size: 18px; color: var(--ink); cursor: pointer; }
.tc-paso button:hover { background: var(--wash); }
.tc-paso input { width: 52px; height: 34px; border: 0; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); -moz-appearance: textfield; }
.tc-paso input::-webkit-inner-spin-button, .tc-paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tc-paso input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.tc-quitar { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tc-quitar:hover { color: var(--muted); }
.tc-precio { margin: 0; text-align: right; font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-precio s, .tc-unidad { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.tc-acciones { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 22px 0 0; font-size: 15px; }
.tc-acciones a { color: var(--ink); font-weight: 600; text-decoration: none; }
.tc-resumen { position: sticky; top: calc(var(--header-h, 85px) + 24px); padding: 40px 36px 36px; background: var(--white); border-radius: 6px; box-shadow: 0 8px 36px rgba(0, 0, 0, .13); }
.tc-resumen h3 { margin: 0 0 26px; font-size: 22px; font-weight: 600; color: var(--ink); }
.tc-linea { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; font-size: 15px; color: var(--text); }
.tc-linea span:last-child { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.tc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; font-size: 22px; font-weight: 600; color: var(--ink); }
.tc-total b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-moneda { margin: 10px 0 30px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.btn.tc-boton { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; font-size: 16px; }
.btn.tc-boton:disabled { opacity: .45; cursor: not-allowed; }
.tc-copia { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.tc-resumen .bq-ingreso-error { margin: 14px 0 0; }
/* «Finalizar pedido»: solo resumen; los datos de la cuenta se leen, no se editan. */
.tf-volver { display: inline-block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.tf-bloque { padding: 28px 0; border-bottom: 1px solid var(--line); }
.tf-bloque:first-child { padding-top: 8px; }
.tf-bloque h3 { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--ink); }
.tf-bloque h3 span { margin-left: 6px; font-weight: 400; color: var(--muted); }
.tf-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin: 0; }
.tf-datos dt { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.tf-datos dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.tf-dir { margin: 0; font-size: 16px; color: var(--ink); }
.tf-falta { margin: 0; font-size: 15px; color: #b42318; }
.tf-falta a { color: var(--ink); font-weight: 600; }
.tf-dirs { display: grid; gap: 10px; }
.tf-opcion { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 15px; }
.tf-opcion:has(input:checked) { border-color: var(--ink); }
.tf-opcion input { margin-top: 3px; accent-color: var(--ink); }
.tf-opcion b { display: block; color: var(--ink); }
.tf-cambios { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.tf-cambios a { color: var(--ink); font-weight: 600; }
.tf-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tf-items li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.tf-items img, .tf-items .tp-sinfoto { width: 64px; height: 64px; object-fit: contain; border: 0; }
.tf-items b { display: block; font-size: 15px; color: var(--ink); }
.tf-items span { display: block; font-size: 14px; color: var(--text); }
.tf-items p { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1020px) { .tc-grid { grid-template-columns: minmax(0, 1fr); } .tc-resumen { position: static; } }
@media (max-width: 640px) {
  .tc-fila { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .tc-foto { width: 76px; height: 76px; }
  .tc-precio { grid-column: 2; text-align: left; }
  .tc-resumen { padding: 28px 20px 24px; }
  .tf-datos { grid-template-columns: 1fr; }
}
.tc-cod .nw, .tf-items span .nw { display: inline; white-space: nowrap; }

/* ---------------------------------------------------------------- Página principal del buscador y barra con la tienda (Nicolas, 28/10/2026:
   «you did not change the main page, only checkout… sidebar same also»; 30/10/2026 eligió la opción «C, Tesla gris» entre A y C).
   La rejilla copia la de shop.tesla.com: página gris, cada producto en tarjeta blanca con la foto grande (las fotos traen fondo
   blanco y se funden con multiply), sin marco, sin brillo ni sombra, nombre en negrita, precio debajo, datos técnicos en gris
   pequeño, títulos de grupo sin la raya negra, botones siempre visibles; barra blanca sin iconos. [data-tienda] lo pone tienda.js,
   así que el buscador público (tienda oculta) no cambia. */
[data-tienda] .bq-card { padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
[data-tienda] .bq-card:hover, [data-tienda] .bq-card:focus-within { box-shadow: none; }
[data-tienda] .bq-glow, [data-tienda] .bq-glow-bg { display: none; }
[data-tienda] .bq-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 44px clamp(20px, 2.4vw, 36px); margin-top: 26px; }
[data-tienda] .bq-foto { background: #f4f4f4; border: 0; border-radius: 4px; }
[data-tienda] .bq-foto img { mix-blend-mode: multiply; padding: 10%; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
[data-tienda] .bq-card:hover .bq-foto img { transform: scale(1.04); }
[data-tienda] .bq-card-txt { display: flex; flex-direction: column; padding: 16px 0 0; }
[data-tienda] .bq-card h4 { order: -1; margin: 0 0 4px; font-size: 16px; line-height: 1.3; font-weight: 700; }
[data-tienda] .bq-card-precio { order: 0; margin: 2px 0 6px; font-size: 16px; }
[data-tienda] .bq-card-brand, [data-tienda] .bq-card-oem, [data-tienda] .bq-card-app { order: 1; margin: 0; font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--muted); }
[data-tienda] .bq-card-brand span { display: none; }
[data-tienda] .bq-card-oem span, [data-tienda] .bq-card-app span { color: var(--muted); }
[data-tienda] .bq-card-cta { padding: 14px 0 0; flex-direction: row; gap: 8px; }
[data-tienda] .bq-card-cta .btn { flex: 1; }
[data-tienda] .bq .bq-card-cta .btn.wa-link { flex: 0 0 auto; width: auto; padding: 9px 14px; }
[data-tienda] .bq-grupo { margin-top: 56px; }
[data-tienda] .bq-grupo > h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; font-size: clamp(24px, 2vw, 30px); font-weight: 500; }
[data-tienda] .bq-main > #bq-head h2 { font-size: clamp(30px, 2.6vw, 40px); }

/* Barra sin iconos (Nicolas, 29/10/2026: «take all the icons out of the bar»). Quedan solo las flechas que dicen si una sección
   está abierta y la de cada lista desplegable. Sin iconos la barra plegada no tiene qué mostrar, así que se va el botón de plegar;
   en el teléfono queda la × para cerrar la barra. */
[data-tienda] .bq-side .pl-ico:not(.pl-flecha) { display: none; }
[data-tienda] .bq-cerrar-side .pl-ico { display: block; }
[data-tienda] .bq-plegar { display: none; }
[data-tienda] .bq-side input[type="search"] { padding-left: 12px; }
[data-tienda] #bq-limpiar { padding-left: 8px; }

/* Fondo gris, cada producto en tarjeta blanca, barra blanca. */
[data-tienda] .bq-shell { background: #f4f4f4; }
[data-tienda] .bq-card { background: #fff; border-radius: 6px; padding: 14px 14px 18px; }
[data-tienda] .bq-foto { background: #fff; }
[data-tienda] .bq-grid { gap: 16px; }
[data-tienda] .bq-side { background: #fff; color: #000; border-radius: 0; border-right: 1px solid #e6e6e6; }
[data-tienda] .bq { --pl-sep: #ececec; --pl-campo: #fff; --pl-borde: #d4d4d4; --pl-gris: #6b6b6b; --pl-fg: #222; }
[data-tienda] .bq-side h3, [data-tienda] .bq-ac-boton.bq-nav-item, [data-tienda] .bq-side select, [data-tienda] .bq-side input[type="search"] { color: #000; }
[data-tienda] .bq-side select:disabled { background-color: #f7f7f7; border-color: #ececec; color: #a3a3a3; }
[data-tienda] .bq-check { color: #222; }
[data-tienda] .bq-check:hover, [data-tienda] .bq-check:has(input:checked) { color: #000; }
[data-tienda] .bq-check::before { border-color: #9a9a9a; }
[data-tienda] .bq-ac-boton:hover .pl-ico, [data-tienda] #bq-limpiar:hover { color: #000; }
[data-tienda] .bq-plegar:hover { background: #f4f4f4; color: #000; }
[data-tienda] .bq-side-nav { scrollbar-color: #d4d4d4 transparent; }
[data-tienda] .bq-side-nav::-webkit-scrollbar-thumb { background: #d4d4d4; }
[data-tienda] .bq-side select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* «Agregar al carrito» y el WhatsApp en una fila; el WhatsApp queda como icono cuadrado (el texto «Cotizar» sigue para lectores de pantalla). */
[data-tienda] .bq .bq-card-cta .btn.wa-link { flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; }
[data-tienda] .bq .bq-card-cta .btn.wa-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-tienda] .bq-card-cta .btn.bq-add { min-width: 0; }

/* 02/11/2026 (Nicolas): «− cantidad +» en la tarjeta cuando el producto ya está en el pedido (buscador-auto.js, compraHTML).
   Mismo alto que el botón; borde fino negro, número al centro. */
[data-tienda] .bq-card-cta .bq-cta-compra { flex: 1; display: flex; min-width: 0; }
[data-tienda] .bq-card-cta .bq-cta-compra > .btn { flex: 1; }
.bq-paso { flex: 1; display: flex; align-items: stretch; min-height: 44px; border: 1px solid var(--ink); border-radius: 3px; background: var(--white); }
.bq-paso button { flex: 0 0 44px; border: 0; background: none; font: inherit; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
.bq-paso button:hover { background: var(--grey-1, #F7F7F7); }
.bq-paso button:disabled { cursor: progress; opacity: .5; }
.bq-paso-n { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--ink); }

/* Botón «Agregar al carrito» gris claro con el carrito naranja (Nicolas, 02/11/2026: «the orange is heinous for a shop»; eligió la
   opción D entre naranja, borde naranja, negro y gris claro). */
[data-tienda] .btn.bq-add, [data-tienda] .bq-compra-fila .bq-add-big { background: #F7F7F7; border: 1px solid #E6E6E6; color: var(--ink); }
[data-tienda] .btn.bq-add:hover, [data-tienda] .bq-compra-fila .bq-add-big:hover { background: #F7F7F7; border-color: var(--ink); }
[data-tienda] .btn.bq-add svg, [data-tienda] .bq-compra-fila .bq-add-big svg { color: var(--accent); }