/* ===========================================================================
   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; }
.producto-foto img {
  width: 100%; height: 170px; object-fit: contain;
  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); }
.producto-nombre {
  font-size: .88rem; font-weight: 600; color: var(--tinta); line-height: 1.35;
  margin: .25rem 0 .6rem; text-decoration: none; display: block;
}
.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; }

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

/* ── Aparición al hacer scroll ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s 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; }