/* public/css/site.css
   Sistema de diseño compartido de la tienda pública INDUCOMEX.
   Reemplaza los bloques <style> duplicados en cada página. */

:root {
  --inducomex-blue: #0481f2;
  --inducomex-blue-dark: #0b6fcc;
}

/* ===================== TOAST: "agregado al carrito" ===================== */
.inducomex-toast-container {
  position: fixed;
  top: 5.5rem;
  right: 1rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
@media (min-width: 768px) {
  .inducomex-toast-container {
    top: 6.5rem;
    right: 1.5rem;
  }
}
.inducomex-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--inducomex-blue);
  border-radius: 1rem;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.inducomex-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.inducomex-toast-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--inducomex-blue), var(--inducomex-blue-dark));
  color: #fff;
  font-size: 14px;
}
.inducomex-toast-thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 0.65rem;
  object-fit: cover;
  border: 1px solid #edf0f4;
  background: #f7f8fa;
}
.inducomex-toast-body {
  flex: 1;
  min-width: 0;
}
.inducomex-toast-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.inducomex-toast-text {
  font-size: 12.5px;
  color: #64748b;
  margin-top: 0.15rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.inducomex-toast-close {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 12px;
  padding: 0.15rem;
  transition: color 0.15s ease;
}
.inducomex-toast-close:hover {
  color: #0f172a;
}

html {
  font-size: 18px;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: #f4f6f8;
  overflow-x: hidden;
}

/* ===================== BARRA DE ANUNCIO: MARQUEE CSS PURO ===================== */
/* Misma técnica que el marquee de marcas: dos tiras idénticas dentro de un
   visor con overflow:hidden, animadas -50% para que el empalme sea
   invisible y el scroll se vea continuo (antes el texto solo "saltaba"
   cada 7s sin ningún movimiento). */
.announcement-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}
.announcement-marquee {
  display: flex;
  width: max-content;
  animation: announcement-scroll 24s linear infinite;
}
.announcement-track {
  display: flex;
  flex-shrink: 0;
}
.announcement-item {
  white-space: nowrap;
  padding: 0 1.75rem;
  position: relative;
}
.announcement-item::after {
  content: "•";
  position: absolute;
  right: -0.05rem;
  opacity: 0.55;
}
@keyframes announcement-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Secciones del home: sin fondo ni tarjeta propia (se funden con el fondo
   gris de la página); solo las tarjetas de producto individuales llevan
   fondo blanco + borde, así sí contrastan contra el fondo. */
.section-flat {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.brand-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.18em;
}

/* ===================== LAYOUT ===================== */
.wrapper {
  max-width: 1600px;
  margin: 0 auto;
}

.shadow-soft {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.mega-shadow {
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--inducomex-blue-dark);
}
.section-badge::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--inducomex-blue), var(--inducomex-blue-dark));
}

/* Franjas de fondo a todo lo ancho (sin recrear el efecto "tarjeta"):
   rompen la monotonía del blanco plano detrás de secciones puntuales. */
.section-bleed {
  position: relative;
  isolation: isolate;
}
.section-bleed::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}
.section-bleed-blue::after {
  background: linear-gradient(180deg, #eef6ff 0%, #f4f9ff 100%);
}
.section-bleed-gray::after {
  background: #f3f5f8;
}

/* Franja a todo lo ancho con color sólido (para secciones que ya son
   full-bleed por sí mismas, sin necesitar el truco del ::after). */
.section-bleed-blue-solid {
  background: linear-gradient(180deg, #eef6ff 0%, #f4f9ff 100%);
}

/* Rompe el elemento fuera de cualquier contenedor con max-width, para que
   ocupe el ancho completo del viewport (estilo banner de tienda mayorista). */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ===================== FRANJA DE MARCAS: MARQUEE CSS PURO ===================== */
.brand-strip-band {
  background: #fff;
  border-top: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
  overflow: hidden;
}
.brand-marquee {
  display: flex;
  width: max-content;
  animation: brand-marquee-scroll 32s linear infinite;
}
.brand-marquee:hover {
  animation-play-state: paused;
}
.brand-marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-marquee-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.75rem;
}
.brand-marquee-logo img {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1);
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}
.brand-marquee-logo:hover img {
  opacity: 1;
  filter: grayscale(0);
}
@keyframes brand-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Se mueve exactamente el ancho de UNA tira (50% del total, ya que hay
       2 tiras idénticas) -> el empalme queda invisible. */
    transform: translateX(-50%);
  }
}

