:root {
  /* Paleta basada en el logo iDNET Solutions:
     negro del texto, azul de la mano, naranja/dorado del ícono de señal,
     y un degradado "firma" inspirado en el arco multicolor del logo. */
  --color-primario: #0d0d0f;
  --color-secundario: #1a1c22;
  /* --color-acento: #2455d1;*/
  --color-acento-oscuro: #ccb0ff;
  --color-oferta: #1cdc90;
  --color-amarillo: #1cdc90;
  --color-disponible: #1a9d70;
  /* --gradiente-marca: linear-gradient(90deg, #ffc93c, #f7941d, #eb5757, #9b51e0, #2455d1);*/
  --gradiente-marca: rgba(204,176,255,0.8);
  --gradiente-marca-circular: conic-gradient(from 0deg, #ffc93c, #f7941d, #eb5757, #9b51e0, #2455d1, transparent 85%);
  --brillo-acento: rgba(36, 85, 209, 0.45);
  --color-texto: #1c1c1c;
  --color-texto-claro: #6b7280;
  --color-fondo: #ededed;
  --color-borde: #e5e7eb;
  --radio: 12px;
  --sombra: 0 2px 10px rgba(13, 13, 15, 0.08);
  --sombra-hover: 0 8px 24px rgba(13, 13, 15, 0.15);
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  margin: 0;
}

a { text-decoration: none; color: inherit; }

/* ---------- Header ---------- */
.topbar {
  background: var(--color-primario);
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 0;
}
.topbar .container { display: flex; justify-content: space-between; }

.navbar-tienda {
  background: #fff;
  box-shadow: var(--sombra);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-tienda .logo {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-primario);
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar-tienda .logo .logo-img { max-height: 42px; max-width: 180px; object-fit: contain; }
.navbar-tienda .logo .logo-texto { display: flex; align-items: center; gap: 8px; }
.navbar-tienda .logo .acento { color: var(--color-acento); }

.buscador-header {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.buscador-header input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  outline: none;
  transition: border-color .2s;
}
.buscador-header input:focus { border-color: var(--color-acento); }
.buscador-header button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-texto-claro);
}

#resultados-busqueda {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  max-height: 400px;
  overflow-y: auto;
  z-index: 200;
  display: none;
}
#resultados-busqueda a.item-resultado {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-borde);
}
#resultados-busqueda a.item-resultado:hover { background: var(--color-fondo); }
#resultados-busqueda img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; background: #eee; }
#resultados-busqueda .ver-todos-busqueda {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-acento);
  background: var(--color-fondo);
}
#resultados-busqueda .ver-todos-busqueda:hover { color: var(--color-acento-oscuro); text-decoration: underline; }
.buscador-header input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.texto-busqueda { color: var(--color-acento); }
.sin-resultados-busqueda { color: var(--color-texto-claro); }
.sin-resultados-busqueda .fa-magnifying-glass { color: var(--color-borde); }

/* ---------- Pantalla de carga ----------
   Aparece con retraso: si la página carga rápido, se oculta antes de
   hacerse visible y el cliente no ve ningún parpadeo. Mientras está en su
   retraso queda con visibility:hidden, así que no bloquea clics. */
.cargador-pagina {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--color-secundario), var(--color-primario) 70%);
  color: #fff;
  animation: cargador-aparecer .35s ease-out .4s both;
}
.cargador-pagina.navegando { animation: cargador-aparecer .3s ease-out .25s both; }
.cargador-pagina.oculto {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
@keyframes cargador-aparecer {
  from { opacity: 0; visibility: hidden; }
  to   { opacity: 1; visibility: visible; }
}

.cargador-contenido { text-align: center; padding: 0 20px; }

.cargador-anillo {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Anillo con el degradado de la marca que gira alrededor del logo. */
.cargador-anillo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 5px;
  background: var(--gradiente-marca-circular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cargador-girar 1.1s linear infinite;
}
.cargador-anillo::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 40px var(--brillo-acento);
  animation: cargador-latir 1.6s ease-in-out infinite;
}
.cargador-logo {
  position: relative;
  z-index: 1;
  max-width: 78px;
  max-height: 78px;
  object-fit: contain;
}

.cargador-nombre {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .5px;
  margin-bottom: 14px;
}

.cargador-barra {
  width: 180px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.cargador-barra span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 4px;
  background: var(--gradiente-marca);
  animation: cargador-barra 1.2s ease-in-out infinite;
}

.cargador-texto {
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

@keyframes cargador-girar { to { transform: rotate(360deg); } }
@keyframes cargador-latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.94); }
}
@keyframes cargador-barra {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .cargador-anillo::before { animation-duration: 3s; }
  .cargador-anillo::after,
  .cargador-barra span { animation: none; }
}

