/* La Orgánica v3: slides laterales. Tema claro (blanco cálido) por defecto, un solo acento, radios: 28px tarjetas y paneles, píldora en botones, arcos solo en el hero. */
@font-face{font-family:'Bricolage Grotesque';src:url(assets/fonts/bricolage.woff2) format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'DM Sans';src:url(assets/fonts/dmsans.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Caveat';src:url(assets/fonts/caveat.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --bosque:#19331F;--oliva:#6B7831;--tierra:#C15C37;--sol:#DB9B39;--crema:#F7F2E9;
  --bg:#FBF8F2;--bg2:#E9EFD6;--warm:#FDF2D6;--surface:#FFFEFA;--paper:#FFFEFA;
  --ink:#1E211E;--muted:#4F5B4C;--line:rgba(25,51,31,.16);
  --sage:#E1E9CA;--sun:#FAE6B8;--clay:#F6D6C4;--sand:#EEE9DA;
  --accent:#B24F2B;--accent-ink:#FFF8EE;--hl:#B24F2B;--shadow:0 22px 44px -24px rgba(25,51,31,.5);
  --display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--hand:'Caveat','Segoe Script',cursive;
  --r:28px;--ease:cubic-bezier(.16,1,.3,1);--move:cubic-bezier(.55,.02,.2,1);--glide:1.3s;--hdr:72px;--dockh:64px;
}
:root[data-theme=dark]{
  --bg:#112219;--bg2:#17301f;--warm:#1a2b1c;--surface:#1c3a26;--paper:#F7F2E9;--ink:#F4EEE0;--muted:#B7C3B0;--line:rgba(244,238,224,.16);
  --sage:#1d3a27;--sun:#3a3420;--clay:#3b2a22;--sand:#232d22;
  --accent:#DB9B39;--accent-ink:#1B2A16;--hl:#DB9B39;--shadow:0 22px 44px -24px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--sol);color:#19331F}
.skip{position:fixed;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{top:12px}

/* íconos locales (Phosphor bold) pintados con el color del texto */
.ic{display:inline-block;width:1.1em;height:1.1em;background:currentColor;flex:none;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-moon{--i:url(assets/icons/moon.svg)}.ic-sun{--i:url(assets/icons/sun.svg)}.ic-plus{--i:url(assets/icons/plus.svg)}.ic-minus{--i:url(assets/icons/minus.svg)}
.ic-arrow{--i:url(assets/icons/arrow-up-right.svg)}.ic-bag{--i:url(assets/icons/shopping-bag-open.svg)}.ic-wa{--i:url(assets/icons/whatsapp-logo.svg)}
.ic-left{--i:url(assets/icons/arrow-left.svg)}.ic-right{--i:url(assets/icons/arrow-right.svg)}.ic-home{--i:url(assets/icons/house-line.svg)}
.ic-gear{--i:url(assets/icons/gear.svg)}.ic-basket{--i:url(assets/icons/basket.svg)}.ic-plant{--i:url(assets/icons/plant.svg)}.ic-heart{--i:url(assets/icons/hand-heart.svg)}.ic-leaf{--i:url(assets/icons/leaf.svg)}

/* el logo siempre es el de color; en tema oscuro va sobre una placa crema */
.logo{display:inline-block;line-height:0}
.logo img{height:auto;width:150px}
:root[data-theme=dark] .logo{background:var(--crema);padding:8px 16px;border-radius:999px}
:root[data-theme=dark] .logo img{width:124px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:1rem;white-space:nowrap;cursor:pointer;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn .ic{transition:transform .3s var(--ease)}
.btn:hover .ic-arrow{transform:translate(3px,-3px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:.95rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--bg);box-shadow:none}
.btn-inv{background:var(--bosque);color:var(--crema);box-shadow:0 4px 0 #0b1a0f}
.btn-inv:hover{box-shadow:0 7px 0 #0b1a0f}.btn-inv:active{box-shadow:0 1px 0 #0b1a0f}

/* encabezado fijo */
.top{position:fixed;left:0;right:0;top:0;z-index:40;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,48px);background:color-mix(in srgb,var(--bg) 94%,transparent);}
.top-act{display:flex;align-items:center;gap:10px}
.theme{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;font-size:1.15rem;transition:transform .4s var(--ease),border-color .2s}
.theme:hover{border-color:var(--ink);transform:rotate(18deg)}

/* escenario: pista horizontal con una escena por pantalla */
.stage{position:fixed;inset:0;overflow:hidden;touch-action:pan-y}
.track{display:flex;width:100%;height:100%;transform:translate3d(calc(var(--cur,0) * -100%),0,0);transition:transform var(--glide) var(--move);will-change:transform}
.scene{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:var(--bg)}
#como{background:var(--bg2)}#origen{background:var(--warm)}#pedido{background:var(--accent);color:var(--accent-ink)}
.pad{position:relative;z-index:1;width:100%;max-width:1240px;margin-inline:auto;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 12px) clamp(20px,5vw,48px) calc(var(--dockh) + 44px);transition:transform var(--glide) var(--move),opacity var(--glide) var(--move)}
.scene.before .pad{transform:translateX(26%);opacity:.15}
.scene.after .pad{transform:translateX(-26%);opacity:.15}
/* entrada escalonada: se anima con translate/scale para no pisar los transform propios de cada pieza */
.a{opacity:0;translate:0 34px;scale:.96;transition:opacity .6s var(--ease),translate .6s var(--ease),scale .6s var(--ease)}
.scene.on .a{opacity:1;translate:0 0;scale:1;transition:opacity .9s var(--ease),translate 1s var(--ease),scale 1s var(--ease);transition-delay:calc(.3s + var(--d,0s))}

/* detallitos de fondo con vida propia */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dc{position:absolute;display:block;color:var(--oliva)}
.dc.lf1,.dc.lf2,.dc.pl,.dc.sp1,.dc.sp2{background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.dc.lf1,.dc.lf2{--i:url(assets/icons/leaf.svg);opacity:.2;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite alternate}
.dc.lf1{width:74px;height:74px}.dc.lf2{width:46px;height:46px;animation-delay:-3s;color:var(--tierra)}
.dc.pl{--i:url(assets/icons/plant.svg);width:96px;height:96px;color:var(--tierra);opacity:.16;transform-origin:50% 100%;animation:grow 7s ease-in-out infinite alternate}
.dc.sp1,.dc.sp2{--i:url(assets/icons/sparkle.svg);color:var(--sol);animation:twinkle 3.2s ease-in-out infinite}
.dc.sp1{width:30px;height:30px}.dc.sp2{width:20px;height:20px;animation-delay:-1.6s}
.dc.rg{width:170px;height:170px;border-radius:50%;border:2px dashed currentColor;opacity:.3;animation:spin 46s linear infinite}
.dc.dt{width:130px;height:130px;opacity:.4;background:radial-gradient(circle,currentColor 2px,transparent 2.6px) 0 0/20px 20px;animation:drift 9s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes grow{from{transform:scale(.92) rotate(-3deg)}to{transform:scale(1.06) rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(25deg)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(14px,-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(7px)}}
/* posiciones por escena */
#inicio .lf1{left:3%;bottom:18%}#inicio .lf2{left:44%;top:16%}#inicio .sp1{left:47%;bottom:22%}#inicio .sp2{right:3%;bottom:14%}#inicio .rg{left:-70px;top:24%}#inicio .dt{left:2%;top:13%}#inicio .pl{right:48%;bottom:9%}
#productos .lf1{right:3%;top:16%}#productos .lf2{left:2%;bottom:16%}#productos .sp1{left:34%;top:15%}#productos .sp2{right:12%;bottom:15%}#productos .rg{right:-60px;bottom:22%}#productos .dt{left:3%;top:15%}#productos .pl{right:5%;bottom:10%}
#como .lf1{right:6%;top:18%}#como .lf2{left:44%;bottom:14%}#como .sp1{right:20%;top:30%}#como .sp2{left:6%;bottom:30%}#como .rg{right:-50px;bottom:6%}#como .dt{right:4%;bottom:18%}#como .pl{left:2%;top:20%}
#origen .lf1{left:2%;bottom:14%}#origen .lf2{right:4%;top:18%}#origen .sp1{left:44%;top:20%}#origen .sp2{right:44%;bottom:16%}#origen .rg{left:-60px;top:10%}#origen .dt{left:46%;bottom:12%}#origen .pl{right:3%;bottom:8%}
#pedido .dc{color:var(--accent-ink)}#pedido .sp1,#pedido .sp2{color:var(--sun)}
#pedido .lf1{right:8%;top:20%}#pedido .lf2{left:6%;bottom:22%}#pedido .sp1{right:26%;bottom:26%}#pedido .sp2{left:30%;top:22%}#pedido .rg{right:-40px;top:10%;width:260px;height:260px;opacity:.35}#pedido .dt{left:4%;top:20%}#pedido .pl{right:6%;bottom:12%;opacity:.28}

/* inicio */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font:700 clamp(3rem,7.2vw,6.4rem)/.98 var(--display);letter-spacing:-.028em;margin:0 0 22px}
.hl{color:var(--hl)}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:36ch;color:var(--muted);margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-art{position:relative;height:clamp(380px,62dvh,600px)}
.sun{position:absolute;right:-6%;top:-4%;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FBE6B4,var(--sol) 70%);opacity:.75}
:root[data-theme=dark] .sun{opacity:.28}
.arch,.dot{position:absolute;overflow:hidden;background:var(--bg2)}
.arch img,.dot img{width:100%;height:100%;object-fit:cover}
.arch{border-radius:999px 999px var(--r) var(--r);border:5px solid var(--paper)}
.arch-a{left:2%;bottom:0;width:56%;height:76%;box-shadow:12px 12px 0 var(--oliva)}
.arch-b{right:0;top:2%;width:42%;height:62%;box-shadow:-10px 10px 0 var(--tierra)}
.dot{right:6%;bottom:3%;width:32%;aspect-ratio:1;border-radius:50%;border:6px solid var(--paper);box-shadow:0 14px 28px -14px rgba(25,51,31,.6)}
/* sello: isotipo centrado, anillo punteado que gira y un punto que orbita (sin texto) */
.seal{position:absolute;left:34%;top:3%;width:clamp(84px,9vw,116px);aspect-ratio:1;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:0 14px 28px -14px rgba(25,51,31,.55);animation:bob 4.6s ease-in-out infinite alternate}
.seal img{width:44%;height:auto}
.seal-ring{position:absolute;inset:7px;border-radius:50%;border:2px dashed var(--oliva);animation:spin 26s linear infinite}
.seal-orbit{position:absolute;inset:-9px;animation:spin 8s linear infinite}
.seal-orbit i{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--sol);box-shadow:0 0 0 3px var(--paper)}
.note{position:absolute;left:-2%;bottom:18%;font:600 clamp(1.4rem,2.4vw,2rem)/1 var(--hand);color:#FFFEFA;background:var(--tierra);padding:8px 18px 10px;border-radius:999px;transform:rotate(-7deg);box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}

/* productos */
h2{font:700 clamp(2.2rem,5vw,4.2rem)/1.02 var(--display);letter-spacing:-.025em;margin:0}
.sec-head{margin-bottom:clamp(18px,3vw,34px);max-width:62ch}
.prod h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.sec-head p{color:var(--muted);margin:12px 0 0;font-size:1.02rem;max-width:50ch}
.grid{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))}
.card{--tint:var(--sage);display:flex;flex-direction:column;background:var(--tint);border-radius:var(--r);padding:10px 10px 14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:nth-child(4n+2){--tint:var(--sun)}.card:nth-child(4n+3){--tint:var(--clay)}.card:nth-child(4n+4){--tint:var(--sand)}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow)}
.card-img{position:relative;aspect-ratio:4/3;border-radius:calc(var(--r) - 10px) calc(var(--r) - 10px) 90px 90px;overflow:hidden;background:var(--bg2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}
.card.out .card-img img{filter:grayscale(.85) brightness(.9)}
.card-img.ph{display:grid;place-items:center;color:var(--oliva);font-size:4rem;background:color-mix(in srgb,var(--paper) 55%,transparent)}
.stock{position:absolute;left:12px;top:12px;font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--paper);color:var(--bosque)}
.stock.low{background:var(--sol)}.stock.none{background:var(--bosque);color:var(--crema)}
.card-body{display:grid;gap:8px;padding:12px 8px 0}
.card h3{font:700 1.4rem/1.05 var(--display);letter-spacing:-.02em;margin:0}
.card p{margin:3px 0 0;font-size:.9rem;color:var(--muted);min-height:2.6em}
.price{font:700 1.25rem/1 var(--display)}
.price small{font:500 .85rem var(--body);color:var(--muted)}
.buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.qty{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--paper);flex:none}
.qty button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--bosque);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:transform .2s var(--ease)}
.qty .q-plus{background:var(--accent);color:var(--accent-ink)}
:root[data-theme=dark] .qty button{color:#19331F}
.qty button:active:not(:disabled){transform:scale(.88)}
.qty button:disabled{opacity:.35;cursor:default}
.q-val{min-width:28px;text-align:center;font:700 1.1rem var(--display);color:var(--bosque)}
.q-val.bump{animation:bump .35s var(--ease)}
.sub{font-weight:700;font-size:.95rem}
@keyframes bump{40%{transform:scale(1.35)}}
.grid-empty{padding:40px;border:2px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--muted)}
.grid-skel{height:340px;border-radius:var(--r);background:linear-gradient(100deg,var(--bg2) 30%,color-mix(in srgb,var(--bg2) 60%,#fff) 50%,var(--bg2) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* cómo funciona: palabras grandes con foto en píldora */
.how-title{max-width:14ch;margin-bottom:clamp(20px,4vw,48px)}
.how-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2.4vw,28px)}
.how-row{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.how-row:nth-child(2){padding-left:clamp(0px,8vw,130px)}
.how-row:nth-child(3){padding-left:clamp(0px,16vw,260px)}
.how-word{font:700 clamp(2.5rem,7.4vw,6.2rem)/1 var(--display);letter-spacing:-.03em}
.how-row:nth-child(1) .how-word{color:var(--hl)}
.how-pill{flex:none;width:clamp(96px,13vw,200px);height:clamp(48px,6.6vw,100px);border-radius:999px;object-fit:cover;border:4px solid var(--paper);box-shadow:var(--shadow);transition:transform .6s var(--ease)}
.how-row:hover .how-pill{transform:rotate(-5deg) scale(1.06)}
.how-row p{margin:0;flex:0 1 28ch;color:var(--muted);font-size:1.05rem}

/* quiénes somos */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.story h2{margin-bottom:22px}
.story p{color:var(--muted);font-size:1.1rem;max-width:46ch;margin:0 0 14px}
.sign{display:inline-block;margin-top:8px;font:600 clamp(1.7rem,3vw,2.3rem)/1 var(--hand);color:var(--hl);transform:rotate(-3deg)}
.polaroids{position:relative;height:clamp(320px,54dvh,520px)}
.pol{position:absolute;margin:0;background:var(--paper);padding:12px 12px 44px;box-shadow:var(--shadow);border-radius:6px}
.pol img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.pol-a{left:0;top:6%;width:68%;height:62%;transform:rotate(-5deg)}
.pol-b{right:0;bottom:0;width:56%;height:56%;transform:rotate(6deg)}
.pol::before{content:'';position:absolute;top:-12px;left:50%;width:84px;height:26px;transform:translateX(-50%) rotate(-3deg);background:color-mix(in srgb,var(--sol) 70%,transparent);border-radius:2px}

/* pedido */
.cta{align-items:flex-start;gap:clamp(18px,3vw,32px)}
.cta h2{font-size:clamp(3rem,8.4vw,7.4rem);line-height:.98;color:inherit}
.cta-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:.92rem;opacity:.92}
.cta-foot img{filter:brightness(0) invert(1);opacity:.9}
:root[data-theme=dark] .cta-foot img{filter:brightness(0)}
.cta-foot a{text-decoration:underline;text-underline-offset:4px}

/* barra de pedido, sobre el dock */
.order{position:fixed;left:50%;bottom:calc(var(--dockh) + 62px + env(safe-area-inset-bottom));transform:translate(-50%,0);z-index:55;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--bosque);color:var(--crema);box-shadow:0 22px 50px -18px rgba(0,0,0,.6);border:1px solid rgba(247,242,233,.18);max-width:calc(100% - 24px);animation:rise .5s var(--ease)}
.order[hidden]{display:none}
.order .btn{background:var(--sol);color:#1B2A16;min-height:44px;box-shadow:0 3px 0 #8a5d12}
.order-n{font-weight:700;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translate(-50%,24px)}}

