/* ============================================================
   SNEL SEGURIDAD — Estilos globales
   ============================================================ */

/* --- Variables de diseño (paleta Snel: negro + cyan turquesa) --- */
:root {
  /* Marca: cyan turquesa */
  --cyan-500: #00D4FF;
  --cyan-400: #33DDFF;
  --cyan-600: #00B8DB;
  --cyan-700: #0096B5;
  --cyan-50:  #E6F9FE;
  --cyan-100: #B8EDFA;

  /* Antiguos azules ahora son negros / grises oscuros */
  --azul-900: #0F1419;   /* Casi negro — fondo header / footer */
  --azul-800: #1A1F26;   /* Gris oscuro — superficies oscuras */
  --azul-700: #00D4FF;   /* Acento principal (antes azul medio, ahora cyan) */
  --azul-600: #00B8DB;   /* Cyan oscuro */
  --azul-50:  #E6F9FE;   /* Cyan muy claro — fondos suaves */

  /* Antiguos ámbar ahora son cyan brillante (para CTAs primarios) */
  --ambar-500: #00D4FF;
  --ambar-400: #33DDFF;
  --ambar-100: #B8EDFA;

  /* Amber real para indicadores semánticos (estrellas, advertencias) */
  --warning: #F59E0B;
  --warning-100: #FEF3C7;

  --rojo:    #EF4444;
  --verde:   #10B981;
  --verde-100: #D1FAE5;

  --gris-900: #0F1419;
  --gris-800: #1A1F26;
  --gris-700: #2D343F;
  --gris-600: #475569;
  --gris-500: #64748B;
  --gris-400: #94A3B8;
  --gris-300: #CBD5E1;
  --gris-200: #E2E8F0;
  --gris-100: #F1F5F9;
  --gris-50:  #F8FAFC;
  --blanco:  #FFFFFF;

  --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sombra-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --sombra-hover: 0 8px 24px rgba(11, 37, 69, 0.15);

  --radio-sm: 6px;
  --radio: 10px;
  --radio-lg: 16px;
  --radio-xl: 24px;

  --transicion: all 0.18s ease;

  --max-ancho: 1280px;
}

/* --- Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Garantizar que el atributo HTML `hidden` siempre oculte (sobrepasa display: flex/grid/etc.) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: var(--gris-900);
  background: var(--gris-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--cyan-700); text-decoration: none; }
a:hover { color: var(--cyan-600); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* --- Contenedor --- */
.container { max-width: var(--max-ancho); margin: 0 auto; padding: 0 20px; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--azul-900);
  color: var(--blanco);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra-md);
}
.header-top {
  background: var(--gris-900);
  font-size: 13px;
  padding: 6px 0;
  color: var(--gris-300);
}
.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.header-top a { color: var(--gris-300); }
.header-top a:hover { color: var(--ambar-400); }

.header-main {
  padding: 14px 0;
}
.header-main .container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  flex-shrink: 0;
  height: 68px;
  display: block;
}
.logo img,
.logo .logo-svg {
  height: 100%;
  width: auto;
  display: block;
}

/* Buscador */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 700px;
  display: flex;
}
.search {
  flex: 1;
  display: flex;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  max-width: none;
}

/* Desplegable de sugerencias del buscador */
.search-sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden auto;
  max-height: 70vh;
  z-index: 1200;
}
.search-sugerencias .sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--gris-900);
  border-bottom: 1px solid var(--gris-100);
}
.search-sugerencias .sug-item:hover,
.search-sugerencias .sug-item.activo {
  background: var(--gris-100);
}
.search-sugerencias .sug-item img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  background: #f1f5f9;
  border-radius: 6px;
}
.search-sugerencias .sug-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.search-sugerencias .sug-nom {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-sugerencias .sug-marca {
  font-size: 11.5px;
  color: var(--gris-600);
}
.search-sugerencias .sug-precio {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--azul-900);
  white-space: nowrap;
}
.search-sugerencias .sug-vertodos {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--gris-100);
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--azul-900);
}
.search-sugerencias .sug-vertodos:hover {
  background: var(--gris-200);
}
.search select {
  background: var(--gris-100);
  border: none;
  padding: 0 12px;
  color: var(--gris-700);
  border-right: 1px solid var(--gris-200);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.search input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  color: var(--gris-900);
}
.search button {
  background: var(--ambar-500);
  color: var(--azul-900);
  padding: 0 22px;
  font-weight: 700;
  font-size: 14px;
  transition: var(--transicion);
}
.search button:hover { background: var(--ambar-400); }

/* Acciones header */
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-link {
  color: var(--blanco);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: var(--transicion);
}
.header-link:hover { color: var(--ambar-400); }
.header-link strong { font-size: 14px; font-weight: 700; }

