/* ===========================================================================
   CompuHelp Panamá — hoja de marca
   Sitio tienda-primero: la vitrina manda y los Servicios Profesionales son un
   bloque más. Todo lo visual sale de estos tokens; los colores de marca no se
   escriben a mano en las plantillas.
   =========================================================================== */
:root {
  --azul-claro: #2271B6;
  --azul-oscuro: #273982;
  --azul-noche: #1a2660;      /* fondo profundo de héroes y footer */
  --naranja: #EB6D23;
  --naranja-claro: #ff8a45;
  --marron: #8F3A1F;
  --gris-suave: #f5f7fa;
  --gris-linea: #e7ecf3;
  --tinta: #1f2733;
  --tinta-suave: #64748b;

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

  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra: 0 10px 30px rgba(39, 57, 130, .10);
  --sombra-lg: 0 28px 60px rgba(39, 57, 130, .20);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .28s var(--ease);
}

* { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .fw-black { letter-spacing: -.02em; }

a { transition: color var(--t); }

::selection { background: var(--naranja); color: #fff; }

/* ── Utilidades de marca ─────────────────────────────────────────────────── */
.texto-naranja { color: var(--naranja) !important; }
.texto-azul { color: var(--azul-oscuro) !important; }
.texto-suave { color: var(--tinta-suave) !important; }
.fondo-gris { background: var(--gris-suave); }
.fondo-noche { background: var(--azul-noche); color: #fff; }
.borde-suave { border: 1px solid var(--gris-linea) !important; }

.degradado-texto {
  background: linear-gradient(100deg, var(--naranja) 10%, #ffb066 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--naranja); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.4px; font-size: .75rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--naranja), transparent);
}
.eyebrow.centrado::before { display: none; }

.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-title { font-weight: 800; color: var(--azul-oscuro); font-size: clamp(1.55rem, 2.6vw, 2.3rem); }
.section-sub { color: var(--tinta-suave); max-width: 62ch; }

/* Píldora de dato/beneficio suelta */
.pildora {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(34, 113, 182, .09); color: var(--azul-oscuro);
}
.pildora-clara { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(6px); }

/* ── Barra superior ──────────────────────────────────────────────────────── */
.topbar {
  background: var(--azul-noche); color: rgba(255, 255, 255, .78);
  font-size: .8rem; padding: .45rem 0;
}
.topbar a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .sep { opacity: .35; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar-ch {
  background: var(--azul-oscuro);
  padding-top: .7rem; padding-bottom: .7rem;
  transition: box-shadow var(--t), padding var(--t), background var(--t);
}
.navbar-ch.pegada {
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
}
.navbar-ch.encogida { padding-top: .35rem; padding-bottom: .35rem; background: rgba(39, 57, 130, .96); backdrop-filter: blur(10px); }
.navbar-ch .navbar-brand { font-weight: 800; letter-spacing: .2px; color: #fff; font-size: 1.28rem; }
.navbar-ch .navbar-brand span { color: var(--naranja); }
.navbar-ch .navbar-brand small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
/* El isotipo sobre pastilla blanca: la barra es azul oscuro y medio logo
   también. Sin la pastilla, el carrito naranja se ve y el circuito azul
   desaparece. */
.navbar-ch .marca-isotipo { background: #fff; border-radius: 9px; padding: 3px; flex: none; }
.navbar-ch .marca-texto { line-height: 1.1; }
.navbar-ch.encogida .marca-isotipo { width: 32px; height: 32px; }
@media (max-width: 420px) {
  .navbar-ch .navbar-brand { font-size: 1.05rem; }
  .navbar-ch .marca-isotipo { width: 32px; height: 32px; }
}
.navbar-ch .nav-link { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .95rem; position: relative; }
.navbar-ch .nav-link:hover, .navbar-ch .nav-link.activo { color: #fff; }
.navbar-ch .nav-link.activo::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -2px; height: 2px;
  background: var(--naranja); border-radius: 2px;
}
.navbar-ch .dropdown-menu {
  border: 0; border-radius: var(--radio); box-shadow: var(--sombra-lg);
  padding: .6rem; margin-top: .6rem;
}
.navbar-ch .dropdown-item { border-radius: var(--radio-sm); font-weight: 500; padding: .55rem .75rem; }
.navbar-ch .dropdown-item:hover { background: var(--gris-suave); color: var(--azul-oscuro); }
.navbar-ch .dropdown-item i { color: var(--azul-claro); }
.navbar-ch .dropdown-item .conteo { font-size: .72rem; color: var(--tinta-suave); }

/* Buscador del nav */
.buscador-nav .form-control {
  border: 0; border-radius: 999px; padding-left: 1rem;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: .9rem; min-width: 190px;
  transition: background var(--t), box-shadow var(--t);
}
.buscador-nav .form-control::placeholder { color: rgba(255, 255, 255, .6); }
.buscador-nav .form-control:focus {
  background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 3px rgba(235, 109, 35, .35); color: #fff;
}
.buscador-nav .btn { border-radius: 999px; color: #fff; border: 0; }

/* Carrito */
.icono-carrito { font-size: 1.25rem; }
.badge-carrito {
  background: var(--naranja); font-size: .68rem; font-weight: 800;
  box-shadow: 0 0 0 2px var(--azul-oscuro);
}
.badge-carrito.pulso { animation: pulso 1.4s ease-out 2; }
@keyframes pulso {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.28); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 700; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); }
.btn:active { transform: translateY(1px); }

.btn-ch {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: linear-gradient(120deg, var(--naranja) 0%, #f5883f 100%);
  box-shadow: 0 8px 20px rgba(235, 109, 35, .32);
}
.btn-ch:hover { color: #fff; box-shadow: 0 12px 28px rgba(235, 109, 35, .45); transform: translateY(-2px); }
/* Brillo que barre el botón al pasar el cursor */
.btn-ch::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease);
}
.btn-ch:hover::after { left: 115%; }

.btn-ch-azul { background: var(--azul-oscuro); border: 0; color: #fff; }
.btn-ch-azul:hover { background: var(--azul-claro); color: #fff; transform: translateY(-2px); }

.btn-ch-outline { border: 2px solid rgba(255, 255, 255, .75); color: #fff; background: transparent; }
.btn-ch-outline:hover { background: #fff; color: var(--azul-oscuro); border-color: #fff; }

.btn-ch-linea { border: 1.5px solid var(--gris-linea); color: var(--azul-oscuro); background: #fff; }
.btn-ch-linea:hover { border-color: var(--azul-claro); color: var(--azul-claro); background: #fff; }

/* ── Héroe ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--azul-noche) 0%, var(--azul-oscuro) 45%, var(--azul-claro) 100%);
}
.hero h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero-compacto { padding: 1rem 0; }

/* Manchas de luz que respiran detrás del héroe */
.hero .mancha {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  pointer-events: none; animation: flotar 16s var(--ease) infinite alternate;
}
.hero .mancha-1 { width: 420px; height: 420px; background: var(--naranja); top: -140px; right: -80px; }
.hero .mancha-2 { width: 360px; height: 360px; background: #37b6ff; bottom: -160px; left: -60px; animation-delay: -6s; }
.hero .mancha-3 { width: 260px; height: 260px; background: #7c4dff; top: 40%; right: 30%; opacity: .28; animation-delay: -11s; }
@keyframes flotar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-40px, 30px, 0) scale(1.18); }
}
/* Rejilla técnica tenue: da textura sin pesar */
.hero .rejilla {
  position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.hero > .container { position: relative; z-index: 2; }

/* Buscador grande del héroe */
.buscador-hero {
  background: rgba(255, 255, 255, .96); border-radius: 999px; padding: .35rem;
  box-shadow: var(--sombra-lg); max-width: 560px;
}
.buscador-hero .form-control { border: 0; background: transparent; box-shadow: none; font-size: 1rem; padding-left: 1.1rem; }
.buscador-hero .form-control:focus { box-shadow: none; }

/* Cifras del catálogo */
.cifra { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; }
.cifra-nota { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; opacity: .75; }

/* Collage de producto del héroe */
.hero-collage { position: relative; min-height: 340px; }
.hero-collage .tarjeta-flotante {
  position: absolute; background: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: .75rem; width: 172px;
  animation: subeBaja 6s var(--ease) infinite alternate;
}
.hero-collage .tarjeta-flotante img { width: 100%; height: 96px; object-fit: contain; }
.hero-collage .tarjeta-flotante .nom { font-size: .72rem; font-weight: 700; color: var(--tinta); line-height: 1.25; }
.hero-collage .tarjeta-flotante .pre { font-size: .82rem; font-weight: 800; color: var(--naranja); }
.hero-collage .f1 { top: 6%; left: 4%; }
.hero-collage .f2 { top: 34%; right: 2%; animation-delay: -2s; }
.hero-collage .f3 { bottom: 2%; left: 22%; animation-delay: -4s; }
@keyframes subeBaja {
  from { transform: translateY(-10px); }
  to { transform: translateY(12px); }
}

/* ── Franja de ventajas ──────────────────────────────────────────────────── */
.ventaja {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem; border-radius: var(--radio); background: #fff;
  border: 1px solid var(--gris-linea); height: 100%;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ventaja:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(34, 113, 182, .35); }
.ventaja i {
  font-size: 1.35rem; color: var(--naranja); flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(235, 109, 35, .1);
}
.ventaja h6 { font-weight: 800; margin-bottom: .15rem; font-size: .95rem; }
.ventaja p { margin: 0; font-size: .84rem; color: var(--tinta-suave); }

/* ── Categorías ──────────────────────────────────────────────────────────── */
.cat-tile {
  display: block; text-decoration: none; height: 100%;
  padding: 1.4rem 1.2rem; border-radius: var(--radio);
  background: #fff; border: 1px solid var(--gris-linea);
  position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cat-tile::before {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, rgba(34, 113, 182, .16), transparent 70%);
  transform: scale(.4); transition: transform .5s var(--ease);
}
.cat-tile:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(34, 113, 182, .4); }
.cat-tile:hover::before { transform: scale(1.4); }
.cat-tile i {
  font-size: 1.7rem; color: var(--azul-claro); display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px; background: rgba(34, 113, 182, .1);
  margin-bottom: .9rem; transition: background var(--t), color var(--t), transform var(--t);
}
.cat-tile:hover i { background: var(--naranja); color: #fff; transform: rotate(-6deg) scale(1.05); }
.cat-tile h6 { font-weight: 800; color: var(--azul-oscuro); margin-bottom: .15rem; position: relative; }
.cat-tile span { font-size: .8rem; color: var(--tinta-suave); position: relative; }

/* ── Tarjeta de producto ─────────────────────────────────────────────────── */
.producto-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio);
  overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.producto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(34, 113, 182, .4); }

.producto-foto { position: relative; display: block; padding: 1rem; background: #fff; }
/* Fondo BLANCO siempre y `contain`: las fotos del mayorista traen fondos
   distintos —el plotter de Canon viene sobre negro— y en una rejilla se ven
   como agujeros. El recorte nunca: una impresora achatada no se reconoce. */
.producto-foto img {
  width: 100%; height: 170px; object-fit: contain; background: #fff;
  transition: transform .45s var(--ease);
}
.producto-card:hover .producto-foto img { transform: scale(1.07); }
.producto-foto .vacio { height: 170px; display: grid; place-items: center; color: #cbd5e1; font-size: 2.6rem; }

.producto-cuerpo { padding: 0 1rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.producto-marca { font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--azul-claro); }
/* El nombre se corta a DOS líneas exactas. Los del mayorista miden hasta
   setenta caracteres y, sin tope, cada tarjeta de una fila acababa con un
   alto distinto y la rejilla quedaba dentada. `truncatechars` no servía: la
   cuenta de caracteres no es la cuenta de líneas, y cortaba de más en los
   nombres cortos. `min-height` reserva las dos líneas también para el que
   solo usa una, así el precio queda a la misma altura en toda la fila. */
.producto-nombre {
  font-size: .88rem; font-weight: 600; color: var(--tinta); line-height: 1.35;
  margin: .25rem 0 .6rem; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.4em;
}
.producto-card:hover .producto-nombre { color: var(--azul-oscuro); }
.producto-precio { font-weight: 800; font-size: 1.15rem; color: var(--azul-oscuro); }
.producto-precio small { font-weight: 600; font-size: .7rem; color: var(--tinta-suave); }

/* Cinta de esquina (nuevo / agotado) */
.cinta {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  padding: .25rem .6rem; border-radius: 999px; color: #fff;
  background: var(--naranja); box-shadow: 0 4px 12px rgba(235, 109, 35, .35);
}
.cinta-azul { background: var(--azul-claro); box-shadow: 0 4px 12px rgba(34, 113, 182, .3); }
.cinta-gris { background: #94a3b8; box-shadow: none; }

/* «Antes $X»: tachado, gris y más pequeño que el precio de hoy. El precio
   vigente tiene que ganar siempre la mirada; si el anterior compite en
   tamaño, el cliente lee el caro. */
.precio-antes {
  display: inline-block; font-size: .78rem; font-weight: 600;
  color: var(--tinta-suave); text-decoration: line-through; margin-left: .35rem;
}
.badge-promo { background: rgba(235, 109, 35, .12); color: var(--naranja); font-weight: 700; }
.badge-stock { background: rgba(22, 163, 74, .12); color: #15803d; font-weight: 700; }
.badge-agotado { background: #f1f5f9; color: #94a3b8; font-weight: 700; }
/* Una sola unidad: la escasez manda sobre el «en stock» verde, que al lado
   de la cinta «ÚLTIMAS 1» se leía como una contradicción. */
.badge-ultima { background: rgba(235, 109, 35, .14); color: var(--naranja); font-weight: 800; }

/* «+ ITBMS» pegado al precio: el 7% se cobra aparte y antes aparecía por
   sorpresa en el carrito. Pequeño y gris — informa, no compite. */
.producto-precio .itbms { font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--tinta-suave); }

/* Ficha técnica del producto, sacada del párrafo del mayorista. */
.tabla-especificaciones { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-especificaciones th, .tabla-especificaciones td {
  padding: .55rem .7rem; border-bottom: 1px solid var(--gris-linea);
  text-align: left; vertical-align: top;
}
.tabla-especificaciones th {
  width: 38%; font-weight: 700; color: var(--azul-oscuro); white-space: nowrap;
}
.tabla-especificaciones td { color: var(--tinta-suave); }
@media (max-width: 575.98px) {
  /* En un móvil, 38% de columna para «Sistema Operativo» deja el valor en
     una tira de tres caracteres de ancho. Se apilan. */
  .tabla-especificaciones th, .tabla-especificaciones td { display: block; width: auto; }
  .tabla-especificaciones th { border-bottom: 0; padding-bottom: 0; white-space: normal; }
}

/* Acción rápida: aparece al pasar el cursor, en móvil queda siempre visible */
.producto-accion {
  margin-top: auto; opacity: 0; transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
}
.producto-card:hover .producto-accion, .producto-card:focus-within .producto-accion {
  opacity: 1; transform: translateY(0);
}
@media (max-width: 991.98px) {
  .producto-accion { opacity: 1; transform: none; }
}

/* ── Marquesina de marcas ────────────────────────────────────────────────── */
.marquesina { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquesina .pista { display: flex; gap: 1rem; width: max-content; animation: desliza 32s linear infinite; }
.marquesina:hover .pista { animation-play-state: paused; }
.marca-chip {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .7rem 1.3rem; border-radius: 999px; background: #fff;
  border: 1px solid var(--gris-linea); font-weight: 800; color: var(--azul-oscuro);
  text-decoration: none; box-shadow: var(--sombra-sm); transition: transform var(--t), border-color var(--t);
}
.marca-chip:hover { transform: translateY(-3px); border-color: var(--naranja); color: var(--naranja); }
.marca-chip .n { font-size: .72rem; font-weight: 600; color: var(--tinta-suave); }
@keyframes desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Bloque Servicios Profesionales ──────────────────────────────────────── */
.panel-servicios {
  position: relative; overflow: hidden; border-radius: var(--radio-xl); color: #fff;
  background: linear-gradient(135deg, var(--azul-noche) 0%, var(--azul-oscuro) 60%, #2f4aa8 100%);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.panel-servicios::after {
  content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(235, 109, 35, .5), transparent 65%);
  filter: blur(50px);
}
.panel-servicios > * { position: relative; z-index: 2; }

.servicio-chip {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  padding: .8rem .95rem; border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-weight: 600; font-size: .9rem; height: 100%;
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.servicio-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); transform: translateX(4px); color: #fff; }
.servicio-chip i { color: var(--naranja-claro); font-size: 1.15rem; }

/* Precio ausente a propósito: los servicios se cotizan, no se tarifan */
.sin-precio {
  display: inline-flex; flex-direction: column; gap: .1rem;
  font-weight: 800; color: var(--azul-oscuro);
}
.sin-precio .nota { font-size: .72rem; font-weight: 600; color: var(--tinta-suave); }

/* Tarjeta de servicio (listado y home) */
.servicio-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio);
  padding: 1.5rem; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.servicio-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--naranja), var(--azul-claro));
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.servicio-card:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: rgba(34, 113, 182, .35); }
.servicio-card:hover::before { transform: scaleY(1); }
.servicio-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(34, 113, 182, .1); color: var(--azul-claro); font-size: 1.6rem;
  transition: background var(--t), color var(--t), transform var(--t);
}
.servicio-card:hover .servicio-icon { background: var(--azul-oscuro); color: #fff; transform: rotate(-6deg); }

/* ── Filtros del catálogo ────────────────────────────────────────────────── */
.panel-filtros {
  background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio);
  padding: 1.1rem; position: sticky; top: 90px;
}
.panel-filtros h6 { font-weight: 800; color: var(--azul-oscuro); font-size: .82rem; text-transform: uppercase; letter-spacing: .8px; }
.lista-cat { display: flex; flex-direction: column; gap: .15rem; }
.lista-cat a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: var(--radio-sm); text-decoration: none;
  color: var(--tinta); font-size: .88rem; font-weight: 600;
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.lista-cat a:hover { background: var(--gris-suave); color: var(--azul-oscuro); padding-left: .95rem; }
.lista-cat a.activa { background: var(--azul-oscuro); color: #fff; }
.lista-cat a.activa .conteo { color: rgba(255, 255, 255, .75); }
.lista-cat a.sub { font-weight: 500; font-size: .83rem; padding-left: 1.4rem; }
.lista-cat a.sub:hover { padding-left: 1.65rem; }
.lista-cat .conteo { font-size: .74rem; color: var(--tinta-suave); font-weight: 600; }

.filtro-servicios {
  display: block; margin-top: .9rem; padding: .9rem; border-radius: var(--radio-sm);
  text-decoration: none; color: #fff;
  background: linear-gradient(120deg, var(--azul-oscuro), var(--azul-claro));
  transition: transform var(--t), box-shadow var(--t);
}
.filtro-servicios:hover { transform: translateY(-3px); box-shadow: var(--sombra); color: #fff; }
.filtro-servicios strong { display: block; font-size: .9rem; }
.filtro-servicios span { font-size: .76rem; opacity: .85; }

.chip-filtro {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--gris-suave); color: var(--azul-oscuro); border: 1px solid var(--gris-linea);
}
.chip-filtro:hover { border-color: var(--naranja); color: var(--naranja); }
.chip-filtro.activo { background: var(--azul-oscuro); color: #fff; border-color: var(--azul-oscuro); }

/* ── Ficha de producto ───────────────────────────────────────────────────── */
.foto-producto {
  border: 1px solid var(--gris-linea); border-radius: var(--radio-xl); background: #fff;
  padding: 1.5rem; display: grid; place-items: center; overflow: hidden;
}
.foto-producto img { max-height: 380px; width: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.foto-producto:hover img { transform: scale(1.08); }

.caja-compra {
  border: 1px solid var(--gris-linea); border-radius: var(--radio-xl);
  background: linear-gradient(180deg, #fff, var(--gris-suave));
  padding: 1.4rem; box-shadow: var(--sombra-sm);
}
.precio-grande { font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--azul-oscuro); line-height: 1; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--gris-linea); border-radius: 999px; overflow: hidden; background: #fff; }
.stepper button { border: 0; background: transparent; width: 38px; height: 42px; font-size: 1.1rem; color: var(--azul-oscuro); font-weight: 800; }
.stepper button:hover { background: var(--gris-suave); }
.stepper input { border: 0; width: 52px; text-align: center; font-weight: 700; }
.stepper input:focus { outline: none; }

.migas { font-size: .82rem; color: var(--tinta-suave); }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--azul-claro); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radio-sm); border: 1.5px solid var(--gris-linea); padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(34, 113, 182, .15);
}
.form-label { font-weight: 700; font-size: .85rem; color: var(--azul-oscuro); }

.tarjeta-form {
  background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio-xl);
  padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: var(--sombra);
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
.pagination .page-link {
  border: 1px solid var(--gris-linea); color: var(--azul-oscuro); margin: 0 .15rem;
  border-radius: var(--radio-sm); font-weight: 700;
}
.pagination .page-link:hover { background: var(--gris-suave); }
.pagination .active .page-link, .pagination .page-item.disabled .page-link { background: var(--azul-oscuro); color: #fff; border-color: var(--azul-oscuro); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer-ch { background: var(--azul-noche); color: rgba(255, 255, 255, .72); }
.footer-ch h5, .footer-ch h6 { color: #fff; font-weight: 800; }
.footer-ch a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.footer-ch a:hover { color: var(--naranja-claro); }
.footer-ch .list-unstyled li { margin-bottom: .35rem; }

/* ── Volver arriba ───────────────────────────────────────────────────────── */
.subir {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1040;
  width: 46px; height: 46px; border-radius: 50%; border: 0; color: #fff;
  background: var(--azul-oscuro); box-shadow: var(--sombra-lg);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), background var(--t);
}
.subir.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.subir:hover { background: var(--naranja); }

/* ── Carrito ─────────────────────────────────────────────────────────────
   ☠️ A 375 px esta fila medía 552 y empujaba fuera de pantalla el total de
   la línea y el botón de borrar. Dos causas, las dos clásicas:
     · un contenedor flex NO encoge por debajo de su contenido salvo que se
       le diga `min-width:0`, y el nombre del mayorista mide 70 caracteres;
     · todo iba en un solo renglón, que en un móvil no cabe de ninguna forma.
   En móvil son dos renglones y el nombre parte por palabras, no por letras. */
.fila-carrito { display: flex; align-items: center; gap: 1rem; }
.carrito-que-es { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
.carrito-que-es img { width: 82px; height: 82px; object-fit: contain; }
.carrito-texto { min-width: 0; }
.carrito-nombre { overflow-wrap: break-word; }
.carrito-acciones { display: flex; align-items: center; gap: .75rem; flex: none; }
.carrito-total { min-width: 96px; text-align: right; }
.carrito-quitar { width: 34px; height: 34px; flex: none; }

@media (max-width: 575.98px) {
  .fila-carrito { flex-direction: column; align-items: stretch; gap: .75rem; }
  .carrito-que-es img { width: 64px; height: 64px; }
  .carrito-nombre { font-size: .95rem; }
  .carrito-acciones {
    justify-content: space-between; padding-top: .75rem;
    border-top: 1px solid var(--gris-linea);
  }
  /* El total deja de reservar 96 px fijos: aquí manda el espacio, no la rejilla. */
  .carrito-total { min-width: 0; font-size: 1.05rem; }
}

/* ── Aviso de «agregado al carrito» ──────────────────────────────────────
   Abajo a la derecha en escritorio y pegado al borde inferior en móvil, que
   es donde está el pulgar. No tapa el producto que el cliente está mirando,
   que es el motivo de que esto no sea una ventana emergente. */
.avisos-carrito {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .6rem; max-width: 340px;
}
.aviso-carrito {
  background: #fff; border: 1px solid var(--gris-linea); border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: .9rem 1rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.aviso-carrito.visible { opacity: 1; transform: none; }
.aviso-carrito .texto { font-size: .86rem; line-height: 1.35; margin-bottom: .6rem; }
.aviso-carrito .texto strong { display: block; color: var(--azul-oscuro); }
.aviso-carrito .texto span { color: var(--tinta-suave); }
.aviso-carrito .acciones { display: flex; gap: .45rem; }
.aviso-carrito .acciones .btn { flex: 1; font-size: .8rem; }
@media (max-width: 575.98px) {
  .avisos-carrito { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}

/* ── Aviso de cookies ─────────────────────────────────────────────────────
   Una barra estrecha abajo, no una cortina: pedir permiso para medir
   audiencia tapando la tienda entera es desproporcionado, y en una ficha
   tapa justo lo que el visitante vino a ver. */
.aviso-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
  background: var(--azul-oscuro); color: rgba(255, 255, 255, .88);
  padding: .9rem 1.1rem; display: flex; gap: 1rem; align-items: center;
  flex-wrap: wrap; justify-content: center;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .22);
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.aviso-cookies.visible { transform: none; }
.aviso-cookies p { margin: 0; font-size: .84rem; max-width: 640px; line-height: 1.5; }
.aviso-cookies a { color: #fff; text-decoration: underline; }
.aviso-cookies .botones { display: flex; gap: .5rem; flex: none; }

/* ── Aparición al hacer scroll ───────────────────────────────────────────── */
/* 600 ms era mucho: en una página larga se notaba el contenido «llegando».
   140 ms se lee como que ya estaba. Las rejillas de producto ya no lo usan. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .14s var(--ease), transform .14s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ── Respeto por quien pide menos movimiento ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  * { scroll-behavior: auto; }
}

/* El logotipo del pie. El PNG trae fondo transparente y el pie es oscuro,
   así que se le pone una pastilla blanca igual que en la barra: si no, el
   azul del logo se come con el fondo. */
.footer-ch .logo-pie { background: #fff; border-radius: 12px; padding: 10px 14px; max-width: 190px; height: auto; }