/* ==== presentacion.css ==== */
/* ==========================================================================
   SANLILAS - PRESENTACIÓN PAGE STYLESHEET
   Aesthetic: Luxury, Minimalist, Editorial, Sophisticated, Feminine, Timeless
   ========================================================================== */

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

:root {
  /* Color Palette - SANLILAS Prêt-à-Porter (identidad @sanlilas)
     Lila de marca, Champagne, Rosa empolvado, Marfil cálido y Negro elegante */
  --bg-marfil: #FAF7F2;
  --bg-ivory: #FDF9F5;
  --bg-champagne: #EDE4D9;
  --bg-chocolate-dark: #2C211B;
  --bg-chocolate-medium: #4A3A2F;

  --text-dark: #2C211B;
  --text-muted: #8A7A6A;
  --text-light: #FAF7F2;
  --text-light-muted: #F0E6D2;

  --accent-gold: #C8A46A;
  --accent-gold-light: #F0E6D2;
  --accent-gold-deep: #A8895A;
  --accent-ocean: #D8A0A8;
  --accent-ocean-deep: #A8895A;
  --accent-terra: #D8A0A8;
  --border-subtle: rgba(23, 20, 23, 0.08);
  --border-glass: rgba(255, 255, 255, 0.22);
  --glass-bg: rgba(250, 247, 242, 0.78);
  --glass-dark-bg: rgba(23, 20, 23, 0.75);

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

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

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

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-marfil);
  color: var(--text-dark);
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  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;
}

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

img, video {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

/* Dynamic Glass Header */
.sanlilas-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 1.4rem 3rem;
  transition: var(--transition-smooth);
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Línea dorada fina superior (decorativa) */
.sanlilas-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C8A46A 20%, #D4AF37 50%, #C8A46A 80%, transparent 100%);
  opacity: 0.75;
  transition: opacity 0.4s ease;
}

.sanlilas-header.is-scrolled,
.sanlilas-header.header-light-page {
  padding: 0.85rem 3rem;
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(200, 164, 106, 0.35);
  box-shadow: 0 6px 40px rgba(200, 164, 106, 0.12), 0 2px 12px rgba(44, 33, 27, 0.06);
}

/* 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;
    -webkit-backdrop-filter: none;
    background: rgba(250, 247, 242, 0.97);
  }
}

/* En el hero oscuro, al scrollear también usa vidrio cálido para legibilidad */
.sanlilas-header.is-scrolled {
  background: rgba(250, 247, 242, 0.92);
}

.sanlilas-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.sanlilas-brand-logo {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--text-light);
  text-transform: uppercase;
  transition: var(--transition-smooth);
  background: linear-gradient(135deg, #F5E6CA 0%, #C8A46A 45%, #A8895A 70%, #F5E6CA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px rgba(200, 164, 106, 0.25);
  position: relative;
}

/* Cuando el header pasa a claro, el logo mantiene el dorado sobre fondo claro */
.sanlilas-header.is-scrolled .sanlilas-brand-logo,
.sanlilas-header.header-light-page .sanlilas-brand-logo {
  background: linear-gradient(135deg, #B8904D 0%, #8A6A2F 45%, #A8895A 70%, #B8904D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px rgba(200, 164, 106, 0.35);
}

.sanlilas-nav-links {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  list-style: none;
}

.sanlilas-nav-item a {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.9;
  transition: var(--transition-smooth);
  position: relative;
  padding-bottom: 6px;
  font-weight: 500;
}

.sanlilas-header.is-scrolled .sanlilas-nav-item a,
.sanlilas-header.header-light-page .sanlilas-nav-item a {
  color: var(--text-dark);
}

.sanlilas-nav-item a:hover {
  opacity: 1;
  color: var(--accent-gold);
}

.sanlilas-nav-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C8A46A, #D4AF37, #C8A46A);
  box-shadow: 0 0 8px rgba(200, 164, 106, 0.5);
  transition: width 0.35s var(--ease-couture, cubic-bezier(0.16, 1, 0.3, 1));
}

.sanlilas-nav-item a:hover::after,
.sanlilas-nav-item.is-active a::after {
  width: 100%;
}

.sanlilas-header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--text-light);
}

.sanlilas-header.is-scrolled .sanlilas-header-actions,
.sanlilas-header.header-light-page .sanlilas-header-actions {
  color: var(--text-dark);
}

.sanlilas-action-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.sanlilas-action-btn:hover {
  color: var(--accent-gold);
  background: rgba(200, 164, 106, 0.12);
  transform: translateY(-1px);
}

/* Badge for Cart / Wishlist */
.sanlilas-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: linear-gradient(135deg, #D4AF37, #C8A46A);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(200, 164, 106, 0.5);
  border: 1.5px solid #fff;
}

/* Mobile Menu Button */
.sanlilas-mobile-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(200, 164, 106, 0.5);
  border-radius: 10px;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
  padding: 0.45rem 0.6rem;
  transition: var(--transition-smooth);
}

.sanlilas-mobile-toggle:hover {
  background: rgba(200, 164, 106, 0.15);
}

/* Botón X para cerrar el menú móvil + bloqueo de scroll al abrirlo */
.sanlilas-nav-close {
  display: none;
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 106, 0.5);
  background: rgba(250, 247, 242, 0.92);
  color: #A8895A;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  transition: all 0.2s ease;
}

.sanlilas-nav-close:hover {
  background: #A8895A;
  color: #FFF;
}

body.sls-menu-open {
  overflow: hidden;
}

@media (max-width: 992px) {
  .sanlilas-mobile-toggle {
    display: block;
  }
  .sanlilas-nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(160deg, #FDFBF7 0%, #F6F0E6 55%, #EDE4D9 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-smooth);
    z-index: 10002;
  }
  .sanlilas-nav-links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .sanlilas-nav-item a {
    font-size: 1.25rem;
    color: #4A3A2F !important;
    opacity: 1;
  }
  .sanlilas-nav-item a:hover,
  .sanlilas-nav-item.is-active a {
    color: #A8895A !important;
  }
}

/* HERO SECTION */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #35271F 0%, #1D140E 60%, #100A06 100%);
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 100svh; /* viewport estable: evita el CLS por la barra del navegador móvil */
    min-height: 90vh;
  }
}

/* Capa de degradado cinematográfico ligero (Vivid & Translucent) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(23, 20, 23, 0.12) 0%, rgba(16, 10, 6, 0.35) 100%);
}

/* Luz Ambiental Cinematográfica Multicolor SANLILAS */
.hero-light-sweep {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(142, 111, 174, 0.22) 0%, rgba(142, 111, 174, 0.12) 35%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: lightSweep 18s ease-in-out infinite alternate;
}

@keyframes lightSweep {
  0% { transform: translate(-5%, -5%) rotate(0deg); }
  100% { transform: translate(5%, 5%) rotate(10deg); }
}

.hero-light-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
}

.hero-light-orb-a {
  width: 420px;
  height: 420px;
  top: 10%;
  right: 8%;
  background: radial-gradient(circle, rgba(142, 111, 174, 0.38), rgba(142, 111, 174, 0.08) 70%, transparent);
  animation: orbGlow 14s ease-in-out infinite alternate;
}

