/* =====================================================
   LUMA'S BOUTIQUE — DESIGN TOKENS
   ===================================================== */
:root{
  --cream:      #FBF3EE;
  --cream-2:    #F5E9E1;
  --espresso:   #2A211D;
  --espresso-70:#2A211Db3;
  --rosegold:   #BE8B67;
  --rosegold-l: #DCB897;
  --blush:      #E9BCC1;
  --deep-rose:  #8C3B4A;
  --white:      #FFFDFB;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --container: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--rosegold); color:var(--white); }

img,svg{ display:block; max-width:100%; }

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

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--espresso);
}
h2{ font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.1; }
em{ font-style:italic; color:var(--deep-rose); font-weight:500; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rosegold);
  margin-bottom:1rem;
}

/* subtle grain for texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor glow — desktop only, subtle */
.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--blush) 0%, transparent 70%);
  filter:blur(10px); opacity:.35;
  pointer-events:none; z-index:1;
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease);
  will-change:transform;
}
@media (max-width:900px), (hover:none){ .cursor-glow{ display:none; } }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 2rem; border-radius:2px;
  transition:all .45s var(--ease);
  cursor:pointer; border:1px solid transparent;
  white-space:nowrap;
}
.btn-solid{ background:var(--espresso); color:var(--cream); }
.btn-solid:hover{ background:var(--deep-rose); transform:translateY(-2px); }

.btn-ghost{ border-color:var(--espresso-70); color:var(--espresso); }
.btn-ghost:hover{ border-color:var(--espresso); background:var(--espresso); color:var(--cream); }

.btn-line{
  position:relative; padding:.4rem 0; border:none; color:var(--espresso);
  font-size:.78rem;
}
.btn-line::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--rosegold); transform:scaleX(1); transform-origin:left;
}
.btn-line:hover::after{ background:var(--deep-rose); }

/* =====================================================
   NAV
   ===================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1.6rem 0;
  transition:all .5s var(--ease);
}
.nav.scrolled{
  padding:1rem 0;
  background:rgba(251,243,238,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(42,33,29,.06);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.logo{ display:flex; align-items:center; }
.logo-img{
  height:56px; width:56px; border-radius:50%; object-fit:cover;
  transition:transform .5s var(--ease), height .4s var(--ease), width .4s var(--ease);
  box-shadow:0 2px 10px rgba(42,33,29,.12);
}
.logo:hover .logo-img{ transform:scale(1.06) rotate(-3deg); }
.nav.scrolled .logo-img{ height:46px; width:46px; }
.nav-links{ display:flex; gap:2.4rem; flex:1; justify-content:center; }
.nav-links a{
  font-size:.8rem; letter-spacing:.05em; display:flex; align-items:center; gap:.4rem;
  position:relative; padding:.3rem 0;
}
.nav-links a span{ font-size:.62rem; color:var(--rosegold); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--deep-rose); transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{ font-size:.72rem; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:600; }
.burger span{ width:24px; height:1px; background:var(--espresso); transition:.3s var(--ease); }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:8rem 2rem 4rem;
}
.hero-ring{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:0; pointer-events:none;
}
.ring-svg{ width:min(78vw,720px); height:min(78vw,720px); }
.ring-dash{
  fill:none; stroke:var(--rosegold); stroke-width:1; stroke-dasharray:2 10;
  animation:spin 90s linear infinite;
  transform-origin:300px 300px;
}
.ring-thin{ fill:none; stroke:var(--blush); stroke-width:1; opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; max-width:760px; }
.eyebrow.reveal{ margin-bottom:1.4rem; }
.hero-title{ font-size:clamp(3rem,8vw,6.2rem); line-height:.98; margin-bottom:1.6rem; }
.hero-title span{ display:block; }
.hero-text{
  max-width:480px; margin:0 auto 2.4rem; color:var(--espresso-70); font-size:1.02rem;
}
.hero-actions{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:2;
}
.scroll-cue span{
  width:1px; height:44px; background:linear-gradient(var(--rosegold), transparent);
  animation:pulse 2.2s ease-in-out infinite;
}
.scroll-cue small{ font-size:.62rem; letter-spacing:.24em; color:var(--rosegold); text-transform:uppercase; }
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* =====================================================
   MARQUEE
   ===================================================== */