/* ----- Dropdown "Mi cuenta" ----- */
.cuenta-menu-wrap { position: relative; }
.cuenta-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
}
.cuenta-btn:hover { border-color: rgba(255,255,255,.3); color: var(--ambar-400); }
.cuenta-saludo {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.1;
}
.cuenta-saludo strong { color: #fff; font-weight: 600; }
.cuenta-btn strong { font-size: 14px; font-weight: 700; }

.cuenta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  min-width: 280px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(15,20,25,.05);
  padding: 12px;
  z-index: 100;
}
.cuenta-menu::before {
  content: '';
  position: absolute;
  top: -7px; right: 24px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -1px -1px 1px rgba(15,20,25,.04);
}
.cuenta-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #1f2937;
  font-size: 14px;
  transition: background .15s;
}
.cuenta-menu .menu-item:hover { background: #f0fdff; color: #00B8DB; }
.cuenta-menu .menu-item .icono { font-size: 18px; width: 22px; text-align: center; }
.cuenta-menu .menu-item.destacado {
  background: #f0fdff;
  border: 1px solid #cdf6ff;
}
.cuenta-menu .menu-item.destacado strong { display:block; color: #0F1419; }
.cuenta-menu .menu-item.destacado small { display:block; color: #64748b; font-size: 12px; }
.cuenta-menu .menu-item.rojo { color: #dc2626; }
.cuenta-menu .menu-item.rojo:hover { background: #fef2f2; color: #b91c1c; }
.cuenta-menu .menu-sep { border: none; border-top: 1px solid #e2e8f0; margin: 8px 4px; }
.cuenta-menu .btn-block { width: 100%; display: block; text-align: center; text-decoration: none; }

.cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blanco);
}
.cart-icon:hover { color: var(--ambar-400); }
.cart-icon .badge {
  background: var(--ambar-500);
  color: var(--azul-900);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Nav categorías */
.nav-categorias {
  background: var(--gris-800);
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  padding: 10px 0;
  font-size: 14px;
}
.nav-categorias .container {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;          /* todo en una sola línea */
  align-items: center;
  overflow-x: auto;           /* si no cabe (pantallas estrechas), scroll horizontal */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* oculta la barra de scroll (Firefox) */
}
.nav-categorias .container::-webkit-scrollbar { display: none; } /* Safari/Chrome */
.nav-categorias a {
  color: var(--blanco);
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  transition: var(--transicion);
  font-weight: 500;
  white-space: nowrap;        /* la etiqueta no se parte */
  flex: 0 0 auto;             /* no se encoge ni envuelve */
}
.nav-categorias a:hover {
  background: var(--gris-700);
  color: var(--cyan-500);
}
.nav-categorias a.activo {
  background: var(--cyan-500);
  color: var(--azul-900);
  font-weight: 700;
}

/* ============================================================
   HERO — Foto del técnico SNEL como fondo a pantalla completa
   ============================================================ */
.hero {
  color: var(--blanco);
  padding: 90px 0 110px;
  position: relative;
  overflow: hidden;
  min-height: 580px;
  background: linear-gradient(135deg, #0F1419 0%, #1A1F26 50%, #0F1419 100%);
}
/* Carrusel de fondo: 3 fotos en cross-fade, ~6 s cada una (ciclo 18 s) */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: heroSlideFade 18s infinite;
  will-change: opacity;
}
.hero-slide.hs1 { background-image: url('../img/hero-1.jpg'); background-position: center center; animation-delay: 0s;  }
.hero-slide.hs2 { background-image: url('../img/hero-2.jpg'); background-position: right top;     animation-delay: 6s;  }
.hero-slide.hs3 { background-image: url('../img/hero-3.jpg'); background-position: right center;  animation-delay: 12s; }
@keyframes heroSlideFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* aparece (~0.7 s) */
  31%  { opacity: 1; }   /* visible hasta ~5.6 s */
  35%  { opacity: 0; }   /* se desvanece (~6.3 s) */
  100% { opacity: 0; }
}
/* Respeta a quien prefiere menos movimiento: deja una sola foto fija */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide.hs1 { opacity: 1; }
}
/* Overlay oscuro hacia la izquierda para que el texto se lea sobre la foto */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(15,20,25,.92) 0%,
      rgba(15,20,25,.78) 30%,
      rgba(15,20,25,.45) 55%,
      rgba(15,20,25,.25) 75%,
      rgba(15,20,25,.55) 100%
    ),
    radial-gradient(circle at 78% 50%, rgba(0,212,255,.18), transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.hero h1 .destacado {
  color: var(--cyan-500);
  display: block;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.hero p.subtitulo {
  font-size: 18px;
  color: var(--gris-300);
  margin-bottom: 28px;
  max-width: 500px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  gap: 30px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 212, 255, 0.25);
}
.hero-stats .stat strong {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--cyan-500);
  line-height: 1;
}
.hero-stats .stat span {
  font-size: 13px;
  color: var(--gris-400);
}
.hero-visual {
  position: relative;
  height: 380px;
}
.hero-visual .escudo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,212,255,0.25), transparent 65%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual .escudo-svg {
  width: 340px;
  height: 340px;
  filter: drop-shadow(0 20px 50px rgba(0, 212, 255, 0.4));
}

/* ----- Hero: badge flotante sobre la foto de fondo ----- */
.hero-visual {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-bg-badge {
  background: rgba(15,20,25,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,212,255,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  white-space: nowrap;
  margin-bottom: 8px;
}
.hero-bg-badge .dot {
  width: 9px;
  height: 9px;
  background: #00D4FF;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,212,255,.35);
  animation: heroDotPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes heroDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,212,255,.35); }
  50%      { box-shadow: 0 0 0 7px rgba(0,212,255,.15); }
}
/* Refuerzo de legibilidad del texto del hero sobre la foto */
.hero .hero-texto {
  position: relative;
  z-index: 3;
}
.hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero p.subtitulo { text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ============================================================
   SECCIÓN OSCURA (instalaciones nacionales)
   ============================================================ */
.seccion-oscura {
  background: linear-gradient(135deg, #0F1419 0%, #1a2a36 50%, #0F1419 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.seccion-oscura::before {
  content: '';
  position: absolute;
  top: -50px; left: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,212,255,.15), transparent 70%);
  pointer-events: none;
}
.seccion-oscura::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -50px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,184,219,.1), transparent 70%);
  pointer-events: none;
}
.seccion-oscura .container { position: relative; z-index: 1; }

.badge-eyebrow {
  display: inline-block;
  background: rgba(0,212,255,.15);
  color: #00D4FF;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  border: 1px solid rgba(0,212,255,.3);
}

