:root {
  --azul-primario: #0d3b66;
  --azul-oscuro: #082a4d;
  --verde-acento: #2e8b47;
  --verde-oscuro: #1f6334;
  --gris-fondo: #f4f6f8;
  --gris-borde: #e0e4e8;
  --gris-texto: #333;
  --gris-suave: #6b7280;
  --blanco: #fff;
  --rojo: #c0392b;

  /* ---------- Nueva identidad visual "premium azul tecnológico" (header +
     franja de beneficios + menú de categorías + footer) — paleta pedida por
     el negocio, mantenida aparte de los colores anteriores (que otras
     páginas/secciones del sitio siguen usando tal cual) para no afectar
     nada fuera de estas 3 zonas. ---------- */
  --azul-marino: #062b52;
  --azul-profundo: #073b70;
  --azul-corporativo: #075da8;
  --azul-electrico: #078be8;
  --azul-cian: #22c7f5;
  --azul-muy-claro: #eaf7ff;
  --gris-texto-frio: #526477;

  /* Degradados reutilizables para los "iconos-badge" circulares 3D/glossy
     de cada categoría — variación sutil dentro de la misma familia azul,
     nunca colores ajenos a la marca. */
  --tinte-azul: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico));
  --tinte-azul-violeta: linear-gradient(135deg, #2c3e70, #6a7fe0);
  --tinte-azul-cian: linear-gradient(135deg, var(--azul-corporativo), var(--azul-cian));
  --tinte-verde-azul: linear-gradient(135deg, #0e7c86, var(--azul-cian));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--gris-texto);
  background: var(--gris-fondo);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.oculto { display: none !important; }

/* Con el panel de categorías de celular abierto, el fondo no debe poder
   hacer scroll (si no, el usuario "arrastra" la página detrás del panel). */
body.menu-movil-abierto { overflow: hidden; }

/* ---------- Header ---------- */
header { background: var(--blanco); border-bottom: 1px solid var(--gris-borde); position: sticky; top: 0; z-index: 20; transition: transform .28s ease; }

/* Header "auto-ocultable": al bajar en el scroll se desliza hacia arriba y
   sale de pantalla (deja más espacio para ver el catálogo, sobre todo en
   celular); al subir un poco, o cerca del tope de la página, reaparece.
   La clase la agrega/quita el JS en ui.js (ver inicializarHeaderAutoOcultable). */
header.header--oculto { transform: translateY(-100%); }

/* Franja de beneficios: una tercera capa arriba del header (encima del
   logo) con los 4 argumentos de venta + un CTA de WhatsApp. Mismo
   lenguaje visual claro que el menú de categorías de abajo (fondo claro,
   acentos verdes) en vez del azul oscuro plano de antes. Se oculta en
   móvil (queda oculto por completo en el media query) porque ahí el
   espacio es más valioso para el logo/buscador/carrito. El teléfono y el
   correo (320 933 0607 / Info@studiotoners.com) se siguen mostrando en el
   pie de página de todo el sitio — ver renderFooter() — así que el dato
   de contacto no se pierde.
   Ancho máximo igualado a 1680px (igual que .menu-familias, el footer y
   las demás secciones "anchas" del sitio) para que las tres franjas del
   header se sientan del mismo sistema, no de anchos distintos. */
/* Barra superior: azul cielo claro con degradado (nunca plano), texto azul
   marino oscuro para buen contraste, separadores verticales sutiles entre
   cada beneficio — mismo lenguaje "premium tecnológico" del resto del
   header, ahora en su versión clara. */
.header-beneficios {
  background: linear-gradient(120deg, #d6f0ff 0%, var(--azul-muy-claro) 45%, #cdeeff 100%);
  border-bottom: 1px solid rgba(7,61,112,.1);
}
.header-beneficios-contenido {
  max-width: 1680px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 13px; color: var(--gris-texto-frio);
}
.beneficio-item {
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  padding-right: 20px; border-right: 1px solid rgba(7,61,112,.14);
  transition: transform .15s ease;
}
.beneficio-item:hover { transform: translateY(-1px); }
/* Ícono en placa circular blanca con borde azul muy claro — el brillo
   azul/cian queda para el CTA de WhatsApp, que es el único con fondo
   sólido de la franja. */
.beneficio-icono-circulo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(7,61,112,.16);
  box-shadow: 0 2px 8px rgba(7,61,112,.1);
  display: flex; align-items: center; justify-content: center; color: var(--azul-corporativo);
  transition: background .15s ease;
}
.beneficio-item:hover .beneficio-icono-circulo { background: var(--azul-muy-claro); }
.beneficio-icono-circulo svg { width: 20px; height: 20px; stroke-width: 1.7; }
.beneficio-texto { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.beneficio-texto strong { color: var(--azul-marino); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.beneficio-texto small { color: var(--gris-texto-frio); font-size: 12px; }

/* CTA de WhatsApp: el elemento de acción principal de la franja — fondo
   verde corporativo, más padding, sombra y una ligera elevación al pasar
   el mouse (transform + box-shadow), para que se sienta como un botón
   comercial real, no como un ítem más de la lista. */
.beneficio-whatsapp {
  margin-left: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  background: linear-gradient(135deg, #25d366, #1fa855); color: #fff; padding: 11px 22px; border-radius: 999px;
  font-size: 13px; line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 16px 1px rgba(37,211,102,.35);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.beneficio-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 22px 3px rgba(37,211,102,.5);
}
.beneficio-whatsapp-icono { display: flex; flex-shrink: 0; }
.beneficio-whatsapp-icono svg { width: 24px; height: 24px; }
.beneficio-whatsapp-texto { display: flex; flex-direction: column; text-align: left; gap: 1px; }
.beneficio-whatsapp-texto strong { font-size: 14px; font-weight: 700; }
.beneficio-whatsapp-texto small { color: #e3f5e9; font-size: 11.5px; }
.beneficio-whatsapp-flecha { display: flex; flex-shrink: 0; }
.beneficio-whatsapp-flecha svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .15s ease; }
.beneficio-whatsapp:hover .beneficio-whatsapp-flecha svg { transform: translateX(3px); }

/* Header con más presencia: antes tenía poco padding vertical y un logo
   chico, así que se veía como una franja angosta comparada con el resto
   de la página (banner y menú, ambos edge-to-edge y con más peso visual).
   Se aumentó el aire vertical, el tamaño del logo/tipografía y los
   botones, y se agregó una línea de acento en degradado abajo que conecta
   visualmente el header con los colores vivos del carrusel. */
.header-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 28px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Bloque de marca: protagonista del header — grande, con espacio propio,
   nunca reducido a texto secundario (instrucción explícita del negocio:
   "no comprimir el bloque de marca"). Ahora es una sola imagen banner
   (mascota + ícono "St" + nombre + slogan, todo compuesto dentro del
   archivo — ver assets/logo-banner.webp) en vez del logo+texto+slogan
   armado con HTML/CSS de antes.
   Alto elegido para que el texto del banner (más chico dentro de la
   imagen que el "ST Market" de 32px de antes) siga siendo legible sin
   forzar el header mucho más alto — es un punto de partida, ajustable si
   Gonzalo lo ve muy chico/grande. En móvil, <picture> cambia a un
   recorte solo del ícono (ver media query más abajo). */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-banner-img { display: block; height: 100px; width: auto; }
.logo-fallback-texto { font-weight: 800; font-size: 22px; color: var(--azul-primario); }

/* Buscador: pieza visual principal del header — contenedor "glass" con
   borde azul muy claro y sombra suave, botón con degradado azul oscuro ->
   eléctrico y una micro-animación al pasar el mouse. */
.buscador {
  flex: 1 1 200px; display: flex; max-width: 340px; min-width: 160px;
  border-radius: 999px; background: #fff; border: 1px solid var(--azul-muy-claro);
  box-shadow: 0 4px 14px rgba(7,61,112,.1), inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease;
}
.buscador:focus-within { border-color: var(--azul-cian); box-shadow: 0 6px 18px rgba(7,61,112,.16), 0 0 0 3px rgba(34,199,245,.15); }
.buscador input {
  flex: 1; padding: 14px 18px; border: none; background: transparent;
  font-size: 15px; min-width: 0; color: var(--gris-texto);
}
.buscador input:focus { outline: none; }
.buscador button {
  border: none; background: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico));
  color: #fff; font-weight: 700; border-radius: 999px; margin: 4px;
  padding: 0 22px; cursor: pointer; white-space: nowrap; font-size: 14.5px;
  transition: filter .15s ease, transform .15s ease;
}
.buscador button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Ícono dentro de un círculo claro — usado por Favoritos, Mi cuenta y
   Carrito, para que los tres tengan la misma presencia visual "grande y
   clara" que pide el negocio. */
.header-icono-circulo {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  border: 1px solid var(--azul-muy-claro);
  box-shadow: 0 3px 10px rgba(7,61,112,.08);
  display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.header-icono-circulo svg { width: 22px; height: 22px; }
.header-btn-texto { font-size: 13px; font-weight: 700; color: var(--gris-texto-frio); }

.btn-header-favoritos, .btn-mi-cuenta {
  background: none; border: none; padding: 4px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--gris-texto-frio); flex-shrink: 0;
}
.btn-header-favoritos:hover .header-icono-circulo, .btn-mi-cuenta:hover .header-icono-circulo {
  background: var(--azul-muy-claro); box-shadow: 0 4px 14px rgba(7,61,112,.16);
  transform: scale(1.05);
}
.btn-header-favoritos .header-icono-circulo svg { fill: none; stroke: var(--azul-corporativo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-header-favoritos:hover .header-icono-circulo svg { stroke: var(--azul-electrico); }
.favoritos-contador {
  position: absolute; top: -2px; right: -2px;
  background: var(--rojo); color: #fff; border-radius: 50%;
  font-size: 11px; min-width: 17px; height: 17px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff;
}

/* "Mi cuenta": mismo mecanismo de apertura/cierre que los desplegables de
   categoría (.menu-familia / .menu-familia-btn / .menu-familia-dropdown /
   .abierta, ver renderHeader() en ui.js) pero con look de botón claro
   (como Favoritos/Carrito) porque vive en la franja blanca del header, no
   en el menú azul de categorías. Sin sistema de login real todavía — ver
   el comentario TODO en ui.js — así que por ahora deriva a WhatsApp. */
.menu-mi-cuenta .menu-familia-dropdown { left: auto; right: 0; }

/* Carrito: tarjeta premium (fondo claro, borde suave) con DOS filas, igual
   que la referencia aprobada: arriba el resumen (ícono + cantidad + total +
   flecha, abre/cierra el panel lateral), abajo el botón "Ver carrito" a todo
   lo ancho de la tarjeta — los dos hacen exactamente lo mismo
   (toggleCarritoPanel), solo cambia cuál conviene tocar según el
   contexto/tamaño de pantalla. */
/* Tarjeta del carrito: "glass / soft 3D / blue gradient" — degradado azul
   muy claro con borde y sombra suaves, coherente con el buscador y el resto
   del header premium. */
.carrito-grupo {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  background: linear-gradient(160deg, #ffffff, var(--azul-muy-claro));
  border: 1px solid var(--azul-muy-claro); border-radius: 16px; padding: 10px 12px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(7,61,112,.08);
}
.carrito-resumen {
  background: none; border: none; padding: 0; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 10px; color: var(--azul-profundo); font-family: inherit;
}
.carrito-icono-circulo { background: #fff; box-shadow: 0 2px 8px rgba(7,61,112,.12); }
.carrito-icono-circulo svg { width: 24px; height: 24px; stroke: var(--azul-corporativo); stroke-width: 1.8; }
.carrito-info { display: flex; align-items: center; gap: 4px; }
.carrito-chevron { font-size: 12px; color: var(--gris-suave); }
.carrito-contador {
  position: absolute; top: -4px; right: -4px;
  background: var(--azul-cian); color: #06324f; border-radius: 50%;
  font-size: 11px; min-width: 17px; height: 17px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff;
  font-weight: 800;
}
.carrito-total-header { font-size: 16px; font-weight: 800; color: var(--azul-profundo); }
/* "Ver carrito": degradado azul con brillo y elevación al pasar el mouse. */
.btn-ver-carrito {
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico));
  color: #fff; border: none; border-radius: 10px;
  padding: 14px 22px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(7,61,112,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-ver-carrito:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7,61,112,.32); }

/* ---------- Menú principal (categorías) ---------- */
/* Tarjeta flotante blanca/azul muy claro, bordes redondeados y sombra
   suave — degradado azul apenas perceptible hacia los extremos (nunca un
   fondo plano). Cada acceso es un ícono-badge circular "glossy" azul
   arriba + etiqueta oscura debajo; "Inicio" y "Ofertas Especiales" son las
   dos excepciones con píldora sólida en degradado azul, para quedar como
   los dos puntos de mayor protagonismo de la barra.
   TODOS los accesos (incluido Blog) caben en una sola fila en escritorio
   (≥1100px, mismo corte que ya usa el resto del header para pasar a la
   versión móvil) — por eso "wrap" y "min-width" quedan fuera a propósito. */
.menu-familias {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(2px, 0.5vw, 8px); flex-wrap: nowrap; position: relative;
  padding: 14px 22px;
  background: linear-gradient(90deg, var(--azul-muy-claro) 0%, #ffffff 18%, #fbfdff 50%, #ffffff 82%, var(--azul-muy-claro) 100%);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(7, 61, 112, .12), 0 1px 0 rgba(0,0,0,.03);
  max-width: 1680px; margin: 16px auto 22px;
}
/* Decoración muy sutil en los dos extremos: halo azul/cian difuminado +
   una pequeña cuadrícula de puntos — nada figurativo, solo la sensación
   "tecnología + movimiento" que pide el negocio, sin competir con los
   accesos reales. */
.menu-familias::before, .menu-familias::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px;
  pointer-events: none; z-index: 0; border-radius: 24px;
}
.menu-familias::before {
  left: 0;
  background: radial-gradient(circle at left center, rgba(34,199,245,.16) 0%, transparent 70%);
}
.menu-familias::after {
  right: 0;
  background: radial-gradient(circle at right center, rgba(34,199,245,.16) 0%, transparent 70%);
}

.menu-familia-item, .menu-familia-btn {
  color: var(--azul-marino); font-size: 14px; font-weight: 700; padding: 10px 10px; background: none; border: none;
  cursor: pointer; font-family: inherit; border-radius: 14px; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  flex: 0 1 auto; white-space: nowrap; transition: background .15s ease, transform .15s ease;
}
/* Ícono-badge circular "3D glossy": degradado azul (por defecto; cada
   categoría puede traer su propio degradado vía estilo inline — ver
   NAV_PRINCIPAL en ui.js), aro con reflejo superior claro y sombra inferior
   con volumen, ícono blanco limpio en el centro. */
.nav-icono {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinte-azul); color: #fff;
  box-shadow: 0 4px 10px rgba(7,61,112,.28), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-icono svg { width: 22px; height: 22px; stroke-width: 1.8; }
.nav-etiqueta { line-height: 1.2; }
.menu-familia-item:hover, .menu-familia-btn:hover { background: var(--azul-muy-claro); }
.menu-familia-item.activo { background: var(--azul-muy-claro); }
.menu-familia-item:hover .nav-icono, .menu-familia-btn:hover .nav-icono {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 16px rgba(7,61,112,.34), 0 0 14px 2px rgba(34,199,245,.5), inset 0 1px 2px rgba(255,255,255,.55);
}

/* Línea decorativa azul/cian debajo de cada categoría "normal" (antes era
   verde) — se ilumina al pasar el mouse. Inicio y Ofertas Especiales no la
   llevan — ya destacan con su propia píldora de color. */
.menu-familia-item::after, .menu-familia-btn::after {
  content: ""; width: 65%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--azul-cian), transparent);
  opacity: .45; transition: opacity .15s ease;
}
.menu-familia-item:hover::after, .menu-familia-btn:hover::after, .menu-familia-item.activo::after { opacity: 1; }
.menu-familia-item-inicio::after, .menu-familia-item-ofertas::after { display: none; }

/* "Inicio" siempre destacado: píldora en degradado azul profundo ->
   eléctrico, ícono y texto blancos, con halo/glow azul-cian sutil — mismo
   lenguaje "premium" que el resto de CTAs del header. No depende de estar
   en la página activa para verse importante. */
.menu-familia-item.menu-familia-item-inicio, .menu-familia-item.menu-familia-item-inicio:hover {
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico));
  color: #fff;
  box-shadow: 0 8px 20px rgba(7, 61, 112, .35), 0 0 26px 4px rgba(34, 199, 245, .38);
}
.menu-familia-item-inicio .nav-icono { background: rgba(255,255,255,.18); box-shadow: inset 0 1px 2px rgba(255,255,255,.4); color: #fff; }
.menu-familia-item-inicio:hover { transform: translateY(-2px); }

/* "Ofertas Especiales": único link del menú que no es una categoria real
   (ver CATEGORIA_OFERTAS_ESPECIALES en categorias.js) — máximo protagonismo
   comercial: pedido explícito del negocio, píldora en degradado DORADO
   brillante (el único punto de la barra que no es azul, a propósito, para
   que salte a la vista como oferta/urgencia). Tres paradas de color
   (dorado claro -> oro -> ámbar) más un brillo blanco superior simulan el
   reflejo metálico "dorado brillante". */
.menu-familia-item.menu-familia-item-ofertas, .menu-familia-item.menu-familia-item-ofertas:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 35%),
    linear-gradient(135deg, #fff3b0 0%, #ffd700 45%, #e0a800 75%, #b8860b 100%);
  color: #4a3400;
  box-shadow: 0 8px 24px rgba(184, 134, 11, .5), 0 0 28px 6px rgba(255, 215, 0, .6), inset 0 1px 1px rgba(255,255,255,.6);
}
.menu-familia-item-ofertas .nav-icono { background: rgba(255,255,255,.4); box-shadow: inset 0 1px 2px rgba(255,255,255,.7); }
.menu-familia-item-ofertas .nav-icono, .menu-familia-item-ofertas .nav-etiqueta { color: #4a3400; }
.menu-familia-item-ofertas:hover { transform: translateY(-2px); }

.menu-familia { position: relative; }
.menu-familia-dropdown {
  display: none; position: absolute; top: calc(100% + 10px); left: 0;
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15); min-width: 220px; padding: 8px 0;
  z-index: 21; flex-direction: column;
}
.menu-familia.abierta .menu-familia-dropdown { display: flex; }
.menu-familia-dropdown a { color: var(--gris-texto); font-size: 14px; padding: 9px 16px; }
.menu-familia-dropdown a:hover { background: var(--azul-muy-claro); color: var(--azul-corporativo); }
.menu-familia-dropdown a.activo { color: var(--azul-electrico); font-weight: 700; }

/* ---------- Menú de categorías en celular/tablet (☰) ---------- */
/* En pantallas angostas el menú de arriba (.menu-familias) se oculta por
   falta de espacio (ver media query más abajo) — este botón + panel
   deslizante lo reemplazan para que las categorías sigan siendo accesibles
   desde CUALQUIER página (no solo desde el inicio). Oculto en escritorio;
   la media query de más abajo lo muestra solo en pantallas angostas. */
.btn-menu-movil {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  color: var(--gris-texto); flex-shrink: 0;
}
.btn-menu-movil svg { width: 24px; height: 24px; }

.menu-movil-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.menu-movil-overlay.abierto { opacity: 1; pointer-events: auto; }

.menu-movil-drawer {
  position: fixed; top: 0; left: -320px; width: 300px; max-width: 85vw; height: 100%;
  background: var(--blanco); z-index: 61; box-shadow: 2px 0 16px rgba(0,0,0,.2);
  transition: left .28s ease; overflow-y: auto; display: flex; flex-direction: column;
}
.menu-movil-drawer.abierto { left: 0; }
.menu-movil-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(120deg, var(--azul-marino), var(--azul-profundo)); color: #fff;
}
.menu-movil-drawer-header strong { font-size: 15px; }
.menu-movil-drawer-header button { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }

