@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=Manrope:wght@400;500;600;700;800&family=Anton&family=Inter:wght@500;600;700;800&display=swap');

html {
  scroll-behavior: smooth;
}

:root {
  /* Opcion 3: "Lavanda Moderno" - violeta con caracter, vivo pero equilibrado */
  --belt-purple: #8B5CF6;         /* acento principal (botones, nav, iconos, links) */
  --belt-purple-strong: #7C3AED;  /* hover del acento */
  --belt-purple-deep: #2D1B4E;    /* texto principal / titulos */
  --belt-purple-deep-rgb: 45, 27, 78;
  --belt-purple-rgb: 139, 92, 246;

  /* Bordes y elementos secundarios */
  --belt-lavender: #E4DAF7;
  --belt-lavender-soft: #F5F3F7;
  --belt-lavender-rgb: 228, 218, 247;

  /* Fondo general y tarjetas */
  --belt-bg: #EAE4F2;
  --belt-bg-rgb: 234, 228, 242;
  --belt-card: #FFFFFF;
  --belt-card-rgb: 255, 255, 255;
  --belt-card-alt: #F2EDF9;

  /* Acento secundario / CTA - ambar, contraste complementario */
  --belt-gold: #F59E0B;
  --belt-gold-soft: #FBBF24;
  --belt-gold-rgb: 245, 158, 11;

  /* Verde de resalte (mismo tono que "Personalizar" en el navbar) */
  --belt-verde: #10B981;
  --belt-verde-fuerte: #0f9c6f;
  --belt-verde-rgb: 16, 185, 129;

  /* Texto */
  --belt-text: var(--belt-purple-deep);
  --belt-text-muted: #665C7A;
  --belt-placeholder: #948B9F;
}

/* ===== Animaciones Globales ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Version sin transform: usarla en <body>/.pagina-belt. Un transform activo en un
   ancestro (aunque termine en translateY(0)) crea un "containing block" nuevo y
   rompe el position:fixed de modales, toasts, etc, calculandolos respecto al alto
   total de la pagina en vez de respecto a la pantalla visible. */
@keyframes fadeInSinTransform {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes floatElement {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.pagina-belt * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
}

.pagina-belt h1,
.pagina-belt h2,
.pagina-belt h3,
.pagina-belt h4 {
  color: #000000;
}

.pagina-belt {
  background: linear-gradient(135deg, #EAE4F2 0%, #F5F3F7 100%);
  background-attachment: fixed;
  color: var(--belt-text);
  min-height: 100vh;
  animation: fadeInSinTransform 0.4s ease-out forwards;
}

/* ===== Navbar ===== */
.navbar-belt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 48px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.08);
  background: rgba(var(--belt-card-rgb), 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease;
}

/* Oculta el navbar mientras el catálogo blanco (banner 3) está en pantalla; reaparece
   apenas se sube o se baja fuera de esa sección (ver observador en marca-destacado.js) */
.navbar-belt.navbar-oculto {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.marca-belt {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.marca-belt:hover {
  transform: scale(1.02);
}

.marca-icono {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.marca-icono-limpio {
  border-radius: 0;
  border: none;
  background: none;
  object-fit: contain;
  width: 52px;
  height: 52px;
}

.marca-texto {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--belt-purple);
  font-style: italic;
}

.marca-acento {
  color: var(--belt-gold);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  color: #000000;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  transition: color 0.25s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--belt-gold);
  transition: width 0.25s ease;
}

.nav-links a:hover {
  color: var(--belt-gold);
}

.nav-links a.enlace-personalizar-resaltado {
  background: rgba(var(--belt-verde-rgb), 0.12);
  color: var(--belt-verde-fuerte);
  padding: 6px 14px;
  border-radius: 999px;
  animation: pulseGlow 2s infinite;
}

.nav-links a.enlace-personalizar-resaltado:hover {
  background: rgba(var(--belt-verde-rgb), 0.2);
  color: var(--belt-verde-fuerte);
}

.nav-links a.enlace-personalizar-resaltado::after {
  display: none;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-derecha {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.icono-carrito {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(45, 27, 78, 0.2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--belt-text);
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.icono-carrito:hover {
  border-color: var(--belt-gold);
  transform: scale(1.05);
}

.icono-carrito.enlace-activo {
  border-color: var(--belt-purple);
  color: var(--belt-purple);
}

.badge-carrito {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--belt-gold);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--belt-card);
}

.icono-usuario {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(45, 27, 78, 0.2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--belt-text);
  text-decoration: none;
  transition: all 0.25s ease;
}

.icono-usuario:hover {
  border-color: var(--belt-gold);
  transform: scale(1.05);
}

.foto-icono-cuenta {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.menu-cuenta {
  position: relative;
}

.dropdown-cuenta {
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.1);
  border-radius: 12px;
  padding: 14px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  z-index: 20;
  animation: fadeIn 0.2s ease-out;
}

.correo-cuenta {
  font-size: 12px;
  color: var(--belt-text-muted);
  padding: 4px 10px 10px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.08);
  margin-bottom: 6px;
  word-break: break-all;
}

.dropdown-cuenta a {
  color: var(--belt-purple-deep);
  text-decoration: none;
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-cuenta a:hover {
  background: rgba(45, 27, 78, 0.06);
  color: var(--belt-gold);
  padding-left: 14px;
}

.dropdown-cuenta .cerrar-sesion-cuenta {
  color: #c2585f;
}

.dropdown-cuenta .cerrar-sesion-cuenta:hover {
  background: rgba(224, 102, 102, 0.1);
  color: #e06666;
}

/* ===== Hero (inicio) ===== */
.hero-belt {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  padding: 64px 48px 40px;
  align-items: center;
  animation: fadeIn 0.6s ease-out;
}

.hero-texto h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 32px;
}

.hero-stats span {
  font-size: 12px;
  color: var(--belt-text-muted);
}

.acento-purpura {
  color: var(--belt-purple);
}

.acento-dorado {
  color: var(--belt-gold);
}

.hero-botones {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
}

.boton-dorado {
  background: var(--belt-gold);
  color: var(--belt-purple-deep);
  padding: 13px 26px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}

.boton-dorado:hover {
  background: var(--belt-gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Variante para confirmaciones de acciones destructivas (eliminar, cancelar) */
.boton-dorado.boton-peligro {
  background: #c2585f;
  color: #fff;
  box-shadow: 0 4px 15px rgba(194, 88, 95, 0.3);
}

.boton-dorado.boton-peligro:hover {
  background: #a8464d;
  box-shadow: 0 6px 20px rgba(194, 88, 95, 0.45);
}

/* Variante verde resaltada (mismo verde y mismo "brillo" que el enlace
   "Personalizar" del navbar), usada en el CTA "Comenzar a vender" */
.boton-dorado.boton-vender-resaltado {
  background: var(--belt-verde);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(var(--belt-verde-rgb), 0.35);
  animation: pulseGlow 2s infinite;
}

.boton-dorado.boton-vender-resaltado:hover {
  background: var(--belt-verde-fuerte);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--belt-verde-rgb), 0.5);
}

.boton-outline-purpura {
  background: transparent;
  color: var(--belt-purple);
  border: 1px solid var(--belt-purple);
  padding: 13px 26px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s ease;
}

.boton-outline-purpura:hover {
  background: rgba(139, 92, 246, 0.12);
  color: var(--belt-text);
  transform: translateY(-2px);
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stats strong {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--belt-gold);
}

/* ===== Hero estilo Apple (inicio) ===== */
.hero-belt-apple {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 48px 0;
  gap: 0;
}

.hero-texto-apple {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-belt-mono .hero-texto-apple h1 {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  color: #000000;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.hero-belt-mono .hero-subtitulo-apple {
  font-size: 20px;
  color: #333333;
  margin-bottom: 32px;
}

.hero-botones-apple {
  justify-content: center;
  margin-bottom: 8px;
}

.hero-producto-flotante-apple {
  width: 100%;
  margin-top: 12px;
  position: relative;
  min-height: 260px;
  background: transparent;
}

.imagen-flotante-apple {
  width: 340px;
  background: transparent;
}

@keyframes flotarCentrado {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-14px); }
}

.imagen-carrusel-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease-in-out;
  animation: flotarCentrado 4.5s ease-in-out infinite;
}

.imagen-carrusel-hero.activa {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .hero-producto-flotante-apple { min-height: 190px; }
}

.hero-stats-apple {
  justify-content: center;
  gap: 56px;
  padding: 8px 48px 56px;
  text-align: center;
}

.hero-stats-apple > div {
  align-items: center;
}

.hero-belt-mono .hero-stats-apple strong {
  color: #111111;
}

@media (max-width: 900px) {
  .hero-texto-apple h1 { font-size: 42px; }
  .hero-subtitulo-apple { font-size: 16px; }
  .imagen-flotante-apple { width: 240px; }
  .hero-stats-apple { gap: 28px; flex-wrap: wrap; padding: 8px 24px 40px; }
}

/* ===== Banners promocionales (estilo Apple, secciones destacadas) ===== */
.banner-belt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 64px 48px;
  border-top: 1px solid rgba(45, 27, 78, 0.08);
  overflow: hidden;
}

.banner-personalizar {
  background: linear-gradient(135deg, var(--belt-lavender-soft) 0%, var(--belt-lavender) 100%);
  padding: 0;
  align-items: stretch;
}

.banner-personalizar .banner-belt-texto {
  padding: 40px 24px 40px 48px;
}

