/* ===========================================================================
   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 */
/* ☠️ Las tres tarjetas iban en `position:absolute` con porcentajes a ojo y
   SE PISABAN: la de abajo entraba por debajo de la de la derecha y le
   cortaba el nombre. Un elemento absoluto no reserva sitio, así que no hay
   porcentaje que aguante tres fichas de alto variable —los nombres del
   mayorista miden lo que les da la gana—. Con una rejilla, cada tarjeta
   tiene su celda y solaparse deja de ser posible.

   El desnivel se mantiene (`translate`), que es lo que daba la sensación de
   collage, pero ahora es decorativo y no estructural: `translate` y
   `transform` se componen, así que la animación sigue encima. */
.hero-collage {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-content: center; min-height: 340px; padding-left: 6%;
}
.hero-collage .tarjeta-flotante {
  background: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: .75rem;
  animation: subeBaja 6s var(--ease) infinite alternate;
}
.hero-collage .tarjeta-flotante img { width: 100%; height: 96px; object-fit: contain; background: #fff; }
.hero-collage .tarjeta-flotante .nom {
  font-size: .72rem; font-weight: 700; color: var(--tinta); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-collage .tarjeta-flotante .pre { font-size: .82rem; font-weight: 800; color: var(--naranja); }
.hero-collage .f1 { grid-column: 1; grid-row: 1; translate: 0 -12px; }
/* La del medio ocupa las dos filas de la derecha: así no queda el hueco
   vacío que dejaba el collage anterior. */
.hero-collage .f2 { grid-column: 2; grid-row: 1 / span 2; align-self: center;
                    animation-delay: -2s; }
.hero-collage .f3 { grid-column: 1; grid-row: 2; translate: 0 12px;
                    animation-delay: -4s; }
/* Más corto que antes (±10/12 px): con la rejilla el desnivel ya lo da el
   `translate` de cada tarjeta y el vaivén solo tiene que insinuarse. */
@keyframes subeBaja {
  from { transform: translateY(-5px); }
  to { transform: translateY(6px); }
}

/* ── 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. */
/* `nowrap`: sin él, «+ ITBMS» partía por el espacio y el «+» se quedaba
   pegado al precio con el «ITBMS» una línea más abajo. */
.producto-precio .itbms { font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--tinta-suave); white-space: nowrap; }

/* 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; }
}

/* ☠️ El aviso de cookies ocupa el borde inferior y tapaba justo esto: el
   «agregado al carrito» de la PRIMERA visita, que es la que más importa.
   Mientras el aviso esté en pantalla, todo lo que flota abajo sube por
   encima de él. `:has()` lo resuelve sin tocar una línea de JavaScript; en
   un navegador que no lo entienda, las posiciones se quedan como estaban y
   solo se solapan durante los segundos que el visitante tarda en decidir. */
body:has(.aviso-cookies:not([hidden])) .avisos-carrito { bottom: 8.6rem; }
body:has(.aviso-cookies:not([hidden])) .wasap { bottom: 11.4rem; }
body:has(.aviso-cookies:not([hidden])) .subir { bottom: 7rem; }
@media (max-width: 575.98px) {
  body:has(.aviso-cookies:not([hidden])) .avisos-carrito { bottom: 9.6rem; }
  body:has(.aviso-cookies:not([hidden])) .wasap { bottom: 12.6rem; }
  body:has(.aviso-cookies:not([hidden])) .subir { bottom: 8.2rem; }
}

/* ── Botón flotante de WhatsApp ──────────────────────────────────────────
   Encima del «volver arriba» y separado de él: son dos botones redondos en
   la misma esquina y juntos se pulsa el que no es. Verde de WhatsApp y no
   de la marca: se reconoce por el color antes que por el icono. */
.wasap {
  position: fixed; right: 1.1rem; bottom: 4.6rem; z-index: 1040;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #25D366;
  font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform var(--t), box-shadow var(--t);
}
.wasap:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37, 211, 102, .5); }
@media (max-width: 575.98px) { .wasap { right: .8rem; bottom: 4.2rem; } }

/* ── 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, ya en negativo (`logo-pie.png`). Sin pastilla
   blanca: con el logo en claro no hace falta, y la caja blanca con bordes
   rectos en medio del pie se veía como un parche. */
.footer-ch .logo-pie { max-width: 190px; height: auto; }