/* ==========================================================================
   SANLILAS — COUTURE DESIGN SYSTEM v3.0
   Inspirado en el Instagram @sanlilas: boho-luxe artesanal, "hora dorada",
   calidez tropical. Crochet, macramé, perlas cultivadas y
   herrajes en oro 18k. Cúcuta, Colombia.

   Paleta del feed:
   • Dorado brillante                (#D4AF37) — herrajes, detalles
   • Dorado                          (#C8A46A) — acentos y botones
   • Naranja                         (#D97742) — cálidos vibrantes
   • Marrón claro                    (#8A7A6A) — neutros cálidos
   • Rosa suave                      (#D8A0A8) — toques femeninos
   • Marfil                          (#FAF7F2) — fondos e highlights
   • Blanco                          (#FFFFFF) — contraste
   ========================================================================== */

/* ── DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
  /* Primary: Dorado SANLILAS */
  --san-gold: #C8A46A;
  --san-gold-bright: #D4AF37;
  --san-gold-deep: #A8895A;
  --san-gold-pale: #F0E6D2;
  --san-gold-glow: rgba(200, 164, 106, 0.35);
  --san-gold-foil: linear-gradient(135deg, #D4AF37 0%, #F5E6CA 40%, #C8A46A 100%);

  /* Secondary: Marfil / Marrón claro */
  --san-ocean: #EDE4D9;
  --san-ocean-deep: #8A7A6A;
  --san-ocean-light: #F4EDE2;
  --san-ocean-glow: rgba(138, 122, 106, 0.28);
  --san-ocean-glass: rgba(138, 122, 106, 0.08);

  /* Tertiary: Naranja / Rosa */
  --san-terra: #D97742;
  --san-terra-deep: #B8602F;
  --san-terra-light: #F2D9C9;

  /* Neutrals: Marfil & Marrón cálido */
  --san-cream: #FAF7F2;
  --san-cream-warm: #EDE4D9;
  --san-sand: #EDE4D9;
  --san-espresso: #2C211B;
  --san-espresso-mid: #4A3A2F;
  --san-espresso-muted: #8A7A6A;
  --san-pearl: #FFFFFF;

  /* Paleta SANLILAS completa */
  --san-lila: #C8A46A;
  --san-lila-dark: #A8895A;
  --san-lila-light: #F0E6D2;
  --san-champagne: #D4AF37;
  --san-rose: #D8A0A8;
  --san-negro: #2C211B;
  --san-marfil: #FAF7F2;
  --san-beige: #EDE4D9;
  --san-ciruela: #8A7A6A;
  --san-verde: #D97742;
  --san-vino: #C06A5A;

  /* Typography */
  --font-couture: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-atelier: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Shadows */
  --shadow-luxury: 0 12px 40px rgba(44, 33, 27, 0.06);
  --shadow-gold: 0 8px 30px rgba(200, 164, 106, 0.22);
  --shadow-ocean: 0 8px 30px rgba(138, 122, 106, 0.16);
  --shadow-elevated: 0 20px 60px rgba(44, 33, 27, 0.1);

  /* Transitions */
  --ease-couture: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-silk: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════
   PREVENIR DESBORDES HORIZONTALES EN MÓVIL (global)
   ══════════════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
  background-color: #FAF7F2;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(220, 207, 229, 0.35), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(214, 192, 161, 0.22), transparent 42%),
    radial-gradient(circle at 50% 92%, rgba(201, 158, 172, 0.16), transparent 45%);
  background-attachment: fixed;
}

/* Instant Direct Entrance Without Delays */
main {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.reveal-element,
[data-reveal],
.reveal-element.is-visible,
.reveal-left,
.reveal-right,
.reveal-zoom,
.hero-anim-item,
.hero-anim-item.is-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}


/* ── KEYFRAME ANIMATIONS ─────────────────────────────────────────── */

