/* ============================================================
   MR TRAIL v2 — Rediseño con grid de categorías
   ------------------------------------------------------------
   Paleta:
     Verde marca: #23c55e (hover: #17a34a)
     Negro:       #0a0a0a
     Gris claro:  #fafafa
   ============================================================ */

:root {
  --brand-green: #23c55e;
  --brand-green-dark: #17a34a;
  --brand-black: #0a0a0a;
  --brand-gray-50: #fafafa;
  --brand-gray-100: #f5f5f5;
  --brand-gray-200: #e5e5e5;
  --brand-gray-500: #6b7280;
  --brand-gray-700: #374151;
  --brand-white: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --max-width: 1280px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-black);
  /* Fondo "roadbook digital" — SVG vectorial con waypoints, brújula, contornos.
     Se fija (background-attachment: fixed) para que parezca un mapa sobre el
     que se desplaza el contenido. La opacidad ya está baja en el SVG. */
  background-color: #fafafa;
  background-image: url('../img/bg-topomap.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  /* overflow-x: clip evita scroll horizontal (igual que hidden) PERO
     NO rompe position:sticky en descendientes. Con hidden, todo el
     breadcrumb-bar deja de stickear. */
  overflow-x: clip;
}
/* En mobile, fixed puede dar problemas de performance en iOS.
   Lo cambiamos a scroll para que se vea bien. */
@media (max-width: 768px) {
  body { background-attachment: scroll; background-size: 1200px auto; }
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .container { padding: 0 40px; } }

/* ==========================================================
   NAVEGACIÓN
   ========================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--brand-gray-200);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  gap: 6px;
}
@media (min-width: 1024px) {
  .nav-inner { height: 132px; }
}
/* En mobile/tablet: logo a la izquierda, íconos (lang/IG/cart) + hamburguesa
   agrupados a la derecha — como en la versión v1. */
@media (max-width: 1023px) {
  .nav-inner { justify-content: flex-end; gap: 8px; }
  .nav-inner > nav { display: none; }
  .nav-logo { margin-right: auto; }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.nav-logo img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: transparent;
}
@media (min-width: 1024px) {
  .nav-logo img { width: 110px; height: 110px; }
}

/* ==========================================================
   HEADER COMPACTO (solo desktop ≥1024px)
   Al bajar —o al entrar a una ficha de producto/kit— TODO el
   header se achica en proporción: navbar, logo, menús, banderas,
   íconos y botón. El breadcrumb sticky se reajusta. La clase
   body.is-nav-compact la maneja v2.js (setupCompactNav).
   ========================================================== */
.breadcrumb-bar { transition: top 0.25s ease; }
.nav-inner,
.nav-links,
.nav-cta,
.nav-logo img,
.nav-links a,
.lang-btn,
.cart-btn,
.nav-ig,
.nav-ig svg,
.nav-cta .btn-sm { transition: all 0.25s ease; }

@media (min-width: 1024px) {
  body.is-nav-compact .nav-inner       { height: 72px; }
  body.is-nav-compact .nav-logo img    { width: 52px; height: 52px; }
  body.is-nav-compact .breadcrumb-bar  { top: 72px; }
  body.is-nav-compact .nav-links       { gap: 24px; }
  body.is-nav-compact .nav-links a     { font-size: 13.5px; }
  body.is-nav-compact .nav-cta         { gap: 10px; }
  body.is-nav-compact .lang-btn        { width: 24px; height: 24px; }
  body.is-nav-compact .cart-btn,
  body.is-nav-compact .nav-ig          { width: 34px; height: 34px; }
  body.is-nav-compact .nav-ig svg      { width: 23px; height: 23px; }
  body.is-nav-compact .nav-cta .btn-sm { padding: 6px 13px; font-size: 13px; }
}
/* El texto "MR.TRAIL" se oculta en TODAS las resoluciones — solo se muestra el logo */
.nav-logo span { display: none; }

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-gray-700);
  transition: color var(--transition);
  position: relative;
}
.nav-links a:hover { color: var(--brand-green-dark); }
.nav-links a.active { color: var(--brand-green-dark); font-weight: 600; }

/* NAV CTA — siempre visible (lang switcher + IG + carrito).
   En mobile compactamos y ocultamos el botón "Consultar". */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 640px) { .nav-cta { gap: 10px; } }
@media (min-width: 1024px) { .nav-cta { gap: 12px; } }
/* En mobile: ocultar el botón "Consultar" (queda dentro del menú hamburguesa) */
@media (max-width: 1023px) {
  .nav-cta .btn-primary { display: none; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--brand-black);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 24px;
  background: var(--brand-white);
  border-top: 1px solid var(--brand-gray-200);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 14px 8px;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--brand-gray-100);
}
.nav-mobile a:last-of-type { border-bottom: 0; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ==========================================================
   BOTONES
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  letter-spacing: -0.01em;
}
.btn-primary {
  background: var(--brand-green);
  color: var(--brand-white);
}
.btn-primary:hover {
  background: var(--brand-green-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--brand-black);
  color: var(--brand-white);
}
.btn-secondary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--brand-black);
  border-color: var(--brand-gray-200);
}
.btn-outline:hover {
  border-color: var(--brand-black);
  background: var(--brand-black);
  color: var(--brand-white);
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--brand-white);
  overflow: hidden;
  background: var(--brand-black);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.65) 50%,
    rgba(10, 10, 10, 0.85) 100%
  );
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 60px 24px;
}
@media (min-width: 640px) { .hero-content { padding: 60px 40px; } }
@media (min-width: 1024px) { .hero-content { padding: 80px 40px; } }
/* HERO — el eyebrow es el TÍTULO grande, el h1 es el SUBTÍTULO */
.hero-eyebrow {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--brand-white);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-bottom: 14px;
  max-width: 18ch;
}
.hero-title {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.95);
}
.hero-title .accent { color: var(--brand-green); }
.hero-subtitle {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 36px;
  max-width: 56ch;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================
   SECTION WRAPPERS
   ========================================================== */
section { padding: 80px 0; }
@media (min-width: 1024px) { section { padding: 120px 0; } }

.section-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
/* SECCIONES — el eyebrow es el TÍTULO grande, el h2 es el SUBTÍTULO */
.section-eyebrow {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--brand-black);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--brand-gray-700);
  margin-bottom: 12px;
}
.section-title .accent { color: var(--brand-green); }
.section-subtitle {
  font-size: 14px;
  color: var(--brand-gray-700);
  line-height: 1.6;
}