.icon-btn {
  position: relative;
  color: var(--color-primario);
  font-size: 1.2rem;
  padding: 6px;
}
.badge-carrito {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-oferta);
  color: #fff;
  font-size: 0.65rem;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-principal {
  background: var(--color-primario);
}
.menu-principal .nav-link {
  color: #fff !important;
  font-weight: 500;
  padding: 10px 16px !important;
}
.menu-principal .nav-link:hover { color: #1cdc90 !important; }

/* ---------- Banner ---------- */
.banner-principal {
  background: linear-gradient(120deg, var(--color-primario), var(--color-secundario));
  color: #fff;
  border-radius: var(--radio);
  padding: 50px 40px;
  margin: 24px 0;
}
.banner-principal h1 { font-size: 2.2rem; font-weight: 800; }
.banner-principal .btn-acento {
  background: var(--color-acento);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--radio);
}
.banner-principal .btn-acento:hover { background: var(--color-acento-oscuro); color: #fff; }
.banner-principal .btn-outline-light { border-radius: var(--radio); }

/* ---------- Categorías ---------- */
.card-categoria {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: center;
  padding: 18px 10px;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}
.card-categoria:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.card-categoria .icono-cat { font-size: 1.8rem; color: var(--color-acento); margin-bottom: 8px; }
.card-categoria .img-cat {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
}

/* ---------- Productos ---------- */
.card-producto {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.card-producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.card-producto .img-wrap {
  aspect-ratio: 1/1;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-producto .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-producto .body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-producto .marca { font-size: 0.75rem; color: var(--color-texto-claro); text-transform: uppercase; }
.card-producto .nombre {
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-weight: 500; font-size: 0.88rem; line-height: 1.4; letter-spacing: -0.005em;
  min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Carrito y resumen del checkout: nombre y precio de cada producto */
.item-nombre { font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 0.86rem; line-height: 1.4; color: var(--color-texto); letter-spacing: -0.005em; }
.item-nombre:hover { color: var(--color-primario); }
.item-sku { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 0.72rem; color: var(--color-texto-claro); letter-spacing: 0.02em; margin-top: 1px; }
.item-precio { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; margin-top: 2px; }
.item-nombre-resumen { font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 0.84rem; line-height: 1.4; letter-spacing: -0.005em; }
.item-cant { color: var(--color-texto-claro); font-weight: 400; margin-left: 4px; }
.item-precio-resumen { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.9rem; white-space: nowrap; margin-left: 12px; }
.card-producto .sku { font-size: 0.72rem; color: var(--color-texto-claro); letter-spacing: 0.02em; }
.card-producto .precios { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.card-producto .precio-actual { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-primario); }
.precio-anterior { font-family: 'Inter', 'Segoe UI', sans-serif; text-decoration: line-through; color: var(--color-texto-claro); font-size: 0.78rem; font-weight: 400; margin-left: 0; }
.card-producto .stock-ok { color: var(--color-disponible); font-size: 0.8rem; }
.card-producto .stock-no { color: var(--color-oferta); font-size: 0.8rem; }
.card-producto .acciones { display: flex; gap: 6px; padding: 0 14px 14px; }

/* ---------- Precio con recargo de tarjeta (ficha de producto) ---------- */
/* Sin recuadro: precio y texto van atenuados (semitransparentes) para que
   se lean como un dato secundario frente al precio principal de arriba. */
.precio-recargo-monto { font-size: 1.05rem; font-weight: 700; color: rgba(93, 92, 92, 0.65); }
.precio-recargo-texto { font-size: 0.75rem; color: rgba(93, 92, 92, 0.65); margin-top: 2px; }

.badge-oferta {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--color-oferta);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}
.card-producto .img-wrap { position: relative; }

.btn-primario {
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  /* flex: 1; */
}
.btn-primario:hover { background: var(--color-secundario); color: #fff; }
.btn-secundario {
  background: #fff;
  color: var(--color-primario);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 8px 10px;
}
.btn-secundario:hover { border-color: var(--color-acento); color: var(--color-acento-oscuro); }

.seccion-titulo {
  font-weight: 800;
  color: var(--color-primario);
  margin: 30px 0 18px;
  border-left: 5px solid var(--color-acento);
  padding-left: 12px;
}

/* ---------- Filtros ---------- */
.filtros-caja {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.filtros-caja h6 { font-weight: 700; color: var(--color-primario); margin-top: 14px; }
/*------------FORMATO DE LISTA DE PRODUCTOS EN ADMIN--------------*/
.filtros-caja table {
  font-size: 0.82rem;
}
.filtros-caja table th,
.filtros-caja table td {
  font-size: 0.75rem;
  padding: 8px 10px;
}
/*-----------CONFIGURACION------------*/
.text-muted {
  font-size: 0.8rem;
}
.filtros-caja {
  font-size: 0.82rem;
}
.form-control {
  font-size: 0.75rem;
}
/* ---------- Footer ---------- */
footer.footer-tienda {
  background: var(--color-primario);
  color: #cbd5e1;
  padding: 40px 0 16px;
  margin-top: 50px;
}
footer.footer-tienda h6 { color: #fff; font-weight: 700; margin-bottom: 14px; }
footer.footer-tienda a { color: #cbd5e1; }
footer.footer-tienda a:hover { color: var(--color-acento); }
footer.footer-tienda .redes a {
  display: inline-flex;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 24px; padding-top: 16px; font-size: 0.85rem; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .banner-principal { padding: 30px 20px; text-align: center; }
  .banner-principal h1 { font-size: 1.5rem; }

  /* Buscador responsive: LOGO -> BUSCADOR -> resto del encabezado, cada
     uno en su propia fila. Antes solo el buscador tenía "order" y le
     faltaba ocupar el 100% del ancho, así que terminaba apretado en la
     misma fila que el logo y los íconos en vez de bajar a su propia fila. */
  .navbar-tienda .container { row-gap: 10px; }
  .navbar-tienda .logo { order: 1; }
  .buscador-header { order: 2; flex: 1 1 100%; max-width: 100%; margin-top: 0; }
  .navbar-tienda .iconos-header { order: 3; margin-left: 0 !important; width: 100%; justify-content: flex-end; }
}

/* ---------- Topbar promocional rotativo ---------- */
.topbar-promo {
  background: var(--gradiente-marca);
  color: #252525;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 0;
  overflow: hidden;
  /* text-shadow: 0 1px 2px rgba(0,0,0,.35); */
}
.topbar-promo-track {
  position: relative;
  height: 18px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.topbar-promo-track span {
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.topbar-promo-track span.activo { opacity: 1; transform: translateY(0); }

.badge-mini {
  background: var(--color-oferta);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.text-danger-nav { color: var(--color-amarillo) !important; }
.text-danger-nav:hover { color: #fff !important; }

/* ---------- Categorías rápidas (fila de iconos bajo el menú) ---------- */
.categorias-rapidas {
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
  padding: 10px 0;
}
.categorias-rapidas .track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.categorias-rapidas .track::-webkit-scrollbar { display: none; }
.categorias-rapidas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--color-texto);
  white-space: nowrap;
  flex-shrink: 0;
}
.categorias-rapidas a i {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-fondo);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primario);
  font-size: 1rem;
}
.categorias-rapidas a:hover i { background: var(--color-acento); color: #fff; }

/* ---------- Franja de marcas ---------- */
.marcas-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 18px 0;
  scrollbar-width: none;
}
.marcas-strip::-webkit-scrollbar { display: none; }
.marcas-strip a {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primario);
  letter-spacing: .3px;
}
.marcas-strip a:hover { border-color: var(--color-acento); color: var(--color-acento-oscuro); background: #eaf0ff; }

/* ---------- Banner / carrusel principal ---------- */
.banner-carousel .carousel-item {
  position: relative;
  background: linear-gradient(120deg, var(--color-primario), var(--color-secundario));
  background-size: cover;
  background-position: center;
  color: #fff;
  border-radius: var(--radio);
  padding: 34px 40px 70px;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate; /* para que .banner-fondo (z-index:-1) quede sobre el degradado del slide y bajo el texto */
}
/* Foto de fondo: invisible hasta que carga y entonces aparece con fundido. */
.banner-carousel .banner-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 1.6s cubic-bezier(.22,1,.36,1);
}
.banner-carousel .banner-fondo.cargada { opacity: 1; transform: none; }
/* Aunque ya haya cargado, no se muestra mientras la pantalla de carga tapa la
   página: el fundido arranca cuando el cargador se desvanece (ver .espera-carga). */
html.espera-carga .banner-carousel .banner-fondo.cargada { opacity: 0; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .banner-carousel .banner-fondo { transform: none !important; transition: opacity 1.2s ease; }
}
/* Degradado solo abajo, apenas lo justo para que el texto y el botón se
   lean sobre cualquier foto sin oscurecer el resto de la imagen (antes
   tapaba todo el banner con un velo oscuro parejo). */
.banner-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13,27,42,.75) 0%, rgba(13,27,42,.35) 40%, rgba(13,27,42,0) 70%);
  pointer-events: none;
}
/* IMPORTANTE: "display" va aparte y solo sobre el slide .active. Ponerlo
   en la regla general de arriba (display:flex) tiene más especificidad
   que el "display:none" que Bootstrap aplica a los slides inactivos, y
   los deja a todos visibles y superpuestos al mismo tiempo. */
.banner-carousel .carousel-item.active {
  display: flex;
  align-items: flex-start;
}
.banner-carousel .carousel-item > .row { position: relative; z-index: 1; }
.banner-carousel h2 { font-size: 2rem; font-weight: 800; margin-top: 2px; }
.banner-carousel .carousel-indicators [data-bs-target] { background: var(--color-acento); }

/* Botón "Más información": abajo a la izquierda, estilo píldora sobre el degradado */
.banner-carousel .banner-mas-info {
  position: absolute;
  left: 40px;
  bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.banner-carousel .banner-mas-info:hover {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

/* Flechas del carrusel: pegadas a los extremos y con esquinas semi-redondeadas */
.banner-carousel .carousel-control-prev,
.banner-carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background-color: rgba(13,27,42,.4);
  border-radius: 14px;
  opacity: 1;
  transition: background-color .2s;
}
.banner-carousel .carousel-control-prev { left: 14px; }
.banner-carousel .carousel-control-next { right: 14px; }
.banner-carousel .carousel-control-prev:hover,
.banner-carousel .carousel-control-next:hover { background-color: rgba(13,27,42,.65); }
.banner-carousel .carousel-control-prev-icon,
.banner-carousel .carousel-control-next-icon { width: 1.1rem; height: 1.1rem; }

/* La barra de puntos ocupa todo el ancho inferior del banner y, al estar por
   encima de los slides, tapaba la parte baja del botón "Más información":
   solo respondía al toque una porción. La barra deja de capturar toques y solo
   los puntos (que sí son botones) los reciben. */
.banner-carousel .carousel-indicators { pointer-events: none; }
.banner-carousel .carousel-indicators [data-bs-target] { pointer-events: auto; }

/* En PC/laptop el slide es una caja muy ancha y baja, y object-fit:cover
   recortaba la foto hasta que parecía ampliada (zoom). Ahora la foto se
   muestra ENTERA (contain) sin aumentar el alto del banner, y los costados que
   sobran se rellenan con la misma foto desenfocada (.banner-fondo-blur). En
   móvil la caja es casi cuadrada y se queda con cover, como antes. */
.banner-carousel .banner-fondo-blur { display: none; }
@media (min-width: 768px) {
  .banner-carousel .carousel-item.active,
  .banner-carousel .carousel-item-next,
  .banner-carousel .carousel-item-prev { aspect-ratio: 16 / 5; }
  .banner-carousel .banner-fondo { object-fit: contain; }
  /* Con imagen propia para PC (panorámica 16:5) llena la caja exacta: cover. */
  .banner-carousel .carousel-item.tiene-pc .banner-fondo { object-fit: cover; }
  .banner-carousel .banner-fondo-blur {
    display: block;
    object-fit: cover;
    z-index: -2;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    filter: blur(22px) brightness(.8);
  }
}

@media (max-width: 767px) {
  /* En móvil el botón sube por encima de la fila de puntos para que no se
     solapen, y es un poco más alto (zona de toque cómoda). */
  .banner-carousel .carousel-item { padding-bottom: 96px; }
  .banner-carousel .banner-mas-info {
    left: 20px;
    bottom: 44px;
    min-height: 44px;
    padding: 10px 22px;
  }
}

/* ---------- Badges NUEVO / TOP en tarjetas ---------- */
.badges-producto { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.badge-nuevo, .badge-top {
  font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: #fff;
}
.badge-nuevo { background: var(--color-acento-oscuro); }
.badge-top { background: var(--color-primario); }

/* ---------- Zona de remates (sección oscura de ofertas) ---------- */
.zona-remates {
  background: linear-gradient(135deg, #14161c, #050506);
  border-radius: var(--radio);
  padding: 30px;
  margin: 40px 0;
}
.zona-remates .titulo-remates { color: #fff; font-weight: 800; }
.zona-remates .titulo-remates .badge { background: var(--color-oferta); }
.zona-remates .ver-todo { color: var(--color-amarillo); font-weight: 600; }
.zona-remates .card-producto { background: #1c1f27; color: #fff; }
.zona-remates .card-producto .nombre { color: #fff; }
.zona-remates .card-producto .marca, .zona-remates .card-producto .sku { color: #9aa3b8; }
.zona-remates .card-producto .precio-actual { color: #1cdc90; }
.zona-remates .card-producto .img-wrap { background: #0d0e12; }
.zona-remates .btn-secundario { background: transparent; border-color: rgba(255,255,255,.2); color: #fff; }

/* ---------- ¿Por qué elegirnos? ---------- */
.stats-section { text-align: center; padding: 40px 0; }
.stats-section .stat-numero { font-size: 2.2rem; font-weight: 800; }
.stats-section .stat-etiqueta { color: var(--color-texto-claro); font-size: 0.85rem; }
.feature-card {
  border-radius: var(--radio);
  padding: 24px;
  height: 100%;
}
.feature-card .icono {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.feature-card.azul { background: rgba(204, 176, 255,0.5); } .feature-card.azul .icono { background: #ededed; color: var(--color-acento); }
.feature-card.dorado { background: rgba(28, 220, 144, 0.5); } .feature-card.dorado .icono { background: #ededed; color: var(--color-acento); }
.feature-card.naranja { background: rgba(255, 255, 255, 0.5); } .feature-card.naranja .icono { background: #ededed; color: var(--color-acento); }

/* ---------- CTA de contacto oscuro ---------- */
.contacto-cta {
  background: var(--color-primario);
  border-radius: var(--radio);
  padding: 40px;
  color: #fff;
  margin: 40px 0;
}
.contacto-cta .etiqueta { color: var(--color-oferta); font-weight: 700; font-size: 0.8rem; letter-spacing: .5px; }
.contacto-cta .metodo {
  background: rgba(255,255,255,.05);
  border-radius: var(--radio);
  padding: 18px;
  text-align: center;
  height: 100%;
}
.contacto-cta .metodo .icono {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  font-size: 1.1rem;
}
.contacto-cta .metodo.tel .icono { background: var(--color-acento); }
.contacto-cta .metodo.mail .icono { background: #b9860a; }
.contacto-cta .metodo.wsp .icono { background: #25d366; }
.contacto-cta .metodo.map .icono { background: var(--color-oferta); }
.contacto-cta small { color: #94a3b8; }

/* ---------- Newsletter ---------- */
.newsletter-bar {
  background: var(--gradiente-marca);
  border-radius: var(--radio);
  padding: 30px 36px;
  color: #fff;
  margin: 40px 0;
}
.newsletter-bar input[type="email"] {
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 14px;
  min-width: 260px;
}
.newsletter-bar button {
  border-radius: 0 8px 8px 0;
  background: var(--color-primario);
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-weight: 700;
}


.admin-sidebar {
  background: var(--color-primario);
  min-height: 100vh;
  color: #fff;
}
.admin-sidebar a {
  display: block;
  padding: 12px 20px;
  color: #cbd5e1;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover, .admin-sidebar a.activo {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-left-color: var(--color-acento);
}
.admin-card-stat {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.admin-card-stat .valor { font-size: 1.8rem; font-weight: 800; color: var(--color-primario); }
.admin-card-stat .etiqueta { color: var(--color-texto-claro); font-size: 0.85rem; }

/* ---------- Carrusel de empresas/clientes (footer) ---------- */
.clientes-carrusel-wrap {
  background: #fff;
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  padding: 24px 0;
  margin-top: 40px;
  overflow: hidden;
}
.clientes-carrusel {
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: thin;
  cursor: grab;
}
.clientes-carrusel:active { cursor: grabbing; }
.clientes-track {
  display: flex;
  gap: 50px;
  width: max-content;
  align-items: center;
  animation: desplazar-clientes 180s linear infinite;
}
.clientes-carrusel:hover .clientes-track,
.clientes-carrusel:active .clientes-track { animation-play-state: paused; }
@keyframes desplazar-clientes {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cliente-logo-item {
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .2s, opacity .2s;
}
.cliente-logo-item:hover { filter: grayscale(0); opacity: 1; }
.cliente-logo-item img { max-height: 50px; max-width: 140px; object-fit: contain; }

/* Variante estática y centrada, usada cuando hay pocas empresas (sin animación) */
.clientes-estatico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

@media (max-width: 767px) {
  .clientes-track { animation-duration: 95s; gap: 34px; }
}

/* ---------- Botón flotante de WhatsApp (abajo a la izquierda) ---------- */
.btn-whatsapp-flotante {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37,211,102,.45);
  animation: pulso-whatsapp 2.4s ease-in-out infinite;
}
.btn-whatsapp-flotante:hover { background: #1ebd5a; }

/* ---------- Libro de Reclamaciones: badge junto a Contáctanos en el footer ---------- */
.footer-libro-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.footer-libro-badge:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.footer-libro-imagen { width: 34px; height: 34px; flex-shrink: 0; }
.footer-libro-imagen svg { width: 100%; height: 100%; }
.footer-libro-texto { font-size: 0.72rem; font-weight: 600; line-height: 1.25; color: #fff; }

@keyframes pulso-whatsapp {
  0%, 100% { box-shadow: 0 6px 18px rgba(37,211,102,.45); }
  50% { box-shadow: 0 6px 24px rgba(37,211,102,.75); }
}
@media (max-width: 575px) {
  .btn-whatsapp-flotante { left: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 1.4rem; }
}

/* ---------- Galería de imágenes en detalle de producto ---------- */
.galeria-principal {
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: #f1f3f5;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.galeria-miniaturas img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; opacity: .75; transition: opacity .15s, border-color .15s;
}
.galeria-miniaturas img:hover { opacity: 1; }
.galeria-miniaturas img.activa { border-color: var(--color-acento); opacity: 1; }
.choices {
  width: 200px;
}

.choices__list--dropdown {
  width: 350px;
  min-width: 350px;
}

.choices__list--dropdown .choices__item {
  white-space: nowrap;
}

/* =========================================================
   MODAL PRODUCTO - DISEÑO COMPACTO
   ========================================================= */

/* Tamaño general de letra del formulario */
#formProducto {
  font-size: 0.85rem;
}

/* Títulos de los campos */
#formProducto .form-label {
  font-size: 0.75rem;
  margin-bottom: 3px;
}

/* Inputs normales */
#formProducto .form-control {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  min-height: 34px;
}

/* Selects normales */
#formProducto .form-select {
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  min-height: 34px;
}

/* Textareas */
#formProducto textarea.form-control {
  padding: 0.35rem 0.5rem;
  line-height: 1.3;
}

/* Reducir espacios verticales */
#formProducto .mb-2 {
  margin-bottom: 0.4rem !important;
}

/* Espacio entre filas */
#formProducto .row.g-2 {
  --bs-gutter-y: 0.4rem;
}

/* Texto de ayuda */
#formProducto .form-text {
  font-size: 0.72rem;
}

/* Texto secundario */
#formProducto .text-muted {
  font-size: 0.72rem;
}

/* Checkbox */
#formProducto .form-check-label {
  font-size: 0.80rem;
}

/* Espacio entre checkbox */
#formProducto .form-check {
  margin-bottom: 0.35rem !important;
}


/* =========================================================
   MODAL: HEADER Y FOOTER FIJOS
   ========================================================= */

/* .modal-dialog-scrollable de Bootstrap solo funciona si .modal-body y
   .modal-footer son hijos directos de .modal-content. Aquí hay un <form>
   en medio, así que el form tiene que repetir ese mismo layout flex; si
   no, el cuerpo no se desplaza y todo lo que no cabe en pantalla
   (incluido el botón Guardar) queda recortado. */
#modalProducto #formProducto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

/* Misma corrección para cualquier modal desplazable cuyo contenido esté dentro
   de un <form> (p. ej. Preguntas frecuentes): el cuerpo se desplaza y el
   pie con "Guardar" siempre queda visible, aunque se pegue una imagen enorme. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
  flex-shrink: 0;
}

/* Las imágenes pegadas en los editores nunca se salen del ancho del editor */
.ql-editor img { max-width: 100%; height: auto; }

/* El contenido central es el que se desplaza */
#modalProducto .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Con muchos almacenes, la tabla de stock se desplaza por su cuenta para
   no empujar tanto el resto del formulario. */
#modalProducto .tabla-stock-almacenes {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
}
#modalProducto .tabla-stock-almacenes table {
  margin-bottom: 0;
}

/* Header y footer no se encogen */
#modalProducto .modal-header,
#modalProducto .modal-footer {
  flex-shrink: 0;
}


/* =========================================================
   BOTONES DEL FOOTER
   ========================================================= */

#modalProducto .modal-footer .btn-primario {
  font-size: 0.82rem;
  padding: 5px 14px !important;
}

#modalProducto .modal-footer .btn-link {
  font-size: 0.82rem;
}


/* =========================================================
   CHOICES.JS - CATEGORÍA Y MARCA
   ========================================================= */

/* Tamaño del combo */
#formProducto .choices {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

/* El selector de producto en Registrar Movimiento (Inventario) debe
   ocupar el mismo ancho que el select de "Tipo de movimiento" de al
   lado, en vez del ancho fijo de 200px que usan otros combos más
   compactos (como los filtros de categoría/marca). */
.combo-ancho-completo .choices {
  width: 100%;
}
.combo-ancho-completo .choices__list--dropdown {
  width: 100%;
  min-width: 100%;
}

/* Caja principal del combo */
#formProducto .choices__inner {
  min-height: 34px;
  padding: 5px 30px 5px 8px;
  border-radius: 0.375rem;
  font-size: 0.85rem;
}

/* Texto seleccionado */
#formProducto .choices__list--single {
  padding: 0;
}

/* Lista desplegable */
#formProducto .choices__list--dropdown {
  z-index: 1060;
  font-size: 0.82rem;
}

/* Opciones */
#formProducto .choices__list--dropdown .choices__item {
  padding: 7px 9px;
  white-space: nowrap;
}

/* Buscador */
#formProducto .choices__input {
  font-size: 0.82rem;
  padding: 6px 8px;
  margin-bottom: 4px;
}

/* Texto de búsqueda */
#formProducto .choices__input::placeholder {
  font-size: 0.80rem;
}


/* =========================================================
   GALERÍA
   ========================================================= */

#modalProducto #galeria_bloqueada {
  font-size: 0.75rem;
}

