:root{
  --jungle:#0b1f14; --jungle-2:#11291b; --leaf:#2f5a22; --avo:#6e9a35; --lime:#c9d86a;
  --cream:#efe9d2; --cream-2:#e2dbbd; --gold:#f2c14e; --gold-2:#d99a2b; --terra:#b5532f;
  --co-y:#fcd116; --co-b:#003893; --co-r:#ce1126;
  --serif:"Fraunces", Georgia, serif; --sans:"Manrope", system-ui, sans-serif;
  --wrap:1240px; color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--jungle);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic;color:var(--gold);font-weight:400}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.02em;margin:.25em 0 .4em}
.h2.narrow{max-width:15ch}
.kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);font-weight:600}
.lead{font-size:clamp(17px,1.4vw,20px);color:rgba(239,233,210,.82);max-width:54ch}
.note{font-size:13px;color:rgba(239,233,210,.55);margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:16px 28px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px;letter-spacing:.02em;border:0;cursor:pointer;transition:transform .25s, background .25s, color .25s;font-family:var(--sans)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1d1405;box-shadow:0 10px 30px -10px rgba(242,193,78,.6)}
.btn-ghost{border:1px solid rgba(239,233,210,.4);color:var(--cream);backdrop-filter:blur(6px);background:rgba(11,31,20,.25)}
.btn-ghost:hover{background:rgba(239,233,210,.12)}
.btn-sm{padding:10px 18px;font-size:13px}
.btn-full{width:100%;padding:18px}

/* Flag line */
.flagline{display:flex;height:4px;width:100%}
.flagline i{flex:2;background:var(--co-y)}.flagline i+i{flex:1;background:var(--co-b)}.flagline i+i+i{background:var(--co-r)}
.flagline.big{height:6px}

/* Loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--jungle);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s, visibility .8s}
#loader.done{opacity:0;visibility:hidden}
#loader .flagline{position:absolute;bottom:0;left:0}
.loader-mark{font-family:var(--serif);font-size:clamp(40px,7vw,80px);font-weight:500;letter-spacing:-.02em}
.loader-mark span,.brand b,.foot-brand b{color:var(--gold);font-weight:inherit}
.loader-bar{width:min(320px,70vw);height:2px;background:rgba(239,233,210,.15);margin:22px auto 10px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.loader-pct{text-align:center;font-size:12px;letter-spacing:.3em;color:rgba(239,233,210,.6)}
.loader-inner{text-align:center}

/* Canvas */
#avo3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:6;pointer-events:none}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;transition:background .4s, padding .4s, backdrop-filter .4s}
.nav.scrolled{background:rgba(11,31,20,.72);backdrop-filter:blur(14px);padding:12px 28px;border-bottom:1px solid rgba(239,233,210,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em}
.brand-ico{width:30px;height:30px}
.nav-links{display:flex;gap:30px}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;opacity:.85;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--gold);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:flex;border:1px solid rgba(239,233,210,.25);border-radius:999px;padding:3px}
.lang button{background:none;border:0;color:var(--cream);font:600 12px var(--sans);letter-spacing:.08em;padding:6px 10px;border-radius:999px;cursor:pointer;opacity:.7}
.lang button.on{background:var(--cream);color:var(--jungle);opacity:1}

/* Hero */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:110px 28px 34px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.08)}
.hero-shade{position:absolute;inset:0;z-index:1;background:
  radial-gradient(ellipse 50% 55% at 50% 52%, rgba(11,31,20,.15), rgba(11,31,20,.75) 70%),
  linear-gradient(180deg, rgba(11,31,20,.65) 0%, rgba(11,31,20,.1) 30%, rgba(11,31,20,.25) 60%, var(--jungle) 100%)}