/* ==========================================================
   GRID DE CATEGORÍAS (estrella del rediseño)
   ========================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.cat-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-black);
  aspect-ratio: 4 / 5;
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.cat-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.cat-card:hover .cat-card-img { transform: scale(1.08); }

.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.15) 0%,
    rgba(10, 10, 10, 0.35) 45%,
    rgba(10, 10, 10, 0.92) 100%
  );
  z-index: 1;
  transition: background var(--transition);
}
.cat-card:hover .cat-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(35, 197, 94, 0.10) 0%,
    rgba(10, 10, 10, 0.40) 45%,
    rgba(10, 10, 10, 0.95) 100%
  );
}

.cat-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  z-index: 2;
  color: var(--brand-white);
}
.cat-card-count {
  /* Pildora con fondo oscuro semitransparente para que la "X PRODUCTOS" se
     lea siempre, sin importar la imagen de fondo de la categoría. El verde
     de marca sobre el verde de la imagen (mandos, soportes) se mimetizaba. */
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid rgba(35, 197, 94, 0.35);
}
.cat-card-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin-bottom: 6px;
  text-transform: uppercase;
}
@media (min-width: 1024px) { .cat-card-title { font-size: 34px; } }
.cat-card-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 14px;
}
.cat-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-white);
  transition: gap var(--transition);
}
.cat-card:hover .cat-card-cta { gap: 12px; color: var(--brand-green); }

/* ==========================================================
   PRODUCT CARDS (en categoría)
   ========================================================== */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px)  { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ==========================================================
   KITS — Layout agrupado por gama (START / PRO / ELITE)
   Cada gama es una sección con encabezado + 2 columnas de kits.
   Esto hace explícita la progresión de niveles entre gamas.
   ========================================================== */
.kit-tiers-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;                          /* separación entre gamas (antes: 56px) */
}
.kit-tier-section {
  display: flex;
  flex-direction: column;
  gap: 10px;                          /* entre el header de gama y la grilla */
  /* Reset del padding global de section { padding: 80px 0 } (120px en desktop).
     Sin esto cada gama llevaba 120px arriba y abajo, sumando 256px entre gamas. */
  padding: 0;
}

/* Cuando es la página de Kits, achicamos el padding-bottom del page-header gris
   para que la primera gama quede más cerca del título "Kits". El padding-top
   del <section> padre se ajusta vía JS (categoria.js) porque está inline. */
.page-header.page-header--kit { padding-bottom: 16px !important; }
section.has-kit-tiers              { padding-top: 32px !important; }
.kit-tier-header {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-gray-900, #0a0a0a);
  margin: 0;
  padding: 0 0 10px 0;
  border-bottom: 2px solid var(--brand-gray-200);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kit-tier-header::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 24px;
  background: var(--brand-green, #17a34a);
  border-radius: 3px;
}
.kit-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .kit-tier-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1024px) {
  /* En desktop limitamos el ancho total a ~2/3 del contenedor para que cada
     card mantenga aproximadamente el mismo tamaño que en una grilla de 3
     columnas (tamaño original de prod-grid). La grilla queda centrada. */
  .kit-tier-grid {
    max-width: 66.67%;
    margin-left: auto;
    margin-right: auto;
  }
  /* El header de la gama se mantiene a ancho completo (no se centra con la grilla) */
}

.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.prod-card:hover {
  border-color: var(--brand-gray-700);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.prod-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--brand-gray-100);
  overflow: hidden;
}
.prod-card-media img,
.prod-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.prod-card:hover .prod-card-media img { transform: scale(1.04); }

.prod-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.prod-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--brand-green);
  color: var(--brand-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}
.prod-badge.is-out { background: #6b7280; }
.prod-badge.is-premium { background: var(--brand-black); color: var(--brand-green); }

/* Brand logo overlay sobre la cover del card de producto.
   Temporalmente oculto — el diseño definitivo se va a trabajar después.
   Para reactivar borra el `display: none !important`. */
.prod-card-brand {
  display: none !important;
  position: absolute;
  top: 12px;
  left: 12px;
  width: 64px;
  height: 32px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.prod-card-brand img { max-width: 100%; max-height: 100%; object-fit: contain; }

.prod-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* El <a> interno que envuelve título + descripción debe crecer para empujar
   el footer (precio + botón) hacia abajo. Así todos los cards alinean su
   footer al mismo nivel sin importar el largo del texto descriptivo. */
.prod-card-body > a {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prod-card-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.prod-card-short {
  font-size: 13px;
  color: var(--brand-gray-700);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}
.prod-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-gray-100);
}
.prod-card-price {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-black);
}
.prod-card-price-suffix {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */
/* Wrapper sticky para el breadcrumb. Va justo debajo del navbar.
   IMPORTANTE: el navbar tiene altura 92px por defecto y 132px en
   desktop (≥1024px). El offset del breadcrumb debe coincidir o
   queda escondido DETRÁS del navbar (que tiene z-index mayor). */
.breadcrumb-bar {
  position: sticky;
  top: 92px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-gray-100);
}
@media (min-width: 1024px) {
  .breadcrumb-bar { top: 132px; }
}
.breadcrumb {
  padding: 10px 0;
  font-size: 13px;
  color: var(--brand-gray-500);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--brand-gray-700); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--brand-green-dark); }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--brand-gray-200);
}
.breadcrumb li:last-child { color: var(--brand-black); font-weight: 600; }

/* ==========================================================
   PAGE HEADER (categoría)
   ========================================================== */
.page-header {
  padding: 32px 0 56px;
  background: var(--brand-gray-50);
  border-bottom: 1px solid var(--brand-gray-200);
}
.page-header h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.page-header .accent { color: var(--brand-green); }
.page-header p {
  font-size: 14.5px;
  color: var(--brand-gray-700);
  max-width: 64ch;
  line-height: 1.6;
}