.instalaciones-wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
}
.instalaciones-texto h2 {
  font-size: 36px;
  margin: 0 0 16px;
  color: #fff;
  line-height: 1.2;
}
.instalaciones-texto > p {
  font-size: 16px;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  margin: 0 0 24px;
}
.instalaciones-checks {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,.04);
  padding: 14px;
  border-radius: 10px;
  border-left: 3px solid #00D4FF;
}
.check-item .ico {
  font-size: 24px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(0,212,255,.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-item strong { color: #fff; font-size: 15px; display: block; margin-bottom: 2px; }
.check-item small  { color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.4; display: block; }

.instalaciones-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stat-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,212,255,.2);
  padding: 26px 18px;
  border-radius: 14px;
  text-align: center;
  transition: transform .2s, border-color .2s;
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,.5); }
.stat-card.destacado {
  background: linear-gradient(135deg, rgba(0,212,255,.2), rgba(0,184,219,.1));
  border-color: #00D4FF;
}
.stat-card .num {
  font-size: 38px;
  font-weight: 800;
  color: #00D4FF;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card.destacado .num { font-size: 42px; }
.stat-card .lbl {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  font-weight: 500;
}

/* ============================================================
   SECCIÓN TESTIMONIOS
   ============================================================ */
.seccion-testimonios {
  background: linear-gradient(to bottom, #f8fafc 0%, #fff 100%);
}
.seccion-testimonios .badge-eyebrow {
  background: rgba(0,184,219,.1);
  border-color: rgba(0,184,219,.3);
  color: #0095b5;
}
/* Carrusel de testimonios (slides apilados con cross-fade) */
.testimonios-carrusel {
  display: grid;            /* todos los slides en la misma celda → sin saltos de alto */
}
.testimonio-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.testimonio-slide.activo {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.testimonios-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.testimonio-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--gris-300, #cbd5e1);
  transition: background .25s ease, width .25s ease;
}
.testimonio-dot:hover { background: var(--gris-500, #64748b); }
.testimonio-dot.activo {
  width: 28px;
  border-radius: 5px;
  background: var(--cyan-500, #00D4FF);
}
@media (prefers-reduced-motion: reduce) {
  .testimonio-slide { transition: opacity .25s ease; transform: none; }
}

.testimonio-card {
  max-width: 1000px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(15,20,25,.08), 0 0 0 1px rgba(15,20,25,.05);
  display: grid;
  grid-template-columns: 380px 1fr;
}
.testimonio-foto {
  position: relative;
  background: #f1f5f9;
  min-height: 380px;
}
.testimonio-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonio-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #00D4FF;
  color: #0F1419;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,212,255,.3);
}
.testimonio-contenido {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonio-stars {
  color: #f59e0b;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.testimonio-quote {
  font-size: 17px;
  line-height: 1.65;
  color: #0F1419;
  font-style: italic;
  margin: 0 0 22px;
  position: relative;
  padding-left: 18px;
}
.testimonio-quote::before {
  content: '"';
  position: absolute;
  left: -8px;
  top: -16px;
  font-size: 58px;
  color: #00D4FF;
  opacity: .4;
  font-family: Georgia, serif;
  line-height: 1;
}
.testimonio-firma {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
  margin-bottom: 16px;
}
.testimonio-firma strong {
  color: #0F1419;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}
.testimonio-firma span {
  color: #64748b;
  font-size: 13px;
}
.testimonio-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.testimonio-tags .tag {
  background: #f0fdff;
  color: #0095b5;
  border: 1px solid #cdf6ff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .instalaciones-wrap { grid-template-columns: 1fr; gap: 32px; }
  .instalaciones-texto h2 { font-size: 28px; }
  .testimonio-card { grid-template-columns: 1fr; }
  .testimonio-foto { min-height: 260px; }
  .testimonio-contenido { padding: 24px; }
  .testimonio-quote { font-size: 15px; }
}
@media (max-width: 500px) {
  .instalaciones-stats { grid-template-columns: 1fr; }
  .stat-card { padding: 18px 16px; }
  .stat-card .num { font-size: 32px; }
  .stat-card.destacado .num { font-size: 34px; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: var(--transicion);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--cyan-500);
  color: var(--azul-900);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.25);
}
.btn-primary:hover {
  background: var(--cyan-400);
  color: var(--azul-900);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}
.btn-outline {
  background: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}
.btn-outline:hover { background: var(--blanco); color: var(--azul-900); }
.btn-dark {
  background: var(--azul-900);
  color: var(--blanco);
}
.btn-dark:hover { background: var(--azul-800); color: var(--blanco); }
.btn-ghost {
  background: var(--gris-100);
  color: var(--gris-800);
}
.btn-ghost:hover { background: var(--gris-200); }
.btn-success {
  background: var(--verde);
  color: var(--blanco);
}
.btn-success:hover { background: #059669; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion {
  padding: 60px 0;
}
.seccion-titulo {
  font-size: 28px;
  font-weight: 800;
  color: var(--azul-900);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.seccion-subtitulo {
  color: var(--gris-500);
  font-size: 15px;
  margin-bottom: 32px;
}
.seccion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.seccion-header .seccion-subtitulo { margin-bottom: 0; }

/* ============================================================
   CARDS DE CATEGORÍA
   ============================================================ */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.categoria-card {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--sombra-sm);
  border: 2px solid transparent;
  transition: var(--transicion);
  text-decoration: none;
  color: var(--gris-900);
}
.categoria-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: var(--cyan-500);
  color: var(--gris-900);
}
.categoria-card .icono {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 8px;
}
.categoria-card .icono img {
  max-width: 150px;
  max-height: 150px;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease;
  filter: drop-shadow(0 4px 12px rgba(0, 212, 255, 0.15));
}
.categoria-card:hover .icono img {
  transform: scale(1.06) rotate(-2deg);
}
.categoria-card .icono-emoji {
  font-size: 56px;
  line-height: 1;
}
.categoria-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--azul-900);
  margin-bottom: 8px;
}
.categoria-card p {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 14px;
}
.categoria-card .ver-mas {
  color: var(--cyan-600);
  font-weight: 700;
  font-size: 13px;
}


/* ============================================================
   CARDS DE PRODUCTO
   ============================================================ */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.producto-card {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: var(--transicion);
  position: relative;
  display: flex;
  flex-direction: column;
}
.producto-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}
.producto-card .imagen {
  aspect-ratio: 1;
  background: var(--gris-100);
  position: relative;
  overflow: hidden;
}
.producto-card .imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.producto-card:hover .imagen img { transform: scale(1.05); }
/* Corazón de favoritos en card */
.card-fav-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s, background .15s;
  line-height: 1;
}
.card-fav-heart:hover { transform: scale(1.12); background: #fff; }
.card-fav-heart.activo { background: #fff5f5; }
.producto-card .badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.badge-pill {
  background: var(--rojo);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.badge-pill.verde { background: var(--verde); }
.badge-pill.ambar { background: var(--cyan-500); color: var(--azul-900); }
.badge-pill.azul { background: var(--gris-800); color: var(--cyan-500); }

.producto-card .info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.producto-card .marca {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  font-weight: 600;
  margin-bottom: 4px;
}
.producto-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.producto-card h3 a { color: inherit; }
.producto-card h3 a:hover { color: var(--cyan-700); }

.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gris-600);
  margin-bottom: 8px;
}
.rating .estrellas { color: var(--warning); letter-spacing: 1px; }
.rating .reviews-count { color: var(--gris-500); }

.precio-grupo {
  margin-top: auto;
  margin-bottom: 12px;
}
.precio {
  font-size: 22px;
  font-weight: 800;
  color: var(--azul-900);
}
.precio-anterior {
  font-size: 13px;
  text-decoration: line-through;
  color: var(--gris-400);
  margin-left: 6px;
}
.descuento {
  display: inline-block;
  color: var(--rojo);
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
}

.stock-info {
  font-size: 12px;
  margin-bottom: 12px;
}
.stock-info.disponible { color: var(--verde); }
.stock-info.bajo { color: var(--warning); font-weight: 600; }
.stock-info.agotado { color: var(--rojo); font-weight: 700; }

.producto-card .acciones {
  display: flex;
  gap: 8px;
}
.producto-card .acciones .btn { flex: 1; }

/* ============================================================
   CONFIANZA / BENEFICIOS
   ============================================================ */
.beneficios {
  background: var(--blanco);
  padding: 50px 0;
  border-top: 1px solid var(--gris-200);
}
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.beneficio {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.beneficio .icono {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--cyan-50);
  border-radius: var(--radio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.beneficio h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-900);
  margin-bottom: 4px;
}
.beneficio p {
  font-size: 13px;
  color: var(--gris-500);
  line-height: 1.4;
}

/* ============================================================
   BANNER PROMOCIONAL
   ============================================================ */
.banner-promo {
  background: linear-gradient(135deg, var(--gris-800), var(--azul-900));
  color: var(--blanco);
  padding: 50px 40px;
  border-radius: var(--radio-xl);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.15);
}
.banner-promo::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,212,255,0.18), transparent);
  pointer-events: none;
}
.banner-promo h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 14px;
  position: relative;
}
.banner-promo p {
  font-size: 16px;
  color: var(--gris-300);
  margin-bottom: 22px;
  position: relative;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--azul-900);
  color: var(--gris-300);
  padding: 60px 0 30px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer h4 {
  color: var(--blanco);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer a {
  color: var(--gris-300);
  font-size: 14px;
  transition: var(--transicion);
}
.footer a:hover { color: var(--ambar-400); }
.footer .descripcion {
  font-size: 14px;
  color: var(--gris-400);
  line-height: 1.6;
  margin-bottom: 16px;
  margin-top: 12px;
}
.footer-logo {
  height: 88px;
  margin-bottom: 4px;
}
.footer-logo .logo-svg,
.footer-logo img { height: 100%; width: auto; display: block; }
.footer-contacto li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.footer-redes {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.footer-redes a {
  width: 38px; height: 38px;
  background: var(--gris-800);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transicion);
}
.footer-redes a:hover { background: var(--ambar-500); color: var(--azul-900); }
.footer-bottom {
  border-top: 1px solid var(--gris-800);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gris-500);
  flex-wrap: wrap;
  gap: 10px;
}
.metodos-pago { display: flex; gap: 8px; font-size: 11px; }
.metodos-pago span {
  background: var(--gris-800);
  padding: 4px 10px;
  border-radius: var(--radio-sm);
  color: var(--gris-300);
  font-weight: 600;
}

/* WhatsApp flotante */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 96px;     /* deja espacio para el chatbot a la derecha */
  width: 56px;
  height: 56px;
  background: #25D366;
  /* WhatsApp se mantiene verde por convención de marca */
  color: var(--blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-lg);
  font-size: 30px;
  z-index: 50;
  transition: var(--transicion);
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: var(--blanco);
}

/* ============================================================
   CHATBOT — Widget flotante
   ============================================================ */