.marquee{
  background:var(--espresso); color:var(--cream); overflow:hidden;
  padding:1.1rem 0; white-space:nowrap;
}
.marquee-track{
  display:inline-flex; gap:2.5rem; align-items:center;
  animation:scroll-left 32s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display); font-style:italic; font-size:1.1rem; letter-spacing:.02em;
}
.marquee-track i{ color:var(--rosegold-l); font-style:normal; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =====================================================
   SECTION HEAD (shared)
   ===================================================== */
.section-head{ max-width:var(--container); margin:0 auto; padding:7rem 2rem 3rem; text-align:center; }

/* =====================================================
   COLECCIÓN
   ===================================================== */
.coleccion{ padding-bottom:3rem; }
.grid-productos{
  max-width:var(--container); margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.card-producto{
  background:var(--white); border:1px solid rgba(42,33,29,.07);
  padding:2.2rem 1.6rem 2rem; text-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  position:relative;
}
.card-producto:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 48px -20px rgba(42,33,29,.18);
}
.card-media{ height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.icon-prenda{ width:88px; height:auto; }
.icon-prenda path, .icon-prenda circle{
  fill:none; stroke:var(--espresso); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round;
  transition:stroke .4s var(--ease);
}
.icon-prenda .detail{ stroke:var(--rosegold); }
.icon-prenda .detail-fill{ fill:var(--blush); stroke:none; }
.card-producto:hover .icon-prenda path,
.card-producto:hover .icon-prenda circle{ stroke:var(--deep-rose); }

.card-info h3{ font-size:1.5rem; margin-bottom:.4rem; }
.card-info p{ font-size:.86rem; color:var(--espresso-70); margin-bottom:1rem; }
.card-link{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rosegold);
  display:inline-flex; align-items:center; gap:.4rem;
}
.card-link i{ transition:transform .35s var(--ease); font-style:normal; }
.card-producto:hover .card-link i{ transform:translateX(5px); }

/* =====================================================
   GALERÍA
   ===================================================== */
.galeria{ padding-bottom:3rem; }

.galeria-tabs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem;
  max-width:var(--container); margin:0 auto 3rem; padding:0 2rem;
}
.tab-btn{
  background:none; border:1px solid rgba(42,33,29,.16); color:var(--espresso-70);
  font-family:var(--font-body); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem 1.3rem; border-radius:999px; cursor:pointer;
  transition:all .35s var(--ease);
}
.tab-btn:hover{ border-color:var(--rosegold); color:var(--espresso); }
.tab-btn.active{ background:var(--espresso); border-color:var(--espresso); color:var(--cream); }