@media (prefers-reduced-motion:reduce){
  .car .grid,.car .card{transition:none}
  .dc,.seal,.seal-ring,.seal-orbit{animation:none!important}
  .scene.before .pad,.scene.after .pad{transform:none;opacity:1}
}

/* tablet */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:28px}
  .hero-art{height:clamp(300px,50dvh,460px)}.dot{width:26%;right:3%;bottom:0}
  .how-row:nth-child(n){padding-left:0}
  .story{grid-template-columns:1fr}
  .polaroids{max-width:520px;width:100%;margin-inline:auto;height:clamp(260px,44dvh,420px)}
}
/* móvil */
@media (max-width:620px){
  :root{--hdr:64px;--dockh:60px}
  .logo img{width:124px}
  .btn-sm{padding:0 16px}
  .hero h1{margin-bottom:16px}
  .hero-sub{margin-bottom:22px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-art{height:clamp(260px,40dvh,380px)}
  .note{left:0}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:8px 8px 12px}
  .card-img{border-radius:18px 18px 56px 56px}
  .card h3{font-size:1.15rem}.card p{display:none}
  .card-body{padding:10px 4px 0}
  .buy{flex-wrap:wrap}.qty button{width:40px;height:40px}.sub{font-size:.85rem}
  .sec-head p{display:none}
  .how-row{flex-wrap:wrap;row-gap:6px}.how-row p{flex:1 1 100%}
  .how-title{margin-bottom:18px}
  .order{gap:10px;padding-left:16px}
  .pad{padding-bottom:calc(var(--dockh) + 36px)}
  .dc.rg{width:110px;height:110px}.dc.dt{width:84px;height:84px}.dc.lf1{width:52px;height:52px}.dc.pl{width:64px;height:64px}
}
@media (max-height:640px){.hero h1{font-size:clamp(2.4rem,9vw,4rem)}.hero-art{height:clamp(220px,36dvh,320px)}}
.how-title{max-width:16ch;text-wrap:balance}h2{text-wrap:balance}
@media (max-width:620px){
  .hero-cta{flex-wrap:nowrap;gap:10px}.hero-cta .btn{flex:1 1 0;padding:0 10px;font-size:.95rem;min-height:50px}
  .hero-art{height:clamp(230px,34dvh,330px)}
  .hero h1{font-size:clamp(2.7rem,13vw,3.6rem)}
  .how-word{font-size:clamp(2rem,9.6vw,3rem)}.how-pill{width:84px;height:42px}
  .story h2{font-size:2rem;margin-bottom:12px}.story p{font-size:1rem;margin-bottom:10px}
  .polaroids{height:clamp(150px,26dvh,230px)}.sign{font-size:1.6rem}
}