.chatbot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  font-family: 'Inter', sans-serif;
}
.chatbot-launcher {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: var(--azul-900);
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatbot-launcher:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(0,212,255,0.6); }
.chatbot-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--rojo);
  color: var(--blanco);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--blanco);
}
.chatbot-panel {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatbotIn 0.25s ease-out;
}
@keyframes chatbotIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.chatbot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--azul-900), var(--gris-800));
  color: var(--blanco);
  border-bottom: 1px solid rgba(0,212,255,0.2);
}
.chatbot-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: var(--azul-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.chatbot-title { flex: 1; line-height: 1.2; }
.chatbot-title strong { display: block; font-size: 14px; font-weight: 700; }
.chatbot-title span { font-size: 11px; color: var(--gris-300); display: flex; align-items: center; gap: 4px; }
.dot-online { width: 8px; height: 8px; background: #10B981; border-radius: 50%; display: inline-block; }
.chatbot-minimize {
  background: rgba(255,255,255,0.12);
  color: var(--blanco);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.chatbot-minimize:hover {
  background: var(--rojo);
  transform: scale(1.08);
  border-color: var(--rojo);
}
.chatbot-minimize:active { transform: scale(0.95); }

.chatbot-quick-actions {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
}
.chatbot-quick-actions .qa-btn {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  color: var(--gris-800);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chatbot-quick-actions .qa-btn:hover {
  border-color: var(--cyan-500);
  color: var(--cyan-700);
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: var(--gris-50);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.chatbot-msg { max-width: 88%; }
.chatbot-msg.user { align-self: flex-end; }
.chatbot-msg.bot { align-self: flex-start; }
.chatbot-msg.anim-in { animation: msgIn 0.22s ease-out; }
@keyframes msgIn {
  from { transform: translateY(5px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.chatbot-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
}
.chatbot-msg.user .chatbot-bubble {
  background: var(--cyan-500);
  color: var(--azul-900);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.chatbot-msg.bot .chatbot-bubble {
  background: var(--blanco);
  color: var(--gris-900);
  border: 1px solid var(--gris-200);
  border-bottom-left-radius: 4px;
}
.chatbot-productos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.chatbot-prod {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--gris-900);
  transition: border-color 0.15s, transform 0.15s;
  align-items: center;
}
.chatbot-prod:hover {
  border-color: var(--cyan-500);
  transform: translateX(2px);
  color: var(--gris-900);
}
.chatbot-prod img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--gris-100);
  border-radius: 4px;
  flex-shrink: 0;
}
.chatbot-prod strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; }
.chatbot-prod span { font-size: 11px; color: var(--gris-500); }
.chatbot-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cyan-700);
  font-weight: 600;
}
.chatbot-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.chatbot-buttons button {
  background: var(--cyan-500);
  color: var(--azul-900);
  padding: 7px 12px;
  border-radius: var(--radio);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.chatbot-buttons button:hover { background: var(--cyan-400); }

.chatbot-input-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--gris-200);
  background: var(--blanco);
}
.chatbot-input-row input {
  flex: 1;
  border: 1px solid var(--gris-300);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.chatbot-input-row input:focus { border-color: var(--cyan-500); }
.chatbot-send {
  background: var(--cyan-500);
  color: var(--azul-900);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatbot-send:hover { background: var(--cyan-400); }

@media (max-width: 480px) {
  .chatbot-panel { width: 100vw; right: -24px; max-width: 100vw; border-radius: var(--radio-lg) var(--radio-lg) 0 0; }
  .whatsapp-float { right: 90px; bottom: 20px; width: 50px; height: 50px; font-size: 24px; }
  .chatbot-launcher { width: 54px; height: 54px; font-size: 24px; }
}

/* ============================================================
   CATÁLOGO — Layout con filtros
   ============================================================ */
.catalogo-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  padding-top: 30px;
}
.filtros {
  background: var(--blanco);
  padding: 22px;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  position: sticky;
  top: 160px;
  /* Si la sidebar es más alta que el viewport, que scrollee internamente
     en lugar de quedar contenido cortado abajo (el sticky no la deja crecer
     fuera de la pantalla). El offset de 180px = top:160px + margen inferior
     de respiro. */
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  /* Scrollbar discreta */
  scrollbar-width: thin;
  scrollbar-color: var(--gris-300) transparent;
}
.filtros::-webkit-scrollbar { width: 6px; }
.filtros::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius: 3px; }
.filtros::-webkit-scrollbar-thumb:hover { background: var(--gris-400); }
.filtros h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-900);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gris-200);
}
.filtros-grupo { margin-bottom: 22px; }
.filtros-grupo h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-700);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filtros label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--gris-700);
  cursor: pointer;
  transition: var(--transicion);
}
.filtros label:hover { color: var(--cyan-700); }
.filtros input[type="checkbox"],
.filtros input[type="radio"] {
  accent-color: var(--cyan-600);
  width: 16px; height: 16px;
}
.filtros .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--gris-500);
}
.filtros-precio {
  display: flex;
  gap: 8px;
  align-items: center;
}
.filtros-precio input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-size: 13px;
}

.catalogo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.catalogo-header .resultado {
  color: var(--gris-600);
  font-size: 14px;
}
.catalogo-header .resultado strong { color: var(--gris-900); }
.ordenar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.ordenar select {
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  color: var(--gris-900);
  font-size: 14px;
  cursor: pointer;
}

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sin-resultados {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 60px 30px;
  text-align: center;
  color: var(--gris-500);
}
.sin-resultados .icono { font-size: 50px; margin-bottom: 14px; }
.sin-resultados h3 { color: var(--gris-800); font-size: 18px; margin-bottom: 8px; }

/* ============================================================
   PÁGINA PRODUCTO
   ============================================================ */
.producto-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr 320px;
  gap: 30px;
  margin-top: 30px;
}
.producto-galeria .imagen-principal {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.producto-galeria .imagen-principal img {
  width: 100%; height: 100%; object-fit: contain;
}
.thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.thumbnails .thumb {
  width: 70px; height: 70px;
  background: var(--blanco);
  border-radius: var(--radio);
  border: 2px solid var(--gris-200);
  overflow: hidden;
  cursor: pointer;
}
.thumbnails .thumb.activo { border-color: var(--cyan-500); }
.thumbnails .thumb img { width: 100%; height: 100%; object-fit: contain; }

.producto-info h1 {
  font-size: 26px;
  line-height: 1.25;
  color: var(--gris-900);
  margin-bottom: 12px;
}
.producto-info .marca-tag {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.producto-info .descripcion {
  margin: 18px 0;
  color: var(--gris-700);
  line-height: 1.6;
  font-size: 15px;
}
.caracteristicas-lista {
  list-style: none;
  margin: 18px 0;
}
.caracteristicas-lista li {
  padding: 6px 0;
  padding-left: 24px;
  position: relative;
  color: var(--gris-700);
  font-size: 14px;
}
.caracteristicas-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--verde);
  font-weight: 800;
}
.specs-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}
.specs-tabla tr {
  border-bottom: 1px solid var(--gris-200);
}
.specs-tabla td {
  padding: 10px 8px;
}
.specs-tabla td:first-child {
  font-weight: 600;
  color: var(--gris-700);
  width: 40%;
}
.specs-tabla td:last-child { color: var(--gris-900); }

.compra-box {
  background: var(--blanco);
  padding: 22px;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  position: sticky;
  top: 160px;
  height: fit-content;
}
.compra-box .precio-grande {
  font-size: 36px;
  font-weight: 800;
  color: var(--azul-900);
  line-height: 1;
}
.compra-box .iva-info {
  font-size: 12px;
  color: var(--gris-500);
  margin-top: 4px;
}
.compra-box .envio-info {
  background: var(--cyan-50);
  padding: 12px;
  border-radius: var(--radio);
  margin: 16px 0;
  font-size: 13px;
  border: 1px solid var(--cyan-100);
}
.compra-box .envio-info strong { color: var(--cyan-700); }

.qty-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.qty-selector label { font-size: 14px; color: var(--gris-700); font-weight: 600; }
.qty-selector .qty-controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  overflow: hidden;
}
.qty-selector button {
  width: 32px; height: 32px;
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: 18px;
  font-weight: 700;
  transition: var(--transicion);
}
.qty-selector button:hover { background: var(--gris-200); }
.qty-selector input {
  width: 50px;
  text-align: center;
  border: none;
  font-weight: 700;
  outline: none;
}
.compra-box .btn { margin-bottom: 10px; }

/* ============================================================
   CARRITO
   ============================================================ */
.carrito-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  margin-top: 30px;
}
.carrito-items {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}
.carrito-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--gris-200);
  align-items: center;
}
.carrito-item:last-child { border-bottom: none; }
.carrito-item .imagen {
  background: var(--gris-100);
  border-radius: var(--radio);
  aspect-ratio: 1;
  padding: 8px;
}
.carrito-item .imagen img { width: 100%; height: 100%; object-fit: contain; }
.carrito-item h3 { font-size: 15px; margin-bottom: 6px; color: var(--gris-900); }
.carrito-item .item-meta { font-size: 13px; color: var(--gris-500); margin-bottom: 10px; }
.carrito-item .item-acciones {
  display: flex; gap: 12px; align-items: center;
  font-size: 13px;
}
.carrito-item .item-acciones button {
  color: var(--rojo);
  font-size: 13px;
  font-weight: 600;
}
.carrito-item .item-acciones button:hover { text-decoration: underline; }
.carrito-item .item-total {
  text-align: right;
  font-size: 18px;
  font-weight: 800;
  color: var(--azul-900);
}