.banner-personalizar .banner-belt-imagen {
  height: 100%;
  min-height: 480px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-personalizar .imagen-banner-estatica {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
}

@media (max-width: 860px) {
  .banner-personalizar .banner-belt-texto {
    padding: 32px 24px 20px;
  }
  .banner-personalizar .banner-belt-imagen {
    min-height: 300px;
    max-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
}

.banner-belt-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 460px;
}

.banner-belt-texto h2 {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  color: #000000;
  margin-bottom: 16px;
}

.banner-belt-texto p {
  font-size: 15px;
  color: var(--belt-text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.banner-belt-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-banner {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(45, 27, 78, 0.18);
  animation: flotar 5s ease-in-out infinite;
}

/* Foto recortada (fondo transparente): sin flotado, sin marco ni sombra rectangular,
   ocupa el máximo posible de su columna dentro del banner */
.imagen-banner-estatica {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

@media (max-width: 860px) {
  .banner-belt {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 48px 24px;
  }
  .banner-belt-texto {
    align-items: center;
    max-width: 100%;
    justify-self: center;
  }
}

.hero-categorias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tarjeta-categoria {
  position: relative;
  background-color: var(--belt-card-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 16px;
  min-height: 150px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-categoria::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(228, 218, 247, 0.75) 0%, rgba(228, 218, 247, 0.15) 45%);
  transition: opacity 0.3s ease;
}

.tarjeta-categoria span {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: var(--belt-text);
  text-transform: uppercase;
  font-weight: 600;
}

.tarjeta-categoria:hover {
  border-color: var(--belt-gold);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.tarjeta-categoria:hover::before {
  background: linear-gradient(180deg, rgba(228, 218, 247, 0.6) 0%, rgba(228, 218, 247, 0.05) 45%);
}

/* ===== Banda "empieza ahora" ===== */
.empieza-ahora {
  display: flex;
  justify-content: center;
  padding: 0 48px 56px;
}

.boton-empieza {
  background: var(--belt-lavender);
  color: var(--belt-purple-deep);
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 20px;
  padding: 18px 60px;
  border-radius: 40px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.boton-empieza:hover {
  background: var(--belt-card);
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(45, 27, 78, 0.25);
}

/* ===== Página "Quiénes somos" ===== */

/* Color de fondo compartido por todos los banners de esta página (igual al resto del sitio) */
:root {
  --belt-bg-quienes: var(--belt-bg);
  /* Tono ligeramente más oscuro que --belt-bg, dentro de la misma paleta,
     usado solo detrás de las tarjetas flotantes para que resalten sin romper el estilo */
  --belt-bg-quienes-tarjetas: #d7cce9;
}

/* ----- Tema negro exclusivo de la página "Quiénes somos" ----- */
body.pagina-quienes-somos-negra {
  --belt-bg-quienes: #000000;
  --belt-bg-quienes-tarjetas: #141414;
  background: #000000;
}

body.pagina-quienes-somos-negra h1,
body.pagina-quienes-somos-negra h2,
body.pagina-quienes-somos-negra h3,
body.pagina-quienes-somos-negra h4 {
  color: #ffffff;
}

body.pagina-quienes-somos-negra .navbar-belt {
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.pagina-quienes-somos-negra .nav-links a {
  color: #ffffff;
}

body.pagina-quienes-somos-negra .nav-links a.enlace-personalizar-resaltado {
  color: var(--belt-verde);
}

body.pagina-quienes-somos-negra .icono-usuario,
body.pagina-quienes-somos-negra .icono-carrito {
  color: #ffffff;
}

body.pagina-quienes-somos-negra .banner-exclusividad h2 {
  color: #ffffff;
}

/* Palabra "About" junto al logo, solo en esta página */
.marca-belt-grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.texto-about-belt {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ----- Banner de inicio a pantalla completa (estilo editorial) ----- */
.banner-inicio-quienes {
  position: relative;
  background: #000000;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  padding: 40px 56px;
  overflow: hidden;
}

/* Logo Belt en gris, muy difuminado, en la parte derecha del banner de inicio.
   Aparece con una animación justo cuando la palabra rotativa llega a "BELT". */
.logo-fondo-inicio-quienes {
  position: absolute;
  right: 4%;
  top: 50%;
  width: min(38vw, 520px);
  filter: grayscale(1) brightness(1.8) blur(6px);
  opacity: 0;
  transform: translateY(-46%) scale(0.92);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.logo-fondo-inicio-quienes.logo-fondo-visible {
  opacity: 0.16;
  transform: translateY(-50%) scale(1);
}

.banner-inicio-quienes-texto {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .logo-fondo-inicio-quienes {
    width: 60vw;
    right: -6%;
  }
}

.banner-inicio-quienes-texto {
  max-width: 1100px;
}

.titulo-inicio-quienes {
  font-family: 'Anton', 'Arial Black', 'Helvetica Neue', sans-serif;
  font-weight: 900;
  color: #ffffff;
  -webkit-text-stroke: 1.5px #ffffff;
  font-size: clamp(56px, 12.5vw, 158px);
  line-height: 0.88;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0;
}

.linea-inicio-quienes {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.linea-inicio-quienes.visible-quienes {
  opacity: 1;
  transform: translateY(0);
}

.palabra-rotativa {
  display: inline-block;
  color: #ffffff;
  transition: opacity 0.1s ease;
}

.palabra-rotativa.cambiando {
  opacity: 0;
}

.palabra-rotativa.palabra-final {
  color: var(--belt-gold);
  -webkit-text-stroke-color: var(--belt-gold);
}

.subtitulo-inicio-quienes {
  margin-top: 28px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 700px) {
  .banner-inicio-quienes {
    padding: 32px 24px;
  }
}

/* Banner 1: galería fotográfica (filmstrip estilo Apple) */
.banner-galeria-quienes {
  position: relative;
  background: var(--belt-bg-quienes);
  padding: 64px 0 0;
  overflow: hidden;
}

.banner-galeria-quienes::before,
.banner-galeria-quienes::after {
  content: "";
  position: absolute;
  top: 64px;
  height: 360px;
  width: 200px;
  max-width: 25%;
  z-index: 2;
  pointer-events: none;
}

.banner-galeria-quienes::before {
  left: 0;
  background: linear-gradient(90deg, var(--belt-bg-quienes) 15%, rgba(234, 228, 242, 0));
}

.banner-galeria-quienes::after {
  right: 0;
  background: linear-gradient(270deg, var(--belt-bg-quienes) 15%, rgba(234, 228, 242, 0));
}

@media (max-width: 900px) {
  .banner-galeria-quienes::before,
  .banner-galeria-quienes::after {
    width: 90px;
  }
}

.galeria-quienes-viewport {
  overflow: hidden;
  width: 100%;
}

.galeria-quienes-fila {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 0 32px;
  animation: galeria-quienes-desplazar 32s linear infinite;
}

.galeria-quienes-fila:hover {
  animation-play-state: paused;
}

@keyframes galeria-quienes-desplazar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.galeria-quienes-marco {
  flex: 0 0 auto;
  width: 300px;
  height: 360px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(45, 27, 78, 0.18);
  background: var(--belt-card-alt);
}

.galeria-quienes-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 900px) {
  .galeria-quienes-marco { width: 210px; height: 260px; }
  .galeria-quienes-fila { animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-quienes-fila { animation: none; }
}

/* Texto editorial debajo de la galería, estilo "Apple at Work" */
.banner-galeria-quienes-texto {
  max-width: 760px;
  margin: 52px 0 0;
  padding: 0 40px 64px;
}

.banner-galeria-quienes-texto h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 18px;
}

.banner-galeria-quienes-texto p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 620px;
}

@media (max-width: 700px) {
  .banner-galeria-quienes-texto { padding: 0 24px 48px; }
}

/* Banner 2: tríptico fotográfico de misión y visión (estilo editorial B&N) */
.banner-triptico-quienes {
  padding: 64px 40px;
  background: var(--belt-bg-quienes-tarjetas);
}

.triptico-quienes-grid {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.tarjeta-triptico-quienes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
}

.tarjeta-triptico-foto {
  position: relative;
  aspect-ratio: 3 / 3.6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.tarjeta-triptico-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(100%);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.tarjeta-triptico-quienes:hover .tarjeta-triptico-foto img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.tarjeta-triptico-texto {
  padding: 26px 24px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}

.tarjeta-triptico-texto h2 {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #ffffff;
  margin-bottom: 10px;
}

.tarjeta-triptico-texto p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

@media (max-width: 900px) {
  .triptico-quienes-grid { flex-direction: column; }
  .tarjeta-triptico-foto { aspect-ratio: 3 / 2.4; }
}

/* Banner 3: video "Exclusividad" */
.banner-exclusividad {
  background: var(--belt-bg-quienes);
  padding: 64px 48px;
}

.banner-exclusividad h2 {
  color: #000000;
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

.video-exclusividad-caja {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  line-height: 0;
}

.video-exclusividad-caja video {
  width: 100%;
  display: block;
}

.etiqueta-video-exclusividad {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 2;
}

.btn-pausa-video {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
}

.btn-pausa-video:hover {
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .banner-exclusividad { padding: 48px 20px; }
}

/* ===== Contenedor centrado genérico (login, registro, paneles) ===== */
.contenedor-belt {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.tarjeta-belt {
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 20px;
  padding: 40px 34px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.4s ease-out;
}

.tarjeta-belt .avatar-container {
  font-size: 46px;
  color: var(--belt-gold);
  margin-bottom: 8px;
  animation: floatElement 3s ease-in-out infinite;
}

.tarjeta-belt h1,
.tarjeta-belt h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin-bottom: 6px;
}

.tarjeta-belt > p {
  color: var(--belt-text-muted);
  font-size: 13.5px;
  margin-bottom: 24px;
}

.formulario-belt {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.formulario-belt label {
  font-size: 12.5px;
  color: var(--belt-text-muted);
  margin-top: 14px;
}

.formulario-belt input,
.formulario-belt select {
  width: 100%;
  background: rgba(45, 27, 78, 0.05);
  border: 1px solid rgba(45, 27, 78, 0.12);
  border-radius: 10px;
  color: var(--belt-text);
  padding: 11px 38px;
  font-size: 14px;
  transition: all 0.25s ease;
}

.formulario-belt input::placeholder {
  color: var(--belt-text-muted);
}

.formulario-belt input:focus,
.formulario-belt select:focus {
  outline: none;
  border-color: var(--belt-purple);
  background: rgba(45, 27, 78, 0.08);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.formulario-belt button {
  margin-top: 22px;
  width: 100%;
  border: none;
  cursor: pointer;
}

.enlace-cambio {
  margin-top: 18px;
  font-size: 13px;
  color: var(--belt-text-muted);
}

.enlace-cambio a {
  color: var(--belt-gold);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.enlace-cambio a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.enlace-volver-belt {
  display: inline-block;
  margin-top: 18px;
  color: var(--belt-text-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.enlace-volver-belt:hover {
  color: var(--belt-text);
}

#mensaje {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.lista-permisos {
  text-align: left;
  margin-top: 8px;
  padding-left: 20px;
  color: var(--belt-purple-deep);
}

.lista-permisos li {
  padding: 7px 0;
  font-size: 14px;
}

.lista-permisos a {
  color: var(--belt-purple-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lista-permisos a:hover {
  color: var(--belt-gold);
  text-decoration: underline;
}

.input-contenedor {
  position: relative;
  margin-top: 5px;
}

.input-contenedor input {
  padding-left: 38px;
  padding-right: 38px;
}

.icon-input {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--belt-text-muted);
  font-size: 14px;
  transition: color 0.2s ease;
}

.input-contenedor:focus-within .icon-input {
  color: var(--belt-purple);
}

.icon-ojo {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--belt-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s ease;
}

.icon-ojo:hover {
  color: var(--belt-text);
}

/* ===== Gestión de productos ===== */
.seccion-productos {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  padding: 32px 48px 56px;
  align-items: start;
}

.tarjeta-form-producto {
  max-width: none;
  text-align: left;
  position: sticky;
  top: 90px;
}

.tarjeta-form-producto h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 6px;
}

.oculto-belt {
  display: none !important;
}

#btn-cancelar-edicion {
  margin-top: 10px;
}

.ayuda-form {
  font-size: 11.5px;
  color: var(--belt-text-muted);
  margin-top: 4px;
}

.tarjeta-tabla-productos {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: none;
  text-align: left;
  padding: 30px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.tarjeta-tabla-productos h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 18px;
}

.tabla-productos {
  width: 100%;
  border-collapse: collapse;
}

.contenedor-tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-productos th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--belt-text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.1);
  vertical-align: middle;
}

.tabla-productos td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.06);
  transition: background 0.2s ease;
  vertical-align: middle;
}

.tabla-productos tr:hover td {
  background: rgba(45, 27, 78, 0.02);
}

/* NOTA: nunca poner display:flex/inline-flex directamente sobre el <td>
   (.acciones-producto se usa como clase del <td>). Un <td> con display:flex
   deja de comportarse como celda de tabla: el navegador genera una celda
   vacía en su lugar y dibuja el contenido real "flotando" fuera de la fila,
   desalineado del resto de columnas. Por eso aquí NO se usa flex en el <td>;
   solo se centra con text-align y los botones se alinean como inline-flex
   (que sí puede convivir dentro de una celda normal).
*/
.acciones-producto button {
  background: rgba(45, 27, 78, 0.06);
  border: 1px solid rgba(45, 27, 78, 0.12);
  color: var(--belt-purple-deep);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.acciones-producto button + button {
  margin-left: 8px;
}

.acciones-producto .btn-editar:hover {
  border-color: var(--belt-gold);
  color: var(--belt-gold);
  background: rgba(245, 158, 11, 0.1);
  transform: scale(1.05);
}

.acciones-producto .btn-eliminar:hover {
  border-color: #e06666;
  color: #e06666;
  background: rgba(224, 102, 102, 0.1);
  transform: scale(1.05);
}

.miniatura-producto {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(45, 27, 78, 0.1);
}

.sin-foto {
  font-size: 11px;
  color: var(--belt-text-muted);
}

.preview-imagen {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
  border: 1px solid rgba(45, 27, 78, 0.12);
  animation: fadeIn 0.3s ease;
}

/* Selector de archivos personalizado: oculta el input nativo (y su botón
   "Seleccionar archivo" con el estilo por defecto del navegador) y lo
   reemplaza por un botón propio, coherente con el resto del formulario. */
.campo-archivo {
  position: relative;
  margin-top: 2px;
}

.campo-archivo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.campo-archivo-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(45, 27, 78, 0.05);
  border: 1.5px dashed rgba(139, 92, 246, 0.4);
  border-radius: 10px;
  color: var(--belt-purple);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.campo-archivo-boton:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--belt-purple);
}

.campo-archivo-input:focus-visible + .campo-archivo-boton {
  outline: none;
  border-color: var(--belt-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.campo-archivo-icono {
  flex-shrink: 0;
  display: flex;
}

.campo-archivo-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--belt-text-muted);
  font-weight: 500;
}

.campo-archivo-listo .campo-archivo-boton {
  border-style: solid;
  border-color: var(--belt-verde);
  background: rgba(16, 185, 129, 0.08);
}

.campo-archivo-listo .campo-archivo-texto {
  color: var(--belt-purple-deep);
}

.preview-imagen-redonda {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.separador-form {
  border: none;
  border-top: 1px solid rgba(45, 27, 78, 0.1);
  margin: 18px 0 4px;
}

/* ===== Modal genérico ===== */
.overlay-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.modal-belt {
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.1);
  border-radius: 18px;
  padding: 32px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-belt h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  margin-bottom: 10px;
}

.modal-belt p {
  color: var(--belt-text-muted);
  font-size: 13.5px;
  margin-bottom: 22px;
  line-height: 1.5;
}

.modal-acciones {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-acciones a,
.modal-acciones button {
  flex: 1;
}

/* ===== Toast (mensajes flotantes) ===== */
.toast-belt {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.12);
  border-left: 4px solid #7ed957;
  color: var(--belt-text);
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 13.5px;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 320px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.toast-belt.toast-error {
  border-left-color: #e06666;
}

.toast-belt.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
  .seccion-productos { grid-template-columns: 1fr; padding: 24px 20px 40px; }
  .tarjeta-form-producto { position: static; }
}

/* ===== Catálogo de solo lectura (empleado) ===== */
.contenedor-catalogo {
  padding: 32px 48px 56px;
}

.tarjeta-catalogo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: none;
  text-align: left;
  padding: 30px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.tarjeta-catalogo h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 6px;
}

.subtitulo-catalogo {
  color: var(--belt-text-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.total-ventas {
  text-align: right;
  margin-top: 18px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--belt-gold);
}

/* ===== Inventario ===== */
.input-stock {
  width: 70px;
  background: rgba(45, 27, 78, 0.05);
  border: 1px solid rgba(45, 27, 78, 0.12);
  border-radius: 8px;
  color: var(--belt-text);
  padding: 6px 8px;
  font-size: 14px;
  margin-right: 8px;
  transition: border-color 0.2s ease;
}

.input-stock:focus {
  outline: none;
  border-color: var(--belt-purple);
}

.input-stock.stock-bajo {
  border-color: #e0a666;
}

.aviso-stock-bajo {
  font-size: 11px;
  color: #e0a666;
}

/* ===== Reportes ===== */
.grid-reportes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:  20px;
  padding: 32px 48px 56px;
}

.barra-rango-reportes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.etiqueta-rango-reportes {
  font-size: 13px;
  font-weight: 600;
  color: var(--belt-text-muted);
  margin-right: 4px;
}

.celda-stock-bajo {
  color: #dc2626;
  font-weight: 700;
}

.tarjeta-reporte {
  max-width: none;
  text-align: left;
  padding: 26px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.tarjeta-reporte:hover {
  transform: translateY(-3px);
}

.tarjeta-reporte h2 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  margin-bottom: 6px;
}

.tarjeta-reporte-numero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.numero-grande {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  color: var(--belt-gold);
  margin-top: 10px;
}

/* ===== Gráfica de ventas (línea/área interactiva estilo Shopify) ===== */
.tarjeta-reporte-ancha {
  grid-column: 1 / -1;
}

.reporte-grafica-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 4px;
}

.reporte-grafica-header-total {
  text-align: right;
}

.reporte-grafica-etiqueta {
  display: block;
  font-size: 12px;
  color: var(--belt-text-muted);
  margin-bottom: 2px;
}

.reporte-grafica-total {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--belt-purple);
}

.contenedor-grafica-lineas {
  position: relative;
  width: 100%;
  margin-top: 18px;
}

.grafica-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.grafica-linea-base {
  stroke: rgba(var(--belt-purple-deep-rgb), 0.08);
  stroke-width: 1;
}

.grafica-eje-texto {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  fill: var(--belt-text-muted);
}

.grafica-area {
  fill: url(#gradienteVentas);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.grafica-area.cargada {
  opacity: 0.9;
}

.grafica-svg.interactuando .grafica-area {
  opacity: 1;
}

.grafica-linea {
  fill: none;
  stroke: var(--belt-purple);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.2s ease, stroke-dashoffset 1.1s ease;
}

.grafica-svg.interactuando .grafica-linea {
  stroke-width: 4;
}

.grafica-crosshair {
  stroke: var(--belt-purple);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.grafica-punto-halo {
  fill: rgba(var(--belt-purple-rgb), 0.18);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.grafica-punto {
  fill: #FFFFFF;
  stroke: var(--belt-purple);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.grafica-crosshair.activo {
  opacity: 1;
}

.grafica-punto.activo {
  opacity: 1;
  transform: scale(1);
}

.grafica-punto-halo.activo {
  opacity: 1;
  animation: graficaHaloPulso 1.15s ease-out infinite;
}

@keyframes graficaHaloPulso {
  0% { transform: scale(0.4); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

.grafica-overlay {
  fill: transparent;
  cursor: crosshair;
}

.grafica-tooltip {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  background: var(--belt-purple-deep);
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-14px) scale(0.9);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}

.grafica-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-22px) scale(1);
}

.grafica-tooltip .grafica-tooltip-fecha {
  display: block;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  margin-bottom: 2px;
}

.grafica-tooltip .grafica-tooltip-valor {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: var(--belt-gold-soft);
}

.grafica-sin-datos {
  text-align: center;
  font-size: 13px;
  color: var(--belt-text-muted);
  margin-top: 10px;
}

/* ===== Gráfica de barras (productos más vendidos) ===== */
.contenedor-grafica-barras {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.barra-producto-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.barra-producto-nombre {
  width: 38%;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--belt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-producto-pista {
  flex: 1;
  height: 18px;
  background: var(--belt-lavender-soft);
  border-radius: 999px;
  overflow: hidden;
}

.barra-producto-relleno {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--belt-gold-soft), var(--belt-gold));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, transform 0.2s ease;
  transform-origin: left center;
}

.barra-producto-fila:hover .barra-producto-relleno {
  filter: brightness(1.1);
  transform: scaleY(1.15);
}

.barra-producto-valor {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--belt-text);
}

@media (max-width: 900px) {
  .grid-reportes { padding: 24px 20px 40px; }
  .contenedor-catalogo { padding: 24px 20px 40px; }
  .reporte-grafica-header-total { text-align: left; }
  .barra-producto-nombre { width: 34%; }
}

/* ===== Tienda de productos (cliente) ===== */
.contenedor-tienda {
  padding: 40px 48px 56px;
}

.contenedor-tienda h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin-bottom: 6px;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.tarjeta-producto {
  display: block;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.tarjeta-producto:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.etiqueta-categoria {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--belt-gold);
  margin-bottom: 10px;
}

.foto-tarjeta-producto {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
  background: var(--belt-lavender);
}

.tarjeta-producto:hover .foto-tarjeta-producto {
  transform: scale(1.03);
}

.foto-tarjeta-vacia {
  background: var(--belt-lavender);
  border: 1px solid rgba(45, 27, 78, 0.08);
}

.tarjeta-resaltada {
  border-color: var(--belt-gold);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4);
}

.tarjeta-producto h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  margin-bottom: 8px;
}

.descripcion-producto {
  color: var(--belt-text-muted);
  font-size: 13px;
  line-height: 1.5;
  min-height: 40px;
}

.pie-tarjeta-producto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.selector-cantidad {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 27, 78, 0.05);
  border: 1px solid rgba(45, 27, 78, 0.12);
  border-radius: 20px;
  padding: 4px;
}

.selector-cantidad button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(245, 158, 11, 0.15);
  color: var(--belt-gold);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.selector-cantidad button:hover {
  background: rgba(245, 158, 11, 0.3);
}

.selector-cantidad button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.selector-cantidad input {
  width: 34px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--belt-text);
  font-size: 14px;
  -moz-appearance: textfield;
}

.selector-cantidad input::-webkit-outer-spin-button,
.selector-cantidad input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.precio-producto {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--belt-text);
}

.pie-tarjeta-producto button:disabled {
  background: rgba(45, 27, 78, 0.1);
  color: var(--belt-text-muted);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .contenedor-tienda { padding: 28px 20px 40px; }
}

/* ===== Selector de marcas del catálogo ===== */
@keyframes flotar-logo-marca {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.carrusel-marcas {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tarjeta-marca-iphone {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  background: #0d0d10;
  border-radius: 22px;
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.tarjeta-marca-iphone:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.38);
}

.texto-cabecera-tarjeta-marca {
  flex-shrink: 0;
  background: #0d0d10;
  border-radius: 22px 22px 0 0;
  padding: 24px 22px 20px;
}

.etiqueta-tarjeta-marca {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.tarjeta-marca-iphone .titular-tarjeta-marca {
  font-family: 'Manrope', sans-serif;
  color: #ffffff !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.imagen-tarjeta-marca {
  position: relative;
  flex: 1;
  min-height: 300px;
  background-size: cover;
  background-position: center top;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
}

.boton-mas-tarjeta-marca {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.tarjeta-marca-iphone:hover .boton-mas-tarjeta-marca {
  background: var(--belt-purple);
  transform: scale(1.08);
}

.titulo-nuestros-cinturones {
  color: #000000;
}

/* Título de marca en la cabecera del catálogo filtrado (catalogo_marca.php) */
h2.nombre-marca {
  font-family: 'Playfair Display', serif;
  color: #000000;
  font-size: 26px;
  margin-top: 18px;
  margin-bottom: 4px;
}

/* Tarjetas de producto en modo "solo vista" (sin precio, sin compra, sin cantidad) */
.tarjeta-producto-vista {
  text-align: center;
}

.tarjeta-producto-vista h3 {
  margin-bottom: 0;
}

.foto-flotante-producto {
  animation: flotar-logo-marca 3.5s ease-in-out infinite;
}

/* ===== Marcas destacadas (página completa) ===== */
.seccion-marca {
  margin-bottom: 48px;
}

.logotipo-marca {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--belt-text);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* ===== Mis pedidos (cliente) ===== */
.titulo-seccion-cliente {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin-bottom: 4px;
}

.lista-pedidos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== Estado vacío de "Mis pedidos" ===== */
.pedidos-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  margin: 24px auto;
  padding: 48px 36px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.pedidos-vacio-icono {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--belt-lavender-soft);
  color: var(--belt-purple);
  font-size: 32px;
  margin-bottom: 20px;
}

.pedidos-vacio h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin-bottom: 10px;
  color: #000000;
}

.pedidos-vacio p {
  color: var(--belt-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 26px;
}

.tarjeta-pedido {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: none;
  text-align: left;
  padding: 26px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

@keyframes resaltarPedido {
  0%, 100% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
  30% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45), 0 10px 25px rgba(0, 0, 0, 0.3); }
}

.tarjeta-pedido-resaltada {
  animation: resaltarPedido 1.3s ease-in-out 2;
  border-color: rgba(37, 99, 235, 0.5);
}

.cabecera-pedido {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--belt-text-muted);
  margin-bottom: 14px;
}

.total-pedido {
  text-align: right;
  margin-top: 14px;
  font-family: 'Playfair Display', serif;
  color: var(--belt-gold);
  font-size: 16px;
}

/* ===== Gestionar pedidos (empleado) ===== */
.pie-pedido-empleado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.pie-pedido-empleado .total-pedido {
  margin-top: 0;
}

.control-estado-pedido {
  display: flex;
  gap: 8px;
}

.select-estado-pedido {
  background: rgba(45, 27, 78, 0.05);
  border: 1px solid rgba(45, 27, 78, 0.12);
  border-radius: 8px;
  color: var(--belt-text);
  padding: 8px 10px;
  font-size: 13px;
}

.control-estado-pedido .btn-guardar-estado {
  padding: 8px 18px;
  font-size: 13px;
}

.modal-belt-ancho {
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.modal-belt-ancho h3 {
  text-align: center;
}

.contenido-modal-cliente {
  overflow-y: auto;
  margin: 10px 0 6px;
  flex: 1;
}

.tarjeta-pedido-modal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--belt-card-alt);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}

.etiqueta-estado-pedido {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.etiqueta-estado-pendiente {
  background: rgba(224, 166, 102, 0.15);
  color: #e0a666;
}

.etiqueta-estado-preparando {
  background: rgba(139, 92, 246, 0.15);
  color: var(--belt-purple-deep);
}

.etiqueta-estado-enviado {
  background: rgba(245, 158, 11, 0.15);
  color: var(--belt-gold);
}

.etiqueta-estado-entregado {
  background: rgba(126, 217, 87, 0.15);
  color: #7ed957;
}

.etiqueta-estado-cancelado {
  background: rgba(224, 102, 102, 0.15);
  color: #e06666;
}

.etiqueta-pago {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  margin-left: 8px;
}

.etiqueta-pago-pendiente_pago {
  background: rgba(224, 166, 102, 0.15);
  color: #e0a666;
}

.etiqueta-pago-pagado {
  background: rgba(126, 217, 87, 0.15);
  color: #7ed957;
}

.boton-peligro {
  background: transparent;
  color: #e06666;
  border: 1px solid #e06666;
  padding: 13px 26px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.boton-peligro:hover {
  background: rgba(224, 102, 102, 0.12);
  transform: translateY(-2px);
}

.boton-peligro:disabled,
.boton-dorado:disabled,
.boton-outline-purpura:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.fila-detalle-editable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(45, 27, 78, 0.08);
}

.fila-detalle-editable:last-child {
  border-bottom: none;
}

.info-detalle-pedido {
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  color: var(--belt-text-muted);
}

.info-detalle-pedido small {
  display: block;
  color: var(--belt-text-muted);
  margin-top: 2px;
}

.acciones-cantidad-pedido {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acciones-cantidad-pedido .selector-cantidad {
  background: rgba(45, 27, 78, 0.03);
}

.btn-guardar-cantidad {
  padding: 6px 14px;
  font-size: 12px;
}

.acciones-pedido-cliente {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}

.acciones-pedido-cliente button,
.acciones-pedido-cliente a {
  padding: 9px 18px;
  font-size: 13px;
}

/* ===== Login / Registro: paneles deslizantes ===== */
.auth-split {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 760px;
  min-height: 520px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
  animation: fadeIn 0.4s ease-out;
}

.auth-panel-formulario {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 2;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

.tarjeta-auth-interna {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.auth-panel-overlay {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #1c1c1f;
  color: #EAE4F2;
  z-index: 1;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

.overlay-contenido {
  text-align: center;
  max-width: 260px;
}

.overlay-icono {
  font-size: 42px;
  color: var(--belt-gold-soft);
  opacity: 0.85;
  margin-bottom: 14px;
  display: block;
}

.overlay-contenido h2 {
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  margin-bottom: 10px;
  color: #ffffff;
}

.overlay-contenido p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(234, 228, 242, 0.75);
  margin-bottom: 26px;
}

.boton-overlay {
  background: transparent;
  border: 2px solid var(--belt-gold-soft);
  color: #ffffff;
  padding: 12px 32px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.boton-overlay:hover {
  background: var(--belt-gold-soft);
  color: var(--belt-purple-deep);
  transform: translateY(-2px);
}

/* Al hacer clic, los dos paneles se cruzan deslizándose */
.auth-split.invertido .auth-panel-formulario {
  transform: translateX(100%);
}

.auth-split.invertido .auth-panel-overlay {
  transform: translateX(-100%);
}

@media (max-width: 760px) {
  .auth-split {
    flex-direction: column;
    min-height: auto;
  }
  .auth-panel-formulario,
  .auth-split.invertido .auth-panel-formulario,
  .auth-split.invertido .auth-panel-overlay {
    transform: none;
  }
}

/* ===== Panel de rol (admin / empleado) ===== */
.marca-subtitulo {
  display: block;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: var(--belt-text-muted);
  margin-top: -2px;
}

.boton-cerrar-sesion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(45, 27, 78, 0.2);
  color: var(--belt-text);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.boton-cerrar-sesion:hover {
  border-color: var(--belt-gold);
  color: var(--belt-gold);
}

.tarjeta-panel-rol {
  max-width: 440px;
  width: 100%;
  padding: 44px 40px;
  text-align: center;
}

.badge-panel {
  display: inline-block;
  background: rgba(139, 92, 246, 0.2);
  color: var(--belt-purple);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.titulo-panel-rol {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.1);
}

.titulo-panel-rol .acento-dorado {
  color: var(--belt-gold);
}

.lista-permisos-panel {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
}

.lista-permisos-panel li {
  padding: 10px 0;
}

.lista-permisos-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--belt-purple-deep);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}

.lista-permisos-panel a:hover {
  color: var(--belt-gold);
}

.lista-permisos-panel a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--belt-gold);
  flex-shrink: 0;
}

.pie-panel-rol {
  border-top: 1px solid rgba(45, 27, 78, 0.1);
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--belt-text-muted);
}

/* ===== Sección "Convierte tu colección en ingresos" ===== */
.seccion-vender {
  padding: 20px 48px 64px;
}

.tarjeta-vender {
  background: linear-gradient(135deg, var(--belt-lavender), var(--belt-card-alt));
  border-radius: 24px;
  padding: 52px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.tarjeta-vender-texto h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  margin-bottom: 12px;
  color: #000000;
}

.tarjeta-vender-texto > p {
  color: #000000;
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 480px;
}

.lista-beneficios-vender {
  list-style: none;
  margin-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}

.lista-beneficios-vender li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #000000;
  padding: 5px 0;
}