/* navegacion: tallo que crece y florece (propia de La Organica) */
.stem{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;justify-content:space-between;align-items:center;width:min(460px,calc(100% - 24px));height:var(--dockh);padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--line);box-shadow:0 18px 40px -22px rgba(25,51,31,.6)}
:root[data-theme=dark] .stem{background:color-mix(in srgb,var(--bg2) 90%,transparent)}
.stem-line{position:absolute;left:34px;right:34px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.stem-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--prog,0));background:var(--oliva);border-radius:3px;transition:transform .9s var(--ease)}
.stem button{position:relative;z-index:1;width:48px;height:48px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.node{position:relative;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--oliva);transition:width .5s var(--ease),height .5s var(--ease),background .4s,border-color .4s,box-shadow .5s,transform .3s}
.stem button.done .node{background:var(--oliva)}
.stem button:hover .node{transform:scale(1.25)}
.stem button[aria-current=true] .node{width:26px;height:26px;background:var(--accent);border-color:var(--paper);box-shadow:0 0 0 3px var(--accent),0 8px 14px -6px rgba(0,0,0,.45)}
.stem button[aria-current=true] .node::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 2.4s ease-out infinite}
.stem button[aria-current=true]::before{content:'';position:absolute;top:1px;right:5px;width:16px;height:16px;background:var(--oliva);-webkit-mask:url(assets/icons/leaf.svg) center/contain no-repeat;mask:url(assets/icons/leaf.svg) center/contain no-repeat;transform-origin:0 100%;animation:sprout .7s var(--ease) both}
.stem em{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px) rotate(-3deg);font:600 1.45rem/1 var(--hand);font-style:normal;color:var(--hl);background:var(--paper);padding:3px 14px 5px;border-radius:999px;box-shadow:0 8px 16px -8px rgba(0,0,0,.4);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.stem button[aria-current=true] em,.stem button:hover em,.stem button:focus-visible em{opacity:1;transform:translate(-50%,0) rotate(-3deg)}
@keyframes ping{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
@keyframes sprout{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}

/* barrido en arco (sol, tierra, bosque) al cambiar de escena */
.wipe{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden;visibility:hidden}
.wipe.back{transform:scaleX(-1)}
.wipe i{position:absolute;left:0;top:-10%;bottom:-10%;width:26vw;border-radius:50vw 0 0 50vw;transform:translate3d(110vw,0,0);will-change:transform}
.wipe i:nth-child(1){background:var(--sol)}.wipe i:nth-child(2){background:var(--tierra)}.wipe i:nth-child(3){background:var(--bosque)}
.wipe.run{visibility:visible}
.wipe.run i{animation:sweep 1.3s var(--move) both}
.wipe.run i:nth-child(2){animation-delay:.08s}.wipe.run i:nth-child(3){animation-delay:.16s}
@keyframes sweep{from{transform:translate3d(110vw,0,0)}to{transform:translate3d(-40vw,0,0)}}

/* productos: carrusel con un producto destacado */
#productos .pad{justify-content:flex-start;padding-bottom:calc(var(--dockh) + 134px)}
#productos .sec-head{margin-bottom:0}
#productos .prod h2{font-size:clamp(1.9rem,min(4.2vw,6.4dvh),3.4rem)}
@media (max-height:900px){#productos .sec-head p{display:none}}
.car{--cw:clamp(250px,min(26vw,44dvh),360px);--ih:clamp(90px,calc(100dvh - 590px),280px);position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.car-view{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding:18px 0 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.car .grid{display:flex;position:relative;width:max-content;gap:clamp(14px,2.4vw,28px);transition:transform .85s var(--move);will-change:transform}
.car .card{flex:0 0 var(--cw);width:var(--cw);transform:scale(.86);opacity:.5;cursor:pointer;transition:transform .85s var(--move),opacity .6s var(--move),box-shadow .5s var(--ease)}
.car .card.active{transform:none;opacity:1;cursor:auto;box-shadow:var(--shadow)}
.car .card.active:hover{transform:translateY(-4px)}
.car .card.side:hover{transform:scale(.88);opacity:.75;box-shadow:none}
.car .card-img{aspect-ratio:auto;height:var(--ih)}
.car .grid-skel{flex:0 0 var(--cw);height:clamp(260px,44dvh,340px)}
.car-btn{position:absolute;z-index:3;top:calc(18px + var(--ih) / 2 + 10px);transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--bosque);display:grid;place-items:center;font-size:1.3rem;cursor:pointer;box-shadow:0 10px 24px -12px rgba(25,51,31,.6);transition:transform .35s var(--ease),opacity .3s,background .3s}
.car-btn:hover:not(:disabled){transform:translateY(-50%) scale(1.1);background:var(--accent);color:var(--accent-ink);border-color:transparent}
.car-btn:active:not(:disabled){transform:translateY(-50%) scale(.94)}
.car-btn:disabled{opacity:.28;cursor:default}
.car-prev{left:max(8px,calc(50% - var(--cw) / 2 - 76px))}
.car-next{right:max(8px,calc(50% - var(--cw) / 2 - 76px))}
.car-dots{display:flex;justify-content:center;gap:2px}
.car-dot{width:22px;height:22px;border:7px solid transparent;border-radius:50%;background:var(--muted);background-clip:padding-box;opacity:.35;padding:0;cursor:pointer;transition:opacity .3s,transform .4s var(--ease),background-color .3s}
.car-dot[aria-current=true]{opacity:1;background-color:var(--accent);transform:scale(1.25)}
.car-btn[hidden],.car-dots[hidden]{display:none}
.car .grid-empty{margin:0 auto}

/* como funciona: escalera real (cada paso mas a la derecha, texto debajo de la palabra) */
.how-row{flex-wrap:wrap;row-gap:4px;padding-left:0!important}
.how-row p{flex:1 1 100%;max-width:34ch;margin:0}
.how-row:nth-child(2){margin-left:clamp(0px,10vw,170px)}
.how-row:nth-child(3){margin-left:calc(clamp(0px,20vw,340px) + 3.5rem)}
.how-row:nth-child(3) .how-word{color:var(--hl)}
.how-word{font-size:clamp(2.2rem,min(6.4vw,9dvh),5.4rem)}
.how-title{font-size:clamp(1.9rem,min(5vw,7.4dvh),4.2rem);margin-bottom:clamp(10px,2.4dvh,48px)}
.how-list{gap:clamp(6px,1.6dvh,28px)}

/* quienes somos: la familia */
.pol-a{left:0;top:4%;width:74%;height:64%}
.pol-b{right:0;bottom:2%;width:46%;height:46%}
.pol{padding-bottom:46px}
.pol figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font:600 1.4rem/1 var(--hand);color:var(--hl)}

/* credito de desarrollo */
.credit{display:inline-flex;align-items:center;gap:10px;padding:5px 14px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 38%,transparent);text-decoration:none!important;transition:background .3s}
.credit:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.credit img{height:18px;width:auto}
.credit[hidden]{display:none}
@media (max-width:620px){
  .stem{padding:0 6px}.stem em{font-size:1.3rem}
  .how-row:nth-child(2),.how-row:nth-child(3){margin-left:0}
  .how-word{font-size:clamp(2rem,9.6vw,3rem)}
  .pol-a{width:78%}.pol-b{width:44%;height:42%}
}
.how-row p{flex:0 0 100%;max-width:none;box-sizing:border-box;padding-right:max(0px,calc(100% - 52ch))}
@media (max-width:620px){
  .hero-art{height:clamp(190px,30dvh,330px)}
  .stem button[aria-current=true] em{animation:tagfade 2.8s var(--ease) both}
}
@keyframes tagfade{0%{opacity:0;transform:translate(-50%,8px) rotate(-3deg)}12%{opacity:1;transform:translate(-50%,0) rotate(-3deg)}72%{opacity:1}100%{opacity:0}}
@media (max-width:620px) and (max-height:700px){
  .hero h1{font-size:2.45rem;margin-bottom:10px}.hero-sub{font-size:.95rem;margin-bottom:14px}
  .hero-cta .btn{min-height:46px}.seal{width:72px}.note{font-size:1.15rem;padding:5px 12px 7px}
}

/* detalles de fondo: solo se animan en la escena visible (aliviana la transicion) */
.scene:not(.on) .dc,.scene:not(.on) .seal,.scene:not(.on) .seal-ring,.scene:not(.on) .seal-orbit{animation-play-state:paused}

/* acceso a administracion: solo el icono de la tuerca */
.cta-foot a.admin-link{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;text-decoration:none;font-size:1.35rem;opacity:.85;transition:transform .6s var(--ease),opacity .3s,background .3s}
.cta-foot a.admin-link:hover{opacity:1;transform:rotate(90deg);background:color-mix(in srgb,currentColor 16%,transparent)}
@media (max-width:620px){
  .car{--cw:min(72vw,300px);--ih:clamp(80px,calc(100dvh - 530px),200px)}
  .car-btn{width:44px;height:44px;font-size:1.1rem}
  #productos .sec-head{margin-bottom:0}
}
@media (min-width:621px) and (max-height:760px){
  #productos .pad{padding-bottom:calc(var(--dockh) + 100px)}
  .car{--ih:clamp(90px,calc(100dvh - 500px),280px)}
  .car .card p{display:none}
}

/* ===== v4: escenas apiladas de arriba a abajo y menu vertical a la izquierda ===== */
:root{--dockh:0px;--rail:48px;--rail-x:clamp(14px,2.2vw,34px)}
.track{flex-direction:column;transform:translate3d(0,calc(var(--cur,0) * -100%),0)}
.scene{padding-left:calc(var(--rail-x) + var(--rail) + 8px)}
.scene.before .pad{transform:translateY(18%);opacity:.15}
.scene.after .pad{transform:translateY(-18%);opacity:.15}
#productos .pad{padding-bottom:104px}
.order{bottom:calc(22px + env(safe-area-inset-bottom))}
.stage{touch-action:none}

.stem{left:var(--rail-x);top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;width:var(--rail);height:min(380px,calc(100dvh - 260px));padding:6px 0;background:none;border:0;box-shadow:none;border-radius:0;color:var(--ink)}
:root[data-theme=dark] .stem{background:none}
.stem[data-scene=pedido]{color:var(--accent-ink)}
.stem-line{left:50%;right:auto;top:30px;bottom:30px;width:3px;height:auto;margin:0 0 0 -1.5px;background:repeating-linear-gradient(180deg,color-mix(in srgb,currentColor 28%,transparent) 0 6px,transparent 6px 12px)}
.stem-fill{transform-origin:50% 0;transform:scaleY(var(--prog,0))}
.stem em{bottom:auto;left:calc(100% + 6px);top:50%;transform:translate(-8px,-50%) rotate(-3deg);color:var(--hl)}
.stem button[aria-current=true] em,.stem button:hover em,.stem button:focus-visible em{transform:translate(0,-50%) rotate(-3deg)}
.stem button[aria-current=true] em{animation:tagtip 3s var(--ease) both}
.stem button[aria-current=true]:hover em{animation:none}
.ico{display:none}
@keyframes tagtip{0%{opacity:0;transform:translate(-8px,-50%) rotate(-3deg)}12%{opacity:1;transform:translate(0,-50%) rotate(-3deg)}70%{opacity:1}100%{opacity:0}}

.wipe i{left:-10%;right:-10%;top:0;bottom:auto;width:auto;height:26vh;border-radius:50% 50% 0 0 / 100% 100% 0 0;transform:translate3d(0,110vh,0)}
.wipe.back{transform:scaleY(-1)}
@keyframes sweep{from{transform:translate3d(0,110vh,0)}to{transform:translate3d(0,-40vh,0)}}

@media (max-width:620px){
  :root{--dockh:0px;--rail:42px;--rail-x:6px}
  .stem{height:min(300px,calc(100dvh - 280px))}
  .stem button{width:40px;height:40px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);color:var(--bosque);box-shadow:0 6px 14px -8px rgba(25,51,31,.5);transition:transform .4s var(--ease),background .3s,color .3s}
  :root[data-theme=dark] .stem button{color:#19331F}
  .stem button .node,.stem button[aria-current=true]::before{display:none}
  .stem .ico{display:block;font-size:1.15rem}
  .stem button.done{color:var(--oliva)}
  .stem button[aria-current=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--paper);transform:scale(1.12)}
  .stem-line{top:24px;bottom:24px}
  .stem button[aria-current=true] em{animation:tagtip 3s var(--ease) both}
  .stem em{font-size:1.3rem}
  #productos .pad{padding-bottom:92px}
}
@media (max-width:620px){
  .polaroids{height:clamp(120px,21dvh,230px)}
  .story h2{font-size:clamp(1.6rem,6.4vw,2rem)}
}