.hero-light-orb-b {
  width: 480px;
  height: 480px;
  bottom: 8%;
  left: 3%;
  background: radial-gradient(circle, rgba(142, 111, 174, 0.32), rgba(142, 111, 174, 0.06) 70%, transparent);
  animation: orbGlow 20s ease-in-out infinite alternate-reverse;
}

@keyframes orbGlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.35; }
  100% { transform: scale(1.25) translate(40px, -30px); opacity: 0.65; }
}

/* Liquid Glass Shards (Ocultas para vista limpia e impecable) */
.hero-glass-shard {
  display: none !important;
}

.hero-glass-shard::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  animation: glassShimmer 8s linear infinite;
}

@keyframes glassShimmer {
  0% { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

.glass-shard-a {
  top: 18%;
  left: 6%;
  width: 160px;
  height: 160px;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: morphismFloatA 16s ease-in-out infinite alternate;
}

.glass-shard-b {
  bottom: 18%;
  right: 8%;
  width: 200px;
  height: 200px;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  animation: morphismFloatB 22s ease-in-out infinite alternate;
}

.glass-shard-c {
  top: 48%;
  right: 22%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  animation: morphismFloatA 12s ease-in-out infinite alternate-reverse;
}

@keyframes morphismFloatA {
  0% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    border-radius: 58% 42% 40% 60% / 55% 35% 65% 45%;
    transform: translate(18px, -28px) rotate(8deg);
  }
  100% {
    border-radius: 35% 65% 55% 45% / 60% 50% 50% 40%;
    transform: translate(-14px, 18px) rotate(-6deg);
  }
}

@keyframes morphismFloatB {
  0% {
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    border-radius: 45% 55% 65% 35% / 40% 50% 50% 60%;
    transform: translate(-24px, 24px) rotate(-10deg);
  }
  100% {
    border-radius: 70% 30% 50% 50% / 55% 45% 55% 45%;
    transform: translate(18px, -18px) rotate(7deg);
  }
}

.hero-media-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #000;
}

