/* ==========================================================================
   GARAGE 66 — Hoja de estilos principal
   Paleta corporativa basada en el logo G66: negro, blanco y rojo.
   ========================================================================== */

:root {
  --g66-black: #0a0a0a;
  --g66-black-soft: #161616;
  --g66-black-card: #1f1f1f;
  --g66-red: #e30613;
  --g66-red-dark: #a80410;
  --g66-red-light: #ff2d3a;
  --g66-white: #ffffff;
  --g66-gray-100: #f5f5f5;
  --g66-gray-200: #e9e9e9;
  --g66-gray-300: #d4d4d4;
  --g66-gray-500: #8c8c8c;
  --g66-gray-700: #4a4a4a;

  --font-display: 'Anton', 'Oswald', sans-serif;
  --font-script: 'Yellowtail', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.22);
  --header-h: 84px;
}

* { box-sizing: border-box; }

/* overflow-x:hidden en html/body: blindaje contra cualquier elemento que
   se desborde por accidente hacia los lados (hoy corregido el caso del
   footer, ver .footer-grid) — evita que quede una franja en blanco y
   scroll lateral en mobile aunque en el futuro algo más se pase de ancho. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--g66-black);
  background: var(--g66-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; }
.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.section-title span { color: var(--g66-red); }
.section-subtitle {
  color: var(--g66-gray-700);
  margin: 0 0 36px;
  max-width: 640px;
}
.section-dark { background: var(--g66-black); color: var(--g66-white); }
.section-dark .section-subtitle { color: var(--g66-gray-300); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 14px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--g66-red); color: var(--g66-white); }
.btn-primary:hover { background: var(--g66-red-dark); }
.btn-dark { background: var(--g66-black); color: var(--g66-white); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; border-color: var(--g66-white); color: var(--g66-white); }
.btn-outline:hover { background: var(--g66-white); color: var(--g66-black); }
.btn-outline-dark { background: transparent; border-color: var(--g66-black); color: var(--g66-black); }
.btn-outline-dark:hover { background: var(--g66-black); color: var(--g66-white); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Top utility bar */
.topbar {
  background: var(--g66-black);
  color: var(--g66-gray-300);
  font-size: 13px;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}
.topbar-badge {
  background: var(--g66-red);
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 700;
  margin-right: 8px;
}
.topbar-links { display: flex; gap: 20px; align-items: center; }
.topbar-links a { display: flex; align-items: center; gap: 6px; }
.topbar-links svg { width: 14px; height: 14px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--g66-black);
  border-bottom: 1px solid #262626;
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 8px 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.brand img.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}
.brand-garage {
  font-family: var(--font-script);
  font-size: 30px;
  color: var(--g66-white);
}
.brand-66 {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--g66-red);
  font-style: italic;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g66-gray-500);
  display: block;
  margin-top: -4px;
}

#nav-categories-slot { display: contents; }

/* En desktop, si hay muchas categorías el menú pasa a 2-3 filas: se fuerza
   a ocupar todo el ancho (flex-basis:100%) para que quede en su propia
   fila debajo del logo/carrito, y él mismo hace wrap internamente. */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  flex-basis: 100%;
  order: 3;
}
.main-nav a {
  position: relative;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 7px 1px;
  color: #fff;
  cursor: pointer;
}
/* Subrayado animado: crece desde el centro en vez de aparecer de golpe. */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--g66-red);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--g66-red); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