/* tramo recorrido: una enredadera que crece de un punto al otro */
.stem-fill{inset:auto;left:50%;top:0;width:24px;height:calc(var(--prog,0) * 100%);margin-left:-12px;border-radius:0;transform:none;background:var(--oliva);-webkit-mask:url(assets/vine.svg) top center/24px 48px repeat-y;mask:url(assets/vine.svg) top center/24px 48px repeat-y;transition:height 1.2s var(--move)}
.stem[data-scene=pedido] .stem-fill{background:var(--sun)}
.how-row:nth-child(3){margin-left:calc(clamp(0px,20vw,340px) + 5.7rem)}
@media (max-width:620px){.how-row:nth-child(2),.how-row:nth-child(3){margin-left:0}}

/* el punteado solo existe donde la enredadera aun no llego */
.stem-line{background:none}
.stem-line::before{content:'';position:absolute;left:0;right:0;bottom:0;top:calc(var(--prog,0) * 100%);background:repeating-linear-gradient(180deg,color-mix(in srgb,currentColor 28%,transparent) 0 6px,transparent 6px 12px);transition:top 1.2s var(--move)}

.how-row:nth-child(2){margin-left:max(0px,calc(clamp(0px,10vw,170px) - 2.2rem))}
@media (max-width:620px){.how-row:nth-child(2){margin-left:0}}