.hero-media-desktop,
.hero-media-mobile,
.hero-media-single {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* El video aparece (fade-in suave) SOLO cuando el primer fotograma está listo.
   Hasta entonces permanece el fondo negro, sin imágenes intermedias ni destellos. */
.hero-media-desktop.is-ready,
.hero-media-mobile.is-ready,
.hero-media-single.is-ready {
  opacity: 1;
  transform: scale(1);
}

/* Revelado cinematográfico: fundido + zoom suave (solo opacity/transform, barato en GPU) */
@keyframes heroCinemaReveal {
  0%   { opacity: 0; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Barrido de luz dorada que cruza el hero al aparecer */
.hero-media-wrapper::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,246,230,0.16) 45%, rgba(142,111,174,0.28) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: heroGoldSweep 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

@keyframes heroGoldSweep {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}

.hero-media-mobile {
  display: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.hero-content-container {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 0 2rem;
  text-align: center;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-subtitle {
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-gold-light);
  margin-bottom: 1.2rem;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  /* Efecto texto con gradiente dorado brillante */
  background: linear-gradient(135deg, #F0E6D2 0%, #C8A46A 30%, #F4E3BD 50%, #C8A46A 70%, #F0E6D2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 24px rgba(142, 111, 174, 0.35));
  animation: heroTitleGlow 5s ease-in-out infinite;
  position: relative;
}

@keyframes heroTitleGlow {
  0%, 100% { filter: drop-shadow(0 4px 18px rgba(142, 111, 174, 0.25)); }
  50% { filter: drop-shadow(0 6px 34px rgba(142, 111, 174, 0.55)); }
}

/* Línea decorativa bajo el título con animación de expansión */
.hero-title::after {
  content: '';
  display: block;
  width: 120px;
  height: 2px;
  margin: 1.6rem auto 0;
  background: linear-gradient(90deg, transparent, #C8A46A, transparent);
  animation: heroLineGrow 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes heroLineGrow {
  from { width: 0; opacity: 0; }
  to { width: 120px; opacity: 1; }
}

.hero-description {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.9;
  max-width: 680px;
  color: var(--text-light-muted);
  margin-bottom: 2.5rem;
}

.sanlilas-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dark);
  background-color: var(--bg-marfil);
  border: 1px solid var(--accent-gold);
  border-radius: 0;
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
}

.sanlilas-btn-primary:hover {
  background-color: var(--accent-gold);
  color: #fff;
  box-shadow: 0 8px 25px rgba(142, 111, 174, 0.3);
  transform: translateY(-2px);
}

/* SECTION BASE STYLES */
.presentation-section {
  position: relative;
  padding: 8rem 2rem;
  width: 100%;
  overflow: hidden;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-subtitle {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-weight: 600;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}

.section-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.8;
  font-weight: 300;
}

/* MANIFESTO SECTION */
.section-manifesto {
  background-color: var(--bg-marfil);
  text-align: center;
  padding: 10rem 2rem;
}

.section-manifesto .section-title {
  font-size: 3.5rem;
  font-style: italic;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.section-manifesto .section-description {
  max-width: 700px;
  margin: 0 auto;
}

/* HISTORY / EDITORIAL MEDIA TEXT SECTION */
.section-history,
.section-media-text {
  background-color: var(--bg-champagne);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.editorial-grid.reverse {
  grid-template-areas: "media content";
}

.editorial-media-wrapper {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(23, 20, 23, 0.08);
}

.editorial-media-wrapper img,
.editorial-media-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-media-wrapper:hover img {
  transform: scale(1.03);
}

/* QUOTE SECTION */
.section-quote {
  background-color: var(--bg-chocolate-medium);
  color: var(--text-light);
  text-align: center;
  padding: 9rem 2rem;
}

.quote-mark {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: 1rem;
}

.quote-text {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  max-width: 850px;
  margin: 0 auto 2rem;
  line-height: 1.3;
}

.quote-author {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-gold-light);
}

/* FULLSCREEN IMAGE / VIDEO SECTION */
.section-fullscreen {
  position: relative;
  width: 100%;
  height: 80vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-fullscreen .fullscreen-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-fullscreen .fullscreen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 20, 23, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  padding: 2rem;
}

/* CLOSING CTA SECTION */
.section-cta {
  background-color: var(--bg-chocolate-dark);
  color: var(--text-light);
  text-align: center;
  padding: 10rem 2rem;
  position: relative;
}

.section-cta .section-title {
  color: var(--text-light);
  font-size: 3.5rem;
}

.section-cta .section-description {
  color: var(--text-light-muted);
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* REVEAL ANIMATIONS */
.reveal-element {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(4px);
  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);
  will-change: opacity, transform, filter;
}

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

/* Variantes direccionales */
.reveal-element.reveal-left {
  transform: translateX(-48px);
}
.reveal-element.reveal-left.is-visible {
  transform: translateX(0);
}
.reveal-element.reveal-right {
  transform: translateX(48px);
}
.reveal-element.reveal-right.is-visible {
  transform: translateX(0);
}
.reveal-element.reveal-zoom {
  transform: scale(0.9);
}
.reveal-element.reveal-zoom.is-visible {
  transform: scale(1);
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-element {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* FOOTER */
.sanlilas-footer {
  background-color: var(--bg-chocolate-dark);
  color: var(--text-light-muted);
  padding: 5rem 3rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}

.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-brand .sanlilas-brand-logo {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  display: block;
}

.footer-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 992px) {
  .hero-title {
    font-size: 3.2rem;
  }
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .editorial-media-wrapper {
    height: 400px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .sanlilas-header {
    padding: 1rem 1.2rem;
  }
  .sanlilas-header-inner {
    gap: 0.7rem;
  }
  .sanlilas-brand-logo {
    font-size: 1.35rem;
    letter-spacing: 0.2em;
    white-space: nowrap;
  }
  .sanlilas-header-actions {
    gap: 0.8rem;
  }
  .sanlilas-action-btn[aria-label="Buscar productos"] {
    display: none;
  }
  .sanlilas-nav-links {
    position: fixed;
    top: 0;
    left: auto;
    right: -100%;
    width: 82%;
    max-width: 330px;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(160deg, #FDFBF7 0%, #F6F0E6 55%, #EDE4D9 100%);
    flex-direction: column;
    justify-content: center;
    gap: 2.1rem;
    padding: 2.5rem 2rem;
    transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10002;
    box-shadow: -20px 0 60px rgba(44, 33, 27, 0.18);
    border-left: 1px solid rgba(200, 164, 106, 0.4);
  }
  .sanlilas-nav-links::before {
    content: 'SANLILAS';
    font-family: var(--font-serif);
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: #A8895A;
    background: linear-gradient(135deg, #B8904D, #8A6A2F, #A8895A);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 1.4rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(200, 164, 106, 0.35);
  }
  .sanlilas-nav-item a {
    color: #4A3A2F;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    opacity: 1;
  }
  .sanlilas-nav-item.is-active a {
    color: #A8895A;
  }
  .sanlilas-nav-links.is-open {
    right: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .sanlilas-mobile-toggle {
    display: block;
  }
  .hero-media-desktop {
    display: none;
  }
  .hero-media-mobile {
    display: block;
  }
  .hero-title {
    font-size: 2.9rem;
  }
  .hero-description {
    font-size: 0.95rem;
  }
  .presentation-section {
    padding: 5rem 1.5rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .quote-text {
    font-size: 1.7rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ── MÓVIL PEQUEÑO (360–480px): header completo sin overflow ── */
@media (max-width: 480px) {
  .sanlilas-header {
    padding: 0.7rem 0.9rem;
  }
  .sanlilas-header-inner {
    gap: 0.4rem;
  }
  .sanlilas-brand-logo {
    font-size: 1.02rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sanlilas-header-actions {
    gap: 0.35rem;
    flex-shrink: 0;
  }
  .sanlilas-action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.92rem;
  }
  .sanlilas-action-btn[aria-label="Buscar productos"] {
    display: none;
  }
  .sanlilas-mobile-toggle {
    padding: 0.35rem;
  }
  .hero-title {
    font-size: 2.1rem;
  }
  .hero-description {
    font-size: 0.9rem;
  }
  .section-title {
    font-size: 1.9rem;
  }
  .presentation-section {
    padding: 3.5rem 1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   SANLILAS PRESENTACIÓN — LIQUID GLASS & CINEMATIC LIGHT
   ══════════════════════════════════════════════════════════════════ */

/* ── LUZ AMBIENTAL CINEMATOGRÁFICA (hero) ───────────────────────── */

.hero-light-sweep {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 70%;
  height: 140%;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 235, 200, 0.08) 45%,
    rgba(255, 250, 240, 0.14) 50%,
    rgba(255, 235, 200, 0.08) 55%,
    transparent 80%
  );
  filter: blur(30px);
  pointer-events: none;
  animation: lightSweep 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes lightSweep {
  0%   { transform: translateX(-8%) skewX(-8deg); opacity: 0.4; }
  50%  { transform: translateX(120%) skewX(-8deg); opacity: 1; }
  100% { transform: translateX(280%) skewX(-8deg); opacity: 0.4; }
}

.hero-light-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.hero-light-orb-a {
  width: 460px;
  height: 460px;
  bottom: -120px;
  left: 8%;
  background: radial-gradient(circle, rgba(142, 111, 174, 0.28) 0%, transparent 70%);
  animation: orbFloat 11s ease-in-out infinite;
}

.hero-light-orb-b {
  width: 380px;
  height: 380px;
  top: -80px;
  right: 6%;
  background: radial-gradient(circle, rgba(142, 111, 174, 0.18) 0%, transparent 70%);
  animation: orbFloat 9s ease-in-out infinite reverse;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -20px) scale(1.06); }
  66% { transform: translate(-18px, 16px) scale(0.97); }
}

/* ── ELEMENTOS LIQUID GLASS FLOTANTES ────────────────────────────── */

.hero-glass-shard {
  position: absolute;
  z-index: 3;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
  pointer-events: none;
  will-change: transform;
}

.glass-shard-a {
  width: 130px;
  height: 180px;
  top: 16%;
  left: 6%;
  transform: rotate(-12deg);
  animation: shardFloat 9s ease-in-out infinite;
}

.glass-shard-b {
  width: 90px;
  height: 130px;
  bottom: 18%;
  left: 22%;
  transform: rotate(14deg);
  animation: shardFloat 11s ease-in-out infinite reverse;
  background: linear-gradient(135deg, rgba(27,138,143,0.16), rgba(255,255,255,0.03));
}

.glass-shard-c {
  width: 110px;
  height: 150px;
  top: 24%;
  right: 8%;
  transform: rotate(9deg);
  animation: shardFloat 10s ease-in-out infinite 1s;
}

@keyframes shardFloat {
  0%, 100% { transform: rotate(var(--rot, -12deg)) translateY(0); }
  50% { transform: rotate(var(--rot, -12deg)) translateY(-18px); }
}

.glass-shard-a { --rot: -12deg; }
.glass-shard-b { --rot: 14deg; }
.glass-shard-c { --rot: 9deg; }

/* ── ANIMACIÓN DE ENTRADA DEL HERO ───────────────────────────────── */

.hero-entrance-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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;
}

.hero-anim-item[data-anim="1"].is-in,
.hero-anim-item[data-anim="2"].is-in,
.hero-anim-item[data-anim="3"].is-in,
.hero-anim-item[data-anim="4"].is-in,
.hero-anim-item[data-anim="5"].is-in {
  transition-delay: 0s !important;
}

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

.hero-scroll-hint {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.hero-scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--accent-gold-light), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

.hero-scroll-text {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

@keyframes scrollPulse {
  0% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
}

/* ── SECCIÓN COLECCIONES (Luxury Grid) ───────────────────────────── */

.section-collections {
  padding: 7rem 2rem;
}

.section-collections .section-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.collections-lux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.collection-lux-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-champagne);
  box-shadow: 0 2px 12px rgba(23, 20, 23, 0.06);
  transition: transform 0.5s var(--ease-couture, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.5s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.collection-lux-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(23, 20, 23, 0.18);
}

.collection-lux-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.collection-lux-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.collection-lux-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,17,11,0) 30%, rgba(26,17,11,0.55) 78%, rgba(26,17,11,0.75) 100%);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

.collection-lux-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  color: #fff;
  z-index: 2;
}

.collection-lux-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold-light);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.collection-lux-name {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0.4rem 0 0.8rem;
  transform: translateY(10px);
  transition: transform 0.5s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.collection-lux-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.collection-lux-card:hover .collection-lux-media img {
  transform: scale(1.05);
}

.collection-lux-card:hover .collection-lux-overlay {
  opacity: 1;
}

.collection-lux-card:hover .collection-lux-eyebrow,
.collection-lux-card:hover .collection-lux-link {
  opacity: 1;
  transform: translateY(0);
}

.collection-lux-card:hover .collection-lux-name {
  transform: translateY(0);
}

/* ── SECCIÓN EXPERIENCIA (editorial composition) ─────────────────── */

.section-experience {
  padding: 7rem 2rem;
  overflow: hidden;
}

.experience-composition {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.experience-media-main {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(23, 20, 23, 0.14);
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.experience-media-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.experience-media-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(142,111,174,0.16), transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.experience-glass-card {
  position: relative;
  z-index: 3;
  background: rgba(255, 253, 249, 0.55);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(142, 111, 174, 0.25);
  border-radius: 16px;
  padding: 2.6rem 2.4rem;
  margin: -90px 0 0 -60px;
  box-shadow: 0 24px 60px rgba(23, 20, 23, 0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

.experience-glass-emblem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(142, 111, 174, 0.3);
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 30px rgba(142, 111, 174, 0.18);
  animation: floatGentle 5s ease-in-out infinite;
}

.experience-media-secondary {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 220px;
  height: 300px;
  border-radius: 6px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,0.6);
  box-shadow: 0 20px 50px rgba(23, 20, 23, 0.2);
}

.experience-media-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── REVEAL VARIANTS PARA PRESENTACIÓN ───────────────────────────── */

.reveal-element.reveal-zoom {
  transform: scale(0.94);
}

.reveal-element.reveal-zoom.is-visible {
  transform: scale(1);
}

.reveal-element.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-element.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-element.reveal-delay-4 { transition-delay: 0.36s; }
.reveal-element.reveal-delay-5 { transition-delay: 0.48s; }

/* Aparición especial de la tarjeta editorial (más notable) */
.editorial-glass-card.reveal-element {
  transform: translateY(60px) scale(0.92) rotate(-1.5deg);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), opacity 1.1s cubic-bezier(0.16,1,0.3,1);
}
.editorial-glass-card.reveal-element.is-visible {
  transform: translateY(0) scale(1) rotate(0deg);
  opacity: 1;
}

/* ── RESPONSIVE PRESENTACIÓN MEJORADA ────────────────────────────── */

@media (max-width: 992px) {
  .collections-lux-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .experience-composition {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .experience-glass-card {
    margin: -50px 0 0 0;
  }
  .experience-media-secondary {
    display: none;
  }
}

@media (max-width: 600px) {
  .collections-lux-grid {
    grid-template-columns: 1fr;
  }
  .glass-shard-a, .glass-shard-c { display: none; }
  .hero-light-orb-a { width: 280px; height: 280px; }
  .hero-light-orb-b { width: 240px; height: 240px; }
  .experience-media-main img {
    min-height: 320px;
  }
  .experience-glass-card {
    padding: 2rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light-sweep, .hero-light-orb, .hero-glass-shard,
  .hero-scroll-line, .experience-glass-emblem {
    animation: none !important;
  }
  .hero-anim-item {
    opacity: 1;
    transform: none;
  }
  .hero-scroll-line {
    background: var(--accent-gold-light);
  }
  .collection-lux-media img {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   BLOQUE EDITORIAL (revista de moda)
   ══════════════════════════════════════════════════════════════════ */

.section-editorial {
  padding: 7rem 2rem;
  overflow: hidden;
}

.editorial-composition {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.section-editorial.is-reverse .editorial-composition {
  direction: rtl;
}
.section-editorial.is-reverse .editorial-composition > * {
  direction: ltr;
}

.editorial-main-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(23, 20, 23, 0.18), 0 0 0 1px rgba(142, 111, 174, 0.35), 0 0 50px rgba(142,111,174,0.12);
  aspect-ratio: 4 / 5;
  min-height: 0;
  background: linear-gradient(145deg, #2C211B, #2C211B);
}

.editorial-main-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
}

.section-editorial:hover .editorial-main-media img {
  transform: scale(1.04);
}

/* Marco decorativo dorado alrededor de la foto principal */
.editorial-main-media::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(142, 111, 174, 0.5);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  transition: inset 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.4s;
}
.section-editorial:hover .editorial-main-media::after {
  inset: 8px;
  border-color: rgba(232, 213, 166, 0.8);
}

.editorial-secondary-media {
  position: absolute;
  bottom: -34px;
  left: 8%;
  width: 210px;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.85);
  box-shadow: 0 24px 60px rgba(23, 20, 23, 0.28), 0 0 0 1px rgba(142,111,174,0.4), 0 0 40px rgba(142,111,174,0.15);
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.section-editorial:hover .editorial-secondary-media {
  transform: translateY(-6px);
}

.section-editorial.is-reverse .editorial-secondary-media {
  left: auto;
  right: 8%;
}

.editorial-secondary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-glass-card {
  position: relative;
  z-index: 3;
  background: linear-gradient(150deg, rgba(255, 253, 249, 0.88), rgba(245, 239, 230, 0.78));
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid rgba(142, 111, 174, 0.45);
  border-radius: 24px;
  padding: 3.4rem 3rem;
  margin: -88px 0 0 -48px;
  box-shadow: 0 34px 80px rgba(23, 20, 23, 0.18), inset 0 1px 0 rgba(255,255,255,0.8), 0 0 70px rgba(142,111,174,0.16);
  overflow: hidden;
  transform: translateZ(0);
}

.section-editorial.is-reverse .editorial-glass-card {
  margin: -84px -46px 0 0;
}

/* Contenido de la tarjeta por encima de las luces */
.editorial-card-content {
  position: relative;
  z-index: 4;
}

.editorial-eyebrow {
  color: var(--accent-gold, #C8A46A);
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1.1rem;
  background: linear-gradient(90deg, #C8A46A, #F0E6D2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.editorial-title {
  font-size: 2.7rem;
  line-height: 1.12;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.editorial-desc {
  max-width: 520px;
  line-height: 1.9;
  color: var(--col-cafe-muted, #8A7A6A);
  padding-left: 1.2rem;
  border-left: 2.5px solid rgba(142, 111, 174, 0.55);
  font-size: 1.02rem;
}

.editorial-cta {
  margin-top: 2.2rem;
}

/* Luces doradas desenfocadas animadas (fondo de la tarjeta) */
.editorial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

.editorial-glow-1 {
  width: 220px;
  height: 220px;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(232,213,166,0.85), rgba(142,111,174,0.15) 70%);
  animation: editorialGlowFloat 9s ease-in-out infinite;
}

.editorial-glow-2 {
  width: 180px;
  height: 180px;
  bottom: -50px;
  left: -30px;
  background: radial-gradient(circle, rgba(142,111,174,0.7), rgba(244,227,189,0.1) 72%);
  animation: editorialGlowFloat 12s ease-in-out infinite reverse;
}

.editorial-glow-3 {
  width: 130px;
  height: 130px;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, rgba(244,227,189,0.8), rgba(142,111,174,0.12) 70%);
  animation: editorialGlowFloat 7s ease-in-out infinite 1.5s;
}

@keyframes editorialGlowFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate3d(18px, -22px, 0) scale(1.12); opacity: 0.85; }
  66% { transform: translate3d(-14px, 16px, 0) scale(0.92); opacity: 0.55; }
}

/* Efecto de brillo barrido sobre la tarjeta */
.editorial-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 30%, rgba(232,213,166,0.18) 45%, rgba(255,255,255,0.22) 50%, rgba(232,213,166,0.14) 55%, transparent 70%);
  background-size: 250% 100%;
  animation: editorialSheen 7s ease-in-out infinite;
  pointer-events: none;
  border-radius: 22px;
}

@keyframes editorialSheen {
  0% { background-position: 130% 0; }
  55% { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}


/* ══════════════════════════════════════════════════════════════════
   BLOQUE DE MARCA (espacio negativo)
   ══════════════════════════════════════════════════════════════════ */

.section-brand {
  padding: 10rem 2rem;
}

.brand-block {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.brand-block-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-gold);
  font-weight: 700;
  display: block;
  margin-bottom: 1.2rem;
}

.brand-block-title {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0 0 1.8rem;
}

.brand-block-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 2;
  max-width: 620px;
  margin: 0 auto 2.4rem;
}

.brand-block-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-gold);
  padding-bottom: 0.4rem;
  transition: color 0.3s var(--ease-couture, cubic-bezier(0.16,1,0.3,1)), gap 0.3s var(--ease-couture, cubic-bezier(0.16,1,0.3,1));
}

.brand-block-link:hover {
  color: var(--accent-gold);
  gap: 0.9rem;
}


/* ══════════════════════════════════════════════════════════════════
   INDICADOR DE SCROLL (botón funcional)
   ══════════════════════════════════════════════════════════════════ */

.hero-scroll-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hero-scroll-btn:focus-visible {
  outline: 2px solid var(--accent-gold-light);
  outline-offset: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE PRESENTACIÓN EXTENDIDA
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   BEACH & OCEAN LUXURY PARTICLES & WATER CAUSTICS
   ══════════════════════════════════════════════════════════════════ */

#sanlilas-beach-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
  opacity: 0.88;
}

/* Water Caustics Shimmer Layer */
.ocean-caustics-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(142, 111, 174, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(142, 111, 174, 0.15) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 50%, rgba(250, 247, 242, 0.08) 0%, transparent 70%);
  mix-blend-mode: overlay;
  animation: oceanCausticsPulse 8s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes oceanCausticsPulse {
  0% {
    opacity: 0.4;
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.06) translate3d(-12px, 8px, 0);
  }
  100% {
    opacity: 0.55;
    transform: scale(1.03) translate3d(8px, -6px, 0);
  }
}

/* Golden Shell & Pearl Emblem Badges */
.sea-emblem-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FAF7F2 0%, #F4E6D2 60%, #C8A46A 100%);
  border: 1.5px solid rgba(142, 111, 174, 0.6);
  box-shadow: 0 10px 30px rgba(142, 111, 174, 0.3), inset 0 2px 6px rgba(255, 255, 255, 0.9);
  margin-bottom: 1.4rem;
  position: relative;
  animation: seaEmblemFloat 4s ease-in-out infinite alternate;
}

@keyframes seaEmblemFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-7px) rotate(4deg); }
}

.sea-emblem-badge svg {
  color: #2C211B;
  filter: drop-shadow(0 2px 4px rgba(142, 111, 174, 0.4));
}

/* Fluid Wave Divider SVG */
.ocean-wave-divider {
  width: 100%;
  height: 60px;
  display: block;
  margin-top: -1px;
}

@media (max-width: 992px) {
  .editorial-composition {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .editorial-glass-card {
    margin: -50px 0 0 0;
  }
  .section-editorial.is-reverse .editorial-glass-card {
    margin: -50px 0 0 0;
  }
  .brand-block-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 600px) {
  .editorial-secondary-media {
    display: none;
  }
  .editorial-main-media img {
    min-height: 300px;
  }
  .editorial-glass-card {
    padding: 2rem 1.5rem;
  }
  .brand-block-title {
    font-size: 2rem;
  }
}
/* ── Fondo cinematografico lujoso (cuando la seccion no tiene foto) ── */
.fullscreen-media-luxury {
  position: relative;
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(142,111,174,0.40), transparent 60%),
    radial-gradient(1000px 700px at 85% 35%, rgba(74,56,44,0.60), transparent 60%),
    linear-gradient(160deg, #241a13 0%, #3a2c21 48%, #1c140e 100%);
  animation: sanlilasLuxuryBreath 12s ease-in-out infinite alternate;
}
.fullscreen-media-luxury::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(228,201,143,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sanlilasLuxurySweep 5.5s ease-in-out infinite;
}
@keyframes sanlilasLuxuryBreath {
  0%   { filter: brightness(0.92); }
  100% { filter: brightness(1.35); }
}
@keyframes sanlilasLuxurySweep {
  0%, 60%  { transform: translateX(-100%); }
  100%     { transform: translateX(100%); }
}

/* ── Titulo de seccion con brillo dorado animado ── */
.presentation-section .section-title {
  background: linear-gradient(90deg, #2C211B 0%, #C8A46A 50%, #2C211B 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sanlilasTitleShimmer 7s ease-in-out infinite;
}
@keyframes sanlilasTitleShimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
/* ==== sanlilas-couture.css ==== */
/* ==========================================================================
   SANLILAS — COUTURE DESIGN SYSTEM v3.0
   Inspirado en el Instagram @sanlilas: boho-luxe artesanal, "hora dorada",
   mar y naturaleza colombiana. Crochet, macramé, perlas cultivadas y
   herrajes en oro 18k. Cúcuta, Colombia.

   Paleta del feed:
   • Aguamarina profundo / Turquesa  (#C8A46A) — Costa Aguamarina
   • Terracota / Cacao               (#D8A0A8) — Velvet Terra, Costa Cacao
   • Dorado 18k                      (#C8A46A) — herrajes, detalles
   • Arena cálida                    (#EDE4D9) — fondos cálidos
   • Marfil / Blanco perla           (#FAF7F2) — fondos e highlights
   ========================================================================== */

/* ── DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
  /* Primary: Golden Hour / Oro 18k */
  --san-gold: #C8A46A;
  --san-gold-bright: #D8A0A8;
  --san-gold-deep: #A8895A;
  --san-gold-pale: #F0E6D2;
  --san-gold-glow: rgba(142, 111, 174, 0.35);
  --san-gold-foil: linear-gradient(135deg, #C8A46A 0%, #D8A0A8 40%, #D8A0A8 100%);

  /* Secondary: Ocean / Aguamarina profundo */
  --san-ocean: #C8A46A;
  --san-ocean-deep: #A8895A;
  --san-ocean-light: #F0E6D2;
  --san-ocean-glow: rgba(142, 111, 174, 0.28);
  --san-ocean-glass: rgba(142, 111, 174, 0.08);

  /* Tertiary: Terra / Cacao */
  --san-terra: #D8A0A8;
  --san-terra-deep: #A8895A;
  --san-terra-light: #F0E6D2;

  /* Neutrals: Arena & Espresso */
  --san-cream: #FAF7F2;
  --san-cream-warm: #EDE4D9;
  --san-sand: #EDE4D9;
  --san-espresso: #2C211B;
  --san-espresso-mid: #2C211B;
  --san-espresso-muted: #8A7A6A;
  --san-pearl: #FFFFFF;

  /* 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(23, 20, 23, 0.06);
  --shadow-gold: 0 8px 30px rgba(142, 111, 174, 0.22);
  --shadow-ocean: 0 8px 30px rgba(142, 111, 174, 0.16);
  --shadow-elevated: 0 20px 60px rgba(23, 20, 23, 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);
}

/* 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;
}


/* ── 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;
}


/* ==== presentacion-luxury.css ==== */
/* =====================================================================
   SANLILAS — Presentación: refinamiento de lujo (efectos en lugares
   específicos: dividers entre secciones, acentos dorados, tarjetas glass)
   ===================================================================== */

/* ── Divisores de ola entre secciones (se revelan al hacer scroll) ── */
.sanlux-divider {
  position: relative;
  height: 46px;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.sanlux-divider.is-visible {
  opacity: 1;
  transform: none;
}

.sanlux-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sanlux-divider .w-line {
  fill: none;
  stroke: url(#sanluxDivLine);
  stroke-width: 1.8;
}

.sanlux-divider .w-fill {
  fill: url(#sanluxDivGrad);
}

/* Destello dorado que recorre la ola al ser visible */
.sanlux-divider.is-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.75) 50%, transparent 85%);
  transform: translateX(-100%);
  animation: sanluxDividerShimmer 2.8s ease-in-out infinite;
  animation-delay: 0.35s;
}

@keyframes sanluxDividerShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ── Revelado fluido y elegante de secciones/tarjetas ────────────── */
.reveal-element {
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s ease;
  filter: blur(8px);
  will-change: transform, opacity, filter;
}

.reveal-element.is-visible {
  filter: blur(0);
}

/* ── Acento dorado + perla bajo los títulos de sección ───────────── */
.section-head .section-title {
  position: relative;
}

.section-head .section-title::after {
  content: "●";
  display: block;
  margin-top: 0.85rem;
  font-size: 0.7rem;
  line-height: 0.5;
  color: #C8A46A;
  background: linear-gradient(90deg, transparent 0%, #C8A46A 50%, transparent 100%);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Tarjetas glass: más lujo y elevación al hover ───────────────── */
.experience-glass-card,
.editorial-glass-card {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: rgba(250, 247, 242, 0.55) !important;
  border: 1px solid rgba(142, 111, 174, 0.4) !important;
  box-shadow:
    0 30px 60px rgba(23, 20, 23, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease !important;
}

.experience-glass-card:hover,
.editorial-glass-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 44px 90px rgba(23, 20, 23, 0.2),
    0 0 0 1px rgba(142, 111, 174, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Tarjetas de colección */
.collection-lux-card {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease;
}

.collection-lux-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(23, 20, 23, 0.22);
}

/* ── Marco de luz dorado sutil en las tarjetas de experiencia ────── */
.experience-media-main,
.editorial-main-media {
  position: relative;
}

.experience-media-main::after,
.editorial-main-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(142, 111, 174, 0.35);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.experience-media-main.is-visible::after,
.editorial-main-media.is-visible::after {
  opacity: 1;
}

/* Responsive */
@media (max-width: 640px) {
  .sanlux-divider { height: 30px; }
}

/* ==== carrito.css ==== */
/* ==========================================================================
   SANLILAS - CARRITO DE COMPRAS & GLOBAL SLIDE-OVER DRAWER STYLES
   Aesthetic: Luxury E-commerce, Clean Layout, Translucent Glass Drawer
   ========================================================================== */

:root {
  --crt-marfil: #FAF7F2;
  --crt-marfil-light: #FAF7F2;
  --crt-chocolate: #2C211B;
  --crt-cafe-muted: #8A7A6A;
  --crt-champagne: #C8A46A;
  --crt-border: rgba(23, 20, 23, 0.08);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* GLOBAL SLIDE-OVER CART DRAWER (Liquid Glass) */
.cart-drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(23, 20, 23, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cart-drawer-overlay.is-active {
  display: block;
  opacity: 1;
}

.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 460px;
  max-width: 92vw;
  height: 100%;
  background: rgba(255, 253, 249, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid rgba(142, 111, 174, 0.18);
  box-shadow: -20px 0 60px rgba(23, 20, 23, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-overlay.is-active .cart-drawer-panel {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--crt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--crt-chocolate);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cart-drawer-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--crt-chocolate);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cart-item-row {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--crt-border);
  position: relative;
}

.cart-item-thumb {
  width: 75px;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--crt-marfil);
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--crt-chocolate);
  line-height: 1.25;
  text-decoration: none;
}

.cart-item-meta {
  font-size: 0.78rem;
  color: var(--crt-cafe-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cart-item-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
}

.cart-item-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--crt-border);
  background: #fff;
  height: 32px;
}

.cart-stepper-btn {
  width: 26px;
  height: 100%;
  border: none;
  background: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--crt-chocolate);
}

.cart-stepper-val {
  width: 26px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.cart-item-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--crt-chocolate);
}

.cart-item-remove {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.cart-item-remove:hover {
  color: #C06A5A;
}

.cart-drawer-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--crt-border);
  background: var(--crt-marfil);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--crt-cafe-muted);
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--crt-chocolate);
  padding-top: 0.5rem;
  border-top: 1px dashed var(--crt-border);
}

.cart-checkout-btn {
  width: 100%;
  padding: 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--crt-chocolate);
  color: var(--crt-marfil);
  border: 1px solid var(--crt-champagne);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.cart-checkout-btn:hover {
  background: var(--crt-champagne);
  color: #fff;
}

/* DEDICATED FULL CART PAGE STYLES */
.cart-page-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 8rem 2rem 5rem;
}

.cart-page-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3.5rem;
  margin-top: 2rem;
}

