/* =============================================================
   Reina Huasteca — styles.css  (luxury: black marble · gold · amber light)
   1. Tokens · 2. Reset · 3. Utilities · 4. Type · 5. Components
   6. Sections · 7. Hero stage · 8. Effects · 9. Responsive · 10. Reduced motion
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
@property --shine { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root{
  --ink:#070504; --ink-2:#0c0805; --ink-3:#15100a; --ink-4:#1d160d;
  --gold:#f3b21b; --gold-2:#ffd66b; --gold-3:#fff0b8; --honey:#d9860c; --amber:#a5540a; --brown:#5b3a1e;
  --cream:#fff4dc; --cream-2:#f1e3c3; --muted:#b3a58b; --muted-2:#857a66;
  --line:rgba(255,214,140,.14); --line-2:rgba(255,214,140,.28);
  --foil:linear-gradient(90deg,#9a650c 0%,#e3a318 12%,#fff1b6 24%,#f4b72c 36%,#b87708 50%,#e8a820 62%,#ffe08a 74%,#d0900f 87%,#9a650c 100%);
  --gold-edge:linear-gradient(135deg,rgba(255,232,160,.95),rgba(200,128,20,.45) 35%,rgba(255,214,107,.9) 65%,rgba(130,80,10,.45));
  --glow:0 0 0 1px rgba(255,200,90,.08),0 20px 60px -25px rgba(255,150,20,.45);
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --gutter:16px; --max:1240px; --r:22px;
  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  --hex-flat:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23f5b642' stroke-width='1'%3E%3Cpath d='M56 0L112 32.4V97L56 129.4 0 97V32.4zM56 129.4L112 161.8V194M0 194V161.8L56 129.4'/%3E%3C/g%3E%3Cg fill='%23ffd66b'%3E%3Ccircle cx='56' cy='0' r='1.8'/%3E%3Ccircle cx='112' cy='97' r='1.8'/%3E%3Ccircle cx='0' cy='32.4' r='1.4'/%3E%3Ccircle cx='56' cy='129.4' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;line-height:1.02;letter-spacing:-.02em;font-weight:400}
ul{padding:0;list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}

/* 3. Utilities ------------------------------------------------- */
.container{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;background:var(--gold);color:var(--ink);z-index:9999;border-radius:8px;font-weight:700}
.skip-link:focus{top:1rem}
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--foil);box-shadow:0 0 12px rgba(255,190,60,.8)}
.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* 4. Typography ------------------------------------------------ */
h2{font-family:var(--serif);font-size:clamp(2.5rem,7vw,5.2rem)}
h2 em,.gold-text{font-style:italic;background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil-move 9s linear infinite;padding-right:.06em}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.kicker{display:inline-flex;align-items:center;gap:12px;color:var(--gold-2);margin-bottom:18px}
.kicker::before{content:"";width:10px;height:11.5px;clip-path:var(--hex);background:var(--foil);box-shadow:0 0 10px var(--gold)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--cream-2);border:1px solid var(--line-2);padding:8px 16px;border-radius:999px;background:rgba(20,14,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:.64rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 0 rgba(255,200,90,.6);animation:pulse 2.4s infinite}
.shine{font-style:italic;background:linear-gradient(100deg,#b8650a 0%,var(--gold) calc(var(--shine) + 8%),#fff5c8 calc(var(--shine) + 20%),var(--gold) calc(var(--shine) + 32%),#c97a0c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5.5s var(--ease-out) infinite;padding-right:.08em}

/* 5. Components ------------------------------------------------ */
.btn{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font-weight:700;font-size:.98rem;letter-spacing:-.01em;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease-out),box-shadow .4s,color .3s,border-color .3s;isolation:isolate;overflow:hidden;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn-gold{background:var(--foil);background-size:200% 100%;background-position:0 0;color:#1b1103;box-shadow:inset 0 1px 0 rgba(255,250,220,.7),inset 0 -2px 6px rgba(120,70,0,.35),0 10px 34px -10px rgba(255,170,30,.75);transition:transform .5s var(--ease-out),box-shadow .4s,background-position 1.2s var(--ease-out)}
.btn-gold:hover{background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,250,220,.8),inset 0 -2px 6px rgba(120,70,0,.35),0 16px 46px -10px rgba(255,190,50,.95)}
.btn-gold::after{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease-out);z-index:-1;mix-blend-mode:overlay}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-line{border:1px solid var(--line-2);color:var(--cream);background:rgba(15,10,6,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-line:hover{border-color:var(--gold-2);color:var(--gold-2);box-shadow:0 0 30px -8px rgba(255,190,60,.5)}
.btn-sm{padding:10px 18px;font-size:.88rem}
.btn-block{width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:3px}
.link-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* Gold foil panel */
.foil{position:relative;background:var(--foil);background-size:200% 100%;color:#1b1103;border:0;animation:foil-move 12s linear infinite;box-shadow:inset 0 1px 0 rgba(255,250,220,.6),0 24px 70px -30px rgba(255,170,30,.7)}
.foil::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain);opacity:.35;mix-blend-mode:overlay;pointer-events:none}

/* Glowing gold hexagon with real honeycomb inside (like the hero) */
.hexw{position:relative;filter:drop-shadow(0 0 22px rgba(255,160,20,.45)) drop-shadow(0 0 4px rgba(255,210,120,.5))}
.hexf{position:relative;width:100%;aspect-ratio:1.1547/1;clip-path:var(--hex-flat);background:var(--foil);background-size:200% 100%;animation:foil-move 10s linear infinite}
.hexf::before{content:"";position:absolute;inset:4.5%;clip-path:var(--hex-flat);background:linear-gradient(160deg,#6b4308,#1b1106)}
.hexf::after{content:"";position:absolute;inset:7%;clip-path:var(--hex-flat);background:radial-gradient(circle at 50% 40%,rgba(255,230,160,.18),transparent 45%,rgba(0,0,0,.55) 100%),var(--img,url(assets/img/panal-1.webp?v=20261001a)) center/cover}
.hexf.hollow::after{background:radial-gradient(circle at 50% 45%,rgba(255,170,40,.2),rgba(8,5,3,.96) 70%)}

/* Image placeholders */
.ph{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 30% 20%,rgba(255,190,60,.2),transparent 60%),
  linear-gradient(rgba(7,5,4,.62),rgba(7,5,4,.62)),url(assets/img/marmol.webp?v=20261001a) 40% 30%/1100px auto,#0c0805;display:flex;align-items:flex-end;justify-content:flex-start}
.ph::before{content:"";position:absolute;inset:0;opacity:.18;background-image:var(--net);background-size:56px 97px}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,240,200,.1) 45%,transparent 60%);transform:translateX(-100%);animation:sheen 5s ease-in-out infinite}
.ph:has(img)::before,.ph:has(img)::after{display:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.ph-label{position:relative;z-index:1;margin:16px;padding:7px 12px;border-radius:999px;background:rgba(7,5,3,.75);border:1px solid var(--line-2);color:var(--gold-3);font-size:.62rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* 6. Sections -------------------------------------------------- */
section{position:relative}
.net-bg::before{content:"";position:absolute;inset:0;background-image:var(--net);background-size:112px 194px;opacity:.07;pointer-events:none;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--ink);transition:transform .5s var(--ease-out),background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(7,5,4,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{width:42px;height:42px;border-radius:50%;background:var(--cream);display:grid;place-items:center;box-shadow:0 0 0 2px #d99a1c,0 0 0 3px rgba(255,230,160,.5),0 0 22px rgba(255,170,40,.45);overflow:hidden;flex:none}
.brand-badge img{width:68%;height:auto;transform:translateX(4%)}
.brand-name{font-family:var(--serif);font-size:1.45rem;line-height:1}
.brand-name em{font-style:italic;background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:none;gap:32px;font-size:.92rem;color:var(--cream-2)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--foil);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:none}
.nav-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-content:center;gap:6px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease-out)}
.nav.menu-open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.menu-open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{display:grid;gap:4px;padding:0 var(--gutter);max-height:0;overflow:hidden;background:rgba(7,5,4,.97);transition:max-height .6s var(--ease-out),padding .6s var(--ease-out)}
.mobile-menu a{font-family:var(--serif);font-size:2rem;padding:6px 0;border-bottom:1px solid var(--line)}
.mobile-menu .btn{font-family:var(--sans);font-size:1rem;margin:16px 0 4px;border:0}
.nav.menu-open .mobile-menu{max-height:480px;padding:10px var(--gutter) 22px}
.nav.menu-open{background:rgba(7,5,4,.97)}

/* Hero */
.hero{position:relative;min-height:100svh;padding:118px 0 40px;overflow:hidden;background:
  radial-gradient(60% 55% at 78% 45%,rgba(255,140,20,.16),transparent 70%),
  radial-gradient(40% 40% at 10% 90%,rgba(170,90,10,.12),transparent 70%),var(--ink)}
.hero-comb{position:absolute;inset:-10% -5%;opacity:.09;background-image:var(--net);background-size:112px 194px;-webkit-mask-image:radial-gradient(60% 70% at 30% 45%,#000,transparent);mask-image:radial-gradient(60% 70% at 30% 45%,#000,transparent)}
.hero-glow{position:absolute;width:560px;height:560px;left:var(--gx,30%);top:var(--gy,50%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,180,40,.13),transparent 65%);pointer-events:none;transition:left .8s var(--ease-out),top .8s var(--ease-out);mix-blend-mode:screen;z-index:1}
.drips{position:absolute;top:var(--navh,72px);left:0;width:100%;height:90px;z-index:4;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.drips path{fill:url(#dripGrad)}
.drop{position:absolute;top:var(--navh,72px);z-index:4;width:12px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff3b8,#f3b21b 45%,#b86a08);opacity:0;animation:drip 5.5s cubic-bezier(.55,0,1,.45) infinite}
.d1{left:10.1%;animation-delay:.8s}.d2{left:59%;animation-delay:2.6s}.d3{left:83.9%;animation-delay:4s}.d4{left:34.2%;animation-delay:6.5s}

.hero-grid{position:relative;z-index:3;display:grid;gap:28px;align-items:center}
.hero-copy{position:relative;z-index:3}
.hero-title{font-family:var(--serif);font-size:clamp(3.1rem,12vw,7.2rem);line-height:.93;letter-spacing:-.035em;margin:20px 0 20px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero-title .w > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease-out)}
.is-ready .hero-title .w > span{transform:none}
.hero-sub{font-size:clamp(1.02rem,2.3vw,1.18rem);color:var(--cream-2);max-width:44ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-size:.9rem;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:10px;height:11.5px;clip-path:var(--hex);background:var(--foil)}
.trust b{color:var(--cream)}
.scroll-cue{display:none!important;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:.6rem;z-index:5}
.scroll-cue span{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;left:-1px;top:-30%;width:3px;height:30%;background:var(--gold-2);animation:cue 2s var(--ease-out) infinite}

/* 7. Hero stage (layers cut from the reference render) --------- */
.hero-visual{position:relative;z-index:2;order:-1;margin-top:8px}
.stage-crop{position:relative;aspect-ratio:1/1.02;overflow:hidden;margin:0 calc(-1 * var(--gutter));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent)}
.stage{--lvl:37.3%;position:absolute;width:132%;left:-19.3%;top:-8.5%;aspect-ratio:1010/889;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.stage:focus-visible{outline:2px solid var(--gold-2);outline-offset:-6px}
.st{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.st-fondo,.st-miel,.st-final{inset:0;width:100%;height:100%}
.st-final{transition:opacity 1.5s var(--ease-out)}
.st-miel{-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--lvl) - .25%),#000 calc(var(--lvl) + .25%));mask-image:linear-gradient(180deg,transparent calc(var(--lvl) - .25%),#000 calc(var(--lvl) + .25%))}
.st-spot{position:absolute;left:24%;top:8%;width:56%;height:88%;background:radial-gradient(closest-side,rgba(255,170,40,.24),rgba(255,120,10,.08) 60%,transparent);mix-blend-mode:screen;opacity:0;transition:opacity 1.2s;pointer-events:none}
.st-trapo{transform-origin:50% 60%;will-change:transform}
.st-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* States driven by main.js (no JS → the finished render shows) */
.stage.armed .st-final{opacity:0}
.stage.armed .st-trapo{opacity:0;transform:translateY(-75%) rotate(-7deg) scale(1.04)}
.stage.armed .st-spot{opacity:1}
.stage.cloth .st-trapo{animation:cloth-drop 1.05s cubic-bezier(.3,.05,.35,1) both}
.stage.lit .st-final,.stage.done .st-final,.force-show .stage.armed:not(.playing) .st-final{opacity:1}
.no-js .stage .st-final{opacity:1}
.stage.lit .st-spot{opacity:0}

/* Marquees */
.marquees{position:relative;z-index:3;padding:34px 0;margin:-10px 0;overflow:hidden}
.marquee{--skew:0deg;overflow:hidden;padding:14px 0;white-space:nowrap}
.m-yellow{background:var(--foil);background-size:200% 100%;animation:foil-move 14s linear infinite;color:#1b1103;transform:rotate(-2deg) skewX(var(--skew));box-shadow:0 10px 50px rgba(255,160,20,.35)}
.m-black{border-block:1px solid var(--line-2);color:var(--gold-2);transform:rotate(1.4deg) skewX(var(--skew));margin-top:-6px;
  background:linear-gradient(rgba(8,6,4,.72),rgba(8,6,4,.72)),url(assets/img/marmol.webp?v=20261001a) 0 40%/800px auto}
.marquee-track{display:inline-flex;align-items:center;gap:26px;animation:marquee 34s linear infinite;will-change:transform}
[data-reverse] .marquee-track{animation-direction:reverse;animation-duration:40s}
.marquee span{font-family:var(--serif);font-size:clamp(1.6rem,4.5vw,2.8rem);line-height:1;font-style:italic}
.marquee i{font-style:normal;font-size:1.1rem}

/* Manifesto */
.manifesto{padding:120px 0 90px;overflow:hidden}
.manifesto-grid{display:grid;gap:40px;align-items:center}
.manifesto-text{font-family:var(--serif);font-size:clamp(1.9rem,5.2vw,3.8rem);line-height:1.12;letter-spacing:-.015em;max-width:22ch}
.manifesto-text .mw{color:rgba(255,244,220,.14);transition:color .5s var(--ease-out),text-shadow .5s}
.manifesto-text .mw.on{color:var(--cream)}
.manifesto-text .mw.hl.on{color:var(--gold-2);font-style:italic;text-shadow:0 0 24px rgba(255,180,40,.45)}
.no-js-words .manifesto-text .mw{color:var(--cream)}
.hex-cluster{position:relative;width:min(100%,420px);aspect-ratio:1/1;margin:0 auto}
.hex-cluster .hexw{position:absolute;width:var(--w)}
.hex-cluster .h1{--w:64%;left:0;top:18%}
.hex-cluster .h2{--w:42%;right:0;top:0}
.hex-cluster .h3{--w:46%;right:2%;bottom:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:72px;border-radius:var(--r);overflow:hidden;background:var(--gold-edge);padding:1px}
.stat{background:linear-gradient(160deg,rgba(24,18,10,.9),rgba(7,5,3,.95)),url(assets/img/marmol.webp?v=20261001a) var(--mp,20% 30%)/700px auto;padding:28px 22px}
.stat:nth-child(2){--mp:60% 70%}.stat:nth-child(3){--mp:80% 20%}.stat:nth-child(4){--mp:10% 90%}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,8vw,4.6rem);line-height:1;background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,170,30,.35))}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:.92rem}

/* Apiary */
.apiary{padding:110px 0;background:radial-gradient(60% 50% at 20% 30%,rgba(255,150,20,.1),transparent 70%),var(--ink)}
.apiary .sec-head{align-items:flex-end}
.apiary-lead{color:var(--cream-2);max-width:44ch}
.apiary-grid{display:grid;gap:16px}
.ap{position:relative;margin:0}
.ap-frame{border-radius:24px;padding:1px;background:var(--gold-edge);box-shadow:0 30px 80px -35px rgba(255,150,20,.55)}
.ap-frame .ph{border-radius:23px;aspect-ratio:3/2}
.ap-frame .ph::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,5,3,.7)),linear-gradient(120deg,rgba(255,170,40,.12),transparent 50%);transform:none;animation:none;pointer-events:none}
.ap:hover .ph img{transform:scale(1.04)}
.ap figcaption{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--gold-3);font-size:.6rem;padding:6px 11px;border-radius:999px;background:rgba(7,5,3,.6);border:1px solid var(--line-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ap-a .ph{aspect-ratio:3/2}
.lux-note{display:flex;gap:18px;align-items:center;border-radius:24px;padding:24px;border:1px solid transparent;background:linear-gradient(160deg,rgba(26,19,11,.85),rgba(7,5,3,.94)) padding-box,url(assets/img/marmol.webp?v=20261001a) 30% 60%/900px auto padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.lux-note .hexw{flex:none;width:64px}
.lux-note p{color:var(--cream-2)}
.lux-note b{color:var(--gold-2);font-weight:700}

/* Benefits bento */
.benefits{padding:90px 0 110px;overflow:hidden;background:radial-gradient(50% 40% at 85% 10%,rgba(255,150,20,.1),transparent 70%),var(--ink-2)}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head.center h2{margin-inline:auto;max-width:18ch}
.sec-head h2{max-width:16ch}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bento{display:grid;gap:14px}
.card{--rx:0deg;--ry:0deg;--sx:50%;--sy:50%;position:relative;border-radius:var(--r);padding:28px;overflow:hidden;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease-out),box-shadow .5s;transform-style:preserve-3d}
.card:not(.foil){border:1px solid transparent;background:
  radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,190,70,.12),transparent 60%) padding-box,
  linear-gradient(160deg,rgba(26,19,11,.8),rgba(7,5,3,.92)) padding-box,
  url(assets/img/marmol.webp?v=20261001a) var(--mp,30% 40%)/900px auto padding-box,
  var(--gold-edge) border-box;box-shadow:var(--glow)}
