/* ==========================================================================
   PromoWatch — sistema visual
   LUXURY × PERFORMANCE × PRECISION × TECHNOLOGY

   Reglas de uso del color corporativo (naranja): reservado para estados
   activos/foco y el acento del wordmark. Los botones/CTA usan negro o
   grafito, no naranja. El resto de la interfaz se mantiene neutral
   (blanco/negro/grises) para que el reloj sea siempre el elemento
   dominante. Verde = disponibilidad, nada más.
   Mobile-first. Tipografías autohospedadas, sin CDN externo.
   ========================================================================== */

/* ---------- Tipografía autohospedada: Montserrat (familia única) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/Montserrat-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/Montserrat-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces: uso puntual (banner de línea Advanced), no forma parte de
   la jerarquía general Montserrat. Variable font — se activa el eje
   "SOFT" vía font-variation-settings para lograr el trazo redondeado. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/Fraunces-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/Fraunces-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Anton: título + subtítulo del banner de catálogo (líneas y marcas) —
   estilo condensado/bold definitivo aprobado por el cliente. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* base — paleta oficial Promowatch */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-graphite: #1a1a1a;

  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --border: #d9d9d9;
  --ink: #000000;
  --ink-soft: #6b6b6b;

  --surface-premium: var(--color-black);
  --surface-premium-alt: var(--color-graphite);

  --accent: #dc8027;      /* color oficial del logo PW — uso reservado a estados activos/foco */
  --accent-strong: #b8681e;
  --success: #00843d;     /* disponibilidad únicamente */

  --cta: var(--color-graphite);  /* botones/CTA: negro o grafito, no naranja */
  --cta-hover: var(--color-black);

  --font-display: "Montserrat", -apple-system, sans-serif;
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 7px;
  --radius-lg: 14px;
  --max-width: 1180px;
  --header-h: 60px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Jerarquía tipográfica de marca ---------- */
.hero-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h1, h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

h3, h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.product-reference {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface-premium);
  color: var(--color-white);
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.brand-logo { height: 20px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 6px; }

.quote-toggle {
  position: relative;
  background: none;
  border: none;
  color: var(--color-white);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.quote-toggle svg { width: 20px; height: 20px; }
.quote-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--color-white);
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.quote-badge[hidden] { display: none; }

.site-nav {
  display: none;
  gap: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: lowercase;
  font-weight: 400;
  white-space: nowrap;
}
.site-nav a {
  text-decoration: none;
  color: #b3b3b3;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.site-nav a:hover { color: var(--color-white); }
.site-nav a.active { color: var(--color-white); border-color: var(--accent); }

.nav-toggle {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

@media (min-width: 780px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

.mobile-menu {
  display: none;
  background: var(--surface-premium);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 13px 16px;
  color: #b3b3b3;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-transform: lowercase;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--surface-premium);
  color: var(--color-white);
  padding: 52px 0 44px;
  text-align: center;
}
.hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.hero p {
  color: #a8a8a8;
  max-width: 540px;
  margin: 0 auto;
  font-size: 0.98rem;
  font-weight: 400;
}

/* Banner de catálogo (líneas y marcas) — diseño definitivo aprobado: foto
   fija a la derecha, título + subtítulo reales (no texto quemado en la
   imagen) en Anton/naranja, alineados a la izquierda y centrados
   verticalmente. Se respeta la proporción exacta de la imagen fuente
   (5426×824) para que nunca se recorte ni se distorsione. */
.banner-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5426 / 824;
  background: var(--color-white);
}
.banner-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.banner-hero .container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: left;
}
.banner-hero h1 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 0.92;
  color: #fd4401;
  font-size: clamp(1.5rem, 6.2vw, 4.4rem);
  margin: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.banner-hero p {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  color: #fd4401;
  font-size: clamp(0.6rem, 1.7vw, 1.05rem);
  line-height: 1.3;
  margin: 8px 0 0;
  max-width: 340px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
@media (max-width: 480px) {
  .banner-hero p { max-width: 78%; }
}

/* ---------- Banner de línea de catálogo (ej. Advanced) ---------- */
.catalog-hero {
  position: relative;
  overflow: hidden;
  /* respeta la proporción real del banner (1337 × 197px) en vez de
     forzar una altura y recortar la imagen con object-fit:cover */
  aspect-ratio: 1337 / 197;
  text-align: left;
}
.catalog-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.catalog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100%);
}
/* el contenido se ancla abajo-izquierda, alineado con el mismo borde
   izquierdo que usa .container en el resto del sitio (no centrado) */
.catalog-hero .container {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
  padding-bottom: 10px;
}
.catalog-hero h1 {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "opsz" 60;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.2vw, 2.2rem);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.catalog-hero p {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "opsz" 24;
  font-weight: 600;
  color: #eaeaea;
  font-size: 0.85rem;
  margin: 0;
  max-width: none;
}
@media (min-width: 720px) {
  .catalog-hero .container { padding-bottom: 22px; }
}