.order-summary-card {
  background: var(--crt-marfil);
  border: 1px solid var(--crt-border);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 100px;
}

@media (max-width: 992px) {
  .cart-page-layout {
    grid-template-columns: 1fr;
  }
}


/* ── FREE SHIPPING PROGRESS BAR ──────────────────────────────────── */

.cart-freeship-bar {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  background: rgba(142, 111, 174, 0.1);
  border: 1px solid rgba(142, 111, 174, 0.22);
  border-radius: 10px;
  text-align: center;
}

.cart-freeship-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(142, 111, 174, 0.18);
  overflow: hidden;
  margin-bottom: 0.55rem;
}

.cart-freeship-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--san-ocean) 0%, var(--san-gold) 100%);
  transition: width 0.6s var(--ease-couture);
}

.cart-freeship-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--crt-chocolate);
  font-weight: 600;
}

.cart-freeship-label strong {
  color: var(--san-gold-deep);
}


/* ── COUPON BOX ──────────────────────────────────────────────────── */

.coupon-box {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--crt-border);
}

.cart-coupon-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crt-cafe-muted);
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.cart-coupon-row {
  display: flex;
  gap: 0.5rem;
}

.cart-coupon-input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--crt-border);
  background: var(--crt-marfil-light);
  font-size: 0.9rem;
  color: var(--crt-chocolate);
  border-radius: 2px;
  outline: none;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-coupon-input:focus {
  border-color: var(--crt-champagne);
  box-shadow: 0 0 0 3px rgba(142, 111, 174, 0.15);
}