.card:nth-child(2){--mp:70% 20%}.card:nth-child(3){--mp:20% 80%}.card:nth-child(4){--mp:90% 60%}
.card:hover{box-shadow:0 0 0 1px rgba(255,210,120,.2),0 30px 80px -30px rgba(255,160,20,.6)}
.card h3{margin:14px 0 10px;font-size:1.3rem}
.card p{color:var(--muted);font-size:.97rem}
.num{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon{width:50px;height:50px;margin-bottom:22px;filter:drop-shadow(0 0 10px rgba(255,170,30,.45))}
.icon polygon{fill:rgba(255,190,60,.08);stroke:var(--gold);stroke-width:1.5}
.icon path{fill:none;stroke:var(--gold-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c-wide{display:grid;gap:22px;padding:0}
.c-wide .card-body{padding:28px 28px 0}
.c-wide h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.02}
.c-wide h3 em{font-style:italic;background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil-move 9s linear infinite}
.c-wide .ph-card::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,7,1) 0%,rgba(18,13,7,.6) 16%,rgba(18,13,7,.15) 34%,transparent 50%);transform:none;animation:none}
.c-wide .ph-card img{object-position:60% 50%}
.ph-card{min-height:220px}
.card.c-comb{background:
  linear-gradient(180deg,rgba(10,6,2,.5),rgba(10,6,2,.92) 62%) padding-box,
  url(assets/img/panal-1.webp?v=20261001a) center/cover padding-box,var(--gold-edge) border-box}
