:root{
  --bg:#12100e;
  --bg2:#1b1713;
  --ash:#e4dacb;
  --dim:rgba(228,218,203,.58);
  --line:rgba(228,218,203,.16);
  --ember:#ff5a1f;
  --glow:#ffb066;
  --sage:#8d9b80;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ash);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--ember);color:#fff}
em{font-style:italic;color:var(--glow)}

/* Barra */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 4vw;transition:background .4s,padding .3s}
.bar.solid{background:rgba(18,16,14,.88);backdrop-filter:blur(10px);padding:14px 4vw;border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:.04em}
.bar nav{display:flex;gap:36px;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.bar nav a{opacity:.7;transition:.2s}
.bar nav a:hover{opacity:1;color:var(--glow)}
.bag{background:none;border:1px solid var(--line);border-radius:40px;padding:8px 20px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.bag:hover{border-color:var(--ember);color:var(--glow)}
.bag span{display:inline-block;margin-left:8px;color:var(--ember)}
.bag.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.1);border-color:var(--ember)}}

/* Hero */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 85%,#2b1a10 0%,var(--bg) 60%)}
#smoke{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.hero-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:300;font-size:clamp(140px,30vw,520px);line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(228,218,203,.14);white-space:nowrap;z-index:1;pointer-events:none}
.hero-stick{position:absolute;left:72%;bottom:0;width:6px;height:46vh;z-index:3}
.rod{position:absolute;left:0;right:0;bottom:0;top:18px;background:linear-gradient(90deg,#4a3320,#7b5632 50%,#3a2718);border-radius:0 0 3px 3px}
.ash{position:absolute;left:-1px;right:-1px;top:6px;height:16px;background:linear-gradient(#cfc7bb,#6a625a);border-radius:3px 3px 1px 1px}
.tip{position:absolute;left:-3px;right:-3px;top:-4px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--glow) 30%,var(--ember) 65%,transparent 100%);box-shadow:0 0 22px 8px rgba(255,90,31,.7),0 0 80px 30px rgba(255,90,31,.3);animation:flick 1.4s infinite alternate;transition:opacity .6s}
.out .tip{opacity:0;animation:none}
@keyframes flick{0%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}100%{opacity:.9;transform:scale(.95)}}
.hero-copy{position:absolute;left:4vw;bottom:14vh;z-index:4;max-width:min(640px,60vw)}
.kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--glow);margin-bottom:20px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6.5vw,104px);line-height:.98;letter-spacing:-.02em;margin-bottom:32px}
.hero-act{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hint{position:absolute;bottom:26px;right:4vw;z-index:4;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* Botón brasa */
.light{display:inline-flex;align-items:center;gap:14px;background:none;border:1px solid var(--ash);border-radius:60px;padding:14px 30px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;transition:.3s}
.light b{font-weight:400}
.light .dot{width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px 3px rgba(255,90,31,.8);transition:.3s}
.light:hover{background:var(--ash);color:var(--bg)}
.light.off .dot{background:#5c524a;box-shadow:none}
.light.solid{border-color:var(--ember);justify-content:center;width:100%}
.light.solid:hover{background:var(--ember);color:#fff}
.link{background:none;border:0;border-bottom:1px solid var(--dim);padding:2px 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:.2s}
.link:hover{color:var(--glow);border-color:var(--glow)}

/* Cinta */
.belt{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);padding:18px 0}
.belt-in{display:flex;gap:0;width:max-content;animation:belt 40s linear infinite;font-family:var(--serif);font-style:italic;font-size:32px;color:var(--dim)}
.belt-in span{padding:0 28px;position:relative}
.belt-in span::after{content:"·";position:absolute;right:-4px;color:var(--ember)}
@keyframes belt{to{transform:translateX(-50%)}}

/* Secciones */
.sec{padding:130px 4vw 0;max-width:1500px;margin:0 auto}
.sec.dark2{max-width:none;background:var(--bg2);margin-top:130px;padding:110px 4vw 120px;border-block:1px solid var(--line)}
.sec.dark2>*{max-width:1400px;margin-left:auto;margin-right:auto}
.sec-top{display:grid;grid-template-columns:90px 1fr;gap:20px;margin-bottom:50px}
.num{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--ember);line-height:1.3}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,84px);line-height:1;letter-spacing:-.02em}
.sub{margin-top:18px;max-width:52ch;color:var(--dim);font-size:18px}
.note{font-size:13px;color:var(--dim)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.chip{background:none;border:1px solid var(--line);border-radius:40px;padding:7px 20px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.chip:hover{border-color:var(--ash)}
.chip[aria-selected="true"]{background:var(--ash);color:var(--bg);border-color:var(--ash)}

/* Rail de varillas */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stick{position:relative;background:var(--bg);padding:26px 24px 24px;display:flex;flex-direction:column;min-height:560px;text-align:left;border:0;transition:background .4s,opacity .4s;overflow:hidden}
.stick:hover{background:var(--bg2)}
.stick.dim{opacity:.18;pointer-events:none}
.stick .no{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:18px}
.stick .art{flex:1;display:grid;place-items:center;margin:14px 0}
.stick svg{height:290px;width:auto;overflow:visible}
.stick .tit{font-family:var(--serif);font-size:30px;line-height:1;margin-bottom:6px}
.stick .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.stick .row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.stick .pr{font-family:var(--serif);font-size:24px}
.stick .plus{width:38px;height:38px;border-radius:50%;border:1px solid var(--ash);background:none;font-size:20px;line-height:1;transition:.2s}
.stick .plus:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:rotate(90deg)}
.stick .notes{position:absolute;inset:0;background:rgba(18,16,14,.95);padding:30px 24px;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;transform:translateY(14px);transition:.4s;pointer-events:none}
.stick:hover .notes,.stick:focus-within .notes,.stick.open .notes{opacity:1;transform:none}
.notes h4{font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;color:var(--glow)}
.notes p{font-size:15px;color:var(--ash)}
.notes ul{list-style:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:grid;gap:4px}
.notes ul li::before{content:"— ";color:var(--ember)}

/* Buscador */
.finder{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.moods{display:grid;gap:0;border-top:1px solid var(--line)}
.mood{display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 4px;font-family:var(--serif);font-size:40px;font-weight:300;text-align:left;transition:.3s}
.mood small{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.mood:hover{padding-left:20px;color:var(--glow)}
.mood[aria-checked="true"]{color:var(--glow);padding-left:20px}
.mood[aria-checked="true"] small{color:var(--ember)}
.result{position:sticky;top:100px;display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;border:1px solid var(--line);padding:40px;min-height:420px;background:var(--bg)}
.result svg{height:300px;width:auto;margin:auto;display:block;overflow:visible}
.result .r-t{font-family:var(--serif);font-size:56px;line-height:.95;margin:6px 0 14px}
.result .r-t em{display:block}
.result p{color:var(--dim);margin-bottom:18px}
.result .btns{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.result.swap{animation:swap .5s}
@keyframes swap{from{opacity:0;transform:translateY(16px)}}

/* Ritual */
.ritual{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.rit-stage{position:relative;height:560px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 100%,#2a1a10,var(--bg) 70%);overflow:hidden}
#smoke2{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.rit-stick{position:absolute;left:50%;bottom:34px;width:7px;margin-left:-3.5px;height:420px;z-index:3;transition:none}
.rit-base{position:absolute;left:50%;bottom:0;width:130px;height:36px;margin-left:-65px;background:linear-gradient(#5a4635,#2d231b);border-radius:60px 60px 0 0;z-index:4}
.rit-stick .rod{top:0}
.rit-stick .ash{top:-16px;height:0;transition:height .3s}
.rit-stick .tip{top:-26px;opacity:0}
.rit-stick.on .tip{opacity:1}
.clock{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.clock b{font-family:var(--serif);font-weight:300;font-size:clamp(100px,13vw,190px);line-height:.85;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.clock span{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--glow)}
.rit-state{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:30px}
.steps{display:grid;gap:0;margin-bottom:34px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--dim);transition:.5s}
.step b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px}
.step.now{color:var(--ash)}
.step.now b{color:var(--ember)}
.rit-btns{display:flex;gap:30px;align-items:center}

/* Trío */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trio article{background:var(--bg);padding:44px 34px 50px}
.trio b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;color:var(--ember)}
.trio h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;margin:20px 0 14px}
.trio p{color:var(--dim)}

/* Contacto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.info{list-style:none;display:grid;gap:26px;font-family:var(--serif);font-size:32px;line-height:1.1}
.info small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);margin-bottom:6px}
#form{display:grid;gap:26px}
label{display:grid;gap:6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
#form input,#form textarea{background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;font-size:18px;letter-spacing:0;text-transform:none;color:var(--ash);outline:none;resize:none;transition:border .2s}
#form input:focus,#form textarea:focus{border-color:var(--ember)}
#form .error{border-color:#e0473b!important}
.msg{min-height:22px;font-size:14px;color:var(--glow)}
.msg.err{color:#e0473b}

footer{margin-top:140px;padding:60px 4vw 30px;border-top:1px solid var(--line);overflow:hidden}
footer .big{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(100px,26vw,440px);line-height:.8;letter-spacing:-.04em;text-align:center;background:linear-gradient(180deg,var(--ash),transparent 85%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:30px}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--dim)}

/* Diálogo */
dialog{margin:auto;width:min(500px,94vw);max-height:92vh;background:var(--bg2);color:var(--ash);border:1px solid var(--line);padding:0}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
dialog[open]{animation:dg .35s}
@keyframes dg{from{opacity:0;transform:translateY(20px)}}
.dlg{position:relative;padding:34px;display:grid;gap:14px}
.x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;transition:.2s}
.x:hover{border-color:var(--ember);color:var(--glow)}
.d-item{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.d-item h4{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1}
.d-item small{color:var(--dim);font-size:13px;grid-column:1}
.d-item .pr{font-family:var(--serif);font-size:22px;grid-row:1;grid-column:2;text-align:right}
.qty{display:inline-flex;align-items:center;gap:12px;margin-top:6px}
.qty button{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:none;line-height:1}
.qty button:hover{border-color:var(--ember)}
.d-empty{padding:30px 0;text-align:center;color:var(--dim)}
.d-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:6px}
.d-tot span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.d-tot b{font-family:var(--serif);font-weight:400;font-size:44px}
a.light.disabled{opacity:.3;pointer-events:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--ash);color:var(--bg);padding:11px 26px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;z-index:90;transition:transform .4s;white-space:nowrap}
.toast.show{transform:translate(-50%,0)}

.rv{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s}
.rv.in{opacity:1;transform:none}

@media(max-width:1100px){
  .bar nav{display:none}
  .rail{grid-template-columns:repeat(2,1fr)}
  .finder,.ritual,.contact{grid-template-columns:1fr;gap:44px}
  .result{position:static}
  .trio{grid-template-columns:1fr}
  .hero-stick{left:82%}
  .hero-copy{max-width:80vw}
}
@media(max-width:620px){
  .rail{grid-template-columns:1fr}
  .result{grid-template-columns:1fr;padding:26px}
  .sec-top{grid-template-columns:1fr;gap:4px}
  .mood{font-size:30px}
  .hint{display:none}
  .info{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .belt-in,.tip{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}