.cart-coupon-btn {
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--crt-chocolate);
  background: var(--crt-chocolate);
  color: var(--crt-marfil);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.cart-coupon-btn:hover {
  background: var(--crt-champagne);
  border-color: var(--crt-champagne);
}

.cart-coupon-applied {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: #D97742;
  background: rgba(14, 159, 110, 0.08);
  border: 1px solid rgba(14, 159, 110, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-coupon-remove {
  background: none;
  border: none;
  color: #D97742;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
}

.cart-coupon-msg {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  min-height: 1.1em;
}

.cart-coupon-msg.is-success { color: #D97742; }
.cart-coupon-msg.is-error { color: #C0392B; }


/* ── CART PAGE ITEM CARDS ────────────────────────────────────────── */

.cart-page-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--crt-marfil-light);
  border: 1px solid var(--crt-border);
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-couture);
}

.cart-page-item.is-removing {
  opacity: 0;
  transform: translateX(24px);
}

.cart-page-thumb {
  width: 110px;
  min-width: 110px;
  height: 145px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--crt-marfil);
}

.cart-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-couture);
}

.cart-page-thumb:hover img {
  transform: scale(1.05);
}

.cart-page-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-page-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.cart-page-remove {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #94A3B8;
  transition: color 0.2s ease, transform 0.2s ease;
}