/* Buscador de productos — siempre visible en el header, desktop y mobile */
.header-search {
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  max-width: 340px;
  order: 2;
}
.header-search input[type="search"] {
  width: 100%;
  height: 40px;
  border-radius: 20px 0 0 20px;
  border: 2px solid #2a2a2a;
  border-right: none;
  background: #161616;
  color: #fff;
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
}
.header-search input[type="search"]::placeholder { color: var(--g66-gray-500); }
.header-search input[type="search"]:focus { outline: none; border-color: var(--g66-red); }
.header-search button {
  height: 40px;
  width: 44px;
  flex-shrink: 0;
  border-radius: 0 20px 20px 0;
  border: 2px solid var(--g66-red);
  background: var(--g66-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search button:hover { background: var(--g66-red-dark); }
.header-search svg { width: 16px; height: 16px; }

@media (max-width: 980px) {
  .header-search { order: 4; flex-basis: 100%; max-width: none; margin-top: 8px; }
}

/* order:2, igual que .header-search — así quedan juntos en la misma fila
   (arriba a la derecha, al lado del buscador) en vez de caer a una fila
   propia debajo del menú de navegación (que sigue en su propia fila con
   flex-basis:100%, ver .main-nav). En mobile no cambia nada porque el
   menú pasa a position:fixed (fuera del flujo) y el buscador ya tenía su
   propio order:4 para ir debajo en su fila completa. */
.header-actions { display: flex; align-items: center; gap: 14px; order: 2; }
.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1c1c1c;
  color: #fff;
  border: none;
}
.icon-btn:hover { background: #2a2a2a; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--g66-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.nav-toggle { display: none; background: none; border: none; color: #fff; }

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--g66-black) 55%, #262626 100%);
  color: var(--g66-white);
  padding: 56px 0 0;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(227,6,19,0.28), transparent 55%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(227,6,19,0.15);
  border: 1px solid var(--g66-red);
  color: #ff8f96;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
.hero h1 span { color: var(--g66-red); }
.hero p.lead {
  max-width: 620px;
  margin: 0 auto 32px;
  color: var(--g66-gray-300);
  font-size: 17px;
}
.hero-services-line {
  max-width: 680px;
  margin: 0 auto 32px;
  color: var(--g66-gray-300);
  font-size: 15px;
  line-height: 1.6;
}

/* Zona de cobertura (comunas) */
.coverage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.coverage-chip {
  background: var(--g66-gray-100);
  border: 1px solid var(--g66-gray-200);
  color: var(--g66-black);
  padding: 9px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
}
.coverage-note {
  margin-top: 20px;
  color: var(--g66-gray-700);
  font-size: 14px;
}
/* Mismo formato que .section-title (fuente display, mayúsculas, acento
   rojo en el <span>) pero a un tamaño más chico, porque acá el texto es
   una oración completa con una dirección y no un título corto de
   sección. */
.coverage-note-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.3px;
  line-height: 1.3;
  margin: 28px 0 0;
}
.coverage-note-title span { color: var(--g66-red); }
.coverage-group { margin-top: 30px; }
.coverage-group:first-of-type { margin-top: 0; }
.coverage-group-title {
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.coverage-group-title .tag-free {
  background: var(--g66-red);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.coverage-chip--free {
  background: var(--g66-red);
  border-color: var(--g66-red);
  color: #fff;
}

/* Vehicle finder widget */
.finder {
  background: var(--g66-white);
  color: var(--g66-black);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 28px 34px;
  margin: 0 auto;
  max-width: 1080px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  transform: translateY(40px);
}
/* Modo minimal: mientras el buscador está oculto (G66_FINDER_ENABLED = false)
   solo se muestra el botón de WhatsApp, sin la caja blanca detrás. */
.finder.finder-minimal {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 64px;
  transform: none;
}
.finder-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.finder-tab {
  border: 2px solid var(--g66-gray-200);
  background: var(--g66-white);
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.finder-tab.active { background: var(--g66-black); color: var(--g66-white); border-color: var(--g66-black); }
.finder-title {
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 18px;
}
.finder-title .accent { color: var(--g66-red); }
.finder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.finder-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--g66-gray-700);
  margin-bottom: 6px;
}
.finder-field select {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--g66-gray-200);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--g66-white);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%234a4a4a' stroke-width='2' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.finder-field select:disabled { background-color: var(--g66-gray-100); color: var(--g66-gray-500); }
.finder-field select:focus { outline: none; border-color: var(--g66-red); }
.finder-submit { height: 48px; padding: 0 28px; white-space: nowrap; }
.finder-note { font-size: 12px; color: var(--g66-gray-500); margin-top: 14px; }

