/* Portada · "tu web armándose" (animación por código, loop 13 s) */
.hb{position:relative;width:100%;max-width:720px;margin:0 auto;--g:#D4AF5F;--g2:#F5E1A5;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.hb-glow{position:absolute;inset:-12% -10%;background:radial-gradient(closest-side,rgba(212,175,95,.22),transparent 70%);filter:blur(10px);opacity:.55;transition:opacity 1.2s;pointer-events:none}
.hb.done .hb-glow{opacity:1}
.hb-win{position:relative;border-radius:16px;overflow:hidden;background:#0E1020;box-shadow:0 0 0 1px rgba(212,175,95,.32),0 40px 90px -30px rgba(212,175,95,.35),0 30px 60px -20px rgba(0,0,0,.85);transition:box-shadow 1s}
.hb.done .hb-win{box-shadow:0 0 0 1.5px rgba(245,225,165,.75),0 40px 110px -24px rgba(212,175,95,.6),0 30px 60px -20px rgba(0,0,0,.85)}
.hb-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#15182C;border-bottom:1px solid rgba(238,240,255,.06)}
.hb-bar i{width:9px;height:9px;border-radius:50%;background:#2A2F4D}
.hb-bar i:nth-child(1){background:#5b3a3a}.hb-bar i:nth-child(2){background:#5a4e30}.hb-bar i:nth-child(3){background:#2f4d3a}
.hb-url{margin-left:10px;flex:1;max-width:240px;height:18px;border-radius:9px;background:#0B0D19;color:#9CA1C4;font-size:10px;display:flex;align-items:center;gap:5px;padding:0 9px;letter-spacing:.02em}
.hb-url svg{width:9px;height:9px;stroke:var(--g);fill:none;stroke-width:2.4}
.hb-view{position:relative;aspect-ratio:640/440;overflow:hidden;background:#0B0D19}
/* esqueleto: grilla tenue mientras está vacía */
.hb-view::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(212,175,95,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,95,.07) 1px,transparent 1px);background-size:32px 32px;transition:opacity .8s}
.hb.built .hb-view::before{opacity:0}
.hb-page{position:absolute;left:0;top:0;width:640px;height:440px;transform-origin:0 0;background:#F7F2EA;color:#1B1712;clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.hb.s1 .hb-page{clip-path:inset(0 0 0 0)}
.hb-page>*{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hb.s1 .hb-nav,.hb.s2 .hb-hero,.hb.s3 .hb-grid,.hb.s5 .hb-cta{opacity:1;transform:none}
.hb-nav{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 28px;border-bottom:1px solid #E7DFD2}
.hb-logo{font-family:'Instrument Serif',serif;font-style:italic;font-size:26px;letter-spacing:.02em}
.hb-links{display:flex;gap:22px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B6257}
.hb-cart{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid #1B1712;border-radius:99px;padding:6px 12px}
.hb-hero{padding:22px 28px 14px;display:flex;align-items:flex-end;justify-content:space-between}
.hb-hero small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.22em;color:#A8833C;margin-bottom:6px}
.hb-hero h4{margin:0;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:40px;line-height:1;letter-spacing:-.01em}
.hb-hero h4 em{color:#A8833C}
.hb-hero p{margin:0;max-width:170px;font-size:10.5px;line-height:1.5;color:#6B6257;text-align:right}
.hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px}
.hb-grid figure{margin:0;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1)}
.hb.s3 .hb-grid figure{opacity:1;transform:none}
.hb.s3 .hb-grid figure:nth-child(2){transition-delay:.15s}.hb.s3 .hb-grid figure:nth-child(3){transition-delay:.3s}
.hb-grid .ph{position:relative;height:150px;border-radius:10px;overflow:hidden;background:#E9E1D4}
.hb-grid img{width:100%;height:100%;object-fit:cover;display:block}
.hb-grid figcaption{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;font-size:11px;color:#3A332B}
.hb-grid figcaption b{font-size:11.5px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s}
.hb.s4 .hb-grid figcaption b{opacity:1;transform:none}
.hb.s4 .hb-grid figure:nth-child(2) b{transition-delay:.12s}.hb.s4 .hb-grid figure:nth-child(3) b{transition-delay:.24s}
.hb-tag{position:absolute;top:8px;left:8px;font-size:8.5px;font-weight:800;letter-spacing:.12em;background:#1B1712;color:#F5E1A5;padding:4px 7px;border-radius:5px;opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.hb.s4 .hb-tag{opacity:1;transform:none;transition-delay:.35s}
.hb-cta{display:flex;align-items:center;gap:16px;padding:18px 28px 0}
.hb-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 24px;border-radius:99px;background:linear-gradient(135deg,#F5E1A5,#D4AF5F 55%,#A8833C);color:#1B1712;font-weight:800;font-size:13px;box-shadow:0 12px 26px -10px rgba(168,131,60,.8);transition:transform .15s}
.hb-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)}
.hb.s5 .hb-btn::after{animation:hbShine 1.4s .3s ease}
.hb.press .hb-btn{transform:scale(.94)}
.hb-pay{font-size:10.5px;color:#6B6257}
.hb-pay b{color:#1B1712}
/* barrido de luz dorada que acompaña el armado */
.hb-scan{position:absolute;left:0;right:0;top:30px;height:2px;background:linear-gradient(90deg,transparent,var(--g2),transparent);box-shadow:0 0 18px 4px rgba(212,175,95,.55);opacity:0;pointer-events:none}
.hb.s1 .hb-scan{animation:hbScan 4.6s cubic-bezier(.6,0,.3,1) forwards}
/* cursor */
.hb-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;opacity:0;transform:translate(var(--cx,110%),var(--cy,110%));transition:transform .8s cubic-bezier(.6,0,.25,1),opacity .3s;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.hb.cur .hb-cursor{opacity:1}
.hb-cursor svg{width:22px;height:22px}
.hb-ring{position:absolute;z-index:4;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--g2);opacity:0;pointer-events:none}
.hb.press .hb-ring{animation:hbRing .7s ease-out}
/* chispas */
.hb-sp{position:absolute;z-index:4;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--g2);box-shadow:0 0 8px 2px rgba(212,175,95,.8);pointer-events:none;animation:hbSpark .9s ease-out forwards}
/* ganchos */
.hb-hook{position:absolute;inset:30px 0 0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:0 0 16px 16px;background:radial-gradient(ellipse at center,rgba(5,6,12,.86),rgba(5,6,12,.62));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .6s;pointer-events:none}
.hb-hook span{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;color:#EEF0FF;font-size:clamp(1.25rem,4.6vw,2.15rem);letter-spacing:-.03em;line-height:1.05;transform:translateY(10px);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hb-hook em{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.7rem,6.4vw,3rem);line-height:1.05;background:linear-gradient(100deg,#A8833C,#F5E1A5 45%,#D4AF5F 60%,#A8833C);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(14px);transition:transform .9s .08s cubic-bezier(.2,.8,.2,1)}
.hb-hook.on{opacity:1}
.hb-hook.on span,.hb-hook.on em{transform:none}
.hb-hook.on em{animation:hbGold 2.2s .3s ease forwards}
/* notificación de venta */
.hb-toast{position:absolute;z-index:7;right:-14px;top:44px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(15,18,34,.94);border:1px solid rgba(212,175,95,.35);box-shadow:0 18px 40px -14px rgba(0,0,0,.9);color:#EEF0FF;font-size:12px;opacity:0;transform:translateY(12px) scale(.92);transition:opacity .45s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.hb-toast i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#F5E1A5,#D4AF5F);color:#1B1712;font-style:normal;font-weight:800}
.hb-toast b{display:block;font-size:12.5px}
.hb-toast small{color:#9CA1C4;font-size:11px}
.hb.sold .hb-toast{opacity:1;transform:none}
.hb-win{transition:box-shadow 1s,opacity .5s}
@keyframes hbScan{0%{opacity:0;top:30px}8%{opacity:1}92%{opacity:1}100%{opacity:0;top:100%}}
@keyframes hbShine{to{transform:translateX(120%)}}
@keyframes hbRing{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(3.4)}}
@keyframes hbSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes hbGold{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:860px){.hb-toast{right:6px;top:38px;font-size:11px;padding:8px 12px 8px 8px}.hb-toast i{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.hb *{transition:none!important;animation:none!important}}
/* encaje en la portada */
.stage.hb-stage{height:auto;align-self:center}
@media(min-width:861px){.home .hero .wrap{grid-template-columns:1fr 1.22fr;gap:48px;align-items:center}.stage.hb-stage{width:100%}}
.hb-hook.b{justify-content:flex-end;padding-bottom:9%;background:linear-gradient(to top,rgba(5,6,12,.94) 0,rgba(5,6,12,.55) 55%,rgba(5,6,12,.1) 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:860px){.stage.hb-stage{order:-1;height:auto;margin:0 -4px}.home .hero{padding-top:16px}.home .hero .wrap{gap:18px}.home .hero p.lead{margin:14px 0 20px}}
/* slogan junto al logo */
.home .nav .logo .slogan{display:flex;flex-direction:column;margin-left:16px;padding-left:16px;border-left:1px solid rgba(212,175,95,.35);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.1rem;line-height:1.05;letter-spacing:-.02em;color:#EEF0FF;white-space:nowrap}
.home .nav .logo .slogan em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:1.48rem;letter-spacing:0;background:linear-gradient(100deg,#F5E1A5,#D4AF5F 55%,#A8833C);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:860px){.home .nav .logo .slogan{margin-left:12px;padding-left:12px;font-size:.8rem}.home .nav .logo .slogan em{font-size:1.06rem}}
@media(max-width:360px){.home .nav .logo .slogan{font-size:.72rem}.home .nav .logo .slogan em{font-size:.95rem}}
/* celular: la barra fija aparece recién cuando los botones del hero salen de pantalla */
@media(max-width:860px){.home .mbar{transform:translateY(110%);transition:transform .35s ease}.home .mbar.show{transform:none}}
/* muestra dentro de la animación: Bruma (estética con turnos) */
.hb-page{background:#F7F5F2;color:#0F2A59}
.hb-nav{border-bottom-color:#E3E6EC}
.hb-logo{font-style:normal;font-size:24px;line-height:.9;display:flex;flex-direction:column}
.hb-logo small{font-family:'Plus Jakarta Sans',sans-serif;font-size:6.5px;letter-spacing:.2em;color:#4E5F7E;margin-top:3px}
.hb-links{color:#4E5F7E}
.hb-cart{border:0;background:#B6EBF9;color:#0F2A59}
.hb-hero small{color:#005453}
.hb-hero h4 em{color:#005453}
.hb-hero p{color:#4E5F7E}
.hb-grid .ph{background:#E6EEF0}
.hb-grid figcaption{flex-direction:column;align-items:flex-start;gap:2px;color:#0F2A59;font-weight:600}
.hb-grid figcaption b{font-weight:500;font-size:10.5px;color:#005453}
.hb-tag{background:#FCEAA8;color:#0F2A59}
.hb-btn{background:#005453;color:#fff;box-shadow:0 12px 26px -10px rgba(0,84,83,.7)}
.hb-pay{color:#4E5F7E}.hb-pay b{color:#005453}
.hb-toast i svg{width:16px;height:16px;fill:none;stroke:#1B1712;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}