.cart-page-remove:hover {
  color: #C06A5A;
  transform: scale(1.15);
}

.cart-summary-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--crt-chocolate);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--crt-border);
}

.cart-page-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.cart-continue-btn {
  text-align: center;
  padding: 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crt-cafe-muted);
  text-decoration: none;
  border: 1px solid var(--crt-border);
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.cart-continue-btn:hover {
  color: var(--crt-chocolate);
  border-color: var(--crt-chocolate);
}


/* ── CART EMPTY STATE ────────────────────────────────────────────── */

.cart-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: rgba(142, 111, 174, 0.12);
  border: 1px solid rgba(142, 111, 174, 0.25);
}


/* ── FIXED MOBILE CHECKOUT BAR ───────────────────────────────────── */

.cart-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(142, 111, 174, 0.18);
  box-shadow: 0 -10px 40px rgba(23, 20, 23, 0.1);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-couture);
}

.cart-mobile-bar.is-visible {
  transform: translateY(0);
}

.cart-mobile-total-wrap {
  display: flex;
  flex-direction: column;
}

.cart-mobile-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crt-cafe-muted);
}

.cart-mobile-total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--crt-chocolate);
}

.cart-mobile-cta {
  flex: 1;
  max-width: 280px;
  text-align: center;
  padding: 0.9rem 1rem;
  background: var(--crt-chocolate);
  color: var(--crt-marfil);
  border: 1px solid var(--crt-champagne);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.cart-mobile-cta:hover {
  background: var(--crt-champagne);
  color: #fff;
}

@media (max-width: 600px) {
  .cart-page-item {
    flex-direction: row;
    gap: 1rem;
    padding: 1rem;
  }
  .cart-page-thumb {
    width: 84px;
    min-width: 84px;
    height: 112px;
  }
  .cart-item-title {
    font-size: 1rem;
  }
}


/* ── CART ICON BUMP ANIMATION ────────────────────────────────────── */

.cart-bump svg {
  animation: cartBump 0.5s var(--ease-couture);
}

@keyframes cartBump {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.3) rotate(-8deg); }
  70% { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-page-item,
  .cart-mobile-bar,
  .cart-freeship-fill {
    transition: none;
  }
}