@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes goldTextShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 12px var(--san-gold-glow); }
  50% { box-shadow: 0 0 28px var(--san-gold-glow); }
}

@keyframes pulseOcean {
  0%, 100% { box-shadow: 0 0 12px var(--san-ocean-glow); }
  50% { box-shadow: 0 0 28px var(--san-ocean-glow); }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes revealScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes waveFloat {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(5px) translateY(-3px); }
  50% { transform: translateX(0) translateY(-6px); }
  75% { transform: translateX(-5px) translateY(-3px); }
}

@keyframes grainMove {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, -9%); }
  70% { transform: translate(9%, 4%); }
  90% { transform: translate(-1%, 7%); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(142, 111, 174, 0.2); }
  50% { border-color: rgba(142, 111, 174, 0.55); }
}

@keyframes glowBreath {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}


/* ── LUXURY SCROLLBAR ─────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--san-cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--san-gold) 0%, var(--san-ocean-deep) 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--san-terra); }


/* ── GLOBAL BRAND BACKGROUND GLOW ────────────────────────────────── */

body {
  background-color: var(--san-cream);
  background-image:
    radial-gradient(circle at 12% 15%, rgba(142, 111, 174, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(142, 111, 174, 0.07) 0%, transparent 45%);
  background-attachment: fixed;
}


/* ── FILM GRAIN OVERLAY (Artisanal Texture) ──────────────────────── */

body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: grainMove 8s steps(10) infinite;
}


/* ── SELECTION HIGHLIGHT ──────────────────────────────────────────── */

::selection {
  background: rgba(142, 111, 174, 0.25);
  color: var(--san-espresso);
}


/* ── GOLD FOIL TEXT (Brand Logo & Headlines) ─────────────────────── */

.couture-gold-text {
  background: var(--san-gold-foil);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: goldTextShimmer 6s linear infinite;
}

.sanlilas-brand-logo {
  background: var(--san-gold-foil);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: var(--transition-silk);
}

.sanlilas-brand-logo:hover {
  animation: goldTextShimmer 1.8s ease-in-out;
}


/* ── GOLD SHIMMER CTA BUTTON ─────────────────────────────────────── */

.sanlilas-btn-primary,
.couture-shimmer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  font-family: var(--font-atelier);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--san-espresso);
  background: var(--san-gold-foil);
  background-size: 200% auto;
  border: 1px solid var(--san-gold);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition-silk);
  box-shadow: var(--shadow-gold);
}

.sanlilas-btn-primary:hover,
.couture-shimmer-btn:hover {
  animation: goldShimmer 1.5s ease-in-out;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(142, 111, 174, 0.45);
  color: var(--san-espresso);
}

.sanlilas-btn-primary::before,
.couture-shimmer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.6s ease;
}

.sanlilas-btn-primary:hover::before,
.couture-shimmer-btn:hover::before {
  left: 120%;
}


/* ── OUTLINE VARIANT BUTTON ──────────────────────────────────────── */

.couture-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-atelier);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--san-gold);
  background: transparent;
  border: 1px solid var(--san-gold);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-silk);
}

.couture-btn-outline:hover {
  background: var(--san-gold);
  color: var(--san-pearl);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}


/* ── OCEAN VARIANT BUTTON (Costa Aguamarina) ─────────────────────── */

.couture-btn-ocean {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-atelier);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--san-pearl);
  background: linear-gradient(135deg, var(--san-ocean) 0%, var(--san-ocean-deep) 100%);
  border: 1px solid var(--san-ocean);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-silk);
  box-shadow: var(--shadow-ocean);
}

.couture-btn-ocean:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(142, 111, 174, 0.4);
}


/* ── LUXURY BADGES ───────────────────────────────────────────────── */

.couture-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-family: var(--font-atelier);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.couture-badge-gold {
  background: rgba(142, 111, 174, 0.12);
  color: var(--san-gold);
  border: 1px solid rgba(142, 111, 174, 0.3);
}