#modalProducto #galeria_gestor {
  font-size: 0.80rem;
}

#modalProducto #galeria_btn_subir {
  font-size: 0.78rem;
}


/* =========================================================
   TÍTULO DEL MODAL
   ========================================================= */

#modalProducto .modal-title {
  font-size: 1rem;
}
/* =========================================================
   MODAL GENERAL - DISEÑO COMPACTO
   ========================================================= */

/* Tamaño general de letra del formulario */
#formGeneral {
  font-size: 0.85rem;
}

/* Títulos de los campos */
#formGeneral .form-label {
  font-size: 0.75rem;
  margin-bottom: 3px;
}
/* =========================================================
   MENÚ INFORMATIVO SECUNDARIO (Contáctanos, Libro de
   Reclamaciones, Modalidades de Pago, Políticas, Nuestra
   Empresa, Delivery) — más pequeño y discreto que el menú
   principal, ubicado justo encima de él.
   ========================================================= */
.menu-informativo {
  background: var(--color-secundario);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.menu-informativo-lista {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.menu-informativo-lista::-webkit-scrollbar { display: none; }
.menu-informativo-lista li { flex: 0 0 auto; }
.menu-informativo-lista a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.78);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 7px 12px;
  transition: color .15s ease;
}
.menu-informativo-lista a:hover { color: #fff; }
.menu-informativo-lista a i { font-size: 0.72rem; color: var(--color-acento); }

@media (max-width: 767px) {
  .menu-informativo-lista { justify-content: flex-start; }
  .menu-informativo-lista a { font-size: 0.72rem; padding: 7px 10px; }
}

/* =========================================================
   PÁGINAS INFORMATIVAS (Políticas, Nuestra Empresa, Delivery)
   ========================================================= */
.pagina-info-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px;
  color: var(--color-texto);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pagina-info-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.pagina-info-card-icono {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(36,85,209,.1);
  color: var(--color-acento);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.pagina-info-bloque {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 24px;
}
.contenido-enriquecido { line-height: 1.45; font-size: 0.9rem; text-align: justify; }
.contenido-enriquecido img { max-width: 100%; height: auto; border-radius: 8px; }
.contenido-enriquecido ul, .contenido-enriquecido ol { padding-left: 1.4rem; }

/* Fichas de producto: Descripción y Características como tarjetas */
.ficha-bloque {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  margin-top: 1.25rem;
  max-width: 640px;
  overflow: hidden;
}
.ficha-bloque-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid #eef0f3;
}
.ficha-bloque-cuerpo { padding: 1rem 1.1rem; }
.ficha-colapsable { height: 150px; position: relative; overflow: hidden; transition: height .35s ease; }
.ficha-fila-igual > [class*="col-"] { display: flex; }
.ficha-fila-igual .ficha-bloque { width: 100%; max-width: none; margin-top: 0; }
.ficha-colapsable.ficha-cerrada::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.ficha-ver-mas {
  border: 2px solid #d9b8ff;
  background: #fff;
  color: #0d0d0f;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .55rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
  animation: fichaBordePulso 2.8s ease-in-out infinite;
}
/* El borde "respira" suavemente; al pasar el cursor o enfocar se resalta fijo y más fuerte. */
@keyframes fichaBordePulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 184, 255, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(217, 184, 255, .45); }
}
.ficha-ver-mas:hover,
.ficha-ver-mas:focus-visible {
  animation: none;
  border-color: #a463f2;
  background: #f5ebff;
  box-shadow: 0 0 0 4px rgba(164, 99, 242, .30), 0 4px 12px rgba(164, 99, 242, .25);
  outline: none;
}
.ficha-ver-mas:active {
  animation: none;
  border-color: #8a3ee0;
  box-shadow: 0 0 0 6px rgba(138, 62, 224, .30);
  transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) { .ficha-ver-mas { animation: none; } }
.ficha-ver-mas i { transition: transform .25s; margin-left: .25rem; }
.ficha-ver-mas.abierto i { transform: rotate(180deg); }

/* Especificaciones: tabla con filas alternas y primera columna en negrita */
.ficha-specs .contenido-enriquecido { text-align: left; }
.ficha-specs table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.ficha-specs table td, .ficha-specs table th {
  padding: .6rem .8rem;
  font-size: .85rem;
  border: 0;
  vertical-align: top;
}
.ficha-specs table tr:nth-child(odd) { background: #f4f4f5; }
.ficha-specs table tr td:first-child, .ficha-specs table tr th:first-child {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  width: 40%;
}
@media (max-width: 575px) {
  .ficha-bloque-cuerpo, .ficha-bloque-titulo { padding-left: 1rem; padding-right: 1rem; }
  .ficha-specs table td:first-child { width: 45%; }
}

/* =========================================================
   MODALIDADES DE PAGO
   ========================================================= */
.modalidad-pago-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: box-shadow .15s ease, transform .15s ease;
}
.modalidad-pago-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.modalidad-pago-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.modalidad-pago-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-fondo);
  color: var(--color-texto-claro);
  font-size: 2.2rem;
}

/* =========================================================
   EDITOR ENRIQUECIDO (Quill) EN EL PANEL ADMIN
   ========================================================= */
.editor-enriquecido-caja .ql-toolbar { border-radius: 8px 8px 0 0; }
.editor-enriquecido-caja .ql-container { border-radius: 0 0 8px 8px; min-height: 220px; font-size: 0.95rem; }

/* Campo "ampliable" en el modal de Producto (Descripción y
   Especificaciones técnicas): no lleva editor Quill incrustado (ocuparía
   demasiado espacio dentro del modal y tapaba los campos siguientes). En
   su lugar se muestra una vista previa de solo texto, y el contenido se
   edita en una ventana modal aparte mediante el botón "Expandir". */
.campo-editor-ampliable .btn-expandir-editor { font-size: 0.78rem; padding: 0.1rem 0.5rem; }
.campo-editor-preview {
  min-height: 52px;
  max-height: 90px;
  overflow: hidden;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: 8px;
  background: #f8f9fa;
  font-size: 0.85rem;
  line-height: 1.35;
  cursor: pointer;
}
.campo-editor-preview:hover { background: #f1f3f5; }

/* =========================================================
   POPUP DE BIENVENIDA (ofertas / avisos importantes)
   ========================================================= */
.popup-bienvenida-content {
  position: relative;
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.popup-bienvenida-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  /* Solo el color de fondo: el atajo "background" borraba la X (imagen SVG) de .btn-close. */
  background-color: rgba(255,255,255,.92);
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  opacity: .95;
  width: 32px;
  height: 32px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.popup-bienvenida-cerrar:hover { transform: rotate(90deg); }
.popup-bienvenida-img-wrap { position: relative; overflow: hidden; }
.popup-bienvenida-img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.popup-bienvenida-icono {
  width: 74px;
  height: 74px;
  margin: 28px auto 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primario), var(--color-acento));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 8px 20px rgba(36,85,209,.35);
}
.popup-bienvenida-titulo { color: var(--color-primario); }