/* ==== favoritos.css ==== */
/* ==========================================================================
   SANLILAS - FAVORITOS PAGE & HEART UI
   Favoritos exclusivo para clientes autenticados.
   ========================================================================== */

/* ── HEADER FAVORITES BADGE (♥ N) ───────────────────────────────── */

.sanlilas-fav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: linear-gradient(135deg, var(--san-terra) 0%, var(--san-gold-deep) 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-couture);
}

.sanlilas-fav-badge.has-count {
  animation: favBadgePop 0.4s var(--ease-couture);
}

@keyframes favBadgePop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}


/* ── HEART BUTTON (product cards) ────────────────────────────────── */

.wishlist-btn[data-fav-heart],
.fav-heart-btn {
  transition: transform 0.3s var(--ease-couture), color 0.3s var(--ease-couture), background 0.3s var(--ease-couture);
}

.wishlist-btn[data-fav-heart].is-active,
.fav-heart-btn.is-active {
  color: #E0526B !important;
}

.wishlist-btn[data-fav-heart].fav-pop svg,
.fav-heart-btn.fav-pop svg {
  animation: favHeartPop 0.45s var(--ease-couture);
}

@keyframes favHeartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45) rotate(-8deg); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}


/* ── AUTH MODAL (login required) ─────────────────────────────────── */

.fav-auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(23, 20, 23, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-couture), visibility 0.35s var(--ease-couture);
}

.fav-auth-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.fav-auth-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--san-cream);
  border: 1px solid var(--san-gold);
  border-radius: 18px;
  padding: 2.8rem 2.4rem 2.2rem;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s var(--ease-couture);
}

.fav-auth-modal-overlay.is-active .fav-auth-modal-card {
  transform: translateY(0) scale(1);
}

.fav-auth-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--san-espresso-muted);
  cursor: pointer;
  transition: color 0.3s var(--ease-couture), transform 0.3s var(--ease-couture);
}

.fav-auth-close:hover {
  color: var(--san-terra);
  transform: rotate(90deg);
}

.fav-auth-emblem {
  width: 74px;
  height: 74px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--san-terra) 0%, var(--san-gold-deep) 100%);
  box-shadow: 0 10px 30px rgba(201, 158, 172, 0.35);
  animation: floatGentle 4s ease-in-out infinite;
}

.fav-auth-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--san-gold);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.fav-auth-title {
  font-family: var(--font-couture);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--san-espresso);
  margin: 0 0 0.8rem;
  letter-spacing: 0.04em;
}

