/* MICHEMICALDATALAB — CATÁLOGO V2 (preview) — capa visual aislada
   ------------------------------------------------------------------------
   Se carga JUNTO a /home-v2.css (sin duplicar tokens/header/fluid/tech bar/WhatsApp — se
   reutilizan tal cual, ya aprobados en producción). Este archivo solo añade lo que el Home
   V2 no tiene: cabecera de catálogo, buscador, chips de categoría, y el re-skin de
   productCard() para #catalogGrid (misma técnica ya aprobada para #featuredGrid en
   home-v2.css, líneas 451-542, aplicada aquí a un contenedor distinto).

   NO se modifica /styles.css ni /home-v2.css — cero riesgo de regresión en /catalogo.html
   (producción) ni en / (Home V2, ya aprobado y en vivo). */

/* ============ SECCIÓN INTRO — mismo patrón "sección opaca sin z-index propio" que
   .pf-story/.pf-featured-section (ver home-v2.css) — evita repetir el bug ya corregido en
   etapas anteriores (fondo opaco + z-index en el MISMO elemento tapando grid/fluid). ============ */
.cv2-intro {
  position: relative;
  padding: 140px 56px 48px;
}
.cv2-intro::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: #fbfaf4;
  pointer-events: none;
}
.cv2-intro-inner {
  position: relative; z-index: 4;
  max-width: 760px;
}
.cv2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); opacity: .78; margin: 0 0 14px;
}
.cv2-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(192, 254, 4); }
.cv2-intro h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.02; color: var(--ink); margin: 0 0 16px;
}
.cv2-intro-lead {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px; line-height: 1.6;
  color: var(--ink); max-width: 58ch; margin: 0;
}

/* ============ TOOLBAR — buscador + chips de categoría ============ */
.cv2-toolbar {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  margin: 32px 0 8px; padding: 0 56px;
}
.cv2-search {
  width: 100%; min-width: 0; min-height: 48px;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 20px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.cv2-search::placeholder { color: var(--muted); opacity: .8; }
.cv2-search:focus-visible {
  border-color: rgb(192, 254, 4); box-shadow: 0 0 0 3px rgba(192, 254, 4, .35);
}
.cv2-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
.cv2-pills .pill {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid var(--line);
  border-radius: 999px; min-height: 38px; padding: 0 16px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cv2-pills .pill:hover { border-color: rgba(10,14,20,.28); }
.cv2-pills .pill:focus-visible { outline: 2px solid rgb(192, 254, 4); outline-offset: 2px; }
.cv2-pills .pill.active {
  background: rgb(192, 254, 4); color: rgb(0, 0, 0); border-color: transparent;
  font-weight: 700; /* estado activo identificable por peso, no solo por color */
}

/* ============ GRID DE PRODUCTOS — misma técnica ya aprobada de .pf-featured-grid,
   aplicada a #catalogGrid, con minmax(0,1fr) para eliminar el overflow horizontal medido
   en el catálogo actual (causa real: grid-template-columns:repeat(N,1fr) SIN minmax daba a
   cada columna un mínimo implícito = min-content de la card; con .card-actions:flex-shrink:0
   (necesario para que "Ver oferta"/"Agregar" no partan en 2 líneas) ese mínimo supera el
   ancho disponible de la columna a 1024px → la columna crece, la grilla y la página
   desbordan horizontalmente ~92px, medido en la auditoría previa). minmax(0,1fr) permite que
   la columna se encoja por debajo de ese mínimo (el contenido interno ya envuelve/trunca
   antes de forzar overflow de página). ============ */
.cv2-grid-section {
  position: relative;
  padding: 24px 56px 64px;
}
.cv2-grid-inner { position: relative; z-index: 4; }
#catalogGrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
#catalogGrid .product-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
#catalogGrid .product-media {
  position: relative; aspect-ratio: 16/10; background: #f1f0e9;
  display: flex; align-items: center; justify-content: center;
}
#catalogGrid .product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#catalogGrid .product-media .fallback-icon {
  display: none;
  font-family: var(--font-label); font-size: 22px; letter-spacing: .04em; color: var(--muted);
}
#catalogGrid .product-media.empty .fallback-icon,
#catalogGrid .product-media.broken .fallback-icon { display: block; }
#catalogGrid .product-media.empty img,
#catalogGrid .product-media.broken img { display: none; }