.galeria-grid{
  max-width:var(--container); margin:0 auto; padding:0 2rem;
  columns:4 220px; column-gap:1.4rem;
}
.galeria-item{
  break-inside:avoid; margin:0 0 1.4rem; position:relative;
  overflow:hidden; cursor:zoom-in; background:var(--cream-2);
  opacity:1; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.galeria-item.hide{
  display:none;
}
.galeria-item img{
  width:100%; height:auto; display:block;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.galeria-item:hover img{ transform:scale(1.06); }
.galeria-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(to top, rgba(20,14,12,.72), transparent);
  color:var(--white); font-size:.8rem; opacity:0; transform:translateY(8px);
  transition:all .4s var(--ease);
}
.galeria-item:hover figcaption{ opacity:1; transform:translateY(0); }
.galeria-item figcaption span{
  display:block; font-family:var(--font-display); font-style:italic; font-size:1rem;
  color:var(--rosegold-l); margin-bottom:.15rem;
}

.galeria-nota{
  text-align:center; font-size:.76rem; color:var(--espresso-70); opacity:.7;
  margin-top:1rem;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:900; background:rgba(20,14,12,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox figure{ max-width:min(84vw,760px); max-height:82vh; text-align:center; }
.lightbox img{
  max-width:100%; max-height:72vh; width:auto; margin:0 auto;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox figcaption{ color:var(--cream); font-family:var(--font-display); font-style:italic; font-size:1.1rem; margin-top:1.2rem; }
.lightbox-close, .lightbox-nav{
  position:absolute; background:none; border:1px solid rgba(251,243,238,.3); color:var(--cream);
  border-radius:50%; width:46px; height:46px; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ border-color:var(--rosegold-l); background:rgba(190,139,103,.18); }
.lightbox-close{ top:1.6rem; right:1.6rem; }
.lightbox-prev{ left:1.6rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.6rem; top:50%; transform:translateY(-50%); }

/* =====================================================
   NOSOTRAS
   ===================================================== */
.nosotras{
  max-width:var(--container); margin:8rem auto; padding:0 2rem;
  display:grid; grid-template-columns:.85fr 1fr; gap:5rem; align-items:center;
}
.nosotras-visual{ display:flex; justify-content:center; }
.frame-circle{
  position:relative; width:min(70vw,360px); aspect-ratio:1/1;
  border-radius:50%; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center;
}
.laurel{ width:100%; height:100%; position:absolute; inset:0; animation:spin 140s linear infinite; }
.laurel path{ fill:var(--rosegold); opacity:.55; }
.frame-mark{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:5rem; color:var(--espresso); position:relative; z-index:2;
}

.nosotras-texto p{ color:var(--espresso-70); max-width:480px; margin-bottom:1.6rem; }
.lista-valores{ list-style:none; margin-bottom:2.2rem; }
.lista-valores li{
  padding:1rem 0; border-top:1px solid rgba(42,33,29,.1);
  display:flex; gap:1.4rem; align-items:baseline; font-size:.9rem; color:var(--espresso-70);
}
.lista-valores li:last-child{ border-bottom:1px solid rgba(42,33,29,.1); }
.lista-valores li span{
  font-family:var(--font-display); font-style:italic; font-size:1.1rem;
  color:var(--espresso); min-width:150px;
}

/* =====================================================
   VOCES
   ===================================================== */
.voces{ padding-bottom:7rem; }
.voces-track{
  max-width:var(--container); margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.voz-card{
  background:var(--cream-2); padding:2rem 1.6rem; border-left:2px solid var(--rosegold);
}
.voz-card p{ font-family:var(--font-display); font-style:italic; font-size:1.12rem; line-height:1.45; margin-bottom:1.2rem; }
.voz-card footer{ font-size:.74rem; letter-spacing:.08em; color:var(--rosegold); text-transform:uppercase; }

/* =====================================================
   CONTACTO
   ===================================================== */
.contacto{ background:var(--espresso); color:var(--cream); padding:7rem 2rem; text-align:center; }
.contacto h2{ color:var(--cream); }
.contacto em{ color:var(--rosegold-l); }
.contacto-inner{ max-width:560px; margin:0 auto; }
.contacto-inner p:not(.eyebrow):not(.form-msg){ color:#EBDFD8; margin-bottom:2.2rem; }

.newsletter{ display:flex; gap:0; border-bottom:1px solid var(--rosegold); padding-bottom:.6rem; }
.newsletter input{
  flex:1; background:none; border:none; outline:none; color:var(--cream);
  font-family:var(--font-body); font-size:1rem; padding:.4rem 0;
}
.newsletter input::placeholder{ color:#B9A79C; }
.newsletter button{
  background:none; border:none; color:var(--rosegold-l);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:color .3s var(--ease);
}
.newsletter button:hover{ color:var(--white); }
.form-msg{ min-height:1.6rem; margin-top:.9rem; font-size:.82rem; color:var(--rosegold-l); }

.socials{ display:flex; justify-content:center; gap:1.4rem; margin-top:2.6rem; }
.socials a{
  width:42px; height:42px; border:1px solid rgba(251,243,238,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
}
.socials a:hover{ border-color:var(--rosegold-l); background:rgba(190,139,103,.15); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; fill:none; stroke:var(--cream); stroke-width:1.6; }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{ padding:2.6rem 2rem; text-align:center; background:var(--espresso); }
.footer-inner{ border-top:1px solid rgba(251,243,238,.12); padding-top:2rem; color:#B9A79C; font-size:.8rem; }
.footer-logo-img{
  width:76px; height:76px; border-radius:50%; object-fit:cover;
  margin:0 auto .9rem; box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.footer-note{ margin-top:.4rem; opacity:.7; }

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:980px){
  .nosotras{ grid-template-columns:1fr; gap:3rem; text-align:center; }
  .lista-valores li{ justify-content:center; }
  .nosotras-texto p{ margin-left:auto; margin-right:auto; }
  .grid-productos{ grid-template-columns:repeat(2,1fr); }
  .voces-track{ grid-template-columns:repeat(2,1fr); }
  .galeria-grid{ columns:3 180px; }
}

@media (max-width:760px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:flex; }
  .nav-links.open{
    display:flex; position:fixed; inset:0; background:var(--cream);
    flex-direction:column; align-items:center; justify-content:center; gap:2.2rem; z-index:550;
  }
  .nav-links.open a{ font-size:1.4rem; font-family:var(--font-display); font-style:italic; }
  .grid-productos{ grid-template-columns:1fr; }
  .voces-track{ grid-template-columns:1fr; }
  .newsletter{ flex-direction:row; }
  .galeria-grid{ columns:2 140px; column-gap:.8rem; }
  .galeria-item{ margin-bottom:.8rem; }
  .lightbox-prev{ left:.6rem; }
  .lightbox-next{ right:.6rem; }
  .lightbox-close{ top:1rem; right:1rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}