/* SCAR-SITIO 2026-09-07-h */
/* ============================================================
   TIENDAS SCAR · sitio público
   Los colores salen del logo: naranja del engranaje, azul del texto.
   ============================================================ */
:root {
  --naranja: #E8720C;
  --naranja-claro: #ff8c2b;
  --naranja-oscuro: #c95f08;
  --azul: #1f2d3d;
  --azul-2: #2c4258;
  --azul-claro: #3d5a7a;
  --fondo: #ffffff;
  --gris: #f5f6f8;
  --gris-2: #eceef1;
  --texto: #202b36;
  --texto-suave: #67727e;
  --borde: #e2e6ea;
  --verde: #1f9d55;
  --rojo: #d64545;
  --whatsapp: #25d366;
  --sombra: 0 4px 24px rgba(31,45,61,0.08);
  --sombra-fuerte: 0 16px 44px rgba(31,45,61,0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }

.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.contenedor-angosto { max-width: 820px; }

/* ---------------- BARRA ---------------- */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow 0.2s;
}
.barra.pegada { box-shadow: 0 2px 18px rgba(31,45,61,0.10); }
.barra-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 68px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-logo { height: 42px; width: auto; max-width: 170px; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto strong { font-size: 15px; letter-spacing: 0.6px; color: var(--azul); }
.marca-texto small { font-size: 11px; color: var(--texto-suave); }

.menu { display: flex; gap: 4px; }
.menu a {
  padding: 8px 13px; text-decoration: none; font-size: 14px;
  font-weight: 600; color: var(--texto-suave); border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.menu a:hover, .menu a.activo { background: var(--gris); color: var(--naranja); }

.barra-acciones { display: flex; align-items: center; gap: 10px; }
.btn-pedido {
  display: flex; align-items: center; gap: 7px;
  background: var(--azul); color: #fff; border: none;
  padding: 10px 16px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.btn-pedido:hover { background: var(--azul-2); }
.carrito-cuenta {
  min-width: 20px; padding: 1px 6px; background: var(--naranja);
  border-radius: 10px; font-size: 12px; text-align: center;
}
.btn-menu {
  display: none; background: transparent; border: 1px solid var(--borde);
  border-radius: 8px; font-size: 19px; padding: 6px 11px; cursor: pointer; color: var(--azul);
}

@media (max-width: 980px) {
  .menu {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 10px 18px 16px;
    border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
  }
  .menu.abierto { display: flex; }
  .btn-menu { display: block; }
  .btn-pedido-texto { display: none; }
}

/* ---------------- PORTADA ---------------- */
.hero { position: relative; overflow: hidden; background: var(--azul); color: #fff; }
.hero-fondo {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 78% 15%, rgba(232,114,12,0.30), transparent 62%),
    radial-gradient(650px 380px at 12% 85%, rgba(61,90,122,0.55), transparent 60%),
    linear-gradient(135deg, #1f2d3d 0%, #2c4258 100%);
}
/* EL CARRO DE LA PORTADA
   Un trazo, no una foto. Va muy tenue y detras de todo: tiene que decir
   "esto es de carros" sin competir con el titular ni con los botones,
   que es a lo que la gente viene. */
.hero-carro {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* Por encima de la cinta de marcas (46px de alto): si se le mete
     debajo, las ruedas quedan cortadas y el dibujo se lee como un error
     de maquetación en vez de como una decoración. */
  bottom: 52px;
  width: min(1180px, 96%); color: #fff; opacity: 0.10;
  pointer-events: none; line-height: 0;
}
.hero-carro svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero-carro { bottom: 44px; width: 128%; opacity: 0.07; }
}

.hero-interior {
  position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 46px; align-items: center; padding: 64px 22px 54px;
}
.hero-etiqueta {
  display: inline-block; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22); padding: 6px 14px;
  border-radius: 20px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; margin-bottom: 18px;
}
.hero h1 {
  margin: 0 0 14px; font-size: clamp(34px, 5.6vw, 56px);
  line-height: 1.05; letter-spacing: -1.2px; text-wrap: balance;
}
.hero-texto > p { margin: 0 0 28px; font-size: 17.5px; opacity: 0.86; max-width: 48ch; }

.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.btn-principal {
  background: var(--naranja); color: #fff; padding: 14px 26px;
  border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15px;
  display: inline-block; transition: background 0.15s, transform 0.12s;
}
.btn-principal:hover { background: var(--naranja-oscuro); transform: translateY(-2px); }

.btn-whatsapp {
  background: var(--whatsapp); color: #fff; border: none;
  padding: 14px 24px; border-radius: 10px; font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.15s, transform 0.12s;
}
.btn-whatsapp:hover { filter: brightness(0.93); transform: translateY(-2px); }
.btn-whatsapp.ancho { width: 100%; }
.btn-whatsapp.grande { padding: 16px; font-size: 15.5px; }
.btn-whatsapp:disabled { background: var(--gris-2); color: var(--texto-suave); cursor: not-allowed; transform: none; }

.hero-sellos { display: flex; flex-wrap: wrap; gap: 26px; }
.sello { display: flex; flex-direction: column; }
.sello strong { font-size: 15px; color: var(--naranja-claro); }
.sello span { font-size: 12.5px; opacity: 0.72; }

.hero-marcas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.hero-marca-tarjeta {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 20px 16px; text-align: center;
  cursor: pointer; transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.hero-marca-tarjeta:hover {
  background: rgba(232,114,12,0.22); border-color: var(--naranja); transform: translateY(-3px);
}
.hero-marca-nombre { font-weight: 700; font-size: 15px; }
.hero-marca-pie { font-size: 11.5px; opacity: 0.62; margin-top: 2px; }

@media (max-width: 900px) {
  .hero-interior { grid-template-columns: 1fr; gap: 34px; padding: 44px 22px 40px; }
  .hero-marcas { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) { .hero-marcas { grid-template-columns: repeat(2, 1fr); } }

.cinta-marcas {
  position: relative; background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 0;
}
.cinta-interior {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: center; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.55;
}

/* ---------------- SECCIONES ---------------- */
.seccion { padding: 68px 0; }
.seccion-gris { background: var(--gris); }
.seccion-oscura { background: var(--azul); color: #fff; }

.seccion-cabecera { max-width: 640px; margin: 0 auto 38px; text-align: center; }
.seccion-etiqueta {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: 10px;
}
.seccion-etiqueta.clara { color: var(--naranja-claro); }
.seccion h2 {
  margin: 0 0 10px; font-size: clamp(25px, 3.6vw, 35px);
  letter-spacing: -0.6px; line-height: 1.15; text-wrap: balance;
}
.titulo-claro { color: #fff; }
.seccion-cabecera p { margin: 0; color: var(--texto-suave); font-size: 16px; }
.seccion-oscura .seccion-cabecera p { color: rgba(255,255,255,0.72); }

.rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
@media (max-width: 900px) { .rejilla-dos { grid-template-columns: 1fr; gap: 34px; } }

.parrafo { color: var(--texto-suave); font-size: 16px; margin: 0 0 14px; }
.seccion-oscura .parrafo { color: rgba(255,255,255,0.75); }

/* ---------------- CATEGORÍAS ---------------- */
.rejilla-categorias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.categoria {
  background: #fff; border: 1px solid var(--borde); border-radius: 14px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.categoria:hover {
  transform: translateY(-4px); box-shadow: var(--sombra-fuerte); border-color: var(--naranja);
}
.categoria-icono { display: block; margin-bottom: 10px; color: var(--naranja); }
.categoria-icono svg { width: 34px; height: 34px; }
.categoria:hover .categoria-icono { color: var(--azul); }
.categoria-nombre { font-weight: 700; font-size: 14.5px; }

/* ---------------- BUSCADOR Y FILTROS ---------------- */
.buscador-grande { display: flex; max-width: 720px; margin: 0 auto 20px; box-shadow: var(--sombra); border-radius: 12px; }
.buscador-grande input {
  flex: 1; padding: 15px 20px; border: 1px solid var(--borde); border-right: none;
  border-radius: 12px 0 0 12px; font-size: 15.5px; outline: none;
}
.buscador-grande input:focus { border-color: var(--naranja); }
.buscador-grande button {
  padding: 15px 28px; border: none; background: var(--naranja); color: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 0 12px 12px 0;
}
.buscador-grande button:hover { background: var(--naranja-oscuro); }

/* El input tenía "flex: 1" sin permiso para encogerse por debajo de su
   ancho natural, así que en un teléfono de 360 px empujaba el botón
   "Buscar" 10 px fuera de la pantalla y toda la página se podía
   arrastrar. Es el mismo descuido que había en el panel: un hijo de un
   flex no se achica solo, hay que decírselo. */
.buscador-grande input { min-width: 0; }
@media (max-width: 420px) {
  .buscador-grande input { padding: 14px 14px; font-size: 15px; }
  .buscador-grande button { padding: 14px 16px; font-size: 14px; }
}
/* Cinturón: en pantalla chica la página no se arrastra a los lados. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 22px; justify-content: center;
}
.filtros select {
  padding: 10px 14px; border: 1px solid var(--borde); border-radius: 9px;
  font-size: 14px; background: #fff; color: var(--texto);
}
.filtro-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--texto-suave); cursor: pointer;
}
.filtros-cuenta { font-size: 13.5px; color: var(--texto-suave); }

/* ---------------- PRODUCTOS ---------------- */
.rejilla-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px;
}
.producto {
  background: #fff; border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.producto.agotado { opacity: 0.6; }

.producto-foto {
  height: 170px; background: var(--gris);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.producto-foto img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.producto-sinfoto { display: flex; align-items: center; justify-content: center; opacity: 0.2; }
.producto-sinfoto svg { width: 44px; height: 44px; }
.producto-sinfoto.grande svg { width: 78px; height: 78px; }

.producto-cuerpo { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; gap: 5px; }
.producto-codigo { font-size: 11px; color: var(--texto-suave); font-family: ui-monospace, monospace; }
.producto-nombre {
  font-weight: 600; font-size: 14.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chip-marca {
  display: inline-block; align-self: flex-start;
  background: rgba(31,45,61,0.07); color: var(--azul);
  padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700;
}
.producto-precio { font-size: 21px; font-weight: 800; color: var(--azul); margin-top: auto; }
.producto-precio-bs { font-size: 12px; color: var(--texto-suave); margin-top: -3px; }

.existencia { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.existencia::before { content: "●"; font-size: 9px; }
.existencia.disponible { color: var(--verde); }
.existencia.ultimas { color: var(--naranja); }
.existencia.agotado { color: var(--rojo); }

.btn-agregar {
  margin-top: 9px; width: 100%; padding: 10px; border: none; border-radius: 9px;
  background: var(--naranja); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-agregar:hover { background: var(--naranja-oscuro); }
.btn-agregar:disabled { background: var(--gris-2); color: var(--texto-suave); cursor: not-allowed; }
.btn-agregar.puesto { background: var(--verde); }

.paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.paginacion button {
  padding: 10px 16px; border: 1px solid var(--borde); background: #fff;
  border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--texto);
}
.paginacion button:hover:not(:disabled) { border-color: var(--naranja); color: var(--naranja); }
.paginacion button:disabled { opacity: 0.4; cursor: not-allowed; }
.paginacion .actual { background: var(--naranja); color: #fff; border-color: var(--naranja); }

.cargando, .vacio { text-align: center; padding: 60px 20px; color: var(--texto-suave); grid-column: 1/-1; }
.vacio-icono { width: 46px; height: 46px; opacity: 0.24; margin: 0 auto 12px; display: block; }

/* ---------------- NOSOTROS ---------------- */
.lista-ventajas { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.ventaja { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.ventaja-num {
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700;
  color: var(--naranja); border-top: 2px solid var(--naranja); padding-top: 5px;
}
.ventaja strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
.ventaja p { margin: 0; font-size: 14px; color: var(--texto-suave); }

.tarjeta-marcas {
  background: var(--gris); border-radius: 16px; padding: 28px;
}
.tarjeta-marcas h3 { margin: 0 0 16px; font-size: 18px; }
/* La lista de marcas crece con el catálogo, y una tienda de repuestos
   puede trabajar cincuenta. Sin tope, la tarjeta se estiraba hasta dejar
   la columna de al lado con un hueco blanco de doscientos y pico de píxel.
   Se desplaza dentro de su caja: no se esconde ninguna marca y la página
   no se descuadra. */
.marcas-lista {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
}
.marca-pastilla {
  background: #fff; border: 1px solid var(--borde); border-radius: 22px;
  padding: 9px 17px; font-size: 14px; font-weight: 700; color: var(--azul);
  cursor: pointer; transition: all 0.15s;
}
.marca-pastilla:hover { border-color: var(--naranja); color: var(--naranja); }
.nota { font-size: 13.5px; color: var(--texto-suave); margin: 0 0 16px; }
.nota.clara { color: rgba(255,255,255,0.62); margin-top: 12px; margin-bottom: 0; }

/* ---------------- UBICACIÓN ---------------- */
.dato-grande { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-bottom: 22px; }
.dato-icono { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(232,114,12,0.16); color: var(--naranja-claro); }
.dato-icono svg { width: 20px; height: 20px; }
.dato-grande strong { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--naranja-claro); margin-bottom: 3px; }
.dato-grande p { margin: 0; font-size: 15px; color: rgba(255,255,255,0.85); }
/* Los teléfonos NO llevan subrayado.
   El borde inferior marcaba uno de los dos números y el otro no, según
   dónde cortara la línea, y quedaba pareciendo que uno era un enlace y el
   otro no. Los dos hacen lo mismo: se toca y se marca. */
.dato-grande a { color: #fff; text-decoration: none; border-bottom: none; }
.dato-grande a:hover { color: var(--naranja); }
.dato-grande a:hover { color: var(--naranja-claro); border-color: var(--naranja-claro); }

.tarjeta-contacto {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 28px;
}
.tarjeta-contacto h3 { margin: 0 0 18px; font-size: 18px; }
.redes-lista { display: flex; flex-direction: column; gap: 9px; }
.red {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 11px; padding: 13px 16px; text-decoration: none; color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.red:hover { background: rgba(232,114,12,0.2); border-color: var(--naranja); }
.red-icono { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: rgba(232,114,12,0.14); color: var(--naranja); }
.red-icono svg { width: 19px; height: 19px; }
.red:hover .red-icono { background: var(--naranja); color: #fff; }
.pie-enlace svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.red-texto { display: flex; flex-direction: column; line-height: 1.25; }
.red-texto strong { font-size: 14.5px; }
.red-texto small { font-size: 12px; opacity: 0.68; }

.separador { height: 1px; background: rgba(255,255,255,0.12); margin: 20px 0; }
.btn-mapa {
  display: block; text-align: center; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); color: #fff; text-decoration: none;
  padding: 13px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
}
.btn-mapa:hover { background: rgba(255,255,255,0.18); }

/* ---------------- ACORDEÓN ---------------- */
.acordeon { display: flex; flex-direction: column; gap: 10px; }
.acordeon-item {
  border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #fff;
}
.acordeon-boton {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 17px 20px; font-size: 15.5px; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  color: var(--texto); font-family: inherit;
}
.acordeon-boton:hover { background: var(--gris); }
.acordeon-flecha { color: var(--naranja); font-size: 18px; transition: transform 0.2s; flex-shrink: 0; }
.acordeon-item.abierto .acordeon-flecha { transform: rotate(45deg); }
.acordeon-cuerpo { padding: 0 20px 18px; font-size: 14.5px; color: var(--texto-suave); }

.preguntas-pie { text-align: center; margin-top: 30px; }
.preguntas-pie p { color: var(--texto-suave); margin: 0 0 12px; }

/* ---------------- PIE ---------------- */
.pie { background: var(--azul); color: #fff; padding-top: 44px; }
.pie-interior {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 30px;
}
@media (max-width: 760px) { .pie-interior { grid-template-columns: 1fr; gap: 26px; } }
.pie-logo { height: 46px; width: auto; max-width: 190px; object-fit: contain; margin-bottom: 10px; }
.pie-nombre { font-weight: 800; font-size: 15px; letter-spacing: 0.5px; }
.pie-dato { margin: 3px 0; font-size: 13.5px; opacity: 0.7; }
.pie-titulo { font-weight: 700; margin-bottom: 11px; font-size: 14.5px; }
.pie-enlace {
  display: block; font-size: 13.5px; opacity: 0.72;
  text-decoration: none; padding: 3px 0;
}
.pie-enlace:hover { opacity: 1; color: var(--naranja-claro); }
.pie-legal {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 22px;
  text-align: center; font-size: 11.5px; opacity: 0.5;
  display: flex; flex-direction: column; gap: 4px;
}

/* ---------------- BOTÓN FLOTANTE ---------------- */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--whatsapp); color: #fff; text-decoration: none;
  padding: 14px 20px; border-radius: 30px; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 26px rgba(37,211,102,0.42);
  transition: transform 0.15s;
}
.wa-flotante:hover { transform: translateY(-3px); }
.wa-flotante-icono { width: 21px; height: 21px; flex: none; }
@media (max-width: 560px) { .wa-flotante-texto { display: none; } .wa-flotante { padding: 15px; } }

/* ---------------- PANELES ---------------- */
.panel-lateral { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.panel-fondo { position: absolute; inset: 0; background: rgba(15,23,33,0.5); }
.panel-caja {
  position: relative; width: 420px; max-width: 94vw; height: 100%;
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.25);
}
.panel-caja.panel-ancho { width: 520px; }
.panel-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--borde);
}
.panel-cabecera h2 { margin: 0; font-size: 18px; }
.panel-cerrar {
  border: none; background: transparent; font-size: 20px; cursor: pointer;
  color: var(--texto-suave); padding: 4px 9px; border-radius: 7px; line-height: 1;
}
.panel-cerrar:hover { background: var(--gris); }

/* ---------------- CARRITO ---------------- */
.carrito-lineas { flex: 1; overflow-y: auto; padding: 12px 22px; }
.carrito-vacio { text-align: center; color: var(--texto-suave); padding: 54px 20px; }
.carrito-vacio-icono { width: 46px; height: 46px; opacity: 0.24; margin: 0 auto 12px; display: block; }

.carrito-linea {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--borde); align-items: center;
}
.carrito-foto {
  width: 56px; height: 56px; background: var(--gris); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.carrito-foto img { width: 100%; height: 100%; object-fit: contain; }
.carrito-foto svg { width: 24px; height: 24px; opacity: 0.25; }
.carrito-nombre { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.carrito-codigo { font-size: 11px; color: var(--texto-suave); font-family: ui-monospace, monospace; }
.carrito-cantidad { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.carrito-cantidad button {
  width: 25px; height: 25px; border: 1px solid var(--borde); background: #fff;
  border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--texto);
}
.carrito-cantidad button:hover { border-color: var(--naranja); color: var(--naranja); }
.carrito-cantidad span { min-width: 24px; text-align: center; font-size: 13.5px; font-weight: 700; }
.carrito-monto { text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
.carrito-quitar {
  display: block; margin-top: 4px; border: none; background: transparent;
  color: var(--rojo); font-size: 11.5px; cursor: pointer; padding: 0;
}

.carrito-pie { border-top: 1px solid var(--borde); padding: 17px 22px 22px; }
.carrito-total { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.carrito-total > span { font-size: 13px; color: var(--texto-suave); }
.carrito-total > div { text-align: right; }
.carrito-total strong { font-size: 27px; color: var(--azul); display: block; line-height: 1.1; }
.carrito-total small { font-size: 12.5px; color: var(--texto-suave); }
.carrito-aviso { font-size: 11.5px; color: var(--texto-suave); line-height: 1.45; margin: 0 0 12px; }

/* ---------------- FICHA DEL PRODUCTO ---------------- */
.producto-detalle { flex: 1; overflow-y: auto; padding: 20px 22px 26px; }
.pd-foto {
  background: var(--gris); border-radius: 12px; height: 260px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 18px;
}
.pd-foto img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.pd-codigo { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--texto-suave); }
.pd-nombre { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 5px 0 10px; }
.pd-precio { font-size: 32px; font-weight: 800; color: var(--azul); line-height: 1.1; }
.pd-precio-bs { font-size: 14px; color: var(--texto-suave); margin-bottom: 16px; }
.pd-datos { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 14px; }
.pd-dato { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.pd-dato span:first-child { color: var(--texto-suave); }
.pd-acciones { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.pd-relacionados { margin-top: 26px; }
.pd-relacionados h4 { font-size: 15px; margin: 0 0 12px; }
.pd-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-mini .producto-foto { height: 100px; }
.pd-mini .producto-nombre { font-size: 13px; }
.pd-mini .producto-precio { font-size: 16px; }
.pd-mini .btn-agregar { display: none; }


/* ---------------- ICONOS ---------------- */
/* Van como SVG y no como emoji: el emoji se dibuja distinto en cada
   telefono y en algunos ni sale, y una pagina que se pone en las redes
   tiene que verse igual en todos lados. */
.icono-carrito { width: 18px; height: 18px; flex: none; }
.wa-icono { width: 19px; height: 19px; flex: none; }
.btn-menu svg { width: 20px; height: 20px; display: block; }
.pie-aviso { display: block; margin-top: 10px; font-size: 12.5px;
  color: rgba(255,255,255,0.45); line-height: 1.7; }

/* Aviso corto al agregar algo al pedido. Aparece abajo y se va solo:
   confirma sin tapar la pantalla ni obligar a cerrar nada. */
.aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--azul); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) { .aviso { bottom: 86px; } }

/* Enlace de enviar el pedido cuando todavía no hay nada que enviar */
.btn-whatsapp.apagado { opacity: 0.45; pointer-events: none; cursor: default; }
.btn-mapa svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 7px; }
.panel-cerrar svg { width: 18px; height: 18px; display: block; }

/* Las tres promesas de la tarjeta de "Nosotros" */
.separador-claro { height: 1px; background: var(--borde); margin: 22px 0 20px; }
.promesas { display: grid; gap: 15px; }
.promesa { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.promesa svg { width: 22px; height: 22px; color: var(--naranja); margin-top: 2px; }
.promesa strong { display: block; font-size: 14.5px; color: var(--azul); }
.promesa span { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* La foto real del local. Vale más que cualquier render: el cliente
   reconoce la fachada y sabe que llegó al sitio correcto. */
.foto-local { margin: 0; }
.foto-local img {
  width: 100%;
  border-radius: 14px;
  box-shadow: var(--sombra);
  display: block;
}
.foto-local figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--texto-suave);
  text-align: center;
}
.columna-nosotros { display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------------------
   BUSCADOR DE PREGUNTAS

   Va arriba del acordeón, no debajo: quien llega con una duda
   concreta la escribe y listo; quien viene a curiosear baja y lee
   la lista. Los dos casos atendidos sin estorbarse.
   --------------------------------------------------------------- */
.bot-caja { margin-bottom: 22px; }
.bot-buscador {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border: 2px solid var(--naranja);
  border-radius: 12px; background: #fff;
}
.bot-buscador svg { color: var(--naranja); flex: 0 0 auto; }
.bot-buscador input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none;
  font-size: 15px; background: transparent; font-family: inherit;
}
.bot-sugerencias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.bot-chip {
  border: 1px solid var(--borde); background: #fff; border-radius: 20px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  color: var(--texto-suave); transition: border-color .15s, color .15s;
}
.bot-chip:hover { border-color: var(--naranja); color: var(--naranja); }

.bot-respuesta { margin-top: 14px; }
.bot-item {
  padding: 14px 16px; border-radius: 11px; background: #fff;
  border: 1px solid var(--borde); margin-bottom: 9px;
}
/* La mejor coincidencia se marca: si salen tres, hay que saber cuál
   responde de verdad y cuáles son "por si acaso". */
.bot-item.principal { border-color: var(--naranja); border-left-width: 4px; }
.bot-item h4 { margin: 0 0 6px; font-size: 15px; }
.bot-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }
.bot-respuesta.sin-resultado .btn-whatsapp { margin-top: 12px; display: inline-flex; }
.bot-respuesta.sin-resultado p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------
   AGOTADO

   Se quitó el filtro "solo lo que hay en tienda", así que el
   agotado tiene que distinguirse solo, de un vistazo y sin leer.

   La tarjeta se atenúa y el botón queda apagado y sin cursor: el
   producto se sigue viendo —quien ve algo agotado que le interesa
   pregunta si lo consiguen— pero nadie lo mete al pedido por error.
   --------------------------------------------------------------- */
.producto.agotado { opacity: 0.62; }
.producto.agotado .producto-foto { filter: grayscale(0.7); }
.producto.agotado .existencia { color: var(--rojo); font-weight: 800; }
.btn-agregar:disabled {
  background: #e6e8eb;
  color: #8b95a1;
  cursor: not-allowed;
  border-color: #e6e8eb;
}
.btn-agregar:disabled:hover { background: #e6e8eb; color: #8b95a1; }

/* ---------------------------------------------------------------
   BOTÓN FLOTANTE DE PREGUNTAS

   Va justo encima del de WhatsApp, alineado a la derecha con él.
   En naranja de la marca y no en verde, para que se lean como dos
   cosas distintas y no como un botón partido en dos.

   Se calcula su posición a partir del de WhatsApp: 20 px del borde
   + su alto + 12 px de separación. Si un día cambia el tamaño del
   de WhatsApp, hay que mover este también — por eso van los dos
   números juntos aquí y no repartidos por el archivo.
   --------------------------------------------------------------- */
.bot-flotante {
  position: fixed; right: 20px; bottom: 84px; z-index: 55;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--naranja); color: #fff; border: none;
  padding: 13px 19px; border-radius: 30px;
  font-weight: 700; font-size: 14.5px; font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 26px rgba(232,114,12,0.38);
  transition: transform 0.15s;
}
.bot-flotante:hover { transform: translateY(-3px); background: var(--naranja-oscuro); }
.bot-flotante svg { flex: none; }
@media (max-width: 560px) {
  .bot-flotante-texto { display: none; }
  .bot-flotante { padding: 14px; bottom: 80px; }
}

/* ---------------------------------------------------------------
   BUSCADOR DENTRO DEL PEDIDO
   Agregar la segunda pieza sin tener que cerrar el pedido.
   --------------------------------------------------------------- */
.carrito-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 22px 0;
  padding: 0 12px;
  border: 1.5px solid #e2e2e6;
  border-radius: 10px;
  background: #fafafa;
  /* Sin esto el campo empuja el panel a lo ancho en teléfonos angostos */
  min-width: 0;
}
.carrito-buscar:focus-within { border-color: var(--primary); background: #fff; }
.carrito-buscar svg { width: 17px; height: 17px; flex: none; color: #8a8a90; }
.carrito-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 11px 0;
  font-size: 14.5px;
  font-family: inherit;
}
.carrito-resultados {
  margin: 8px 22px 0;
  max-height: 42vh;
  overflow-y: auto;
  border: 1px solid #ececf0;
  border-radius: 10px;
}
.cb-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid #f0f0f3;
}
.cb-item:last-child { border-bottom: 0; }
/* Se quitó el atenuado: una fila a media tinta se lee como «no se
   puede tocar», y sí se puede: se pide al proveedor. */
.cb-item.agotado { opacity: 1; }
.cb-foto {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 8px; background: #f4f4f6; color: #a5a5ab;
  overflow: hidden;
}
.cb-foto img { width: 100%; height: 100%; object-fit: cover; }
.cb-foto svg { width: 20px; height: 20px; }
.cb-texto { min-width: 0; }
.cb-nombre {
  font-size: 13.6px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-codigo { font-size: 12px; color: #77777e; margin-top: 2px; }
.cb-agotado { font-size: 11.5px; color: #b4231f; font-weight: 600; }
/* AGREGA TODA LA FILA, no solo el cuadradito.
   Antes solo agregaba un botón de 34 píxeles en la esquina: en un
   teléfono se falla más veces de las que se acierta, y al fallar lo que
   pasa es que se selecciona el texto de la fila. El "+" se queda, pero
   como señal de que la fila es tocable, no como única zona sensible. */
.cb-item[role="button"] { cursor: pointer; user-select: none; }
.cb-item[role="button"]:hover { background: #fff5ec; }
.cb-item[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.cb-agregar {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-size: 19px; line-height: 1; font-weight: 600;
  pointer-events: none;
}
.cb-agregar.puesto { background: #1f9d55; }

/* Agotado NO es lo mismo que no se puede pedir: se le encarga al
   proveedor y se vende igual. Se marca, y se deja agregar. */
.cb-item.por-encargo { opacity: 1; }
.cb-encargo {
  margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #b3651a;
}
.carrito-encargo {
  color: #b3651a; font-weight: 700;
}
.cb-vacio { padding: 16px 14px; font-size: 13.5px; color: #55555c; }
.cb-vacio .cb-nota { margin-top: 6px; font-size: 12.5px; color: #85858c; }

@media (max-width: 480px) {
  .carrito-buscar { margin: 10px 14px 0; }
  .carrito-resultados { margin: 8px 14px 0; max-height: 38vh; }
}

/* Las tres promesas, a lo ancho debajo de las dos columnas.
   Estaban dentro de la tarjeta de marcas: eso hacía la columna derecha
   500px más alta que la izquierda y dejaba media pantalla en blanco. */
.promesas-banda {
  /* Va DENTRO del contenedor de dos columnas y ocupa las dos.
     Antes quedaba fuera por un cierre de div de mas: sin los margenes del
     contenedor se pegaba a los bordes de la pantalla y el primer icono
     salia cortado por la mitad. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e8e8ec;
}
.promesas-banda .promesa {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.promesas-banda .promesa svg { width: 24px; height: 24px; flex: none; color: var(--primary); }
.promesas-banda .promesa strong { display: block; font-size: 14.5px; }
.promesas-banda .promesa span { font-size: 13px; color: #6d6d75; line-height: 1.45; }
@media (max-width: 760px) {
  .promesas-banda { grid-template-columns: 1fr; gap: 14px; }
}

/* La foto del local se recorta para que las dos columnas queden parejas.
   Con la foto entera (461px) más la tarjeta de marcas, la columna derecha
   quedaba 250px más alta que el texto de la izquierda. */
@media (min-width: 761px) {
  .foto-local img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }
}


/* =====================================================================
   ALIADOS COMERCIALES
   Los negocios de la familia. El dibujo del vehiculo dice de que es cada
   uno antes de leer una palabra.
   ===================================================================== */
.rejilla-aliados {
  display: grid;
  /* Con un solo aliado la tarjeta se estiraba a los 1200px del contenedor
     y el dibujo quedaba nadando en el medio. Se le pone techo: crece
     hasta 380px y a partir de ahi se agregan columnas. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 18px;
}
.aliado {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8e8ec; border-radius: 16px;
  overflow: hidden; box-shadow: var(--sombra);
  transition: transform .16s ease, box-shadow .16s ease;
}
.aliado:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(31,45,61,.13); }

/* El dibujo del vehiculo, sobre la banda de color de la marca */
.aliado-dibujo {
  background: linear-gradient(135deg, #1f2d3d 0%, #2c4258 100%);
  padding: 22px 24px 16px; color: rgba(255,255,255,.92); line-height: 0;
}
.aliado-dibujo svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }

.aliado-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.aliado-cuerpo h3 { margin: 0; font-size: 19px; color: var(--azul); }
.aliado-rubro { margin: 0; font-size: 14px; color: var(--naranja); font-weight: 700; }
.aliado-detalle { margin: 2px 0 0; font-size: 14px; color: var(--texto-suave); line-height: 1.5; }

.aliado-datos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.aliado-dato {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto-suave); text-decoration: none;
}
.aliado-dato svg { width: 15px; height: 15px; color: var(--naranja); flex: none; }
a.aliado-dato:hover { color: var(--naranja); }
.aliado-wa { margin-top: 14px; justify-content: center; }

@media (max-width: 520px) {
  .aliado-dibujo { padding: 16px 18px 12px; }
  .aliado-dibujo svg { max-width: 190px; }
}

/* Pedir algo agotado es un pedido válido: se le encarga al proveedor.
   Se distingue del "Agregar al pedido" normal para que nadie prometa
   una entrega de hoy sobre algo que hay que mandar a pedir. */
.btn-agregar.encargo {
  background: #fff; color: #b3651a; border: 1.5px solid #e8a765;
}
.btn-agregar.encargo:hover { background: #fff5ec; }
.btn-agregar.encargo.puesto { background: #1f9d55; color: #fff; border-color: #1f9d55; }

/* =====================================================================
   EL CARTEL DE LA TASA DEL BCV
   =====================================================================
   No es decoración: el artículo 46 numeral 5 de la Ley Orgánica de
   Precios Justos obliga a exhibirla, y la SUNDDE sanciona la omisión.
   Va oscuro y con el número enorme, como el cartel que reparten para
   pegar en el local: se tiene que leer desde la puerta. */
.franja-tasa {
  background: linear-gradient(135deg, #16202c 0%, #1f2d3d 100%);
  color: #fff;
  padding: 40px 0;
}
.franja-tasa-interior {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.ft-etiqueta {
  display: inline-block; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary); font-weight: 700;
  margin-bottom: 8px;
}
.ft-texto h2 {
  margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; color: #fff;
}
.ft-texto h2 strong { color: var(--primary); }
.ft-texto p { margin: 0; color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.6; max-width: 52ch; }

/* La pizarra: tres casillas, como las del cartel oficial. */
.ft-pizarra {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 260px;
}
.ft-linea, .ft-fecha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 11px 20px;
}
.ft-linea + .ft-linea, .ft-fecha { border-top: 1px solid rgba(255,255,255,.12); }
.ft-par {
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.6);
  letter-spacing: .04em; white-space: nowrap;
}
.ft-linea strong {
  font-size: 27px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ft-fecha strong { font-size: 15px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .franja-tasa-interior { grid-template-columns: 1fr; }
  .ft-pizarra { min-width: 0; }
}

/* =====================================================================
   SERVICIOS DE LA TIENDA
   ===================================================================== */
.rejilla-servicios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 26px;
}
.servicio {
  border: 1px solid var(--linea, #e6e3df); border-radius: 14px;
  padding: 24px 22px; background: #fff;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.servicio:hover { border-color: var(--primary); transform: translateY(-2px); }
.servicio-icono {
  width: 52px; height: 52px; border-radius: 12px;
  background: #fff5ec; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.servicio-icono svg { width: 30px; height: 30px; }
.servicio h3 { margin: 0 0 8px; font-size: 18px; }
.servicio p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #55555c; flex: 1; }
.servicio-enlace {
  font-size: 13.5px; font-weight: 700; color: var(--primary);
  text-decoration: none; align-self: flex-start;
}
.servicio-enlace:hover { text-decoration: underline; }

/* =====================================================================
   TALLERES: LA CONCESIÓN
   =====================================================================
   Un taller compra todas las semanas y en cantidad. Es el cliente que
   más vale y el que menos se busca. */
.bloque-talleres {
  display: grid; grid-template-columns: 1fr 220px;
  gap: 40px; align-items: center;
}
.bt-texto p { font-size: 15px; line-height: 1.7; max-width: 56ch; }
.bt-lista { margin: 18px 0 24px; padding: 0; list-style: none; }
.bt-lista li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.55;
}
.bt-lista li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.bt-dibujo { color: rgba(255,255,255,.18); }
.bt-dibujo svg { width: 100%; height: auto; }

@media (max-width: 760px) {
  .bloque-talleres { grid-template-columns: 1fr; gap: 24px; }
  .bt-dibujo { display: none; }
}