/* ==========================================================
   PRODUCTO — DETALLE
   ========================================================== */
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 32px 0 80px;
}
@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    padding: 48px 0 120px;
  }
}

/* Galería */
.pgallery { display: flex; flex-direction: column; gap: 12px; position: relative; }
.pgallery-main {
  position: relative;
  background: var(--brand-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* pan-y deja que el usuario haga scroll vertical normal pero captura el
     swipe horizontal para navegar entre imágenes (sin que el navegador
     scrollee la página horizontalmente). */
  touch-action: pan-y;
}
/* Flechas prev/next sobre el main de la galería */
.pgallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
  opacity: 0.85;
}
.pgallery-nav:hover  { background: #fff; opacity: 1; transform: translateY(-50%) scale(1.08); }
.pgallery-nav:active { transform: translateY(-50%) scale(0.94); }
.pgallery-nav-prev { left: 10px; }
.pgallery-nav-next { right: 10px; }
@media (max-width: 640px) {
  .pgallery-nav { width: 36px; height: 36px; opacity: 0.92; }
}

/* Contador "3 / 12" en la esquina inferior derecha del main */
.pgallery-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.02em;
  z-index: 2;
  pointer-events: none;
}

/* La imagen principal: hover = lupa tipo tienda (desktop), click = lightbox */
.pgallery-zoomable {
  cursor: zoom-in;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.pgallery-main.is-magnify-on .pgallery-zoomable { cursor: zoom-out; }

/* ---- Lupa tipo tienda (estilo Amazon / MercadoLibre) — solo desktop ---- */
/* Lente que marca sobre la imagen la zona apuntada. */
.pgallery-lens {
  position: absolute;
  z-index: 5;
  display: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.20);
  background: transparent;   /* sin relleno: solo el contorno */
  border-radius: 50%;        /* círculo */
  pointer-events: none;
}
.pgallery-lens.is-visible { display: block; }

/* Panel a la derecha con la zona ampliada (se superpone sobre la info). */
.pgallery-zoom-panel {
  position: absolute;
  top: 0;
  left: calc(100% + 20px);
  width: 100%;
  aspect-ratio: 1 / 1;
  z-index: 40;
  background-color: var(--brand-gray-100);
  background-repeat: no-repeat;
  border: 1px solid var(--brand-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.20);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-out;
}
.pgallery-zoom-panel.is-visible { opacity: 1; visibility: visible; }

/* Defensa: nunca mostrar la lupa en pantallas angostas o touch. */
@media (max-width: 1023px) {
  .pgallery-lens, .pgallery-zoom-panel { display: none !important; }
}
/* Estado PINCH-ZOOMED (touch mobile 2 dedos): la transformación la controla
   JS via inline style (translate+scale combinados). Solo desactivamos la
   transición para que el zoom siga al dedo sin lag. */
.pgallery-main.is-pinch-zoomed .pgallery-zoomable {
  transition: none;
  cursor: grab;
}
.pgallery-main.is-pinch-zoomed:active .pgallery-zoomable {
  cursor: grabbing;
}

.pgallery-main img,
.pgallery-main video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--brand-gray-100);
}
.pgallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (min-width: 640px) { .pgallery-thumbs { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .pgallery-thumbs { grid-template-columns: repeat(8, 1fr); } }
.pgallery-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
  background: var(--brand-gray-100);
}
.pgallery-thumb img,
.pgallery-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pgallery-thumb.is-active { border-color: var(--brand-green); }
.pgallery-thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--brand-white);
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Info */
.pinfo { display: flex; flex-direction: column; gap: 24px; }
.pinfo-brand {
  /* Temporalmente oculto vía display:none — el diseño definitivo del bloque
     de marca en el detalle del producto se va a trabajar después.
     Para reactivar solo borra el `display:none`. */
  display: none !important;
  height: 32px;
  align-items: center;
}
.pinfo-brand img { max-height: 100%; max-width: 140px; object-fit: contain; }

.pinfo-title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.pinfo-short {
  font-size: 14.5px;
  color: var(--brand-gray-700);
  line-height: 1.55;
}
.pinfo-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--brand-gray-200);
  border-bottom: 1px solid var(--brand-gray-200);
}
.pinfo-price-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-black);
}
.pinfo-price-label {
  font-size: 13px;
  color: var(--brand-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pinfo-stock {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pinfo-stock::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
}
.pinfo-stock.is-out { color: #b91c1c; }
.pinfo-stock.is-out::before { background: #b91c1c; }

.pinfo-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 540px) { .pinfo-actions { flex-direction: row; } }

.pinfo-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--brand-gray-700);
}

.pinfo-block {
  border-top: 1px solid var(--brand-gray-200);
  padding-top: 24px;
}
.pinfo-block-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-gray-500);
  margin-bottom: 14px;
}

.specs-list { list-style: none; display: flex; flex-direction: column; }
.specs-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-gray-100);
  font-size: 14.5px;
}
.specs-list li:last-child { border-bottom: 0; }
.specs-list .spec-label { color: var(--brand-gray-700); }
.specs-list .spec-value { font-weight: 600; text-align: right; max-width: 60%; }

/* Modo viñetas: items con label vacío se renderizan como lista simple */
.specs-list li.spec-bullet {
  display: block;
  padding: 10px 0;
  color: var(--brand-gray-800);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
}
.specs-list--bullets li.spec-bullet:first-child { padding-top: 0; }

/* Items de contenido mixto (sin etiqueta): párrafo, subheader, viñeta-con-dash */
.specs-list li.spec-paragraph {
  display: block;
  padding: 0 0 12px 0;
  border-bottom: none;
  color: var(--brand-gray-800);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
}
.specs-list li.spec-heading {
  display: block;
  padding: 14px 0 6px 0;
  border-bottom: none;
  color: var(--brand-gray-900, var(--brand-gray-800));
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: left;
}
.specs-list li.spec-bullet-dash {
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 18px;
  padding: 4px 0;
  border-bottom: none;
  color: var(--brand-gray-800);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
}