/* en pantallas tactiles el "hover" queda pegado tras tocar: ahi la etiqueta solo aparece unos segundos al cambiar de seccion */
@media (hover:none){
  .stem button:hover:not([aria-current=true]) em{opacity:0;transform:translate(-8px,-50%) rotate(-3deg)}
  .stem button[aria-current=true]:hover em{animation:tagtip 3s var(--ease) both}
  .stem button:hover:not([aria-current=true]) .node{transform:none}
}

/* quienes somos: las fotos ocupan el espacio que sobra bajo el texto, sea cual sea la pantalla */
@media (max-width:980px) and (min-height:561px){
  .story{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;align-items:start;gap:clamp(14px,3dvh,32px)}
  .story .polaroids{height:100%;max-height:480px;min-height:0;align-self:center;width:100%;max-width:520px}
  .story .pol-a{left:0;top:2%;width:72%;height:68%}
  .story .pol-b{right:0;bottom:0;width:52%;height:52%}
}
@media (max-width:980px) and (max-height:560px){
  .story{grid-template-columns:1fr 1fr;align-items:center;gap:24px}
  .story h2{font-size:clamp(1.5rem,6dvh,2.2rem);margin-bottom:8px}
  .story p{font-size:.95rem;margin-bottom:6px}
  .sign{font-size:1.4rem;margin-top:2px}
  .story .polaroids{height:clamp(170px,62dvh,300px);max-width:none}
}
@media (max-width:620px) and (max-height:720px) and (min-height:561px){
  .story h2{font-size:1.6rem;margin-bottom:8px}
  .story p{font-size:.92rem;line-height:1.45;margin-bottom:6px}
  .sign{font-size:1.35rem}
}
@media (max-width:980px){.pol-a figcaption{text-align:left;padding-left:16px}}