/* Animación de entrada: el popup baja suavemente desde arriba mientras se
   desenfoca y aparece (sin rebote), el fondo se difumina y el contenido
   entra escalonado. CSS puro, sin librerías.
   OJO con la especificidad: Bootstrap define `.modal.fade .modal-dialog`
   (transform + transition de .3s). Las reglas de aquí llevan `.modal.fade`
   delante a propósito; con menos especificidad Bootstrap las pisaba y el
   popup aparecía de golpe, sin fundido. */
.modal.fade.popup-bienvenida-modal { transition: opacity .6s ease; }
.modal.fade.popup-bienvenida-modal .modal-dialog {
  opacity: 0;
  transform: translateY(-56px) scale(.96);
  filter: blur(12px);
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease, filter .7s ease;
}
.modal.fade.popup-bienvenida-modal.show .modal-dialog {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Fondo difuminado. El blur se ata a [aria-modal], que Bootstrap mantiene
   hasta que termina el cierre, así no se quita de golpe antes del fundido. */
body:has(.popup-bienvenida-modal[aria-modal="true"]) .modal-backdrop {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body:has(.popup-bienvenida-modal) .modal-backdrop.fade { transition: opacity .7s ease; }

/* Imagen: llega un poco ampliada y se asienta; el resto, escalonado. */
.popup-bienvenida-img { transform: scale(1.14); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.popup-bienvenida-modal.show .popup-bienvenida-img { transform: scale(1); }
.popup-bienvenida-icono,
.popup-bienvenida-modal .modal-body > * {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(6px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
.popup-bienvenida-modal.show .popup-bienvenida-icono,
.popup-bienvenida-modal.show .modal-body > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.popup-bienvenida-modal.show .popup-bienvenida-icono { transition-delay: .25s; }
.popup-bienvenida-modal.show .modal-body > :nth-child(1) { transition-delay: .35s; }
.popup-bienvenida-modal.show .modal-body > :nth-child(2) { transition-delay: .5s; }
.popup-bienvenida-modal.show .modal-body > :nth-child(3) { transition-delay: .65s; }
@media (prefers-reduced-motion: reduce) {
  .modal.fade.popup-bienvenida-modal,
  .modal.fade.popup-bienvenida-modal .modal-dialog,
  .popup-bienvenida-img,
  .popup-bienvenida-icono,
  .popup-bienvenida-modal .modal-body > * { transition: opacity .9s ease !important; transform: none !important; filter: none !important; }
  body:has(.popup-bienvenida-modal) .modal-backdrop { backdrop-filter: none; }
}
@media (max-width: 575px) {
  .popup-bienvenida-content { border-radius: 16px; }
  .popup-bienvenida-img { max-height: 160px; }
  .popup-bienvenida-icono { width: 60px; height: 60px; font-size: 1.4rem; margin-top: 20px; }
}

/* =========================================================
   NAVEGACIÓN EN EL ZOOM DE LA GALERÍA DE PRODUCTO
   ========================================================= */
.lightbox-galeria-wrap { position: relative; }
.lightbox-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  z-index: 5;
}
.lightbox-flecha:hover { background: rgba(0,0,0,.8); }
.lightbox-flecha-izq { left: 10px; }
.lightbox-flecha-der { right: 10px; }
.lightbox-contador {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .8rem;
  padding: 3px 12px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .lightbox-flecha { width: 40px; height: 40px; font-size: 1rem; }
  .lightbox-flecha-izq { left: 4px; }
  .lightbox-flecha-der { right: 4px; }
}

/* =========================================================
   PROTECCIÓN FRONTEND (dificultar copia casual del contenido)
   Complementa a proteccion.js. No es seguridad real, solo un
   disuasivo visual: no debe romper formularios ni accesibilidad.
   ========================================================= */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Los campos de formulario SIEMPRE deben poder seleccionarse/editarse
   con normalidad, sin importar la regla general de arriba. */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
img { -webkit-user-drag: none; user-drag: none; }

/* Badge de descuento por cliente (distinto color al de OFERTA general) */
.badge-descuento-cliente { background: var(--color-primario) !important; }

/* =========================================================
   PÁGINA DE PUNTUACIÓN: SISTEMA GATO / PERRO
   ========================================================= */
.gato-perro-nivel {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-primario);
  background: rgba(36,85,209,.08);
  padding: 4px 14px;
  border-radius: 20px;
}
.gato-perro-widget {
  position: relative;
  width: 180px;
  height: 180px;
}
.gato-perro-silueta {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.gato-perro-silueta svg { width: 100%; height: 100%; }

/* Técnica de "cortina": la máscara crece en ancho (0% a 100%) y recorta
   con overflow:hidden lo que sobresale; adentro va una copia a color de
   tamaño FIJO (no relativo a la máscara), así se revela progresivamente
   de izquierda a derecha en vez de encogerse. Funciona en cualquier
   navegador, sin depender de clip-path. */
.gato-perro-color-mascara {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  overflow: hidden;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.gato-perro-color-fija { width: 180px; height: 180px; }
.gato-perro-color-fija svg { width: 180px; height: 180px; display: block; }

.progreso-barra {
  position: relative;
  height: 14px;
  background: var(--color-fondo);
  border-radius: 20px;
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto;
}
.progreso-barra-relleno {
  height: 100%;
  background: linear-gradient(90deg, #ff9a56, #2455d1);
  border-radius: 20px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.progreso-barra-marca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
  .gato-perro-color-mascara, .progreso-barra-relleno { transition: none; }
}

/* =========================================================
   SERVICIO TÉCNICO: línea de tiempo de estados
   ========================================================= */
.st-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  position: relative;
}
.st-timeline-paso {
  flex: 1 1 auto;
  min-width: 90px;
  text-align: center;
  position: relative;
  padding-top: 18px;
  color: var(--color-texto-claro);
}
.st-timeline-paso::before {
  content: '';
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 3px;
  background: var(--color-borde);
}
.st-timeline-paso:first-child::before { left: 50%; }
.st-timeline-paso:last-child::before { right: 50%; }
.st-timeline-paso.activo::before { background: var(--color-primario); }
.st-timeline-punto {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--color-borde);
  border: 2px solid #fff;
}
.st-timeline-paso.activo .st-timeline-punto { background: var(--color-primario); }
.st-timeline-texto { font-size: 0.68rem; display: block; }
.st-timeline-paso.activo .st-timeline-texto { color: var(--color-primario); font-weight: 700; }
@media (max-width: 767px) {
  .st-timeline-paso { min-width: 70px; }
  .st-timeline-texto { font-size: 0.6rem; }
}

/* =========================================================
   AVISO AL DETECTAR HERRAMIENTAS DE DESARROLLADOR ANCLADAS
   ========================================================= */
body.devtools-blur > *:not(.dev-warning) {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}
.dev-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-secundario);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 1.1rem;
  font-weight: 600;
}
body.devtools-blur .dev-warning { display: flex; }

/* =========================================================
   BARRA DE PROGRESO DE ESTADO DE PEDIDO (pago / despacho)
   ========================================================= */
.timeline-progreso {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  position: relative;
}
.timeline-progreso-paso {
  flex: 1 1 auto;
  min-width: 90px;
  text-align: center;
  position: relative;
  padding-top: 16px;
  color: var(--color-texto-claro);
}
.timeline-progreso-paso::before {
  content: '';
  position: absolute;
  top: 4px; left: 0; right: 0;
  height: 3px;
  background: var(--color-borde);
}
.timeline-progreso-paso:first-child::before { left: 50%; }
.timeline-progreso-paso:last-child::before { right: 50%; }
.timeline-progreso-paso.activo::before { background: var(--color-primario); }
.timeline-progreso-paso .timeline-progreso-punto {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-borde);
  border: 2px solid #fff;
}
.timeline-progreso-paso.activo .timeline-progreso-punto { background: var(--color-primario); }
.timeline-progreso-texto { font-size: 0.66rem; display: block; }
.timeline-progreso-paso.activo .timeline-progreso-texto { color: var(--color-primario); font-weight: 700; }

.timeline-progreso-cancelado {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dc3545;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 0;
}
.timeline-progreso-cancelado .timeline-progreso-punto {
  width: 11px; height: 11px; border-radius: 50%; background: #dc3545; display: inline-block;
}
@media (max-width: 767px) {
  .timeline-progreso-paso { min-width: 68px; }
  .timeline-progreso-texto { font-size: 0.58rem; }
}

/* =========================================================
   MENÚ CATEGORÍAS: presentación minimalista
   ========================================================= */
.dropdown-menu.menu-categorias-dropdown {
  min-width: 340px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(13,27,42,.14);
  padding: 10px;
}
/* El display se fija aparte, con más especificidad que
   ".dropdown-menu.show" de Bootstrap, y SOLO cuando el menú está
   realmente abierto — así el estado cerrado (display:none) de Bootstrap
   sigue funcionando sin cambios. Se usa flexbox (en vez de CSS Grid)
   para la cuadrícula de 2 columnas, por compatibilidad más amplia. */
.dropdown-menu.show.menu-categorias-dropdown {
  display: flex;
  flex-wrap: wrap;
}
/* Importante: el hijo DIRECTO del <ul> flex es el <li>, no el <a
   class="dropdown-item"> de adentro. Las propiedades de flex-basis van
   en el <li> para que realmente controlen el ancho de cada columna. */
.menu-categorias-dropdown > li {
  flex: 0 0 50%;
  max-width: 50%;
}
.menu-categorias-dropdown .dropdown-item {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.86rem;
  color: var(--color-texto);
  /* A diferencia de una cuadrícula real, en flexbox con salto de línea
     los textos de distinto largo (algunos ocupando 2 líneas) desalinean
     las columnas. Se evita truncando en una sola línea, para que las
     dos columnas queden siempre parejas. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.menu-categorias-dropdown .dropdown-item:hover,
.menu-categorias-dropdown .dropdown-item:focus {
  background: var(--color-fondo);
  color: var(--color-primario);
}
.menu-categorias-footer {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-borde);
}
.menu-categorias-footer a {
  display: block;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primario);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s;
}
.menu-categorias-footer a:hover { background: var(--color-fondo); }
@media (max-width: 767px) {
  .menu-categorias-dropdown { min-width: 0; box-shadow: none; }
  .menu-categorias-dropdown > li { flex: 0 0 100%; max-width: 100%; }
}
/* =========================================================
   CREAR CUENTA (mismos colores que Finalizar compra)
   ========================================================= */
.reg-card {
  background: #fff; border: 1px solid var(--color-borde); border-left: 4px solid var(--color-oferta);
  border-radius: 12px; padding: 26px 28px 28px; box-shadow: 0 6px 22px rgba(13, 13, 15, .07);
}
.reg-cab { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--color-borde); }
.reg-cab > i {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primario); color: var(--color-oferta); font-size: 1.15rem; flex: 0 0 auto;
}
.reg-cab h1 { font-size: 1.35rem; font-weight: 800; margin: 0; color: var(--color-primario); }
.reg-cab p { margin: 2px 0 0; font-size: .82rem; color: var(--color-texto-claro); }
.reg-card .form-label { font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.reg-card .form-control, .reg-card .form-select {
  border: 1px solid #d5d8de; border-radius: 6px; padding: 9px 12px; font-size: .88rem;
  transition: border-color .15s, box-shadow .15s;
}
.reg-card .form-control:focus, .reg-card .form-select:focus { border-color: var(--color-oferta); box-shadow: 0 0 0 3px rgba(28, 220, 144, .25); }
.reg-card select:disabled { background: #f4f5f7; }
.reg-card .form-check-input { accent-color: var(--color-disponible); }
.reg-card .form-check-input:checked { background-color: var(--color-disponible); border-color: var(--color-disponible); }
.reg-card .form-check-input:focus { border-color: var(--color-oferta); box-shadow: 0 0 0 3px rgba(28, 220, 144, .25); }
.reg-card .form-check-label a { color: var(--color-disponible); font-weight: 700; }
.reg-card .alert-warning { border-left: 4px solid var(--color-oferta); background: #f1fdf8; color: var(--color-primario); border-top: 0; border-right: 0; border-bottom: 0; }
.reg-boton {
  display: block; width: 100%; border: 0; border-radius: 6px; padding: 12px; font-weight: 700; font-size: .95rem; cursor: pointer;
  background: var(--color-primario); color: #fff; transition: background .2s, box-shadow .2s, transform .12s;
}
.reg-boton:hover { background: var(--color-secundario); box-shadow: 0 0 0 3px rgba(28, 220, 144, .35); }
.reg-boton:active { transform: scale(.98); }
.reg-card + p a, .reg-card ~ p a { color: var(--color-disponible); font-weight: 700; }

/* =========================================================
   MODAL DE INICIO DE SESIÓN: aparición suave
   ========================================================= */
#modalLogin.modal.fade .modal-dialog {
  transform: translateY(24px) scale(.94);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}
#modalLogin.modal.show .modal-dialog { transform: none; opacity: 1; }
#modalLogin .modal-content {
  border: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 13, 15, .35);
}
#modalLogin .modal-header { border-bottom: 0; padding: 22px 26px 0; }
#modalLogin .modal-body { padding: 14px 26px 26px; }
#modalLogin .modal-content::before {
  content: ''; display: block; height: 5px;
  background: linear-gradient(90deg, var(--color-oferta), #0d0d0f);
}
#modalLogin .form-control { border-radius: 8px; padding: 10px 12px; }
#modalLogin .form-control:focus { border-color: var(--color-oferta); box-shadow: 0 0 0 3px rgba(28, 220, 144, .25); }
#modalLogin .alert { animation: loginAviso .3s ease; }
@keyframes loginAviso { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Fondo: se atenúa y desenfoca poco a poco */
.modal-backdrop.fade { transition: opacity .4s ease; }
body:has(#modalLogin.show) .modal-backdrop.show { opacity: .55; backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  #modalLogin.modal.fade .modal-dialog { transition: opacity .2s; transform: none; }
}

/* =========================================================
   FINALIZAR COMPRA en 3 pasos (Identificación → Envío → Pago)
   ========================================================= */
.icono-verde { color: var(--color-oferta); }
.co-titulo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.co-titulo h1 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--color-primario); }
.co-volver {
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--color-borde);
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-primario); text-decoration: none;
}
.co-volver:hover { background: var(--color-primario); color: var(--color-oferta); }
.co-barra {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;
  background: #e3e3e3; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;
  font-size: .9rem; color: var(--color-texto-claro);
}
.co-barra i { font-size: .7rem; }
.co-barra span.activo { color: var(--color-primario); font-weight: 800; }
.co-barra span.activo::after { content: ''; display: block; height: 3px; border-radius: 2px; background: var(--color-oferta); margin-top: 2px; }