#catalogGrid .card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 24px; }
#catalogGrid .badge.single {
  display: inline-block;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
#catalogGrid h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px;
}
#catalogGrid .card-text {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0;
}
#catalogGrid .feature-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
}
#catalogGrid .feature-list li { padding-left: 14px; position: relative; }
#catalogGrid .feature-list li::before { content: "—"; position: absolute; left: 0; opacity: .5; }

#catalogGrid .price-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
}
#catalogGrid .price {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink);
  min-width: 0; overflow-wrap: break-word;
}
#catalogGrid .monthly { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink); margin-top: 2px; }

/* flex-shrink:0 (mismo fix ya aprobado en .pf-featured-grid .card-actions): evita que el
   botón "Ver oferta" parta en 2 líneas al encogerse el price-row. */
#catalogGrid .card-actions { display: flex; gap: 8px; flex-shrink: 0; }
#catalogGrid .btn {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; border: 1px solid transparent;
  display: inline-flex; align-items: center; cursor: pointer; transition: transform .15s ease; background: none;
  white-space: nowrap;
}
#catalogGrid .btn:hover { transform: translateY(-1px); }
/* Mismo CTA lima ya aprobado (Home V2, .pf-featured-grid .btn:not(.secondary)/.btn.secondary)
   aplicado a AMBOS botones ("Ver oferta" y "Agregar") — mismo tratamiento, no inventado. */
#catalogGrid .btn.secondary,
#catalogGrid .btn:not(.secondary) {
  background: rgb(192, 254, 4); color: rgb(0, 0, 0); border-radius: 6px;
  transition: background .2s ease, transform .15s ease;
}
#catalogGrid .btn.secondary:hover,
#catalogGrid .btn:not(.secondary):hover { background: rgb(170, 238, 0); }

.cv2-empty-state, #catalogGrid .empty-state {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 14px; color: var(--muted); text-align: center; padding: 40px 0;
}
#catalogGrid .empty-state strong { display: block; font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 6px; }

/* ============ CIERRE — sin warp, sin escena nueva; solo un remate simple coherente con el
   lenguaje Home V2 (fondo body.pf ya continúa, tech bar y WhatsApp ya son globales/fixed). ============ */
.cv2-close {
  position: relative;
  padding: 48px 56px 96px;
  text-align: center;
}
.cv2-close-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink);
}
.cv2-close-line {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
}

/* ============ SEGURIDAD 320px — el header actual del catálogo (.topbar) mostró
   superposición a 320px; esta página usa el header nuevo (.pf-header/.pf-bar), que NO se
   había validado antes a este ancho exacto. Como medida defensiva (sin tocar home-v2.css,
   que ya está en producción), se oculta el texto de marca por debajo del breakpoint del logo
   móvil, dejando solo la marca "M|D" + carrito + toggle — garantiza cero solapamiento sin
   depender de una medición de píxeles que no se pudo hacer en navegador real. ============ */
@media (max-width: 400px) {
  .pf-brandname { display: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  .cv2-intro { padding: 120px 24px 40px; }
  .cv2-toolbar { padding: 0 24px; grid-template-columns: 1fr; }
  .cv2-pills { justify-content: flex-start; }
  .cv2-grid-section { padding: 24px 24px 56px; }
  #catalogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv2-close { padding: 40px 24px 80px; }
}
@media (max-width: 640px) {
  #catalogGrid { grid-template-columns: minmax(0, 1fr); }
  .cv2-intro h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}