@media (max-width: 900px) {
  .finder-grid { grid-template-columns: repeat(2, 1fr); }
  .finder-submit { grid-column: 1 / -1; }
}

/* Trust strip */
.trust-strip { background: var(--g66-black-soft); padding-top: 70px; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px 0 10px;
}
.trust-item { text-align: center; color: var(--g66-white); }
.trust-item .num { font-family: var(--font-display); font-size: 30px; color: var(--g66-red); }
.trust-item .label { font-size: 13px; color: var(--g66-gray-300); text-transform: uppercase; letter-spacing: 0.5px; }
@media (max-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* Category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.cat-card {
  background: var(--g66-gray-100);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 2px solid transparent;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--g66-red); background: #fff; }
.cat-card .icon { font-size: 34px; margin-bottom: 12px; }
.cat-card h3 { font-size: 15px; margin: 0 0 4px; text-transform: uppercase; }
.cat-card p { font-size: 12px; color: var(--g66-gray-700); margin: 0; }

/* Product grid & cards */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.toolbar select {
  border: 2px solid var(--g66-gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-weight: 600;
}
.results-count { font-weight: 700; }
.results-count span { color: var(--g66-red); }

/* Filtro por subcategoría del ERP, en categoria.html — aparece debajo del
   toolbar (contador de resultados) solo cuando la categoría tiene
   subcategorías cargadas. */
.subcat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -10px 0 24px;
}
.subcat-chip {
  background: var(--g66-gray-100);
  border: 1px solid var(--g66-gray-200);
  color: var(--g66-black);
  padding: 7px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.subcat-chip:hover { border-color: var(--g66-red); }
.subcat-chip.active { background: var(--g66-red); border-color: var(--g66-red); color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.product-card {
  border: 1px solid var(--g66-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-media {
  aspect-ratio: 4 / 3;
  background: var(--g66-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  position: relative;
}
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--g66-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.product-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--g66-gray-500); font-weight: 700; }
.product-name { font-size: 15px; font-weight: 700; margin: 0; }
.product-sku { font-size: 11px; color: var(--g66-gray-500); font-family: monospace; }
.product-meta { font-size: 12px; color: var(--g66-gray-700); }
.product-price { font-family: var(--font-display); font-size: 20px; margin-top: 4px; }
.product-price .old { font-family: var(--font-body); font-size: 13px; color: var(--g66-gray-500); text-decoration: line-through; margin-right: 6px; }
.product-price-note { font-size: 11px; color: var(--g66-gray-500); margin-top: -4px; }
.product-actions { margin-top: auto; padding-top: 10px; }
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--g66-gray-700);
  background: var(--g66-gray-100);
  border-radius: var(--radius-md);
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.service-card {
  background: var(--g66-black-card);
  border-radius: var(--radius-md);
  padding: 26px;
  border-top: 3px solid var(--g66-red);
}
.service-card h3 { margin: 10px 0 8px; text-transform: uppercase; font-size: 16px; }
.service-card p { color: var(--g66-gray-300); font-size: 14px; margin: 0; }
.service-card .icon { font-size: 30px; }

/* Widget flotante de ventas mayoristas (aprobado 2026-07-17, estilo
   "Opción B" — negro con acento rojo). Aparece como una tarjeta flotante
   abajo a la derecha (el WhatsApp flotante ya ocupa abajo a la
   izquierda), con botón de cerrar; al cerrarla queda colapsada en una
   píldora roja pulsante "Atención Mayorista" que sigue enlazando a
   WhatsApp. La preferencia de "ya la cerré" se guarda en localStorage
   para no volver a mostrar la tarjeta completa en visitas futuras — la
   píldora sigue siempre visible. */
.wholesale-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.wholesale-float-card {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 290px;
  max-width: calc(100vw - 48px);
  background: var(--g66-black);
  border: 1px solid rgba(227,6,19,0.45);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wholesale-float-card.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wholesale-float-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--g66-gray-300);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.wholesale-float-close:hover { color: #fff; }
.wholesale-float-badge {
  display: inline-block;
  background: var(--g66-red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.wholesale-float-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.wholesale-float-title strong { color: var(--g66-red); }
.wholesale-float-text {
  font-size: 12.5px;
  color: var(--g66-gray-300);
  line-height: 1.5;
  margin: 0 0 14px;
}
.wholesale-float-cta {
  display: block;
  text-align: center;
  background: var(--g66-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.wholesale-float-cta:hover { background: var(--g66-red-dark); }
.wholesale-float-pill {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--g66-red);
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 13px 18px;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(227,6,19,0.45);
  animation: wholesale-pulse 2.2s infinite;
}
.wholesale-float-pill:hover { transform: scale(1.04); }
@keyframes wholesale-pulse {
  0% { box-shadow: 0 0 0 0 rgba(227,6,19,0.55); }
  70% { box-shadow: 0 0 0 16px rgba(227,6,19,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,6,19,0); }
}
@media (max-width: 480px) {
  .wholesale-float { right: 16px; bottom: 16px; }
  .wholesale-float-pill span.pill-label { display: none; }
}

/* Partner banner (GPS PRO) */
.partner-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--g66-gray-100);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.partner-banner .partner-tag {
  display: inline-block;
  background: var(--g66-black);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.partner-banner h3 { margin: 0 0 8px; font-size: 22px; }
.partner-banner p { margin: 0; color: var(--g66-gray-700); max-width: 520px; }
.partner-logo {
  font-family: var(--font-display);
  font-size: 28px;
  background: var(--g66-black);
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
}
.partner-logo em { color: var(--g66-red); font-style: normal; }

/* Testimonials / instagram */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ig-placeholder-card {
  border: 2px dashed var(--g66-gray-300);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  color: var(--g66-gray-700);
  font-size: 13px;
}

/* Map / contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--g66-gray-100);
  border-radius: var(--radius-md);
  padding: 26px;
}
.contact-row { display: flex; gap: 14px; margin-bottom: 18px; }
.contact-row .ic { font-size: 22px; }
.contact-row h4 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; }
.contact-row p, .contact-row a { margin: 0; color: var(--g66-gray-700); font-size: 14px; }
.map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--g66-gray-200); height: 100%; min-height: 320px; }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--g66-black); color: #fff; font-size: 18px;
}
.social-btn:hover { background: var(--g66-red); }

/* Footer */
.site-footer { background: var(--g66-black); color: var(--g66-gray-300); padding: 56px 0 0; }
.footer-grid {
  display: grid;
  /* minmax(0, ...) en vez de solo "1.4fr 1fr 1fr 1fr": sin el mínimo en 0,
     el ancho mínimo de cada columna de grid es "auto" (el ancho del
     contenido más largo sin cortar), así que un texto largo sin espacios
     (el correo bmfspa.comercial@gmail.com) podía empujar esa columna más
     allá de su espacio y desbordar la página completa hacia la derecha en
     mobile (ver bug de la franja blanca / scroll lateral, 2026-07-19). */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  padding-bottom: 40px;
  border-bottom: 1px solid #2a2a2a;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* En teléfonos angostos, 2 columnas queda muy apretado — se apila en 1 sola. */
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-col h4 { color: #fff; text-transform: uppercase; font-size: 13px; letter-spacing: 0.6px; margin: 0 0 16px; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col a:hover { color: var(--g66-red); }
/* Blindaje adicional: cualquier texto largo sin espacios dentro del
   footer (correos, URLs) se corta antes de forzar un desborde horizontal. */
.footer-col, .footer-col a, .footer-col li { overflow-wrap: anywhere; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; font-size: 13px; color: var(--g66-gray-500); flex-wrap: wrap; gap: 10px;
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  background: #25D366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  animation: wa-pulse 2.2s infinite;
}
.wa-float:hover { transform: scale(1.06); }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Cart drawer */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 950;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: #fff; z-index: 960; transform: translateX(100%);
  transition: transform .25s ease; display: flex; flex-direction: column;
  box-shadow: -10px 0 30px rgba(0,0,0,0.2);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--g66-gray-200); }
.cart-header h3 { margin: 0; text-transform: uppercase; font-family: var(--font-display); }
.cart-close { background: none; border: none; font-size: 22px; }
/* Antes .cart-items tenía flex:1 + overflow-y:auto y .cart-footer quedaba
   fijo debajo — con el formulario de datos del comprador completo (5
   campos + botones), el footer crecía tanto que el área de productos
   quedaba comprimida a un cuadrito minúsculo. Ahora .cart-body envuelve
   items + footer en UNA sola zona de scroll: los productos siempre se ven
   a su tamaño completo, y si hace falta, se hace scroll a todo el cajón
   (no solo a la lista de productos) para llegar al formulario. */
.cart-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.cart-items { padding: 16px 20px; }
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--g66-gray-200); }
.cart-item-media { width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--g66-gray-100); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-info .name { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.cart-item-info .price { font-size: 13px; color: var(--g66-gray-700); }
.qty-control { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-control button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--g66-gray-300); background: #fff;
}
.remove-item { font-size: 12px; color: var(--g66-red); background: none; border: none; margin-top: 6px; text-decoration: underline; padding: 0; }
.cart-footer { padding: 18px 20px 22px; border-top: 1px solid var(--g66-gray-200); }
.cart-total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.cart-form { display: grid; gap: 10px; margin-bottom: 14px; }
.cart-form input, .cart-form select, .cart-form textarea {
  width: 100%; padding: 10px 12px; border: 2px solid var(--g66-gray-200); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
}
.cart-form label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--g66-gray-700); margin-bottom: 2px; display: block; }
.cart-send-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cart-empty { text-align: center; padding: 50px 10px; color: var(--g66-gray-500); }

/* Mobile nav */
@media (max-width: 980px) {
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--g66-black); flex-direction: column; padding: 20px 24px; gap: 4px;
    transform: translateX(-100%); transition: transform .2s ease; z-index: 400; overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid #262626; width: 100%; color: #fff; font-size: 14px; }
  .main-nav a::after { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 22px; }
  .topbar .container { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 6px; gap:6px; }
}

/* Page header (inner pages) */
.page-hero {
  background: var(--g66-black);
  color: #fff;
  padding: 44px 0;
  text-align: center;
}
.page-hero .breadcrumb { color: var(--g66-gray-500); font-size: 13px; margin-bottom: 10px; }
.page-hero .breadcrumb a:hover { color: var(--g66-red); }
.page-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); margin: 0; }
.page-hero h1 span { color: var(--g66-red); }

.layout-with-sidebar { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
.layout-with-sidebar.full-width { grid-template-columns: 1fr; }
@media (max-width: 900px) { .layout-with-sidebar { grid-template-columns: 1fr; } }
.sidebar-finder { background: var(--g66-black); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: calc(var(--header-h) + 16px); }
.sidebar-finder .finder-title { color: #fff; }
.sidebar-finder .finder-field { margin-bottom: 14px; }

/* Puntero personalizado (solo desktop con mouse real): anillo rojo que
   sigue al cursor con inercia y reacciona al pasar sobre links/botones. */
@media (hover: hover) and (pointer: fine) {
  #g66-cursor-fx {
    position: fixed;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--g66-red);
    background: rgba(227, 6, 19, 0.10);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: width .18s ease, height .18s ease, background-color .18s ease,
                border-color .18s ease, opacity .25s ease;
    will-change: transform;
  }
  #g66-cursor-fx.is-active {
    width: 46px; height: 46px;
    background: rgba(227, 6, 19, 0.16);
  }
  #g66-cursor-fx.is-click {
    width: 14px; height: 14px;
    background: rgba(227, 6, 19, 0.4);
  }
}
.sidebar-finder .finder-field label { color: var(--g66-gray-300); }