/* ==========================================================
   FEATURES (mini secciones home)
   ========================================================== */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.feature {
  padding: 28px;
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.feature:hover {
  border-color: var(--brand-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(35, 197, 94, 0.1);
  color: var(--brand-green-dark);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.feature h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.feature p {
  font-size: 13.5px;
  color: var(--brand-gray-700);
  line-height: 1.55;
}

/* ==========================================================
   SOBRE / CTA
   ========================================================== */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .about { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}
.about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
/* Variante centrada para el bloque "Nosotros" sin imagen */
.about-centered {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.about-centered .section-title { text-align: center; }
.about-lead {
  font-size: 14.5px;
  color: var(--brand-gray-700);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 48rem;
}
.about-centered .about-list { display: inline-flex; }

.about-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  text-align: left;
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--brand-gray-700);
}
.about-list li::before {
  content: '✓';
  color: var(--brand-green-dark);
  font-weight: 800;
  flex-shrink: 0;
}

.cta-band {
  background: var(--brand-black);
  color: var(--brand-white);
  text-align: center;
  border-radius: var(--radius-xl);
  padding: 56px 24px;
}
.cta-band h2 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cta-band h2 .accent { color: var(--brand-green); }
.cta-band p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 56ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  background: var(--brand-black);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 20px;
  color: var(--brand-white);
  margin-bottom: 12px;
}
.footer-logo img { width: 40px; height: 40px; object-fit: contain; }
.footer-logo .brand-dot { color: var(--brand-green); }
.footer-tagline { font-size: 14px; line-height: 1.6; max-width: 40ch; }

.footer h4 {
  color: var(--brand-white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 14.5px; transition: color var(--transition); }
.footer ul a:hover { color: var(--brand-green); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.7); }
.footer-bottom a:hover { color: var(--brand-green); }

/* ==========================================================
   FLOATING WHATSAPP
   ========================================================== */
.fab-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
}
.fab-wa:hover { transform: scale(1.06); }

/* ==========================================================
   MODAL VERIFICACIÓN ANTI-BOT
   ========================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.is-open { display: flex; }

.modal-card {
  background: var(--brand-white);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.modal-card h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.modal-card p {
  font-size: 14.5px;
  color: var(--brand-gray-700);
  margin-bottom: 24px;
}
.modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.modal-actions .btn { flex: 1; }
.modal-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.verify-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(35, 197, 94, 0.12);
  color: var(--brand-green-dark);
  border-radius: 50%;
  margin-bottom: 14px;
}

/* Checkbox "No soy un robot" estilo v1 */
.wa-verify {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-gray-50);
  border: 1px solid var(--brand-gray-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--brand-black);
  user-select: none;
  margin: 12px 0;
  transition: border-color var(--transition);
}
.wa-verify:hover { border-color: var(--brand-gray-700); }
.wa-verify input[type="checkbox"] { display: none; }
.wa-verify-fake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--brand-white);
  border: 2px solid var(--brand-gray-200);
  border-radius: 4px;
  color: transparent;
  transition: all var(--transition);
}
.wa-verify input[type="checkbox"]:checked + .wa-verify-fake {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}
.wa-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* ==========================================================
   LANG SWITCHER — banderas estilo v1
   ========================================================== */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.lang-btn:hover { opacity: 0.9; transform: scale(1.08); }
.lang-btn.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--brand-green);
}
.lang-switcher-mobile { gap: 8px; padding: 8px 0 0; }

/* ==========================================================
   REVEAL ON SCROLL
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================
   UTILS
   ========================================================== */
.text-center { text-align: center; }
.muted { color: var(--brand-gray-500); }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--brand-gray-500);
  font-size: 16px;
}

/* ==========================================================
   CARRITO (drawer lateral)
   ========================================================== */
.cart-btn,
.nav-ig {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--brand-black);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.cart-btn:hover { background: var(--brand-gray-100); }

/* Instagram: siempre en color de marca (rosado/magenta) y un poco más
   grande para que se note al lado de los flags de idiomas. Hover sutil
   con escala. */
.nav-ig {
  color: #E1306C;
}
.nav-ig svg {
  width: 28px;
  height: 28px;
}
.nav-ig:hover {
  background: rgba(225, 48, 108, 0.08);
  transform: scale(1.08);
}
.cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--brand-green);
  color: var(--brand-white);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-count.is-hidden { display: none; }

/* Animación de bounce del icono del carrito (al agregar un producto) */
@keyframes cart-bounce-kf {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.cart-btn.cart-bounce { animation: cart-bounce-kf 0.45s ease-out; }

/* Estado "¡Agregado!" del botón después del click */
.btn.is-just-added,
.btn-add.is-just-added {
  background: var(--brand-green, #17a34a) !important;
  color: #fff !important;
  border-color: var(--brand-green, #17a34a) !important;
  pointer-events: none;
  transition: background 0.2s, color 0.2s;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
  z-index: 90;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 420px;
  height: 100dvh;
  background: var(--brand-white);
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  padding: 20px;
  border-bottom: 1px solid var(--brand-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.drawer-close {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--brand-gray-700);
  transition: background var(--transition);
}
.drawer-close:hover { background: var(--brand-gray-100); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-foot {
  border-top: 1px solid var(--brand-gray-200);
  padding: 18px 20px;
  background: var(--brand-gray-50);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-empty {
  text-align: center;
  color: var(--brand-gray-500);
  font-size: 14.5px;
  padding: 60px 20px;
}

.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 12px;
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-100);
  border-radius: var(--radius-md);
  align-items: center;
}
.cart-row-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--brand-gray-100);
}
.cart-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-info { min-width: 0; }
.cart-row-title { font-size: 14px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge "KIT" en el título de items tipo kit en el carrito */
.cart-row-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-white);
  background: var(--brand-green-dark);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
  transform: translateY(-1px);
}
.cart-row-price { font-size: 13px; color: var(--brand-gray-700); display: inline-flex; align-items: baseline; gap: 5px; }
.cart-iva {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-row-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-gray-100);
  border-radius: 999px;
  padding: 2px;
  margin-top: 6px;
}
.cart-row-qty button {
  width: 22px; height: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-gray-700);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-row-qty button:hover { background: var(--brand-white); }
.cart-row-qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }
/* Botón "+" deshabilitado cuando se llegó al tope de stock disponible.
   Aplica al botón generado con clase .cart-qty-inc.is-disabled (ver v2.js). */