.co-paso {
  background: #fff; border: 1px solid var(--color-borde); border-left: 4px solid transparent;
  border-radius: 8px; margin-bottom: 14px; overflow: hidden;
}
.co-paso-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.co-paso-icono { font-size: 1.15rem; color: var(--color-primario); width: 24px; text-align: center; }
.co-paso-tit { flex: 1; min-width: 0; }
.co-paso-tit h2 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--color-primario); }
.co-paso-resumen { margin: 2px 0 0; font-size: .82rem; color: var(--color-texto-claro); overflow-wrap: anywhere; }
.co-paso-resumen:empty { display: none; }
.co-editar { display: none; background: none; border: 0; color: var(--color-disponible); font-weight: 700; font-size: .85rem; cursor: pointer; }
.co-paso-cuerpo { display: none; padding: 4px 20px 22px; }

.co-paso.activo { border-left-color: var(--color-oferta); box-shadow: 0 4px 16px rgba(13, 13, 15, .06); }
.co-paso.activo .co-paso-cuerpo { display: block; }
.co-paso.completo .co-editar { display: inline-block; }
.co-paso.completo .co-paso-icono { color: var(--color-disponible); }
.co-paso.activo .co-editar { display: none; }
.co-paso.bloqueado { opacity: .6; }
.co-paso.bloqueado h2, .co-paso.bloqueado .co-paso-icono { color: #9aa0aa; }

.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 10px 0 14px; }
.co-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-grid[hidden] { display: none; }
.co-ancho { grid-column: 1 / -1; }
.co-campo label { display: block; font-size: .8rem; font-weight: 600; color: var(--color-texto); margin-bottom: 4px; }
.co-campo input, .co-campo select {
  width: 100%; border: 1px solid #d5d8de; border-radius: 6px; background: #fff;
  padding: 9px 12px; font-size: .88rem; color: var(--color-texto); transition: border-color .15s, box-shadow .15s;
}
.co-campo input:focus, .co-campo select:focus { outline: none; border-color: var(--color-oferta); box-shadow: 0 0 0 3px rgba(28, 220, 144, .25); }
.co-campo input[readonly] { background: #f4f5f7; }
.co-campo select:disabled { background: #f4f5f7; cursor: not-allowed; }
.co-campo.con-error input, .co-campo.con-error select { border-color: #dc3545; }
/* Avisos de cotización de traslado en Mis pedidos */
.pedido-cotiza { display: flex; gap: 14px; align-items: flex-start; border-radius: 10px; padding: 14px 16px; }
.pedido-cotiza > i { font-size: 1.4rem; margin-top: 2px; }
.pedido-cotiza-espera { background: #fff7e6; border: 2px solid #f5b83d; color: #5c3b00; animation: cotizaPulso 2.4s ease-in-out infinite; }
.pedido-cotiza-espera > i { color: #d98a00; }
.pedido-cotiza-lista { background: #f1fdf8; border: 2px solid var(--color-oferta); color: var(--color-primario); }
.pedido-cotiza-lista > i { color: var(--color-disponible); }
@keyframes cotizaPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 61, 0); } 50% { box-shadow: 0 0 0 5px rgba(245, 184, 61, .3); } }

/* Cuadro "Traslado pendiente de cotización" (tarjeta oscura con acento verde del logo) */
.co-cotiza {
  background: var(--color-primario); color: #fff; border-radius: 12px; padding: 18px 20px; margin-top: 12px;
  border-left: 4px solid var(--color-oferta); box-shadow: 0 8px 22px rgba(13, 13, 15, .25);
}
.co-cotiza-tit { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.co-cotiza-tit i { color: var(--color-oferta); }
.co-cotiza p { font-size: .95rem; line-height: 1.5; margin: 0 0 8px; color: #f1f1f1; }
.co-cotiza small { color: #9aa0aa; font-size: .8rem; }
.co-cotiza-grande p { font-size: 1rem; }
.co-cotiza .co-cotiza-reserva { background: rgba(28, 220, 144, .12); border-radius: 8px; padding: 8px 12px; font-size: .86rem; color: #d9fbec; }
.co-cotiza .co-cotiza-reserva i { color: var(--color-oferta); margin-right: 6px; }
.co-whatsapp {
  display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 8px; padding: 14px; text-align: center; cursor: pointer;
  background: #25d366; color: #0d0d0f; font-weight: 800; font-size: 1rem; text-decoration: none;
  transition: box-shadow .2s, transform .12s, background .2s;
}
.co-whatsapp i { font-size: 1.3rem; vertical-align: -2px; margin-right: 6px; }
.co-whatsapp:hover:not(:disabled) { background: var(--color-oferta); color: var(--color-primario); box-shadow: 0 0 0 4px rgba(28, 220, 144, .35); }
.co-whatsapp:active { transform: scale(.98); }
.co-whatsapp:disabled { opacity: .6; cursor: wait; }
.co-whatsapp-enlace { display: inline-block; width: auto; padding: 12px 26px; margin-top: 0; }
.co-costo-agencia { font-size: .85rem; font-weight: 700; margin-top: 6px; }
.co-costo-agencia.ok { color: var(--color-disponible); }
.co-costo-agencia.cotizar { color: #b45309; }
.co-costo-agencia[hidden] { display: none; }
.co-combo-lista li { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.co-combo-costo { font-size: .74rem; font-weight: 700; color: var(--color-disponible); white-space: nowrap; }
.co-combo-otra { border-top: 1px solid var(--color-borde); margin-top: 4px; }
.co-combo-otra .co-combo-costo { color: #b45309; }

/* Combo de agencias: escribir para filtrar + lista desplegable */
.co-combo { position: relative; }
.co-combo input[type=text] { padding-right: 38px; }
.co-combo-flecha { position: absolute; top: 0; right: 0; height: 100%; width: 38px; border: 0; background: none; color: var(--color-texto-claro); cursor: pointer; }
.co-combo-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none;
  max-height: 230px; overflow-y: auto; background: #fff; border: 1px solid #d5d8de; border-radius: 8px;
  box-shadow: 0 12px 30px rgba(13, 13, 15, .15);
}
.co-combo-lista[hidden] { display: none; }
.co-combo-lista li { padding: 9px 12px; font-size: .88rem; border-radius: 6px; cursor: pointer; }
.co-combo-lista li[hidden] { display: none; }
.co-combo-lista li:hover, .co-combo-lista li.activo { background: #e9fbf4; color: var(--color-disponible); font-weight: 600; }
.co-combo-lista li.co-combo-vacio { color: var(--color-texto-claro); cursor: default; }
.co-combo-lista li.co-combo-vacio:hover { background: none; color: var(--color-texto-claro); font-weight: 400; }
/* El menú del combo no debe quedar recortado por la tarjeta del paso */
.co-paso.activo { overflow: visible; }
/* (antes: Choices.js) */
.co-campo .choices { width: 100%; margin: 0; }
.co-campo .choices__inner { background: #fff; border: 1px solid #d5d8de; border-radius: 6px; min-height: 40px; padding: 5px 10px; font-size: .88rem; }
.co-campo .choices.is-focused .choices__inner { border-color: var(--color-oferta); box-shadow: 0 0 0 3px rgba(28, 220, 144, .25); }
.co-campo .choices__list--dropdown { border-radius: 6px; z-index: 20; }
.co-campo .choices__list--dropdown .choices__item--selectable.is-highlighted { background: #e9fbf4; }
.co-campo.con-error .choices__inner { border-color: #dc3545; }
.co-error { color: #dc3545; font-size: .76rem; margin-top: 3px; min-height: 0; }
.co-error:empty { display: none; }
.co-error-general { font-size: .85rem; margin: 6px 0; font-weight: 600; }
.co-estado { font-size: .76rem; margin-top: 3px; color: var(--color-texto-claro); }
.co-estado.ok { color: var(--color-disponible); }
.co-estado.mal { color: #dc3545; }

.co-checks { margin: 6px 0 10px; }
.co-check { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; margin: 6px 0; cursor: pointer; }
.co-check input { margin-top: 3px; accent-color: var(--color-disponible); }
.co-check a { color: var(--color-disponible); font-weight: 700; }
.co-check-caja { border: 1px solid var(--color-borde); background: #fafafa; border-radius: 8px; padding: 12px 14px; margin: 14px 0 6px; }
.co-check-caja small { display: block; color: var(--color-texto-claro); font-size: .76rem; }

.co-continuar, .co-confirmar {
  display: inline-block; border: 0; border-radius: 6px; padding: 11px 28px; font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: transform .12s, box-shadow .2s, background .2s;
}
.co-continuar { background: var(--color-primario); color: #fff; margin-top: 14px; }
.co-continuar:hover { background: var(--color-secundario); box-shadow: 0 0 0 3px rgba(28, 220, 144, .35); }
.co-continuar:active { transform: scale(.97); }
.co-continuar:disabled { opacity: .6; cursor: wait; }
.co-confirmar { display: block; width: 100%; margin-top: 18px; background: var(--color-oferta); color: var(--color-primario); font-size: 1rem; padding: 14px; }
.co-confirmar:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(28, 220, 144, .35); }
.co-confirmar:disabled { background: #b9bec6; color: #fff; cursor: not-allowed; }

.co-subtitulo { font-weight: 700; font-size: .88rem; margin: 6px 0 10px; }
.co-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.co-opciones-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-opcion {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--color-borde); border-radius: 8px; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.co-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.co-opcion > i { color: var(--color-texto-claro); font-size: 1.05rem; }
.co-opcion-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.co-opcion-texto strong { font-size: .84rem; }
.co-opcion-texto small { font-size: .72rem; color: var(--color-texto-claro); }
.co-opcion-badge { margin-left: auto; font-size: .75rem; font-weight: 800; color: var(--color-disponible); white-space: nowrap; }
.co-opcion:hover { border-color: var(--color-oferta); }
.co-opcion.seleccionado, .co-opcion:has(input:checked) {
  border: 2px solid var(--color-oferta); padding: 11px 13px; background: #f1fdf8; box-shadow: 0 0 0 3px rgba(28, 220, 144, .18);
}
.co-opcion.seleccionado > i, .co-opcion:has(input:checked) > i { color: var(--color-disponible); }
.co-panel { border-top: 1px solid var(--color-borde); margin-top: 16px; padding-top: 16px; }
.co-panel[hidden] { display: none; }
.co-info-tienda {
  display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 8px;
  background: #f1fdf8; border: 1px solid rgba(28, 220, 144, .45); font-size: .86rem;
}
.co-info-tienda > i { font-size: 1.5rem; color: var(--color-disponible); }
.co-gratis { display: inline-block; margin-top: 4px; font-size: .7rem; font-weight: 800; color: var(--color-disponible); background: #d9fbec; padding: 1px 8px; border-radius: 4px; }

.co-pago-opcion {
  display: block; border: 1px solid var(--color-borde); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
  cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.co-pago-opcion[hidden] { display: none; }
.co-pago-opcion:has(input:checked) { border: 2px solid var(--color-oferta); padding: 13px 15px; background: #f1fdf8; box-shadow: 0 0 0 3px rgba(28, 220, 144, .18); }
.co-pago-cab { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.co-pago-cab input { accent-color: var(--color-disponible); }
.co-pago-titulo { font-weight: 700; font-size: .95rem; }
.co-pago-titulo i { margin-right: 6px; color: var(--color-disponible); }
.co-pago-detalle { margin-top: 14px; cursor: default; }
.co-ayuda { font-size: .76rem; color: var(--color-texto-claro); margin: 8px 0 0; }

/* Bloque "Cargar comprobante" (botón de modalidades + zona para adjuntar) */
.cu { display: flex; flex-direction: column; gap: 10px; }
.cu-btn-modalidades {
  align-self: flex-start; border: 2px solid #d9b8ff; background: #fff; color: var(--color-primario);
  font-weight: 800; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem 1.2rem; border-radius: 999px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.cu-btn-modalidades i { margin-right: 6px; }
/* Botón "Modalidades de Pago" junto a "Cargar comprobante" en Mis pedidos (mismo estilo del borde lila) */
.btn-modalidades-pago {
  border: 2px solid #d9b8ff; background: #fff; color: var(--color-primario);
  font-weight: 800; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .55rem 1.1rem; border-radius: 6px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.btn-modalidades-pago:hover { border-color: #a463f2; background: #f5ebff; box-shadow: 0 0 0 4px rgba(164, 99, 242, .25); }
.cu-btn-modalidades:hover { border-color: #a463f2; background: #f5ebff; box-shadow: 0 0 0 4px rgba(164, 99, 242, .25); }
.cu-zona {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 96px;
  border: 2px dashed #c9cdd3; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; padding: 14px;
  transition: border-color .15s, background .15s;
}
.cu-zona:hover, .cu-zona.arrastrando { border-color: var(--color-oferta); background: #f1fdf8; }
.cu-zona.con-archivo { border-style: solid; border-color: var(--color-oferta); background: #f1fdf8; }
.cu-zona input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cu-vacio { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .88rem; color: var(--color-texto-claro); pointer-events: none; }
.cu-vacio > i { font-size: 1.3rem; }
.cu-texto strong { color: var(--color-disponible); }
.cu-ayuda { font-size: .72rem; }
.cu-lleno { display: flex; align-items: center; gap: 10px; font-size: .88rem; max-width: 100%; z-index: 1; }
.cu-lleno[hidden], .cu-vacio[hidden] { display: none; }
.cu-lleno > i { color: var(--color-disponible); font-size: 1.2rem; }
.cu-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; font-weight: 600; }
.cu-quitar { position: relative; z-index: 2; border: 0; background: #e3e3e3; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.cu-quitar:hover { background: #dc3545; color: #fff; }
.cu-error { color: #dc3545; font-size: .8rem; }
.cu-error[hidden] { display: none; }

/* Resumen del pedido */
.co-resumen { position: sticky; top: 16px; background: #fff; border: 1px solid var(--color-borde); border-radius: 10px; padding: 20px; box-shadow: 0 6px 22px rgba(13, 13, 15, .07); }
.co-resumen-tit { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-borde); }
.co-items { max-height: 290px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; }
.co-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f1f3; }
.co-item:last-child { border-bottom: 0; }
.co-item-img { flex: 0 0 52px; height: 52px; border: 1px solid var(--color-borde); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; color: #b9bec6; }
.co-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.co-item-cuerpo { flex: 1; min-width: 0; }
.co-item-nombre { font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-item-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: .82rem; }
.co-item-cant { background: #f0f1f3; border-radius: 999px; padding: 0 8px; font-size: .7rem; }
.co-totales { margin-top: 8px; }

@media (max-width: 767px) {
  .co-grid, .co-grid-3, .co-opciones, .co-opciones-2 { grid-template-columns: 1fr; }
  .co-paso-cab { padding: 14px; }
  .co-paso-cuerpo { padding: 2px 14px 18px; }
  .co-resumen { position: static; }
  .co-titulo h1 { font-size: 1.3rem; }
}

/* =========================================================
   PAGINACIÓN del catálogo: números en círculo, activo en negro con acento verde
   ========================================================= */
.paginacion-tienda { gap: 4px; align-items: center; margin: 8px 0; }
.paginacion-tienda .page-item .page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 29px; height: 29px; padding: 0 4px;
  border: 0; border-radius: 50% !important;
  background: transparent;
  color: var(--color-texto);
  font-size: .8rem; font-weight: 600;
  box-shadow: none;
  transition: background .15s, color .15s, transform .15s;
}
.paginacion-tienda .page-item .page-link:hover { background: #e9fbf4; color: var(--color-disponible); transform: translateY(-1px); }
.paginacion-tienda .page-item .page-link:focus-visible { outline: 2px solid var(--color-oferta); outline-offset: 2px; }
.paginacion-tienda .page-item.active .page-link {
  background: var(--color-primario);
  color: #ededed;
  box-shadow: 0 2px 8px rgba(13, 13, 15, .25);
}
.paginacion-tienda .page-item.disabled .page-link { background: transparent; color: #b8bcc4; font-weight: 500; }
.paginacion-tienda .page-item:first-child .page-link,
.paginacion-tienda .page-item:last-child .page-link { color: var(--color-primario); }
.paginacion-tienda .page-item.disabled:first-child .page-link,
.paginacion-tienda .page-item.disabled:last-child .page-link { color: #c9cdd3; }

/* =========================================================
   MENÚ DE CATEGORÍAS (categoría → subcategorías y marcas)
   Colores de marca: verde #1cdc90 sobre negro.
   ========================================================= */
.menu-principal .container { position: relative; }
.menu-principal .mega-toggle {
  background: var(--color-oferta);
  color: var(--color-primario) !important;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  padding: 8px 16px !important;
  margin: 4px 8px 4px 0;
}
.menu-principal .mega-toggle:hover,
.menu-principal .mega-toggle.abierto { background: #fff; color: var(--color-primario) !important; }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 12px;
  z-index: 1050;
  width: min(1000px, calc(100% - 24px));
  display: flex;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  overflow: hidden;
  max-height: 75vh;
}
.mega-menu[hidden] { display: none; }
.mega-izq {
  flex: 0 0 250px;
  background: #f6f7f9;
  padding: 10px 0;
  overflow-y: auto;
}
.mega-cat {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 18px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--color-texto);
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mega-cat i:first-child { width: 18px; text-align: center; color: var(--color-oferta); }
.mega-cat .mega-flecha { margin-left: auto; font-size: .7rem; opacity: 0; }
.mega-cat.activa { background: #fff; border-left-color: var(--color-oferta); color: var(--color-primario); }
.mega-cat.activa i:first-child { color: var(--color-oferta); }
.mega-cat.activa .mega-flecha { opacity: 1; color: var(--color-disponible); }

.mega-der { position: relative; flex: 1; padding: 20px 28px; overflow-y: auto; }
.mega-cerrar {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0; font-size: 1.1rem; color: var(--color-texto-claro); cursor: pointer;
}
.mega-panel { display: none; }
.mega-panel.activa { display: block; }
.mega-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 700;
  padding: 0 34px 10px 0;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: 14px;
}
.mega-titulo > i { color: var(--color-oferta); }
.mega-ver-todo { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--color-disponible); text-decoration: none; }
.mega-columnas { column-width: 200px; column-gap: 28px; }
.mega-sub { break-inside: avoid; margin-bottom: 18px; }
.mega-col-titulo {
  display: block;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-primario); text-decoration: none;
  border-left: 3px solid var(--color-oferta);
  padding-left: 9px; margin-bottom: 6px;
}
.mega-col-titulo:hover { color: var(--color-disponible); }
.mega-sub ul { list-style: none; margin: 0; padding: 0; }
.mega-sub a:not(.mega-col-titulo) {
  padding: 5px 4px 5px 12px;
  font-size: .7rem; line-height: 1.3; color: var(--color-texto); text-decoration: none; border-radius: 6px;
  /* Nombres largos: máximo 2 líneas, para que las columnas queden parejas. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mega-sub a:not(.mega-col-titulo):hover { background: #e9fbf4; color: var(--color-disponible); }
.mega-sub a.mega-ver-sub:not(.mega-col-titulo) { font-weight: 700; color: var(--color-disponible); }
.mega-movil { display: none; }
@media (max-width: 991px) {
  .mega-menu { position: static; width: 100%; max-height: none; border-radius: 10px; margin: 6px 0 10px; display: block; }
  .mega-menu[hidden] { display: none; }
  .mega-izq, .mega-der { display: none; }
  .mega-movil { display: block; max-height: 70vh; overflow-y: auto; }

  .mega-movil details > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
  }
  .mega-movil details > summary::-webkit-details-marker { display: none; }
  .mega-movil details > summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    margin-left: auto; font-size: .7rem; color: var(--color-texto-claro);
    transition: transform .2s;
  }
  .mega-movil details[open] > summary::after { transform: rotate(180deg); }

  .mm-cat > summary {
    padding: 13px 16px; font-size: .9rem; font-weight: 700; color: var(--color-primario);
    border-bottom: 1px solid var(--color-borde);
  }
  .mm-cat > summary > i { width: 18px; text-align: center; color: var(--color-oferta); }
  .mm-cat[open] > summary { background: #f6f7f9; border-left: 3px solid var(--color-oferta); }
  .mm-cuerpo { background: #fff; padding: 4px 0 8px; }
  .mm-ver, .mm-ver-sub { display: block; padding: 9px 16px 9px 34px; font-size: .8rem; font-weight: 700; color: var(--color-disponible); text-decoration: none; }
  .mm-sub > summary {
    padding: 10px 16px 10px 34px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    color: var(--color-texto); border-bottom: 1px solid #f0f1f3;
  }
  .mm-sub ul { list-style: none; margin: 0; padding: 0 0 6px; background: #fafafa; }
  .mm-sub li a:not(.mm-ver-sub) {
    display: block; padding: 8px 16px 8px 50px; font-size: .74rem; line-height: 1.3;
    color: var(--color-texto); text-decoration: none;
  }
  .mm-sub li a.mm-ver-sub { padding-left: 50px; font-size: .74rem; }

  /* Efecto al tocar y al abrir: resalte, color y animación del contenido */
  .mega-movil summary { -webkit-tap-highlight-color: rgba(28, 220, 144, .25); transition: background .15s, color .15s; user-select: none; }
  .mega-movil summary:active { background: #d4f8ea; }
  .mm-cat[open] > summary { background: var(--color-oferta); color: var(--color-primario); border-left-color: var(--color-primario); }
  .mm-cat[open] > summary > i { color: var(--color-primario); }
  .mm-cat[open] > summary::after { color: var(--color-primario); }
  .mm-sub[open] > summary { background: #e9fbf4; color: var(--color-disponible); border-left: 3px solid var(--color-oferta); padding-left: 31px; }
  .mm-cat[open] > .mm-cuerpo, .mm-sub[open] > ul { animation: mmDespliegue .25s ease-out; }
  .mm-sub li a:active, .mm-ver:active, .mm-ver-sub:active { background: #d4f8ea; }
}
@keyframes mmDespliegue {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}/* ESTILOS DE STOCK */
.stock-ok {
  font-size: 0.85rem;
  color: #198754; /* Verde */
}

.stock-pocas {
  font-size: 0.85rem;
  color: #fd7e14; /* Naranja */
}

.stock-no {
  font-size: 0.85rem;
  color: #dc3545; /* Rojo */
}

/* =====================================================================
   FLUJO DE PEDIDOS: reserva, contador, comprobantes, cupones y banner
   promocional. Todo usa las variables de :root, nada de colores fijos.
   ===================================================================== */

/* ---------- Banner/cupón promocional (debajo del menú principal) ---------- */
.banner-cupon-wrap {
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
  padding: 8px 0;
}
.banner-cupon-link { display: block; }
/* 2 cm ≈ 76px. Se limita la ALTURA y el ancho queda en auto, así que la
   imagen nunca se deforma: conserva su proporción original y, si resulta
   más ancha que el contenedor, la reduce max-width sin recortarla. */
.banner-cupon-img {
  display: block;
  margin: 0 auto;
  height: auto;
  width: auto;
  max-height: 76px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}
@media (max-width: 575px) {
  /* En móvil manda el ancho disponible: la altura baja sola manteniendo
     la proporción, nunca se estira la imagen. */
  .banner-cupon-img { max-height: 60px; }
}

/* ---------- Nombre del usuario en el header ---------- */
.usuario-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0 6px;
}
.usuario-header-texto { display: none; line-height: 1.1; text-align: left; }
.usuario-header-etiqueta {
  display: block;
  font-size: 0.68rem;
  color: var(--color-texto-claro);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.usuario-header-nombre {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primario);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 992px) {
  /* En escritorio el nombre acompaña al icono de cuenta; en móvil se
     muestra dentro del menú desplegable para no quitarle ancho al buscador. */
  .usuario-header-texto { display: block; }
}

/* ---------- Mensaje de reserva tras confirmar el pedido ---------- */
.pedido-reserva {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-left: 5px solid var(--color-oferta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}
.pedido-reserva-icono {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 148, 29, .12);
  color: var(--color-oferta);
  font-size: 1.3rem;
}
.pedido-reserva-fecha {
  display: inline-block;
  background: var(--color-oferta);
  color: #fff;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .pedido-reserva { flex-direction: column; gap: 10px; padding: 16px; }
  .pedido-reserva-fecha { white-space: normal; }
}

.modalidad-pago-item {
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-borde);
}
.modalidad-pago-item:last-of-type { border-bottom: 0; }
.pedido-datos-contacto li { padding: 3px 0; }
.pedido-datos-contacto i { color: var(--color-acento); width: 18px; }

/* ---------- Asesores comerciales ---------- */
.pedido-asesores {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-top: 4px solid var(--color-acento);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}
.asesor-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--color-borde);
}
.asesor-item:first-of-type { border-top: 0; }
/* Avatar de respaldo: círculo con la inicial, cuando el asesor no tiene foto. */
.asesor-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-acento);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Foto real del asesor. object-fit evita que se deforme aunque la imagen
   subida no sea cuadrada: recorta centrado en vez de estirar. */
.asesor-avatar-img {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--color-borde);
}
.asesor-item a { color: var(--color-acento); }
.asesor-item a:hover { text-decoration: underline; }
.asesor-contactos a { white-space: nowrap; }

/* Botón "Asesores disponibles" de la confirmación de pedido */
.asesores-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
}
.asesores-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .25);
  font-size: .78rem;
  font-weight: 700;
}
.asesores-chevron { transition: transform .2s; }
.asesores-toggle[aria-expanded="true"] .asesores-chevron { transform: rotate(180deg); }

/* Tarjetas de la página /asesores */
.asesor-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  transition: box-shadow .15s, transform .15s;
}
.asesor-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.asesor-card .asesor-item { border-top: 0; padding: 0; }
.asesor-card .asesor-avatar,
.asesor-card .asesor-avatar-img { width: 52px; height: 52px; font-size: 1.25rem; }

.footer-enlace-asesores i { margin-right: 4px; color: var(--color-acento); }

@media (max-width: 575px) {
  .asesor-contactos a { white-space: normal; word-break: break-word; }
}

/* ---------- Cupón de descuento ---------- */
.cupon-aplicado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(26, 157, 112, .08);
  border: 1px dashed var(--color-disponible);
  border-radius: 10px;
  padding: 10px 14px;
}
.cupon-codigo {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--color-disponible);
  color: #fff;
  padding: 2px 10px;
  border-radius: 6px;
}

/* ---------- Tarjeta de pedido en "Mis pedidos" ---------- */
.pedido-card-cancelado { border-left: 4px solid #dc3545; }

.pedido-contador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(36, 85, 209, .1);
  color: var(--color-acento-oscuro);
  border-radius: 20px;
  padding: 4px 12px;
}
.pedido-contador-valor { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.pedido-contador-urgente { background: rgba(247, 148, 29, .16); color: #a35a00; }
.pedido-contador-vencido { background: rgba(220, 53, 69, .12); color: #b02a37; }

@media (max-width: 575px) {
  .pedido-contador { display: flex; margin-top: 8px; }
  .pedido-card .table { font-size: .85rem; }
}

/* =====================================================================
   ADORNOS DE TEMPORADA  (Admin > Configuración del sitio > Tema)

   Un tema NO cambia los colores de la tienda: la identidad de marca
   (negro, azul y naranja) se mantiene intacta en los tres. Lo único que
   hacen estas reglas es DIBUJAR ADORNOS encima de la cabecera —globos,
   esferas navideñas, banderines— usando formas CSS, sin imágenes.

   Todo se dibuja con pointer-events:none y aria-hidden, así que nunca
   tapa ni intercepta un clic sobre el menú o el buscador.

   Las clases se enganchan al contenedor (.tema-adornos-navidad) y no al
   <body>, para que la vista previa del panel use exactamente el mismo
   CSS que el sitio público.
   ===================================================================== */

.tema-adornos {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), transparent);
}
/* La cuerda de la que cuelgan los adornos. */
.tema-adornos::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
}
.tema-adornos .adorno {
  position: relative;
  flex: 0 0 auto;
  /* Balanceo suave y desfasado: cada adorno usa su índice (--i). */
  animation: adorno-balanceo 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.35s);
  transform-origin: 50% 0;
}
@keyframes adorno-balanceo {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
/* Respeta a quien pide menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .tema-adornos .adorno { animation: none; }
}

/* ---------------------------- AÑO NUEVO ---------------------------- */
/* Globos de colores festivos colgando de un hilo. */
.tema-adornos-nuevo-ano { height: 54px; }
.tema-adornos-nuevo-ano::before { background: rgba(0, 0, 0, .25); }
.tema-adornos-nuevo-ano .adorno {
  width: 26px;
  height: 32px;
  margin-top: 6px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
}
/* Nudo + hilo del globo */
.tema-adornos-nuevo-ano .adorno::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 14px;
  margin-left: -.5px;
  background: rgba(0, 0, 0, .28);
}
/* Brillo */
.tema-adornos-nuevo-ano .adorno::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: rotate(-20deg);
}
.tema-adornos-nuevo-ano .adorno-globo-1 { background: #d4af37; }
.tema-adornos-nuevo-ano .adorno-globo-2 { background: #2455d1; }
.tema-adornos-nuevo-ano .adorno-globo-3 { background: #c0392b; }

/* ------------------------- FIESTAS PATRIAS ------------------------- */
/* Banderines triangulares rojo y blanco + escarapelas. */
.tema-adornos-fiestas-patrias { height: 42px; }
.tema-adornos-fiestas-patrias::before { background: #b0141f; }
.tema-adornos-fiestas-patrias .adorno {
  width: 28px;
  height: 32px;
  margin-top: 3px;
}
.tema-adornos-fiestas-patrias .adorno-banderin-rojo,
.tema-adornos-fiestas-patrias .adorno-banderin-blanco {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tema-adornos-fiestas-patrias .adorno-banderin-rojo { background: #d91023; }
.tema-adornos-fiestas-patrias .adorno-banderin-blanco {
  background: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
/* Escarapela: círculo blanco con anillo rojo, el distintivo patrio. */
.tema-adornos-fiestas-patrias .adorno-escarapela {
  width: 24px;
  height: 24px;
  margin-top: 6px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #d91023;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.tema-adornos-fiestas-patrias .adorno-escarapela::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 1px;
  height: 7px;
  background: #b0141f;
}

/* ----------------------------- NAVIDAD ----------------------------- */
/* Esferas navideñas colgantes y arbolitos. */
.tema-adornos-navidad { height: 54px; }
.tema-adornos-navidad::before { background: #1f6b3a; }
.tema-adornos-navidad .adorno[class*="esfera"] {
  width: 24px;
  height: 24px;
  margin-top: 16px;
  border-radius: 50%;
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .25);
}
/* Hilo + colgador metálico de la esfera */
.tema-adornos-navidad .adorno[class*="esfera"]::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 1px;
  height: 12px;
  margin-left: -.5px;
  background: #1f6b3a;
  box-shadow: 0 12px 0 -0.5px #c9a227, 0 13px 0 -0.5px #c9a227;
}
/* Brillo de la esfera */
.tema-adornos-navidad .adorno[class*="esfera"]::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transform: rotate(-25deg);
}
.tema-adornos-navidad .adorno-esfera-roja   { background: #c8102e; }
.tema-adornos-navidad .adorno-esfera-verde  { background: #0f7b3e; }
.tema-adornos-navidad .adorno-esfera-dorada { background: #d4af37; }

/* Arbolito de Navidad, recortado de un solo elemento. */
.tema-adornos-navidad .adorno-arbol {
  width: 34px;
  height: 38px;
  margin-top: 6px;
  background: linear-gradient(180deg, #168a48, #0b5c2e);
  clip-path: polygon(
    50% 0%, 64% 26%, 57% 26%, 72% 56%, 63% 56%, 80% 86%,
    57% 86%, 57% 100%, 43% 100%, 43% 86%, 20% 86%, 37% 56%,
    28% 56%, 43% 26%, 36% 26%
  );
  /* El arbolito no cuelga de la cuerda, así que no se balancea. */
  animation: none;
}

/* ------------------------- RESPONSIVE ------------------------------ */
@media (max-width: 767px) {
  .tema-adornos { height: 38px; }
  .tema-adornos-nuevo-ano .adorno { width: 20px; height: 25px; }
  .tema-adornos-fiestas-patrias .adorno { width: 22px; height: 25px; }
  .tema-adornos-navidad .adorno[class*="esfera"] { width: 18px; height: 18px; margin-top: 12px; }
  .tema-adornos-navidad .adorno-arbol { width: 26px; height: 29px; }
  /* Con poco ancho se muestran menos piezas para que no se apelotonen. */
  .tema-adornos .adorno:nth-child(n + 6) { display: none; }
}

/* ---------------- Vista previa en el panel admin ------------------- */
.tema-adornos-mini {
  height: 44px;
  border-radius: 8px;
  background: var(--color-fondo);
  margin: 10px 0 8px;
  border: 1px solid var(--color-borde);
}
.tema-adornos-mini .adorno:nth-child(n + 6) { display: none; }

.tema-opcion {
  display: block;
  cursor: pointer;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
  height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.tema-opcion:hover { border-color: var(--color-acento); }
.tema-opcion input { margin-right: 6px; }
.tema-opcion.activo {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(36, 85, 209, .12);
}
/* Marcador de "sin adornos": una caja vacía en vez de la guirnalda. */
.tema-sin-adornos {
  height: 44px;
  border-radius: 8px;
  background: var(--color-fondo);
  border: 1px dashed var(--color-borde);
  margin: 10px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-claro);
  font-size: .78rem;
}

/* ---------- Comprobantes en el panel administrativo ---------- */
.comprobante-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--color-fondo);
  border-radius: 8px;
  margin-bottom: 6px;
}
.comprobante-item i { color: var(--color-acento); }

/* ---------- Campos completados por la consulta de DNI/RUC ----------
   Se marcan en gris para que se note de un vistazo que ese dato lo trajo
   la API y no se escribió a mano. Los <input> quedan en readonly (no
   disabled) para que sigan enviándose con el formulario; los <select>
   del ubigeo sí se deshabilitan y se reactivan justo antes del envío. */
.campo-desde-api,
.campo-desde-api:focus {
  background-color: var(--color-fondo);
  cursor: not-allowed;
}
select.campo-desde-api:disabled { background-color: var(--color-fondo); }
.btn-acento {
    color: #1cdc90;
}

.btn-acento:hover {
    color: #fff;
}
/* Alineación del contenido creado con el editor del panel (Quill) */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* =========================================================
   ENTRADA SUAVE DE BANNERS Y APARICIÓN AL HACER SCROLL
   Todo con transform/opacity/filter (barato para el navegador) y apagado
   con prefers-reduced-motion. Las clases .reveal las pone public/js/reveal.js.
   ========================================================= */
@keyframes entra-desde-arriba {
  from { opacity: 0; transform: translateY(-28px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes entra-texto-banner {
  from { opacity: 0; transform: translateY(-18px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes entra-boton-banner {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Carrusel principal, banner de respaldo y banner/cupón promocional: bajan
   desde arriba difuminados al cargar la página. */
.banner-carousel,
.banner-principal,
.banner-cupon-wrap { animation: entra-desde-arriba 1.2s cubic-bezier(.22,1,.36,1) .2s backwards; }

/* El carrusel cambia de slide con fundido (clase carousel-fade en home.php)
   y el texto de cada slide entra escalonado. Se engancha también a
   .carousel-item-next/prev para que el texto no "salte" cuando Bootstrap
   marca el slide como .active al terminar el fundido. */
.banner-carousel .carousel-item.active h2,
.banner-carousel .carousel-item-next h2,
.banner-carousel .carousel-item-prev h2 { animation: entra-texto-banner .9s cubic-bezier(.16,1,.3,1) .25s backwards; }
.banner-carousel .carousel-item.active p,
.banner-carousel .carousel-item-next p,
.banner-carousel .carousel-item-prev p { animation: entra-texto-banner .9s cubic-bezier(.16,1,.3,1) .4s backwards; }
.banner-carousel .carousel-item.active .banner-mas-info,
.banner-carousel .carousel-item-next .banner-mas-info,
.banner-carousel .carousel-item-prev .banner-mas-info { animation: entra-boton-banner .9s cubic-bezier(.16,1,.3,1) .55s backwards; }

/* Las animaciones de arriba esperan a que la pantalla de carga se desvanezca
   (el script de includes/header.php quita .espera-carga del <html> al
   ocultarla). En pausa y con "backwards", el banner se queda en su estado
   inicial (invisible) y arranca recién cuando el cliente puede verlo.
   Va DESPUÉS de los "animation:" abreviados, que reponen play-state: running. */
html.espera-carga .banner-carousel,
html.espera-carga .banner-principal,
html.espera-carga .banner-cupon-wrap,
html.espera-carga .banner-carousel .carousel-item h2,
html.espera-carga .banner-carousel .carousel-item-next h2,
html.espera-carga .banner-carousel .carousel-item-prev h2,
html.espera-carga .banner-carousel .carousel-item p,
html.espera-carga .banner-carousel .carousel-item-next p,
html.espera-carga .banner-carousel .carousel-item-prev p,
html.espera-carga .banner-carousel .banner-mas-info { animation-play-state: paused; }

/* Aparición al bajar: el elemento sube un poco y se enfoca. La clase
   .js-reveal la agrega el propio script, así que sin JS todo se ve normal. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal.reveal-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Con "reducir movimiento" (en Windows: Accesibilidad > Efectos visuales >
   Efectos de animación desactivados) NO se apaga el efecto: se conserva solo
   el fundido, sin desplazamientos ni desenfoque. Apagarlo por completo hacía
   que en esos equipos la página pareciera no tener ningún efecto. */
@keyframes entra-fundido { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .banner-carousel,
  .banner-principal,
  .banner-cupon-wrap,
  .banner-carousel .carousel-item h2,
  .banner-carousel .carousel-item p,
  .banner-carousel .carousel-item-next h2,
  .banner-carousel .carousel-item-next p,
  .banner-carousel .carousel-item-prev h2,
  .banner-carousel .carousel-item-prev p,
  .banner-carousel .banner-mas-info { animation-name: entra-fundido !important; animation-duration: 1.2s !important; }
  .js-reveal .reveal { transform: none; filter: none; transition: opacity 1s ease; transition-delay: var(--reveal-delay, 0ms); }
}


/* ---------- Método de entrega del checkout ---------- */
.metodo-entrega { border: 1px solid var(--color-borde); border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.metodo-entrega.seleccionado { border: 2px solid var(--color-oferta); padding: 15px 17px; }
.metodo-entrega.metodo-deshabilitado { opacity: .5; background: #f4f4f4; }
.metodo-entrega.metodo-deshabilitado .metodo-cab, .metodo-entrega.metodo-deshabilitado input { cursor: not-allowed; }
.metodo-cab { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.metodo-cab input[type="radio"], .direccion-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-oferta); flex: 0 0 auto; cursor: pointer; }
.metodo-titulo { font-weight: 700; font-size: .92rem; flex: 1 1 auto; }
.metodo-badge { background: rgba(28, 220, 144, .15); color: var(--color-primario); font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 6px; }
.metodo-desc { margin: 10px 0 0 30px; font-size: .88rem; color: var(--color-texto); }
#panelDelivery { margin-top: 14px; }
.direccion-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 10px; border: 1px solid var(--color-borde); border-radius: 6px; cursor: pointer; background: #fff; }
.direccion-card.seleccionada { border: 2px solid var(--color-acento-oscuro); padding: 13px 15px; }
.direccion-card-cuerpo { min-width: 0; overflow-wrap: anywhere; }
.despacho-detalle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--color-oferta); border-radius: 6px; background: #fff; }
.ubicamos-direccion { margin-top: 8px; padding: 10px 14px; border-radius: 6px; background: #fff3cd; border-left: 4px solid #f0ad00; color: #5c4400; font-size: .74rem; }
.ubicamos-etiqueta { font-weight: 700; text-transform: uppercase; font-size: .66rem; letter-spacing: .03em; }
.ubicamos-contacto { margin-top: 4px; padding-left: 1.4rem; font-size: .72rem; color: #5c4400; }
.ubicamos-contacto a { font-weight: 700; color: #1a7f45; text-decoration: underline; }
.nota-digital { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: 6px; background: #fafafa; font-size: .76rem; color: #555; }
.nota-digital i { margin-top: 2px; color: var(--color-acento); }
.tiempo-entrega { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.tiempo-entrega[hidden] { display: none; }
.tiempo-etiqueta { font-size: .78rem; color: #6b6b6b; }
.tiempo-entrega strong { padding: 8px 14px; border-radius: 4px; background: rgba(28, 220, 144, .15); color: #1c1c1c; font-size: .9rem; }
.nota-verde { margin-top: 12px; padding: 12px 14px; border-radius: 6px; background: rgba(28, 220, 144, .15); font-size: .88rem; color: var(--color-primario); font-weight: 600; }
.entrega-direccion { border: 1px solid var(--color-borde); border-radius: 6px; padding: 12px 14px; background: #fff; }
.entrega-coincidencia { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: 6px; background: #fff; font-size: .9rem; cursor: pointer; }
.entrega-coincidencia:hover { border-color: var(--color-primario); background: var(--color-fondo); }
#mapaEntrega { height: 280px; border-radius: 6px; margin-top: 12px; }

/* ---------- Resumen de tu compra (checkout) ---------- */
.resumen-compra { background: #fff; border: 1px solid var(--color-borde); border-radius: 6px; padding: 20px; }
.resumen-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.resumen-unidades { color: var(--color-texto-claro); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.resumen-cupon { border: 1px solid var(--color-borde); border-radius: 4px; margin-bottom: 16px; overflow: hidden; }
.resumen-cupon-cab { background: rgba(28, 220, 144, .15); border-bottom: 1px solid rgba(28, 220, 144, .45); padding: 8px 12px; font-size: .85rem; font-weight: 700; color: var(--color-primario); }
.resumen-cupon-cuerpo { padding: 12px; }
.resumen-cupon-form { display: flex; gap: 8px; margin: 0; }
.resumen-cupon-form .form-control { font-size: .85rem; min-width: 0; }
.resumen-cupon-btn { flex: 0 0 auto; border: 0; border-radius: 4px; background: var(--color-fondo); color: var(--color-primario); font-weight: 700; font-size: .85rem; padding: 0 18px; cursor: pointer; }
.resumen-cupon-btn:hover { background: var(--color-acento-oscuro); }
.resumen-fila { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: .92rem; }
.resumen-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--color-borde); margin-top: 12px; padding-top: 12px; font-size: 1.05rem; font-weight: 700; }
.resumen-aviso { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); padding: 12px 0; margin: 4px 0 14px; font-size: .82rem; color: var(--color-texto); }
.resumen-aviso i { margin-top: 2px; color: var(--color-texto-claro); }
.resumen-continuar { display: block; width: 100%; border: 0; border-radius: 4px; background: var(--color-primario); color: #fff; font-weight: 700; padding: 12px; cursor: pointer; }
.resumen-continuar:hover:not(:disabled) { background: var(--color-secundario); }
.resumen-continuar:disabled { opacity: .55; cursor: not-allowed; }
.resumen-confianza { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-borde); font-size: .78rem; color: var(--color-texto-claro); }
.resumen-confianza i { margin-right: 4px; }

/* ---- Aviso de cookies (solo si hay píxel de Meta configurado) ---- */
.cookies-aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1055;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  padding: 14px 18px; background: #fff; color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-hover);
}
.cookies-aviso[hidden] { display: none; }
.cookies-aviso-texto { margin: 0; flex: 1 1 320px; font-size: .88rem; line-height: 1.45; }
.cookies-aviso-botones { display: flex; gap: 8px; }
.cookies-btn-rechazar {
  background: transparent; border: 1px solid var(--color-borde); border-radius: 8px;
  padding: 8px 16px; font-size: .88rem; color: var(--color-texto);
}
.cookies-btn-aceptar { padding: 8px 18px; font-size: .88rem; }