.resumen-box {
  background: var(--blanco);
  padding: 22px;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  position: sticky;
  top: 160px;
  height: fit-content;
}
.resumen-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--azul-900);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-200);
}
.resumen-linea {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--gris-700);
}
.resumen-linea.total {
  border-top: 1px solid var(--gris-200);
  padding-top: 12px;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--azul-900);
}
.cupon-box {
  margin: 18px 0;
  display: flex;
  gap: 8px;
}
.cupon-box input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-size: 13px;
}

.carrito-vacio {
  text-align: center;
  padding: 80px 30px;
  background: var(--blanco);
  border-radius: var(--radio-lg);
}
.carrito-vacio .icono { font-size: 80px; margin-bottom: 20px; opacity: 0.5; }
.carrito-vacio h2 { color: var(--gris-800); margin-bottom: 10px; }
.carrito-vacio p { color: var(--gris-500); margin-bottom: 24px; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-pasos {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 30px 0 40px;
  flex-wrap: wrap;
}
.checkout-pasos .paso {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gris-400);
  font-size: 14px;
  font-weight: 600;
}
.checkout-pasos .paso .num {
  width: 30px; height: 30px;
  background: var(--gris-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.checkout-pasos .paso.activo { color: var(--azul-900); }
.checkout-pasos .paso.activo .num { background: var(--cyan-500); color: var(--azul-900); }
.checkout-pasos .paso.completado { color: var(--verde); }
.checkout-pasos .paso.completado .num { background: var(--verde); color: var(--blanco); }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
}
.checkout-form {
  background: var(--blanco);
  padding: 30px;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.checkout-form h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--azul-900);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-700);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 11px 14px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  font-size: 14px;
  outline: none;
  transition: var(--transicion);
  background: var(--blanco);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}
.form-group .error {
  color: var(--rojo);
  font-size: 12px;
  display: none;
}

.metodos-pago-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}
.metodo-pago {
  border: 2px solid var(--gris-200);
  padding: 16px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: var(--transicion);
  display: flex;
  align-items: center;
  gap: 14px;
}
.metodo-pago:hover { border-color: var(--gris-400); }
.metodo-pago.seleccionado {
  border-color: var(--cyan-500);
  background: var(--cyan-50);
}
.metodo-pago input { accent-color: var(--cyan-600); }
.metodo-pago .icono { font-size: 24px; }
.metodo-pago .info { flex: 1; }
.metodo-pago h4 { font-size: 15px; color: var(--azul-900); margin-bottom: 2px; }
.metodo-pago p { font-size: 13px; color: var(--gris-500); }

.envio-opciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}
.envio-opcion {
  border: 2px solid var(--gris-200);
  padding: 14px;
  border-radius: var(--radio);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  transition: var(--transicion);
}
.envio-opcion:hover { border-color: var(--gris-400); }
.envio-opcion.seleccionado {
  border-color: var(--cyan-500);
  background: var(--cyan-50);
}
.envio-opcion .precio { font-size: 16px; }