.hero-fallback{position:absolute;left:50%;top:50%;width:min(70vw,760px);transform:translate(-50%,-52%);z-index:2;opacity:0;transition:opacity .6s;mask-image:radial-gradient(closest-side,#000 70%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.no-webgl .hero-fallback{opacity:1}
.hero-giant{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-giant span{font-family:var(--serif);font-weight:800;font-size:clamp(160px,34vw,560px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(239,233,210,.35);background:linear-gradient(180deg,rgba(242,193,78,.16),rgba(242,193,78,0));-webkit-background-clip:text;background-clip:text;transform:translateY(-2%)}
.hero-top,.hero-bottom,.hero-meta,.scroll-hint{position:relative;z-index:8}
.hero-top{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:8px 16px;border-radius:999px;background:rgba(11,31,20,.4);backdrop-filter:blur(8px);border:1px solid rgba(239,233,210,.15)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--co-y);box-shadow:8px 0 0 var(--co-b),16px 0 0 var(--co-r);margin-right:18px}
.hero-bottom{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;max-width:var(--wrap);width:100%;margin:0 auto}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7vw,110px);line-height:.92;letter-spacing:-.03em;grid-column:1/-1;max-width:10ch}
.hero-title em{display:block}
.hero-sub{max-width:44ch;color:rgba(239,233,210,.85)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hero-meta{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;text-align:right}
.hero-meta b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;color:var(--gold)}
.hero-meta span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.scroll-hint{position:absolute;left:28px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.scroll-hint i{width:60px;height:1px;background:var(--cream);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:sh 2s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Marquee */
.marquee{position:relative;z-index:7;background:var(--gold);color:var(--jungle);overflow:hidden;padding:14px 0;transform:rotate(-1.5deg) scale(1.03);margin:-10px 0 0}
.marquee-track{display:flex;gap:34px;white-space:nowrap;animation:mq 30s linear infinite;width:max-content}
.marquee span{font-family:var(--serif);font-size:30px;font-style:italic;font-weight:600}
.marquee .sep{font-style:normal;font-size:18px;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* Sections */
.sec{position:relative;padding:160px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.grid-2.rev > :first-child{order:0}
.origin{background:radial-gradient(ellipse at 80% 30%, rgba(110,154,53,.18), transparent 60%)}
.origin .grid-2{grid-template-columns:1.05fr .95fr}
.facts{list-style:none;margin-top:36px;display:grid;gap:18px}
.facts li{display:grid;grid-template-columns:180px 1fr;gap:20px;padding-top:18px;border-top:1px solid rgba(239,233,210,.14)}
.facts b{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--lime)}
.facts span{color:rgba(239,233,210,.75)}
.origin-photos{position:relative;height:640px}
.ph{position:absolute;overflow:hidden;border-radius:220px 220px 18px 18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.ph-a{width:62%;height:78%;left:0;top:0}
.ph-b{width:50%;height:58%;right:0;bottom:0;border-radius:18px 18px 200px 200px;border:6px solid var(--jungle)}
.stamp{position:absolute;width:150px;height:150px;left:44%;top:56%;z-index:3}
.stamp svg{width:100%;height:100%;animation:spin 22s linear infinite}
.stamp text{fill:var(--gold);font:700 15px var(--sans);letter-spacing:.2em}
.stamp span{position:absolute;inset:0;display:grid;place-items:center;font-size:38px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Wayuu band */
.wayuu{height:38px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='38' viewBox='0 0 76 38'%3E%3Crect width='76' height='38' fill='%230b1f14'/%3E%3Cpath d='M0 19 19 0l19 19-19 19z' fill='%23fcd116'/%3E%3Cpath d='M8 19 19 8l11 11-11 11z' fill='%23ce1126'/%3E%3Cpath d='M14 19l5-5 5 5-5 5z' fill='%230b1f14'/%3E%3Cpath d='M38 19 57 0l19 19-19 19z' fill='%236e9a35'/%3E%3Cpath d='M46 19 57 8l11 11-11 11z' fill='%23003893'/%3E%3Cpath d='M52 19l5-5 5 5-5 5z' fill='%23efe9d2'/%3E%3C/svg%3E") repeat-x;opacity:.9}

/* Process horizontal */
.process{position:relative;padding:130px 0 0;background:var(--cream);color:var(--jungle);overflow:hidden}
.process .kicker{color:var(--leaf)}
.process em{color:var(--terra)}
.hscroll{height:100vh;display:flex;align-items:center;overflow:hidden}
.htrack{display:flex;gap:40px;padding:0 28px 0 max(28px, calc((100vw - var(--wrap))/2 + 28px));will-change:transform}
.step{flex:0 0 min(440px,78vw);background:#fff8e6;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,31,20,.35);display:flex;flex-direction:column}
.step-img{height:min(52vh,420px);overflow:hidden}
.step-img img{width:100%;height:100%;object-fit:cover}
.step-body{padding:26px 30px 32px;position:relative}
.step-n{position:absolute;right:26px;top:-38px;font-family:var(--serif);font-size:64px;font-weight:700;color:var(--gold);text-shadow:0 4px 20px rgba(0,0,0,.25);line-height:1}
.step h3{font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:6px}
.step p{color:rgba(11,31,20,.75);font-size:16px}

/* Calibre */
.calibre{background:linear-gradient(180deg,var(--jungle),var(--jungle-2))}
.calibre .grid-2{grid-template-columns:.9fr 1.1fr}
.cal-visual{display:flex;justify-content:center}
.cal-ring{position:relative;width:min(440px,80vw);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(242,193,78,.4);display:grid;place-items:center;background:radial-gradient(circle,rgba(110,154,53,.15),transparent 70%)}
.cal-ring::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(239,233,210,.08)}
.cal-fruit{width:40%;aspect-ratio:.72;border-radius:50% 50% 48% 48% / 60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#4b6f2a,#22381a 70%);box-shadow:inset -12px -18px 30px rgba(0,0,0,.4), 0 30px 50px -20px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.cal-read{position:absolute;bottom:14%;font-family:var(--serif);display:flex;align-items:baseline;gap:4px}
.cal-read b{font-size:56px;color:var(--gold);font-weight:600}
.cal-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cal-pills button{border:1px solid rgba(239,233,210,.25);background:transparent;color:var(--cream);border-radius:14px;padding:10px 14px;cursor:pointer;font:600 15px var(--sans);min-width:64px;transition:.25s}
.cal-pills button small{display:block;font-size:11px;opacity:.6;font-weight:500}
.cal-pills button.on,.cal-pills button:hover{background:var(--gold);color:var(--jungle);border-color:var(--gold)}
.xl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.xl figure{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:4/3}
.xl img{width:100%;height:100%;object-fit:cover}
.xl figcaption{position:absolute;left:10px;bottom:10px;background:rgba(11,31,20,.75);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}

/* Quality */
.quality{background:var(--jungle-2)}
.q-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;max-width:62%}
.q-card{padding:28px 24px;border-radius:24px;background:linear-gradient(160deg,rgba(239,233,210,.07),rgba(239,233,210,.02));border:1px solid rgba(239,233,210,.1);grid-column:span 2}
.q-ico{font-size:26px;color:var(--gold)}
.q-card h3{font-family:var(--serif);font-size:23px;font-weight:600;margin:10px 0 6px}
.q-card p{color:rgba(239,233,210,.72);font-size:15px}

/* Logistics */
.logistics{background:radial-gradient(ellipse at 50% 0%, rgba(0,56,147,.25), transparent 60%), var(--jungle)}
.route{margin-top:30px;border-radius:28px;overflow:hidden;border:1px solid rgba(239,233,210,.1);background:linear-gradient(180deg,#0d2a3a,#0b1f14)}
.route-map{width:100%;height:auto;display:block}
.map-label{fill:var(--cream);font:800 18px var(--sans);letter-spacing:.18em}
.map-sub{fill:rgba(239,233,210,.55);font:600 11px var(--sans);letter-spacing:.2em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.stat{padding:24px;border-top:2px solid var(--gold)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1.1}
.stat span{font-size:14px;color:rgba(239,233,210,.7)}

/* Gallery */
.gallery{overflow:hidden;padding:30px 0;background:var(--jungle)}
.g-row{display:flex;gap:18px;width:max-content;animation:mq 60s linear infinite}
.g-row img{height:300px;width:auto;border-radius:20px;object-fit:cover;aspect-ratio:4/3}
.g-row img:nth-child(odd){aspect-ratio:3/4}

/* Quote */
.quote{background:linear-gradient(180deg,var(--jungle),#0e2617)}
.quote .grid-2{align-items:start;grid-template-columns:.95fr 1.05fr}
.quote-intro{position:sticky;top:120px}
.checks{list-style:none;margin:28px 0;display:grid;gap:10px}
.checks li::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--jungle);font-weight:800;font-size:13px;margin-right:12px}
.mail{font-family:var(--serif);font-size:clamp(26px,3vw,40px);color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(242,193,78,.4)}
.qform{position:relative;z-index:8;background:var(--cream);color:var(--jungle);padding:40px;border-radius:30px;display:grid;gap:16px;box-shadow:0 50px 100px -40px rgba(0,0,0,.8)}
.qform label{display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em}
.qform input,.qform select,.qform textarea{font:500 16px var(--sans);color:var(--jungle);background:#fffaf0;border:1px solid rgba(11,31,20,.18);border-radius:12px;padding:13px 14px;width:100%;outline:none;transition:border .2s, box-shadow .2s}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 3px rgba(110,154,53,.25)}
.qform .invalid{border-color:var(--co-r)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calset{border:0}
.calset legend{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
#calChecks{display:flex;flex-wrap:wrap;gap:8px}
#calChecks label{display:inline-flex;cursor:pointer}
#calChecks input{position:absolute;opacity:0;pointer-events:none}
#calChecks span{padding:7px 12px;border-radius:10px;border:1px solid rgba(11,31,20,.2);font-weight:700;font-size:14px;transition:.2s}
#calChecks input:checked+span{background:var(--jungle);color:var(--cream);border-color:var(--jungle)}
.consent{grid-template-columns:auto 1fr!important;align-items:start;font-weight:500!important;font-size:13px!important;letter-spacing:0!important}
.consent input{width:18px!important;height:18px;margin-top:2px;accent-color:var(--leaf)}
.hp{position:absolute;left:-9999px}
.form-msg{font-size:14px;font-weight:600;min-height:1.4em}
.form-msg.ok{color:var(--leaf)}.form-msg.err{color:var(--co-r)}

/* Footer */
.foot{background:#071509;position:relative;z-index:8}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:70px;padding-bottom:40px}
.foot-brand{font-family:var(--serif);font-size:48px;font-weight:600;letter-spacing:-.02em}
.foot p{color:rgba(239,233,210,.6);max-width:40ch}
.foot-col{display:grid;gap:8px;align-content:start;font-size:15px}
.foot-col b{color:var(--lime);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.foot-col a{text-decoration:none;opacity:.85}.foot-col a:hover{color:var(--gold)}
.lang-foot{display:inline-flex;flex-direction:column;border:0;padding:0;align-items:flex-start}
.lang-foot button{padding:2px 0;font-size:15px;letter-spacing:0;font-weight:500}
.lang-foot button.on{background:none;color:var(--gold)}
.foot-legal{display:flex;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:30px;border-top:1px solid rgba(239,233,210,.08);font-size:12px;color:rgba(239,233,210,.45)}

/* sections above canvas where needed */
.process,.gallery{z-index:7}
.sec .wrap{position:relative;z-index:7}
.logistics .wrap, .quote .wrap{z-index:7}

/* Reveal default */
.reveal{opacity:0;transform:translateY(40px)}
.no-js .reveal,.reduced .reveal{opacity:1;transform:none}

/* Responsive */
@media (max-width: 980px){
  .nav-links{display:none}
  .grid-2,.origin .grid-2,.calibre .grid-2,.quote .grid-2{grid-template-columns:1fr;gap:50px}
  .hero-bottom{grid-template-columns:1fr}
  .hero-ctas{justify-content:flex-start}
  .hero-meta{display:none}
  .scroll-hint{display:none}
  .origin-photos{height:520px}
  .q-grid{max-width:none;grid-template-columns:1fr 1fr}
  .q-card{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  .quote-intro{position:static}
  .foot-grid{grid-template-columns:1fr}
  .sec{padding:110px 0}
}
@media (max-width: 600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .nav{padding:14px 16px}.nav.scrolled{padding:10px 16px}
  .nav-right .btn{display:none}
  .brand{font-size:20px}
  .hero{padding:96px 16px 26px}
  .row2{grid-template-columns:1fr}
  .qform{padding:24px 18px}
  .facts li{grid-template-columns:1fr;gap:4px}
  .q-grid{grid-template-columns:1fr}
  .xl{grid-template-columns:1fr 1fr}
  .xl figure:last-child{grid-column:span 2}
  .g-row img{height:200px}
  .foot-legal{flex-direction:column}
  .stamp{width:110px;height:110px}
  .map-label{font-size:24px}.map-sub{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track,.g-row,.stamp svg{animation:none}
}

/* 3D anchor spots */
.spot{position:absolute;width:2px;height:2px;pointer-events:none}
.spot-hero{left:50%;top:50%}
.spot-center{left:50%;top:50%}
.spot-origin{right:12%;top:18%}
.quality .wrap{position:relative}
.spot-quality{right:16%;top:58%}
.route{position:relative}
.spot-quote-box{position:relative;height:300px;margin-top:20px}
.has3d .cal-fruit{opacity:0}
@media (max-width:980px){ .has3d .cal-fruit{opacity:1} .spot-quote-box{display:none} }
.hscroll{position:relative}
.stat b span{font-size:inherit;color:inherit}
.cal-read{bottom:-2%;background:rgba(11,31,20,.8);padding:2px 16px;border-radius:999px;border:1px solid rgba(242,193,78,.35)}
.cal-read b{font-size:40px}
@media (max-width:980px){ .spot-hero{top:42%} }