/* Hero con foto (home) */
/* El banner ya trae su propio texto e identidad integrados en la imagen
   (Distribuidor Oficial, "Celebra y Reconoce."), así que el contenedor
   solo respeta la proporción panorámica original — sin overlay ni
   texto HTML duplicado encima. */
.hero-photo {
  position: relative;
  padding: 0;
  aspect-ratio: 5577 / 825;
  display: block;
  overflow: hidden;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-content {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Módulos de información (condiciones comerciales) ---------- */
.info-modules-section {
  background: var(--bg-alt);
  padding: 48px 0 56px;
  border-top: 1px solid var(--border);
}
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.info-modules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .info-modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .info-modules-grid { grid-template-columns: repeat(5, 1fr); }
}
.info-card {
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.info-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ink);
  margin-bottom: 14px;
}
.info-icon svg { width: 100%; height: 100%; }
.info-card h3 {
  font-size: 0.92rem;
  margin: 0 0 8px;
}
.info-card p {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

.timepro-strip-section {
  padding: 20px 0 44px;
}
/* Contenedor ligeramente más ancho que el resto del sitio (en vez del
   .container estándar de 1180px) para que el banner crezca un poco tanto
   en computadora como en teléfono, sin llegar a pantalla completa —
   sigue dejando aire a los lados para que se vean las esquinas
   redondeadas. */
.timepro-strip-section .container {
  max-width: 1220px;
  padding: 0 12px;
}
.timepro-strip-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ---------- Líneas / colecciones (home) ---------- */
.lineas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 40px 0 60px;
}
@media (min-width: 640px) {
  .lineas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .lineas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Carrusel de marcas (cinta continua) ---------- */
.brand-marquee {
  background: var(--color-black);
  overflow: hidden;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 28px;
  animation: brand-marquee-scroll 34s linear infinite;
  will-change: transform;
}
/* pausa completa del banner al pasar el cursor — solo en dispositivos
   con hover real (mouse/trackpad), para no dejar el carrusel "pegado"
   en un tap accidental en móvil/touch */
@media (hover: hover) and (pointer: fine) {
  .brand-marquee:hover .brand-marquee-track {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
}
@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.brand-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  opacity: 0.62;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.brand-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-marquee-item:hover,
.brand-marquee-item:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}
.brand-marquee-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (min-width: 720px) {
  .brand-marquee-item { width: 108px; height: 108px; }
}

/* ---------- Cuadrícula estática de marcas (debajo de TIMEPRO Box) ----------
   Mismos logos y enlaces que la cinta (brand-marquee), pero fijos en una
   grilla en vez de animados — otra forma de llegar directo al catálogo de
   cada marca para quien prefiera no esperar a que pase en el carrusel. */
.brand-grid-section {
  background: var(--surface-premium);
  padding: 40px 0 56px;
}
.brand-grid-section .container {
  max-width: 1360px;
}
.brand-grid-eyebrow {
  color: #8a8a8a;
  text-align: center;
}
.brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px;
}
/* Desde tablet grande hacia arriba, las 36 marcas se acomodan en exactamente
   4 renglones (9 columnas) en vez de ajustarse al ancho disponible. Si la
   ventana es más angosta que las 9 columnas necesarias, la cuadrícula
   permite scroll horizontal en vez de romper el layout. */
@media (min-width: 860px) {
  .brand-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}
.brand-grid-item {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 720px) {
  .brand-grid-item { width: 108px; height: 108px; }
}
.brand-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}
/* degradado muy sutil (color de acento de la marca) que aparece al pasar el
   mouse, tipo "glow" difuminado — no debe leerse como un recuadro sólido */
.brand-grid-item::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(220, 128, 39, 0.22), rgba(220, 128, 39, 0) 68%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .brand-grid-item:hover::after { opacity: 1; }
  .brand-grid-item:hover img { transform: scale(1.06); }
}
.brand-grid-item:focus-visible::after { opacity: 1; }
.brand-grid-item img { transition: transform 0.25s var(--ease); }
.brand-grid-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 2;
}

.linea-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--color-white);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.14s var(--ease);
  position: relative;
}
.linea-card:hover { border-color: var(--success); }
.linea-card.disabled { opacity: 0.5; pointer-events: none; }

.linea-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.linea-card p { margin: 0; color: var(--ink-soft); font-size: 0.87rem; }