.cart-row-qty button.is-disabled,
.cart-row-qty button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.cart-row-qty button.is-disabled:hover,
.cart-row-qty button[disabled]:hover {
  background: transparent;
}

/* Toast no-bloqueante para avisar tope de stock.
   Aparece abajo a la derecha, se oculta solo después de ~2.8s.
   El nodo se crea on-demand en cartStockToast() de v2.js. */
.cart-stock-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--brand-gray-900, #1a1a1a);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.cart-stock-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 600px) {
  .cart-stock-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    text-align: center;
  }
}
.cart-row-remove {
  background: transparent;
  color: var(--brand-gray-500);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
  margin-top: 4px;
}
.cart-row-remove:hover { color: #dc2626; }

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cart-total-row span:first-child {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-gray-500);
}
.cart-total-row span:last-child {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cart-disclaimer {
  font-size: 11.5px;
  color: var(--brand-gray-500);
  text-align: center;
  line-height: 1.4;
}

/* Botón "agregar al carrito" en cards y detalle */
.btn-add {
  background: var(--brand-black);
  color: var(--brand-white);
  border: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-add:hover { background: var(--brand-green-dark); }
.btn-add.added { background: var(--brand-green); }

/* Estado "tope de stock alcanzado" — aplica tanto al botón pequeño de
   las cards (.btn-add) como al botón grande en la página de producto/kit
   (.btn-primary con id="p-add" o "k-add"). Sincronizado por refreshAddButtons()
   en v2.js: agrega clase .is-stock-cap y atributo disabled cuando ya no
   se puede agregar más unidades. */
.btn-add.is-stock-cap,
.btn-add[disabled],
.btn-primary.is-stock-cap,
.btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.btn-add.is-stock-cap:hover,
.btn-add[disabled]:hover {
  /* Cancela el hover normal del botón pequeño verde */
  background: var(--brand-green);
}
.btn-primary.is-stock-cap:hover,
.btn-primary[disabled]:hover {
  /* No oscurecer el botón grande al hacer hover cuando está deshabilitado */
  filter: grayscale(0.4);
}

/* ==========================================================
   STOCK — pill, overlay y botón consultar (estilo v1)
   ========================================================== */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: 6px;
  width: fit-content;
}
.stock-pill::before { content: "\25CF"; font-size: 9px; }
.stock-pill.stock-in { background: rgba(35,197,94,0.12); color: #15803d; }
.stock-pill.stock-out { background: rgba(220,38,38,0.10); color: #b91c1c; }
/* PRÓXIMAMENTE: azul-índigo, diferente del rojo de agotado y del verde de stock */
.stock-pill.stock-prelaunch { background: rgba(37,99,235,0.12); color: #1d4ed8; }
.stock-pill-lg { font-size: 12px; padding: 5px 12px; }

/* Overlay "AGOTADO" sobre la imagen */
.out-of-stock-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(220,38,38,0.92);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 2;
}
/* Variante PRÓXIMAMENTE: azul-índigo en vez de rojo, así se distingue del "agotado" */
.out-of-stock-overlay.is-prelaunch {
  background: rgba(37,99,235,0.92);
  box-shadow: 0 4px 10px rgba(37,99,235,0.22);
}

/* Stock-note overlay sobre la imagen del card. Aparece cuando el producto está
   sin stock Y tiene nota de stock cargada (columna 'nota' de la hoja stock en
   productos.xlsx). Ubicado arriba-izquierda para no chocar con el AGOTADO. */
.stock-note-card-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  z-index: 2;
  max-width: calc(100% - 20px);
  letter-spacing: 0.02em;
  line-height: 1.3;
  /* Limita a 2 líneas si el texto es largo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================
   LIGHTBOX — overlay fullscreen para zoom de imagen
   Activado al click en la imagen principal de la galería.
   ========================================================== */
.mrt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  /* pan-y deja al usuario hacer scroll vertical, capturamos swipe horizontal */
  touch-action: pan-y;
  animation: mrt-lightbox-in 0.18s ease-out;
}
.mrt-lightbox.is-open { display: flex; }
@keyframes mrt-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mrt-lightbox-stage {
  width: 92vw;
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mrt-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}
.mrt-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.mrt-lightbox-close:hover { background: rgba(255, 255, 255, 0.30); }
.mrt-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
.mrt-lightbox-nav:hover { background: rgba(255, 255, 255, 0.30); }
.mrt-lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
.mrt-lightbox-prev { left: 16px; }
.mrt-lightbox-next { right: 16px; }
@media (max-width: 640px) {
  .mrt-lightbox-nav { width: 44px; height: 44px; }
  .mrt-lightbox-prev { left: 8px; }
  .mrt-lightbox-next { right: 8px; }
}
.mrt-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 16px;
  border-radius: 16px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ==========================================================
   PRÓXIMAMENTE — sello diagonal grande sobre el card del producto
   ----------------------------------------------------------
   Cuando un producto tiene pre_launch=TRUE en xlsx, su card:
   (1) atenúa la imagen (.is-prelaunch-card) y
   (2) muestra este banner diagonal centrado sobre la imagen.
   ========================================================== */
.prod-card-media.is-prelaunch-card img,
.prod-card-media.is-prelaunch-card video {
  opacity: 0.5;
  filter: grayscale(0.35);
  transition: opacity 0.25s, filter 0.25s;
}
.prod-card-media.is-prelaunch-card:hover img,
.prod-card-media.is-prelaunch-card:hover video {
  opacity: 0.62;
  filter: grayscale(0.20);
}

.prelaunch-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(37, 99, 235, 0.92);
  padding: 10px 28px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(0,0,0,0.06);
}

/* Cards agotadas: imagen desaturada */
.prod-card.is-out-of-stock .prod-card-media img,
.prod-card.is-out-of-stock .prod-card-media video {
  filter: saturate(0.55) brightness(0.92);
}
.kit-card.is-out-of-stock { opacity: 0.92; }
.kit-card.is-out-of-stock .kit-products img { filter: saturate(0.55) brightness(0.92); }

/* Botón "Consultar por WhatsApp" para productos sin stock (estilo v1) */
.btn-stock-consult {
  background: #25d366;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn-stock-consult:hover { background: #1aa758; transform: translateY(-1px); }
.btn-stock-consult.btn-lg { padding: 14px 24px; font-size: 13.5px; }

/* ==========================================================
   KIT CARDS (página de Kits)
   ========================================================== */
.kit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px)  { .kit-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1280px) { .kit-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================
   KIT CARD V2 — estilo similar a producto pero con overlay
   con el nombre del kit sobre la imagen
   ========================================================== */
.kit-card-v2 .prod-card-media {
  /* Sin fondo propio: el card padre (.kit-card-v2.kit-bg-X) provee el color
     uniforme del card completo. */
  background: transparent;
}
.kit-card-overlay-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
  color: var(--brand-white);
  z-index: 1;
  pointer-events: none;
}
.kit-tier-overlay {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--brand-black);
  margin-bottom: 6px;
  align-self: flex-start;
}
.kit-card-overlay-label strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Tinte de color por gama */
.kit-card-v2.kit-color-verde   .kit-tier-overlay { background: #166534; color: #fff; }
.kit-card-v2.kit-color-azul    .kit-tier-overlay { background: #1e40af; color: #fff; }
.kit-card-v2.kit-color-naranja .kit-tier-overlay { background: #c2410c; color: #fff; }

/* ==========================================================
   KIT CARDS — Fondo de color sólido por gama (en vez de imagen)
   ----------------------------------------------------------
   START → verde · PRO → azul · ELITE → rojo
   La imagen del kit se omite en el card (no se renderiza el <img>).
   Solo aparece el nombre del kit y el badge de gama centrados.
   ========================================================== */
.kit-card-media--solid {
  /* Ocultar cualquier <img> que pudiera estar dentro (defensivo) */
}
.kit-card-media--solid img { display: none; }

/* Fondos por gama — ahora aplicados al CARD COMPLETO, no solo al media.
   Se usa una variable CSS para que el body del card pueda heredar el mismo color. */
.kit-bg-default { --kit-tier-bg: linear-gradient(135deg, #737373 0%, #404040 100%); background: var(--kit-tier-bg); }
.kit-bg-start   { --kit-tier-bg: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); background: var(--kit-tier-bg); }   /* verde más suave */
.kit-bg-pro     { --kit-tier-bg: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); background: var(--kit-tier-bg); }   /* azul más suave */
.kit-bg-elite   { --kit-tier-bg: linear-gradient(135deg, #f87171 0%, #dc2626 100%); background: var(--kit-tier-bg); }   /* rojo más suave */

/* Aplicar el mismo color al card completo y ajustar texto del body a blanco */
.kit-card-v2 {
  /* sobreescribe el bg blanco del .prod-card cuando es un kit card */
  background: var(--kit-tier-bg, #fff);
  border: none;
  color: #fff;
}
.kit-card-v2 .prod-card-body { color: #fff; }
.kit-card-v2 .prod-card-title { color: #fff; }
.kit-card-v2 .prod-card-short { color: rgba(255, 255, 255, 0.88); }
.kit-card-v2 .prod-card-price,
.kit-card-v2 .prod-card-price-suffix { color: #fff; }
.kit-card-v2 .prod-card-footer { border-top-color: rgba(255, 255, 255, 0.2); }
.kit-card-v2 .stock-pill { background: rgba(0, 0, 0, 0.25); color: #fff; }
.kit-card-v2 .kit-save-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}
/* Botón "Ver kit" en outline blanco sobre fondo de color */
.kit-card-v2 .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
}
.kit-card-v2:hover .btn-outline {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}
/* Hover del card: leve elevación, sin cambiar borde porque no tiene */
.kit-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Versión centrada del label cuando se usa el fondo sólido (sin imagen abajo
   sobre la cual posar el texto). Texto centrado tanto vertical como horiz. */
.kit-card-overlay-label--centered {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  /* Sin gradient (el fondo sólido ya provee contraste) */
  background: none;
}
.kit-card-overlay-label--centered .kit-tier-overlay {
  /* Pill semi-transparente sobre el color sólido — se ve sutil */
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.kit-card-overlay-label--centered strong {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  color: #fff;
}
@media (min-width: 1024px) {
  .kit-card-overlay-label--centered strong { font-size: 34px; }
}

.kit-save-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  background: rgba(35,197,94,0.10);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ==========================================================
   KIT DETAIL PAGE (kit.html)
   ========================================================== */
.kit-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px 0 64px;
}
@media (min-width: 1024px) {
  .kit-detail {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    padding: 48px 0 80px;
  }
}
.kit-hero-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--brand-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kit-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--brand-gray-100);
}

/* Galería del kit — link en la imagen principal con caption del producto */
.pgallery-main-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: inherit;
}
.pgallery-main-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--brand-gray-100);
  transition: transform 300ms ease;
}
.pgallery-main-link:hover img { transform: scale(1.02); }
.pgallery-main-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(10, 10, 10, 0.85);
  color: var(--brand-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  transition: all var(--transition);
}
.pgallery-main-caption .arrow {
  font-size: 15px;
  transition: transform var(--transition);
}
.pgallery-main-link:hover .pgallery-main-caption {
  background: var(--brand-green);
  color: var(--brand-white);
}
.pgallery-main-link:hover .pgallery-main-caption .arrow {
  transform: translateX(3px);
}
.kit-hero-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kit-tier {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-gray-100);
  color: var(--brand-black);
}
.kit-tier.kit-color-verde   { background: #166534; color: #fff; }
.kit-tier.kit-color-azul    { background: #1e40af; color: #fff; }
.kit-tier.kit-color-naranja { background: #c2410c; color: #fff; }
.kit-hero-title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.kit-hero-desc {
  font-size: 16px;
  color: var(--brand-gray-700);
  line-height: 1.55;
}
.kit-hero-price {
  padding: 20px 0;
  border-top: 1px solid var(--brand-gray-200);
  border-bottom: 1px solid var(--brand-gray-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kit-hero-price-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: block;
}
.kit-hero-savings {
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kit-hero-savings strong {
  font-size: 14px;
  font-weight: 800;
}
.kit-hero-savings-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-gray-500);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 2px;
}

.kit-products-section {
  padding: 64px 0;
  border-top: 1px solid var(--brand-gray-200);
}

/* Lista de productos incluidos (sin imágenes) en el panel derecho */
.kit-includes-block {
  margin-top: 4px;
}
.kit-includes-h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-gray-500);
  margin-bottom: 12px;
}
.kit-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kit-includes-list li { margin: 0; }
.kit-includes-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--brand-gray-50);
  border: 1px solid var(--brand-gray-100);
  border-radius: var(--radius-md);
  color: var(--brand-black);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}
.kit-includes-list a:hover {
  background: var(--brand-white);
  border-color: var(--brand-green);
  color: var(--brand-green-dark);
}
.kit-includes-name { flex: 1; }
.kit-includes-out {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(220,38,38,0.10);
  color: #b91c1c;
}
.kit-includes-arrow {
  font-size: 16px;
  color: var(--brand-gray-500);
  transition: transform var(--transition), color var(--transition);
}
.kit-includes-list a:hover .kit-includes-arrow {
  color: var(--brand-green-dark);
  transform: translateX(3px);
}

/* Legacy — kit-card v1 (mantenida por compatibilidad si alguien la usa) */
.kit-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.kit-card:hover {
  border-color: var(--brand-gray-700);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.kit-card-head {
  padding: 24px;
  background: linear-gradient(135deg, var(--brand-black) 0%, #1a1a1a 100%);
  color: var(--brand-white);
  position: relative;
}
.kit-card-head.kit-verde  { background: linear-gradient(135deg, #166534 0%, #15803d 100%); }
.kit-card-head.kit-azul   { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); }
.kit-card-head.kit-naranja{ background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%); }

.kit-tier {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: 8px;
}
.kit-card-head.kit-verde .kit-tier  { color: #86efac; }
.kit-card-head.kit-azul .kit-tier   { color: #93c5fd; }
.kit-card-head.kit-naranja .kit-tier{ color: #fed7aa; }

.kit-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.kit-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.kit-card-body { padding: 20px 24px; flex: 1; }
.kit-card-body h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-gray-500);
  margin-bottom: 12px;
  font-weight: 700;
}
.kit-products { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.kit-products li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--brand-gray-50);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.kit-products li:hover { background: var(--brand-gray-100); }
.kit-products img {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--brand-white);
}
.kit-card-foot {
  padding: 18px 24px;
  border-top: 1px solid var(--brand-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kit-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ==========================================================
   PRODUCTO — secciones extra (info ampliada bajo galería)
   ========================================================== */
.p-extra {
  padding-top: 24px;
  border-top: 1px solid var(--brand-gray-200);
  margin-top: 24px;
}
.p-extra h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.p-extra h2 .accent { color: var(--brand-green); }
.p-extra h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 28px;
  margin-bottom: 10px;
}
.p-extra p {
  font-size: 14px;
  color: var(--brand-gray-700);
  line-height: 1.7;
  margin-bottom: 14px;
}
.p-extra ul {
  list-style: disc;
  padding-left: 22px;
  color: var(--brand-gray-700);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.p-extra-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 768px) { .p-extra-grid { grid-template-columns: repeat(3, 1fr); } }
.p-extra-card {
  padding: 20px;
  background: var(--brand-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-gray-100);
}
.p-extra-card h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand-green-dark);
  margin-bottom: 8px;
}
.p-extra-card p { font-size: 14px; line-height: 1.55; margin: 0; }

/* ==========================================================
   FOOTER ampliado
   ========================================================== */
.footer-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 640px) { .footer-info { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-info { grid-template-columns: repeat(4, 1fr); } }

.footer-info-item {
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
}
.footer-info-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: rgba(35,197,94,0.12);
  color: var(--brand-green);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.footer-info-item h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.footer-info-item p {
  color: var(--brand-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.footer-info-item a { color: var(--brand-white); }

/* Instagram con logo */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-white);
  font-weight: 600;
  font-size: 14.5px;
}
.ig-link:hover { color: var(--brand-green); }
.ig-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: var(--brand-white);
  border-radius: 8px;
}

/* ==========================================================
   POLÍTICAS MODAL
   ========================================================== */
.modal-card-wide {
  max-width: 640px;
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-card-wide h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-align: left;
}
.modal-card-wide h4 {
  font-size: 14px;
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--brand-black);
}
.modal-card-wide p, .modal-card-wide ul {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--brand-gray-700);
  margin: 0 0 12px;
  text-align: left;
}
.modal-card-wide ul { padding-left: 20px; list-style: disc; }
.modal-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gray-500);
  background: transparent;
}
.modal-close-btn:hover { background: var(--brand-gray-100); color: var(--brand-black); }
.modal-card { position: relative; }