.couture-badge-ocean {
  background: var(--san-ocean-glass);
  color: var(--san-ocean);
  border: 1px solid rgba(142, 111, 174, 0.25);
}

.couture-badge-terra {
  background: rgba(201, 158, 172, 0.1);
  color: var(--san-terra);
  border: 1px solid rgba(201, 158, 172, 0.25);
}

.couture-badge-18k {
  background: var(--san-espresso);
  color: var(--san-gold-bright);
  border: 1px solid var(--san-gold-bright);
  animation: pulseGold 3s ease-in-out infinite;
}


/* ── GLASSMORPHISM CARDS ─────────────────────────────────────────── */

.couture-glass-card {
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(142, 111, 174, 0.18);
  border-radius: 12px;
  padding: 2rem;
  transition: var(--transition-silk);
}

.couture-glass-card:hover {
  border-color: var(--san-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.couture-glass-ocean {
  background: rgba(142, 111, 174, 0.06);
  border: 1px solid rgba(142, 111, 174, 0.15);
}

.couture-glass-ocean:hover {
  border-color: var(--san-ocean);
  box-shadow: var(--shadow-ocean);
}


/* ── PRODUCT CARD WITH IMAGE ZOOM ────────────────────────────────── */

.couture-product-card {
  position: relative;
  background: var(--san-pearl);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(23, 20, 23, 0.06);
  transition: var(--transition-silk);
}

.couture-product-card:hover {
  border-color: var(--san-gold);
  box-shadow: 0 16px 40px rgba(23, 20, 23, 0.08);
  transform: translateY(-4px);
}

.couture-product-img-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: 133%;
  background: var(--san-cream-warm);
}

.couture-product-img-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-couture);
}

.couture-product-card:hover .couture-product-img-wrapper img {
  transform: scale(1.05);
}


/* ── HERO SECTION ENHANCEMENTS ───────────────────────────────────── */

.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(23, 20, 23, 0.15) 0%,
    rgba(23, 20, 23, 0.50) 60%,
    rgba(23, 20, 23, 0.70) 100%
  ) !important;
  opacity: 1 !important;
}

.hero-subtitle {
  color: var(--san-gold-pale) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero-title {
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.hero-description {
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}


/* ── SECTION ACCENT BAR ──────────────────────────────────────────── */

.section-subtitle::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--san-gold);
  margin-right: 12px;
  vertical-align: middle;
}

.section-subtitle::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--san-gold);
  margin-left: 12px;
  vertical-align: middle;
}


/* ── ENHANCED QUOTE SECTION ──────────────────────────────────────── */

.section-quote {
  background: linear-gradient(135deg, var(--san-espresso) 0%, #1E1510 50%, var(--san-espresso-mid) 100%) !important;
}

.quote-mark {
  color: var(--san-ocean-light) !important;
  font-size: 5rem !important;
  animation: floatGentle 4s ease-in-out infinite;
}


/* ── MANIFESTO SECTION ENHANCEMENT ───────────────────────────────── */

.section-manifesto {
  background: linear-gradient(180deg, var(--san-cream) 0%, var(--san-cream-warm) 100%) !important;
  position: relative;
}

.section-manifesto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--san-gold) 0%, transparent 100%);
}


/* ── CTA SECTION ENHANCEMENT ─────────────────────────────────────── */

.section-cta {
  background: linear-gradient(135deg, var(--san-espresso) 0%, #1E1510 60%, #221812 100%) !important;
  position: relative;
  overflow: hidden;
}

.section-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--san-ocean-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatGentle 8s ease-in-out infinite;
}

.section-cta::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--san-gold-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatGentle 6s ease-in-out infinite reverse;
}


/* ── EDITORIAL MEDIA ENHANCEMENTS ────────────────────────────────── */

.editorial-media-wrapper {
  border-radius: 4px !important;
  box-shadow: var(--shadow-elevated) !important;
}

