@font-face{font-family:ArchivoX;src:url(fonts/archivo-expanded-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--y:#F6C400;--ink:#151515;--ink-2:#2A2A28;--cream:#F4EFE6;--sand:#E9E1D2;--rust:#9A3412;--mute:#6E6A62;--r:28px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Archivo,system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.disp{font-family:ArchivoX,Archivo,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:.95;text-transform:uppercase}
.kick{font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:15px 26px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s,background .25s,color .25s}
.pill:hover{transform:translateY(-2px)}
.pill.y{background:var(--y);color:var(--ink)} .pill.line{border:1.5px solid currentColor} .pill.dark{background:var(--ink);color:#fff}
.demo{background:var(--ink);color:#cfc9bd;font-size:12px;text-align:center;padding:7px 12px} .demo b{color:var(--y)}
/* nav */
header{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
header.solid{background:rgba(244,239,230,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(21,21,21,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;color:#fff;transition:color .3s}
header.solid .nav{color:var(--ink)}
.nav .logo{height:26px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14px;font-weight:600}
.nav ul a{text-decoration:none;opacity:.85} .nav ul a:hover{opacity:1}
.nav .pill{padding:11px 20px;font-size:14px}
/* hero */
.hero{position:relative;min-height:min(100svh,900px);margin-top:-76px;color:#fff;display:flex;align-items:flex-end;overflow:hidden;background:#222 url(img/hero-poster.webp) center/cover}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.75) 100%)}
.hero .wrap{position:relative;z-index:2;padding:150px 0 64px}
.hero h1{font-size:clamp(46px,9.2vw,148px)}
.hero h1 span{color:var(--y)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:30px;flex-wrap:wrap}
.hero p{max-width:470px;font-size:18px;color:#ece8df}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:22px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);font-size:13px;color:#ddd8cc;flex-wrap:wrap}
.badges b{color:#fff}
/* marquee */
.marquee{background:var(--y);overflow:hidden;padding:18px 0;border-block:1.5px solid var(--ink)}
.track{display:flex;gap:48px;width:max-content;animation:mq 38s linear infinite}
.track span{font-family:ArchivoX;font-weight:800;font-size:20px;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:48px}
.track svg{height:16px;width:auto}
@keyframes mq{to{transform:translateX(-50%)}}
/* nivel (scroll story of the float) */
.nivel{background:var(--ink);color:#fff;height:330vh;position:relative}
.nivel-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr minmax(0,1.25fr) 1fr;align-items:center;gap:40px;overflow:hidden}
.nivel-o{width:100%;max-height:62svh;overflow:visible}
.nivel-o .lvl{stroke:#fff;stroke-width:.35;stroke-dasharray:1.6 1.4;opacity:0;transition:opacity .6s}
.nivel.done .nivel-o .lvl{opacity:.55}
.nivel.done .nivel-o{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.n-steps{list-style:none;display:grid;gap:26px}
.n-steps li{opacity:.28;transition:opacity .45s;max-width:330px}
.n-steps li.on{opacity:1}
.n-steps b{display:block;font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.6vw,24px);line-height:1.05;margin:8px 0 6px}
.n-steps p{color:#bdb7ab;font-size:15px}
.n-gauge{text-align:right}
.n-gauge .pct{font-family:ArchivoX;font-weight:800;font-size:clamp(56px,7vw,120px);line-height:.9;color:var(--y);font-variant-numeric:tabular-nums}
.n-gauge .cap{margin-top:12px;font-size:14px;color:#bdb7ab}
.n-final{position:absolute;left:0;right:0;bottom:7svh;text-align:center;font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.n-final span{color:var(--y)}
.nivel.done .n-final{opacity:1;transform:none}
/* statement */
.statement{padding:140px 0 120px}
.statement p.big{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(30px,5.2vw,74px);line-height:1.02;max-width:1150px}
.statement .w{opacity:.14;transition:opacity .35s} .statement .w.on{opacity:1}
.statement .two{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:70px;align-items:end}
.statement .two p{color:var(--mute);max-width:520px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:70px}
.stat{background:#fff;border-radius:var(--r);padding:26px}
.stat b{display:block;font-family:ArchivoX;font-weight:800;font-size:clamp(34px,4vw,54px);line-height:1}
.stat span{font-size:14px;color:var(--mute)}
.stat.y{background:var(--y)} .stat.k{background:var(--ink);color:#fff} .stat.k span{color:#bdb7ab}
/* products */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(38px,6vw,88px)}
.sec-head p{max-width:420px;color:var(--mute)}
.products{padding:40px 0 120px}
.prod-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.prod{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.prod:first-child{grid-row:span 3}
.prod-img{background:var(--sand);aspect-ratio:16/10;overflow:hidden}
.prod:first-child .prod-img{aspect-ratio:auto;flex:1;position:relative;min-height:340px} .prod:first-child .prod-img img{position:absolute;inset:0}
.prod-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-img img{transform:scale(1.1)}
.prod-grid .prod:not(:first-child){flex-direction:row}
.prod-grid .prod:not(:first-child) .prod-img{width:44%;aspect-ratio:auto}
.prod-body{padding:24px 26px;flex:1}
.idx{font-size:12px;font-weight:600;color:var(--rust);letter-spacing:.1em}
.prod h3{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:22px;margin:6px 0 8px;line-height:1.05}
.prod:first-child h3{font-size:clamp(28px,3vw,40px)}
.prod p{font-size:15px;color:var(--mute)}
.prod .sizes{margin-top:12px;color:var(--ink);font-weight:600;font-size:14px}
.parts-title{margin:70px 0 22px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.parts-title h3{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,36px)}
.parts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.part{background:#fff;border-radius:22px;overflow:hidden}
.part{overflow:hidden} .part img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;transform:scale(1.06)}
.part div{padding:16px 18px 20px}
.part h4{font-size:15px;font-weight:600} .part p{font-size:13px;color:var(--mute);margin-top:4px}
/* sticky story */
.story{background:var(--ink);color:#fff;padding:120px 0}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.story-visual{position:sticky;top:110px;height:calc(100svh - 160px);max-height:640px;border-radius:var(--r);overflow:hidden}
.story-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s,transform 1.2s}
.story-visual img.on{opacity:1;transform:scale(1.02)}
.story-steps .step{min-height:min(72vh,620px);display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s}
.story-steps .step.on{opacity:1}
.step .kick{color:var(--y)}
.step h3{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.6vw,52px);line-height:1;margin:16px 0}
.step p{color:#c9c3b6;max-width:470px}
.step-img{display:none} .step ul{list-style:none;margin-top:18px} .step li{padding:10px 0;border-top:1px solid #333;color:#e5e0d6;font-size:15px}
/* history */
.history{padding:130px 0}
.hist{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.hist-photo{border-radius:var(--r);overflow:hidden;position:relative}
.hist-photo img{filter:grayscale(1) contrast(1.05);width:100%;transform:scale(1.07)}
.hist-photo span{position:absolute;left:18px;bottom:18px;background:var(--y);padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600}
.hist h2{font-size:clamp(36px,5vw,70px)}
.hist p{color:var(--mute);margin-top:18px}
.tl{margin-top:34px}
.tl div{position:relative;padding:0 0 24px 34px} .tl div:last-child{padding-bottom:0} .tl div:before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--y);border:2px solid var(--ink);box-sizing:border-box;z-index:1} .tl div:not(:last-child):after{content:"";position:absolute;left:7px;top:10px;bottom:-12px;width:2px;background:var(--ink)}
.tl b{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:15px}
.tl p{margin-top:2px;font-size:15px}
.strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:70px}
.strip img{border-radius:22px;height:260px;width:100%;object-fit:cover}
/* distribuidores */
.dist{padding:0 0 130px}
.dist-card{background:var(--y);border-radius:36px;padding:clamp(30px,6vw,80px);display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;position:relative;overflow:hidden}
.dist-card>*{min-width:0} .dist-card h2{font-size:clamp(26px,2.9vw,44px)} .dist-card h2 span{white-space:nowrap}
.dist-card p{margin-top:18px;max-width:440px}
.dist-card .bgiso{position:absolute;right:-90px;top:-110px;width:420px;color:rgba(21,21,21,.07)}
form{display:grid;gap:12px;position:relative}
input{font:inherit;font-size:16px;padding:16px 20px;border-radius:16px;border:1.5px solid var(--ink);background:rgba(255,255,255,.55);color:var(--ink);width:100%}
input:focus{outline:none;background:#fff}
form button{font:inherit;font-weight:600;font-size:16px;cursor:pointer;border:0;border-radius:99px;padding:17px 26px;background:var(--ink);color:#fff}
form small{font-size:13px}
/* footer */
footer{background:var(--ink);color:#d6d0c4;padding:90px 0 30px;overflow:hidden}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;font-size:15px}
.f-grid h5{color:#fff;font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.f-grid a{text-decoration:none;display:block;padding:3px 0} .f-grid a:hover{color:var(--y)}
.f-big{margin-top:90px;color:var(--y)} .f-big svg{width:100%;height:auto}
.f-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:26px;font-size:12px;color:#8f897d;flex-wrap:wrap}
.wa{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wa svg{width:28px;height:28px;fill:#fff}
/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.cap .story-visual{display:none} .cap .story-grid{grid-template-columns:1fr} .cap .story-steps{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px} .cap .story-steps .step{min-height:auto;opacity:1;padding:0} .cap .step-img{display:block!important;border-radius:22px;margin-bottom:20px;aspect-ratio:16/10;object-fit:cover;width:100%} .cap .statement .w{opacity:1} .cap .nivel{height:auto} .cap .n-final{position:static;grid-column:1/-1;opacity:1;transform:none;margin-top:-10px} .cap .nivel-stick{position:relative;height:auto;min-height:760px;padding:90px 0} .cap .reveal{opacity:1;transform:none} .cap .demo,.cap .wa{display:none}
@media (max-width:980px){.cap .story-steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.track{animation:none}.statement .w{opacity:1}html{scroll-behavior:auto}}
@media (max-width:980px){
 .nivel-stick{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:18px;padding-top:70px}
 .nivel-o{max-height:34svh;order:1} .n-gauge{order:2;text-align:center} .n-steps{order:3} .n-steps li{display:none;max-width:none;text-align:center} .n-steps li.on{display:block}
 .n-gauge .pct{font-size:56px} .n-final{bottom:4svh;font-size:20px;padding:0 20px}
 .nav ul{display:none}
 .prod-grid,.story-grid,.hist,.dist-card,.statement .two{grid-template-columns:1fr}
 .prod:first-child{grid-row:auto} .prod:first-child .prod-img{aspect-ratio:16/10}
 .stats{grid-template-columns:1fr 1fr} .parts{grid-template-columns:1fr 1fr} .part:last-child{grid-column:span 2} .part:last-child img{aspect-ratio:16/7}
 .story-visual{display:none} .story-steps .step{min-height:auto;padding:34px 0;opacity:1} .step-img{display:block!important;border-radius:22px;margin-bottom:22px;aspect-ratio:16/10;object-fit:cover;width:100%}
 .f-grid{grid-template-columns:1fr 1fr} .strip{grid-template-columns:1fr} .strip img{height:200px}
}
@media (max-width:560px){
 body{font-size:16px} .dist-card{border-radius:28px} .dist-card h2{font-size:26px} .dist-card h2 span{white-space:normal} .hist h2,.sec-head h2{font-size:34px} .nav .logo{height:17px} .nav .pill{padding:10px 16px} .prod-grid .prod:not(:first-child){flex-direction:column} .prod-grid .prod:not(:first-child) .prod-img{width:100%;aspect-ratio:16/10}
 .hero .wrap{padding:120px 0 40px} .nav .pill span{display:none} .statement{padding:90px 0 70px}
}

/* ---------- multipage + logo animations ---------- */
.logo-anim .w-fill{transform:translateY(var(--drop));animation:wfill 1.8s cubic-bezier(.3,.7,.2,1) .35s forwards}
.logo-anim .w-wave{animation:wslide 2.6s linear infinite}
@keyframes wfill{to{transform:translateY(0)}}
@keyframes wslide{to{transform:translateX(-16.0px)}}
header a:hover .logo-anim .w-wave{animation-duration:1.1s}
.f-water{width:100%;height:auto;display:block}
.f-water .fw1{animation:wslide2 5s linear infinite} .f-water .fw2{animation:wslide3 7s linear infinite}
@keyframes wslide2{to{transform:translateX(-32.0px)}} @keyframes wslide3{to{transform:translateX(-24.0px)}}
.f-big:hover .fw1,.f-big:hover .fw2{animation-duration:2.2s}
@media (prefers-reduced-motion:reduce){.logo-anim .w-fill{animation:none;transform:none} .logo-anim .w-wave,.f-water path{animation:none}}
.nav ul a.on{opacity:1;box-shadow:inset 0 -2px 0 currentColor;padding-bottom:4px}
body.inner header{background:rgba(244,239,230,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(21,21,21,.08)}
body.inner .nav{color:var(--ink)}
.ph{padding:70px 0 50px}
.ph .crumbs{font-size:13px;color:var(--mute);margin-bottom:22px} .ph .crumbs a{text-decoration:none}
.ph h1{font-size:min(clamp(44px,8vw,120px), calc((100vw - 40px) / (var(--n) * .98)))}
.ph p{max-width:560px;color:var(--mute);margin-top:20px;font-size:18px}
.ph-img{height:clamp(220px,32vw,440px);border-radius:var(--r);background-size:cover;background-position:center;margin-top:44px}
.next{padding:0 0 120px}
.next a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:30px;text-decoration:none;border-top:1.5px solid var(--ink);padding-top:30px}
.next span{font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.next b{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(24px,5vw,72px);line-height:1;transition:color .3s}
.next a:hover b{color:var(--rust)}
.despiece{margin-top:70px;background:#fff;border-radius:var(--r);padding:clamp(20px,4vw,50px);display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center}
.despiece h3{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,36px);line-height:1.05}
.despiece p{color:var(--mute);margin-top:14px}
.despiece ul{list-style:none;margin-top:18px} .despiece li{padding:9px 0;border-top:1px solid var(--sand);font-size:15px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:40px}
.ccard{background:#fff;border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:10px}
.ccard.y{background:var(--y)} .ccard.k{background:var(--ink);color:#fff}
.ccard h3{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:22px}
.ccard a{text-decoration:none;font-weight:600} .ccard p{color:inherit;opacity:.75;font-size:15px}
.cform-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;background:#fff;border-radius:var(--r);padding:clamp(24px,4vw,50px);margin-bottom:16px}
.cform{display:grid;gap:14px} .cform .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cform label{display:grid;gap:6px;font-size:14px;font-weight:600}
.cform input,.cform textarea{font:inherit;font-weight:400;border:1.5px solid var(--sand);background:var(--cream);border-radius:14px;padding:12px 14px;min-height:46px;width:100%}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ink);background:#fff} .cform button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.cf-msg{font-size:14px;font-weight:600}
@media (max-width:760px){.cform-wrap,.cform .r2{grid-template-columns:1fr}}
.map{border-radius:var(--r);overflow:hidden;background:var(--sand);height:420px;margin-bottom:120px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.3)}
.home-cta{padding:0 0 120px}
.home-cta .wrap>div{background:var(--ink);color:#fff;border-radius:36px;padding:clamp(30px,5vw,70px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.home-cta h2{font-size:clamp(30px,4vw,56px)}
@media (max-width:980px){.despiece,.contact-grid{grid-template-columns:1fr} .ph{padding:40px 0 30px}}

/* ---------- v4 ---------- */
@property --lvl{syntax:'<length>';inherits:false;initial-value:0px}
.hero h1.h1a{font-size:clamp(40px,7.4vw,118px)}
.h1a .ln{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.hero .h1a .ln>span{color:#fff;display:inline-block;transform:translateY(110%);animation:hup 1s cubic-bezier(.2,.8,.2,1) forwards}
.h1a .ln:nth-child(2)>span{animation-delay:.14s} .h1a .ln:nth-child(3)>span{animation-delay:.28s}
@keyframes hup{to{transform:none}}
.hero .h1a .ln>.sw{color:transparent;-webkit-text-stroke:.03em #F6C400;line-height:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q20 2 40 12 T80 12 T120 12 T160 12 V20 H0Z' fill='%23F6C400'/%3E%3C/svg%3E"),linear-gradient(#F6C400,#F6C400);
  background-repeat:repeat-x,no-repeat;background-size:3.2em .22em,100% var(--lvl);
  background-position:0 calc(1.04em - var(--lvl) - .21em),0 calc(1.04em - var(--lvl));
  -webkit-background-clip:text;background-clip:text;
  animation:hup 1s cubic-bezier(.2,.8,.2,1) .28s forwards,hfill 3s cubic-bezier(.45,.15,.3,1) 1.05s forwards,hwave 1.6s linear infinite}
@keyframes hfill{to{--lvl:1.3em}}
@keyframes hwave{to{background-position-x:3.2em,0}}
.cap .h1a .ln>span{animation:none;transform:none} .cap .h1a .sw{--lvl:1.3em;animation:none}
/* counters */
.stat b{font-variant-numeric:tabular-nums}
/* exploded diagram */
.despiece{grid-template-columns:.75fr 1.8fr}
.dsp-wrap{position:relative}
.dsp{width:100%;height:auto;--p:1;overflow:visible}
.dsp .part{transform:translate(calc(var(--p) * var(--dx)),calc(var(--p) * var(--dy)));transition:opacity .3s}
.dsp .lbl{opacity:calc((var(--p) - .55) * 2.4)}
.dsp .lbl line{stroke:#151515;stroke-width:1.2} .dsp .lbl circle{fill:#151515}
.dsp text{font-family:Archivo,sans-serif;font-weight:600;font-size:19px;fill:#151515} .dsp text .sm{font-weight:400;font-size:15px;fill:#6E6A62}
.dsp[data-hl] .part{opacity:.18} .dsp[data-hl] .part.hl{opacity:1}
.dsp-ctl{display:flex;gap:6px;justify-content:center;margin-top:14px}
.dsp-ctl button{font:inherit;font-size:13px;font-weight:600;border:1.5px solid #151515;background:transparent;border-radius:99px;padding:7px 16px;cursor:pointer}
.dsp-ctl button.on{background:#151515;color:#fff}
.dsp-list li{cursor:pointer;transition:padding .25s,color .25s} .dsp-list li:hover,.dsp-list li.hl{padding-left:10px;color:var(--rust)}
/* timeline */
.tl2{position:relative;margin-top:38px;padding-left:76px}
.tl2 .pipe{position:absolute;left:21px;top:18px;bottom:40px;width:8px;border-radius:8px;background:var(--sand);overflow:hidden}
.tl2 .water{position:absolute;left:0;right:0;top:0;height:calc(var(--p,0) * 100%);background:#F6C400;
  background-image:linear-gradient(transparent 0 85%,rgba(255,255,255,.55) 85% 92%,transparent 92%);background-size:100% 26px;animation:flow 1.2s linear infinite}
@keyframes flow{to{background-position:0 26px}}
.tl2 .ms{position:relative;padding-bottom:30px;opacity:.3;transform:translateX(14px);transition:opacity .6s,transform .6s}
.tl2 .ms.on{opacity:1;transform:none}
.tl2 .mo{position:absolute;left:-76px;top:-4px;width:50px;height:auto;background:var(--cream);padding:2px}
.tl2 .mw{transform:translateY(var(--drop));transition:transform 1.2s cubic-bezier(.3,.7,.2,1) .15s}
.tl2 .ms.on .mw{transform:none}
.tl2 b{display:block;font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(18px,1.8vw,24px);line-height:1.05;margin:6px 0}
.tl2 p{margin-top:0;font-size:15px}
.cap .tl2 .ms{opacity:1;transform:none} .cap .tl2 .mw{transform:none} .cap .tl2{--p:1}
.hist-photo img{transition:transform 6s ease-out} .hist-photo.in img{transform:scale(1.14)}
/* socials */
.soc{display:flex;gap:10px}
.soc a{width:44px;height:44px;border-radius:50%;border:1.5px solid #3a3a38;display:grid!important;place-items:center;padding:0!important;transition:background .25s,color .25s,border-color .25s}
.soc a:hover{background:#F6C400;color:#151515!important;border-color:#F6C400}
.soc svg{width:20px;height:20px}
@media (max-width:980px){.despiece{grid-template-columns:1fr} .dsp text{font-size:30px} .dsp text .sm{font-size:22px}}
@media (prefers-reduced-motion:reduce){.h1a .ln>span{animation:none;transform:none} .h1a .sw{--lvl:1.3em;animation:none} .tl2 .water{animation:none}}

/* ---------- v5 despiece ---------- */
.dsp .part{transform:translate(calc((1 - var(--p)) * var(--ax)),calc((1 - var(--p)) * var(--ay)));transition:opacity .35s}
.dsp .shp{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.dsp .lbl{pointer-events:none;opacity:calc((var(--p) - .55) * 2.4);transition:opacity .3s}
.dsp .tapa-rot{transform-box:view-box;transform-origin:262px 236px;transform:rotate(calc(var(--p) * -18deg))}
.dsp text{font-size:17px;font-weight:600} .dsp text .sm{font-size:13.5px;font-style:italic;font-weight:400}
.dsp[data-hl] .part{opacity:.3} .dsp[data-hl] .part.hl{opacity:1}
.dsp .part.hl .shp{transform:scale(1.05);filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.dsp .part.hl .lbl{opacity:1}
@media (max-width:980px){.dsp text{font-size:24px} .dsp text .sm{font-size:18px}}
/* header CTA + whatsapp */
.cta-cat{gap:10px} .cta-cat .cta-o{display:inline-flex} .cta-cat .cta-o svg{height:16px;width:auto;display:block}
.cta-cat .mw{transform:translateY(var(--drop));transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.cta-cat:hover .mw{transform:none}
.cta-cat:hover{background:#151515;color:#F6C400}
.wa{background:#F6C400!important} .wa svg{fill:#151515!important}
@media (max-width:560px){.cta-cat .hide-m{display:none}}

/* ---------- v6: mobile menu ---------- */
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:#F6C400;cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:#151515;border-radius:2px;transition:transform .35s cubic-bezier(.6,0,.2,1),top .35s}
.burger span:first-child{top:19px} .burger span:last-child{top:25px}
.menu-open .burger span:first-child{top:22px;transform:rotate(45deg)} .menu-open .burger span:last-child{top:22px;transform:rotate(-45deg)}

.nav-r{display:flex;align-items:center;gap:10px}
.mmenu{position:fixed;inset:0;z-index:49;background:#151515;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:110px 24px 30px;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s;overflow:hidden}
.menu-open .mmenu{clip-path:inset(0);visibility:visible;transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.mmenu ul{list-style:none}
.mmenu li{border-top:1px solid #2e2d2a;opacity:0;transform:translateY(24px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.menu-open .mmenu li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .06s)}
.mmenu li a{display:flex;align-items:center;gap:14px;padding:13px 0;text-decoration:none}
.mmenu small{font-size:12px;color:#8f897d;letter-spacing:.1em;width:22px;flex:none}
.mmenu b{font-family:ArchivoX;font-weight:800;text-transform:uppercase;font-size:clamp(24px,7.1vw,44px);line-height:1}
.mmenu a.on b{color:#F6C400} .mmenu a .mo{height:.9em;width:auto;font-size:30px;margin-left:auto}
.mm-foot{display:flex;flex-direction:column;gap:10px;margin-top:30px;font-size:15px;color:#cfc9bd;position:relative;z-index:1;opacity:0;transition:opacity .4s}
.menu-open .mm-foot{opacity:1;transition-delay:.5s}
.mm-foot a{text-decoration:none} .mm-foot .pill{align-self:flex-start;margin-bottom:8px}
.mm-water{position:absolute;left:0;bottom:0;width:200%;height:13svh;fill:#F6C400;opacity:.95;transform:translateY(100%);transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s;pointer-events:none}
.menu-open .mm-water{transform:none;animation:mmw 6s linear infinite}
@keyframes mmw{to{translate:-50% 0}}
.menu-open{overflow:hidden} .menu-open .wa{opacity:0;pointer-events:none}
.menu-open header{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.menu-open .nav{color:#fff!important} .menu-open .nav .cta-cat{visibility:hidden}
@media (max-width:980px){.burger{display:block} .nav ul{display:none}}
@media (max-width:560px){.nav .cta-cat{display:none}}
@media (min-width:981px){.mmenu{display:none}}
@media (prefers-reduced-motion:reduce){.mmenu,.mmenu li,.mm-water,.burger span{transition:none!important;animation:none!important}}

/* ---------- v6: fixes ---------- */
/* touch screens keep :hover after a tap; the O must stay visible on the dark button */
.cta-cat:hover .mo path,.cta-cat:hover .mw{fill:#F6C400}
@media (hover:none){.cta-cat:hover{background:var(--y);color:var(--ink);transform:none} .cta-cat:hover .mo path,.cta-cat:hover .mw{fill:#151515} .cta-cat:hover .mw{transform:translateY(var(--drop))}}
/* founder photo: the img has width/height attributes, so height must follow the width or it stretches */
.hist-photo img{height:auto;display:block}
/* footer: one column on phones (long words were pushing the 2nd column out) */
.f-grid>*{min-width:0}
@media (max-width:560px){.f-grid{grid-template-columns:1fr;gap:26px}}
/* nivel on phones: when the claim appears, the step text fades so they never overlap */
@media (max-width:980px){.nivel-o{grid-row:1} .n-gauge{grid-row:2} .n-steps,.n-final{grid-row:3;grid-column:1;align-self:start}
 .n-final{position:static;padding:0} .n-steps{transition:opacity .4s} .nivel.done .n-steps{opacity:0}}