.checkout-acciones {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

.confirmacion {
  background: var(--blanco);
  padding: 60px 30px;
  border-radius: var(--radio-lg);
  text-align: center;
  box-shadow: var(--sombra-md);
}
.confirmacion .icono-ok {
  width: 80px; height: 80px;
  background: var(--verde-100);
  color: var(--verde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 20px;
}
.confirmacion h2 {
  font-size: 26px;
  color: var(--azul-900);
  margin-bottom: 10px;
}
.confirmacion .codigo-orden {
  background: var(--gris-100);
  padding: 12px 20px;
  border-radius: var(--radio);
  display: inline-block;
  margin: 18px 0;
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--gris-800);
}

/* ============================================================
   TOAST / NOTIFICACIONES
   ============================================================ */
.toast {
  position: fixed;
  bottom: 100px;
  right: 24px;
  background: var(--gris-900);
  color: var(--blanco);
  padding: 14px 20px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  z-index: 60;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}
.toast.visible { transform: translateY(0); opacity: 1; }
.toast .icono { color: var(--verde); font-size: 18px; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gris-600); }
.breadcrumb a:hover { color: var(--cyan-700); }
.breadcrumb .sep { color: var(--gris-400); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .productos-grid,
  .catalogo-grid { grid-template-columns: repeat(3, 1fr); }
  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { background-position: 70% center; min-height: 520px; }
  .hero::after {
    background:
      linear-gradient(
        to bottom,
        rgba(15,20,25,.85) 0%,
        rgba(15,20,25,.65) 40%,
        rgba(15,20,25,.45) 70%,
        rgba(15,20,25,.85) 100%
      ),
      radial-gradient(circle at 50% 70%, rgba(0,212,255,.18), transparent 60%);
  }
  .hero .container { grid-template-columns: 1fr; gap: 30px; }
  .hero-visual { min-height: 200px; height: auto; }
  .hero-visual .escudo-svg { width: 220px; height: 220px; }
  .hero-bg-badge { font-size: 12px; padding: 8px 14px; }
  .producto-layout { grid-template-columns: 1fr 1fr; }
  .producto-layout .compra-box { grid-column: 1 / -1; position: static; }
  .carrito-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .resumen-box { position: static; }
  .catalogo-layout { grid-template-columns: 220px 1fr; }
  .filtros { position: static; }
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .header-main .container { flex-wrap: wrap; gap: 12px; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  .productos-grid,
  .catalogo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .producto-card .info { padding: 12px; }
  .producto-card h3 { font-size: 13px; }
  .producto-card .precio { font-size: 18px; }
  .producto-layout { grid-template-columns: 1fr; }
  .producto-card .acciones { flex-direction: column; }
  .catalogo-layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .hero h1 { font-size: 32px; }
  .hero-stats { gap: 18px; flex-wrap: wrap; }
  .hero-stats .stat strong { font-size: 24px; }
  .banner-promo { grid-template-columns: 1fr; padding: 30px 24px; }
  .banner-promo h2 { font-size: 24px; }
  .seccion { padding: 40px 0; }
  .seccion-titulo { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .carrito-item { grid-template-columns: 80px 1fr; }
  .carrito-item .item-total { grid-column: 2; text-align: left; }
  .header-actions .header-link span { display: none; }
  /* Cuenta menú en móvil: ocultar saludo, dropdown pegado al borde derecho */
  .cuenta-saludo { display: none; }
  .cuenta-btn { padding: 6px 8px; }
  .cuenta-menu { right: -10px; min-width: 260px; }
  /* Nav categorías: scrolleable horizontal en móvil */
  .nav-categorias .container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .nav-categorias .container::-webkit-scrollbar { display: block; height: 4px; }
  .nav-categorias .container::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 4px; }
  .nav-categorias a { white-space: nowrap; flex-shrink: 0; }
  /* Checkout: pasos compactos */
  .checkout-pasos { gap: 10px; }
  .checkout-pasos .paso .num { width: 26px; height: 26px; font-size: 12px; }
}

@media (max-width: 480px) {
  .productos-grid,
  .catalogo-grid { grid-template-columns: 1fr; }
  .categorias-grid { grid-template-columns: 1fr; }
  .beneficios-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .checkout-pasos { gap: 14px; }
  .checkout-pasos .paso span { display: none; }
  .header-top { display: none; }
}

/* ============================================================
   CHECKOUT — Selector de direcciones guardadas
   ============================================================ */
.checkout-direcciones-guardadas {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 20px;
}
.checkout-direcciones-guardadas.info {
  background: #f0fdff;
  border-color: #cdf6ff;
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--gris-700);
}
.checkout-direcciones-guardadas .cdg-titulo {
  margin-bottom: 12px;
}
.checkout-direcciones-guardadas .cdg-titulo strong {
  display: block;
  font-size: 15px;
  color: var(--azul-900);
  margin-bottom: 2px;
}
.checkout-direcciones-guardadas .cdg-titulo small {
  color: var(--gris-500);
  font-size: 13px;
}
.checkout-direcciones-guardadas .cdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.dir-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--gris-200);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  background: #fff;
  position: relative;
  align-items: flex-start;
}
.dir-card:hover {
  border-color: var(--cyan-400, #67e8f9);
  background: #f8fdff;
}
.dir-card.seleccionada {
  border-color: var(--cyan-600, #00B8DB);
  background: #f0fdff;
  box-shadow: 0 0 0 2px rgba(0,184,219,.15);
}
.dir-card input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--cyan-600, #00B8DB);
}
.dir-card-cuerpo { flex: 1; min-width: 0; }
.dir-card-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dir-card-titulo strong {
  font-size: 14px;
  color: var(--azul-900);
}
.dir-card-info {
  font-size: 13px;
  color: var(--gris-700);
  line-height: 1.4;
}
.dir-card-info small {
  color: var(--gris-500);
  font-size: 12px;
}
.dir-card-nueva {
  border-style: dashed;
  background: var(--gris-50, #f8fafc);
}
.dir-card-nueva .dir-card-titulo strong {
  color: var(--cyan-600, #00B8DB);
}
.dir-card-nueva.seleccionada { border-style: solid; }

@media (max-width: 600px) {
  .checkout-direcciones-guardadas .cdg-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PÁGINAS LEGALES (terminos.html, privacidad.html, devoluciones.html)
   y PÁGINA DE CONTACTO (contacto.html)
   Añadir al final de css/styles.css y bumpear ?v=23
   ===================================================================== */

.pagina-legal {
  max-width: 1080px;
  padding-top: 16px;
  padding-bottom: 64px;
}

.pagina-legal .breadcrumb {
  margin: 12px 0 8px;
}

/* ---------- Encabezado ---------- */
.legal-encabezado {
  border-bottom: 1px solid var(--gris-200);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.legal-encabezado h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--gris-900);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.legal-meta {
  color: var(--gris-500);
  font-size: 14px;
  margin: 0 0 16px;
}
.legal-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gris-700);
  max-width: 72ch;
  margin: 0;
}

/* ---------- Layout: TOC + contenido ---------- */
.pagina-legal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.pagina-legal .breadcrumb,
.pagina-legal .legal-encabezado {
  grid-column: 1 / -1;
}

@media (min-width: 980px) {
  .pagina-legal {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
  .legal-toc {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* ---------- TOC ---------- */
.legal-toc {
  background: var(--gris-50, #F8FAFC);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  padding: 20px 18px;
  font-size: 14px;
}
.legal-toc h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-500);
  margin: 0 0 12px;
  font-weight: 700;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.legal-toc li {
  counter-increment: toc;
  margin: 0 0 6px;
  line-height: 1.4;
}
.legal-toc li::before {
  content: counter(toc) ".";
  color: var(--gris-400);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.legal-toc a {
  color: var(--gris-700);
  text-decoration: none;
  transition: color .15s;
}
.legal-toc a:hover { color: var(--cyan-600); }

/* ---------- Contenido legal ---------- */
.legal-contenido {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gris-800);
  max-width: 72ch;
}
.legal-contenido section { margin-bottom: 36px; scroll-margin-top: 100px; }
.legal-contenido h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gris-900);
  margin: 0 0 14px;
  padding-top: 8px;
  letter-spacing: -0.01em;
}
.legal-contenido h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--gris-800);
  margin: 24px 0 10px;
}
.legal-contenido p { margin: 0 0 14px; }
.legal-contenido ul,
.legal-contenido ol { margin: 0 0 16px; padding-left: 22px; }
.legal-contenido li { margin-bottom: 6px; }
.legal-contenido a {
  color: var(--cyan-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-contenido a:hover { color: var(--cyan-600); }
.legal-contenido strong { color: var(--gris-900); }
.legal-contenido em { font-style: italic; }

/* ---------- Datos de la empresa (bloques tipo ficha) ---------- */
.legal-datos {
  background: var(--gris-50, #F8FAFC);
  border-left: 3px solid var(--cyan-500);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 20px;
  list-style: none;
}
.legal-datos li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--gris-200);
}
.legal-datos li:last-child { border-bottom: none; }

/* ---------- Placeholders muy visibles ---------- */
.legal-placeholder {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}

/* ---------- Callouts ---------- */
.legal-callout {
  background: linear-gradient(180deg, var(--cyan-50) 0%, #FFFFFF 100%);
  border-left: 4px solid var(--cyan-500);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 18px 0;
}

/* ---------- Tabla (finalidades / bases legales) ---------- */
.legal-tabla-wrap { overflow-x: auto; margin: 16px 0 20px; }
.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-tabla th,
.legal-tabla td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--gris-200);
  vertical-align: top;
}
.legal-tabla th {
  background: var(--gris-900);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legal-tabla tbody tr:hover { background: var(--gris-50, #F8FAFC); }

/* ---------- Pasos numerados ---------- */
.legal-pasos {
  list-style: none;
  counter-reset: pasos;
  padding-left: 0;
}
.legal-pasos > li {
  counter-increment: pasos;
  position: relative;
  padding-left: 44px;
  margin-bottom: 16px;
}
.legal-pasos > li::before {
  content: counter(pasos);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: var(--gris-900);
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* ---------- Bloque de contacto al final ---------- */
.legal-contacto-final {
  margin-top: 40px;
  padding: 20px;
  background: var(--gris-900);
  color: #FFFFFF;
  border-radius: 12px;
}
.legal-contacto-final a {
  color: var(--cyan-400);
  text-decoration: underline;
}

/* =====================================================================
   PÁGINA DE CONTACTO
   ===================================================================== */
.contacto-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 860px) {
  .contacto-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.contacto-info h2,
.contacto-form-wrap h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gris-900);
  margin: 0 0 16px;
}
.contacto-info h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-500);
  margin: 28px 0 12px;
}

/* Canales (WhatsApp / tel / mail) */
.contacto-canales { display: grid; gap: 10px; }
.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  color: var(--gris-900);
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.canal:hover {
  transform: translateY(-1px);
  border-color: var(--cyan-500);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.12);
}
.canal-icono { font-size: 26px; }
.canal-detalle { color: var(--gris-500); font-size: 14px; }
.canal-whatsapp:hover { border-color: #25D366; box-shadow: 0 6px 20px rgba(37,211,102,0.18); }

.contacto-redes { display: flex; flex-direction: column; gap: 8px; }
.contacto-redes a {
  color: var(--cyan-700);
  text-decoration: none;
  font-weight: 500;
}
.contacto-redes a:hover { text-decoration: underline; }

.contacto-faq {
  background: var(--cyan-50);
  border-radius: 10px;
  padding: 14px 20px;
  list-style: disc;
}
.contacto-faq li { margin-bottom: 8px; }

/* Formulario */
.contacto-form-wrap {
  background: #FFFFFF;
  border: 1px solid var(--gris-200);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.form-intro { color: var(--gris-500); font-size: 14px; margin: 0 0 16px; }
#form-contacto .campo { display: block; margin-bottom: 14px; }
#form-contacto .campo > span:first-child {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: 6px;
}
#form-contacto input[type="text"],
#form-contacto input[type="email"],
#form-contacto input[type="tel"],
#form-contacto select,
#form-contacto textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  background: #FFFFFF;
  transition: border-color .15s, box-shadow .15s;
}
#form-contacto input:focus,
#form-contacto select:focus,
#form-contacto textarea:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}
#form-contacto textarea { resize: vertical; min-height: 120px; }
#form-contacto .campo.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--gris-700);
}
#form-contacto .campo.check input { margin-top: 3px; }
#form-contacto .btn-primary {
  background: var(--cyan-500);
  color: var(--gris-900);
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
#form-contacto .btn-primary:hover { background: var(--cyan-400); transform: translateY(-1px); }
.form-nota { font-size: 12px; color: var(--gris-500); margin: 10px 0 0; }
.form-resultado { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.form-resultado.ok    { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }
.form-resultado.error { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; }

/* Mapa */
.contacto-mapa h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gris-900);
  margin: 0 0 16px;
}
.mapa-placeholder {
  background: var(--gris-50, #F8FAFC);
  border: 1px dashed var(--gris-300);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  color: var(--gris-600);
}
.mapa-placeholder iframe { width: 100%; min-height: 360px; border: 0; border-radius: 12px; }
.mapa-nota { font-size: 13px; color: var(--gris-500); margin: 12px 0 0; }

/* Móvil: el TOC se vuelve colapsable simple */
@media (max-width: 979px) {
  .legal-toc {
    order: -1;
  }
  .legal-toc ol { columns: 2; column-gap: 18px; }
}
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
  .legal-contenido { font-size: 15.5px; }
  .legal-pasos > li { padding-left: 40px; }
}

