/* ==========================================================================
   MAGNO PERFUMERÍA — Editorial Dark Warm
   ========================================================================== */

:root{
  --gold: #b6862c;
  --gold-light: #e2c07d;
  --gold-pale: #f0d9a3;
  --gold-dark: #7a5a17;
  --black: #0a0908;
  --black-soft: #141210;
  --cream: #f4efe3;
  --cream-dark: #e6ddc6;
  --ink: #cfc7b3;

  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --display: 'Cinzel', 'Cormorant Garamond', serif;
  --sans: 'Jost', 'Helvetica Neue', sans-serif;

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

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; background: var(--black); }
body{
  font-family: var(--serif);
  background: var(--black);
  color: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--gold); color: var(--black); }

/* Defensive: any element mid-reveal-transition must never be permanently hidden */
.reveal{ opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal[data-split]{ opacity: 1; transform: none; } /* safety net: never hide split text if JS fails */
.reveal[data-split] .split-line{ opacity: 0; transform: translateY(100%); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal[data-split].in .split-line{ opacity: 1; transform: translateY(0); }

/* stagger children */
.reveal-group.in .reveal-child{ opacity: 1; transform: translateY(0); }
.reveal-child{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 200;
  background: var(--black);
  display:flex; align-items:center; justify-content:center;
  animation: preloaderHide 4.5s forwards;
}
.preloader-mark{
  width: 64px; height:64px;
  border: 1px solid var(--gold-dark);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.preloader-mark::before{
  content:""; position:absolute; inset:-1px;
  border-radius:50%;
  border: 1px solid transparent;
  border-top-color: var(--gold-light);
  animation: spin 1.4s linear infinite;
}
.preloader-mark span{
  font-family: var(--display); font-size:.85rem; color: var(--gold-light); letter-spacing: 2px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes preloaderHide{
  0%, 70%{ opacity:1; visibility: visible; }
  90%{ opacity:0; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ==========================================================================
   NOISE / GRAIN OVERLAY
   ========================================================================== */
.grain{
  position: fixed; inset:0; z-index: 90; pointer-events:none;
  opacity: .05; mix-blend-mode: overlay;
  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");
}

/* ==========================================================================
   PROGRESS BAR
   ========================================================================== */
.scroll-progress{
  position: fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  z-index: 120;
  transition: width .1s linear;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 6%;
  background: linear-gradient(to bottom, rgba(10,9,8,.85), transparent);
  transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
header.scrolled{
  padding: 14px 6%;
  background: rgba(10,9,8,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(182,134,44,.25);
}
.brand{
  display:flex; align-items:center; gap:12px;
  color: var(--gold-light);
  letter-spacing: 3px;
  font-family: var(--display);
  font-size: .95rem;
  text-transform: uppercase;
}
.brand .mark{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 auto; }
/* <picture> is inline by default — force it to fill its circular wrapper */
.brand .mark picture,
.hero-emblem picture,
footer .mark picture{ display:block; width:100%; height:100%; }
.brand .mark img{ width:100%; height:100%; object-fit: cover; display:block; }

nav ul{ display:flex; gap:38px; }
nav a{
  position:relative;
  color: var(--ink); font-family: var(--sans); font-size:.72rem; letter-spacing:2.5px; text-transform:uppercase;
  padding-bottom: 4px;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold-light);
  transition: width .35s var(--ease);
}
nav a:hover::after{ width:100%; }
nav a:hover{ color: var(--gold-pale); }

.header-cta{
  font-family: var(--sans); font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
  border: 1px solid var(--gold); padding: 11px 24px; border-radius: 1px;
  color: var(--gold-light); transition: background .3s, color .3s;
  white-space: nowrap;
}
.header-cta:hover{ background: var(--gold); color: var(--black); }

.nav-toggle{ display:none; }

/* ==========================================================================
   HERO — PARALLAX
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 140px 6% 80px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset: -10% -10% -10% -10%;
  z-index:-3;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(182,134,44,.16), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(182,134,44,.10), transparent 65%),
    var(--black);
  will-change: transform;
}
.hero-rings{
  position:absolute; inset:0; z-index:-2;
  display:flex; align-items:center; justify-content:center;
  will-change: transform;
}
.hero-rings svg{ width: min(140vw, 1400px); height: auto; opacity: .5; }
.hero-rings .ring-1{ stroke: rgba(182,134,44,.35); }
.hero-rings .ring-2{ stroke: rgba(182,134,44,.18); }

.hero-particles{
  position:absolute; inset:0; z-index:-1; pointer-events:none; will-change: transform;
}
.hero-particles span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: var(--gold-light); opacity:.5;
}

.hero-emblem{
  width: 108px; height:108px; margin: 0 auto 30px;
  border-radius: 50%; overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.hero-emblem img{ width:100%; height:100%; object-fit:cover; }

.hero h1{
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  letter-spacing: .12em;
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1.05;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--gold-dark), var(--gold-light) 45%, var(--gold-pale) 55%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.hero .tagline{
  margin-top: 18px;
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero .loc{
  margin-top:10px;
  font-family: var(--sans); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color: #8f8877;
}
.hero p.desc{
  max-width: 560px; margin: 34px auto 0;
  font-size: 1.12rem; color: var(--ink);
}
.hero-actions{
  margin-top: 42px; display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 36px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--sans);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: .72rem;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  border-radius: 1px;
}
.btn:hover{ background: var(--gold); color: var(--black); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(182,134,44,.5); }
.btn.solid{ background: var(--gold); color: var(--black); }
.btn.solid:hover{ background: var(--gold-light); }
.btn.ghost{ border-color: rgba(207,199,179,.35); color: var(--ink); }
.btn.ghost:hover{ background: var(--cream); color: var(--black); border-color: var(--cream); }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--sans); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:#726c5c;
}
.scroll-cue .line{ width:1px; height:36px; background: linear-gradient(to bottom, var(--gold-light), transparent); animation: cueFlow 2.2s ease-in-out infinite; }
@keyframes cueFlow{ 0%{ transform: scaleY(.3); transform-origin:top;} 50%{ transform: scaleY(1); transform-origin:top;} 100%{ transform: scaleY(.3); transform-origin: bottom;} }

/* ==========================================================================
   MARQUEE STRIP
   ========================================================================== */
.marquee{
  position: relative;
  border-top: 1px solid rgba(182,134,44,.25);
  border-bottom: 1px solid rgba(182,134,44,.25);
  background: var(--black-soft);
  padding: 18px 0;
  overflow:hidden;
  white-space: nowrap;
}
.marquee-track{
  display:inline-flex;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee-track span{
  font-family: var(--display);
  font-size: .95rem; letter-spacing:.35em; text-transform:uppercase;
  color: var(--gold-light); padding: 0 2.4rem;
  display:inline-flex; align-items:center; gap: 2.4rem;
  opacity: .85;
}
.marquee-track span::after{ content:"✦"; color: var(--gold-dark); font-size:.7rem; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   SECTION SHARED
   ========================================================================== */
section{ position: relative; }
.eyebrow{
  font-family: var(--sans); font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
  color: var(--gold-dark); margin-bottom: 14px; display:block;
}
.section-title{ text-align:center; margin-bottom: 64px; }
.section-title h2{
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: .05em;
  color: var(--cream);
}
.section-title .rule{ width:56px; height:1px; background: var(--gold); margin: 22px auto 0; position:relative; }
.section-title .rule::before{ content:"◆"; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); font-size:.5rem; color: var(--gold-light); background: var(--black); padding:0 8px; }

.section-title.on-light h2{ color: var(--black); }
.section-title.on-light .eyebrow{ color: var(--gold-dark); }
.section-title.on-light .rule::before{ background: var(--cream); }

/* ==========================================================================
   ESSENCE / ABOUT — light parallax panel
   ========================================================================== */
.essence{
  background: var(--cream);
  color: var(--black);
  padding: 140px 6%;
  overflow:hidden;
}
.essence-inner{
  max-width: 1100px; margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center;
}
.essence-visual{
  position:relative; aspect-ratio: 4/5;
  display:flex; align-items:center; justify-content:center;
  will-change: transform;
}
/* <picture> is inline by default: it must carry the sizing, or the
   percentage width on the inner <img> resolves against the wrong box. */
.essence-visual picture{
  display: block; width: 78%; margin: 0 auto;
}
.essence-visual .emblem-xl{
  width: 100%; height: auto; display: block; opacity: 1;
  border-radius: 50%;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.55);
}
.essence-visual .frame{
  position:absolute; inset: 6%;
  border: 1px solid rgba(122,90,23,.35);
}
.essence-copy p{
  font-size: 1.18rem; color:#3a352b; max-width: 480px;
}
.essence-copy p + p{ margin-top: 22px; }
.essence-copy .stats{
  display:flex; gap: 46px; margin-top: 46px;
}
.essence-copy .stat b{
  display:block; font-family: var(--display); font-size: 2rem; color: var(--gold-dark);
}
.essence-copy .stat span{
  font-family: var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#6b6455;
}

/* ==========================================================================
   COLLECTION
   ========================================================================== */
.collection{
  background: var(--black);
  padding: 150px 6% 130px;
}
.collection-grid{
  max-width: 1180px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(182,134,44,.2);
  border: 1px solid rgba(182,134,44,.2);
}
.product-card{
  position:relative;
  background: linear-gradient(175deg, #171512, #0a0908);
  padding: 56px 34px 44px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  overflow:hidden;
  transition: background .5s var(--ease);
}
.product-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(182,134,44,.12), transparent 60%);
  opacity:0; transition: opacity .5s var(--ease);
}
.product-card:hover::before{ opacity:1; }
.product-card:hover{ background: linear-gradient(175deg, #1d1a15, #0a0908); }

.product-index{
  position:absolute; top:22px; left:26px;
  font-family: var(--display); font-size:.85rem; color: var(--gold-dark); letter-spacing:.2em;
}
.product-tag{
  position:absolute; top:22px; right:26px;
  font-family: var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--black); background: var(--gold-light);
  padding: 4px 10px; border-radius: 20px;
}

.bottle-wrap{
  width: 100%; max-width: 190px; height: 220px; margin: 20px 0 26px;
  position:relative; overflow:hidden;
  transition: transform .6s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.product-card:hover .bottle-wrap{ transform: translateY(-10px) scale(1.04); }
.bottle-wrap svg{ width:100%; height:100%; filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); }
.bottle-wrap picture{ display:block; width:100%; height:100%; }
.bottle-wrap img{
  width:100%; height:100%; object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.product-card .brandline{
  font-family: var(--sans); color:#8f8877; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:12px;
}
.product-card h3{
  font-family: var(--display);
  color: var(--gold-light); letter-spacing:.06em; text-transform:uppercase; font-size: 1.5rem; margin-bottom: 8px;
}
.product-card .notes{
  color: var(--ink); font-size: 1rem; min-height: 84px; max-width: 260px;
}
.product-card .facets{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px;
}
.product-card .facets span{
  font-family: var(--sans); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--gold-dark); border: 1px solid rgba(182,134,44,.35); padding: 5px 11px; border-radius: 20px;
}
.product-card .price{
  margin-top: 26px; font-family: var(--display); font-size: 1.4rem; color: var(--gold); letter-spacing:.04em;
}
.product-card .price small{ display:block; font-family: var(--sans); font-size:.62rem; letter-spacing:.2em; color:#726c5c; text-transform:uppercase; margin-top:2px; }
.product-card .btn{ margin-top: 24px; font-size:.66rem; padding: 12px 28px; }

/* ---- avisos de stock (se activan desde data/productos.js) ---- */
.stock-badge{
  margin-top: 14px;
  font-family: var(--sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding: 5px 13px; border-radius: 20px; display:inline-block;
}
.stock-pocas{ color:#e8c37a; border:1px solid rgba(226,192,125,.45); background:rgba(226,192,125,.08); }
.stock-agotado{ color:#c9a0a6; border:1px solid rgba(201,160,166,.4); background:rgba(74,20,32,.25); }
.product-card.is-agotado .bottle-wrap{ opacity:.45; filter:grayscale(.5); }
.product-card.is-agotado .price{ opacity:.55; }
.pdp-info .stock-badge{ margin: 0 0 18px; }

@media (max-width: 980px){
  .collection-grid{ grid-template-columns: 1fr; }
}

.collection-filters{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  margin: -30px auto 56px;
}
.filter-btn{
  font-family: var(--sans); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink); background: transparent; border: 1px solid rgba(182,134,44,.3);
  padding: 10px 22px; border-radius: 20px; transition: background .3s, color .3s, border-color .3s;
}
.filter-btn:hover{ border-color: var(--gold); color: var(--gold-light); }
.filter-btn.active{ background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ==========================================================================
   QUIZ
   ========================================================================== */
.quiz{ background: var(--black); padding: 30px 6% 140px; }
.quiz-box{
  max-width: 640px; margin: 0 auto;
  border: 1px solid rgba(182,134,44,.25); border-radius: 8px;
  padding: 50px 44px; text-align:center;
  background: linear-gradient(175deg, #171512, #0a0908);
}
.quiz-progress{ display:flex; justify-content:center; gap:8px; margin-bottom: 34px; }
.quiz-progress span{ width:28px; height:3px; background: rgba(182,134,44,.2); border-radius:2px; transition: background .3s; }
.quiz-progress span.active{ background: var(--gold); }
.quiz-q{ font-family: var(--display); font-size: 1.25rem; color: var(--cream); margin-bottom: 26px; }
.quiz-options{ display:flex; flex-direction:column; gap:14px; }
.quiz-opt{
  font-family: var(--sans); font-size:.85rem; text-align:left;
  color: var(--ink); background: transparent; border: 1px solid rgba(182,134,44,.25);
  padding: 16px 20px; border-radius: 4px; transition: border-color .3s, background .3s, color .3s;
}
.quiz-opt:hover{ border-color: var(--gold); background: rgba(182,134,44,.08); color: var(--gold-pale); }
.quiz-result-inner .eyebrow{ display:block; }
.quiz-result-name{ font-family: var(--display); font-size: 1.7rem; color: var(--gold-light); margin: 10px 0 16px; }
.quiz-result-desc{ color: var(--ink); font-size: 1rem; margin-bottom: 14px; }
.quiz-result-note{ color: var(--gold-pale); font-size: .85rem; font-style: italic; max-width: 460px; margin: 0 auto 26px; }
.quiz-result-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.quiz-restart{ font-family: var(--sans); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color: var(--ink); border:none; background:transparent; text-decoration: underline; text-underline-offset:4px; }

@media (max-width:600px){
  .quiz-box{ padding: 36px 22px; }
}

/* ==========================================================================
   COMPARATIVE TABLE
   ========================================================================== */
.compare{ background: var(--cream); color: var(--black); padding: 100px 6%; }
.compare-table{
  max-width: 800px; margin: 0 auto;
  border: 1px solid rgba(122,90,23,.25); border-radius: 6px; overflow:hidden;
}
.compare-row{ display:grid; grid-template-columns: 1fr 1.2fr 1.2fr; }
.compare-row + .compare-row{ border-top: 1px solid rgba(122,90,23,.15); }
.compare-cell{ padding: 16px 18px; font-family: var(--sans); font-size:.82rem; display:flex; align-items:center; }
.compare-head .compare-cell{ font-family: var(--display); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color: var(--gold-dark); }
.compare-cell.highlight{ background: rgba(182,134,44,.12); font-weight:600; color: var(--gold-dark); }
@media (max-width:700px){
  .compare-row{ grid-template-columns: 1fr; }
  .compare-cell{ border-bottom:1px solid rgba(122,90,23,.1); }
  .compare-row .compare-cell:first-child{ font-weight:600; background:transparent; }
}

/* ==========================================================================
   WHY
   ========================================================================== */
.why{
  background: var(--cream);
  color: var(--black);
  padding: 140px 6%;
}
.why-grid{
  max-width: 1080px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
.why-item{ text-align:center; position:relative; padding-top: 10px; }
.why-item .num{
  font-family: var(--display); font-size:.85rem; color: var(--gold-dark); letter-spacing:.3em; margin-bottom: 18px; display:block;
}
.why-item .icon-ring{
  width: 68px; height:68px; margin: 0 auto 22px;
  border: 1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-dark); font-size:1.3rem;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.why-item:hover .icon-ring{ background: var(--gold); color:var(--cream); transform: rotate(8deg) scale(1.05); }
.why-item h4{
  font-family: var(--display); letter-spacing:.06em; margin-bottom: 12px; text-transform:uppercase; font-size:1.2rem; color:var(--black);
}
.why-item p{ font-size:.98rem; color:#514c3f; max-width: 280px; margin: 0 auto; }

@media (max-width: 860px){
  .why-grid{ grid-template-columns: 1fr; gap: 54px; }
}

/* ==========================================================================
   ADVISORY BANNER ("¿No sabes qué elegir?")
   ========================================================================== */
.advisory{
  padding: 0 6% 100px;
}
.advisory-inner{
  max-width: 980px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  background: linear-gradient(175deg, #171512, #0a0908);
  border: 1px solid rgba(182,134,44,.3);
  border-radius: 6px;
  padding: 40px 46px;
  text-align:left;
}
.advisory-text .eyebrow{ display:block; margin-bottom: 10px; }
.advisory-text h3{
  font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--cream); letter-spacing:.02em; margin-bottom: 8px;
}
.advisory-text p{ color: var(--ink); font-size: .98rem; max-width: 460px; }
.advisory .btn{ white-space: nowrap; }

@media (max-width: 720px){
  .advisory-inner{ flex-direction:column; text-align:center; padding: 34px 26px; }
  .advisory-text p{ margin: 0 auto; }
}

/* ==========================================================================
   SOCIAL PROOF STRIP
   ========================================================================== */
.proof{
  background: var(--black); padding: 90px 6%;
  text-align:center;
}
.proof blockquote{
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2rem);
  max-width: 780px; margin:0 auto; color: var(--gold-pale); line-height:1.5;
}
.proof cite{
  display:block; margin-top: 22px; font-family: var(--sans); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:#726c5c; font-style:normal;
}

/* ==========================================================================
   REVIEWS / TESTIMONIALS
   ========================================================================== */
.reviews{
  background: var(--black); padding: 40px 6% 140px;
}
.reviews-grid{
  max-width: 1100px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.review-card{
  background: linear-gradient(175deg, #171512, #0a0908);
  border: 1px solid rgba(182,134,44,.2); border-radius: 6px;
  padding: 34px 28px;
}
.review-card .stars{ color: var(--gold-light); font-size: .95rem; letter-spacing: 3px; margin-bottom: 16px; }
.review-card p{ color: var(--ink); font-size: .98rem; font-style: italic; margin-bottom: 18px; }
.review-card cite{ display:block; font-family: var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#8f8877; font-style:normal; }

@media (max-width: 860px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  position:relative;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold) 55%, var(--gold-light));
  color: var(--black);
  text-align:center;
  padding: 110px 6%;
  overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%);
}
.cta h2{
  font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing:.04em; margin-bottom:18px; position:relative;
}
.cta p{ margin-bottom:36px; font-size:1.1rem; position:relative; max-width: 520px; margin-left:auto; margin-right:auto; }
.cta .actions{ position:relative; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.cta .btn{ border-color: var(--black); color: var(--black); }
.cta .btn:hover{ background: var(--black); color: var(--gold-light); }
.cta .btn.solid{ background: var(--black); color: var(--gold-light); }
.cta .btn.solid:hover{ background: #1a1a1a; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  background: var(--black); color: var(--ink);
  padding: 70px 6% 30px; text-align:center;
  border-top: 1px solid rgba(182,134,44,.2);
}
footer .mark{
  width: 64px; height:64px; margin: 0 auto 20px; border-radius:50%; overflow:hidden;
}
footer .mark img{ width:100%; height:100%; object-fit:cover; }
footer .brandname{ font-family: var(--display); letter-spacing:.3em; color: var(--gold-light); text-transform:uppercase; font-size:1.1rem; margin-bottom:8px; }
footer .tag{ font-family: var(--sans); font-size:.66rem; color:#726c5c; letter-spacing:.25em; text-transform:uppercase; margin-bottom:34px; }
.socials{ display:flex; justify-content:center; gap:30px; margin-bottom:34px; flex-wrap:wrap; }
.socials a{ font-family: var(--sans); color: var(--gold-light); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; border-bottom:1px solid transparent; padding-bottom:3px; transition:.3s; }
.socials a:hover{ border-color: var(--gold-light); color: var(--gold-pale); }
footer .copy{ font-family: var(--sans); font-size:.68rem; color:#4a4638; }

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.wa-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 110;
  width: 56px; height: 56px; border-radius:50%;
  background: var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(182,134,44,.6);
  animation: floatPulse 2.6s ease-in-out infinite;
}
.wa-float svg{ width: 26px; height:26px; fill: var(--black); }
@keyframes floatPulse{
  0%,100%{ box-shadow: 0 12px 30px -8px rgba(182,134,44,.6); }
  50%{ box-shadow: 0 12px 34px -4px rgba(182,134,44,.85); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px){
  .essence-inner{ grid-template-columns: 1fr; gap: 50px; }
  .essence-visual{ aspect-ratio: 16/10; }
}

@media (max-width: 720px){
  nav{ display:none; }
  .header-cta{ padding: 9px 16px; font-size:.62rem; }
  .hero{ padding-top: 120px; }
  .hero-actions{ flex-direction: column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .marquee-track span{ font-size:.78rem; padding: 0 1.4rem; }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (pdp)
   ========================================================================== */
.pdp-breadcrumb{
  padding: 130px 6% 0;
  font-family: var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#8f8877;
}
.pdp-breadcrumb a{ color: var(--gold-light); }
.pdp-breadcrumb a:hover{ text-decoration: underline; }

.pdp-hero{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items:center;
  padding: 40px 6% 90px;
  max-width: 1300px; margin: 0 auto;
}
.pdp-media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 420px;
}
.pdp-gallery{
  display:flex; flex-direction:column; align-items:center; gap:22px; width:100%;
}
.pdp-gallery-main{
  position:relative; width:100%; min-height:420px;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}
.pdp-gallery-main::before{
  content:""; position:absolute; inset: 6% 10%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(182,134,44,.18), transparent 70%);
  z-index:-1;
}
.pdp-gallery-main img{
  max-width:100%; max-height: 480px; width:auto; object-fit:contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition: opacity .2s var(--ease);
}
.pdp-gallery-thumbs{ display:flex; gap:12px; }
.pdp-thumb{
  width:58px; height:58px; padding:7px; overflow:hidden;
  border: 1px solid rgba(182,134,44,.25); border-radius: 4px;
  background: rgba(255,255,255,.02); opacity:.55;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.pdp-thumb picture{ display:block; width:100%; height:100%; }
.pdp-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.pdp-thumb:hover{ opacity:.85; }
.pdp-thumb.active{ opacity:1; border-color: var(--gold); }
.pdp-info .product-tag{ position:static; display:inline-block; margin-bottom:18px; }
.pdp-info .brandline{ font-family: var(--sans); letter-spacing:.35em; text-transform:uppercase; font-size:.8rem; color: var(--gold-light); margin-bottom: 10px; }
.pdp-info h1{
  font-family: var(--display); font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing:.04em; color: var(--cream); line-height:1.1; margin-bottom: 20px;
}
.pdp-info .desc{ color: var(--ink); font-size: 1.12rem; max-width: 480px; margin-bottom: 26px; }
.pdp-info .facets{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 28px; }
.pdp-info .facets span, .pdp-info .product-tag{
  font-family: var(--sans); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--gold-dark); border: 1px solid rgba(182,134,44,.35); padding: 5px 11px; border-radius: 20px;
}
.pdp-info .product-tag{ color: var(--gold-light); background: rgba(182,134,44,.12); }
.pdp-info .price{
  font-family: var(--display); font-size: 1.7rem; color: var(--gold-light); margin-bottom: 30px;
}
.pdp-info .price small{ display:block; font-family: var(--sans); font-size:.62rem; letter-spacing:.2em; color:#726c5c; text-transform:uppercase; margin-top:2px; }
.pdp-info .pdp-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.pdp-format{ margin: -10px 0 26px; }
.format-label{ display:block; font-family: var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#8f8877; margin-bottom:12px; }
.format-options{ display:flex; flex-wrap:wrap; gap:10px; }
.format-opt{
  font-family: var(--sans); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink); background:transparent; border:1px solid rgba(182,134,44,.3);
  padding:9px 16px; border-radius:20px; transition: background .3s, color .3s, border-color .3s;
}
.format-opt:hover{ border-color: var(--gold); color: var(--gold-light); }
.format-opt.active{ background: var(--gold); color: var(--black); border-color: var(--gold); }
.pdp-info .price.is-tbd{ color: var(--gold-pale); font-style: italic; }

.shipping-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-family: var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-light); border: 1px solid rgba(182,134,44,.35);
  padding: 9px 18px; border-radius: 20px; background: rgba(182,134,44,.08);
}
.shipping-badge::before{ content:"◆"; color: var(--gold-dark); font-size:.6rem; }
.hero .shipping-badge{ margin: 26px auto 0; }

.pdp-pyramid{
  padding: 20px 6% 100px; max-width: 1100px; margin: 0 auto;
}
.pdp-pyramid .section-title{ margin-bottom: 48px; }
.pyramid-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  text-align:center;
}
.pyramid-item{
  border: 1px solid rgba(182,134,44,.25); border-radius: 4px;
  padding: 34px 22px; position:relative;
}
.pyramid-item .tier-num{
  font-family: var(--display); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--gold-dark); display:block; margin-bottom: 14px;
}
.pyramid-item h4{
  font-family: var(--display); font-size:1.1rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--gold-light); margin-bottom: 14px;
}
.pyramid-item p{ color: var(--ink); font-size: .98rem; }

.pyramid-stats{
  max-width: 640px; margin: 50px auto 0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 34px;
}
.stat-bar-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.stat-bar-head span{ font-family: var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#8f8877; }
.stat-bar-head strong{ font-family: var(--display); font-size:.95rem; color: var(--gold-light); }
.bar{ height:4px; background: rgba(182,134,44,.15); border-radius:4px; overflow:hidden; }
.bar-fill{ height:100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius:4px; }
@media (max-width:600px){ .pyramid-stats{ grid-template-columns:1fr; gap:26px; } }

.pdp-details{
  background: var(--cream); color: var(--black);
  padding: 90px 6%;
}
.pdp-details-grid{
  max-width: 1000px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 30px;
  text-align:center;
}
.pdp-details-grid .item span{ display:block; font-family: var(--sans); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:10px; }
.pdp-details-grid .item strong{ font-family: var(--display); font-size:1.2rem; color: var(--black); }
.pdp-details-grid .item.ideal-item{ grid-column: 1 / -1; }
.ideal-chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
.ideal-chips span{
  font-family: var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-dark); border: 1px solid rgba(122,90,23,.35); padding: 6px 14px; border-radius: 20px;
}

.pdp-other{
  padding: 90px 6%;
  text-align:center;
}
.pdp-other h3{ font-family: var(--display); font-size: 1.6rem; letter-spacing:.06em; margin-bottom: 40px; color: var(--cream); }
.pdp-other-grid{
  display:flex; gap: 30px; justify-content:center; flex-wrap:wrap;
}
.pdp-other-card{
  width: 220px; background: linear-gradient(175deg, #171410, #0a0908);
  border: 1px solid rgba(182,134,44,.18); border-radius: 6px;
  padding: 26px 20px; text-align:center;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.pdp-other-card:hover{ transform: translateY(-6px); border-color: rgba(182,134,44,.5); }
.pdp-other-card picture{ display:flex; justify-content:center; }
.pdp-other-card img{ max-height: 140px; max-width:100%; width:auto; margin: 0 auto 18px; object-fit:contain; }
.pdp-other-card .brandline{ font-family: var(--sans); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color: var(--gold-light); }
.pdp-other-card h4{ font-family: var(--display); font-size:1.05rem; color: var(--cream); margin: 6px 0 4px; }

@media (max-width: 860px){
  .pdp-hero{ grid-template-columns: 1fr; text-align:center; }
  .pdp-info .desc{ margin-left:auto; margin-right:auto; }
  .pdp-info .facets{ justify-content:center; }
  .pdp-info .pdp-actions{ justify-content:center; }
  .pyramid-grid{ grid-template-columns: 1fr; }
}