.fav-auth-text {
  font-size: 0.95rem;
  color: var(--san-espresso-muted);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.fav-auth-btn-primary {
  display: block;
  width: 100%;
  padding: 0.95rem 1.5rem;
  margin-bottom: 0.8rem;
  font-family: var(--font-atelier);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--san-cream);
  background: linear-gradient(135deg, var(--san-gold-deep) 0%, var(--san-gold) 55%, var(--san-gold-bright) 100%);
  background-size: 200% auto;
  border: 1px solid var(--san-gold-bright);
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.4s var(--ease-couture);
  box-shadow: var(--shadow-gold);
}

.fav-auth-btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(142, 111, 174, 0.4);
}

.fav-auth-btn-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--san-gold-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease-couture);
}

.fav-auth-btn-secondary:hover {
  color: var(--san-terra);
}


/* ── FAVORITOS PAGE ──────────────────────────────────────────────── */

.fav-page-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8.5rem 2rem 5rem;
  min-height: 70vh;
}

.fav-page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.fav-page-title {
  font-family: var(--font-couture);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--san-espresso);
  margin: 0 0 0.6rem;
}

.fav-page-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--san-gold);
  font-weight: 600;
}

.fav-count-label {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--san-gold-deep);
  background: rgba(142, 111, 174, 0.12);
  border: 1px solid rgba(142, 111, 174, 0.3);
  border-radius: 20px;
  font-weight: 700;
}

/* Auth Gate (usuario sin sesión) */
.fav-auth-gate {
  max-width: 520px;
  margin: 2rem auto 0;
  text-align: center;
  background: var(--san-cream-warm);
  border: 1px solid rgba(142, 111, 174, 0.2);
  border-radius: 18px;
  padding: 3.5rem 2.5rem;
  box-shadow: var(--shadow-luxury);
}

.fav-auth-gate-emblem {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--san-terra) 0%, var(--san-gold-deep) 100%);
  box-shadow: 0 12px 32px rgba(201, 158, 172, 0.35);
  animation: floatGentle 4s ease-in-out infinite;
}

.fav-auth-gate-title {
  font-family: var(--font-couture);
  font-size: 2rem;
  font-weight: 400;
  color: var(--san-espresso);
  margin: 0 0 0.8rem;
}

.fav-auth-gate-text {
  font-size: 0.98rem;
  color: var(--san-espresso-muted);
  line-height: 1.75;
  margin-bottom: 2rem;
}

.fav-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Grid */
.fav-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.8rem;
}

.fav-empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--san-cream-warm);
  border: 1px dashed rgba(142, 111, 174, 0.4);
  border-radius: 16px;
}

.fav-empty-state h3 {
  font-family: var(--font-couture);
  font-size: 2rem;
  font-weight: 400;
  color: var(--san-espresso);
  margin: 0 0 0.6rem;
}

.fav-empty-state p {
  color: var(--san-espresso-muted);
  margin-bottom: 1.8rem;
}

/* Estado de producto no disponible / agotado */
.fav-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--san-espresso-muted);
}

.fav-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fav-stock-badge.is-soldout {
  background: rgba(120, 113, 108, 0.12);
  color: var(--san-espresso-muted);
  border: 1px solid rgba(120, 113, 108, 0.3);
}


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

@media (max-width: 992px) {
  .fav-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .fav-page-main {
    padding: 7rem 1.25rem 4rem;
  }
  .fav-page-title {
    font-size: 2.2rem;
  }
  .fav-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .fav-auth-modal-card {
    padding: 2.2rem 1.6rem 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fav-auth-emblem,
  .fav-auth-gate-emblem {
    animation: none;
  }
}


/* La presentación se muestra AL INSTANTE: sin reveals al hacer scroll */
#presentation-root .reveal-element,
#presentation-root [data-reveal],
#presentation-root .sanlux-divider,
#presentation-root .sanlux-divider.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}


/* Entrada suave del hero: el texto flota y aparece elegantemente sobre el video */
#hero .hero-anim-item {
  animation: sanlilasHeroFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.15s !important;
}
#hero .hero-anim-item[data-anim="2"] { animation-delay: 0.3s !important; }
#hero .hero-anim-item[data-anim="3"] { animation-delay: 0.45s !important; }
#hero .hero-anim-item[data-anim="4"] { animation-delay: 0.6s !important; }
#hero .hero-anim-item[data-anim="5"] { animation-delay: 0.75s !important; }
@keyframes sanlilasHeroFade {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   SKELETON LOADING SHELLS (contenido visible desde el milisegundo 0)
   Se muestran mientras la API entrega las secciones y se eliminan
   automáticamente cuando el contenido real se renderiza.
   ══════════════════════════════════════════════════════════════════ */
.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-section {
  padding: 4rem 2rem;
}
.sanlilas-skeleton-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.sanlilas-skeleton-media {
  height: 380px;
}
.sanlilas-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 700px) {
  .sanlilas-skeleton-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sanlilas-skeleton-media {
    height: 240px;
  }
  .sanlilas-skeleton-section {
    padding: 2.5rem 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SANLILAS - Optimización MÓVIL (solo táctil)
   Estas reglas SOLO aplican a pantallas táctiles (móviles/tablets) vía
   (hover:none) + (pointer:coarse). El escritorio con ratón NO se ve afectado.
   Desactivan las capas decorativas más caras (animaciones infinitas y
   blur de gran superficie) que encarecen el scroll en el celular.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* El fondo fijo obliga a repintar en cada scroll (muy costoso en móvil/iOS) */
  body {
    background-attachment: scroll !important;
  }

  /* Parar animaciones infinitas de las capas de ambiente y lujo */
  .hero-light-sweep,
  .hero-light-orb,
  .hero-light-orb-a,
  .hero-light-orb-b,
  .hero-glass-shard,
  .hero-glass-shard::after,
  .glass-shard-a,
  .glass-shard-b,
  .glass-shard-c,
  .hero-title,
  .experience-glass-emblem,
  .editorial-glow,
  .editorial-glow-1,
  .editorial-glow-2,
  .editorial-glow-3,
  .editorial-glass-card::before,
  .grain,
  .film-grain,
  .ocean-caustics-layer,
  .sea-emblem-badge,
  .fullscreen-media-luxury,
  .fullscreen-media-luxury::before,
  .presentation-section .section-title,
  .couture-gold-text,
  .couture-badge-18k,
  .quote-mark,
  .section-cta::before,
  .section-cta::after,
  .sanlux-divider::after,
  .fav-auth-emblem,
  .fav-auth-gate-emblem,
  .hero-scroll-line {
    animation: none !important;
  }

  /* El blur de gran superficie es muy caro en GPU móvil. Se quita el
     filtro; el degradado radial queda como halo suave sin coste. */
  .hero-light-orb,
  .hero-light-orb-a,
  .hero-light-orb-b,
  .hero-light-sweep,
  .hero-glass-shard,
  .editorial-glow,
  .editorial-glow-1,
  .editorial-glow-2,
  .editorial-glow-3,
  .experience-glass-card,
  .editorial-glass-card,
  .sanlilas-btn-primary {
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Texto dorado con shimmer: el desplazamiento de fondo infinito se
     congela en un punto estático legible. */
  .couture-gold-text {
    background-position: center !important;
  }
}