.c-comb p{color:var(--cream-2)}
.foil .icon polygon{fill:rgba(40,20,0,.08);stroke:#2a1a04}
.foil .icon path{stroke:#2a1a04}
.foil .icon{filter:none}
.foil p,.foil .num{color:rgba(27,17,3,.8);-webkit-text-fill-color:currentColor;background:none}
.note{display:block;margin-top:14px;font-size:.78rem;opacity:.75}

/* Audience */
.audience{padding:110px 0;background:var(--ink)}
.aud-grid{display:grid;gap:18px}
.aud{--rx:0deg;--ry:0deg;position:relative;border-radius:28px;overflow:hidden;display:grid;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease-out)}
.aud-dark{border:1px solid transparent;background:linear-gradient(160deg,rgba(26,19,11,.8),rgba(7,5,3,.92)) padding-box,url(assets/img/marmol.webp?v=20261001a) 60% 30%/900px auto padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.ph-aud{aspect-ratio:16/10}
.aud-body{position:relative;z-index:1;padding:30px 28px 34px}
.tag{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid currentColor;opacity:.85;font-size:.62rem}
.aud h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.02;margin:16px 0 18px}
.ticks{display:grid;gap:10px;margin-bottom:26px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.ticks li::before{content:"";flex:none;margin-top:7px;width:11px;height:12.5px;clip-path:var(--hex);background:var(--foil)}
.foil .ticks li::before{background:#2a1a04}
.aud-dark .link-arrow{color:var(--gold-2)}

/* Sizes / frascos */
.sizes{padding:110px 0;overflow:hidden;background:radial-gradient(50% 60% at 15% 50%,rgba(255,140,20,.14),transparent 70%),var(--ink-2)}
.sizes-grid{display:grid;gap:44px;align-items:center}
.sizes-photo{position:relative}
.sizes-photo .frame{position:relative;border-radius:30px;padding:1px;background:var(--gold-edge);box-shadow:0 30px 90px -30px rgba(255,160,20,.55)}
.sizes-photo .ph{aspect-ratio:8/9;border-radius:29px}
.sizes-photo:hover img{transform:scale(1.04)}
.sizes-photo .hexw{position:absolute;width:34%;right:-6%;bottom:-6%;z-index:2}
.sizes-tag{position:absolute;left:-6px;top:26px;z-index:2;padding:9px 14px;border-radius:999px;transform:rotate(-4deg);font-weight:500;font-size:.64rem;color:#1b1103;background:var(--foil);box-shadow:0 8px 24px rgba(255,160,20,.4)}
.sizes-copy > p{color:var(--cream-2);max-width:42ch;margin-top:18px}
.size-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0}
.size{--rx:0deg;--ry:0deg;position:relative;border-radius:22px;padding:22px 18px;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease-out)}
.size:not(.foil){border:1px solid transparent;background:linear-gradient(160deg,rgba(26,19,11,.8),rgba(7,5,3,.92)) padding-box,url(assets/img/marmol.webp?v=20261001a) 20% 60%/700px auto padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.size-num{display:block;font-family:var(--serif);font-size:clamp(2.8rem,9vw,4rem);line-height:1;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.size-num small{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;margin-left:4px}
.size h3{margin:12px 0 6px;font-size:1.05rem}
.size p{color:var(--muted);font-size:.9rem}
.size.foil .size-num{background:none;color:#1b1103;-webkit-text-fill-color:#1b1103}
.size.foil p{color:rgba(27,17,3,.75)}

/* Products (3 presentations) */
.sec-sub{color:var(--cream-2);max-width:52ch;margin:18px auto 0}
.products{display:grid;gap:18px}
.product{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(170deg,rgba(26,19,11,.86),rgba(7,5,3,.95)) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,30% 50%)/900px auto padding-box,var(--gold-edge) border-box;
  box-shadow:var(--glow);transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease-out),box-shadow .5s}
.product:nth-child(2){--mp:70% 20%}
.product:hover{box-shadow:0 0 0 1px rgba(255,210,120,.25),0 34px 90px -30px rgba(255,160,20,.65)}
.product-img{aspect-ratio:494/534}
.product-img::after{display:block!important;content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(7,5,3,.85));transform:none;animation:none}
.product:hover .product-img img{transform:scale(1.05)}
.product-body{position:relative;display:flex;flex-direction:column;gap:6px;padding:4px 24px 26px;margin-top:-54px;z-index:1}
.product-body .tag{align-self:flex-start;color:var(--gold-2);margin-bottom:6px;background:rgba(7,5,3,.6)}
.product-body h3{font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1.05;margin-top:2px}
.product-body p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.product-body .link-arrow{align-self:flex-start;color:var(--gold-2);margin-top:auto}
.product-pro{background:linear-gradient(170deg,rgba(30,21,10,.86),rgba(7,5,3,.95)) padding-box,url(assets/img/marmol.webp?v=20261001a) 20% 80%/900px auto padding-box,var(--foil) border-box;border-width:2px;
  box-shadow:0 0 0 1px rgba(255,200,90,.15),0 30px 90px -25px rgba(255,160,20,.75)}
.pro-ribbon{position:absolute;z-index:3;top:18px;right:-44px;transform:rotate(38deg);width:190px;text-align:center;padding:7px 0;font-size:.56rem;font-weight:500;color:#1b1103;background:var(--foil);background-size:200% 100%;animation:foil-move 10s linear infinite;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.products-cta{display:flex;justify-content:center;margin-top:40px}

/* Testimonials */
.testimonials{padding:110px 0 90px;background:var(--ink);overflow:hidden}
.slider-ctrl{display:flex;gap:10px}
.round{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--ease-out)}
.round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round:hover{background:var(--foil);color:#1b1103;border-color:transparent;transform:scale(1.06);box-shadow:0 0 30px rgba(255,170,30,.5)}
.slider{position:relative;z-index:2;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) 30px;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.slider::-webkit-scrollbar{display:none}
.slider.dragging{cursor:grabbing;scroll-snap-type:none}
.slider.dragging .quote{pointer-events:none}
.quote{flex:0 0 min(86vw,440px);scroll-snap-align:start;border-radius:26px;padding:30px 28px;display:flex;flex-direction:column;gap:22px;transition:transform .6s var(--ease-out),box-shadow .4s}
.quote:not(.foil){border:1px solid transparent;background:linear-gradient(160deg,rgba(26,19,11,.8),rgba(7,5,3,.92)) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,40% 40%)/800px auto padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.quote:nth-child(3){--mp:80% 10%}.quote:nth-child(5){--mp:10% 80%}
.quote:hover{transform:translateY(-6px)}
.quote.q-comb{background:linear-gradient(180deg,rgba(10,6,2,.55),rgba(10,6,2,.92) 68%) padding-box,url(assets/img/panal-2.webp?v=20261001a) center/cover padding-box,var(--gold-edge) border-box}
.stars{color:var(--gold-2);letter-spacing:.18em;font-size:1.05rem;text-shadow:0 0 12px rgba(255,180,40,.6)}
.foil .stars{color:#2a1a04;text-shadow:none}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.35rem,3.2vw,1.65rem);line-height:1.25;flex:1}
.quote figcaption{display:flex;align-items:center;gap:14px}
.quote figcaption b{display:block;font-size:.98rem}
.quote figcaption small{color:var(--muted);font-size:.84rem}
.foil figcaption small{color:rgba(27,17,3,.7)}
.avatar{width:48px;height:48px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(255,210,120,.4)}
.avatar::after{display:none}
.slider-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.slider-bar span{display:block;height:100%;width:var(--w,20%);transform:translateX(var(--x,0%));background:var(--foil);transition:transform .2s linear;box-shadow:0 0 10px rgba(255,180,40,.7)}

/* Facebook band */
.social-band{padding:0 0 30px;background:var(--ink)}
.fb-card{display:grid;grid-template-columns:auto 1fr;gap:18px 20px;align-items:center;border-radius:28px;padding:26px 24px;color:#1b1103;transition:transform .6s var(--ease-out),box-shadow .5s}
.fb-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,250,220,.6),0 34px 90px -30px rgba(255,170,30,.9)}
.fb-logo{width:64px;height:64px;border-radius:18px;background:#1b1103;display:grid;place-items:center;box-shadow:0 10px 30px rgba(60,30,0,.35)}
.fb-logo svg{width:34px;height:34px;fill:var(--gold-2)}
.fb-text{display:grid;gap:4px}
.fb-text .mono{font-size:.62rem;opacity:.75}
.fb-text b{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.05}
.fb-text small{font-size:.92rem;opacity:.8}
.fb-cta{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 20px;border-radius:999px;background:#1b1103;color:var(--gold-2)}
.fb-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.fb-card:hover .fb-cta svg{transform:translateX(4px)}

/* Contact */
.contact{padding:120px 0;overflow:hidden;background:
  radial-gradient(60% 60% at 100% 0%,rgba(255,150,20,.16),transparent 70%),
  radial-gradient(50% 50% at 0% 100%,rgba(170,90,10,.14),transparent 70%),var(--ink-2)}
.contact-deco{position:absolute;right:-70px;top:30px;width:300px;height:300px;z-index:1;opacity:.5;pointer-events:none}
.contact-deco .hexw{position:absolute;width:var(--w)}
.contact-deco .a{--w:70%;right:0;top:0}
.contact-deco .b{--w:44%;left:0;bottom:0}
.contact-grid{display:grid;gap:48px}
.contact-title{font-size:clamp(3.2rem,11vw,7rem);line-height:.92;margin-bottom:22px}
.contact-copy > p{color:var(--cream-2);max-width:40ch}
.contact-list{margin-top:34px;display:grid;border-top:1px solid var(--line)}
.contact-list li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.contact-list .mono{color:var(--muted)}
.contact-list a{font-weight:700;transition:color .3s}
.contact-list a:hover{color:var(--gold-2)}
.form{border-radius:28px;padding:26px 22px;display:grid;gap:16px;border:1px solid transparent;
  background:linear-gradient(160deg,rgba(26,19,11,.82),rgba(7,5,3,.94)) padding-box,url(assets/img/marmol.webp?v=20261001a) 70% 40%/900px auto padding-box,var(--gold-edge) border-box;box-shadow:0 40px 100px -40px rgba(255,150,20,.5)}
.chips{border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{color:var(--muted);margin-bottom:10px;width:100%}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s var(--ease-out)}
.chips input:checked + span{background:var(--foil);color:#1b1103;border-color:transparent;box-shadow:0 0 20px rgba(255,170,30,.4)}
.chips input:focus-visible + span{outline:2px solid var(--gold-2);outline-offset:2px}
.field{position:relative}
.field input,.field textarea{width:100%;font:inherit;color:var(--cream);background:rgba(5,3,2,.7);border:1px solid var(--line);border-radius:16px;padding:24px 16px 10px;outline:none;transition:border-color .3s,box-shadow .3s;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(243,178,27,.14),0 0 24px rgba(255,170,30,.2)}
.field label{position:absolute;left:17px;top:17px;color:var(--muted);pointer-events:none;transition:all .3s var(--ease-out);font-size:.98rem}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{top:7px;font-size:.7rem;color:var(--gold-2);letter-spacing:.04em}
.field.err input{border-color:#ff7a59}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.field select{width:100%;font:inherit;color:var(--cream);background:rgba(5,3,2,.7);border:1px solid var(--line);border-radius:16px;padding:24px 40px 10px 16px;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.field select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(243,178,27,.14)}
.field select option{background:#140e07;color:var(--cream)}
.field label.up{top:7px;font-size:.7rem;color:var(--gold-2);letter-spacing:.04em}
.field.err input,.field.err textarea{border-color:#ff7a59}
.btn[disabled]{opacity:.7;pointer-events:none}
.quick{display:grid;gap:10px;margin-top:26px}
.quick-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;border:1px solid transparent;transition:transform .5s var(--ease-out),box-shadow .4s;
  background:linear-gradient(160deg,rgba(26,19,11,.85),rgba(7,5,3,.94)) padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.quick-btn:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,210,120,.25),0 20px 50px -20px rgba(255,160,20,.6)}
.quick-btn svg{width:40px;height:40px;flex:none;padding:9px;border-radius:12px;fill:#1b1103;background:var(--foil);background-size:200% 100%}
.quick-btn b{display:block;font-size:.98rem}
.quick-btn small{color:var(--muted);font-size:.82rem}
.foot-social{position:relative;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-10px 0 22px}
.foot-social a{display:inline-grid;place-items:center;color:var(--cream-2)}
.foot-social a svg{width:40px;height:40px;padding:9px;border-radius:50%;fill:var(--gold-2);border:1px solid var(--line-2);transition:background .3s,fill .3s}
.foot-social a:hover svg{background:var(--foil);fill:#1b1103}
.foot-social a.mono{font-size:.66rem;margin-left:6px}
.foot-social a.mono:hover{color:var(--gold-2)}
.form-ok{min-height:1.4em;font-weight:600;color:var(--gold-2);text-align:center}

/* Footer */
.footer{position:relative;background:var(--ink);padding:80px 0 34px;border-top:1px solid var(--line);overflow:hidden}
.footer::before{content:"";position:absolute;left:50%;bottom:-40%;width:120%;height:80%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,150,20,.16),transparent);pointer-events:none}
.foot-top{position:relative;z-index:3;display:grid;gap:28px;align-items:end}
.foot-logo{width:118px;height:118px;border-radius:50%;background:var(--cream);padding:12px;object-fit:contain;box-shadow:0 0 0 3px #d99a1c,0 0 0 5px rgba(255,230,160,.4),0 0 40px rgba(255,170,40,.45);margin-bottom:26px}
.foot-claim{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 22px;color:var(--cream-2)}
.foot-links a:hover{color:var(--gold-2)}
.wordmark{position:relative;font-family:var(--serif);line-height:.84;letter-spacing:-.02em;text-align:center;margin:56px 0 30px;color:transparent;-webkit-text-stroke:1px rgba(255,200,90,.5);pointer-events:none;
  background:linear-gradient(0deg,#b8650a 0%,#f3b21b calc(var(--fill,0%) * .45),#ffe9a8 calc(var(--fill,0%) * .8),#e0a020 var(--fill,0%),transparent var(--fill,0%));-webkit-background-clip:text;background-clip:text;user-select:none;filter:drop-shadow(0 0 30px rgba(255,160,20,.25))}
.wordmark span{display:block;white-space:nowrap;font-size:clamp(4rem,24vw,19rem)}
.wordmark span + span{margin-top:.04em}
.foot-bottom{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted-2);font-size:.62rem}

/* 8. Effects --------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.js .reveal.in,.force-show .reveal{opacity:1;transform:none}
.js .hero-copy .eyebrow,.js .hero-sub,.js .hero-ctas,.js .trust{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.is-ready .hero-copy .eyebrow{opacity:1;transform:none;transition-delay:.1s}
.is-ready .hero-sub{opacity:1;transform:none;transition-delay:.55s}
.is-ready .hero-ctas{opacity:1;transform:none;transition-delay:.7s}
.is-ready .trust{opacity:1;transform:none;transition-delay:.85s}

@keyframes foil-move{to{background-position:-200% 0}}
@keyframes shine{0%{--shine:-30%}60%,100%{--shine:100%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,200,90,.55)}70%,100%{box-shadow:0 0 0 10px rgba(255,200,90,0)}}
@keyframes sheen{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drip{0%{opacity:0;transform:translateY(40px) scale(.4)}12%{opacity:1;transform:translateY(58px) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(78vh) scale(.8)}}
@keyframes cue{to{top:110%}}
@keyframes cloth-drop{
  0%{opacity:0;transform:translateY(-75%) rotate(-7deg) scale(1.04)}
  18%{opacity:1}
  62%{transform:translateY(1.5%) rotate(1deg) scale(1)}
  80%{transform:translateY(-.8%) rotate(-.4deg)}
  100%{opacity:1;transform:none}}

/* 9. Responsive (mobile-first) --------------------------------- */
@media (min-width:540px){
  :root{--gutter:24px}
  .eyebrow{font-size:.72rem}
  .stats{grid-template-columns:repeat(4,1fr)}
  .form{padding:32px}
}
@media (min-width:720px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .c-wide{grid-column:span 2;grid-template-columns:1fr 1fr;align-items:stretch}
  .c-wide .card-body{padding:36px;align-self:center}
  .ph-card{min-height:100%}
  .foil.card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:26px;align-items:center}
  .foil.card .icon{grid-row:span 4;width:72px;height:72px;margin:0}
  .foil.card h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:4px 0 6px}
  .aud-grid{grid-template-columns:1fr 1fr}
  .products{grid-template-columns:1fr 1fr}
  .apiary-grid{grid-template-columns:1fr 1fr}
  .ap-a{grid-column:1/-1}
  .ap-a .ph{aspect-ratio:21/9}
  .product-pro{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .product-pro .product-body{margin-top:0;padding:30px}
  .foot-top{grid-template-columns:1fr auto}
  .quick{grid-template-columns:1fr 1fr}
  .fb-card{grid-template-columns:auto 1fr auto;padding:30px 36px}
  .fb-cta{grid-column:auto;justify-self:end}
  .foot-links{justify-content:flex-end}
}
@media (min-width:960px){
  :root{--gutter:40px}
  .nav-links,.nav-cta{display:flex}
  .nav-toggle,.mobile-menu{display:none}
  .hero{padding:0;display:flex;align-items:center;height:100svh;min-height:700px;max-height:1100px}
  .hero > .container,.hero-grid{position:static}
  .hero-copy::before{content:"";position:absolute;left:-12%;top:-8%;width:125%;height:116%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(7,5,4,.72),rgba(7,5,4,.35) 60%,transparent)}
  .hero-grid{grid-template-columns:minmax(0,.54fr) minmax(0,.46fr);padding-top:calc(var(--navh,72px) + 30px)}
  .hero-title{font-size:clamp(4.4rem,6.2vw,7rem)}
  .hero-visual{position:absolute;z-index:1;top:var(--navh,72px);bottom:0;right:-2vw;aspect-ratio:1010/889;order:0;margin:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 12%,#000 26%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 12%,#000 26%)}
  .stage-crop{position:absolute;inset:0;aspect-ratio:auto;margin:0;-webkit-mask-image:none;mask-image:none}
  .stage{width:100%;height:100%;left:0;top:0}
  .scroll-cue{display:flex!important;left:22%}
  .manifesto-grid{grid-template-columns:1.35fr .65fr}
  .bento{grid-template-columns:repeat(3,1fr)}
  .c-wide{grid-column:span 2}
  .contact-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .manifesto{padding:170px 0 120px}
  .benefits,.audience,.testimonials{padding-block:140px}
  .aud:nth-child(2){margin-top:80px}
  .sizes{padding:140px 0}
  .products{grid-template-columns:repeat(3,1fr);gap:22px}
  .apiary{padding:140px 0}
  .apiary-grid{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:20px}
  .ap-a{grid-column:1;grid-row:1 / span 2}
  .ap-a .ph{aspect-ratio:auto;height:100%}
  .ap-a .ap-frame{height:100%}
  .ap-note{grid-column:1/-1}
  .product-pro{grid-column:auto;display:flex;align-items:stretch;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry))}
  .product-pro .product-body{margin-top:-54px;padding:4px 24px 26px}
  .contact-deco{width:520px;height:520px;right:-140px;top:-60px}
}

/* 10. Reduced motion — only intrusive effects ------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .drop{display:none}
  .marquee-track{animation-duration:90s}
  .ph::after{animation:none}
  .particles{display:none}
}

/* =============================================================
   11. TEMA CLARO — blanco / crema miel con oro protagonista
   (capa de colores; la estructura y animaciones no cambian)
   ============================================================= */
:root{
  --ink:#fffbf2; --ink-2:#fff3d6; --ink-3:#ffffff; --ink-4:#fde9bb;
  --cream:#2a1905; --cream-2:#5b4320; --muted:#7c6443; --muted-2:#9a8463;
  --gold-ink:#a8670a; --gold-deep:#8a5206;
  --line:rgba(176,112,10,.2); --line-2:rgba(176,112,10,.36);
  --foil-text:linear-gradient(90deg,#8a5206 0%,#c47f0b 14%,#e6a116 28%,#b06d08 44%,#d8940f 58%,#f0b022 72%,#a8670a 86%,#8a5206 100%);
  --gold-edge:linear-gradient(135deg,#f7cf5a,#e3a417 35%,#ffe7a0 62%,#c9850e);
  --glow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 50px -26px rgba(196,120,10,.45),0 2px 10px rgba(150,95,10,.06);
  --marble-light:linear-gradient(160deg,rgba(255,253,247,.94),rgba(255,246,226,.96));
}
body{background:var(--ink);color:var(--cream)}
::selection{background:var(--gold);color:#2a1905}

/* Texto dorado legible sobre fondo claro */
h2 em,.gold-text,.brand-name em,.num,.c-wide h3 em,.stat b,.size-num{background:var(--foil-text);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b{filter:none}
.shine{background:linear-gradient(100deg,#8a5206 0%,#d08a0c calc(var(--shine) + 8%),#f6c041 calc(var(--shine) + 20%),#d08a0c calc(var(--shine) + 32%),#9a5d07 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker,.lux-note b,.aud-dark .link-arrow,.product-body .link-arrow,.contact-list a:hover,.foot-links a:hover,.foot-social a.mono:hover,.form-ok,.btn-line:hover{color:var(--gold-ink)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,.field label.up{color:var(--gold-ink)}
.stars{color:#e3a417;text-shadow:none}

/* Componentes */
.eyebrow{background:rgba(255,255,255,.75);border-color:var(--line-2);color:var(--cream-2);box-shadow:0 6px 20px -12px rgba(176,112,10,.4)}
.btn-line{background:rgba(255,255,255,.7);color:var(--cream);border-color:var(--line-2)}
.btn-gold{box-shadow:inset 0 1px 0 rgba(255,250,220,.8),inset 0 -2px 6px rgba(120,70,0,.3),0 14px 30px -12px rgba(200,120,10,.6)}
.ph{background:linear-gradient(rgba(255,248,232,.55),rgba(255,240,205,.7)),url(assets/img/marmol.webp?v=20261001a) 40% 30%/1100px auto,#fff3d6}
.ph-label,.ap figcaption{background:rgba(255,252,244,.88);color:var(--gold-deep);border-color:var(--line-2)}
.hexf::before{background:linear-gradient(160deg,#f6c64a,#c9850e)}

/* Navegación */
.nav{background:rgba(255,251,242,.96);border-bottom:1px solid var(--line)}
.nav.is-scrolled{background:rgba(255,251,242,.86);border-color:var(--line)}
.nav-links{color:var(--cream-2)}
.nav-links a:hover{color:var(--gold-ink)}
.brand-badge{background:#fffdf6}
.nav-toggle span{background:var(--cream)}
.mobile-menu,.nav.menu-open{background:rgba(255,251,242,.98)}

/* Hero: fondo crema luminoso; la escena del frasco va enmarcada como vitrina */
.hero{background:
  radial-gradient(55% 60% at 80% 45%,rgba(255,196,60,.32),transparent 70%),
  radial-gradient(45% 45% at 5% 95%,rgba(255,214,107,.28),transparent 70%),
  linear-gradient(180deg,#fffaf0,#fff1cf)}
.hero-comb{opacity:.16}
.hero-glow{background:radial-gradient(circle,rgba(255,190,60,.22),transparent 65%);mix-blend-mode:multiply}
.drips{filter:drop-shadow(0 6px 8px rgba(160,95,5,.25))}
.hero-title{text-shadow:none;color:#24160a}
.hero-sub{color:var(--cream-2)}
.trust{color:var(--muted)}
.stage-crop{border-radius:28px;margin:0;-webkit-mask-image:none;mask-image:none;
  box-shadow:0 0 0 2px #e3a417,0 0 0 7px rgba(255,214,107,.35),0 40px 80px -30px rgba(150,85,5,.55)}

/* Cintas */
.m-black{background:linear-gradient(rgba(255,250,236,.92),rgba(255,244,214,.92)),url(assets/img/marmol.webp?v=20261001a) 0 40%/800px auto;color:var(--gold-deep);border-color:var(--line-2)}

/* Secciones */
.manifesto-text .mw{color:rgba(42,25,5,.14)}
.manifesto-text .mw.on{color:var(--cream)}
.manifesto-text .mw.hl.on{color:var(--gold-ink);text-shadow:none}
.no-js-words .manifesto-text .mw{color:var(--cream)}
.stat{background:var(--marble-light),url(assets/img/marmol.webp?v=20261001a) var(--mp,20% 30%)/700px auto}
.stat span{color:var(--muted)}
.apiary{background:radial-gradient(60% 50% at 20% 30%,rgba(255,196,60,.22),transparent 70%),var(--ink-2)}
.ap-frame .ph::after{background:linear-gradient(180deg,transparent 60%,rgba(60,30,0,.35)),linear-gradient(120deg,rgba(255,190,60,.12),transparent 50%)}
.lux-note{background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) 30% 60%/900px auto padding-box,var(--gold-edge) border-box}
.benefits{background:radial-gradient(50% 40% at 85% 10%,rgba(255,196,60,.25),transparent 70%),var(--ink)}
.card:not(.foil):not(.c-comb){background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,30% 40%)/900px auto padding-box,var(--gold-edge) border-box;box-shadow:var(--glow)}
.card p{color:var(--muted)}
.audience{background:var(--ink-2)}
.aud-dark{background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) 60% 30%/900px auto padding-box,var(--gold-edge) border-box}
.sizes{background:radial-gradient(50% 60% at 15% 50%,rgba(255,196,60,.25),transparent 70%),var(--ink)}
.sizes-copy > p,.sec-sub,.apiary-lead,.lux-note p,.contact-copy > p{color:var(--cream-2)}
.size:not(.foil){background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) 20% 60%/700px auto padding-box,var(--gold-edge) border-box}
.size p{color:var(--muted)}
.product:not(.product-pro){background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,30% 50%)/900px auto padding-box,var(--gold-edge) border-box}
.product-pro{background:linear-gradient(170deg,rgba(255,250,236,.95),rgba(255,238,196,.96)) padding-box,url(assets/img/marmol.webp?v=20261001a) 20% 80%/900px auto padding-box,var(--foil) border-box}
.product-img::after{background:linear-gradient(transparent,rgba(255,248,232,.0))}
.product-body .tag{background:rgba(255,248,232,.9);color:var(--gold-deep)}
.product-body p{color:var(--muted)}
.testimonials{background:var(--ink-2)}
.quote:not(.foil):not(.q-comb){background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,40% 40%)/800px auto padding-box,var(--gold-edge) border-box}
.quote figcaption small{color:var(--muted)}
.slider-bar{background:var(--line)}
.social-band{background:var(--ink-2)}
.contact{background:radial-gradient(70% 60% at 100% 0%,rgba(255,196,60,.28),transparent 70%),linear-gradient(180deg,#fffaf0,#fff1cf)}
.form{background:var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) 70% 40%/900px auto padding-box,var(--gold-edge) border-box;box-shadow:0 40px 90px -40px rgba(176,112,10,.5)}
.field input,.field textarea,.field select{background:#fff;color:var(--cream);border-color:var(--line-2)}
.field select option{background:#fff;color:var(--cream)}
.contact-list .mono,.chips legend,.field label,.quick-btn small{color:var(--muted)}
.chips span{background:#fff;border-color:var(--line-2)}
.quick-btn{background:#fff;border-color:var(--line-2)}
.foot-social a svg{fill:var(--gold-deep);border-color:var(--line-2);background:#fff}
.footer{background:linear-gradient(180deg,#fff3d6,#fde9bb);border-top:1px solid var(--line-2)}
.foot-links{color:var(--cream-2)}
.foot-bottom{color:var(--muted)}
.foot-logo{background:#fffdf6}
.wordmark{-webkit-text-stroke:1.2px rgba(176,112,10,.55);filter:none}

@media (min-width:960px){
  .hero-copy::before{background:radial-gradient(closest-side,rgba(255,250,236,.75),rgba(255,250,236,.3) 60%,transparent)}
  .hero-visual{top:calc(var(--navh,72px) + 70px);bottom:auto;right:calc(max(0px,(100vw - var(--max)) / 2) + var(--gutter));width:min(40vw,560px);aspect-ratio:1/1.02;
    -webkit-mask-image:none;mask-image:none}
  .stage-crop{position:absolute;inset:0}
  .stage{width:132%;height:auto;left:-19.3%;top:-8.5%}
}
/* ajustes finos del tema claro */
.card:not(.foil):not(.c-comb){background:
  radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,190,70,.22),transparent 60%) padding-box,
  var(--marble-light) padding-box,url(assets/img/marmol.webp?v=20261001a) var(--mp,30% 40%)/900px auto padding-box,var(--gold-edge) border-box}
.card:hover,.product:hover,.quick-btn:hover{box-shadow:0 0 0 1px rgba(227,164,23,.35),0 30px 70px -30px rgba(196,120,10,.55)}
.c-wide .ph-card::after{background:linear-gradient(90deg,rgba(255,251,240,1) 0%,rgba(255,251,240,.6) 16%,rgba(255,251,240,.12) 34%,transparent 50%)}
.card.c-comb{background:linear-gradient(180deg,rgba(255,250,236,.45),rgba(255,248,230,.96) 60%) padding-box,url(assets/img/panal-1.webp?v=20261001a) center/cover padding-box,var(--gold-edge) border-box}
.quote.q-comb{background:linear-gradient(180deg,rgba(255,250,236,.45),rgba(255,248,230,.96) 66%) padding-box,url(assets/img/panal-2.webp?v=20261001a) center/cover padding-box,var(--gold-edge) border-box}
.icon{filter:drop-shadow(0 4px 10px rgba(200,120,10,.25))}
.icon polygon{fill:rgba(243,178,27,.14);stroke:#d4940f}
.icon path{stroke:var(--gold-deep)}
.quick-btn{background:#fffdf7 padding-box,var(--gold-edge) border-box}
.round{border-color:var(--line-2);background:#fff}
@media (max-width:959px){ .c-wide .ph-card::after{background:linear-gradient(180deg,transparent 60%,rgba(255,251,240,.6))} }
:root{--marble-light:linear-gradient(160deg,rgba(255,252,244,.965),rgba(255,245,222,.975))}
.foil p,.foil .note{color:rgba(27,17,3,.82)}
.c-wide .ph-card::after{background:linear-gradient(90deg,rgba(255,250,238,1) 0%,rgba(255,250,238,.55) 14%,rgba(255,250,238,.1) 30%,transparent 45%)}
@media (min-width:960px){ .stage{top:-3%} }
.foil figcaption small,.q-gold figcaption small{color:rgba(27,17,3,.72)}
.product-img::after{background:linear-gradient(transparent 55%,rgba(255,250,238,.9))}
.hexf.hollow::after{background:radial-gradient(circle at 50% 45%,#fff6dc,#f6d58a 70%,#e3a417)}
@media (max-width:959px){ .contact-deco{opacity:.28;width:220px;height:220px;right:-90px;top:10px} }

/* =============================================================
   12. Frasco del hero — 3 etapas: llenado · tapa · trapo
   ============================================================= */
.stage-crop{aspect-ratio:1136/1455;background:#1a0f05}
.jar2{position:absolute;inset:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
.jar2:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.jar2 .j{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.jar2 .j-base{inset:0;width:100%;height:100%}
.jar2 .j-stream{opacity:0}
.j-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jar2 .j-lid{transform-origin:50% 60%;will-change:transform}
.jar2 .j-cloth{transform-origin:35.9% 34.2%;will-change:transform;filter:drop-shadow(0 14px 18px rgba(30,12,0,.35))}
.j-glint{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,236,190,.0) 42%,rgba(255,236,190,.38) 48%,rgba(255,236,190,0) 54%,transparent 58%) no-repeat;background-size:260% 100%;background-position:120% 0}

/* Estado inicial (solo con JS): frasco vacío, sin tapa ni trapo */
.js .jar2.armed .j-honey{opacity:0}
.js .jar2.armed .j-lid{opacity:0;transform:translateY(-150%) rotate(-7deg)}
.js .jar2.armed .j-lidlight{opacity:0}
.js .jar2.armed .j-cloth{opacity:0;transform:translateY(-75%) scale(1.18,1.1) rotate(-6deg)}

/* Etapa 2: baja la tapa y asienta con un pequeño rebote */
.js .jar2.lid-in .j-lid{opacity:1;transform:none;transition:transform .95s cubic-bezier(.2,1.25,.35,1),opacity .25s ease-out}
.js .jar2.lid-in .j-lidlight{opacity:1;transition:opacity .6s ease .7s}
/* giro de cierre */
.js .jar2.lid-twist .j-lid{animation:lid-twist .55s cubic-bezier(.4,0,.2,1) both}
@keyframes lid-twist{0%{transform:none}35%{transform:rotate(-1.6deg) translateY(.6%)}70%{transform:rotate(.7deg)}100%{transform:none}}

/* Etapa 3: cae el trapo, se acomoda y se aprieta al amarrarse */
.js .jar2.cloth-in .j-cloth{animation:cloth-drop 1.7s cubic-bezier(.3,.05,.3,1) both}
@keyframes cloth-drop{
  0%  {opacity:0;transform:translateY(-75%) scale(1.18,1.1) rotate(-6deg)}
  14% {opacity:1}
  52% {transform:translateY(2%) scale(1.1,.97) rotate(.8deg)}
  66% {transform:translateY(-.6%) scale(1.09,1.01) rotate(-.2deg)}
  78% {transform:translateY(0) scale(1.08,1) rotate(0)}
  100%{opacity:1;transform:none}
}
.jar2.shine .j-glint{animation:jar-glint 1.6s cubic-bezier(.4,0,.2,1) both}
@keyframes jar-glint{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}

/* Encaje del hero */
@media (min-width:960px){
  .hero-visual{aspect-ratio:1136/1455;width:min(36vw,500px,calc((100svh - var(--navh,72px) - 130px) * .781));top:calc(var(--navh,72px) + 56px)}
}
@media (max-width:959px){
  .hero-visual .stage-crop{width:min(100%,420px);margin:0 auto}
}