/* ===================== TILES PROMOCIONALES: carrusel tipo banner ===================== */
/* Mismo motivo que .categorySwiper/.product-carousel: Swiper usa
   overflow:hidden en .swiper para poder ocultar slides fuera de vista, y
   eso recorta el levantamiento + sombra del tile al hacer hover si no se
   reserva espacio de sobra. */
.promoTilesSwiper {
  padding: 10px 4px 20px;
  margin: -10px -4px -20px;
}
.promoTilesSwiper .swiper-slide {
  height: auto;
}
.promo-tile {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  padding: 2.25rem 2rem;
  min-height: 220px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  color: #fff;
  isolation: isolate;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
/* El tile SIN imagen propia (ícono + degradado) sí se levanta un poco al
   hover -- no tiene una foto que hacer zoom. */
.promo-tile:not(.promo-tile-has-image):hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}
.promo-tile-watermark {
  position: absolute;
  top: -18px;
  right: -14px;
  font-size: 132px;
  color: rgba(255, 255, 255, 0.12);
  z-index: -1;
  transform: rotate(-8deg);
}
/* Cuando el admin sube una imagen propia (banner) para el tile, la imagen
   queda limpia -- sin ícono, sin texto encima, sin degradado -- porque esos
   banners ya traen su propio texto/diseño incluido. La tarjeta se mantiene
   como link (sigue llevando a la página correspondiente al hacer click).
   El efecto de hover es un ZOOM de la imagen (no el contenedor moviéndose):
   el contenedor se queda quieto, .promo-tile-bg-img escala hacia adentro y
   overflow:hidden en .promo-tile recorta el sobrante. */
.promo-tile-bg-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.5s ease;
}
.promo-tile-has-image .promo-tile-bg-img {
  display: block;
}
.promo-tile-has-image:hover .promo-tile-bg-img {
  transform: scale(1.08);
}
.promo-tile-has-image .promo-tile-watermark,
.promo-tile-has-image .promo-tile-overlay,
.promo-tile-has-image .promo-tile-icon,
.promo-tile-has-image .promo-tile-title,
.promo-tile-has-image .promo-tile-sub {
  display: none;
}
.promo-tile-overlay {
  display: none;
}
.promo-tile-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: 0.65rem;
  font-size: 21px;
  color: #fff;
}
.promo-tile-title {
  font-size: 22px;
  font-weight: 800;
}
.promo-tile-sub {
  font-size: 13.5px;
  opacity: 0.85;
  font-weight: 500;
}
.promo-tile-navy {
  background: linear-gradient(135deg, #0b2545 0%, #0b6fcc 100%);
}
.promo-tile-blue {
  background: linear-gradient(135deg, #0b6fcc 0%, var(--inducomex-blue) 100%);
}
.promo-tile-sky {
  background: linear-gradient(135deg, var(--inducomex-blue) 0%, #4dabff 100%);
}

.promo-tiles-pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
}
.promo-tiles-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 1;
  transition:
    background-color 0.2s ease,
    width 0.2s ease;
}
.promo-tiles-pagination .swiper-pagination-bullet-active {
  background: var(--inducomex-blue);
  width: 22px;
}

/* ===================== CARRUSEL HORIZONTAL DE PRODUCTOS ===================== */
/* Swiper siempre usa overflow:hidden en .swiper para poder "esconder" las
   slides fuera de vista -- eso también recorta cualquier efecto de hover
   que crezca verticalmente (la tarjeta se levanta y le crece la sombra).
   Sin este padding, ese recorte se comía un pedazo de la tarjeta al pasar
   el cursor. */
.product-carousel {
  padding: 10px 4px 20px;
  margin: -10px -4px -20px;
}
.product-carousel .swiper-slide {
  height: auto;
}

/* ===================== BENEFICIOS (banda plana, sin cartillas) ===================== */
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  justify-items: center;
}
@media (min-width: 768px) {
  .beneficios-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.beneficio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 175px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2b73;
  transition: transform 0.2s ease;
}
.beneficio-item:hover {
  transform: translateY(-3px);
}
.beneficio-item i {
  font-size: 38px;
  color: var(--inducomex-blue-dark);
  line-height: 1;
}

