/* ==========================================================================
   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&display=swap');

:root {
  /* Color Palette - Boho Luxe Costero (identidad @sanlilas)
     Aguamarina, Terracota, Oro 18k, Arena cálida y Marfil */
  --bg-marfil: #FAF7F2;
  --bg-ivory: #FAF7F2;
  --bg-champagne: #EDE4D9;
  --bg-chocolate-dark: #2C211B;
  --bg-chocolate-medium: #2C211B;

  --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: #C8A46A;
  --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);

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

.hero-media-desktop,
.hero-media-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
  opacity: 0;
  animation: heroCinemaReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* 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(200,164,106,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(200,164,106,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(200,164,106,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(200,164,106,0.4), 0 0 40px rgba(200,164,106,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(200,164,106,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(200,164,106,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(200,164,106,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(200,164,106,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(200,164,106,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 - Optimización MÓVIL (solo táctil)
   (hover:none)+(pointer:coarse) => SOLO móviles/tablets; el escritorio
   con ratón NO se ve afectado. Para el scroll y quita las capas caras.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* El fondo fijo obliga a repintar en cada scroll (muy costoso en iOS).
     En móvil se convierte a scroll normal. */
  body, .fullscreen-media-luxury {
    background-attachment: scroll !important;
  }

  /* Parar animaciones infinitas de las capas ambientales y de 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,
  .ocean-caustics-layer,
  .sea-emblem-badge,
  .fullscreen-media-luxury,
  .fullscreen-media-luxury::before,
  .presentation-section .section-title,
  .hero-scroll-line {
    animation: none !important;
  }

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

  /* backdrop-filter de gran superficie también es caro: fondo más sólido */
  .experience-glass-card,
  .editorial-glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 253, 249, 0.96);
  }
}