/* ==========================================================
   CONTACTO + FOOTER — estilo v1 (centrado, badge, trust grid)
   ========================================================== */

/* "Contacto" como TÍTULO grande */
.v1-badge {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--brand-black);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-transform: none;
}

/* Botón outline oscuro (v1) */
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--brand-black);
  color: var(--brand-black);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-outline-dark:hover {
  background: var(--brand-black);
  color: var(--brand-white);
}

/* Sección Contacto v1 (centrada) */
.v1-contacto {
  background: var(--brand-gray-50);
  padding: 96px 0;
}
@media (min-width: 1024px) { .v1-contacto { padding: 120px 0; } }

.v1-contacto-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.v1-contacto h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin-top: 12px;
  color: var(--brand-gray-700);
}
.v1-contacto h2 .accent { color: var(--brand-green); }
.v1-contacto-sub {
  margin: 16px auto 0;
  max-width: 42rem;
  font-size: 13.5px;
  color: rgba(10,10,10,0.6);
  line-height: 1.6;
}

.v1-cta-row {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
@media (min-width: 640px) { .v1-cta-row { flex-direction: row; } }
.v1-cta-row .btn-primary,
.v1-cta-row .btn-outline-dark {
  padding: 16px 32px;
  font-size: 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Horario + Ubicación pair
   Mobile: columna alineada a la izquierda dentro de un bloque centrado
   (así los íconos quedan en la MISMA columna vertical, como v1). */
.contact-info-pair {
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  font-size: 14px;
  width: max-content;
  max-width: 100%;
}
@media (min-width: 640px) {
  .contact-info-pair {
    flex-direction: row;
    align-items: center;
    gap: 56px;
    width: auto;
  }
}
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-info-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(35,197,94,0.15);
  color: var(--brand-green-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-text { text-align: left; }
.contact-info-text .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(10,10,10,0.5);
  margin-bottom: 2px;
}
.contact-info-text .value {
  font-weight: 600;
  color: rgba(10,10,10,0.85);
}

/* Trust grid (4 items con tooltip) */
.trust-grid {
  margin: 56px auto 0;
  max-width: 64rem;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  position: relative;
  background: var(--brand-white);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: help;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.trust-item:hover,
.trust-item:focus-visible {
  border-color: var(--brand-green);
  box-shadow: 0 12px 24px -16px rgba(35,197,94,0.4);
}
.trust-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(35,197,94,0.15);
  color: var(--brand-green-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg { width: 20px; height: 20px; }
.trust-item p { font-size: 14px; font-weight: 600; line-height: 1.3; }

.trust-item[data-tooltip]::before,
.trust-item[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 30;
}
.trust-item[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--brand-black);
  color: var(--brand-white);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  width: 240px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.trust-item[data-tooltip]::after {
  content: "";
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: var(--brand-black);
}
.trust-item[data-tooltip]:hover::before,
.trust-item[data-tooltip]:hover::after,
.trust-item[data-tooltip]:focus-visible::before,
.trust-item[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================
   FOOTER v1 (compacto, centrado)
   ========================================================== */
.footer-v1 {
  background: var(--brand-black);
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0;
}
.footer-v1 .container { padding: 0 20px; }
.footer-v1-ig-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.footer-v1-ig-info {
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,0.55);
}
.footer-v1-ig-info p { line-height: 1.6; }

.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 18px -6px rgba(220,39,67,0.55);
}
.footer-ig:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(220,39,67,0.7);
  color: #fff;
}

.footer-v1-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  font-size: 14px;
  margin-bottom: 28px;
}
.footer-v1-links a,
.footer-v1-links button {
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 0;
  transition: color .2s;
}
.footer-v1-links a:hover,
.footer-v1-links button:hover { color: var(--brand-white); }

.footer-v1-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
@media (min-width: 640px) {
  .footer-v1-bottom { flex-direction: row; justify-content: center; }
}
.footer-v1-bottom img { height: 28px; width: auto; }

/* ============================================================
   BLOQUE SEO DE CATEGORÍA (ej: "Pantalla para moto" en tablets)
   ------------------------------------------------------------
   Se inyecta solo en categorías específicas vía _prerender.js.
   Para otras categorías el placeholder queda vacío y no aparece.
   ============================================================ */
.cat-seo-section {
  padding: 56px 0 0;
}
.cat-seo-section .container {
  max-width: 880px;
  text-align: center;
}
.cat-seo-hook {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: var(--brand-black);
}
.cat-seo-hook .accent { color: var(--brand-green-dark); }
.cat-seo-body {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--brand-gray-700);
  max-width: 720px;
  margin: 0 auto;
}
.footer-v1-logo-link {
  display: inline-flex;
  transition: transform var(--transition), opacity var(--transition);
}
.footer-v1-logo-link:hover { transform: translateY(-2px); opacity: 0.85; }