.lista-beneficios-vender i {
  color: var(--belt-gold);
}

/* ===== Panel de estadísticas estilo "informes y estadísticas" ===== */
.tarjeta-vender-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-vender {
  position: relative;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 16px;
  padding: 24px 24px 18px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-vender:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(45, 27, 78, 0.13);
}

.stat-vender-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.stat-vender-etiqueta {
  font-size: 11px;
  font-weight: 700;
  color: var(--belt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stat-vender-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.stat-vender-badge-positivo {
  color: var(--belt-verde-fuerte);
  background: rgba(var(--belt-verde-rgb), 0.14);
}

.stat-vender-badge-neutro {
  color: var(--belt-text-muted);
  background: rgba(45, 27, 78, 0.06);
}

.stat-vender strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  color: #000000;
  margin-bottom: 12px;
}

.stat-vender-caption {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--belt-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Mini-gráfica interactiva de cada tarjeta (línea suave + área + tooltip al pasar
   el mouse/dedo, igual que el patrón de reportes pero a escala reducida). Las tres
   primeras (sin actividad real todavía) muestran una tendencia plana en cero, sin
   inventar cifras; "Vendedores activos" y "Ventas globales" traen cifras estimadas
   moderadas, como se pidió. */
.mini-grafica-tendencia {
  position: relative;
  width: 100%;
  height: 160px;
}

.grafica-svg--mini .grafica-linea {
  stroke: var(--belt-verde);
  stroke-width: 2.5;
}

.grafica-svg--mini.interactuando .grafica-linea {
  stroke-width: 3.5;
}

.grafica-svg--mini .grafica-crosshair,
.grafica-svg--mini .grafica-punto {
  stroke: var(--belt-verde);
}

.grafica-svg--mini .grafica-punto-halo {
  fill: rgba(var(--belt-verde-rgb), 0.2);
}

.grafica-tooltip--mini {
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 10.5px;
}

.grafica-tooltip--mini .grafica-tooltip-valor {
  font-size: 13px;
}

/* ===== Sección "Por qué elegir BELT" ===== */
.seccion-porque {
  padding: 24px 48px 56px;
  text-align: center;
}

.seccion-porque h2 {
  font-family: 'Playfair Display', serif;
  color: #000000;
  font-size: 28px;
  margin-bottom: 6px;
}

.grid-porque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.tarjeta-porque {
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.08);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: left;
}

.icono-porque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--belt-gold);
  font-size: 19px;
  margin-bottom: 16px;
}

