/* =========================================================================================
   tema-cv.css — Paleta de CV Manufactura Industrial (2026-11-11)
   Dotación industrial con acabado elegante: rojo carmesí metálico (tipo acero anodizado /
   vino tinto metalizado) como color principal, grafito y carbón para estructura y texto, y
   plata para bordes y detalles.

   SOLO CV: todas las reglas van bajo `body:not(.modo-bolsas)`. Bolsas De Colombia comparte
   archivos con CV (catálogo, branding.css, cart.css) y conserva su propia paleta: sus páginas
   llevan <body class="modo-bolsas"> y el servidor marca el catálogo de Bolsas con esa misma
   clase desde el HTML (ver servirCatalogo en app.js), así que nada de esto les aplica.
   Cargar DESPUÉS de branding.css / tema-sitio.css (y en el catálogo, después de su <style>).
   ========================================================================================= */

body:not(.modo-bolsas) {
  /* Rojo metálico */
  --cv-rojo: #8a1c2b;
  --cv-rojo-osc: #6a1320;
  --cv-rojo-claro: #a92a3c;
  --cv-rojo-metal: linear-gradient(135deg, #b03444 0%, #8a1c2b 48%, #5f111d 100%);
  --cv-tinte: #f8eef0;          /* fondo suave para bandas y filas activas */
  --cv-tinte-borde: #e7cdd2;
  /* Neutros metálicos */
  --cv-carbon: #17181b;
  --cv-grafito: #2a2c31;
  --cv-acero: #5c6169;          /* texto secundario: 6.2:1 sobre blanco */
  --cv-plata: #c3c7cc;
  --cv-plata-claro: #e5e7ea;
  --cv-humo: #f5f6f7;

  /* Variables que ya usan branding.css / tema-sitio.css y las páginas de CV */
  --accent-color: var(--cv-rojo);
  --accent-gradient: var(--cv-rojo-metal);
  --text-main: var(--cv-grafito);
  --text-muted: var(--cv-acero);
  --card-border: var(--cv-plata-claro);

  /* Variables del catálogo (catalogo_interactivo.html): por defecto naranja; en CV, rojo */
  --cat-acento: var(--cv-rojo);
  --cat-acento-claro: var(--cv-rojo-claro);
  --cat-acento-osc: var(--cv-rojo-osc);
  --cat-acento-grad: var(--cv-rojo-metal);
  --cat-tinte: var(--cv-tinte);
  --cat-tinte-borde: var(--cv-tinte-borde);
  --cat-precio: var(--cv-carbon);

  color: var(--cv-grafito);
}
body:not(.modo-bolsas) ::selection { background: var(--cv-rojo); color: #fff; }

/* ===== Encabezado: blanco con filo rojo metálico arriba y línea plata abajo ===== */
body:not(.modo-bolsas) .site-header {
  background: #ffffff;
  border-top: 3px solid var(--cv-rojo);
  border-bottom: 1px solid var(--cv-plata-claro);
}
body:not(.modo-bolsas) .site-header .logo-text h1 { color: var(--cv-carbon); letter-spacing: 0.01em; }
body:not(.modo-bolsas) .site-header .logo-text p { color: var(--cv-acero); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; }
body:not(.modo-bolsas) .logo-badge { box-shadow: 0 2px 10px rgba(23,24,27,0.12) !important; border: 1px solid var(--cv-plata-claro); }

/* Menú: texto grafito, borde plata; al pasar y en la página actual, rojo metálico */
body:not(.modo-bolsas) .site-nav a {
  background: #ffffff; color: var(--cv-grafito); border: 1px solid var(--cv-plata-claro);
  box-shadow: none; font-weight: 600; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body:not(.modo-bolsas) .site-nav a:hover { background: var(--cv-humo); color: var(--cv-rojo); border-color: var(--cv-plata); }
body:not(.modo-bolsas) .site-nav a.brand,
body:not(.modo-bolsas) .site-nav a[aria-current="page"] {
  background: var(--cv-rojo-metal); color: #ffffff; border-color: var(--cv-rojo-osc);
  box-shadow: 0 4px 14px rgba(138,28,43,0.25);
}
body:not(.modo-bolsas) .site-nav a.brand:hover { color: #ffffff; filter: brightness(1.08); }

/* ===== Botones y llamadas a la acción ===== */
body:not(.modo-bolsas) .btn-primary,
body:not(.modo-bolsas) .cta-cat {
  background: var(--cv-rojo-metal); color: #fff; border: 1px solid var(--cv-rojo-osc);
  box-shadow: 0 4px 14px rgba(138,28,43,0.22);
}
body:not(.modo-bolsas) .btn-primary:hover,
body:not(.modo-bolsas) .cta-cat:hover { opacity: 1; filter: brightness(1.1); }

/* ===== Tarjetas, títulos y bandas de las páginas de CV ===== */
body:not(.modo-bolsas) h1, body:not(.modo-bolsas) h2, body:not(.modo-bolsas) h3 { color: var(--cv-carbon); }
body:not(.modo-bolsas) .tarjeta { border-color: var(--cv-plata-claro); border-top: 3px solid var(--cv-rojo); }
body:not(.modo-bolsas) .tarjeta h2 { color: var(--cv-rojo); }
body:not(.modo-bolsas) .banda { background: var(--cv-tinte); border-color: var(--cv-tinte-borde); }
body:not(.modo-bolsas) .banda strong { color: var(--cv-rojo); }
body:not(.modo-bolsas) main a:not(.cta):not(.btn-primary) { color: var(--cv-rojo); }

/* ===== Pie de página: carbón con texto plata y filo rojo ===== */
body:not(.modo-bolsas) footer,
body:not(.modo-bolsas) footer.pie {
  background: var(--cv-carbon); color: var(--cv-plata);
  border-top: 3px solid var(--cv-rojo);
  margin-top: 2.5rem;
}
body:not(.modo-bolsas) footer a { color: #ffffff; }

/* ===== Botones flotantes ===== */
/* WhatsApp: verde oficial (se reconoce al instante; antes en estas páginas salía naranja). */
body:not(.modo-bolsas) .whatsapp-float { background: #25D366; box-shadow: 0 8px 24px rgba(23,24,27,0.28); }
/* Carrito: grafito con aro rojo metálico */
body:not(.modo-bolsas) .cart-fab { background: var(--cv-grafito) !important; box-shadow: 0 0 0 2px var(--cv-rojo), 0 8px 24px rgba(23,24,27,0.3) !important; }
body:not(.modo-bolsas) .cart-badge { background: var(--cv-rojo) !important; color: #fff !important; }