/* =====================================================================
   GESTOR DE FOTOS DEL ADMIN (admin.js → modal de producto)
   ===================================================================== */
.fotos-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 12px;
  background: var(--gris-50, #F8FAFC);
  border-radius: 10px;
  min-height: 100px;
}
.fotos-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 80px;
  color: var(--gris-500);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.foto-thumb {
  position: relative;
  aspect-ratio: 1;
  background: #FFFFFF;
  border: 2px solid var(--gris-200);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.foto-thumb:hover { border-color: var(--cyan-500); }
.foto-thumb.principal {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}
.foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
}
.foto-thumb .foto-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(15, 20, 25, 0.78);
  color: #FFFFFF;
  font-size: 10px;
  text-align: center;
  padding: 3px 4px;
  letter-spacing: 0.02em;
}
.foto-thumb .badge-principal {
  position: absolute;
  top: 4px; left: 4px;
  background: var(--cyan-500);
  color: var(--gris-900);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border-radius: 4px;
}
.foto-thumb .btn-hacer-principal,
.foto-thumb .btn-quitar-foto {
  position: absolute;
  top: 4px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gris-900);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform .15s, background .15s;
}
.foto-thumb .btn-hacer-principal { left: 4px; }
.foto-thumb .btn-quitar-foto    { right: 4px; }
.foto-thumb .btn-hacer-principal:hover { background: var(--cyan-500); transform: scale(1.1); }
.foto-thumb .btn-quitar-foto:hover    { background: #FCA5A5; color: #991B1B; transform: scale(1.1); }

.fotos-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fotos-url-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.fotos-url-row input[type="url"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.fotos-url-row input[type="url"]:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}

/* Galería de producto.html: thumbs clicables */
.thumbnails .thumb { cursor: pointer; }

/* =====================================================================
   MODALES PÚBLICOS DE CAPTURA DE LEADS (leads.js)
   Estilos independientes de admin.css porque la landing no carga ese css.
   ===================================================================== */
.lead-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: lead-fade-in .18s ease-out;
}
@keyframes lead-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.lead-modal-abierto { overflow: hidden; }

.lead-modal {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  animation: lead-slide-up .22s ease-out;
}
@keyframes lead-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.lead-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: none;
  background: var(--gris-100, #F1F5F9);
  color: var(--gris-700);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  z-index: 1;
}
.lead-modal-close:hover { background: var(--gris-200); color: var(--gris-900); }

.lead-modal-header {
  padding: 24px 24px 12px;
  border-bottom: 1px solid var(--gris-200);
}
.lead-modal-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gris-900);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lead-modal-sub {
  color: var(--gris-600);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* Formulario */
.lead-form { padding: 20px 24px 24px; }
.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .lead-grid { grid-template-columns: 1fr; } }

.lead-form .campo {
  display: block;
  margin-bottom: 14px;
}
.lead-grid .campo { margin-bottom: 0; }
.lead-form .campo > span:first-child,
.lead-form fieldset.campo legend {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: 6px;
  padding: 0;
}
.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form input[type="date"],
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  background: #FFFFFF;
  transition: border-color .15s, box-shadow .15s;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}
.lead-form textarea { resize: vertical; min-height: 80px; }

/* Estado inválido (marcado por leads.js cuando la validación falla) */
.lead-form .campo.invalido input,
.lead-form .campo.invalido select,
.lead-form .campo.invalido textarea {
  border-color: #DC2626;
  background: #FEF2F2;
}
.lead-form .campo.invalido legend,
.lead-form .campo.invalido > span:first-child {
  color: #991B1B;
}

/* Checkbox grid (servicios) */
.campo-checks {
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--gris-50, #F8FAFC);
  margin-bottom: 14px;
}
.campo-checks legend { padding: 0 6px; }
.checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
@media (max-width: 560px) { .checks-grid { grid-template-columns: 1fr; } }
.checks-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gris-700);
  cursor: pointer;
  padding: 4px 0;
}
.checks-grid input[type="checkbox"] { accent-color: var(--cyan-600); width: 16px; height: 16px; }

/* Checkbox de aceptación */
.lead-form .campo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--gris-700);
  cursor: pointer;
}
.lead-form .campo-check input { margin-top: 3px; accent-color: var(--cyan-600); }
.lead-form .campo-check a { color: var(--cyan-700); text-decoration: underline; }