.menu-movil-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; text-align: left;
  color: var(--gris-texto); font-weight: 600; font-size: 15px; border: none;
  border-bottom: 1px solid var(--gris-borde); background: none; font-family: inherit; cursor: pointer;
}
.menu-movil-item .nav-icono { width: 36px; height: 36px; }
.menu-movil-item .nav-icono svg { width: 18px; height: 18px; }
.menu-movil-item-ofertas { color: #b87700; font-weight: 800; }

.menu-movil-familia { border-bottom: 1px solid var(--gris-borde); }
.menu-movil-familia summary.menu-movil-item { border-bottom: none; list-style: none; }
.menu-movil-familia summary.menu-movil-item::-webkit-details-marker { display: none; }
.menu-movil-familia summary.menu-movil-item::after { content: "▾"; margin-left: auto; }
.menu-movil-familia[open] summary.menu-movil-item::after { content: "▴"; }
.menu-movil-familia[open] summary.menu-movil-item { background: var(--gris-fondo); }
.menu-movil-dropdown { display: flex; flex-direction: column; background: var(--gris-fondo); }
.menu-movil-dropdown a {
  padding: 12px 16px 12px 48px; color: var(--gris-texto); font-size: 14px;
  border-bottom: 1px solid var(--gris-borde);
}
.menu-movil-dropdown a:last-child { border-bottom: none; }

/* ---------- Banner: carrusel de promociones ---------- */
/* margin-top a propósito: separa el banner del header/menú — sin esto
   quedaba pegado justo debajo de la barra de navegación, sin aire. */
.banner-carrusel { background: var(--gris-fondo); margin-top: 20px; }

/* Sin max-width a propósito: el banner cubre el 100% del ancho de la
   pantalla (edge-to-edge), igual que en sitios de referencia tipo Éxito o
   Maxprinter — antes quedaba centrado en 1400px, dejando franjas vacías a
   los lados en pantallas anchas. */
/* Alto FIJO a propósito (antes era variable por slide, recalculado en JS
   con ajustarAltoCarrusel): con fotos de proporciones muy distintas entre
   sí (1.87:1, 2:1, 3.2:1) esa altura variable hacía que el carrusel completo
   "saltara" de tamaño al rotar, y cada banner se viera con una medida
   distinta. Ahora todos los slides — fotos y banners de texto/gradiente —
   comparten el mismo alto de viewport; las fotos se recortan con
   object-fit:cover para llenarlo sin deformarse. */
.carrusel-viewport { position: relative; overflow: hidden; height: 400px; }

.carrusel-track { display: flex; align-items: stretch; height: 100%; transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1); }