.editorial-media-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg, rgba(23, 20, 23, 0.15) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.section-history,
.section-media-text {
  background: linear-gradient(135deg, var(--san-sand) 0%, var(--san-cream-warm) 100%) !important;
}


/* ── HEADER GOLD UNDERLINE ACCENT ────────────────────────────────── */

.sanlilas-nav-item a::after {
  background: linear-gradient(90deg, var(--san-ocean), var(--san-gold)) !important;
  height: 2px !important;
}

.sanlilas-nav-item a:hover {
  color: var(--san-gold) !important;
}

.sanlilas-header.is-scrolled,
.sanlilas-header.header-light-page {
  background: rgba(250, 247, 242, 0.94) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 4px 30px rgba(142, 111, 174, 0.1) !important;
}

/* En móvil el drawer de navegación usa position:fixed; backdrop-filter en el header
   crea un "containing block" que rompe el menú tras hacer scroll. En pantallas
   pequeñas se usa fondo sólido sin blur para que el menú siempre quede por encima. */
@media (max-width: 992px) {
  .sanlilas-header.is-scrolled,
  .sanlilas-header.header-light-page {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(250, 247, 242, 0.97) !important;
  }
}


/* ── HEADER BADGE OCEAN ACCENT ───────────────────────────────────── */

.sanlilas-badge {
  background: linear-gradient(135deg, var(--san-ocean) 0%, var(--san-ocean-deep) 100%) !important;
  color: var(--san-pearl) !important;
  font-weight: 800 !important;
}


/* ── FOOTER OCEAN + GOLD TREATMENT ───────────────────────────────── */

.sanlilas-footer {
  background: linear-gradient(180deg, var(--san-espresso) 0%, #0F0A06 100%) !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--san-gold), var(--san-ocean), var(--san-gold), transparent) 1 !important;
}

.footer-title {
  color: var(--san-gold-pale) !important;
  position: relative;
}

.footer-title::after {
  content: '';
  display: block;
  width: 25px;
  height: 1px;
  background: var(--san-ocean);
  margin-top: 0.5rem;
}

.footer-links a {
  transition: var(--transition-silk) !important;
}

.footer-links a:hover {
  color: var(--san-ocean-light) !important;
  padding-left: 6px;
}

.footer-bottom {
  border-color: rgba(142, 111, 174, 0.1) !important;
}

.footer-bottom a:hover {
  color: var(--san-gold) !important;
}


/* ── REVEAL ANIMATION ENHANCEMENTS ───────────────────────────────── */

/* ── STAGGER REVEAL DELAYS ───────────────────────────────────────── */

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }
.reveal-delay-8 { transition-delay: 0.8s; }


/* ── REVEAL VARIANTS (Dirección de entrada) ──────────────────────── */

.reveal-element,
[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(4px);
  will-change: transform, opacity, filter;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-element.reveal-left,
[data-reveal="left"] {
  transform: translateX(-48px) scale(0.985);
}

.reveal-element.reveal-right,
[data-reveal="right"] {
  transform: translateX(48px) scale(0.985);
}

.reveal-element.reveal-zoom,
[data-reveal="zoom"] {
  transform: scale(0.9);
}

.reveal-element.reveal-left.is-visible,
.reveal-element.reveal-right.is-visible,
.reveal-element.reveal-zoom.is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="zoom"].is-visible {
  transform: translateX(0) scale(1);
  filter: blur(0);
}


/* ── SCROLL PROGRESS BAR ─────────────────────────────────────────── */

#sanlilas-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--san-ocean) 0%, var(--san-gold) 50%, var(--san-terra) 100%);
  z-index: 10001;
  box-shadow: 0 0 12px var(--san-gold-glow);
  transition: width 0.08s linear;
  pointer-events: none;
}


/* ── BACK TO TOP BUTTON ──────────────────────────────────────────── */