.icono-porque-purpura {
  background: rgba(139, 92, 246, 0.15);
  color: var(--belt-purple);
}

.tarjeta-porque h3 {
  font-family: 'Playfair Display', serif;
  color: #000000;
  font-size: 16px;
  margin-bottom: 8px;
}

.tarjeta-porque p {
  color: var(--belt-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ===== Footer del sitio ===== */
.pie-belt {
  border-top: 1px solid rgba(45, 27, 78, 0.08);
  padding: 48px 48px 24px;
}

.pie-belt-marca {
  max-width: 420px;
  margin-bottom: 30px;
}

.pie-belt-marca p {
  color: var(--belt-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
}

.pie-belt-redes {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.pie-belt-redes a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(45, 27, 78, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--belt-purple-deep);
  text-decoration: none;
  transition: all 0.2s ease;
}

.pie-belt-redes a:hover {
  border-color: var(--belt-gold);
  color: var(--belt-gold);
}

.pie-belt-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px 20px;
  padding: 28px 0 36px;
  border-top: 1px solid rgba(45, 27, 78, 0.08);
}

.pie-belt-columna-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--belt-purple-deep);
  margin: 0 0 14px;
  white-space: nowrap;
}

.pie-belt-columna-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie-belt-columna-lista a {
  color: var(--belt-text-muted);
  text-decoration: none;
  font-size: 12.5px;
  transition: color 0.2s ease;
}