.carrusel-slide {
  flex: 0 0 100%; height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: 26px 24px;
}
.carrusel-slide-contenido { max-width: 620px; }

/* Slides de "imagenCompleta": la foto ya trae todo el diseño. Antes se
   mostraba a su alto natural (height:auto); ahora llena el mismo alto fijo
   que los demás slides y se recorta con object-fit:cover (centrado), para
   que las 3 fotos (de proporciones distintas entre sí) se vean con la
   misma medida que el resto del carrusel. */
.carrusel-slide-imagen { padding: 0; display: block; }
.carrusel-slide-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carrusel-icono { font-size: 40px; display: block; margin-bottom: 8px; }
.carrusel-slide h2 { font-size: 28px; margin: 0 0 8px; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.carrusel-slide p { font-size: 15px; color: #eef3f7; margin: 0 0 14px; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.carrusel-cta { display: inline-block; }

/* ---- Banner "tech": fondo con degradado vivo + grilla sutil, para los
   slides institucional y de descuento (sin foto de producto real). El
   fondo va acá (no en el style inline) porque necesita varias capas
   (glows + grilla) que un solo background inline no puede armar. ---- */
.carrusel-slide.banner-tech {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(620px 380px at 92% -18%, rgba(255,62,200,.7), transparent 62%),
    radial-gradient(640px 420px at 60% -6%, rgba(139,92,246,.75), transparent 60%),
    radial-gradient(560px 380px at 106% 96%, rgba(34,224,255,.7), transparent 60%),
    radial-gradient(320px 260px at 4% 104%, rgba(186,255,57,.28), transparent 65%),
    linear-gradient(120deg, #150a30, #3a0f66 38%, #7b1fa2 62%, #1a3a8f 85%, #062340);
  background-size: 180% 180%;
  animation: banner-tech-drift 16s ease-in-out infinite alternate;
}
@keyframes banner-tech-drift { 0% { background-position: 0% 30%; } 100% { background-position: 100% 70%; } }
@media (prefers-reduced-motion: reduce) { .carrusel-slide.banner-tech { animation: none; } }

.carrusel-slide.banner-tech::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(160deg, #000 5%, transparent 62%);
          mask-image: linear-gradient(160deg, #000 5%, transparent 62%);
}

.carrusel-slide.banner-tech .carrusel-slide-contenido { position: relative; z-index: 1; }
.carrusel-slide.banner-tech h2,
.carrusel-slide.banner-tech p { text-shadow: 0 2px 14px rgba(0,0,0,.35); }

/* Modificador "izq": el banner institucional, con texto a la izquierda,
   distintivo blanco y fila de marcas (el de descuento se queda centrado,
   como los demás banners de texto). */
.carrusel-slide.banner-tech-izq { justify-content: flex-start; text-align: left; }
.carrusel-slide.banner-tech-izq .carrusel-slide-contenido { max-width: 560px; }

.carrusel-distintivo {
  display: inline-block; background: #fff; color: var(--azul-oscuro);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 8px;
}

.carrusel-slide.banner-tech-izq h2::before {
  content: ""; display: block; width: 52px; height: 5px; border-radius: 3px; margin-bottom: 10px;
  background: linear-gradient(90deg, #baff39, #22e0ff, #8b5cf6, #ff3ec8);
  box-shadow: 0 0 16px rgba(34,224,255,.8), 0 0 26px rgba(255,62,200,.4);
}

.marcas-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.marca-chip {
  font-family: "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.08); color: #eef3f7; padding: 4px 10px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.3);
}
.marca-chip:nth-child(1) { border-color: rgba(34,224,255,.6); color: #c9f5ff; }
.marca-chip:nth-child(2) { border-color: rgba(139,92,246,.65); color: #e3d9ff; }
.marca-chip:nth-child(3) { border-color: rgba(255,62,200,.6); color: #ffd6f2; }
.marca-chip:nth-child(4) { border-color: rgba(186,255,57,.6); color: #eaffb8; }
.marca-chip:nth-child(5) { border-color: rgba(255,138,61,.65); color: #ffdcbf; }

.carrusel-slide.banner-tech .carrusel-cta {
  background: linear-gradient(90deg, #baff39, #22e0ff 40%, #8b5cf6 75%, #ff3ec8);
  color: #0a0512; font-weight: 800; box-shadow: 0 6px 26px rgba(139,92,246,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
}

/* ---- Sección "Compra en línea" (B2C) vs "Cotización empresarial" (B2B):
   deja explícito desde el home que hay dos caminos distintos según quién
   compra — el cliente individual y la empresa/colegio/entidad que necesita
   cotizar primero. ---- */
.seccion-b2b { max-width: 1680px; margin: 20px auto 0; padding: 0 24px; }

.b2b-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}

/* ---- Botón "Continuar por WhatsApp" del modal de éxito de la cotización
   (cotizacion-b2b.js) — es el único lugar del sitio que sigue usando esta
   clase; los dos banners de abajo ya no la usan. ---- */
.btn-whatsapp-b2b {
  background: #25d366; color: #fff; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: none; cursor: pointer;
  font-size: 14px; font-family: inherit;
}
.btn-whatsapp-b2b:hover { background: #1fb955; }

/* ---- Banners "Compra en línea" y "Solicita tu cotización empresarial":
   se muestra la imagen final del cliente completa, tal cual — SIN overlays,
   SIN gradientes oscuros, SIN texto ni botones HTML superpuestos. Cada
   imagen ya trae su propio diseño (texto, iconos y botón "pintados" en la
   imagen). Solo se agrega una zona de clic invisible sobre el botón que ya
   está dibujado en la imagen, para que la interacción siga funcionando. ---- */
.promo-banner {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 1737 / 906; box-shadow: 0 8px 22px rgba(8,42,77,.15);
}
.promo-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#banner-compra img { object-position: center; }
#banner-cotizacion img { object-position: left center; }

.banner-click-area {
  position: absolute; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer;
}
.banner-click-compra { left: 4%; top: 80%; width: 62%; height: 15%; }
.banner-click-cotizacion { left: 4%; top: 76%; width: 63%; height: 18%; }

/* Columna que envuelve cada banner + su leyenda de CTA en texto (ver
   renderSeccionB2B en ui.js) — la leyenda va DEBAJO de la imagen, nunca
   encima: no toca ni tapa el diseño ya aprobado de la foto. */
.promo-banner-col { display: flex; flex-direction: column; gap: 8px; }
.promo-banner-cta {
  align-self: center; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--azul-primario); padding: 2px 6px;
}
.promo-banner-cta:hover { color: var(--verde-oscuro); text-decoration: underline; }

@media (max-width: 640px) {
  .b2b-grid { grid-template-columns: 1fr; }
}

/* ---------- Modal "Solicita tu cotización empresarial" ---------- */
.cotizacion-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cotizacion-modal {
  position: relative; background: #fff; border-radius: 14px; max-width: 480px; width: 100%;
  max-height: 92vh; overflow-y: auto; padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.cotizacion-modal-cerrar {
  position: absolute; top: 14px; right: 14px; background: var(--gris-fondo); border: 1px solid var(--gris-borde);
  border-radius: 50%; width: 36px; height: 36px; font-size: 15px; cursor: pointer; z-index: 1;
}
.cotizacion-modal-cerrar:focus-visible,
#form-cotizacion input:focus-visible,
#form-cotizacion textarea:focus-visible,
.cotizacion-archivo-quitar:focus-visible,
#btn-enviar-cotizacion:focus-visible {
  outline: 2px solid var(--verde-acento); outline-offset: 2px;
}
.cotizacion-modal h3 { margin: 0 30px 4px 4px; font-size: 18px; color: var(--azul-oscuro); }
.cotizacion-modal-subtitulo { margin: 0 4px 18px; font-size: 13.5px; color: var(--gris-suave); line-height: 1.4; }

#form-cotizacion label { display: block; font-size: 13px; font-weight: 600; color: var(--gris-texto); margin: 14px 4px 6px; }
#form-cotizacion input[type="text"],
#form-cotizacion input[type="tel"],
#form-cotizacion textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--gris-borde); border-radius: 8px; font-size: 15px;
  font-family: inherit; color: var(--gris-texto);
}
#form-cotizacion input:focus, #form-cotizacion textarea:focus {
  outline: none; border-color: var(--verde-acento); box-shadow: 0 0 0 3px rgba(46,139,71,.15);
}
#form-cotizacion textarea { resize: vertical; min-height: 70px; }
.cotizacion-label-archivos { margin-top: 18px !important; }
#cotizacion-archivos { width: 100%; font-size: 13px; padding: 8px 0; }
.cotizacion-archivos-ayuda { margin: 4px 4px 8px; font-size: 11.5px; color: var(--gris-suave); }
.cotizacion-error { color: var(--rojo); font-size: 12.5px; margin: 4px 4px 0; }

.cotizacion-lista-archivos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cotizacion-archivo-item {
  display: flex; align-items: center; gap: 8px; background: var(--gris-fondo); border: 1px solid var(--gris-borde);
  border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
}
.cotizacion-archivo-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotizacion-archivo-meta { color: var(--gris-suave); flex-shrink: 0; }
.cotizacion-archivo-quitar {
  background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 14px; padding: 4px 6px; flex-shrink: 0;
  min-width: 28px; min-height: 28px;
}

#btn-enviar-cotizacion { margin-top: 20px; font-size: 15px; padding: 14px 16px; min-height: 48px; }
#btn-enviar-cotizacion:disabled { opacity: .7; cursor: not-allowed; }

.cotizacion-exito { text-align: center; padding: 12px 4px 4px; }
.cotizacion-exito-icono { font-size: 42px; display: block; margin-bottom: 10px; }
.cotizacion-exito h3 { margin: 0 0 8px; font-size: 17px; color: var(--azul-oscuro); }
.cotizacion-exito p { margin: 0 0 18px; font-size: 13.5px; color: var(--gris-suave); }
.cotizacion-exito-redirigiendo { font-size: 12px !important; color: var(--gris-suave); margin-top: -10px !important; }

@media (max-width: 480px) {
  .cotizacion-modal { padding: 22px 16px; border-radius: 12px; max-width: 100%; }
  .cotizacion-modal-overlay { padding: 0; align-items: flex-end; }
  .cotizacion-modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
}

/* ---- Franja de confianza: debajo del carrusel, antes de categorías ---- */
.franja-confianza {
  max-width: 1680px; margin: 0 auto; padding: 0 24px 8px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px;
}
@media (min-width: 640px) { .franja-confianza { grid-template-columns: repeat(4, 1fr); } }
.franja-item { display: flex; align-items: flex-start; gap: 10px; }
.franja-item svg { width: 26px; height: 26px; flex-shrink: 0; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.franja-item:nth-child(1) svg { stroke: #0f9fd6; }
.franja-item:nth-child(2) svg { stroke: #8b5cf6; }
.franja-item:nth-child(3) svg { stroke: #e0399f; }
.franja-item:nth-child(4) svg { stroke: var(--verde-acento); }
.franja-texto { display: flex; flex-direction: column; }
.franja-num { font-weight: 800; font-size: 16px; color: var(--azul-oscuro); }
.franja-lbl { font-size: 12.5px; color: var(--gris-suave); line-height: 1.35; }

.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--azul-oscuro); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.carrusel-flecha:hover { background: #fff; }
.carrusel-flecha-izq { left: 16px; }
.carrusel-flecha-der { right: 16px; }

.carrusel-puntos {
  position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.carrusel-punto {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.5);
}
.carrusel-punto.activo { background: #fff; width: 22px; border-radius: 5px; transition: width .2s; }

/* ---------- Categorías destacadas ---------- */
/* Ancho de contenido principal: antes 1200px, que en monitores anchos
   (1440px+) dejaba franjas vacías enormes a los lados y hacía que las
   tarjetas de producto se vieran chicas y comprimidas — ver instrucción
   explícita del negocio de aprovechar casi todo el ancho de pantalla,
   tomando como referencia de PROPORCIÓN (no de diseño/colores) sitios como
   Comercial Papelera, Maxprinter y Panamericana. 1680px sigue dejando un
   gutter razonable en pantallas 4K/ultrawide sin volver a angostar el
   contenido en laptops de 1366-1440px (ahí prácticamente llega borde a
   borde con el padding). El grid de productos (.productos-grid, más abajo)
   es auto-fill, así que con más ancho de contenedor entran más columnas y
   las tarjetas/imágenes crecen solas, sin tocar su CSS. */
.seccion-categorias, .seccion-destacados, .seccion-catalogo, .seccion-ficha, .seccion-checkout {
  max-width: 1680px; margin: 0 auto; padding: 30px 32px;
}
.seccion-categorias h2, .seccion-destacados h2, .seccion-catalogo h2 { font-size: 20px; margin-bottom: 16px; color: var(--azul-oscuro); }

/* Carrusel horizontal de categorías (ícono circular + etiqueta), inspirado
   en el carrusel de referencia ("Comprar por categoría"): una sola fila que
   se desliza sola cada pocos segundos (ver iniciarCarruselCategorias() en
   catalogo.js) y también se puede mover a mano con las flechas ‹ ›. Antes
   era una grilla fija de 2 filas con tiles cuadrados — se reemplaza por
   completo. */
.categorias-carrusel { display: flex; align-items: center; gap: 8px; }

.categorias-carrusel-flecha {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gris-borde); background: var(--blanco); color: var(--azul-oscuro);
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.categorias-carrusel-flecha:hover { background: #e8f3ec; border-color: var(--verde-acento); }

/* IMPORTANTE: NO poner "scroll-behavior: smooth" acá. El auto-deslizamiento
   continuo (ver iniciarCarruselCategorias en catalogo.js) mueve scrollLeft
   en pasos diminutos (0.55px) en cada frame — si el viewport tiene
   scroll-behavior:smooth por CSS, cada uno de esos pasos dispara su propia
   mini-animación "suave" que choca con la del frame anterior (llega uno
   nuevo antes de que termine el de antes). En Chromium de pruebas eso no se
   nota, pero en el Edge real del cliente el resultado es que el carrusel se
   ve completamente estático — las animaciones en conflicto terminan
   cancelándose entre sí. Las flechas (que sí deben verse suaves) ya piden
   behavior:"smooth" explícitamente en su propio scrollTo(), así que no
   necesitan esta regla CSS. */
.categorias-carrusel-viewport {
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.categorias-carrusel-viewport::-webkit-scrollbar { display: none; }

.categorias-carrusel-pista { display: flex; gap: 22px; padding: 6px 2px 10px; }

.categoria-tile {
  flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}

/* El círculo pastel es lo que cambia de estado (hover/seleccionado) — la
   etiqueta de abajo se queda quieta, igual que en la referencia. */
.categoria-tile-icono {
  width: 84px; height: 84px; border-radius: 50%; background: #eaf2fb;
  font-size: 36px; line-height: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; transition: transform .2s, border-color .2s, background .2s;
  animation: iconoFlotar 2.6s ease-in-out infinite;
}
.categoria-tile:hover .categoria-tile-icono { transform: translateY(-3px) scale(1.05); border-color: var(--verde-acento); }

/* Categoría que el cliente eligió (hover real o clic): círculo marcado de
   forma permanente y clara hasta que elija otra. */
.categoria-tile.categoria-tile-seleccionada .categoria-tile-icono {
  background: #e8f3ec; border-color: var(--verde-acento); box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.categoria-tile.categoria-tile-seleccionada .categoria-tile-etiqueta { color: var(--verde-oscuro); }

@keyframes iconoFlotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .categoria-tile-icono { animation: none; }
}

.categoria-tile-etiqueta { font-size: 13px; font-weight: 700; color: var(--gris-texto); }

/* ---------- Grid de productos ---------- */
.productos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px;
  transition: opacity .18s ease;
}
/* Al cambiar de categoría (clic en un ícono de "Explora por categoría") el
   grid hace un fundido corto en vez de parpadear o recargar la página —
   ver aplicarFiltroCategoria() / transicionarContenido() en catalogo.js. */
.productos-grid.en-transicion { opacity: 0; }

.producto-card {
  background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  /* Franja libre arriba de la foto para el corazón de favoritos — así el
     ícono queda en su propio espacio en vez de montado sobre la esquina de
     la imagen del producto. */
  padding-top: 42px;
}
.producto-imagen-link { aspect-ratio: 1 / 1; overflow: hidden; background: #f0f2f4; }
.producto-imagen-link img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
/* Pasar el mouse por encima ya da una pequeña sensación de foco (no altera
   el layout: el marco de la imagen tiene overflow:hidden). */
.producto-card:hover .producto-imagen-link img { transform: scale(1.05); }

/* Producto "principal"/más relevante de la sección (el primero después de
   ordenar por relevancia, ver js/producto-card.js): su imagen se ve un poco
   más protagonista que las demás, sin deformarse ni salirse del marco. */
.producto-card--destacado .producto-imagen-link img { transform: scale(1.12); }
.producto-card--destacado:hover .producto-imagen-link img { transform: scale(1.16); }
.producto-card-info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.producto-categoria { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--verde-oscuro); font-weight: 700; }
.producto-nombre { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--gris-texto); }
.producto-precio { font-size: 18px; font-weight: 700; color: var(--azul-primario); margin: 4px 0; }
.producto-entrega { font-size: 12px; color: var(--gris-suave); margin: -2px 0 6px; }

.producto-imagen-link, .producto-nombre { cursor: pointer; }

/* ---------- Acciones de la tarjeta: 2 botones apilados (Agregar/Comprar),
   igual que la referencia de la competencia — sin selector de cantidad acá,
   para que la tarjeta quede del mismo alto/proporción que la de muestra. */
.producto-card-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.btn-secundario-card {
  background: #fff; color: var(--azul-oscuro); border: 1px solid var(--azul-oscuro);
  font-weight: 600;
}
.btn-secundario-card:hover { background: var(--gris-fondo); }
.btn-comprar-card { background: var(--azul-oscuro); color: #fff; font-weight: 700; }
.btn-comprar-card:hover { background: var(--azul-primario); }

/* ---------- Bloque de precio con efecto anclaje (precio anterior tachado
   + badge de % descuento) — ver bloquePrecioHTML() en carrito.js. El precio
   anterior tachado "ancla" mentalmente un valor más alto, así el precio
   final se percibe como una oferta, igual que en la competencia. ---- */
.bloque-precio { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.bloque-precio .producto-precio,
.bloque-precio .ficha-precio { margin-top: 0; }
.precio-anterior {
  font-size: 13px; color: var(--gris-suave); text-decoration: line-through;
}
.badge-descuento {
  background: var(--azul-oscuro); color: #fff; font-weight: 800; font-size: 11px;
  letter-spacing: .02em; padding: 3px 7px; border-radius: 5px; margin-bottom: 4px;
  align-self: flex-start;
}

/* ---------- Botón de favoritos (corazón) ---------- */
/* Estilo tipo "chip" cuadrado con borde marcado (como la competencia:
   comercialpapelera.com.co) en vez del círculo suelto de antes — borde
   oscuro bien visible, fondo blanco, y el corazón se rellena de rojo
   intenso al marcarlo. */
.btn-favorito {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 7px;
  border: 2px solid var(--azul-oscuro);
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: transform .1s, border-color .15s;
}
.btn-favorito:hover { transform: scale(1.06); border-color: var(--rojo); }
.btn-favorito.activo { border-color: var(--rojo); background: #fff; }

/* El corazón es un SVG (ver js/favoritos.js), no un emoji: el color y
   relleno se controlan acá, así se ve igual en cualquier navegador —
   contorno oscuro marcado cuando no está marcado, relleno rojo intenso
   cuando sí. */
.btn-favorito svg {
  width: 19px; height: 19px;
  fill: none; stroke: var(--azul-oscuro); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: fill .15s, stroke .15s;
}
.btn-favorito:hover svg { stroke: var(--rojo); }
.btn-favorito.activo svg { fill: var(--rojo); stroke: var(--rojo); }

.ficha-info-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-info-cabecera .btn-favorito { position: static; background: var(--gris-fondo); box-shadow: none; }

.card-selector-cantidad { display: flex; align-items: center; border: 1px solid var(--gris-borde); border-radius: 6px; overflow: hidden; align-self: flex-start; }
.card-selector-cantidad button { background: var(--gris-fondo); border: none; width: 28px; height: 30px; cursor: pointer; font-size: 14px; }
.card-selector-cantidad input { width: 40px; text-align: center; border: none; border-left: 1px solid var(--gris-borde); border-right: 1px solid var(--gris-borde); height: 30px; font-size: 13px; }

.sin-resultados { color: var(--gris-suave); padding: 20px 0 0; font-weight: 700; }
.sin-resultados-sugerencia { color: var(--gris-suave); padding: 0 0 20px; font-size: 14px; }

/* ---------- Vista rápida de producto (modal) ---------- */
.product-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.product-modal {
  position: relative; background: #fff; border-radius: 12px; max-width: 900px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 32px;
}
.product-modal-cerrar {
  position: absolute; top: 14px; right: 14px; background: var(--gris-fondo); border: 1px solid var(--gris-borde);
  border-radius: 50%; width: 32px; height: 32px; font-size: 15px; cursor: pointer; z-index: 1;
}
.product-modal .ficha-producto { gap: 28px; }

@media (max-width: 700px) {
  .product-modal { padding: 20px; }
  .product-modal .ficha-producto { grid-template-columns: 1fr; }
}

/* ---------- Botones ---------- */
.btn {
  border: none; border-radius: 6px; padding: 10px 16px; font-size: 14px;
  font-weight: 600; cursor: pointer; text-align: center; display: inline-block;
}
.btn-primario { background: var(--verde-acento); color: #fff; }
.btn-primario:hover { background: var(--verde-oscuro); }
.btn-full { width: 100%; }
.btn[disabled], .btn.disabled { background: var(--gris-borde); color: var(--gris-suave); cursor: not-allowed; pointer-events: none; }

/* ---------- Ficha de producto ---------- */
.ficha-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.ficha-galeria { display: flex; flex-direction: column; gap: 10px; }
.ficha-imagen { background: #f0f2f4; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; }
.ficha-imagen img { width: 100%; height: 100%; object-fit: cover; }
.ficha-miniaturas { display: flex; gap: 8px; }
.ficha-mini {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; opacity: .65; background: #f0f2f4; transition: opacity .15s, border-color .15s;
}
.ficha-mini:hover { opacity: 1; }
.ficha-mini.activa { opacity: 1; border-color: var(--verde-acento); }
.ficha-especificaciones { margin: 4px 0 0; padding-left: 18px; color: var(--gris-suave); font-size: 13px; line-height: 1.6; }
.ficha-info h1 { font-size: 30px; margin: 8px 0; color: var(--azul-oscuro); line-height: 1.25; }
.ficha-descripcion { color: var(--gris-suave); line-height: 1.5; }
.ficha-precio { font-size: 30px; font-weight: 700; color: var(--azul-primario); margin: 4px 0; }

/* Vistas del producto: dato de confianza discreto, no una alerta — mismo
   patrón visual que .ficha-entrega (pastilla con fondo suave) pero en azul
   de marca en vez de verde, para no competir con el toast de visitas del
   sitio (ese sí busca llamar la atención; esto es solo información). Se
   deja oculto hasta que producto.js confirme que hay vistas suficientes
   para mostrar (ver VISTA_PRODUCTO_MINIMO_VISIBLE). */
.ficha-vistas {
  display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--azul-primario);
  background: var(--gris-fondo); border-radius: 6px; padding: 5px 10px; margin: 2px 0 8px;
}
.ficha-entrega {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--verde-oscuro);
  background: #e8f3ec; border-radius: 6px; padding: 6px 10px; margin: 4px 0 10px;
}
.ficha-entrega-larga { color: #8a5a00; background: #fbf0dc; }
.etiqueta-agotado { color: var(--rojo); font-weight: 700; }
.ficha-acciones { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

/* ---------- Disponibilidad (stock) en la ficha del producto ---------- */
.ficha-disponibilidad { margin: 6px 0 4px; }
.ficha-disponibilidad-estado { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.ficha-disponibilidad-ok { color: var(--verde-oscuro); }
.ficha-disponibilidad-agotado { color: var(--rojo); }
.ficha-stock { color: var(--gris-suave); font-size: 13px; margin: 0; }

/* ---------- Pestañas "Descripción" / "Detalles del producto" ---------- */
.ficha-tabs { grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid var(--gris-borde); padding-top: 20px; }
.ficha-tabs-botones { display: flex; gap: 22px; border-bottom: 1px solid var(--gris-borde); margin-bottom: 16px; }
.ficha-tab-btn {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--gris-suave);
  padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ficha-tab-btn.activo { color: var(--azul-oscuro); border-bottom-color: var(--azul-oscuro); }
.ficha-tab-panel p { margin: 0 0 10px; color: var(--gris-texto); line-height: 1.55; white-space: pre-line; }
.ficha-detalles-lista p { margin: 0 0 8px; }
.ficha-detalles-lista p strong { color: var(--azul-oscuro); }

.ficha-descripcion-larga { margin: 14px 0; }
.ficha-descripcion-larga h3 { font-size: 15px; margin: 0 0 6px; color: var(--azul-oscuro); }
.ficha-descripcion-larga p { margin: 0; color: var(--gris-texto); line-height: 1.55; white-space: pre-line; }

/* Enlace único de campaña (Meta/TikTok/Google/YouTube Ads) — discreto, no
   compite visualmente con "Añadir al carrito", pero queda a mano en la
   ficha para copiarlo al armar un anuncio de un solo producto. */
.btn-link-campania {
  display: block; margin-top: 12px; background: none; border: none; padding: 0;
  font-size: 12.5px; color: var(--gris-suave); text-decoration: underline;
  cursor: pointer; font-family: inherit;
}
.btn-link-campania:hover { color: var(--azul-primario); }

.selector-cantidad { display: flex; align-items: center; border: 1px solid var(--gris-borde); border-radius: 6px; overflow: hidden; }
.selector-cantidad button { background: var(--gris-fondo); border: none; width: 34px; height: 38px; cursor: pointer; font-size: 16px; }
.selector-cantidad input { width: 50px; text-align: center; border: none; border-left: 1px solid var(--gris-borde); border-right: 1px solid var(--gris-borde); height: 38px; }

/* ---------- Panel de carrito ---------- */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 30;
}
.cart-overlay.visible { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: -400px; width: 380px; max-width: 92vw; height: 100%;
  background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.15); z-index: 31;
  display: flex; flex-direction: column; transition: right .25s ease;
}
.cart-drawer.abierto { right: 0; }

.cart-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--gris-borde);
}
.cart-drawer-header button { background: none; border: none; font-size: 18px; cursor: pointer; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.cart-vacio { color: var(--gris-suave); text-align: center; margin-top: 40px; }

.cart-item { display: grid; grid-template-columns: 22px 56px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); align-items: center; }
.cart-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #f0f2f4; }
.cart-item-nombre { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.cart-item-precio { font-size: 12px; color: var(--gris-suave); margin: 0 0 6px; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 22px; height: 22px; border: 1px solid var(--gris-borde); background: #fff; border-radius: 4px; cursor: pointer; }
.btn-eliminar {
  background: none; border: 1px solid var(--gris-borde); color: var(--rojo); border-radius: 50%;
  width: 22px; height: 22px; font-size: 11px; cursor: pointer; line-height: 1; padding: 0;
}
.btn-eliminar:hover { background: #fbe9e7; border-color: var(--rojo); }

/* ---------- Modal de confirmación al agregar al carrito ---------- */
.agregado-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.agregado-modal {
  position: relative; background: #fff; border-radius: 12px; max-width: 420px; width: 100%;
  padding: 28px 24px 24px;
}
.agregado-modal-cerrar {
  position: absolute; top: 14px; right: 14px; background: var(--gris-fondo); border: 1px solid var(--gris-borde);
  border-radius: 50%; width: 30px; height: 30px; font-size: 14px; cursor: pointer;
}
.agregado-modal-titulo { font-size: 16px; font-weight: 700; color: var(--verde-oscuro); margin: 0 32px 20px 0; }
.agregado-modal-producto { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.agregado-modal-producto img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #f0f2f4; flex-shrink: 0; }
.agregado-modal-nombre { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.agregado-modal-cantidad { font-size: 13px; color: var(--gris-suave); margin: 0 0 4px; }
.agregado-modal-precio { font-size: 16px; font-weight: 700; margin: 0; }
.agregado-modal-acciones { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 480px) {
  .agregado-modal { padding: 24px 18px 18px; }
}

.cart-drawer-footer { padding: 16px 18px; border-top: 1px solid var(--gris-borde); }
.cart-total-linea { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--gris-suave); }
.cart-total-final { font-size: 16px; font-weight: 700; color: var(--gris-texto); padding-top: 6px; border-top: 1px solid var(--gris-borde); }
.cart-descuento-linea span, .cart-descuento-linea strong { color: var(--verde-oscuro); }

.cart-cupon { display: flex; gap: 8px; margin-bottom: 8px; }
.cart-cupon input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: 13px; font-family: inherit;
}
.cart-cupon button {
  border: 1px solid var(--azul-primario); background: #fff; color: var(--azul-primario);
  border-radius: 6px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cart-cupon-mensaje { font-size: 12px; margin: 0 0 10px; min-height: 14px; }
.cart-cupon-mensaje.cart-cupon-ok { color: var(--verde-oscuro); }
.cart-cupon-mensaje.cart-cupon-error { color: var(--rojo); }

.btn-secundario { background: #fff; color: var(--azul-primario); border: 1px solid var(--azul-primario); margin-top: 8px; }
.btn-secundario:hover { background: var(--gris-fondo); }

/* ---------- Botones flotantes ---------- */
.floating-buttons { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 25; }
.btn-flotante {
  display: flex; align-items: center; gap: 8px; border-radius: 30px; padding: 12px 18px;
  font-weight: 700; font-size: 14px; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  min-height: 48px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-asesor {
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico));
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px rgba(7,61,112,.3), 0 0 14px 1px rgba(34,199,245,.35);
}
.btn-asesor:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); box-shadow: 0 8px 20px rgba(7,61,112,.38), 0 0 20px 3px rgba(34,199,245,.5); }

/* ---------- Chat del asesor virtual ---------- */
.chat-ventana {
  position: fixed; right: 20px; bottom: 90px; width: 340px; max-width: calc(100vw - 40px);
  height: 460px; max-height: 70vh; background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); display: none; flex-direction: column;
  overflow: hidden; z-index: 26;
}
.chat-ventana.abierta { display: flex; }

.chat-header {
  background: var(--azul-primario); color: #fff; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px;
}
.chat-header-acciones { display: flex; align-items: center; gap: 10px; }
.chat-header-acciones a { color: #fff; text-decoration: none; }
.chat-header-acciones button { background: none; border: none; color: #fff; cursor: pointer; font-size: 15px; }

.chat-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--gris-fondo); }

.chat-burbuja { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.chat-burbuja-usuario { align-self: flex-end; background: var(--azul-primario); color: #fff; border-bottom-right-radius: 3px; }
.chat-burbuja-bot { align-self: flex-start; background: #fff; border: 1px solid var(--gris-borde); color: var(--gris-texto); border-bottom-left-radius: 3px; }
.chat-escribiendo { color: var(--gris-suave); font-style: italic; }

.chat-cta-whatsapp {
  align-self: flex-start; background: #25d366; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
}

.chat-imagen-producto {
  align-self: flex-start; max-width: 85%; background: #fff; border: 1px solid var(--gris-borde);
  border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.chat-imagen-producto img { width: 100%; border-radius: 8px; display: block; }
.chat-imagen-caption { font-size: 11px; color: var(--gris-suave); font-style: italic; margin: 0; }
.chat-imagen-producto .chat-cta-whatsapp { align-self: stretch; text-align: center; }

.chat-form { display: flex; border-top: 1px solid var(--gris-borde); }
.chat-form input {
  flex: 1; border: none; padding: 12px 14px; font-size: 13px; font-family: inherit;
}
.chat-form input:focus { outline: none; }
.chat-form button {
  border: none; background: var(--verde-acento); color: #fff; width: 46px; font-size: 16px; cursor: pointer;
}

@media (max-width: 480px) {
  .chat-ventana { right: 10px; bottom: 80px; }
}

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.checkout-vacio { text-align: center; padding: 60px 0; }
.checkout-vacio .btn { margin-top: 14px; }

.resumen-pedido, .form-facturacion, .pago-exitoso { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; padding: 22px; }

.fila-resumen { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); }
.fila-resumen-imagen { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: #f0f2f4; flex-shrink: 0; }
.fila-resumen-producto { flex: 1; min-width: 0; }
.fila-resumen-producto span { display: block; font-size: 12px; color: var(--gris-suave); }
.fila-resumen-qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.fila-resumen .btn-eliminar { flex-shrink: 0; }
.fila-resumen-desglose { text-align: right; font-size: 13px; color: var(--gris-suave); display: flex; flex-direction: column; gap: 2px; }
.fila-resumen-desglose strong { color: var(--gris-texto); font-size: 14px; }

.totales-generales { margin-top: 16px; }
.totales-generales div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.total-final { font-size: 18px; font-weight: 700; color: var(--azul-primario); border-top: 1px solid var(--gris-borde); margin-top: 6px; padding-top: 10px !important; }

.form-facturacion label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--gris-texto); }
.form-facturacion input, .form-facturacion select, .form-facturacion textarea {
  width: 100%; padding: 9px 10px; margin-top: 4px; border: 1px solid var(--gris-borde);
  border-radius: 6px; font-size: 14px; font-family: inherit;
}

.pago-exitoso { text-align: left; }
.icono-exito { font-size: 40px; text-align: center; }
.pago-exitoso h2 { text-align: center; color: var(--verde-oscuro); }
.pago-exitoso > p:first-of-type { text-align: center; color: var(--gris-suave); margin-bottom: 20px; }
.detalle-estado { text-align: center; color: var(--gris-suave); font-size: 13px; margin-top: -10px; }
.datos-envio { margin: 18px 0; font-size: 14px; }
.datos-envio p { margin: 4px 0; }
.pago-exitoso .btn { display: block; margin: 16px auto 0; width: fit-content; }

.form-subtitulo { margin: 20px 0 10px; font-size: 15px; color: var(--azul-primario); border-top: 1px solid var(--gris-borde); padding-top: 16px; }

.opciones-entrega, .opciones-pago { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.opcion-radio {
  display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px;
  border: 1px solid var(--gris-borde); border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.opcion-radio input { width: auto; margin: 0; }
.opcion-radio:has(input:checked) { border-color: var(--verde-acento); background: #f3faf5; }
.opcion-pago-deshabilitada { opacity: .55; cursor: not-allowed; }
.opcion-pago-deshabilitada input { cursor: not-allowed; }

.opcion-suscripcion {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--gris-texto); margin: 4px 0 14px; cursor: pointer;
}
.opcion-suscripcion input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.opcion-suscripcion small { display: block; font-weight: 400; color: var(--gris-suave); margin-top: 3px; }

.aviso-envio { margin: 4px 0 14px; }
.envio-info { font-size: 13px; color: var(--gris-suave); background: var(--gris-fondo); border-radius: 6px; padding: 8px 10px; margin: 0; }
.envio-dificil-acceso { color: var(--rojo); }
.envio-dificil-acceso a { color: var(--rojo); font-weight: 700; }

.panel-transferencia { border: 1px solid var(--gris-borde); border-radius: 8px; padding: 14px; margin-bottom: 14px; background: var(--gris-fondo); }
.panel-transferencia h4 { margin: 0 0 10px; font-size: 14px; }
.datos-pago-manual { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.metodo-pago-manual { flex: 1; min-width: 200px; background: #fff; border: 1px solid var(--gris-borde); border-radius: 8px; padding: 12px; }
.metodo-pago-manual p { margin: 3px 0; font-size: 13px; }
.qr-pago { width: 140px; height: 140px; object-fit: contain; margin-top: 8px; border: 1px solid var(--gris-borde); border-radius: 6px; }
.nota-comprobante { font-size: 12px; color: var(--gris-suave); margin: 6px 0 0; }

.fila-descuento span, .fila-descuento strong { color: var(--verde-oscuro); }
.resumen-pago { margin-top: 4px; }

/* ---------- Formulario: mejoras varias ---------- */
.label-con-icono { display: block; }
.opcion-pago-mp { display: flex; align-items: center; gap: 10px; }
.logo-mercadopago {
  display: inline-flex; align-items: center; gap: 6px; background: #FFE600; color: #001E45;
  font-size: 13px; font-weight: 400; padding: 4px 12px 4px 8px; border-radius: 20px; letter-spacing: -.2px;
}
.logo-mercadopago b { font-weight: 800; }
.logo-mercadopago-icono { font-size: 15px; line-height: 1; }

/* ---------- Footer / ubicación ---------- */
/* Footer en azul cielo claro degradado (pedido explícito del negocio, en
   vez del azul oscuro sólido de antes) — mismo lenguaje "premium
   tecnológico" del header, ahora también en su versión clara. Decoración
   muy sutil (círculos y puntitos azul/cian) sin llenar el espacio. Cada
   columna es una tarjeta blanca flotando sobre el fondo celeste. */
footer#app-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #eaf7ff 0%, #d6f0ff 50%, #c3e9ff 100%);
  color: var(--gris-texto-frio); margin-top: 40px;
  border-top: 1px solid rgba(7,61,112,.08);
}
/* Círculos translúcidos + puntitos, muy discretos (opacidades bajas),
   solo para dar sensación de movimiento/tecnología sin competir con el
   contenido. */
footer#app-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(34,199,245,.22) 0%, transparent 32%),
    radial-gradient(circle at 92% 20%, rgba(7,139,232,.14) 0%, transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(7,61,112,.05) 0%, transparent 25%),
    radial-gradient(circle at 12% 90%, rgba(7,61,112,.05) 0%, transparent 22%);
}
footer#app-footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; z-index: 0;
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Ccircle%20cx='2'%20cy='2'%20r='1.2'%20fill='%23075da8'%20opacity='.3'/%3E%3C/svg%3E");
  background-repeat: repeat; background-position: top right; background-size: 40px 40px;
  mask-image: radial-gradient(circle at 90% 0%, rgba(0,0,0,.9) 0%, transparent 55%);
}
.footer-contenido {
  position: relative; z-index: 1;
  max-width: 1680px; margin: 0 auto; padding: 36px 32px; display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr; gap: 24px; align-items: start;
}
.footer-col {
  background: #fff; border: 1px solid rgba(7,61,112,.12); border-radius: 18px;
  padding: 26px 24px; box-shadow: 0 8px 24px rgba(7,61,112,.1);
}
.footer-col h3 {
  color: var(--azul-marino); margin: 0 0 16px; font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; position: relative; padding-bottom: 10px;
}
.footer-col h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--azul-electrico), transparent);
}
.footer-col h3 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul-corporativo); }

.footer-contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-contacto li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--gris-texto); }
.footer-contacto svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--azul-corporativo); }
.footer-contacto a { color: var(--gris-texto); text-decoration: none; transition: color .15s ease; cursor: pointer; }
.footer-contacto a:hover { color: var(--azul-electrico); text-decoration: underline; }

.footer-col-mapa h3 { margin-bottom: 4px; }
.footer-mapa-subtitulo { margin: 0 0 14px; font-size: 13px; color: var(--gris-suave); }
.footer-mapa {
  border-radius: 14px; overflow: hidden; height: 200px;
  border: 1px solid rgba(7,61,112,.14); box-shadow: 0 4px 14px rgba(7,61,112,.1);
}
.footer-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* "Únete a la Comunidad Studio Toners" — suscripción voluntaria a
   novedades/promociones, disponible en el pie de página de todo el sitio
   (no solo en el checkout). Ver engancharFormularioComunidad() en ui.js. */
.footer-comunidad p { margin: 0 0 4px; font-size: 13.5px; color: var(--gris-texto); line-height: 1.5; }
.form-comunidad { display: flex; gap: 8px; margin: 16px 0 8px; }
.form-comunidad input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(7,61,112,.18);
  background: var(--azul-muy-claro); color: var(--gris-texto); font-size: 13.5px;
}
.form-comunidad input::placeholder { color: var(--gris-suave); }
.form-comunidad button {
  white-space: nowrap; padding: 12px 20px; font-weight: 700; border-radius: 8px; border: none;
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-electrico)); color: #fff;
  box-shadow: 0 4px 12px rgba(7,61,112,.3);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.form-comunidad button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(7,61,112,.4); }
.form-comunidad-mensaje { font-size: 12.5px; min-height: 16px; color: var(--azul-profundo); font-weight: 600; }
.form-comunidad-mensaje.form-comunidad-error { color: #c0392b; }
.form-comunidad-legal { font-size: 11.5px; color: var(--gris-suave); }

/* Contador de visitas: notificación flotante ("toast") de prueba social,
   solo en index.html (ver js/visitas.js). Se ancla abajo a la IZQUIERDA a
   propósito — abajo a la derecha ya están los botones flotantes de
   WhatsApp/Chat con asesor (.floating-buttons) y, cuando está abierto, el
   panel del carrito (.cart-drawer) — así nunca chocan. Arranca sin la
   clase ".visible" (invisible, fuera de flujo de clics) y js/visitas.js
   se la agrega poco después de insertarla, para que el navegador alcance
   a registrar el estado inicial antes de animar la transición. */
.toast-visitas {
  position: fixed; left: 20px; bottom: 20px; z-index: 24;
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(135deg, var(--verde-acento), var(--verde-oscuro));
  border-radius: 14px; padding: 12px 10px 12px 12px;
  /* Sombra en dos capas: la de color (misma tonalidad que el fondo) le da
     profundidad, y el anillo blanco semitransparente separa la tarjeta de
     cualquier fondo del mismo verde detrás (ej. el carrusel de banners),
     para que nunca "se pierda" contra él. */
  box-shadow: 0 10px 28px rgba(31, 99, 52, .4), 0 0 0 1px rgba(255, 255, 255, .35);
  max-width: min(320px, calc(100vw - 40px));
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.toast-visitas.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-visitas-icono {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--verde-oscuro); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.toast-visitas-texto { font-size: 14px; font-weight: 700; line-height: 1.35; color: #fff; padding-top: 4px; }
.toast-visitas-cerrar {
  flex-shrink: 0; background: none; border: none; color: rgba(255, 255, 255, .85);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 4px;
}
.toast-visitas-cerrar:hover { color: #fff; }

/* En escritorio se veía chico al lado del resto de la interfaz — un poco
   más de aire, texto e ícono más grandes. Solo agranda, no reposiciona:
   sigue anclado abajo-izquierda igual que en móvil. */
@media (min-width: 1100px) {
  .toast-visitas { padding: 16px 14px 16px 16px; gap: 14px; max-width: 380px; }
  .toast-visitas-icono { width: 40px; height: 40px; font-size: 18px; }
  .toast-visitas-texto { font-size: 16px; padding-top: 6px; }
  .toast-visitas-cerrar { font-size: 15px; }
}

/* En pantallas angostas, .floating-buttons (WhatsApp + Chat con asesor,
   apiladas verticalmente a la derecha) ocupa hasta ~200px de ancho desde
   el borde derecho — con el toast a 320px de ancho desde la izquierda, en
   viewports por debajo de ~550px ambos terminan compartiendo la misma
   franja horizontal. En vez de angostar el toast hasta hacerlo ilegible,
   se sube por encima de esa franja (los botones miden ~126px de alto
   entre los dos + el espacio entre ellos) — así nunca se solapan, sin
   importar cuánto ancho tenga cada uno. */
@media (max-width: 640px) {
  .toast-visitas { left: 14px; bottom: 150px; max-width: min(260px, calc(100vw - 28px)); padding: 10px 8px 10px 10px; }
  .toast-visitas-texto { font-size: 12.5px; }
}

/* ---------- Responsive ---------- */
/* El header "premium" (logo grande, slogan con espacio propio, buscador
   ancho, carrito en caja) necesita bastante ancho para no comprimirse —
   por eso este corte se subió de 860px a 1099px: cubre también tablet
   (vertical y horizontal), que pasa a usar el mismo header compacto de una
   sola fila que el celular, en vez de forzar la versión desktop en un
   espacio donde no cabía sin scroll horizontal. En escritorio real
   (≥1100px) el diseño amplio se mantiene intacto, tal como se pidió. */
@media (max-width: 1099px) {
  .header-beneficios { display: none; }
  .ficha-producto { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  /* Móvil: apilado en el mismo orden en que ya vienen en el HTML —
     contacto, luego newsletter, luego ubicación/mapa — así que basta con
     una sola columna, sin reordenar nada. */
  .footer-contenido { grid-template-columns: 1fr; padding: 32px 20px 26px; gap: 30px; }

  /* ---- Header compacto: una sola fila (logo + buscador + favoritos +
     mi cuenta + carrito), sin el menú de categorías (esas ya están en la
     grilla visual de "Explora por categoría" más abajo) — pasa de 2-3
     franjas apiladas a una sola, bien angosta. El slogan bajo el logo, el
     texto de "Mi cuenta", el total del carrito y el botón "Ver carrito"
     se ocultan acá por espacio (quedan solo los íconos/acciones esenciales
     y siempre se puede tocar el ícono del carrito para abrir el panel). ---- */
  .header-top { flex-wrap: nowrap; padding: 10px 12px; gap: 6px; }
  .btn-menu-movil { display: inline-flex; order: -1; }
  /* <picture><source> ya cambió a assets/logo-icono-movil.webp (el recorte
     del ícono "St") en este mismo corte — acá solo se define su tamaño. */
  .logo-banner-img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; }
  .buscador { order: 0; max-width: none; width: auto; flex: 1; min-width: 0; }
  /* font-size 16px a propósito (no 13px): en iOS Safari, cualquier campo de
     texto con letra menor a 16px hace que la pantalla "salte"/haga zoom
     automático al tocarlo — con 16px eso no pasa. */
  .buscador input { padding: 10px 10px; font-size: 16px; }
  .buscador button { padding: 0 12px; min-width: 44px; font-size: 13px; }
  .header-icono-circulo { width: 36px; height: 36px; }
  .header-icono-circulo svg, .carrito-icono-circulo svg { width: 17px; height: 17px; }
  .header-btn-texto { display: none; }
  .carrito-grupo { padding: 4px; gap: 4px; background: none; border: none; }
  .carrito-info, .btn-ver-carrito { display: none; }
  .menu-familias { display: none; }

  /* ---- Banner: viewport vertical (no el mismo recorte panorámico del
     computador) — pensado para que, cuando cada banner tenga su foto
     vertical dedicada (imagenMovil, 1080×1350), se vea completa y bien
     encuadrada. Mientras tanto, con la foto de escritorio de respaldo,
     queda un recorte más cerrado en vez de una franja angosta. ---- */
  .carrusel-viewport { height: auto; aspect-ratio: 4 / 5; max-height: 520px; }
  .carrusel-slide { padding: 24px 20px 34px; }
  .carrusel-slide-imagen { padding: 0; }
  .carrusel-icono { font-size: 36px; }
  .carrusel-slide h2 { font-size: 22px; }
  .carrusel-slide p { font-size: 14px; }

  /* En móvil el contenido crece más alto que ancho (título/mensaje se
     envuelven en varias líneas) — centrarlas verticalmente las monta encima
     del texto. Se anclan abajo, a los lados de los puntos, en vez de al
     centro. */
  .carrusel-flecha { top: auto; bottom: 12px; transform: none; width: 32px; height: 32px; font-size: 16px; }
  .carrusel-flecha-izq { left: 12px; }
  .carrusel-flecha-der { right: 12px; }

  /* Categorías: el carrusel sigue siendo una sola fila (se desliza con el
     dedo o solo, igual que en desktop) pero con círculos e íconos más
     chicos para que quepan bien en la pantalla angosta. */
  .categoria-tile { width: 76px; }
  .categoria-tile-icono { width: 66px; height: 66px; font-size: 28px; }
  .categorias-carrusel-flecha { width: 32px; height: 32px; font-size: 16px; }
}

/* Footer en tablet: 2 columnas (contacto + comunidad) en vez de 1 sola,
   con el mapa abajo a todo el ancho — mejor uso del espacio disponible
   que en un celular angosto, sin llegar a las 3 columnas de escritorio. */
@media (min-width: 700px) and (max-width: 1099px) {
  .footer-contenido { grid-template-columns: 1fr 1fr; }
  .footer-col-mapa { grid-column: 1 / -1; }
}

/* Celular angosto: el formulario de newsletter pasa de una fila
   (input + botón lado a lado) a apilado, para que ambos queden con un
   tamaño cómodo para tocar en vez de comprimirse uno al lado del otro. */
@media (max-width: 420px) {
  .form-comunidad { flex-direction: column; }
  .form-comunidad button { width: 100%; }
}

/* ==========================================================================
   Panel de autocompletado del buscador (búsqueda en tiempo real)
   ==========================================================================
   Ajuste único: agrega SOLO el panel de sugerencias que aparece debajo del
   buscador mientras el cliente escribe (ver js/buscador-autocompletado.js).
   No cambia tamaño, posición, colores ni tipografía del buscador existente
   (.buscador arriba) — reutiliza sus mismos tokens de color (--azul-*,
   --gris-texto*) para que el panel se vea como una extensión natural del
   mismo componente, no como algo aparte.

   Nota: el panel vive en <body> (no dentro de .buscador) y se posiciona con
   JS via position:fixed (ver posicionarPanel() en buscador-autocompletado.js),
   porque .buscador tiene "overflow: hidden" (necesario para sus esquinas
   redondeadas) y eso recortaba visualmente cualquier panel insertado dentro
   de él. Por eso aquí solo se define su apariencia (fondo, borde, sombra),
   no left/right/top — esos los calcula el JS en cada apertura. */
.panel-autocompletado {
  background: #fff; border: 1px solid var(--azul-muy-claro);
  border-radius: 16px; box-shadow: 0 12px 28px rgba(7,61,112,.16);
  overflow: hidden; z-index: 60; max-height: 360px; overflow-y: auto;
}

.autocompletado-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; text-decoration: none; color: var(--gris-texto);
  border-bottom: 1px solid var(--azul-muy-claro);
  transition: background .12s ease;
}
.autocompletado-item:last-child { border-bottom: none; }
.autocompletado-item:hover, .autocompletado-item:focus {
  background: var(--azul-muy-claro); outline: none;
}
.autocompletado-item-nombre { font-size: 14px; font-weight: 600; color: var(--gris-texto); }
.autocompletado-item-nombre strong { color: var(--azul-profundo); }
.autocompletado-item-ref { font-size: 12.5px; color: var(--gris-texto-frio); }

.autocompletado-vacio { padding: 18px 16px; text-align: center; }
.autocompletado-vacio-titulo { font-size: 14px; font-weight: 700; color: var(--gris-texto); margin: 0 0 4px; }
.autocompletado-vacio-sugerencia { font-size: 13px; color: var(--gris-texto-frio); margin: 0; }