/* ============================================================
   PÁGINA DE MARCA (marca.html?b=...)
   ============================================================ */
.brand-hero {
  padding: 56px 0 36px;
  background: linear-gradient(180deg, var(--brand-gray-50) 0%, var(--brand-white) 100%);
  border-bottom: 1px solid var(--brand-gray-200);
}
.brand-hero-inner { max-width: 820px; }
.brand-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-gray-500);
  background: var(--brand-gray-100);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.brand-hero-eyebrow.is-official {
  color: var(--brand-green-dark);
  background: rgba(35, 197, 94, 0.12);
  border: 1px solid rgba(35, 197, 94, 0.3);
}
.brand-hero-eyebrow.is-official::before {
  content: '✓ ';
  font-weight: 700;
}
.brand-hero-title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.brand-hero-tagline {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--brand-gray-700);
  margin-bottom: 22px;
  max-width: 680px;
}
.brand-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.brand-meta-item {
  font-size: 14px;
  color: var(--brand-gray-700);
  background: var(--brand-white);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--brand-gray-200);
  font-weight: 500;
}

.brand-description {
  padding: 56px 0;
}
.brand-description-inner {
  max-width: 820px;
}
.brand-description-inner h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.brand-description-inner p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--brand-gray-700);
  margin-bottom: 14px;
}
.brand-description-inner p:last-child { margin-bottom: 0; }