.pie-belt-columna-lista a:hover {
  color: var(--belt-gold);
}

.pie-belt-inferior {
  border-top: 1px solid rgba(45, 27, 78, 0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--belt-text-muted);
}

.pie-belt-enlaces {
  display: flex;
  gap: 20px;
}

.pie-belt-enlaces a {
  color: var(--belt-text-muted);
  text-decoration: none;
}

.pie-belt-enlaces a:hover {
  color: var(--belt-gold);
}

@media (max-width: 900px) {
  .seccion-vender, .seccion-porque, .pie-belt {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tarjeta-vender {
    padding: 32px 24px;
  }
  .tarjeta-vender-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================
   RESPONSIVE — revisión completa para tablet y celular
   ========================================================== */

@media (max-width: 900px) {
  /* Navbar: pasa a 2 filas (logo+cuenta arriba, menú abajo con scroll) */
  .navbar-belt {
    flex-wrap: wrap;
    padding: 14px 20px;
    row-gap: 12px;
  }
  .nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .nav-links a { white-space: nowrap; }

  /* Hero: una sola columna, categorías en fila normal debajo del texto */
  .hero-belt {
    grid-template-columns: 1fr;
    padding: 32px 20px;
    gap: 28px;
  }
  .hero-texto h1 { font-size: 32px; }
  .hero-categorias {
    grid-template-columns: 1fr 1fr;
  }
  .tarjeta-categoria { min-height: 130px; }

  .banner-triptico-quienes,
  .banner-exclusividad,
  .seccion-vender,
  .seccion-porque,
  .pie-belt {
    padding-left: 20px;
    padding-right: 20px;
  }

}

@media (max-width: 560px) {
  .tarjeta-vender-stats {
    grid-template-columns: 1fr;
  }
  .marca-texto { font-size: 22px; }
  .marca-icono { width: 38px; height: 38px; }

  .pie-belt-columnas { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }

  .hero-texto h1 { font-size: 26px; }
  .hero-botones { flex-direction: column; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }

  .hero-categorias { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tarjeta-categoria { min-height: 110px; font-size: 10.5px; }

  .empieza-ahora { padding: 0 20px 40px; }
  .boton-empieza { padding: 16px 40px; font-size: 17px; width: 100%; text-align: center; }

  .tarjeta-vender { padding: 26px 20px; }

  .grid-productos,
  .grid-porque { grid-template-columns: 1fr; }

  .seccion-productos { padding: 20px 16px 32px; }
  .tarjeta-belt, .tarjeta-panel-rol { padding: 30px 22px; }

  .auth-split { border-radius: 18px; }
  .auth-panel-formulario, .auth-panel-overlay { padding: 28px 22px; }

  .pie-belt-inferior { flex-direction: column; align-items: flex-start; }

  .navbar-belt { padding: 12px 16px; }

  /* Ancho mínimo SOLO en celular, y SOLO en las tablas con muchas columnas
     (productos, usuarios, ventas, inventario) — así se puede hacer scroll
     horizontal ahí sin afectar las tarjetas angostas de Reportes */
  .tarjeta-tabla-productos .tabla-productos,
  .tarjeta-catalogo .tabla-productos {
    min-width: 480px;
  }
}

.etiqueta-exclusivo {
  display: inline-block;
  background: rgba(139, 92, 246, 0.18);
  color: var(--belt-purple);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
}

.insignia-exclusivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.18);
  color: var(--belt-purple);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.filtro-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--belt-purple-deep);
  margin-bottom: 22px;
  cursor: pointer;
  width: fit-content;
}

.filtro-checkbox input {
  accent-color: var(--belt-purple);
  width: 16px;
  height: 16px;
}

