/* ==========================================================================
   PULIDO VISUAL — MODO CLARO (muestra: portada)
   Solo cambia acabados (colores, sombras, bordes, tipografía) del modo claro.
   No toca el HTML ni el orden de las secciones. Para deshacerlo basta con
   quitar el <link> a este archivo en index.html.
   ========================================================================== */

html[data-theme="light"] {
  /* Colores oficiales (manual "Uso Sistema de Colores – Fralca", Marketing 2025):
     azul #0047BA, verde #00CE7C, negro FRALCA #151D29; derivados #0B3272, #1E5DD1.
     Regla del manual: sobre fondo verde el texto va en negro FRALCA. */
  --px-azul: #0047BA;
  --px-azul-profundo: #0B3272;
  --px-azul-claro: #1E5DD1;
  --px-verde: #00CE7C;
  --px-verde-profundo: #00A866;
  --px-tinta: #151D29;
  --px-texto: #3d4a66;
  --px-borde: #e2e8f3;
  --px-tinte-azul: #edf3fc;
  --px-tinte-verde: #e6faf2;
  --px-tinte-acero: #eef1f6;
  --px-radio: 18px;
  /* Sombras en capas: suaves de cerca, difusas de lejos */
  --px-sombra-1: 0 1px 2px rgba(21, 29, 41, 0.05), 0 4px 14px rgba(21, 29, 41, 0.06);
  --px-sombra-2: 0 2px 4px rgba(21, 29, 41, 0.06), 0 14px 34px rgba(21, 29, 41, 0.12);

  --bg-body: #f5f7fb;
  --border-color: #e2e8f3;
}

/* ─── Banner principal ────────────────────────────────────────────────── */
html[data-theme="light"] .promo-banner-fx {
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 45%),
    radial-gradient(90% 120% at 100% 100%, rgba(0, 206, 124, 0.22) 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px),
    linear-gradient(125deg, var(--px-azul-profundo) 0%, var(--px-azul) 48%, var(--px-azul-claro) 100%);
  box-shadow: 0 24px 50px -18px rgba(21, 48, 143, 0.55);
}
html[data-theme="light"] .promo-banner-fx::after { display: none; }

html[data-theme="light"] .promo-banner-center h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: 2.9rem;
}
html[data-theme="light"] .promo-banner-center h2 span { color: #00CE7C; }
html[data-theme="light"] .promo-banner-center p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 460px;
  margin: 0 auto;
}