.linea-card .price-range {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.linea-card .price-range span {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.7rem;
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  background: rgba(0, 132, 61, 0.08);
  color: var(--success);
}
.badge.soon { background: var(--bg-alt); color: var(--ink-soft); }

/* ---------- Toolbar de catálogo (filtros + búsqueda) ---------- */
.catalog-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.search-box { flex: 1 1 220px; position: relative; }
.search-box input {
  width: 100%;
  padding: 10px 12px 10px 30px;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%236b6b6b' stroke-width='1.7'><circle cx='6.2' cy='6.2' r='5'/><line x1='10.2' y1='10.2' x2='14' y2='14'/></svg>") no-repeat 4px center;
  transition: border-color 0.12s var(--ease);
}
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-box input::placeholder { color: #9a9a9a; }

.filter-select {
  padding: 10px 10px;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  min-width: 128px;
  color: var(--ink);
  transition: border-color 0.12s var(--ease);
}
.filter-select:focus { outline: none; border-color: var(--accent); }

.results-count {
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 10px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Grid de productos ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 24px 0 64px;
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 960px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s var(--ease);
}
.product-card:hover, .product-card:focus-visible { border-color: var(--color-black); }
.product-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.product-card .thumb-wrap {
  background: var(--bg-alt);
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

.product-card .info { padding: 12px 13px 15px; }
.product-card .brand-name {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 3px;
}
.product-card .prod-name {
  font-size: 0.85rem;
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 500;
}
.product-card .prod-price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.product-card .prod-price small {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.cat-tag {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  margin-top: 8px;
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  display: none;
}
.no-results.visible { display: block; }

/* ---------- Lightbox / ficha de producto ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.lightbox-overlay.open { display: flex; }

@media (min-width: 720px) {
  .lightbox-overlay { align-items: center; padding: 20px; }
}

.lightbox-panel {
  background: var(--color-white);
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 12px 12px 0 0;
  position: relative;
  animation: fadeIn 0.14s var(--ease);
}
@media (min-width: 720px) {
  .lightbox-panel { border-radius: var(--radius); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.12s var(--ease);
}
.lightbox-close:hover { border-color: var(--color-black); }

.lightbox-body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .lightbox-body { grid-template-columns: 1fr 1fr; }
}

.lightbox-image {
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

/* Tipografía de la ficha (lightbox): marca + nombre de producto en
   Montserrat SemiBold 15px; todo lo demás en Montserrat Regular 13px. */
.lightbox-details { padding: 28px 26px 32px; }
.lightbox-details .brand-name {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 6px;
}
.lightbox-details h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 4px;
}
.lightbox-details .sku {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0 0 14px;
}
.lightbox-details .cat-tag {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
}

.price-block {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin: 16px 0;
}
.price-block .price-main {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.price-block .price-main small {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}
.price-block .price-total {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 3px;
}

.details-section { margin-bottom: 18px; }
.details-section h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.methods-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.methods-list li {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #006039;
  border-radius: 3px;
  padding: 4px 9px;
  color: var(--ink);
}

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#lb-add-quote { text-transform: none; }
#lb-add-quote:not(.is-added) { background: #006039; border-color: #006039; }
#lb-add-quote:not(.is-added):hover { background: #00492c; border-color: #00492c; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.btn-primary { background: var(--cta); color: var(--color-white); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: var(--color-white); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { border-color: var(--color-black); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-premium);
  color: #a8a8a8;
  padding: 34px 0;
  margin-top: 20px;
  text-align: center;
  font-size: 0.82rem;
}
.site-footer strong { color: var(--color-white); }

/* ---------- Mi cotización (panel lateral) ---------- */
.quote-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: flex-end;
  z-index: 110;
}
.quote-drawer-overlay.open { display: flex; }

.quote-drawer {
  background: var(--color-white);
  width: 100%;
  max-width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: quoteDrawerIn 0.2s var(--ease);
}
@keyframes quoteDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.quote-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.quote-drawer-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.quote-drawer-header h2 { margin: 0; font-size: 1.15rem; }
.quote-drawer-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s var(--ease);
}
.quote-drawer-close:hover { border-color: var(--color-black); }

.quote-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}
.quote-empty {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 30px 0;
}

.quote-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.quote-item-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.quote-item-info { flex: 1 1 auto; min-width: 0; }
.quote-item-brand {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 2px;
}
.quote-item-name {
  font-size: 0.86rem;
  font-weight: 500;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-item-sku {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 0;
}
.quote-item-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: color 0.12s var(--ease);
}
.quote-item-remove:hover { color: var(--color-black); }

.quote-drawer-footer {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--border);
}
.quote-drawer-note {
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.quote-send-btn { width: 100%; justify-content: center; }
.quote-send-btn.is-disabled {
  background: var(--bg-alt);
  color: var(--ink-soft);
  pointer-events: none;
}

/* estado del botón "Agregar a mi cotización" dentro de la ficha, una
   vez que el modelo ya está en la lista */
.btn-primary.is-added {
  background: var(--color-white);
  color: var(--success);
  border-color: var(--success);
}
.btn-primary.is-added:hover { background: rgba(0, 132, 61, 0.06); }

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-white);
  padding: 10px 14px;
  z-index: 200;
}
.skip-link:focus { left: 10px; top: 10px; }