/* ===================== CHROME COMPARTIDO (header/footer) ===================== */
/* Reserva de altura para evitar salto de layout (CLS) mientras carga el partial */
#site-header {
  min-height: 128px;
}

.nav-link-active {
  color: var(--inducomex-blue);
  font-weight: 600;
  position: relative;
}

.nav-link-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--inducomex-blue);
  border-radius: 999px;
}

/* ===================== GRID PRODUCTOS (2 columnas en móvil) ===================== */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (min-width: 640px) {
  .grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 1024px) {
  .grid-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===================== TARJETA / IMAGEN ===================== */
.product-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #f3f4f6;
  overflow: hidden;
  border-radius: 1.25rem;
}

.product-image-wrapper img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pill-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* Botones flotantes (ficha/stock) que aparecen al hover sobre la imagen,
   solo en desktop -- en touch no hay hover, así que ahí quedan ocultos
   (la cartilla completa ya lleva al detalle con un tap). */
.product-card-hover-actions {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .product-card-hover-actions {
    display: flex;
  }
}
.product-card:hover .product-card-hover-actions {
  opacity: 1;
  transform: translateX(0);
}
.product-card-hover-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  color: var(--inducomex-blue-dark);
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}
.product-card-hover-btn:hover {
  background: var(--inducomex-blue);
  color: #fff;
}
.product-card-hover-btn::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.product-card-hover-btn:hover::after {
  opacity: 1;
}

.clamp-2,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.desc-fixed {
  min-height: auto;
}
@media (min-width: 768px) {
  .desc-fixed {
    min-height: 2.7em;
  }
}

/* ===================== NAV SECCIONES (sin scrollbars) ===================== */
#sectionNav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#sectionNav::-webkit-scrollbar {
  display: none;
}

/* ===================== ANIMACIONES ===================== */
@keyframes float-slow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.illustration-floating {
  animation: float-slow 9s ease-in-out infinite;
}

/* ===================== MARCAS ===================== */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .brands-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .brands-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.brand-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  padding: 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
  cursor: default;
}

.brand-card img {
  max-height: 34px;
  width: auto;
  filter: none;
  opacity: 1;
  transition: transform 0.16s ease;
}

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(4, 129, 242, 0.45);
  background-color: #ffffff;
}

.brand-card:hover img {
  transform: scale(1.03);
}

/* ===================== TESTIMONIOS / PROYECTOS ===================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===================== BOTÓN FLOTANTE WHATSAPP ===================== */
.whatsapp-floating {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
}

/* ===================== MEGA MENU ===================== */
.mega-menu {
  display: none;
}
.mega-menu.open {
  display: block;
}

.mm-col {
  padding: 10px 10px 8px;
  border-radius: 18px;
}
.mm-col:hover {
  background: #f8fafc;
}
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mm-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #64748b;
}
.mm-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--inducomex-blue);
  text-decoration: none;
}
.mm-all:hover {
  text-decoration: underline;
}
.mm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 14px;
  transition: background-color 0.15s ease;
  text-decoration: none;
  color: #0f172a;
}
.mm-item:hover {
  background: #eef2ff;
}
.mm-icon {
  height: 30px;
  width: 30px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.mm-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-name {
  font-size: 13px;
  font-weight: 600;
}
.mm-muted {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 8px;
}

/* Botones principales con más profundidad (degradado + sombra + lift),
   en vez de un color plano sin relieve. */
.add-to-cart-btn,
.btn-clear {
  background: linear-gradient(135deg, var(--inducomex-blue), var(--inducomex-blue-dark)) !important;
  box-shadow: 0 8px 18px rgba(4, 129, 242, 0.28);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    opacity 0.2s ease;
}
.add-to-cart-btn:hover,
.btn-clear:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(4, 129, 242, 0.34);
  filter: brightness(1.04);
}
.add-to-cart-btn:disabled {
  transform: none;
}

/* El botón "Añadir al carrito" de las cartillas solo aparece al pasar el
   cursor (cartilla más limpia en reposo), pero SOLO en pantallas con mouse
   -- en touch (celular) no existe hover, así que ahí se queda siempre
   visible para no bloquear la compra. Entra deslizándose desde abajo con
   una curva "overshoot" suave, no solo un fundido plano. */