/* ===== Barra de filtros reutilizable (listas: pedidos, catálogos, etc.) ===== */
.barra-filtros-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.chip-filtro-lista {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--belt-card);
  border: 1px solid rgba(45, 27, 78, 0.15);
  color: var(--belt-text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip-filtro-lista:hover {
  border-color: var(--belt-gold);
}

.chip-filtro-lista.activo {
  background: var(--belt-purple-deep);
  border-color: var(--belt-purple-deep);
  color: #fff;
}

.chip-filtro-lista .contador-chip {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}

.chip-filtro-lista.activo .contador-chip {
  background: rgba(255, 255, 255, 0.25);
}

/* ===== Barra de herramientas de tablas admin (buscar + filtrar) ===== */
.barra-herramientas-tabla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.campo-busqueda-tabla {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--belt-card-alt);
  border: 1px solid rgba(45, 27, 78, 0.15);
  border-radius: 10px;
  padding: 9px 14px;
  flex: 1 1 220px;
  max-width: 300px;
  transition: border-color 0.2s ease;
}

.campo-busqueda-tabla:focus-within {
  border-color: var(--belt-purple);
}

.campo-busqueda-tabla i {
  color: var(--belt-text-muted);
  font-size: 14px;
}

.campo-busqueda-tabla input {
  border: none;
  background: none;
  outline: none;
  font-size: 13.5px;
  color: var(--belt-text);
  width: 100%;
  font-family: inherit;
}

.campo-busqueda-tabla input::placeholder {
  color: var(--belt-placeholder);
}

.chip-filtro-lista.chip-filtro-peligro.activo {
  background: #dc2626;
  border-color: #dc2626;
}

.sin-resultados-tabla {
  text-align: center;
  color: var(--belt-text-muted);
  padding: 18px 0;
}

/* ===== Ajustes finales de la tabla de productos ===== */
.tabla-productos tr,
.tabla-productos th,
.tabla-productos td {
    vertical-align: middle;
}

.tabla-productos th,
.tabla-productos td {
    padding: 16px 12px;
}

/* Controlar el ancho de la columna del nombre, cortando con "..." si es muy largo */
.nombre-tabla-producto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-productos td:nth-child(2) {
    max-width: 220px;
}

/* Centrar la celda de acciones (el <td> se queda como celda de tabla normal;
   centrar por text-align, nunca por display:flex en el <td>, ver nota arriba) */
.tabla-productos td.acciones-producto {
    text-align: center;
}

/* Columna de acciones: mismo ancho fijo en TODAS las tablas del panel,
   para que no cambie de tamaño al cargar/filtrar/recargar filas */
.tabla-productos th.col-acciones,
.tabla-productos td.acciones-producto {
    width: 140px;
    white-space: nowrap;
}

/* Botones de texto ("Guardar", "Ver historial") dentro de la columna de
   acciones: versión compacta para que quepan en el mismo ancho fijo */
.tabla-productos td.acciones-producto .boton-dorado {
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
}
/* ===== Personalizador de correas ===== */
.contenedor-personalizador {
  padding: 40px 48px 64px;
}

.contenedor-personalizador h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  margin-bottom: 6px;
}

.grid-personalizador {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}

.panel-opciones-personalizador {
  background: var(--belt-card-alt);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 18px;
  padding: 26px;
}

.grupo-opcion {
  margin-bottom: 24px;
}

.grupo-opcion:last-child {
  margin-bottom: 0;
}

.grupo-opcion h3 {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fila-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 12px;
  padding-bottom: 6px;
}

.swatch-opcion {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid rgba(45, 27, 78, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  position: relative;
}

.swatch-opcion:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 27, 78, 0.4);
}

