:root{--surface-raised:#181a14;--ink-on-accent:#11140c;--showcase-shadow:0 32px 90px #0009;--highlight-line:#ffe14d55}
section{scroll-margin-top:100px}
.hero{padding-bottom:100px}
.product-section{margin-top:-42px;z-index:2;background:var(--navy);border-top:1px solid var(--highlight-line);border-radius:40px 40px 0 0;padding:90px 0 110px}
.product-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:54px}
.product-heading h2{max-width:650px;margin:0}
.product-heading p{max-width:300px;color:var(--m)}
.product-composition{position:relative;max-width:1000px;margin:auto;padding:0 240px 65px 0}
.product-image{display:block;width:100%;height:auto;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--bg);box-shadow:var(--showcase-shadow)}
.product-secondary{position:absolute;width:39%;right:0;bottom:0;transform:rotate(3deg);animation:product-drift 8s ease-in-out infinite}
.floating-note{position:absolute;right:6%;top:10%;display:flex;align-items:center;gap:12px;border:1px solid var(--highlight-line);border-radius:8px;background:var(--panel);padding:16px 20px;box-shadow:var(--showcase-shadow);backdrop-filter:blur(12px);animation:float 7s ease-in-out infinite}
.floating-note img{width:30px;height:30px;object-fit:contain}
.floating-note strong{display:block;font-family:Aeonik;font-size:1rem;color:var(--y)}
.floating-note small{color:var(--m);font-size:.78rem}
.product-caption{color:var(--m);font-size:.78rem;margin:30px 0 0;text-align:center}
.market-ribbon{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--bg)}
.market-track{display:flex;gap:56px;width:max-content;animation:market-scroll 36s linear infinite}
.market-track span{white-space:nowrap;font-family:Aeonik;font-size:1.05rem;color:var(--m)}
.market-track i{font-style:normal;color:var(--y);margin-right:14px}
#problema{background:var(--bg);z-index:3}
#problema .chat:first-child{transform:rotate(-3deg);margin-right:22px}
#problema .chat:last-child{transform:rotate(2deg);margin-left:22px;margin-top:-30px;box-shadow:var(--showcase-shadow)}
#como-funciona{background:var(--navy);border-top:1px solid var(--line);border-radius:40px 40px 0 0;z-index:4;margin-top:-28px}
.steps-stack{margin-top:60px;display:grid;gap:28px}
.step-scene{position:sticky;top:100px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;min-height:440px;padding:54px 48px;background:var(--surface-raised);border-top:1px solid var(--highlight-line);box-shadow:var(--showcase-shadow);border-radius:8px}
.step-scene:nth-child(2){top:118px;background:var(--node-dark)}
.step-scene:nth-child(3){top:136px;background:var(--bg)}
.scene-number{display:block;font-family:Aeonik;font-size:4rem;line-height:1;color:var(--y);margin-bottom:28px}
.step-scene h3{font-size:2rem;margin-bottom:18px}
.step-scene p{color:var(--m);max-width:420px}
.scene-network{position:relative;min-height:240px;display:grid;place-items:center}
.scene-network:before{content:"";position:absolute;width:230px;height:230px;border:1px solid var(--highlight-line);border-radius:50%}
.network-master{width:70px;height:70px;object-fit:contain}
.network-coin{position:absolute;width:74px;height:74px;object-fit:contain;animation:float 6s ease-in-out infinite}
.network-coin:nth-child(2){top:0;left:20%;animation-delay:-2s}
.network-coin:nth-child(3){bottom:0;left:18%;animation-delay:-4s}
.network-coin:nth-child(4){right:10%;top:40%;animation-delay:-1s}
.replication-visual{width:100%;max-width:400px;justify-self:center}
#beneficios{position:relative;z-index:5;background:var(--bg);border-top:1px solid var(--line);border-radius:40px 40px 0 0;margin-top:-10px}
#beneficios .card{border-radius:8px}
#beneficios .card:nth-child(2){margin-top:25px}
#beneficios .card:nth-child(4){margin-top:25px}
.feature-symbol{font-size:2rem;color:var(--y);display:block;margin-bottom:28px;line-height:1}
#comparativa{background:var(--navy)}
#compatibilidad{overflow:hidden}
.compat-coin{position:absolute;width:95px;height:95px;object-fit:contain;right:5%;top:15%;animation:float 8s ease-in-out infinite;opacity:.65}
.final{border-radius:8px}
@keyframes product-drift{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes market-scroll{to{transform:translateX(-50%)}}
@media(max-width:859px){
 .product-section{padding:65px 0 75px;border-radius:24px 24px 0 0}
 .product-heading{display:block;margin-bottom:36px}.product-heading p{margin-top:20px;max-width:none}
 .product-composition{padding:0 0 0;max-width:650px}
 .product-secondary{position:relative;width:72%;margin:-30px 0 0 auto;transform:rotate(2deg)}
 .floating-note{right:-2px;top:-12px;padding:10px 14px}.floating-note small{display:none}.floating-note strong{font-size:.85rem}
 .step-scene{position:relative;top:auto!important;grid-template-columns:1fr;gap:32px;padding:32px 24px;min-height:0}
 .scene-number{font-size:3rem;margin-bottom:20px}.step-scene h3{font-size:1.65rem}
 #beneficios .card:nth-child(n){margin-top:0}
 .compat-coin{width:55px;height:55px;right:0;top:0}
 .market-track{gap:32px}.market-track span{font-size:.9rem}
 #como-funciona,#beneficios{border-radius:24px 24px 0 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product-secondary,.market-track,.floating-note,.network-coin,.compat-coin{animation:none}.step-scene{position:relative;top:auto!important}}