/* ===========================================================
   Marco de Parroquiano sobre el ejemplo de World Color Car.
   La barra va abajo y no arriba a propósito: la cabecera del taller es
   sticky en top:0, el menú de móvil se ancla a --header-h y la sección del
   motor mide su recorrido contra esa misma altura. Una barra fija arriba
   obligaba a recolocar cuatro anclajes ajenos; abajo sólo hay que apartar
   dos cosas, el botón de WhatsApp y la barra de cookies.
   =========================================================== */
:root { --pq-h: 56px; }

.pq-demo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: var(--pq-h);
  box-sizing: border-box;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #1a1611;
  color: #f7f2e9;
  border-top: 2px solid #b4402a;
  /* Tipografía del sistema y no la del taller: la barra tiene que leerse
     como algo de fuera, no como un trozo más de su web. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.pq-demo__txt { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pq-demo__txt b { font-weight: 700; letter-spacing: .02em; }
.pq-demo__txt span { color: #c9bda9; }

.pq-demo__cta {
  flex: none;
  background: #b4402a;
  color: #fffcf5;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 4px;
  white-space: nowrap;
}
.pq-demo__cta:hover, .pq-demo__cta:focus-visible { background: #8a2f1d; color: #fffcf5; }

/* Hueco para que la barra no tape el final de la página ni los dos
   elementos fijos que ya tenía el sitio. */
body { padding-bottom: var(--pq-h); }
.wa-float { bottom: calc(var(--wa-gap) + var(--pq-h)); }
.cookie-bar { inset: auto 0 var(--pq-h) 0; }

@media (max-width: 620px) {
  :root { --pq-h: 88px; }
  .pq-demo { flex-direction: column; align-items: flex-start; justify-content: center; }
  .pq-demo__cta { align-self: stretch; text-align: center; }
}

/* Aviso al tocar algo que en un ejemplo no puede funcionar. */
.pq-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pq-h) + 14px);
  transform: translate(-50%, 10px);
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 16px;
  background: #fffcf5;
  color: #1a1611;
  border: 2px solid #1a1611;
  box-shadow: 5px 5px 0 #1a1611;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pq-toast[data-ver="si"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .pq-toast, .pq-demo__cta { transition: none; }
}