.swatch-opcion.swatch-activo {
  border-color: var(--belt-gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

/* Hebillas de marca: texto en vez de color, botón mas ancho */
.swatch-opcion.swatch-marca {
  width: auto;
  min-width: 76px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--belt-card);
  color: var(--belt-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.swatch-opcion.swatch-plano {
  width: auto;
  min-width: 76px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--belt-card);
  color: var(--belt-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.swatch-opcion.swatch-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: #0a0a0a;
}

/* Opciones sin stock todavia: atenuadas, sin poder hacer click, con etiqueta */
.swatch-opcion.swatch-agotado {
  opacity: 0.45;
  filter: grayscale(0.55);
  cursor: not-allowed;
}

.swatch-opcion.swatch-agotado:hover {
  transform: none;
  border-color: rgba(45, 27, 78, 0.15);
}

.swatch-opcion.swatch-agotado::after {
  content: "Agotado";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  background: #c2585f;
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 1.5px 5px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.panel-preview-personalizador {
  background: var(--belt-card-alt);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lienzo-preview {
  background: radial-gradient(circle at 50% 40%, #cfc9d8, #a9a2b6);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.lienzo-preview img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 8px;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.25));
}

/* ===== Lupa de zoom (vista previa del personalizador) ===== */
.contenedor-zoom-lupa {
  position: relative;
}

.lupa-zoom-cursor {
  position: absolute;
  display: none;
  pointer-events: none;
  border: 2px solid rgba(245, 158, 11, 0.9);
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  box-shadow: 0 0 0 2000px rgba(45, 27, 78, 0.12);
  z-index: 30;
}

.panel-zoom-resultado {
  position: absolute;
  display: none;
  top: 0;
  left: calc(100% + 18px);
  width: 340px;
  height: 340px;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid rgba(45, 27, 78, 0.15);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  z-index: 40;
}

.panel-zoom-resultado.panel-zoom-abajo {
  top: calc(100% + 18px);
  left: 0;
}

@media (max-width: 900px) {
  .lupa-zoom-cursor,
  .panel-zoom-resultado {
    display: none !important;
  }
}

.resumen-personalizacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13.5px;
  color: var(--belt-text-muted);
}

.resumen-personalizacion b {
  color: var(--belt-text);
}

.precio-personalizador {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  border-top: 1px solid rgba(45, 27, 78, 0.12);
  padding-top: 14px;
}

.precio-personalizador span:last-child {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--belt-gold);
}

.boton-ancho {
  width: 100%;
}

@media (max-width: 860px) {
  .grid-personalizador { grid-template-columns: 1fr; }
  .contenedor-personalizador { padding: 24px 20px 40px; }
}

/* ===== Imagen flotando en el hero (producto destacado) ===== */
@keyframes flotar {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

.hero-producto-flotante {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-flotante {
  max-width: 100%;
  width: 420px;
  animation: flotar 4.5s ease-in-out infinite;
  filter: drop-shadow(0 25px 20px rgba(44, 36, 58, 0.35));
}

.etiqueta-flotante {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #c9a35c;
  color: #0d0b14;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  animation: flotar 4.5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .imagen-flotante { width: 280px; }
}

/* ===== Catálogo Louis Vuitton: banners tipo Apple (catalogo_marca.php) ===== */
.lv-banners {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0 -48px 0;
}

.lv-banner {
  position: relative;
  overflow: hidden;
  background: #0b0b0d;
  border-radius: 22px;
}

.lv-eyebrow {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--belt-gold-soft);
  text-align: center;
}

.lv-eyebrow-oscuro {
  color: var(--belt-gold);
  text-align: left;
}

/* --- Banner 1: portada "EXCLUSIVIDAD" (foto real + logo recortado interactivo) --- */
.lv-banner-1 {
  position: relative;
  padding: 0;
  background: #000000;
}

.lv-banner-1-foto {
  display: block;
  width: 100%;
  height: auto;
}

/* Recorte del logo LV, ubicado exactamente sobre el hueco negro dejado en la foto */
.lv-logo-hueco {
  position: absolute;
  left: 35.16%;
  top: 33.26%;
  width: 30.18%;
  height: 54.52%;
  perspective: 700px;
}

.lv-logo-recortado {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.35s ease, filter 0.35s ease;
  will-change: transform;
  animation: floatElement 4.5s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

.lv-logo-hueco:hover .lv-logo-recortado {
  filter: drop-shadow(0 14px 24px rgba(245, 158, 11, 0.45));
}

.lv-banner-1 .lv-boton-explorar {
  position: absolute;
  left: 50%;
  bottom: 15%;
  margin-top: 0;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .lv-banner-1 .lv-boton-explorar { bottom: 10%; }
}

.lv-banner-1 .lv-boton-explorar:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.04);
}

.lv-boton-explorar {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 34px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b0b0d;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lv-boton-explorar:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.35);
}

.lv-boton-explorar-pequeno {
  padding: 8px 24px;
  font-size: 13px;
}

/* --- Banner 2: "Mira lo más destacado" con carrusel --- */
.lv-banner-2 {
  padding: 26px 30px 44px;
}

.lv-barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 16px;
}

.lv-barra-titulo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: #ffffff;
}

.lv-barra-botones {
  display: flex;
  gap: 10px;
}

.lv-btn-fantasma,
.lv-btn-solido {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lv-btn-fantasma {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.lv-btn-solido {
  background: var(--belt-gold);
  color: #0b0b0d;
}

.lv-btn-fantasma:hover,
.lv-btn-solido:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}

.lv-titulo-destacado {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 34px);
  color: #ffffff;
  margin-top: 22px;
}

.lv-subtitulo-destacado {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
}

.lv-carrusel {
  position: relative;
  margin-top: 30px;
  border-radius: 18px;
  background: #000000;
  padding: 30px 20px 26px;
}

.lv-carrusel-imagenes {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv-carrusel-img {
  position: absolute;
  max-height: 100%;
  max-width: 80%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s ease, transform 0.7s ease;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

.lv-carrusel-img.activa {
  opacity: 1;
  transform: scale(1);
}

.lv-carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.lv-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease, width 0.3s ease;
}

.lv-punto:hover {
  transform: scale(1.3);
  background: rgba(255, 255, 255, 0.55);
}

.lv-punto.activo {
  background: var(--belt-gold);
  width: 22px;
  border-radius: 6px;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* --- Banner 2 exclusivo de Louis Vuitton: título único + carrusel de diapositivas tipo Apple --- */
.lv-banner-2-lv {
  background: #1d1d1f;
  padding: 44px 30px 40px;
}

.lv-titulo-destacado-izquierda {
  margin-top: 0;
  text-align: left;
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-size: clamp(24px, 3.2vw, 34px);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 4px;
}

.lv-carrusel-lv {
  margin-top: 30px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: #000000;
  border-radius: 22px;
  overflow: hidden;
}

.lv-carrusel-ventana {
  position: relative;
  overflow: hidden;
}

.lv-carrusel-pista {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.lv-carrusel-slide {
  position: relative;
  flex: 0 0 78%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 24px;
  box-sizing: border-box;
}

/* Diapositiva 1: fila de correas, contenido apoyado hacia abajo con texto propio */
.lv-carrusel-slide-correas {
  justify-content: flex-end;
  padding-bottom: 38px;
}

.lv-fila-correas-estatica {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}

.lv-fila-correas-item {
  width: 230px;
  height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s ease;
}

.lv-fila-correas-item:hover {
  transform: translateY(-6px);
}

.lv-texto-correas-animado {
  max-width: 380px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.lv-carrusel-slide-correas.lv-slide-activa .lv-texto-correas-animado {
  opacity: 1;
  transform: translateY(0);
}

/* Diapositiva 2: logo con efecto de iluminación */
.lv-logo-spotlight {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv-logo-spotlight::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
  animation: lv-respirar-luz 3.2s ease-in-out infinite;
}

.lv-logo-negro-iluminado {
  position: relative;
  width: 62%;
  height: 62%;
  object-fit: contain;
  /* El logo es negro sin fondo: se revela por el contraste contra el resplandor y una leve luz de borde */
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.28)) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.8));
}

@keyframes lv-respirar-luz {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.lv-texto-logo-animado {
  max-width: 380px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.lv-carrusel-slide-logo.lv-slide-activa .lv-texto-logo-animado {
  opacity: 1;
  transform: translateY(0);
}

/* Diapositiva 3: foto de clientes con texto superpuesto */
.lv-carrusel-slide-testimonio {
  padding: 0;
  gap: 0;
}

.lv-testimonio-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-testimonio-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 34px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

.lv-testimonio-texto {
  color: #ffffff;
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.2px;
  font-size: clamp(20px, 2.8vw, 28px);
  text-align: center;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.lv-carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0 24px;
}

.lv-carrusel-puntos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lv-punto-carrusel {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease, width 0.3s ease;
}

.lv-punto-carrusel:hover {
  background: rgba(255, 255, 255, 0.55);
}

.lv-punto-carrusel.activo {
  background: var(--belt-gold);
  width: 22px;
  border-radius: 6px;
}

.lv-btn-pausar-carrusel {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lv-btn-pausar-carrusel:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.06);
}

@media (max-width: 900px) {
  .lv-carrusel-slide { flex: 0 0 84%; min-height: 340px; padding: 28px 16px; }
  .lv-carrusel-slide-correas { padding-bottom: 26px; }
  .lv-fila-correas-item { width: 110px; height: 110px; }
  .lv-fila-correas-estatica { gap: 18px; }
  .lv-logo-spotlight { width: 170px; height: 170px; }
  .lv-titulo-destacado-izquierda { padding: 0 14px; }
}

/* --- Banner 3: correa flotante con animación al pasar el mouse --- */
.lv-banner-3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 48px 40px;
  background: radial-gradient(ellipse at 80% 50%, #1c1c1e 0%, #0b0b0d 70%);
  cursor: default;
}

.lv-banner-3-texto {
  flex: 1 1 280px;
  min-width: 260px;
}

.lv-titulo-zoom {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 32px);
  color: #ffffff;
  margin-top: 6px;
  line-height: 1.25;
}

.lv-banner-3-datos {
  display: flex;
  gap: 34px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.lv-dato {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lv-dato-etiqueta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.lv-dato-valor {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--belt-gold);
}

.lv-banner-3-imagen-contenedor {
  flex: 1 1 320px;
  min-width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lv-banner-3-correa {
  width: 105%;
  max-width: 460px;
  transform: translateX(-160%) rotate(-10deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55));
}

.lv-banner-3:hover .lv-banner-3-correa,
.lv-banner-3:focus-within .lv-banner-3-correa {
  transform: translateX(0) rotate(-12deg);
  opacity: 1;
}

@media (max-width: 900px) {
  .lv-banners { margin: 24px -20px 0; }
  .lv-banner { border-radius: 0; }
  .lv-carrusel-imagenes { height: 220px; }
  .lv-banner-3 { padding: 40px 24px; }
  .lv-banner-3-imagen-contenedor { height: 200px; }
}

/* Tema oscuro compartido con "Quiénes somos" aplicado al catálogo de Louis Vuitton */
body.pagina-marca-lv-negra {
  background: #000000;
}

body.pagina-marca-lv-negra .contenedor-tienda {
  padding-top: 0;
}

body.pagina-marca-lv-negra .enlace-volver-belt {
  color: rgba(255, 255, 255, 0.55);
}

body.pagina-marca-lv-negra .enlace-volver-belt:hover {
  color: #ffffff;
}

/* ===== Catálogo Gucci: mismos banners que Louis Vuitton, ajustados a la foto de Gucci ===== */
.gu-banners {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Recorte del logo GG, ubicado exactamente sobre el hueco negro dejado en la foto de Gucci */
.gu-logo-hueco {
  position: absolute;
  left: 30.07%;
  top: 34.5%;
  width: 48.86%;
  height: 59.85%;
  perspective: 700px;
}

/* ===== Catálogo Chanel: mismos banners que Louis Vuitton y Gucci, ajustados a la foto de Chanel ===== */
.ch-banners {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Recorte del logo CC, ubicado exactamente sobre el hueco negro dejado en la foto de Chanel */
.ch-logo-hueco {
  position: absolute;
  left: 35.25%;
  top: 32.86%;
  width: 30.37%;
  height: 57.33%;
  perspective: 700px;
}

/* ===== Banner 2 unificado (Louis Vuitton, Gucci, Chanel): estilo Apple "highlights" ===== */
/* ===== Banner 2 unificado (Louis Vuitton, Gucci, Chanel): carrusel estilo Apple "highlights" ===== */
.mk-destacado {
  background: #000000;
  padding: 48px 24px 40px;
}

/* --- Carrusel: viewport + pista deslizante + controles (puntos y play/pausa) --- */
.mk-carrusel {
  max-width: 1200px;
  margin: 0 auto;
}

.mk-carrusel-viewport {
  overflow: hidden;
  border-radius: 20px;
}

.mk-carrusel-pista {
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.mk-slide {
  flex: 0 0 100%;
  min-width: 0;
  background: #000000;
  border-radius: 20px;
  box-sizing: border-box;
  position: relative;
}

/* --- Cuadrito 1: fila de logos sobre negro puro, la marca activa resaltada --- */
.mk-slide-resaltado {
  padding: 64px 24px 68px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
}

.mk-resaltado-titulo {
  max-width: 760px;
  margin: 0 auto 46px;
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 6px;
}

.mk-logos-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 90px);
  flex-wrap: wrap;
}

.mk-logo-item {
  height: clamp(58px, 7vw, 96px);
  width: auto;
  object-fit: contain;
  opacity: 0.4;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5)) brightness(1.1);
  transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.mk-logo-item:hover {
  opacity: 0.65;
}

.mk-logo-activa {
  opacity: 1;
  height: clamp(72px, 9vw, 118px);
  filter: drop-shadow(0 14px 26px rgba(245, 158, 11, 0.45)) brightness(1.35);
  transform: scale(1.06);
  animation: mk-flotar-logo 4.5s ease-in-out infinite;
}

.mk-logo-activa:hover {
  transform: scale(1.1) translateY(-4px);
  opacity: 1;
}

@keyframes mk-flotar-logo {
  0%, 100% { transform: scale(1.06) translateY(0); }
  50% { transform: scale(1.06) translateY(-6px); }
}

/* --- Cuadrito 2: estilo "Apple Intelligence", mano sosteniendo el teléfono --- */
.mk-slide-ai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 48px 32px;
  min-height: 380px;
}

.mk-ai-texto {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 460px;
}

.mk-ai-titulo-gradiente {
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.5px;
  margin: 0;
  background: linear-gradient(102deg, #FDE68A 0%, var(--belt-gold-soft) 32%, var(--belt-gold) 62%, #C2410C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mk-ai-descripcion {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.65;
}

.mk-ai-telefono {
  flex: 1 1 260px;
  min-width: 230px;
  display: flex;
  justify-content: center;
  position: relative;
}

/* Mano estilizada (SVG) que sostiene el teléfono desde abajo, sin perder esa esencia del banner original */
.mk-mano-sujetando {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-38%);
  width: 220px;
  z-index: 1;
  opacity: 0.92;
  pointer-events: none;
}

.mk-mano-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}

.mk-telefono-marco {
  width: 260px;
  background: #050505;
  border: 7px solid #1c1c1e;
  border-radius: 46px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.mk-telefono-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #050505;
  border-radius: 14px;
  z-index: 5;
}

.mk-telefono-pantalla {
  background: #ffffff;
  min-height: 500px;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
}

.mk-telefono-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #000;
}

.mk-telefono-topbar i {
  font-size: 11px;
  margin-left: 3px;
}

.mk-telefono-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid #eee;
  color: #111;
}

.mk-telefono-marca-nombre {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.mk-telefono-iconos {
  display: flex;
  gap: 9px;
  color: #333;
  font-size: 12px;
}

.mk-telefono-tabs {
  display: flex;
  gap: 14px;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid #f2f2f2;
  scrollbar-width: none;
}

.mk-telefono-tabs::-webkit-scrollbar { display: none; }

.mk-telefono-tabs span {
  cursor: pointer;
  padding-bottom: 6px;
}

.mk-telefono-tabs span.activa {
  color: #000;
  border-bottom: 2px solid #000;
}

.mk-telefono-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 8px;
  overflow-y: auto;
  max-height: 340px;
}

