/*
 * ════════════════════════════════════════════════════════
 *   VIP GOLD FLORISTERÍA — styles_premium.css  v1.1
 *   Mejoras visuales sobre la base existente.
 *   No rompe ninguna funcionalidad del panel de admin.
 *   v1.1 — Tarjetas destacadas con mayor contraste y presencia
 * ════════════════════════════════════════════════════════
 */

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

/* ── VARIABLES ── */
:root {
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', sans-serif;

  --primary:           #CE48CE;
  --primary-dark:      #A83BA8;
  --primary-light:     #E89CE8;
  --primary-glow:      rgba(206,72,206,.18);
  --primary-frosted:   rgba(206,72,206,.22);

  --grad-primary: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%);
  --grad-gold:    linear-gradient(135deg, #D4B483 0%, #B8935A 100%);
  --grad-frosted: linear-gradient(135deg, rgba(206,72,206,.18) 0%, rgba(168,59,168,.12) 100%);

  --glow-primary: 0 0 20px rgba(206,72,206,.35), 0 8px 32px rgba(206,72,206,.2);
  --glow-gold:    0 0 16px rgba(184,147,90,.3), 0 4px 16px rgba(184,147,90,.15);
}

/* ════════════════════════════════════════════════════════
   HERO — botones glassmorphism con toque #CE48CE
════════════════════════════════════════════════════════ */
.banner-content::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 320px; height: 320px;
  background: radial-gradient(ellipse, rgba(206,72,206,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: heroHalo 4s ease-in-out infinite;
  z-index: -1;
}
@keyframes heroHalo {
  0%,100% { transform: translate(-50%,-55%) scale(1);    opacity:.7; }
  50%      { transform: translate(-50%,-55%) scale(1.15); opacity:1;  }
}

.toggle-btn {
  background: rgba(206,72,206,.18) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(206,72,206,.55) !important;
  color: #fff !important;
  padding: 14px 40px !important;
  border-radius: 30px !important;
  letter-spacing: 4px !important;
  box-shadow: 0 4px 24px rgba(206,72,206,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: all .35s cubic-bezier(.25,.46,.45,.94) !important;
  position: relative;
  overflow: hidden;
}
.toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}
.toggle-btn:hover {
  background: rgba(206,72,206,.32) !important;
  border-color: rgba(206,72,206,.8) !important;
  box-shadow: var(--glow-primary) !important;
  transform: translateY(-3px) !important;
}

.social-bubble {
  width: 44px !important; height: 44px !important;
  background: rgba(206,72,206,.18) !important;
  border: 1.5px solid rgba(206,72,206,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 12px rgba(206,72,206,.15) !important;
  transition: all .35s cubic-bezier(.34,1.56,.64,1) !important;
}
.social-bubble:hover {
  background: rgba(206,72,206,.38) !important;
  border-color: rgba(206,72,206,.85) !important;
  box-shadow: var(--glow-primary) !important;
  transform: translateY(-5px) scale(1.12) !important;
}

/* ════════════════════════════════════════════════════════
   HEADER STICKY
════════════════════════════════════════════════════════ */
.header {
  background: rgba(250,247,242,.93) !important;
  border-bottom: 1px solid rgba(206,72,206,.12) !important;
  box-shadow: 0 2px 20px rgba(206,72,206,.06) !important;
}
.header h1 {
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  letter-spacing: 8px !important;
  color: var(--primary-dark) !important;
  font-style: italic !important;
}

/* ════════════════════════════════════════════════════════
   PROMO INTRO — rediseño completo (v1.1)
   Problema: padding excesivo, stats pequeños, texto plano.
   Solución: layout asimétrico 3fr/2fr, stats grandes con
             fondo sólido coloreado, título prominente.
════════════════════════════════════════════════════════ */
.promo-intro {
  /* Layout más compacto y denso */
  max-width: 1200px !important;
  margin: 32px auto 0 !important;
  padding: 52px 56px !important;
  /* Grid asimétrico: texto ocupa más espacio que stats */
  grid-template-columns: 3fr 2fr !important;
  align-items: center !important;
  gap: 48px !important;
  /* Fondo con más presencia */
  background: linear-gradient(135deg,
    rgba(206,72,206,.09) 0%,
    rgba(232,156,232,.05) 40%,
    rgba(250,247,242,1) 100%) !important;
  border: 1.5px solid rgba(206,72,206,.18) !important;
  box-shadow:
    0 12px 48px rgba(206,72,206,.1),
    0 2px 8px  rgba(206,72,206,.06),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Mancha decorativa de fondo dentro de la tarjeta */
.promo-intro::before {
  content: '' !important;
  position: absolute !important;
  top: -60px; right: -60px !important;
  width: 300px; height: 300px !important;
  background: radial-gradient(ellipse,
    rgba(206,72,206,.1) 0%, transparent 70%) !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}
.promo-intro::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px; left: 30% !important;
  width: 200px; height: 200px !important;
  background: radial-gradient(ellipse,
    rgba(212,180,131,.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}

/* Línea acento izquierda */
.promo-intro-left {
  position: relative !important;
  z-index: 1 !important;
}
.promo-intro-left::before {
  content: '' !important;
  display: block !important;
  width: 56px; height: 4px !important;
  background: linear-gradient(90deg, #CE48CE, #A83BA8) !important;
  border-radius: 2px !important;
  margin-bottom: 24px !important;
}

/* Título mucho más grande y legible */
.promo-intro-left h2 {
  font-family: var(--font-serif) !important;
  font-size: 68px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.0 !important;
  margin-bottom: 24px !important;
  background: linear-gradient(135deg, #CE48CE 0%, #7a1a7a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -1px !important;
}

/* Párrafo con más tamaño y contraste */
.promo-intro-left p {
  font-size: 17px !important;
  color: #4a2a3a !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  max-width: 440px !important;
  background: rgba(255,255,255,.75) !important;
  padding: 20px 24px !important;
  border-radius: 14px !important;
  border-left: 3px solid rgba(206,72,206,.4) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 16px rgba(206,72,206,.07) !important;
}

/* Columna de stats — layout vertical centrado */
.promo-intro-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Cada stat — tarjeta con fondo sólido que contrasta */
.promo-stat {
  text-align: center !important;
  background: #fff !important;
  padding: 22px 28px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(206,72,206,.18) !important;
  box-shadow:
    0 6px 24px rgba(206,72,206,.1),
    0 1px 4px  rgba(206,72,206,.06) !important;
  transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
  min-width: unset !important;
}
.promo-stat:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 14px 36px rgba(206,72,206,.16),
    0 2px 8px  rgba(206,72,206,.08) !important;
  border-color: rgba(206,72,206,.3) !important;
}

/* Número grande y llamativo */
.promo-stat-num {
  font-family: var(--font-serif) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block !important;
}

/* Label de stat más legible */
.promo-stat-label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #7a5a7a !important;
}

/* Divisor entre stats — ocultar el original, los gaps lo reemplazan */
.promo-stat-divider {
  display: none !important;
}

/* ── Responsive promo-intro ── */
@media (max-width: 900px) {
  .promo-intro {
    grid-template-columns: 1fr !important;
    padding: 40px 28px !important;
    gap: 32px !important;
  }
  .promo-intro-left h2 { font-size: 48px !important; }
  .promo-intro-right {
    flex-direction: row !important;
    gap: 10px !important;
  }
  .promo-stat { flex: 1 !important; padding: 18px 12px !important; }
  .promo-stat-num { font-size: 38px !important; }
}
@media (max-width: 480px) {
  .promo-intro { padding: 32px 20px !important; }
  .promo-intro-left h2 { font-size: 38px !important; }
  .promo-intro-right { flex-direction: column !important; }
  .promo-stat-num { font-size: 44px !important; }
}

/* ════════════════════════════════════════════════════════
   SECTION HEADERS — estilo unificado eyebrow + título (v1.3)
   Mismo patrón que "Nuestra esencia / Arte floral hecho a mano"
════════════════════════════════════════════════════════ */
.section-header {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 48px 28px !important;
  position: relative !important;
}

.section-header-content {
  max-width: 640px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Eyebrow — línea pequeña + icono + texto en CE48CE */
.section-eyebrow {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.section-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px; height: 2px !important;
  background: linear-gradient(90deg, #CE48CE, #A83BA8) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}
.section-eyebrow i {
  font-size: 11px !important;
  color: var(--primary) !important;
}

/* Título principal — grande, itálico, oscuro */
.section-main-title {
  font-family: var(--font-serif) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #3a1a3a !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

/* Subtítulo — igual que antes pero con color más cálido */
.section-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: #7a5a6a !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Ocultar el div .section-title original (ya no se usa) */
.section-title { display: none !important; }

/* Responsive */
@media (max-width: 900px) {
  .section-header { padding: 44px 24px 20px !important; }
  .section-main-title { font-size: 32px !important; }
}
@media (max-width: 480px) {
  .section-header { padding: 36px 16px 16px !important; }
  .section-main-title { font-size: 26px !important; }
}

/* ════════════════════════════════════════════════════════
   PRODUCTOS DESTACADOS — navegación
════════════════════════════════════════════════════════ */
.featured-nav-btn {
  width: 42px !important; height: 42px !important;
  background: #fff !important;
  border: 1.5px solid rgba(206,72,206,.2) !important;
  color: var(--primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(206,72,206,.1) !important;
  transition: all .3s !important;
}
.featured-nav-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: var(--glow-primary) !important;
  transform: scale(1.1) !important;
}

/* ════════════════════════════════════════════════════════
   PRODUCTOS DESTACADOS — tarjetas (corrección v1.1)
   Problema: se perdían en el fondo crema por sombra neutra.
   Solución: sombra coloreada + borde CE48CE + línea superior
             + fondo interno degradado + badge de texto.
════════════════════════════════════════════════════════ */
.featured-product {
  flex: 0 0 230px !important;
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  /* Borde coloreado que define el contorno contra el fondo crema */
  border: 1px solid rgba(206,72,206,.22) !important;
  /* Sombra púrpura: contrasta con el fondo #F5F0F2 donde una sombra gris desaparece */
  box-shadow:
    0 8px 28px rgba(206,72,206,.16),
    0 2px 8px  rgba(206,72,206,.08) !important;
  cursor: pointer !important;
  transition: all .4s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
}

/* Línea superior de acento — primer elemento que el ojo distingue */
.featured-product::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #CE48CE 0%, #A83BA8 100%) !important;
  z-index: 3 !important;
  /* Anular el clip-path del border-image del v1.0 */
  -webkit-mask: none !important;
  mask: none !important;
  border-radius: 14px 14px 0 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Badge "Destacado" reemplaza el + genérico */
.featured-product::after {
  content: 'Destacado' !important;
  position: absolute !important;
  top: 14px; right: 12px !important;
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 10px rgba(206,72,206,.35) !important;
  z-index: 4 !important;
  line-height: 1.4 !important;
  /* Resetear propiedades de flex que venían del ::after anterior */
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* Hover: eleva y amplía la sombra */
.featured-product:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow:
    0 24px 52px rgba(206,72,206,.22),
    0 8px 20px  rgba(206,72,206,.12) !important;
  border-color: rgba(206,72,206,.35) !important;
}

/* Imagen */
.featured-product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.featured-product:hover .featured-product-image {
  transform: scale(1.07);
}

/* Área de info — fondo levemente morado para separar visualmente de la imagen */
.featured-product-info {
  padding: 16px 18px 18px !important;
  border-top: none !important;
  background: linear-gradient(to bottom, #fff 0%, #fdf8fd 100%) !important;
  position: relative !important;
}

/* Línea separadora con degradado en lugar de borde plano */
.featured-product-info::before {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(206,72,206,.4) 0%, transparent 70%) !important;
  margin-bottom: 12px !important;
  border-radius: 1px !important;
}

/* Nombre del producto */
.featured-product-title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-style: italic !important;
  color: #3a1a3a !important;
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
}

/* Precio — texto con gradiente para llamar la atención sin necesitar bold agresivo */
.featured-product-price {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .5px !important;
  margin-bottom: 14px !important;
  display: block !important;
}

/* Botón "Ver Detalles" — sólido con gradiente, prominente */
.featured-product-button {
  width: 100% !important;
  display: block !important;
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 0 !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .3s !important;
  box-shadow: 0 4px 16px rgba(206,72,206,.3) !important;
}
.featured-product-button:hover {
  box-shadow: 0 6px 22px rgba(206,72,206,.45) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

/* ════════════════════════════════════════════════════════
   PROMO SECTION — imagen + video  (v1.2 rediseño completo)
════════════════════════════════════════════════════════ */

/* Wrapper que agrupa encabezado + bloques */
.promo-section-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px 0 !important;
}

/* Encabezado editorial sobre los dos bloques */
.promo-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(206,72,206,.15) !important;
}
.promo-section-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Eyebrow — etiqueta pequeña sobre el título */
.promo-eyebrow {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.promo-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px; height: 2px !important;
  background: linear-gradient(90deg, #CE48CE, #A83BA8) !important;
  border-radius: 1px !important;
}

/* Título de sección */
.promo-section-title {
  font-family: var(--font-serif) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #3a1a3a !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* Descripción lateral */
.promo-section-desc {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: #7a5a6a !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  max-width: 340px !important;
  text-align: right !important;
}

/* Grid de los dos bloques */
.promo-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ── Banner imagen ── */
.promo-banner {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  aspect-ratio: 4/3 !important;
  box-shadow: 0 12px 40px rgba(206,72,206,.12) !important;
  border: 1.5px solid rgba(206,72,206,.15) !important;
}
.promo-banner .banner-image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.25,.46,.45,.94);
  filter: brightness(.9) saturate(1.05);
}
.promo-banner:hover .banner-image {
  transform: scale(1.05);
  filter: brightness(.8) saturate(1.1);
}

/* Overlay gradiente del banner */
.promo-banner .banner-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 24px 26px !important;
  background: linear-gradient(
    to bottom,
    rgba(30,10,40,.35) 0%,
    transparent 35%,
    transparent 50%,
    rgba(30,10,40,.72) 100%
  ) !important;
}

/* Tag superior del banner */
.promo-banner-tag {
  align-self: flex-start !important;
  background: rgba(206,72,206,.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(206,72,206,.45) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Zona inferior: copy + botón */
.promo-banner-bottom {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.promo-banner-copy {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #fff !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4) !important;
  margin: 0 !important;
}

/* Botón CTA mejorado */
.promo-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  transition: all .3s !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 18px rgba(206,72,206,.4) !important;
  flex-shrink: 0 !important;
}
.promo-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(206,72,206,.5) !important;
  filter: brightness(1.08) !important;
}

/* ── Bloque de video ── */
.promo-video-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Badge "Mira cómo lo hacemos" encima del video */
.promo-video-badge {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border: 1.5px solid rgba(206,72,206,.2) !important;
  color: var(--primary-dark) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 12px rgba(206,72,206,.1) !important;
}
.promo-video-badge i {
  color: var(--primary) !important;
  font-size: 14px !important;
}

.promo-video {
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
  box-shadow: 0 12px 40px rgba(206,72,206,.1) !important;
  border: 1.5px solid rgba(206,72,206,.12) !important;
  flex: 1 !important;
}
.promo-video .video-content {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Responsive promo-section ── */
@media (max-width: 900px) {
  .promo-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .promo-section-desc { text-align: left !important; max-width: 100% !important; }
  .promo-section-title { font-size: 28px !important; }
  .promo-section { grid-template-columns: 1fr !important; gap: 12px !important; }
  .promo-banner-copy { font-size: 20px !important; }
  .promo-section-wrapper { padding: 0 20px !important; }
}
@media (max-width: 480px) {
  .promo-section-title { font-size: 24px !important; }
  .promo-banner-bottom { flex-direction: column !important; align-items: flex-start !important; }
}

/* ════════════════════════════════════════════════════════
   CATEGORÍAS
════════════════════════════════════════════════════════ */
.categoria-grid {
  gap: 10px !important;
  padding: 0 48px 56px !important;
}
.categoria-item {
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(206,72,206,.1) !important;
  transition: all .45s cubic-bezier(.34,1.56,.64,1) !important;
}
.categoria-item:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 48px rgba(206,72,206,.2) !important;
}
.categoria-item img {
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .4s !important;
  filter: brightness(.88) saturate(.95) !important;
}
.categoria-item:hover img {
  transform: scale(1.07) !important;
  filter: brightness(.7) saturate(.8) !important;
}
.categoria-overlay {
  border-radius: 14px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(80,10,80,.2) 40%,
    rgba(80,10,80,.65) 100%
  ) !important;
  transition: background .4s !important;
}
.categoria-item:hover .categoria-overlay {
  background: linear-gradient(
    180deg,
    rgba(80,10,80,.08) 0%,
    rgba(106,20,106,.25) 40%,
    rgba(80,10,80,.75) 100%
  ) !important;
}
.categoria-overlay h3 {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
.categoria-item:hover .categoria-overlay h3 {
  transform: translateY(-4px) !important;
}
.categoria-overlay p {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: rgba(255,255,255,.85) !important;
  background: rgba(206,72,206,.35) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(206,72,206,.5) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  margin-top: 8px !important;
}

/* ════════════════════════════════════════════════════════
   VIDEOS SECTION
════════════════════════════════════════════════════════ */
.shorts-section {
  background: linear-gradient(135deg,
    rgba(206,72,206,.04) 0%,
    rgba(250,247,252,1) 50%,
    rgba(206,72,206,.03) 100%) !important;
  padding: 56px 48px !important;
  position: relative;
}
.shorts-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(206,72,206,.2), transparent);
}
.short-video {
  border-radius: 14px !important;
  border: 1px solid rgba(206,72,206,.1) !important;
  box-shadow: 0 4px 20px rgba(206,72,206,.08) !important;
  overflow: hidden !important;
  transition: all .4s cubic-bezier(.34,1.56,.64,1) !important;
}
.short-video:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(206,72,206,.16) !important;
  border-color: rgba(206,72,206,.25) !important;
}
.short-info {
  padding: 16px 18px !important;
  border-top: 2px solid rgba(206,72,206,.1) !important;
  background: linear-gradient(to bottom, #fff, rgba(250,247,252,1)) !important;
}
.short-info h3 {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-style: italic !important;
  color: var(--primary-dark) !important;
  margin-bottom: 5px !important;
}
.short-info p {
  font-size: 12px !important;
  color: #7a5a7a !important;
}

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.footer {
  background: linear-gradient(135deg, #2a1030 0%, #3a1a3a 100%) !important;
  padding: 56px 48px !important;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #CE48CE, #A83BA8);
}
.footer::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(206,72,206,.08) 0%, transparent 70%);
  pointer-events: none;
}
.footer-logo {
  width: 130px !important;
  filter: brightness(10) !important;
  opacity: .95 !important;
  position: relative; z-index: 1;
}
.footer-link {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  color: rgba(255,255,255,.7) !important;
  position: relative; z-index: 1;
}
.footer-link:hover { color: var(--primary-light) !important; }
.footer-text {
  font-size: 11px !important;
  color: rgba(255,255,255,.35) !important;
  position: relative; z-index: 1;
}

/* ════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
════════════════════════════════════════════════════════ */
.whatsapp-float-button {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border-radius: 50% !important;
  animation: waPulse 3s ease-in-out infinite !important;
}
@keyframes waPulse {
  0%   { box-shadow: 0 4px 20px rgba(37,211,102,.35), 0 0 0 0   rgba(37,211,102,.3); }
  50%  { box-shadow: 0 4px 24px rgba(37,211,102,.45), 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,.35), 0 0 0 0   rgba(37,211,102,.3); }
}

/* ════════════════════════════════════════════════════════
   CARRITO
════════════════════════════════════════════════════════ */
.complete-order-btn {
  background: linear-gradient(135deg, #CE48CE 0%, #A83BA8 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(206,72,206,.25) !important;
}
.complete-order-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: var(--glow-primary) !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — generales (promo-intro tiene los suyos propios)
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .section-header::before { left: 24px; top: 40px; }
  .categoria-grid { gap: 8px !important; padding: 0 20px 40px !important; }
  .shorts-section { padding: 40px 20px !important; }
}
@media (max-width: 480px) {
  .section-title h2 { font-size: 26px !important; }
  .featured-product { flex: 0 0 200px !important; }
  .featured-product-image { height: 185px !important; }
  .footer { padding: 40px 24px !important; }
}