/* Línea de marcas en el footer (discreta, solo texto) */
.footer-v1-brands {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.8;
}
.footer-v1-brands-label {
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-right: 6px;
}
.footer-v1-brands a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  margin: 0 2px;
}
.footer-v1-brands a:hover {
  color: var(--brand-green);
  text-decoration: underline;
}
.footer-v1-brands .sep {
  color: rgba(255,255,255,0.3);
  margin: 0 4px;
}

/* ============================================================
   PÁGINA LEGAL (/politicas) — contenido de texto largo
   Mismo contenido que el modal de políticas, ahora como página
   navegable con URL propia (requisito para Google Merchant Center).
   ============================================================ */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 0 80px;
}
.legal-breadcrumb {
  margin-bottom: 28px;
  font-size: 13px;
}
.legal-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  color: var(--brand-gray-500);
}
.legal-breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: var(--brand-gray-200);
}
.legal-breadcrumb a {
  color: var(--brand-gray-500);
  text-decoration: none;
}
.legal-breadcrumb a:hover { color: var(--brand-green); }

.legal-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 36px;
  color: var(--brand-gray-900);
}
.legal-section {
  margin-bottom: 36px;
}
.legal-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--brand-gray-900);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-gray-100);
}
.legal-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--brand-gray-700);
  margin-bottom: 12px;
}
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.legal-list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--brand-gray-700);
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
}
.legal-list a {
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 600;
}
.legal-list a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .legal-page { padding: 32px 0 56px; }
  .legal-title { font-size: 27px; margin-bottom: 28px; }
  .legal-section h2 { font-size: 18px; }
}