@media (hover: hover) and (min-width: 768px) {
  .product-card-hover-reveal {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .product-card:hover .product-card-hover-reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
      opacity 0.22s ease,
      transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ===================== PRODUCT CARD ===================== */
.product-card {
  cursor: pointer;
  border-radius: 1.5rem;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
  border-color: var(--inducomex-blue);
}

/* Cada producto conserva su propia tarjeta (borde fino y definido),
   pero sin sombra difusa que parezca una segunda tarjeta debajo. */
.product-card-flat {
  border: 1px solid #edf0f4;
  box-shadow: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.product-card-flat:hover {
  transform: translateY(-5px);
  border-color: var(--inducomex-blue);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
}

/* Botón "ver todo" en pill: usado en encabezados de sección del home */
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--inducomex-blue);
  color: var(--inducomex-blue-dark);
  font-weight: 700;
  font-size: 13px;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.link-pill:hover {
  background: var(--inducomex-blue);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(4, 129, 242, 0.28);
}

/* ===================== HEADER RESPONSIVE ===================== */
@media (max-width: 767px) {
  header .grid {
    grid-template-columns: 1fr auto !important;
  }

  header img[alt="INDUCOMEX"] {
    height: 56px !important;
  }
}

/* ===================== HERO CONTROLS (compartido por carruseles del home) ===================== */
.hero-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0 1.25rem 1.1rem;
  margin-top: -1.4rem;
}
@media (min-width: 768px) {
  .hero-controls {
    padding: 0 2rem 1.25rem;
  }
}

.hero-arrow-btn {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(8, 15, 30, 0.4);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color 0.18s ease;
}
.hero-arrow-btn:hover {
  background: rgba(8, 15, 30, 0.6);
}


/* ===================== OFERTAS HERO (carrusel promocional, home) ===================== */
.offers-hero {
  position: relative;
  background: linear-gradient(135deg, #0b3a66 0%, #0b6fcc 55%, var(--inducomex-blue) 100%);
  overflow: hidden;
}

.offers-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.offers-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.offers-hero-blob-1 {
  width: 300px;
  height: 300px;
  top: -110px;
  left: -80px;
  background: radial-gradient(circle, #7dd3fc, transparent 70%);
}
.offers-hero-blob-2 {
  width: 260px;
  height: 260px;
  bottom: -110px;
  right: -80px;
  background: radial-gradient(circle, #ffffff, transparent 70%);
}

.offer-hero-slide {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  padding: 1.75rem 1.5rem;
}
@media (min-width: 640px) {
  .offer-hero-slide {
    grid-template-columns: 1.15fr 0.85fr;
    padding: 2rem;
  }
}
@media (min-width: 1024px) {
  .offer-hero-slide {
    padding: 2.25rem 2.5rem;
  }
}

/* Slide "banner": la imagen subida en el admin (Hero de Ofertas) cubre
   TODO el slide, sin la grilla de texto/foto -- solo los botones flotan
   abajo, como un banner promocional real.

   La proporción está fijada con aspect-ratio a la medida EXACTA del banner
   de referencia (1921 x 541 px, banner horizontal de ofertas) para que el
   contenedor siempre tenga esa forma en escritorio, sin importar cuánto
   contenido haya arriba/abajo -- así ninguna imagen futura queda deformada
   ni deja franjas vacías. object-fit: cover recorta el sobrante si una
   imagen futura no calza exacto en esa proporción (más seguro que "fill",
   que sí deformaría la imagen si el tamaño no es idéntico). */
.offer-hero-slide-banner {
  display: block;
  padding: 0;
  margin: 0;
  min-height: 0;
  aspect-ratio: 1921 / 541;
  border-radius: inherit;
  overflow: hidden;
}
/* En móvil una franja de 3.55:1 queda demasiado baja (texto/botones
   diminutos): se usa una proporción más alta reservada para pantallas
   chicas, y la imagen se sigue recortando con cover -- no se deforma. */
@media (max-width: 767px) {
  .offer-hero-slide-banner {
    aspect-ratio: 16 / 9;
  }
}
.offer-hero-banner-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.offer-hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 15, 30, 0.75) 0%, rgba(6, 15, 30, 0) 42%);
}
.offer-hero-banner-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
}
@media (min-width: 768px) {
  .offer-hero-banner-actions {
    padding: 2rem;
  }
}
/* Igual que en las cartillas de producto: en escritorio los botones del
   hero solo aparecen al pasar el cursor por encima del banner, con la
   misma entrada animada desde abajo (no un fundido plano). En touch se
   quedan siempre visibles porque no hay hover. */