.mk-telefono-card {
  background: #fafafa;
  border-radius: 10px;
  padding: 8px;
}

.mk-telefono-card img {
  width: 100%;
  height: 66px;
  object-fit: contain;
}

.mk-telefono-card-nombre {
  font-size: 10px;
  color: #333;
  margin: 6px 0 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-telefono-card-precio {
  font-size: 11px;
  font-weight: 800;
  color: #000;
  margin: 3px 0 0;
}

/* --- Controles del carrusel: puntos + botón de reproducción, igual que en apple.com --- */
.mk-carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.mk-carrusel-puntos {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
  border-radius: 999px;
}

.mk-punto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.mk-punto:hover {
  background: rgba(255, 255, 255, 0.6);
}

.mk-punto-activo {
  background: var(--belt-gold);
  transform: scale(1.2);
}

.mk-carrusel-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s ease, color 0.3s ease;
}

.mk-carrusel-play:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

@media (max-width: 900px) {
  .mk-destacado { padding: 36px 14px 32px; }
  .mk-carrusel-viewport { border-radius: 16px; }
  .mk-slide { border-radius: 16px; }
  .mk-slide-resaltado { padding: 44px 18px 48px; min-height: 320px; }
  .mk-resaltado-titulo { margin-bottom: 34px; }
  .mk-slide-ai { gap: 30px; padding: 40px 20px 56px; min-height: 320px; }
  .mk-telefono-marco { width: 220px; }
  .mk-mano-sujetando { width: 180px; bottom: -26px; }
}

@media (max-width: 600px) {
  .mk-slide-ai { flex-direction: column; text-align: center; }
  .mk-ai-texto { max-width: 100%; }
}

/* ===== Banner 3 unificado (Louis Vuitton, Gucci, Chanel): catálogo completo en fondo blanco =====
   A propósito NO usa .lv-banner (sin bordes redondeados, sin sombra, sin overflow:hidden):
   debe leerse como una sección blanca real que ocupa todo el ancho, no una tarjeta flotando
   sobre el fondo negro del resto de la página. Los márgenes negativos cancelan el padding
   lateral e inferior de .contenedor-tienda para que el blanco llegue hasta los bordes. */
.mk-catalogo-seccion {
  background: #ffffff;
  margin: 0 -48px -56px;
}

@media (max-width: 900px) {
  .mk-catalogo-seccion { margin: 0 -20px -40px; }
}

.mk-catalogo {
  padding: 40px 36px 48px;
}

.mk-catalogo-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(45, 27, 78, 0.1);
}

/* El tema negro fuerza h1-h4 a blanco; esta sección necesita texto oscuro para leerse sobre fondo blanco */
body.pagina-quienes-somos-negra .mk-catalogo-titulo,
body.pagina-quienes-somos-negra .mk-catalogo-filtros-titulo,
body.pagina-quienes-somos-negra .mk-catalogo-tarjeta-nombre {
  color: var(--belt-text);
}

.mk-catalogo-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin: 0 0 6px;
}

.mk-catalogo-subtitulo {
  color: var(--belt-text-muted);
  font-size: 14px;
  margin: 0;
}

.mk-catalogo-contador {
  font-weight: 700;
  color: var(--belt-text);
}

.mk-catalogo-boton {
  margin-top: 0;
  background: var(--belt-purple-deep);
  color: #ffffff;
}

.mk-catalogo-boton:hover {
  background: var(--belt-purple-deep);
  box-shadow: 0 10px 24px rgba(45, 27, 78, 0.3);
}

.mk-catalogo-cuerpo {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}

.mk-catalogo-filtros {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mk-catalogo-filtros-titulo {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--belt-text);
  margin: 0 0 4px;
}

.mk-filtro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--belt-text);
  cursor: pointer;
  user-select: none;
}

.mk-filtro-checkbox {
  width: 17px;
  height: 17px;
  accent-color: var(--belt-purple-deep);
  cursor: pointer;
}

.mk-catalogo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mk-catalogo-tarjeta {
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mk-catalogo-tarjeta-foto {
  background: var(--belt-lavender-soft);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 14px;
}

.mk-catalogo-tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.mk-catalogo-tarjeta:hover .mk-catalogo-tarjeta-foto img {
  transform: scale(1.05);
}

.mk-catalogo-tarjeta-categoria {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--belt-gold);
  margin-bottom: 4px;
}

.mk-catalogo-tarjeta-nombre {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--belt-text);
  margin: 0 0 6px;
  line-height: 1.35;
}

.mk-catalogo-tarjeta-precio {
  font-size: 14px;
  font-weight: 700;
  color: var(--belt-text);
  margin: 0;
}

.mk-catalogo-vacio {
  color: var(--belt-text-muted);
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .mk-catalogo { padding: 32px 20px 40px; }
  .mk-catalogo-cuerpo { grid-template-columns: 1fr; gap: 24px; }
  .mk-catalogo-filtros {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 22px;
  }
  .mk-catalogo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 480px) {
  .mk-catalogo-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ===== Página de producto individual (producto.php) ===== */
.contenedor-producto-detalle {
  max-width: 1240px;
  margin: 0 auto;
}

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 460px);
  gap: 48px;
  align-items: start;
  margin-top: 26px;
}

.pd-galeria {
  display: flex;
  gap: 18px;
}

.pd-miniaturas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 68px;
  flex-shrink: 0;
}

.pd-miniatura {
  width: 68px;
  height: 68px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(45, 27, 78, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pd-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-miniatura-activa {
  border-color: var(--belt-purple-deep);
  border-width: 2px;
}

.pd-foto-principal {
  flex: 1;
  min-width: 0;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--belt-lavender-soft);
  border-radius: 18px;
}

.pd-foto-principal img {
  max-width: 100%;
  max-height: 440px;
  object-fit: contain;
}

.pd-eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--belt-gold);
  margin-bottom: 8px;
}

.pd-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--belt-text);
  margin: 0 0 6px;
}

.pd-subtitulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--belt-text);
  margin: 0 0 16px;
}

.pd-precio {
  font-size: 21px;
  font-weight: 700;
  color: var(--belt-text);
  margin: 0 0 26px;
}

.pd-seccion-tallas {
  margin-bottom: 22px;
}

.pd-tallas-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pd-tallas-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--belt-text);
}

.pd-guia-tallas-boton {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--belt-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.pd-guia-tallas-boton:hover {
  color: var(--belt-purple-deep);
}

.pd-tallas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.pd-talla-opcion {
  padding: 11px 0;
  background: #ffffff;
  border: 1px solid rgba(45, 27, 78, 0.2);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--belt-text);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pd-talla-opcion:hover {
  border-color: var(--belt-purple-deep);
}

.pd-talla-seleccionada {
  border-color: var(--belt-purple-deep);
  border-width: 2px;
}

.pd-guia-tallas-texto {
  margin-top: 10px;
  font-size: 13px;
  color: var(--belt-text-muted);
  line-height: 1.55;
}

.pd-disponibilidad {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--belt-verde-fuerte);
  margin-bottom: 22px;
}

.pd-disponibilidad-agotado {
  color: #c0392b;
}

.pd-seccion-cantidad {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.pd-cantidad-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--belt-text);
}

.pd-boton-agregar {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pd-boton-agregar:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #1a1a1a;
}

.pd-boton-agregar:disabled {
  background: rgba(45, 27, 78, 0.15);
  color: var(--belt-text-muted);
  cursor: not-allowed;
  transform: none;
}

.pd-mensaje-compra {
  min-height: 18px;
  font-size: 13px;
  margin: 8px 0 0;
}

.pd-seccion-envio {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(45, 27, 78, 0.1);
}

.pd-envio-titulo {
  font-size: 15px;
  color: var(--belt-text);
  margin: 0 0 6px;
}

.pd-envio-texto {
  font-size: 13px;
  color: var(--belt-text-muted);
  line-height: 1.55;
  margin: 0;
}

.pd-seccion-descripcion {
  margin-top: 22px;
}

.pd-descripcion {
  font-size: 14px;
  color: var(--belt-text-muted);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 18px; }
  .pd-galeria { flex-direction: column-reverse; }
  .pd-miniaturas { flex-direction: row; width: auto; }
  .pd-foto-principal { min-height: 300px; }
  .pd-foto-principal img { max-height: 280px; }
  .pd-tallas-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Pantalla de carga (overlay con florecita animada) ===== */
.pantalla-carga {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--belt-bg);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.pantalla-carga.pantalla-carga-oculta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flor-carga {
  width: 46px;
  height: 46px;
  animation: flor-carga-girar 2.2s linear infinite;
}

.flor-carga-petalo {
  transform-origin: 50px 50px;
  fill: var(--belt-purple);
  animation: flor-carga-pulso 1.1s ease-in-out infinite;
}

.flor-carga-petalo:nth-child(1) { animation-delay: 0s; }
.flor-carga-petalo:nth-child(2) { animation-delay: 0.09s; fill: var(--belt-purple-strong); }
.flor-carga-petalo:nth-child(3) { animation-delay: 0.18s; }
.flor-carga-petalo:nth-child(4) { animation-delay: 0.27s; fill: var(--belt-purple-strong); }
.flor-carga-petalo:nth-child(5) { animation-delay: 0.36s; }
.flor-carga-petalo:nth-child(6) { animation-delay: 0.45s; fill: var(--belt-purple-strong); }

.flor-carga-centro {
  fill: var(--belt-gold);
}

@keyframes flor-carga-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes flor-carga-pulso {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .flor-carga,
  .flor-carga-petalo {
    animation: none;
  }
}

/* ===== Páginas placeholder del footer (en construcción) ===== */
.seccion-placeholder {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px;
  gap: 14px;
}

.seccion-placeholder i {
  font-size: 42px;
  color: var(--belt-purple);
  margin-bottom: 6px;
}

.seccion-placeholder h1 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--belt-purple-deep);
  margin: 0;
}

.seccion-placeholder p {
  color: var(--belt-text-muted);
  max-width: 440px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
}