#sanlilas-back-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9990;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--san-gold);
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--san-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: var(--transition-silk);
  box-shadow: var(--shadow-gold);
}

#sanlilas-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#sanlilas-back-top:hover {
  background: var(--san-gold);
  color: var(--san-pearl);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(142, 111, 174, 0.4);
}


/* ── PARALLAX MEDIA ──────────────────────────────────────────────── */

.hero-media-wrapper,
.hero-media-desktop,
.hero-media-mobile,
.fullscreen-media {
  will-change: transform;
}


/* ── LINK HOVER TRANSITIONS ──────────────────────────────────────── */

a {
  transition: color 0.3s var(--ease-couture);
}


/* ── INPUT & FORM LUXURY FOCUS STATES ────────────────────────────── */

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--san-gold) !important;
  box-shadow: 0 0 0 3px var(--san-gold-glow) !important;
}


/* ── HORIZONTAL RULE / DIVIDER ───────────────────────────────────── */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--san-gold), transparent);
  margin: 2rem 0;
}


/* ── TYPOGRAPHY COUTURE CLASSES ───────────────────────────────────── */

.couture-title-serif {
  font-family: var(--font-couture);
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--san-espresso);
  line-height: 1.15;
}

.couture-subtitle-gold {
  font-family: var(--font-atelier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--san-gold);
  display: inline-block;
  margin-bottom: 0.6rem;
}

.couture-subtitle-ocean {
  font-family: var(--font-atelier);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--san-ocean);
  display: inline-block;
  margin-bottom: 0.6rem;
}


/* ── DIVIDING ORNAMENT (Editorial) ────────────────────────────────── */

.couture-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem auto;
  color: var(--san-gold);
}

.couture-ornament::before,
.couture-ornament::after {
  content: '';
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--san-gold));
}

.couture-ornament::after {
  background: linear-gradient(90deg, var(--san-gold), transparent);
}


/* ── BREADCRUMB ENHANCEMENT ──────────────────────────────────────── */

.prendas-breadcrumb a:hover {
  color: var(--san-ocean) !important;
}


/* ── TOOLBAR / SEARCH BAR ENHANCEMENT ────────────────────────────── */

.prendas-toolbar {
  background: var(--san-cream-warm) !important;
  border: 1px solid rgba(142, 111, 174, 0.14) !important;
  border-radius: 6px !important;
}

.search-input:focus {
  border-color: var(--san-ocean) !important;
  box-shadow: 0 0 0 3px var(--san-ocean-glow) !important;
}


/* ── PRENDAS FILTER PILLS ────────────────────────────────────────── */

.filter-btn {
  transition: var(--transition-silk) !important;
}

.filter-btn:hover {
  color: var(--san-ocean) !important;
  border-color: var(--san-ocean) !important;
}

.filter-btn.is-active {
  background: var(--san-espresso) !important;
  color: var(--san-gold-pale) !important;
  border-color: var(--san-espresso) !important;
}


/* ── PRODUCT CARD ENHANCEMENTS (PRENDAS GRID) ────────────────────── */

.product-card {
  transition: var(--transition-silk) !important;
  border-radius: 6px !important;
}

.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-elevated) !important;
  border-color: var(--san-gold) !important;
}

.product-card .product-image-wrapper {
  overflow: hidden;
}

.product-card .product-image-wrapper img {
  transition: transform 0.7s var(--ease-couture) !important;
}

.product-card:hover .product-image-wrapper img {
  transform: scale(1.06) !important;
}

.product-card .product-price {
  color: var(--san-terra) !important;
  font-weight: 700 !important;
}


/* ── WHATSAPP FLOATING BUTTON ────────────────────────────────────── */

.couture-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--san-ocean) 0%, var(--san-ocean-deep) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(142, 111, 174, 0.4);
  transition: var(--transition-silk);
  text-decoration: none;
  animation: floatGentle 3s ease-in-out infinite;
}