/* Botones del formulario */
.lead-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
}
.lead-form-actions .btn-primary {
  background: var(--cyan-500);
  color: var(--gris-900);
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.lead-form-actions .btn-primary:hover:not(:disabled) { background: var(--cyan-400); transform: translateY(-1px); }
.lead-form-actions .btn-primary:disabled { opacity: 0.6; cursor: wait; }
.lead-form-actions .btn-ghost {
  background: transparent;
  color: var(--gris-700);
  border: 1px solid var(--gris-300);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.lead-form-actions .btn-ghost:hover { background: var(--gris-100); }

/* Pantalla de confirmación */
.lead-modal-ok {
  padding: 40px 32px;
  text-align: center;
}
.lead-modal-ok .ok-icono {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-700));
  color: #FFFFFF;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,212,255,0.35);
}
.lead-modal-ok h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gris-900);
  margin: 0 0 8px;
}
.lead-modal-ok .ok-msg {
  color: var(--gris-600);
  font-size: 15px;
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: 1.55;
}
.lead-modal-ok .ok-acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lead-modal-ok .btn-primary {
  background: #25D366;
  color: #FFFFFF;
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, transform .15s;
}
.lead-modal-ok .btn-primary:hover { background: #1FAD53; transform: translateY(-1px); }

/* Toast dentro del modal */
.lead-toast {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gris-900);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  max-width: 90%;
  text-align: center;
}
.lead-toast.err { background: #991B1B; }

/* ============================================================
   v29 — REFINAMIENTO ESTÉTICO (aditivo, no rompe lo anterior)
   ============================================================ */

/* --- Accesibilidad: foco visible coherente en toda la web --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Header: línea de marca + logo con vida --- */
.header { border-top: 3px solid var(--cyan-500); }
.header-main .logo {
  transition: transform 0.2s ease;
}
.header-main .logo:hover { transform: translateY(-1px); }
.header-main .logo .logo-svg {
  filter: drop-shadow(0 2px 10px rgba(12, 230, 216, 0.32));
}
/* Definición sutil entre el header y el contenido */
.nav-categorias {
  box-shadow: 0 2px 0 rgba(0, 212, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Buscar: feedback más claro al enfocar */
.search:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.35);
}

/* --- Footer: remate de marca + microinteracción en enlaces --- */
.footer {
  border-top: 3px solid var(--cyan-600);
  background:
    radial-gradient(1200px 300px at 80% -10%, rgba(0, 212, 255, 0.08), transparent 60%),
    var(--azul-900);
}
.footer ul li a {
  display: inline-block;
  transition: transform 0.16s ease, color 0.16s ease;
}
.footer ul li a:hover { transform: translateX(3px); }
.footer-redes a:hover { transform: translateY(-2px); }
.footer-logo .logo-svg { filter: drop-shadow(0 2px 10px rgba(12, 230, 216, 0.26)); }

/* --- Callout de contacto en páginas legales (arregla foto 2) --- */
.legal-contacto-final {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;                 /* evita herencias raras de centrado */
  margin-top: 44px;
  padding: 22px 24px;
  border-radius: var(--radio-lg);
  background:
    linear-gradient(135deg, #11161d 0%, #1A1F26 100%);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-left: 4px solid var(--cyan-500);
  box-shadow: var(--sombra-md);
}
.legal-contacto-final::before {
  content: "💬";
  font-size: 22px;
  line-height: 1.5;
  flex-shrink: 0;
}
.legal-contacto-final p {
  margin: 0;
  flex: 1;
  min-width: 0;                     /* permite que correos/URLs largos hagan wrap */
  text-align: left;
  line-height: 1.7;
  color: #E6EDF3;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.legal-contacto-final p strong { color: #FFFFFF; }
.legal-contacto-final a {
  color: var(--cyan-400);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal-contacto-final a:hover { color: var(--cyan-500); }

/* Defensa general: el contenido legal siempre alineado a la izquierda */
.legal-contenido p,
.legal-contenido li { text-align: left; }

@media (max-width: 540px) {
  .legal-contacto-final { flex-direction: column; gap: 10px; padding: 18px; }
}

/* ============================================================
   v31 — FIX página de contacto
   contacto.html reutilizaba el grid de 2 columnas de .pagina-legal
   (índice + contenido), lo que aplastaba .contacto-grid en 260px y
   hacía que el mapa se solapara con el formulario. Como contacto no
   tiene índice lateral, anulamos ese grid y dejamos flujo en bloque.
   ============================================================ */
.pagina-contacto { display: block; }            /* anula grid 260px/1fr heredado */
.pagina-contacto .contacto-grid { margin-bottom: 40px; }
.pagina-contacto .contacto-mapa { margin-top: 8px; }
.pagina-contacto .contacto-mapa .mapa-placeholder { max-width: 100%; }

/* ============================================================
   v32 — Refuerzo del fix de contacto + pulido del mapa
   ============================================================ */
/* Selector más específico (.pagina-legal.pagina-contacto = 0,2,0) para ganar
   siempre, incluso frente a la regla de grid dentro del media query ≥980px. */
.pagina-legal.pagina-contacto {
  display: block;
  grid-template-columns: none;
}

/* Mapa: que parezca un área de mapa y que el ejemplo de iframe no desborde */
.contacto-mapa { margin-top: 8px; }
.mapa-placeholder {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mapa-placeholder > p:first-child { font-size: 18px; margin: 0; }
.mapa-placeholder .legal-placeholder {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   Banner de consentimiento de cookies (cookies.js)
   ============================================================ */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:#fff; border-top:2px solid var(--turquesa, #12b3a6);
  box-shadow:0 -6px 24px rgba(0,0,0,.12);
  padding:16px 20px; display:flex; gap:16px; align-items:center;
  flex-wrap:wrap; justify-content:space-between;
}
.cookie-bar-txt{ flex:1; min-width:240px; font-size:14px; color:#334155; line-height:1.55; }
.cookie-bar-txt a{ color:var(--turquesa, #12b3a6); text-decoration:underline; }
.cookie-bar-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-sm{ padding:8px 14px; font-size:13px; }
@media (max-width:560px){
  .cookie-bar{ padding:14px; }
  .cookie-bar-btns{ width:100%; }
  .cookie-bar-btns .btn{ flex:1; }
}
.cookie-prefs-ov{
  position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.cookie-prefs{
  background:#fff; border-radius:14px; width:100%; max-width:520px;
  max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.cookie-prefs-h{ display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid #e5e7eb; font-size:16px; }
.cookie-prefs-b{ padding:6px 20px 12px; }
.cookie-prefs-f{ display:flex; gap:8px; justify-content:flex-end;
  padding:14px 20px; border-top:1px solid #e5e7eb; }
.cookie-row{ display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:14px 0; border-top:1px solid #f1f5f9; }
.cookie-row:first-child{ border-top:none; }
.cookie-row-t{ font-weight:600; font-size:14px; color:#0f172a; }
.cookie-row-d{ font-size:13px; color:#64748b; margin-top:2px; }
.cookie-lock{ font-size:12px; color:#64748b; background:#f1f5f9;
  padding:5px 10px; border-radius:8px; white-space:nowrap; }
.cookie-sw{ position:relative; display:inline-block; width:44px; height:24px; flex:none; cursor:pointer; }
.cookie-sw input{ opacity:0; width:0; height:0; position:absolute; }
.cookie-sw span{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; }
.cookie-sw span::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; }
.cookie-sw input:checked + span{ background:var(--turquesa, #12b3a6); }
.cookie-sw input:checked + span::before{ transform:translateX(20px); }

/* ============================================================
   RESPONSIVE HARDENING v65 — corrige distorsión en móvil/tablet
   y mejora compatibilidad cross-browser. Añadido al final para
   prevalecer en la cascada sin alterar el diseño base.
   ============================================================ */

/* 1) Matar el scroll horizontal causado por elementos decorativos
      (resplandores/escudos) con posición absoluta y desbordes negativos. */
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }

/* 2) Permitir que los hijos de flex/grid se encojan en vez de desbordar.
      (specificity 0 → cualquier clase con min-width propio lo sobreescribe). */
* { min-width: 0; }

/* 3) Nada debe superar el ancho de pantalla. */
.container { width: 100%; }
img, svg, video, canvas, iframe, table { max-width: 100%; }

/* 4) Romper palabras/URLs largas para que no rompan el layout. */
p, h1, h2, h3, h4, a, span, li, td,
.producto-card h3, .descripcion { overflow-wrap: break-word; word-wrap: break-word; }

/* 5) Evitar el zoom automático de iOS al enfocar campos (font-size >= 16px). */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* 6) Contener elementos decorativos del hero en móvil. */
@media (max-width: 768px) {
  .hero-visual .escudo-svg { width: min(260px, 70vw); height: auto; }
}

/* 7) Tablas anchas: scroll horizontal dentro de su envoltura, no en la página. */
.tabla-wrap, .legal-tabla-wrap, .table-responsive,
.admin-table-wrap, .pedidos-tabla-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* 8) Densidad de catálogo en teléfonos: 2 columnas hasta 380px,
      1 columna sólo en pantallas muy estrechas (mejor que 1 col a 480px). */
@media (max-width: 480px) {
  .productos-grid, .catalogo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .producto-card h3 { font-size: 12.5px; }
  .producto-card .precio { font-size: 16px; }
}
@media (max-width: 360px) {
  .productos-grid, .catalogo-grid { grid-template-columns: 1fr; }
}

/* 9) Modales/overlays: nunca más anchos que la pantalla. */
.modal-cuenta, .modal-content, .modal-box { max-width: calc(100vw - 24px); }

/* 10) Áreas táctiles cómodas en móvil (mínimo recomendado 44px). */
@media (max-width: 768px) {
  .btn, .nav-categorias a, .cuenta-menu .menu-item { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* 11) Tablet intermedio: 3 columnas de producto entre 768px y 1024px. */
@media (min-width: 769px) and (max-width: 1024px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
  .catalogo-layout { grid-template-columns: 220px 1fr; }
}

/* 12) Fallback de gap en flex para Safari antiguo (<14.1). */
@supports not (gap: 1rem) {
  .hero-stats { display: flex; flex-wrap: wrap; }
  .hero-stats > * { margin: 6px 10px; }
}