@media (hover: hover) and (min-width: 768px) {
  .offer-hero-banner-actions {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .offer-hero-slide-banner:hover .offer-hero-banner-actions {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

.offer-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.offer-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.offer-hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
}

.offer-hero-category {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer-hero-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
  max-width: 26rem;
}
@media (min-width: 768px) {
  .offer-hero-title {
    font-size: 30px;
  }
}

.offer-hero-subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  font-weight: 500;
}

.offer-hero-price-panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  width: fit-content;
  margin-top: 0.15rem;
}
.offer-hero-price-new {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.offer-hero-price-old {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}
.offer-hero-savings {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

.offer-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.offer-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
}
.offer-hero-trust i {
  color: #7dd3fc;
  font-size: 11px;
}

.offer-hero-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.offer-hero-btn-outline,
.offer-hero-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.offer-hero-btn-outline {
  background: #fff;
  color: var(--inducomex-blue-dark);
}
.offer-hero-btn-outline:hover {
  transform: translateY(-2px);
}
.offer-hero-btn-solid {
  background: linear-gradient(135deg, var(--inducomex-blue), var(--inducomex-blue-dark));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.offer-hero-btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(4, 129, 242, 0.35);
}
.offer-hero-btn-solid:disabled {
  transform: none;
}

.offer-hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer-hero-image {
  max-height: 220px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
}
@media (min-width: 768px) {
  .offer-hero-image {
    max-height: 260px;
  }
}

.offer-hero-discount-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #dc2626);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.35);
  transform: rotate(8deg);
}
.offer-hero-discount-stamp small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Los controles flotan ENCIMA de la imagen (esquina inferior), en vez de
   empujar una franja azul debajo -- así la imagen queda pegada al borde
   inferior del hero sin ningún margen visible. */
.offers-hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  margin-top: 0;
  padding: 0 1.25rem;
  justify-content: center;
}
@media (min-width: 768px) {
  .offers-hero-controls {
    bottom: 18px;
    padding: 0 2rem;
  }
}
.offers-hero-pagination.swiper-pagination {
  position: static !important;
  display: flex;
  gap: 0.4rem;
}
.offers-hero .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.offers-hero .swiper-pagination-bullet-active {
  background: #fff;
  width: 22px;
}

/* ===================== CATEGORÍAS: CARRUSEL DE CÍRCULOS (home) ===================== */
/* Mismo motivo que .product-carousel: reserva espacio para que el
   levantamiento + sombra del círculo al hover no se recorten contra el
   overflow:hidden que Swiper necesita para el carrusel horizontal. */
.categorySwiper {
  padding: 10px 4px 12px;
  margin: -10px -4px -12px;
}
.cat-circle-slide {
  display: flex;
  justify-content: center;
}

.cat-circle-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  width: 100%;
}

/* Círculo grande con anillo grueso de color, estilo tienda.sonepar.pe:
   una sola circunferencia con borde de color (no una foto chica flotando
   sobre un glow). El wrapper .cat-circle-glow solo controla el tamaño
   total y el levantamiento al hover. */
.cat-circle-glow {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
@media (min-width: 768px) {
  .cat-circle-glow {
    width: 170px;
    height: 170px;
  }
}
@media (min-width: 1024px) {
  .cat-circle-glow {
    width: 176px;
    height: 176px;
  }
}
.cat-circle-link:hover .cat-circle-glow {
  transform: translateY(-4px);
}

.cat-circle-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #d3f3ff;
  border: 10px solid #d3f3ff;
  box-shadow: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  font-size: 32px;
  color: var(--inducomex-blue);
}
@media (min-width: 768px) {
  .cat-circle-photo {
    border-width: 14px;
    font-size: 40px;
  }
}
.cat-circle-link:hover .cat-circle-photo {
  border-color: #b5ebfe;
  box-shadow: 0 16px 32px rgba(4, 129, 242, 0.22);
}

.cat-circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cat-circle-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--inducomex-blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .cat-circle-label {
    font-size: 13.5px;
  }
}

.cat-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  font-size: 14px;
}
.cat-arrow-btn:hover {
  color: var(--inducomex-blue);
  border-color: var(--inducomex-blue);
}
.cat-arrow-left {
  left: 0;
}
.cat-arrow-right {
  right: 0;
}