html[data-theme="light"] .promo-banner-left {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border-radius: 18px;
}
html[data-theme="light"] .badge-semana { letter-spacing: 0.14em; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
html[data-theme="light"] .count-products-fx { font-weight: 800; letter-spacing: -0.03em; text-shadow: none; }
html[data-theme="light"] .desc-products-fx { font-weight: 600; letter-spacing: 0.06em; }
html[data-theme="light"] .desc-products-fx span { color: #00CE7C; }   /* verde original (vuelve el 26-oct-2026) */

/* Vectores decorativos: más finos y con brillo de vidrio */
html[data-theme="light"] .banner-glass-vector {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 30px rgba(9, 22, 70, 0.28);
}
html[data-theme="light"] .banner-profile-vector {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ─── Tarjetas superpuestas bajo el banner ────────────────────────────── */
html[data-theme="light"] .cat-card-fx {
  border-radius: var(--px-radio);
  border: 1px solid var(--px-borde);
  padding: 18px 18px 20px;
  box-shadow: var(--px-sombra-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
html[data-theme="light"] .cat-card-fx:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 71, 186, 0.35);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .cat-card-title-fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--px-tinta);
  margin-bottom: 14px;
}
/* Flecha que invita a entrar */
html[data-theme="light"] .cat-card-title-fx::after {
  content: "\2192";
  font-size: 1rem;
  color: var(--px-azul);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--px-tinte-azul);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
html[data-theme="light"] .cat-card-fx:hover .cat-card-title-fx::after {
  transform: translateX(3px);
  background: var(--px-azul);
  color: #fff;
}
/* Recuadros de imagen: tonos claros coordinados en lugar de pastel saturado */
html[data-theme="light"] .cat-card-img-box-fx {
  height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(21, 29, 41, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .bg-coral-fx  { background: linear-gradient(160deg, #f4f8ff 0%, #dfe9ff 100%); }
html[data-theme="light"] .bg-pink-fx   { background: linear-gradient(160deg, #f6f8fb 0%, #e3e8f0 100%); }
html[data-theme="light"] .bg-blue-fx   { background: linear-gradient(160deg, #f1f5ff 0%, #d9e4ff 100%); }
html[data-theme="light"] .bg-yellow-fx { background: linear-gradient(160deg, #f3fbf7 0%, #d9f2e5 100%); }
html[data-theme="light"] .cat-card-img-box-fx .visual-fitting { color: var(--px-azul); }
html[data-theme="light"] .cat-card-img-box-fx .visual-service { color: var(--px-verde); }
html[data-theme="light"] .cat-card-img-box-fx .visual-glass-clear {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(170, 196, 255, 0.55) 100%);
  border: 1.5px solid rgba(0, 71, 186, 0.35);
  box-shadow: 0 12px 24px rgba(0, 71, 186, 0.18);
}

/* ─── Ofertas FRALCA ──────────────────────────────────────────────────── */
html[data-theme="light"] .promo-fx-card {
  border-radius: var(--px-radio);
  border: 1px solid transparent;
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .promo-fx-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .promo-card-blue {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 50%),
    linear-gradient(130deg, var(--px-azul-profundo) 0%, var(--px-azul) 60%, var(--px-azul-claro) 100%);
}
/* El violeta no pertenece a la marca: pasa al verde FRALCA */
html[data-theme="light"] .promo-card-purple {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 50%),
    linear-gradient(130deg, var(--px-verde-profundo) 0%, var(--px-verde) 70%, #24CE7B 100%);
}
/* Sobre el verde oficial el texto va en negro FRALCA */
html[data-theme="light"] .promo-card-purple .promo-brand-label,
html[data-theme="light"] .promo-card-purple .promo-brand-label span,
html[data-theme="light"] .promo-card-purple .promo-fx-headline { color: var(--px-tinta); text-shadow: none; }
html[data-theme="light"] .promo-card-purple .promo-wm-left { color: var(--px-tinta); opacity: 0.08; }
html[data-theme="light"] .promo-card-purple .promo-compra-btn {
  background: var(--px-tinta);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(21, 29, 41, 0.25);
}
html[data-theme="light"] .promo-countdown-badge {
  background: #fff;
  color: var(--px-verde-profundo);
  box-shadow: 0 4px 10px rgba(21, 29, 41, 0.15);
}

/* ─── Descubre: misma familia de tonos para las cinco tarjetas ────────── */
html[data-theme="light"] .descubre-card {
  border-radius: var(--px-radio);
  border: 1px solid var(--px-borde);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .descubre-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 186, 0.3);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .descubre-fachadas { background: linear-gradient(150deg, #ffffff 0%, #edf3fc 55%, #dbe7fb 100%); border-color: var(--px-borde); }
html[data-theme="light"] .descubre-fachadas .descubre-headline { color: var(--px-tinta); letter-spacing: -0.01em; }
html[data-theme="light"] .descubre-banos      { background: linear-gradient(150deg, #ffffff 0%, var(--px-tinte-verde) 100%); border-color: var(--px-borde); }
html[data-theme="light"] .descubre-herrajes   { background: linear-gradient(150deg, #ffffff 0%, var(--px-tinte-acero) 100%); border-color: var(--px-borde); }
html[data-theme="light"] .descubre-herrajes .oster-brand { color: var(--px-tinta); }
html[data-theme="light"] .descubre-ventanas { background: linear-gradient(150deg, #ffffff 0%, var(--px-tinte-azul) 100%); border-color: var(--px-borde); }
html[data-theme="light"] .descubre-ventanas .samsung-brand { color: var(--px-azul); }
html[data-theme="light"] .descubre-ventanas .samsung-sub { color: var(--px-texto); }
html[data-theme="light"] .descubre-wide-banner {
  border-radius: var(--px-radio);
  border: none;
  box-shadow: 0 18px 40px -16px rgba(21, 48, 143, 0.5);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    linear-gradient(120deg, var(--px-azul-profundo) 0%, var(--px-azul) 55%, var(--px-azul-claro) 100%);
}

/* ─── Categorías: tarjetas blancas en lugar de bloques amarillos ──────── */
html[data-theme="light"] .visual-cat-graphic.bg-yellow-soft {
  background: linear-gradient(165deg, #ffffff 0%, #f1f5ff 100%);
  border: 1px solid var(--px-borde);
  border-radius: 22px;
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .visual-cat-card:hover .visual-cat-graphic {
  border-color: rgba(0, 71, 186, 0.35);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .visual-cat-label {
  background: transparent;
  color: var(--px-tinta);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  bottom: 10px;
}
html[data-theme="light"] .visual-cat-slide-btn {
  box-shadow: var(--px-sombra-1);
  border-color: var(--px-borde);
  color: var(--px-tinta);
}

/* ─── Celular: el título vuelve al tamaño adaptable de la web ─────────── */
@media (max-width: 768px) {
  html[data-theme="light"] .promo-banner-center h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  html[data-theme="light"] .cat-card-title-fx { font-size: 0.95rem; gap: 6px; }
  html[data-theme="light"] .cat-card-title-fx::after { width: 24px; height: 24px; flex-shrink: 0; }
}


/* ==========================================================================
   CATÁLOGO (modo claro)
   ========================================================================== */

/* ─── Barra de categorías (píldoras) ──────────────────────────────────── */
html[data-theme="light"] .control-bar {
  border-radius: var(--px-radio);
  border-color: var(--px-borde);
  box-shadow: var(--px-sombra-1);
  padding: 14px 16px;
}
html[data-theme="light"] .category-pill {
  background: #fff;
  border: 1px solid var(--px-borde);
  color: var(--px-texto);
  font-weight: 600;
  padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .category-pill:hover {
  background: var(--px-tinte-azul);
  border-color: rgba(0, 71, 186, 0.25);
  color: var(--px-azul);
}
html[data-theme="light"] .category-pill.active {
  background: var(--px-azul);
  border-color: var(--px-azul);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 71, 186, 0.45);
}

/* ─── Filtros laterales ───────────────────────────────────────────────── */
html[data-theme="light"] .filters-sidebar {
  border-radius: var(--px-radio);
  border-color: var(--px-borde);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .filter-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--px-texto);
  margin-bottom: 10px;
}
html[data-theme="light"] .filters-sidebar .filter-option {
  font-size: 0.82rem;
  color: var(--px-texto);
  border-radius: 10px;
  padding: 7px 10px;
}
html[data-theme="light"] .filters-sidebar .filter-option:hover {
  background: var(--px-tinte-azul);
  color: var(--px-azul);
}
/* Opción elegida: tinte azul con borde, más ligera que el bloque azul macizo */
html[data-theme="light"] .filters-sidebar .filter-option.activa {
  background: var(--px-tinte-azul);
  color: var(--px-azul);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--px-azul);
}
html[data-theme="light"] .filters-sidebar .filter-option small {
  background: #f1f4f9;
  color: #6b7891;
  font-weight: 600;
}
html[data-theme="light"] .filters-sidebar .filter-option.activa small {
  background: #fff;
  color: var(--px-azul);
}

/* ─── Resumen y paginación ────────────────────────────────────────────── */
html[data-theme="light"] .catalogo-resumen { color: #6b7891; }
html[data-theme="light"] .catalogo-resumen strong { color: var(--px-tinta); }
html[data-theme="light"] .pagina-btn {
  border-color: var(--px-borde);
  box-shadow: var(--px-sombra-1);
  color: var(--px-tinta);
}
html[data-theme="light"] .pagina-btn:hover:not([disabled]) {
  background: var(--px-tinte-azul);
  border-color: rgba(0, 71, 186, 0.3);
}

/* ─── Tarjeta de producto ─────────────────────────────────────────────── */
html[data-theme="light"] .product-card {
  border-radius: var(--px-radio);
  border: 1px solid var(--px-borde);
  box-shadow: var(--px-sombra-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
html[data-theme="light"] .product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 186, 0.3);
  box-shadow: var(--px-sombra-2);
}
/* Recuadro de imagen claro (antes azul marino) */
html[data-theme="light"] .product-image-wrapper {
  background: linear-gradient(170deg, #fbfcfe 0%, #eef2f8 100%);
  border-bottom: 1px solid var(--px-borde);
}
/* Los dibujos técnicos ya tienen fondo blanco: sin caja extra, más grandes */
html[data-theme="light"] .product-image-wrapper .producto-foto.es-dibujo {
  max-width: 92%;
  max-height: 90%;
  box-shadow: 0 1px 2px rgba(21, 29, 41, 0.06);
  border: 1px solid #e8edf5;
  border-radius: 12px;
}
html[data-theme="light"] .product-image-wrapper .producto-foto:not(.es-dibujo) {
  box-shadow: 0 10px 24px -10px rgba(21, 29, 41, 0.35);
}
/* Etiqueta de serie: blanca y discreta */
html[data-theme="light"] .product-tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--px-azul);
  border: 1px solid var(--px-borde);
  box-shadow: 0 2px 6px rgba(21, 29, 41, 0.08);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  top: 12px;
  left: 12px;
}
html[data-theme="light"] .product-info { padding: 16px 18px 18px; }
html[data-theme="light"] .product-meta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7a879f;
}
html[data-theme="light"] .product-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--px-tinta);
  line-height: 1.3;
}
html[data-theme="light"] .product-card:hover .product-name { color: var(--px-azul); }
/* Código: como una pequeña ficha técnica */
html[data-theme="light"] .product-code {
  display: inline-block;
  max-width: 100%;
  background: #f3f6fa;
  border: 1px solid #e6ebf3;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  color: #55627c;
}
html[data-theme="light"] .product-price-row {
  border-top: 1px solid #edf1f7;
  margin-top: 14px;
  padding-top: 14px;
}
html[data-theme="light"] .product-cotizar-link {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--px-azul);
}
html[data-theme="light"] .product-cotizar-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.2s ease;
}
html[data-theme="light"] .product-cotizar-link:hover { text-decoration: none; }
html[data-theme="light"] .product-cotizar-link:hover::after { transform: translateX(3px); }
html[data-theme="light"] .card-action-btn {
  background: linear-gradient(160deg, #24CE7B 0%, var(--px-verde) 100%);
  border-radius: 12px;
  box-shadow: 0 6px 14px -4px rgba(0, 206, 124, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .card-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -6px rgba(0, 206, 124, 0.6);
}

/* Ilustraciones de los productos sin foto, recoloreadas para fondo claro */
html[data-theme="light"] .product-image-wrapper .visual-glass-clear,
html[data-theme="light"] .product-image-wrapper .visual-glass-fume {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(170, 196, 255, 0.5) 100%);
  border: 1.5px solid rgba(0, 71, 186, 0.3);
  box-shadow: 0 12px 24px rgba(0, 71, 186, 0.15);
}
html[data-theme="light"] .product-image-wrapper .visual-glass-fume {
  background: linear-gradient(135deg, rgba(120, 132, 156, 0.55) 0%, rgba(60, 72, 96, 0.55) 100%);
}
html[data-theme="light"] .product-image-wrapper .visual-fitting {
  color: #9fb3dd;
  filter: none;
}
html[data-theme="light"] .product-image-wrapper .visual-service { color: #9fb3dd; }

/* ─── Catálogo en celular: tarjetas compactas (2 columnas) ────────────── */
@media (max-width: 768px) {
  html[data-theme="light"] .product-info { padding: 10px 12px 12px; }
  html[data-theme="light"] .product-meta { font-size: 0.58rem; letter-spacing: 0.04em; margin-bottom: 4px; }
  html[data-theme="light"] .product-name { font-size: 0.88rem; }
  html[data-theme="light"] .product-code { font-size: 0.64rem; padding: 2px 6px; }
  html[data-theme="light"] .product-price-row { margin-top: 8px; padding-top: 8px; }
  html[data-theme="light"] .product-cotizar-link { font-size: 0.76rem; }
  html[data-theme="light"] .product-cotizar-link::after { margin-left: 3px; }
  html[data-theme="light"] .product-tag { top: 8px; left: 8px; font-size: 0.6rem; }
}


/* ==========================================================================
   FICHA DE PRODUCTO (ventana) — modo claro
   ========================================================================== */
html[data-theme="light"] .product-modal {
  border-radius: 22px;
  border: 1px solid var(--px-borde);
  box-shadow: 0 30px 70px -20px rgba(21, 29, 41, 0.45);
}
/* Lado de la imagen: claro en lugar de azul marino */
html[data-theme="light"] .modal-image-side {
  background:
    repeating-linear-gradient(0deg, rgba(0, 71, 186, 0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0, 71, 186, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(165deg, #fbfcfe 0%, #eef2f8 100%);
  border-right: 1px solid var(--px-borde);
}
html[data-theme="light"] .modal-image-side .producto-foto.es-dibujo {
  box-shadow: 0 10px 30px -12px rgba(21, 29, 41, 0.25);
  border: 1px solid #e8edf5;
}
html[data-theme="light"] .modal-content-side { padding: 36px 30px 30px; }
html[data-theme="light"] .modal-category {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
html[data-theme="light"] .modal-name {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--px-tinta);
  margin-bottom: 18px;
}
/* Ficha técnica: tabla limpia con líneas finas */
html[data-theme="light"] .modal-specs {
  background: #fff;
  border: 1px solid var(--px-borde);
  border-radius: 14px;
  padding: 4px 16px;
  gap: 0;
}
html[data-theme="light"] .spec-row {
  padding: 9px 0;
  border-bottom: 1px solid #eef1f6;
  font-size: 0.84rem;
}
html[data-theme="light"] .spec-row:last-child { border-bottom: none; }
html[data-theme="light"] .spec-label { color: #6b7891; }
html[data-theme="light"] .spec-val { color: var(--px-tinta); font-weight: 600; text-align: right; }
/* Pie de la ficha: aviso arriba y botón ancho, en una sola línea */
html[data-theme="light"] .modal-price-row {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border-top: none;
  padding-top: 0;
}
html[data-theme="light"] .modal-cotizar-nota {
  max-width: none;
  font-size: 0.82rem;
  color: var(--px-texto);
  background: var(--px-tinte-azul);
  border-radius: 10px;
  padding: 10px 12px;
}
html[data-theme="light"] .modal-cotizar-nota i { color: var(--px-azul); margin-right: 4px; }
html[data-theme="light"] .modal-add-btn {
  justify-content: center;
  height: 48px;
  font-size: 0.95rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #24CE7B 0%, var(--px-verde) 100%);
  box-shadow: 0 10px 20px -8px rgba(0, 206, 124, 0.6);
  white-space: nowrap;
}
html[data-theme="light"] .modal-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -10px rgba(0, 206, 124, 0.65);
}
html[data-theme="light"] .modal-close-btn {
  background: #fff;
  border: 1px solid var(--px-borde);
  color: var(--px-texto);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .modal-close-btn:hover { color: var(--px-azul); border-color: rgba(0, 71, 186, 0.3); }


/* ==========================================================================
   CARRITO «MI COTIZACIÓN» — modo claro
   ========================================================================== */
html[data-theme="light"] .cart-drawer {
  border-left: 1px solid var(--px-borde);
  box-shadow: -30px 0 60px -30px rgba(21, 29, 41, 0.35);
}
html[data-theme="light"] .cart-drawer-header { padding: 20px 24px; border-bottom-color: var(--px-borde); }
html[data-theme="light"] .cart-drawer-header h3 {
  font-family: 'Outfit', sans-serif;
  color: var(--px-tinta);
  letter-spacing: -0.01em;
}
html[data-theme="light"] .cart-drawer-header h3 i { color: var(--px-azul); }
html[data-theme="light"] .cart-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f6fa;
  color: var(--px-texto);
  transition: background 0.2s ease, color 0.2s ease;
}
html[data-theme="light"] .cart-close-btn:hover { background: var(--px-tinte-azul); color: var(--px-azul); }

html[data-theme="light"] .cart-item {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom-color: #eef1f6;
}
html[data-theme="light"] .cart-item-visual {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(165deg, #fbfcfe 0%, #eef2f8 100%);
  border-color: var(--px-borde);
}
html[data-theme="light"] .cart-item-name {
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--px-tinta);
}
/* Código y unidad: gris discreto en lugar de verde */
html[data-theme="light"] .cart-item-price {
  color: #6b7891;
  font-weight: 600;
  font-size: 0.76rem;
  margin-bottom: 10px;
}
html[data-theme="light"] .qty-control {
  border-color: var(--px-borde);
  border-radius: 10px;
  background: #fff;
}
html[data-theme="light"] .qty-btn {
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--px-azul);
  font-size: 1rem;
  transition: background 0.2s ease;
}
html[data-theme="light"] .qty-btn:hover { background: var(--px-tinte-azul); }
html[data-theme="light"] .qty-val {
  min-width: 34px;
  text-align: center;
  padding: 0 4px;
  color: var(--px-tinta);
  border-left: 1px solid #eef1f6;
  border-right: 1px solid #eef1f6;
  line-height: 32px;
}
/* Papelera: gris y discreta; roja solo al pasar el ratón */
html[data-theme="light"] .cart-item-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #a3adc2;
  transition: background 0.2s ease, color 0.2s ease;
}
html[data-theme="light"] .cart-item-delete:hover { background: #fdecec; color: #dc2626; }

html[data-theme="light"] .cart-drawer-footer {
  background: #fff;
  border-top-color: var(--px-borde);
  box-shadow: 0 -12px 30px -20px rgba(21, 29, 41, 0.25);
}
html[data-theme="light"] .cart-summary-row span:first-child { color: var(--px-texto); }
html[data-theme="light"] .cart-summary-cantidad { color: var(--px-tinta); }
html[data-theme="light"] .cart-summary-nota {
  background: var(--px-tinte-azul);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--px-texto);
}
html[data-theme="light"] .cart-summary-nota i { color: var(--px-azul); }
html[data-theme="light"] .checkout-btn {
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(160deg, #24CE7B 0%, var(--px-verde) 100%);
  box-shadow: 0 12px 24px -10px rgba(0, 206, 124, 0.6);
}
html[data-theme="light"] .checkout-btn:hover { transform: translateY(-1px); }


/* ==========================================================================
   FORMULARIO DE SOLICITUD Y AVISOS (ventanas de SweetAlert) — modo claro
   ========================================================================== */
html[data-theme="light"] .swal2-popup {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 0 30px 70px -20px rgba(21, 29, 41, 0.45);
}
html[data-theme="light"] .swal2-popup.swal2-toast {
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .swal2-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--px-tinta);
  font-size: 1.55rem;
  line-height: 1.2;
}
html[data-theme="light"] .swal2-html-container { color: var(--px-texto); }
html[data-theme="light"] .cotizacion-intro {
  background: var(--px-tinte-azul);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin: 0 auto 8px;
  max-width: 340px;
}
/* Campos: mismo ancho, esquinas suaves y foco azul */
html[data-theme="light"] .swal2-popup .swal2-input,
html[data-theme="light"] .swal2-popup .swal2-textarea {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  margin: 10px auto 0;
  display: block;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--px-tinta);
  border: 1px solid #d6deeb;
  border-radius: 12px;
  background: #fbfcfe;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
html[data-theme="light"] .swal2-popup .swal2-input { height: 48px; padding: 0 14px; }
html[data-theme="light"] .swal2-popup .swal2-textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
html[data-theme="light"] .swal2-popup .swal2-input::placeholder,
html[data-theme="light"] .swal2-popup .swal2-textarea::placeholder { color: #94a0b8; }
html[data-theme="light"] .swal2-popup .swal2-input:focus,
html[data-theme="light"] .swal2-popup .swal2-textarea:focus {
  border-color: var(--px-azul);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 71, 186, 0.12);
}
html[data-theme="light"] .swal2-validation-message {
  background: #fdf2f2;
  color: #b42318;
  border-radius: 10px;
  margin: 12px 0 0;
}
/* Botones: verde de marca para enviar, contorno para cancelar */
html[data-theme="light"] .swal2-actions { gap: 10px; margin-top: 20px; }
html[data-theme="light"] .swal2-styled { margin: 0; }
html[data-theme="light"] .swal2-styled.swal2-confirm {
  background-image: linear-gradient(160deg, #24CE7B 0%, var(--px-verde) 100%);
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  box-shadow: 0 10px 20px -8px rgba(0, 206, 124, 0.6);
}
html[data-theme="light"] .swal2-styled.swal2-cancel {
  background: #fff !important;
  color: var(--px-texto);
  border: 1px solid #d6deeb;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
}
html[data-theme="light"] .swal2-styled.swal2-cancel:hover { background: #f3f6fa !important; }
html[data-theme="light"] .swal2-styled:focus { box-shadow: 0 0 0 4px rgba(0, 71, 186, 0.15); }
html[data-theme="light"] .btn-whatsapp-pedido { border-radius: 12px; box-shadow: 0 10px 20px -8px rgba(37, 211, 102, 0.55); }


/* ==========================================================================
   CATÁLOGOS, SERVICIOS Y PREGUNTAS FRECUENTES — modo claro
   ========================================================================== */
html[data-theme="light"] .catalogo-card {
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .catalogo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 71, 186, 0.3);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .policy-card {
  background: #fff;
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .policy-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 186, 0.3);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .policy-icon-circle {
  border-radius: 16px;
  background: linear-gradient(160deg, var(--px-tinte-azul) 0%, #dbe7fb 100%);
  color: var(--px-azul);
  box-shadow: inset 0 0 0 1px rgba(0, 71, 186, 0.12);
}
html[data-theme="light"] .policy-card-title { color: var(--px-tinta); letter-spacing: -0.01em; }
html[data-theme="light"] .policy-card-btn {
  border: 1px solid rgba(0, 71, 186, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  background: #fff;
  color: var(--px-azul);
}
html[data-theme="light"] .policy-card:hover .policy-card-btn {
  background: var(--px-azul);
  border-color: var(--px-azul);
  color: #fff;
}
/* Preguntas frecuentes */
html[data-theme="light"] .faq-section .credit-desc { color: #6b7891; }
html[data-theme="light"] .faq-item {
  border: 1px solid var(--px-borde);
  border-radius: 14px;
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .faq-item:hover { border-color: rgba(0, 71, 186, 0.25); }
html[data-theme="light"] .faq-item.active {
  border-color: rgba(0, 71, 186, 0.35);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .faq-question { color: var(--px-tinta); }
html[data-theme="light"] .faq-question i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f3f6fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--px-texto);
  flex-shrink: 0;
  margin-left: 12px;
}
html[data-theme="light"] .faq-item.active .faq-question i { background: var(--px-tinte-azul); color: var(--px-azul); }
html[data-theme="light"] .faq-answer p { color: var(--px-texto); line-height: 1.65; }
/* La respuesta abierta tenía un tope de 500 px: en teléfonos pequeños o con letra
   grande una respuesta larga podía quedar cortada. */
.faq-item.active .faq-answer { max-height: 1500px; }
/* Textos que no deben partirse en dos líneas (p. ej. el RIF del pie) */
.sin-cortes { white-space: nowrap; }


/* ==========================================================================
   PIE DE PÁGINA — modo claro
   ========================================================================== */
/* Pie en negro FRALCA con el brillo azul y los acentos verdes de los fondos de Marketing */
html[data-theme="light"] .fralca-footer {
  background:
    radial-gradient(45% 140% at 100% 0%, rgba(0, 71, 186, 0.45) 0%, transparent 70%),
    radial-gradient(30% 90% at 0% 100%, rgba(0, 206, 124, 0.10) 0%, transparent 70%),
    #151D29;
}
html[data-theme="light"] .footer-col-title { letter-spacing: 0.02em; }
html[data-theme="light"] .footer-col-title::after { background: #00CE7C; width: 22px; }
html[data-theme="light"] .footer-col-links a { color: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .footer-col-links a:hover { color: #fff; }
html[data-theme="light"] .footer-slogan { color: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] .footer-bottom-bar { border-top-color: rgba(255, 255, 255, 0.16); }
html[data-theme="light"] .footer-copyright { color: rgba(255, 255, 255, 0.75); font-weight: 500; }


/* ==========================================================================
   MENÚ LATERAL DE CATEGORÍAS — modo claro
   ========================================================================== */
html[data-theme="light"] .categories-drawer { box-shadow: 30px 0 60px -30px rgba(21, 29, 41, 0.4); }
html[data-theme="light"] .categories-drawer-header {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    linear-gradient(125deg, var(--px-azul-profundo) 0%, var(--px-azul) 60%, var(--px-azul-claro) 100%);
}
html[data-theme="light"] .categories-drawer-header h3 { font-family: 'Outfit', sans-serif; letter-spacing: -0.01em; }
html[data-theme="light"] .sidebar-promo-box {
  border-radius: var(--px-radio);
  border: 1px solid var(--px-borde);
  box-shadow: var(--px-sombra-1);
  overflow: hidden;
}
html[data-theme="light"] .sidebar-categories-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--px-texto);
}
html[data-theme="light"] .sidebar-cat-item {
  background: #fff;
  border: 1px solid var(--px-borde);
  border-radius: 12px;
  color: var(--px-tinta);
  font-weight: 600;
}
html[data-theme="light"] .sidebar-cat-item:hover {
  background: var(--px-tinte-azul);
  border-color: rgba(0, 71, 186, 0.3);
  color: var(--px-azul);
  box-shadow: none;
}
html[data-theme="light"] .sidebar-cat-item i { color: #a3adc2; transition: transform 0.2s ease, color 0.2s ease; }
html[data-theme="light"] .sidebar-cat-item:hover i { color: var(--px-azul); transform: translateX(3px); }
html[data-theme="light"] .sidebar-cat-total {
  background: #f1f4f9;
  color: #6b7891;
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
}


/* ==========================================================================
   TÍTULO DE PREGUNTAS FRECUENTES — modo claro
   (La cabecera y el pie vuelven a ocupar todo el ancho de la pantalla.)
   ========================================================================== */
html[data-theme="light"] .faq-section .credit-title {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}


/* ==========================================================================
   ILUSTRACIONES 3D (todos los temas): portada y menú de categorías.
   Los dibujos están en /img/ilustraciones/ (vienen de la propuesta de Stitch).
   ========================================================================== */
.ilus-3d {
  display: block;
  height: auto;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
.ilus-banner {
  width: 260px;
  filter: drop-shadow(0 18px 24px rgba(8, 20, 70, 0.35));
}
.promo-banner-right { height: auto; min-height: 140px; }
.ilus-tarjeta {
  width: 80%;
  max-width: 180px;
  transition: transform 0.3s ease;
}
.cat-card-fx:hover .ilus-tarjeta { transform: translateY(-4px) scale(1.04); }
.promo-ilus {
  position: absolute;
  right: 18px;
  bottom: 10px;
  height: 68%;
  width: auto;
  max-width: none;
  z-index: 0;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25));
  transition: transform 0.3s ease;
}
.promo-fx-card:hover .promo-ilus { transform: translateY(-4px) rotate(-2deg); }
.ilus-fachada { width: 100%; max-width: 380px; margin: 0 auto; }
.ilus-mampara { width: auto; height: 160px; margin: 0 auto; }
.ilus-mini { width: 90px; }
.ilus-franja {
  width: 220px;
  filter: drop-shadow(0 16px 22px rgba(8, 20, 70, 0.35));
}
@media (max-width: 768px) {
  .ilus-banner { width: 190px; }
  /* En el celular el texto va centrado: el dibujo queda al borde y tenue para no tapar el titular */
  .promo-ilus { right: -18px; bottom: -4px; height: 52%; opacity: 0.4; }
  .ilus-mampara { height: 130px; }
  .ilus-franja { width: 150px; }
}

/* Miniaturas del menú lateral (la lista crece; el recuadro promocional no debe encogerse) */
.sidebar-promo-box { flex-shrink: 0; }
.sidebar-cat-item { gap: 12px; }
.sidebar-cat-item span { flex: 1; min-width: 0; }
.sidebar-cat-mini {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(160deg, #f8fafc 0%, #e8eef8 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 29, 41, 0.06);
  transition: transform 0.2s ease;
}
.sidebar-cat-item:hover .sidebar-cat-mini { transform: scale(1.08); }
html[data-theme="dark"] .sidebar-cat-mini {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   ESLOGAN con el tratamiento de Marketing: mayúsculas, letra gruesa y
   «FUTURO» dentro de una caja verde (#00CE7C, verde corporativo).
   ========================================================================== */
.eslogan-marca {
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.eslogan-futuro {
  display: inline-block;
  background: #00CE7C;
  color: #ffffff;
  padding: 0 7px;
  border-radius: 3px;
  line-height: 1.5;
}
/* En el banner azul: debajo del texto, pequeño y blanco */
.promo-banner-fx .promo-banner-center p.eslogan-banner {
  margin-top: 16px;
  font-size: 0.82rem;
  color: #ffffff;
  opacity: 1;
}
/* En el pie (negro FRALCA) el eslogan va igual que en los fondos de Marketing */
html[data-theme="light"] .footer-slogan.eslogan-marca {
  font-size: 0.8rem;
  color: #ffffff;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .promo-banner-fx .promo-banner-center p.eslogan-banner { font-size: 0.72rem; letter-spacing: 0.04em; }
}


/* ==========================================================================
   BOTONES FLOTANTES sin el botón de tema (retirado): todo baja un puesto
   ========================================================================== */
.chat-fab-fx { bottom: 25px; }
.chat-prompt-bubble { bottom: 25px; }
.chat-window-fx { bottom: 85px; }
.floating-social-bar { bottom: 85px; }
@media (max-width: 768px) {
  .chat-fab-fx { bottom: 16px; }
  .chat-prompt-bubble { bottom: 20px; }
  .floating-social-bar { bottom: 72px; }
}


/* ==========================================================================
   Corrección (todos los temas): con la ficha, el carrito, el menú o un
   formulario abiertos, los
   botones flotantes (redes y chat) ya no tapan la ventana.
   ========================================================================== */
body:has(.modal-overlay.active) .floating-social-bar,
body:has(.modal-overlay.active) .chat-widget-container,
body:has(.cart-drawer.active) .floating-social-bar,
body:has(.cart-drawer.active) .chat-widget-container,
body:has(.chat-window-fx.active) .floating-social-bar,
body:has(.categories-drawer.active) .floating-social-bar,
body:has(.categories-drawer.active) .chat-widget-container,
body.swal2-shown:not(.swal2-toast-shown) .floating-social-bar,
body.swal2-shown:not(.swal2-toast-shown) .chat-widget-container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}


/* ==========================================================================
   BOTONES VERDES con el verde oficial: texto e íconos en negro FRALCA
   (regla del manual de colores: sobre fondo verde, letras negras)
   ========================================================================== */
html[data-theme="light"] .card-action-btn,
html[data-theme="light"] .card-action-btn i,
html[data-theme="light"] .modal-add-btn,
html[data-theme="light"] .modal-add-btn i,
html[data-theme="light"] .checkout-btn,
html[data-theme="light"] .checkout-btn i,
html[data-theme="light"] .swal2-styled.swal2-confirm {
  color: #151D29;
}

/* ==========================================================================
   ENCABEZADO FIJO: se queda arriba al bajar por la página
   (--alto-encabezado lo calcula script.js; los enlaces del menú dejan ese espacio)
   ========================================================================== */
.fralca-header-wrapper {
  position: sticky;
  top: 0;
}
html {
  scroll-padding-top: calc(var(--alto-encabezado, 140px) + 12px);
}

/* Celular: al bajar, el encabezado se compacta a buscador + carrito y menú
   (la clase .compacto la pone script.js; en escritorio no se usa) */
@media (max-width: 768px) {
  .fralca-header-wrapper.compacto .header-main-bar {
    flex-wrap: nowrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .fralca-header-wrapper.compacto .header-brand-fx,
  .fralca-header-wrapper.compacto .header-rates-widget,
  .fralca-header-wrapper.compacto .header-time-widget,
  .fralca-header-wrapper.compacto .header-actions-container > :not(.cart-icon-box) {
    display: none;
  }
  .fralca-header-wrapper.compacto .header-search-container {
    flex: 1 1 0;
    min-width: 0;
  }
  .fralca-header-wrapper.compacto .header-actions-container {
    order: 5;
    margin-left: 0;
  }
}


/* ─── Catálogo en computadora: tarjetas compactas (24-oct-2026) ──────────
   Antes: 3 por fila y ~470 px de alto cada una (8 hileras por página).
   Ahora: 4 por fila (3 en pantallas medianas) y imagen más baja: 6 hileras. */
@media (min-width: 769px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  html[data-theme="light"] .product-image-wrapper { height: 150px; }
  .product-image-wrapper .product-visual { transform: scale(0.8); }
  html[data-theme="light"] .product-info { padding: 12px 14px 14px; }
  html[data-theme="light"] .product-meta { margin-bottom: 4px; }
  html[data-theme="light"] .product-name { font-size: 0.92rem; height: 2.4rem; margin-bottom: 6px; }
  html[data-theme="light"] .product-code { font-size: 0.68rem; }
  html[data-theme="light"] .product-price-row { margin-top: 10px; padding-top: 10px; }
  html[data-theme="light"] .product-cotizar-link { font-size: 0.8rem; }
  html[data-theme="light"] .card-action-btn { width: 36px; height: 36px; }
}
@media (min-width: 1100px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Filtros de arriba: píldoras de departamento y serie (24-oct-2026) ── */
html[data-theme="light"] .filtro-pildora {
  background: #fff;
  border-color: var(--px-borde);
  color: var(--px-texto);
}
html[data-theme="light"] .filtro-pildora small { color: #6b7891; }
html[data-theme="light"] .filtro-pildora:hover {
  background: var(--px-tinte-azul);
  border-color: rgba(0, 71, 186, 0.25);
  color: var(--px-azul);
}
html[data-theme="light"] .filtro-pildora.activa {
  background: var(--px-azul);
  border-color: var(--px-azul);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 71, 186, 0.45);
}
html[data-theme="light"] .filtro-pildora.activa small { color: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .filtro-mas-menu {
  border-color: var(--px-borde);
  box-shadow: var(--px-sombra-2);
}
html[data-theme="light"] .filtro-serie select { border-color: var(--px-borde); color: var(--px-texto); }


/* ─── Cómo cotizar en 4 pasos, Lo más cotizado y vidrio a medida — modo claro ─── */
html[data-theme="light"] .como-cotizar-titulo {
  letter-spacing: -0.02em;
  color: var(--px-tinta);
}
html[data-theme="light"] .como-paso {
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .como-paso-icono { background: var(--px-tinte-azul); color: var(--px-azul); }
html[data-theme="light"] .como-paso-icono b { background: var(--px-azul); }
html[data-theme="light"] .como-cotizar-btn { background: var(--px-azul); border-radius: 14px; }
html[data-theme="light"] .como-cotizar-btn:hover { background: var(--px-azul-profundo); }
html[data-theme="light"] .vidrio-medida { border-top-color: var(--px-borde); }
html[data-theme="light"] .vm-campo select,
html[data-theme="light"] .vm-campo input { border-color: var(--px-borde); }
html[data-theme="light"] .vm-lista li { background: var(--px-tinte-azul); }

/* ─── Filtros del catálogo: una sola barra ordenada (24-oct-2026) ─────────
   Departamento y Serie / Línea como desplegables con su etiqueta arriba y el total a la derecha.
   Reemplaza las píldoras en dos filas, que se veían desordenadas. */
html[data-theme="light"] .catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: #ffffff;
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra-1);
}
html[data-theme="light"] .filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 260px;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7891;
  white-space: normal;
  text-align: left;
  align-items: stretch;   /* .filtro-serie traía align-items: center */
}
html[data-theme="light"] .filtro-campo[hidden] { display: none; }
html[data-theme="light"] .filtro-campo select {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 9px 12px;
  border: 1px solid var(--px-borde);
  border-radius: 10px;
  background: #f8fafd;
  color: var(--px-tinta);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
html[data-theme="light"] .filtro-campo select:focus-visible {
  outline: 2px solid var(--px-azul);
  outline-offset: 1px;
}
html[data-theme="light"] .catalogo-filtros .catalogo-resumen {
  margin: 0 0 0 auto;
  padding-bottom: 9px;
  text-align: right;
}
@media (max-width: 768px) {
  html[data-theme="light"] .catalogo-filtros { padding: 12px; gap: 10px; }
  html[data-theme="light"] .filtro-campo { width: 100%; }
  html[data-theme="light"] .catalogo-filtros .catalogo-resumen { margin: 0; padding: 0; text-align: left; }
}


/* ==========================================================================
   TÍTULOS DE SECCIÓN UNIFICADOS (24-oct-2026)
   Un solo estilo para los h2 de la portada: Outfit 800, 2rem (1,6rem en celular),
   mayúscula inicial, color tinta. El subtítulo opcional va en gris.
   ========================================================================== */
html[data-theme="light"] .seccion-titulo,
html[data-theme="light"] .catalogos-title,
html[data-theme="light"] .descubre-title,
html[data-theme="light"] .ofertas-dia-title,
html[data-theme="light"] .destacados-mes-title,
html[data-theme="light"] .promo-fx-title,
html[data-theme="light"] .visual-categories-title,
html[data-theme="light"] .como-cotizar-titulo,
html[data-theme="light"] .locations-section .credit-title,
html[data-theme="light"] .faq-section .credit-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--px-tinta);
  margin: 0 0 6px;
}
html[data-theme="light"] .catalogos-sub,
html[data-theme="light"] .locations-section .credit-desc,
html[data-theme="light"] .faq-section .credit-desc {
  color: #5b6780;
}
@media (max-width: 768px) {
  html[data-theme="light"] .seccion-titulo,
  html[data-theme="light"] .catalogos-title,
  html[data-theme="light"] .descubre-title,
  html[data-theme="light"] .ofertas-dia-title,
  html[data-theme="light"] .destacados-mes-title,
  html[data-theme="light"] .promo-fx-title,
  html[data-theme="light"] .visual-categories-title,
  html[data-theme="light"] .como-cotizar-titulo,
  html[data-theme="light"] .locations-section .credit-title,
  html[data-theme="light"] .faq-section .credit-title {
    font-size: 1.6rem;
  }
}


/* ==========================================================================
   PORTADA DIVIDIDA (24-oct-2026): texto y buscador a la izquierda, foto real a la derecha.
   Reemplaza al banner azul de tres columnas (queda oculto en index.html).
   ========================================================================== */
.hero-promo-section { margin-bottom: 30px; }
.promo-banner-fx[hidden],
.categories-cards-grid-fx[hidden] { display: none; }

.portada-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 48px;
  align-items: center;
  padding: 40px 48px;
  background: #ffffff;
  border: 1px solid var(--px-borde);
  border-radius: 24px;
  box-shadow: var(--px-sombra-1);
}
.portada-etiqueta {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--px-azul);
}
.portada-titular {
  margin: 0 0 14px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--px-tinta);
}
.portada-apoyo {
  margin: 0 0 24px;
  max-width: 480px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #5b6780;
}
.portada-buscador {
  display: flex;
  max-width: 520px;
  height: 56px;
  background: #ffffff;
  border: 1.5px solid var(--px-borde);
  border-radius: 14px;
  box-shadow: var(--px-sombra-1);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.portada-buscador:focus-within {
  border-color: var(--px-azul);
  box-shadow: 0 0 0 4px rgba(0, 71, 186, 0.12);
}
.portada-buscador input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: var(--px-tinta);
}
.portada-buscador-btn {
  width: 60px;
  border: none;
  background: var(--px-azul);
  color: #ffffff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.portada-buscador-btn:hover { background: var(--px-azul-claro); }
.portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.portada-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portada-btn:hover { transform: translateY(-1px); }
.portada-btn-primario {
  background: var(--px-azul);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(0, 71, 186, 0.6);
}
/* Sobre verde, texto en negro FRALCA (regla del manual de color) */
.portada-btn-whatsapp {
  background: var(--px-verde);
  color: var(--px-tinta);
  box-shadow: 0 8px 18px -8px rgba(0, 206, 124, 0.6);
}
.portada-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--px-borde);
  font-size: 0.88rem;
  color: #5b6780;
}
.portada-cifras strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--px-tinta);
  font-variant-numeric: tabular-nums;   /* el contador no «baila» mientras sube */
}
.portada-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--px-radio);
}

/* Franja «Novedades» (banners del panel) debajo de la portada */
.novedades-franja { margin: 0 0 40px; }

/* Hasta 900 px (tablet y celular) la portada se apila: el texto no cabe junto a la foto */
@media (max-width: 900px) {
  .portada-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
    border-radius: 20px;
  }
  /* La foto va abajo, recortada en horizontal */
  .portada-foto img {
    height: 220px;
    aspect-ratio: auto;
    object-position: center 55%;
  }
  .novedades-franja { margin-bottom: 28px; }
}
@media (max-width: 600px) {
  .portada-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   PORTADA, TANDA 2 (25-oct-2026)
   Compra por línea, Productos para ti (pestañas), Servicios sobre vidrio, «Así trabajamos»,
   ritmo de fondos, tarjetas del catálogo sin foto y botones flotantes.
   ========================================================================== */

/* ─── Ritmo visual: franjas que alternan blanco y tinte suave ─────────────
   Cada franja (data-ritmo) pinta su fondo hasta los bordes de la pantalla con una sombra enorme recortada
   en vertical (clip-path). script.js (alternarFondos) pone la clase «ritmo-tinte» a una de cada dos franjas visibles.
   Espacio entre secciones: 44 px arriba y abajo de cada franja = 88 px en computadora, 56 px en celular. */
.main-container [data-ritmo] {
  position: relative;
  margin: 0 auto;
  padding-top: 44px;
  padding-bottom: 44px;
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
}
.main-container [data-ritmo].ritmo-tinte,
.main-container .asi-trabajamos {
  background: var(--px-tinte-azul);
  box-shadow: 0 0 0 100vmax var(--px-tinte-azul);
}
.main-container [data-ritmo][hidden] { display: none; }
.main-container .productos-para-ti,
.main-container .compra-linea,
.main-container .servicios-portada,
.main-container .asi-trabajamos {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
}
/* Dentro de una franja, lo que antes llevaba margen propio ya no lo necesita */
.main-container .catalogo-franja .catalog-section,
.main-container .asi-trabajamos .locations-section { margin-bottom: 0; }
.main-container .catalogo-franja > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .main-container [data-ritmo] { padding-top: 28px; padding-bottom: 28px; }
  .main-container .productos-para-ti,
  .main-container .compra-linea,
  .main-container .servicios-portada,
  .main-container .asi-trabajamos { padding-left: 14px; padding-right: 14px; }
}

/* ─── Compra por línea ─────────────────────────────────────────────────── */
.linea-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.linea-card {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--px-radio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #dfe7f3;
  box-shadow: var(--px-sombra-1);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.linea-card:hover { transform: translateY(-4px); box-shadow: var(--px-sombra-2); }
.linea-card:focus-visible { outline: 3px solid var(--px-azul); outline-offset: 3px; }
.linea-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.linea-card:hover img { transform: scale(1.05); }
.linea-pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 16px 14px;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0) 0%, rgba(10, 20, 40, 0.84) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.linea-pie strong { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800; }
.linea-pie span { font-size: 0.85rem; }
.linea-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(21, 29, 41, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
}
@media (max-width: 768px) {
  .linea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .linea-card { aspect-ratio: 1 / 1; border-radius: 14px; }
  /* Son 9 líneas: la última ocupa todo el ancho para no quedar sola en una fila de dos */
  .linea-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .linea-pie { padding: 36px 12px 10px; }
  .linea-pie strong { font-size: 1rem; }
  .linea-pie span { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .linea-card, .linea-card img { transition: none; }
  .linea-card:hover, .linea-card:hover img { transform: none; }
}

/* ─── Productos para ti: pestañas ─────────────────────────────────────── */
.productos-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--px-borde);
}
.productos-pestanas [role="tab"] {
  margin-bottom: -1px;
  padding: 10px 18px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--px-texto);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.productos-pestanas [role="tab"]:hover { color: var(--px-azul); }
.productos-pestanas [role="tab"][aria-selected="true"] { color: var(--px-azul); border-bottom-color: var(--px-azul); }
.productos-pestanas [role="tab"]:focus-visible { outline: 3px solid var(--px-azul); outline-offset: -3px; border-radius: 6px; }
.productos-pestanas [role="tab"][hidden] { display: none; }
/* Los paneles son las secciones de antes: sin sus márgenes ni su ancho propio */
.productos-para-ti [role="tabpanel"] {
  max-width: none;
  margin: 0;
  padding: 0;
}
.productos-para-ti [role="tabpanel"][hidden] { display: none; }
.productos-para-ti .ofertas-dia-header { justify-content: flex-end; margin-bottom: 12px; }

/* ─── Servicios sobre vidrio (portada) ────────────────────────────────── */
.servicios-portada {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: center;
}
.servicios-portada-foto img {
  display: block;
  width: 100%;
  max-height: 560px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra-2);
}
.servicios-portada-texto .seccion-titulo { margin-top: 10px; }
.servicios-portada-lista {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.servicios-portada-lista li { display: flex; gap: 12px; align-items: flex-start; }
.servicios-portada-lista .servicio-icono { flex: none; width: 44px; height: 44px; font-size: 1.2rem; }
.servicios-portada-lista strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  color: var(--px-tinta);
}
.servicios-portada-lista li span:not(.servicio-icono) {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #5b6780;
}
.servicios-portada .portada-botones { margin-top: 26px; }
.portada-btn-secundario {
  background: #ffffff;
  color: var(--px-azul);
  border: 2px solid var(--px-azul);
}
.portada-btn-secundario:hover { background: var(--px-tinte-azul); }
@media (max-width: 900px) {
  .servicios-portada { grid-template-columns: 1fr; gap: 24px; }
  .servicios-portada-foto img { aspect-ratio: 16 / 9; max-height: 260px; object-position: center 40%; }
}
@media (max-width: 600px) {
  .servicios-portada-lista { grid-template-columns: 1fr; }
}

/* ─── Así trabajamos: Conoce FRALCA y Nuestras sedes en una sola franja ─── */
.asi-trabajamos .asi-cabecera { margin-bottom: 28px; }
.asi-trabajamos .conoce-section { margin: 0 0 56px; }
html[data-theme="light"] .asi-trabajamos h3.asi-subtitulo {
  margin: 0 0 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--px-tinta);
}
@media (max-width: 768px) {
  .asi-trabajamos .conoce-section { margin-bottom: 40px; }
  html[data-theme="light"] .asi-trabajamos h3.asi-subtitulo { font-size: 1.25rem; }
}

/* ─── Tarjetas del catálogo sin foto: espesor y medida grandes, color del vidrio ─── */
html[data-theme="light"] .product-image-wrapper .product-visual.visual-ficha {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  flex-direction: column;
  gap: 4px;
}
.ficha-dibujo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
}
.ficha-espesor {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--px-azul);
}
.ficha-medida {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--px-tinta);
}
/* El cuadro de vidrio y el perfil, más chicos para dejar sitio a los números (el perfil, al 60 %) */
html[data-theme="light"] .visual-ficha .visual-glass-clear,
html[data-theme="light"] .visual-ficha .visual-glass-fume { width: 44px; height: 44px; }
html[data-theme="light"] .visual-ficha .visual-profile { width: 15px; height: 60px; }
html[data-theme="light"] .visual-ficha .visual-fitting { font-size: 2rem; }
html[data-theme="light"] .visual-ficha .visual-service { font-size: 2.1rem; }
/* Sin números que mostrar, el dibujo de perfil también se reduce al 60 % */
html[data-theme="light"] .product-image-wrapper .product-visual:not(.visual-ficha) .visual-profile {
  transform: rotate(20deg) scale(0.6);
}
/* Color del vidrio (clases de la lista cerrada de script.js: TINTES_VIDRIO) */
html[data-theme="light"] .product-image-wrapper [class*="visual-glass"][class*="tinte-"] {
  background: linear-gradient(135deg, var(--tinte-a), var(--tinte-b));
  border-color: var(--tinte-borde);
}
.tinte-bronce   { --tinte-a: rgba(196, 138, 78, 0.85);  --tinte-b: rgba(128, 82, 40, 0.9);   --tinte-borde: rgba(112, 70, 32, 0.8); }
.tinte-gris     { --tinte-a: rgba(132, 144, 166, 0.8);  --tinte-b: rgba(72, 84, 108, 0.88);  --tinte-borde: rgba(60, 72, 96, 0.8); }
.tinte-verde    { --tinte-a: rgba(80, 176, 136, 0.78);  --tinte-b: rgba(28, 116, 86, 0.9);   --tinte-borde: rgba(20, 96, 70, 0.8); }
.tinte-azul     { --tinte-a: rgba(88, 156, 238, 0.78);  --tinte-b: rgba(22, 84, 176, 0.9);   --tinte-borde: rgba(16, 66, 148, 0.8); }
.tinte-ambar    { --tinte-a: rgba(238, 176, 64, 0.82);  --tinte-b: rgba(196, 116, 16, 0.9);  --tinte-borde: rgba(160, 94, 10, 0.8); }
.tinte-capuccino{ --tinte-a: rgba(190, 156, 126, 0.85); --tinte-b: rgba(124, 92, 68, 0.9);   --tinte-borde: rgba(100, 72, 52, 0.8); }
.tinte-negro    { --tinte-a: rgba(64, 70, 82, 0.95);    --tinte-b: rgba(20, 24, 32, 0.98);   --tinte-borde: rgba(12, 16, 22, 0.9); }
.tinte-plata    { --tinte-a: #f1f4f8; --tinte-b: #aeb8c6; --tinte-borde: #8795ab; }
.tinte-espejo   { --tinte-a: #f6f8fb; --tinte-b: #9fadc2; --tinte-borde: #7c8ba3; }
.tinte-blanco   { --tinte-a: #ffffff; --tinte-b: #e3e9f1; --tinte-borde: #c3cddb; }
@media (max-width: 768px) {
  html[data-theme="light"] .product-image-wrapper .product-visual.visual-ficha { transform: none; padding: 6px 8px; gap: 2px; }
  .ficha-dibujo { height: 44px; }
  .ficha-espesor { font-size: 1.5rem; }
  .ficha-medida { font-size: 0.85rem; }
  html[data-theme="light"] .visual-ficha .visual-glass-clear,
  html[data-theme="light"] .visual-ficha .visual-glass-fume { width: 32px; height: 32px; }
  html[data-theme="light"] .visual-ficha .visual-profile { width: 11px; height: 44px; }
  html[data-theme="light"] .visual-ficha .visual-fitting,
  html[data-theme="light"] .visual-ficha .visual-service { font-size: 1.5rem; }
}

/* ─── Redes sociales en el pie (reemplazan la barra flotante, que se ocultó) ─── */
.floating-social-bar[hidden] { display: none; }
.footer-redes { display: flex; gap: 10px; margin-top: 16px; }
.footer-redes a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 1.05rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-redes a:hover { background: #ffffff; color: var(--px-tinta); }
.footer-redes a:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ─── Compra por línea con íconos (25-oct-2026) ─────────────────────────
   Reemplaza las tarjetas con foto (las fotos ya salían en Ideas, Conoce y Catálogos). */
.compra-linea .linea-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.compra-linea .linea-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  aspect-ratio: auto;
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--px-borde);
  border-radius: 14px;
  box-shadow: var(--px-sombra-1);
  text-align: left;
  color: var(--px-tinta);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.compra-linea .linea-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 71, 186, 0.35);
  box-shadow: var(--px-sombra-2);
}
.compra-linea .linea-icono {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--px-tinte-azul, #edf3fc);
  color: var(--px-azul);
  font-size: 1.25rem;
}
.compra-linea .linea-pie {
  position: static;
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compra-linea .linea-pie strong { font-size: 1rem; font-weight: 800; color: var(--px-tinta); }
.compra-linea .linea-pie span { font-size: 0.8rem; color: #6b7891; }
.compra-linea .linea-flecha { color: #9aa6bd; font-size: 0.8rem; transition: transform 0.2s ease; }
.compra-linea .linea-card:hover .linea-flecha { transform: translateX(3px); color: var(--px-azul); }
@media (max-width: 1024px) { .compra-linea .linea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  {
  .compra-linea .linea-grid { gap: 10px; }
  .compra-linea .linea-card { padding: 14px 12px; gap: 10px; }
  .compra-linea .linea-icono { flex-basis: 40px; height: 40px; font-size: 1.05rem; }
  .compra-linea .linea-pie strong { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .compra-linea .linea-card, .compra-linea .linea-flecha { transition: none; }
}

/* Píldoras de categoría ocultas (25-oct-2026): la barra queda solo como ancla del catálogo */
.categories-pills[hidden] { display: none !important; }
html[data-theme="light"] .control-bar.sin-pildoras {
  padding: 0;
  margin: 0;
  min-height: 0;
  background: none;
  border: 0;
  box-shadow: none;
  scroll-margin-top: calc(var(--alto-encabezado, 140px) + 12px);
}
/* Celular: ícono arriba y texto debajo, para que los nombres largos («Policarbonato», «Accesorios y herrajes») quepan */
@media (max-width: 480px) {
  .compra-linea .linea-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  .compra-linea .linea-flecha { display: none; }
  .compra-linea .linea-pie strong { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .compra-linea .linea-icono { flex: 0 0 auto; width: 40px; height: 40px; }
}

.footer-redes[hidden] { display: none !important; }

/* Portada dividida oculta a pedido (26-oct-2026): vuelve el banner anterior */
.portada-hero[hidden] { display: none !important; }

.asi-cabecera[hidden] { display: none !important; }

/* ─── Compra por línea dentro del catálogo (26-oct-2026) ─────────────────── */
.main-container .compra-linea.compra-linea-catalogo { padding: 0; margin: 0 0 18px; max-width: none; }
.compra-linea-catalogo .catalogos-cabecera { margin-bottom: 14px; }
.filtro-campo[hidden] { display: none !important; }

/* Barra de filtros del catálogo oculta a pedido (26-oct-2026) */
.catalogo-filtros[hidden] { display: none !important; }

/* Tarjeta «Vidrio y Cristales» del banner con foto real (26-oct-2026): la foto llena el recuadro */
.cat-card-img-box-fx .cat-card-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* Servicios sobre vidrio sin foto (26-oct-2026: la foto pasó al banner): el texto ocupa todo el ancho */
.servicios-portada-foto[hidden] { display: none !important; }
.servicios-portada:has(> .servicios-portada-foto[hidden]) { grid-template-columns: 1fr; }

/* ─── Productos en una sola hilera con flechas al elegir una línea (26-oct-2026) ─── */
.productos-fila { position: relative; }
.productos-fila .fila-btn[hidden] { display: none !important; }
.catalogo-principal.en-fila .products-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}
.catalogo-principal.en-fila .products-grid::-webkit-scrollbar { display: none; }
.catalogo-principal.en-fila .products-grid > .product-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
/* En una hilera no hacen falta «Ver más» ni el aviso final: la hilera trae más productos sola */
.catalogo-principal.en-fila #catalogo-ver-mas,
.catalogo-principal.en-fila #catalogo-fin { display: none !important; }
@media (max-width: 1099px) {
  .catalogo-principal.en-fila .products-grid > .product-card { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .catalogo-principal.en-fila .products-grid > .product-card { flex-basis: 46%; }
  /* Aquí sí se muestran las flechas (en los demás carruseles del celular se ocultan) */
  .productos-fila .fila-btn { display: flex; width: 32px; height: 32px; }
  .productos-fila .slide-prev { left: -6px; }
  .productos-fila .slide-next { right: -6px; }
}

/* ─── Hileras de «Compra por línea» (26-oct-2026): sin búsqueda se ven ellas y no la grilla general ─── */
.filas-lineas[hidden] { display: none !important; }
.catalogo-principal.con-filas #productos-fila,
.catalogo-principal.con-filas #catalogo-ver-mas,
.catalogo-principal.con-filas #catalogo-fin { display: none !important; }
.fila-linea + .fila-linea { margin-top: 26px; }
.fila-linea-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fila-linea-titulo { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--px-tinta); }
.fila-linea .fila-linea-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}
.fila-linea .fila-linea-grid::-webkit-scrollbar { display: none; }
.fila-linea .fila-linea-grid > .product-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
.fila-linea .fila-linea-grid > .catalogo-cargando,
.fila-linea .fila-linea-grid > .catalogo-vacio { flex: 1 0 100%; }
@media (max-width: 1099px) {
  .fila-linea .fila-linea-grid > .product-card { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .fila-linea .fila-linea-grid > .product-card { flex-basis: 46%; }
  .fila-linea-titulo { font-size: 1.05rem; }
}

/* ─── Vista de una línea (#linea/vidrio, 26-oct-2026): el resto de la portada se oculta ───
   Título y orden arriba, departamentos como enlaces azules, filtros a la izquierda y la grilla con paginación a la derecha.
   En celular (menos de 900 px) los filtros quedan detrás del botón «Filtros». */
.main-container.en-linea > :not(.linea-vista) { display: none !important; }
.linea-vista[hidden] { display: none !important; }
.main-container .linea-vista { max-width: 1240px; margin: 0 auto; padding: 24px 20px 40px; }
.linea-vista-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.linea-vista-cabecera .seccion-titulo { margin: 0; text-align: left; font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.linea-vista-cabecera .seccion-titulo:focus { outline: none; }
.linea-vista-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--px-borde);
  border-radius: 999px;
  background: #ffffff;
  color: var(--px-tinta);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.linea-vista-volver:hover { border-color: var(--px-azul); color: var(--px-azul); }
.linea-vista-orden { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.9rem; color: var(--px-texto); }
.linea-vista-orden select {
  padding: 8px 12px;
  border: 1px solid var(--px-borde);
  border-radius: 10px;
  background: #ffffff;
  color: var(--px-tinta);
  font: inherit;
  cursor: pointer;
}

/* Departamentos: enlaces de texto en azul; el elegido va en negrita y subrayado */
.linea-vista-deptos { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--px-borde); }
.lv-depto-enlace { padding: 4px 0; border: 0; background: none; color: var(--px-azul); font: inherit; font-size: 0.95rem; cursor: pointer; }
.lv-depto-enlace:hover { text-decoration: underline; }
.lv-depto-enlace.activo { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.linea-vista-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.linea-vista-resultados { min-width: 0; scroll-margin-top: calc(var(--alto-encabezado, 140px) + 12px); }
.linea-vista-resultados .products-grid { gap: 14px; }
.linea-vista-filtros-btn { display: none; }
.linea-vista-filtros { padding: 16px; border: 1px solid var(--px-borde); border-radius: 14px; background: #ffffff; }
.lv-filtros-cabecera { display: flex; align-items: baseline; justify-content: space-between; }
.lv-filtros-cabecera h3 { margin: 0; color: var(--px-tinta); font-size: 1.1rem; }
.lv-borrar { padding: 2px 0; border: 0; background: none; color: var(--px-azul); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.lv-borrar:hover { text-decoration: underline; }
.lv-grupo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--px-borde); }
.lv-grupo[hidden] { display: none; }
.lv-grupo h4 { margin: 0 0 8px; color: var(--px-texto); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
/* Con más de unos 8 ítems la lista se desplaza por dentro */
.lv-lista { max-height: 264px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.lv-casilla { display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px; color: var(--px-tinta); font-size: 0.92rem; cursor: pointer; }
.lv-casilla input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--px-azul); cursor: pointer; }

.lv-cat-fila { display: flex; align-items: center; justify-content: space-between; }
.lv-cat-nombre, .lv-cat-depto { padding: 7px 2px; border: 0; background: none; color: var(--px-tinta); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; }
.lv-cat-nombre { flex: 1; }
.lv-cat-nombre:hover, .lv-cat-depto:hover { color: var(--px-azul); }
.lv-cat.activo > .lv-cat-fila .lv-cat-nombre, .lv-cat-depto.activo { color: var(--px-azul); font-weight: 700; }
.lv-cat-flecha { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--px-texto); cursor: pointer; }
.lv-cat-flecha:hover { background: var(--px-tinte-azul); }
.lv-cat-flecha i { transition: transform 0.2s; }
.lv-cat.abierta .lv-cat-flecha i { transform: rotate(180deg); }
.lv-cat-deptos { margin: 0 0 6px 4px; padding: 0 0 0 12px; border-left: 2px solid var(--px-tinte-azul); list-style: none; }
.lv-cat-deptos[hidden] { display: none; }
.lv-cat-nota { padding: 6px 0; color: var(--px-texto); font-size: 0.85rem; }

/* Paginación con números, abajo a la derecha */
.linea-vista-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 28px; }
.linea-vista-paginacion[hidden] { display: none; }
.pag-num, .pag-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--px-borde);
  border-radius: 10px;
  background: #ffffff;
  color: var(--px-tinta);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.pag-num:hover:not(.activa), .pag-flecha:hover:not(:disabled) { border-color: var(--px-azul); color: var(--px-azul); }
.pag-num.activa { border-color: var(--px-azul); background: var(--px-azul); color: #ffffff; cursor: default; }
.pag-flecha:disabled { opacity: 0.45; cursor: not-allowed; }
.pag-puntos { padding: 0 4px; color: var(--px-texto); }

@media (max-width: 1099px) {
  .linea-vista-cuerpo { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 899px) {
  .linea-vista-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .linea-vista-filtros-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--px-borde);
    border-radius: 12px;
    background: #ffffff;
    color: var(--px-tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .linea-vista-filtros-btn[aria-expanded="true"] { border-color: var(--px-azul); color: var(--px-azul); }
  .linea-vista-filtros { display: none; }
  .linea-vista-filtros.abierto { display: block; }
}
@media (max-width: 768px) {
  .main-container .linea-vista { padding: 16px 14px 32px; }
  .linea-vista-orden { margin-left: 0; width: 100%; }
  .linea-vista-orden select { flex: 1; }
  /* Los departamentos se deslizan de lado */
  .linea-vista-deptos { flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .linea-vista-deptos::-webkit-scrollbar { display: none; }
  .lv-depto-enlace { flex: none; white-space: nowrap; }
  .linea-vista-paginacion { justify-content: center; gap: 4px; }
  .pag-num, .pag-flecha { min-width: 34px; height: 34px; padding: 0 8px; }
  .pag-texto { display: none; }
}

/* ─── Métodos de pago, franja azul encima del pie (26-oct-2026) ─── */
.metodos-pago-seccion {
  background: #0b2a6f;
  color: #ffffff;
  padding: 26px 20px;
}
.metodos-pago {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.metodo-pago {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}
.metodo-pago-icono { color: #ffffff; }
@media (max-width: 768px) {
  .metodos-pago { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .metodo-pago { font-size: 0.82rem; }
  .metodo-pago-icono { width: 38px; height: 38px; }
}

/* ─── Métodos de pago dentro del pie (26-oct-2026); la franja de arriba queda oculta ─── */
.metodos-pago-seccion[hidden] { display: none !important; }
@media (min-width: 1025px) {
  .footer-top-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1fr 1fr; }
}
.footer-pagos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-pagos-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 500;
}
.footer-pago-icono { flex: 0 0 18px; color: var(--px-verde, #00CE7C); }

/* Vista de línea: la lista de todas las líneas queda oculta (26-oct-2026) */
.lv-grupo[hidden] { display: none !important; }

/* ─── Vista de línea sin columna de filtros (26-oct-2026): departamentos arriba y series como botones ─── */
.linea-vista-filtros[hidden], .linea-vista-filtros-btn[hidden], .linea-vista-series[hidden] { display: none !important; }
.linea-vista-cuerpo.sin-filtros { grid-template-columns: minmax(0, 1fr) !important; }
.linea-vista-series {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}
.lv-serie-boton {
  padding: 6px 14px;
  border: 1px solid var(--px-borde);
  border-radius: 999px;
  background: #ffffff;
  color: var(--px-tinta);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.lv-serie-boton:hover { border-color: var(--px-azul); color: var(--px-azul); }
.lv-serie-boton.activo { background: var(--px-azul); border-color: var(--px-azul); color: #ffffff; }
@media (max-width: 768px) {
  .linea-vista-series { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .linea-vista-series::-webkit-scrollbar { display: none; }
  .lv-serie-boton { flex: none; white-space: nowrap; }
}
/* Series: 2 filas a la vista; «Ver todas las series» despliega el resto */
@media (min-width: 769px) {
  .linea-vista-series:not(.abierta) { max-height: 76px; overflow: hidden; }
}
.lv-series-mas[hidden] { display: none !important; }
.lv-series-mas {
  margin: -8px 0 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--px-azul);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.lv-series-mas[aria-expanded="true"] i { transform: rotate(180deg); }

/* Vista de línea: fila de departamentos oculta; categorías y subcategorías en la columna lateral (26-oct-2026) */
.linea-vista-deptos[hidden] { display: none !important; }

/* ─── Vista de línea estilo Daka con el desglose de Ventas (26-oct-2026) ───
   Migas arriba, fila de enlaces (grupos o series), «Colores / acabados» y «Categorías» desplegables en la columna. */
.linea-vista-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 12px; font-size: 0.85rem; color: var(--px-texto); }
.lv-miga { padding: 2px 0; border: 0; background: none; color: var(--px-texto); font: inherit; cursor: pointer; }
.lv-miga:hover { color: var(--px-azul); text-decoration: underline; }
.lv-miga-actual { color: var(--px-tinta); font-weight: 700; }
.lv-miga-sep { color: #9aa5b8; }
.linea-vista-deptos { gap: 6px 26px; }
/* Categorías: lista completa sin desplazamiento interno; grupos y series en niveles */
.lv-lista.lv-categorias { max-height: none; overflow: visible; }
.lv-subcat .lv-cat-depto { flex: 1; }
.lv-subcat > .lv-cat-fila .lv-cat-flecha { width: 28px; height: 28px; }
.lv-subcat.abierta > .lv-cat-fila .lv-cat-flecha i { transform: rotate(180deg); }
.lv-cat-series { margin: 0 0 4px 2px; padding: 0 0 0 12px; border-left: 2px solid var(--px-borde); list-style: none; }
.lv-cat-series[hidden] { display: none; }
.lv-cat-series .lv-cat-depto { padding: 5px 2px; font-size: 0.86rem; }
.lv-subcat > .lv-cat-fila > .lv-cat-depto.activo, .lv-cat-series .lv-cat-depto.activo { color: var(--px-azul); font-weight: 700; }
/* Accesorios de la serie elegida, debajo de la paginación */
.linea-vista-accesorios { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--px-borde); }
.linea-vista-accesorios[hidden] { display: none !important; }
.linea-vista-resultados .linea-vista-accesorios .fila-linea-grid { gap: 14px; }
@media (min-width: 1100px) {
  .linea-vista-accesorios .fila-linea-grid > .product-card { flex-basis: calc((100% - 42px) / 4); }
}
.lv-cat.abierta .lv-subcat:not(.abierta) .lv-cat-flecha i { transform: none; }
.main-container .linea-vista { scroll-margin-top: calc(var(--alto-encabezado, 140px) + 8px); }

/* ─── Fondo único (26-oct-2026, pedido del dueño): todas las secciones con el fondo de la página ───
   Las franjas blancas y celestes (data-ritmo / ritmo-tinte) dejan de pintar fondo; las tarjetas siguen blancas. */
.main-container [data-ritmo],
.main-container [data-ritmo].ritmo-tinte,
.main-container .asi-trabajamos {
  background: transparent;
  box-shadow: none;
}

/* ─── Círculo con el color del producto (26-oct-2026, pedido de Ventas) ───
   Tarjetas, ficha y filtro «Colores / acabados». Acabados metálicos con un brillo suave; vidrios, translúcidos. */
.color-punto {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.35em;
  border: 1px solid rgba(21, 29, 41, 0.28);
  border-radius: 50%;
  vertical-align: -0.12em;
  background: #ccd2da;
  flex: none;
}
.lv-casilla .color-punto { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; }
.color-punto.c-blanco { background: #ffffff; }
.color-punto.c-negro { background: #1c1f24; }
.color-punto.c-natural { background: linear-gradient(135deg, #e3e6ea, #b9bec5); }
.color-punto.c-natural-mate { background: #b7bcc3; }
.color-punto.c-natural-brillante { background: linear-gradient(135deg, #ffffff 0%, #d4d9df 45%, #a9b0b8 100%); }
.color-punto.c-bronce { background: #7b5634; }
.color-punto.c-bronce-mate { background: #6a4b30; }
.color-punto.c-bronce-pulido { background: linear-gradient(135deg, #c39a6b 0%, #8a5d33 55%, #5e3d20 100%); }
.color-punto.c-claro { background: rgba(196, 228, 226, 0.55); }
.color-punto.c-ultra-claro { background: rgba(232, 247, 247, 0.6); }
.color-punto.c-gris { background: #8b929a; }
.color-punto.c-verde { background: #8fc4a0; }
.color-punto.c-reflectivo-plata { background: linear-gradient(135deg, #f4f6f8, #a7afb8); }
.color-punto.c-reflectivo-gris-plata { background: linear-gradient(135deg, #c9ced4, #7d858e); }
.color-punto.c-reflectivo-azul { background: linear-gradient(135deg, #a9c3e3, #4f74a3); }
.color-punto.c-blanco-leche { background: #f4f1e8; }
.color-punto.c-blanco-hielo { background: #eef4f8; }
.color-punto.c-ambar { background: #d9962b; }
.color-punto.c-capuccino { background: #8a6a4f; }
.product-color { display: flex; align-items: center; margin-top: 6px; color: var(--px-texto); font-size: 0.8rem; font-weight: 500; line-height: 1.2; }
.product-color .color-punto { width: 14px; height: 14px; margin-right: 6px; }

/* ─── Colores disponibles en la ficha del producto (26-oct-2026) ─── */
#ficha-colores { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ficha-colores-puntos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 270px; }
.ficha-color-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
.ficha-color-btn .color-punto { width: 22px; height: 22px; margin: 0; }
.ficha-color-btn:hover { border-color: var(--px-borde); }
.ficha-color-btn.activo { border-color: var(--px-azul); cursor: default; }
.ficha-color-btn:focus-visible { outline: 2px solid var(--px-azul); outline-offset: 2px; }
.ficha-color-nombre { color: var(--px-tinta); font-weight: 600; font-size: 0.9rem; }

/* ─── Colores disponibles en la tarjeta (26-oct-2026): círculos que abren la ficha de cada color ─── */
.product-colores { flex-wrap: wrap; gap: 4px; }
.tarjeta-color-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.tarjeta-color-btn .color-punto { width: 14px; height: 14px; margin: 0; }
.tarjeta-color-btn:hover { border-color: var(--px-borde); }
.tarjeta-color-btn.activo { border-color: var(--px-azul); }
.tarjeta-color-btn:focus-visible { outline: 2px solid var(--px-azul); outline-offset: 1px; }
.product-color-nombre { margin-left: 4px; white-space: nowrap; }

/* Vista de línea: números de página centrados (26-oct-2026, pedido del dueño) */
.linea-vista-paginacion { justify-content: center; }

/* «Instalaciones FRALCA» lleva a los mapas de las sedes (26-oct-2026) */
.conoce-foto-enlace { cursor: pointer; }
.conoce-foto-enlace:focus-visible { outline: 3px solid var(--px-azul); outline-offset: 3px; }
.conoce-foto-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; }
.conoce-foto-enlace:hover .conoce-foto-cta { text-decoration: underline; }
#sedes-seccion { scroll-margin-top: calc(var(--alto-encabezado, 140px) + 12px); }
@keyframes sedes-brillo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 71, 186, 0); }
  30%, 70% { box-shadow: 0 0 0 4px rgba(0, 71, 186, 0.35); }
}
#sedes-seccion.sedes-resaltadas .sedes-grid > * { animation: sedes-brillo 2.4s ease-in-out; border-radius: 16px; }

/* ─── Ventana de sedes (26-oct-2026) ───
   Fondo oscuro a pantalla completa; el panel se desplaza por dentro. Las 5 sedes en cuadrícula, sin flechas de carrusel. */
.sedes-modal[hidden] { display: none !important; }
.sedes-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.62);
}
.sedes-modal .locations-section {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0;
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: #f5f7fb;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}
.sedes-modal .locations-section:focus { outline: none; }
.sedes-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--px-borde);
  border-radius: 50%;
  background: #ffffff;
  color: var(--px-tinta);
  font-size: 1.1rem;
  cursor: pointer;
}
.sedes-cerrar:hover { border-color: var(--px-azul); color: var(--px-azul); }
.sedes-modal .sedes-wrapper .catalogos-slide-btn { display: none; }
.sedes-modal .sedes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  overflow: visible;
}
.sedes-modal .sedes-grid > .sede-ficha { width: auto; min-width: 0; flex: none; }
@media (max-width: 768px) {
  .sedes-modal { padding: 12px 8px; }
  .sedes-modal .locations-section { padding: 22px 14px 16px; border-radius: 16px; }
}
body:has(.sedes-modal:not([hidden])) .floating-social-bar,
body:has(.sedes-modal:not([hidden])) .chat-widget-container { display: none !important; }

/* ─── Vista de línea: catálogo por serie, subtítulos de acabados (26-oct-2026) ─── */
.lv-catalogo-btn[hidden] { display: none !important; }
.lv-catalogo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -10px 0 18px;
  padding: 8px 14px;
  border: 1px solid var(--px-borde);
  border-radius: 999px;
  background: #ffffff;
  color: var(--px-azul);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.lv-catalogo-btn:hover { border-color: var(--px-azul); }
.lv-subtitulo { margin: 8px 0 2px; color: var(--px-texto); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
#lv-atributos .lv-grupo:first-child { margin-top: 12px; }

/* Vidrio a medida del carrito oculto (26-oct-2026): lo reemplaza /armar/ */
.vidrio-medida[hidden] { display: none !important; }

.cart-summary-nota[hidden] { display: none !important; }

/* ─── Letra para datos técnicos (26-oct-2026): códigos, medidas y tasa BCV ───
   Monoespaciada del propio sistema (no se descarga ninguna fuente). Las medidas dentro de los nombres van en .dato-mono. */
:root { --fuente-datos: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; }
.product-code, .oferta-codigo, .destacado-codigo, .dato-mono, #header-rate-usd { font-family: var(--fuente-datos); }
.dato-mono { font-size: 0.94em; letter-spacing: -0.01em; white-space: nowrap; }
.spec-val.dato-mono { white-space: normal; word-break: break-word; font-size: 0.84rem; font-weight: 500; }

/* ─── Vista de línea: cuadrícula o lista rápida (26-oct-2026) ─── */
.lv-vista { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--px-borde); border-radius: 10px; background: #ffffff; }
.lv-vista + .linea-vista-orden { margin-left: 0; }
.lv-vista-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--px-texto); font: inherit; font-size: 0.85rem; cursor: pointer; }
.lv-vista-btn[aria-pressed="true"] { background: var(--px-tinte-azul); color: var(--px-azul); font-weight: 700; }
.linea-vista-resultados .products-grid.vista-lista { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--px-borde); border-radius: 14px; background: #ffffff; overflow: hidden; }
.fila-producto { display: grid; grid-template-columns: 130px minmax(0, 1fr) 200px 40px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--px-borde); }
.fila-producto:last-child { border-bottom: 0; }
.fila-producto:hover { background: #f8fafd; }
.fila-codigo { color: #55627c; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; }
.fila-nombre { padding: 0; border: 0; background: none; color: var(--px-tinta); font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; cursor: pointer; }
.fila-nombre:hover { color: var(--px-azul); text-decoration: underline; }
.fila-colores .product-color { margin-top: 0; }
.fila-colores { display: flex; justify-content: flex-start; }
.fila-producto .fila-agregar { width: 36px; height: 36px; }
@media (max-width: 768px) {
  .lv-vista { margin-left: 0; }
  .lv-vista-btn span { display: none; }
  .fila-producto { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "codigo agregar" "nombre agregar" "colores agregar"; row-gap: 4px; padding: 10px 12px; }
  .fila-codigo { grid-area: codigo; }
  .fila-nombre { grid-area: nombre; font-size: 0.88rem; }
  .fila-colores { grid-area: colores; }
  .fila-producto .fila-agregar { grid-area: agregar; }
}

/* ─── Fila larga de series: buscador y plegado (26-oct-2026) ─── */
.lv-buscar-serie[hidden], .lv-buscar-vacio[hidden], .lv-depto-enlace[hidden] { display: none !important; }
.lv-buscar-serie { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--px-borde); border-radius: 10px; background: #ffffff; }
.lv-buscar-serie:focus-within { border-color: var(--px-azul); box-shadow: 0 0 0 3px var(--px-tinte-azul); }
.lv-buscar-serie i { color: var(--px-texto); font-size: 0.85rem; }
.lv-buscar-serie input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: none; color: var(--px-tinta); font: inherit; font-size: 0.9rem; outline: none; }
/* Plegada: dos filas a la vista (en celular la fila ya se desliza de lado) */
@media (min-width: 769px) {
  .linea-vista-deptos.fila-larga.plegada:not(.sin-plegar) { max-height: 74px; overflow: hidden; }
}
.lv-buscar-vacio { margin: -10px 0 18px; color: var(--px-texto); font-size: 0.88rem; }
#lv-fila-mas { margin: -10px 0 18px; }
@media (max-width: 768px) {
  .lv-buscar-serie { max-width: none; }
  #lv-fila-mas { display: none !important; }
}