.couture-whatsapp-float:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 35px rgba(142, 111, 174, 0.5);
}

.couture-whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: white;
}


/* ── IMAGE FRAME HOVER RING ──────────────────────────────────────── */

.couture-frame-ring {
  position: relative;
}

.couture-frame-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(142, 111, 174, 0.4);
  border-radius: inherit;
  transform: scale(1.04);
  opacity: 0;
  transition: var(--transition-silk);
  pointer-events: none;
  z-index: 2;
}

.couture-frame-ring:hover::before {
  opacity: 1;
  transform: scale(1);
}


/* ── RESPONSIVE ADJUSTMENTS ──────────────────────────────────────── */

@media (max-width: 768px) {
  .section-subtitle::before,
  .section-subtitle::after {
    width: 18px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .couture-whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 16px;
    right: 16px;
  }

  .couture-whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::after { animation: none; opacity: 0; }
  .couture-whatsapp-float { animation: none; }
  .quote-mark { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   TRANSICIÓN DE PÁGINA (cortina elegante del atelier)
   ══════════════════════════════════════════════════════════════════ */
.sanlilas-page-tx {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.sanlilas-page-tx.is-entry,
.sanlilas-page-tx.is-exit {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.sanlilas-tx-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FAF7F2 0%, #EDE4D9 45%, #EFE3D0 100%);
  opacity: 0;
}

.sanlilas-page-tx.is-entry .sanlilas-tx-veil {
  animation: sanlilasTxVeilOpen 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sanlilas-page-tx.is-exit .sanlilas-tx-veil {
  animation: sanlilasTxVeilClose 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sanlilasTxVeilOpen {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sanlilasTxVeilClose {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.sanlilas-tx-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
}

.sanlilas-tx-logo {
  font-family: var(--font-couture, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: var(--san-gold, #C8A46A);
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(142, 111, 174, 0.35);
}

.sanlilas-tx-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--san-gold, #C8A46A), transparent);
}

.sanlilas-page-tx.is-exit .sanlilas-tx-brand {
  animation: sanlilasTxBrandIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes sanlilasTxBrandIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.sanlilas-page-tx.is-exit .sanlilas-tx-line {
  animation: sanlilasTxLineGrow 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

@keyframes sanlilasTxLineGrow {
  0%   { width: 0; }
  100% { width: 220px; }
}

.sanlilas-page-tx.is-entry .sanlilas-tx-brand {
  animation: sanlilasTxBrandOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sanlilasTxBrandOut {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

.sanlilas-page-tx.is-hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   SKELETON LOADING SHELLS (contenido visible desde el milisegundo 0)
   ══════════════════════════════════════════════════════════════════ */
.sanlilas-skeleton {
  position: relative;
  overflow: hidden;
  background: #ECE4D8;
  border-radius: 10px;
}
.sanlilas-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  animation: sanlilasSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes sanlilasSkeletonShimmer {
  100% { transform: translateX(100%); }
}

.sanlilas-skeleton-line {
  height: 18px;
}
.sanlilas-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sanlilas-skeleton-collection {
  padding: 4rem 2rem;
}
.sanlilas-skeleton-collection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.sanlilas-skeleton-media {
  height: 420px;
}
.sanlilas-skeleton-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 2rem auto 0;
}
.sanlilas-skeleton-product {
  height: 280px;
}
@media (max-width: 900px) {
  .sanlilas-skeleton-products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .sanlilas-skeleton-collection-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sanlilas-skeleton-collection {
    padding: 2.5rem 1.25rem;
  }
  .sanlilas-skeleton-collection .sanlilas-skeleton-media {
    height: 280px;
  }
}


/* SANLILAS - OptimizaciOn mOvIl (solo tactil): el fondo fijo repinta en cada scroll y es muy costoso en moviles/iOS. */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll !important; }
}