:root{--ink:#0b2416;--ink-2:#44574a;--teal:#1e5631;--teal-d:#133b21;--aqua:#f5c518;--line:#dbe8dc;--ease:cubic-bezier(0.23,1,0.32,1);--n:5}
/* ---------- BARRA DE PESTAÑAS (móvil) ---------- */
.tabbar { display: none; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 66px; padding: 6px; border-radius: 33px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 12px 32px -12px rgba(11, 36, 22, .4), inset 0 1px 0 rgba(255, 255, 255, .9); }
.tab-ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n, 5)); border-radius: 27px; background: rgba(11, 36, 22, .08); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s cubic-bezier(.34, 1.3, .64, 1); }
.tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; border-radius: 27px; color: var(--ink-2); text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; -webkit-user-select: none; user-select: none; transition: color .2s ease, transform .15s ease-out; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="true"] { color: var(--teal-d); }
.tab:active { transform: scale(.92); }
.dots { display: none; justify-content: center; gap: 8px; margin-top: 4px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: #bcd3bf; transition: background-color .25s ease, transform .25s var(--ease); }
.dots span.on { background: var(--ink); transform: scale(1.15); }

/* ---------- VENTANA DE WHATSAPP ---------- */
html.sheet-open { overflow: hidden; }
dialog.wa { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.wa[open] { display: flex; align-items: center; justify-content: center; }
dialog.wa::backdrop { background: transparent; }
.wa .scrim { position: absolute; inset: 0; background: rgba(11, 36, 22, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; }
.wa .sheet { position: relative; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: hidden auto; border-radius: 32px; background: #fff; box-shadow: 0 40px 80px -30px rgba(11, 36, 22, .6); will-change: transform, opacity; overscroll-behavior: contain; }
.wa .drag { touch-action: none; -webkit-user-select: none; user-select: none; }
.wa .grab { display: none; justify-content: center; padding: 10px 0 0; }
.wa .grab span { width: 40px; height: 5px; border-radius: 3px; background: #c3d6c6; }
.wa .x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(11, 36, 22, .07); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, transform .15s ease-out; }
.wa .x:active { transform: scale(.92); background: rgba(11, 36, 22, .14); }
.wa .art { position: relative; background: #fcfcfc; }
.wa .art-video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #fcfcfc; }
.wa .art-video[hidden] { display: none; }
.wa .art-anim { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #fcfcfc; -webkit-user-select: none; user-select: none; }
.wa .art-anim[hidden] { display: none; }
.wa .art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.wa .art-fb { padding: 20px 16px 0; background: linear-gradient(#eaf6ee, #fff); }
.wa .art-fb[hidden] { display: none; }
.wa .art svg { display: block; width: 100%; height: auto; }
.wa-body { padding: 10px 28px calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.wa-body h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; }
.wa-body .d { margin-top: 10px; color: var(--ink-2); font-size: 1.0625rem; }
.wa-body .btn { width: 100%; margin-top: 22px; min-height: 56px; }
.wa-body .fine { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 700px) {
  dialog.wa[open] { align-items: flex-end; }
  .wa .sheet { width: 100%; max-height: 94dvh; border-radius: 32px 32px 0 0; }
  .wa .grab { display: flex; }
  .wa .x { top: 14px; }
}
/* ---------- PANTALLA DE CARGA: ASPIRADORA ---------- */
html.loading { overflow: hidden; }
#loader { position: fixed; inset: 0; z-index: 200; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: #0b2416; color: #fff; transition: transform .55s cubic-bezier(.77, 0, .175, 1); will-change: transform; }
#loader.out { transform: translateY(-105%); }
#loader > :not(.bubbles):not(.ld-wave) { position: relative; z-index: 1; }
.ld-art { width: min(380px, 88vw); height: auto; display: block; }
.ld-t { font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.ld-dots i { font-style: normal; display: inline-block; animation: ldDot 1.2s ease-in-out infinite; }
.ld-dots i:nth-child(2) { animation-delay: .15s; } .ld-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ldDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.ld-bar { width: min(260px, 70vw); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ld-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2f8450, #f5c518); transform: scaleX(.04); transform-origin: left; transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
#loader .ld-wave { position: absolute; left: 0; right: 0; top: 100%; height: 56px; overflow: hidden; color: #0b2416; transform: scaleY(-1); z-index: 0; }
#loader .ld-wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: wv 6s linear infinite; }

/* ======== Vivero: paleta y piezas propias sobre la base de AYRO CLEAN ======== */
.sec{padding-block:clamp(64px,10vw,120px)}
.sec-title{font-size:clamp(2rem,1.2rem + 3vw,3.25rem);line-height:1.05;letter-spacing:-.03em}
.sec-lead{margin-top:var(--espacio-3);color:var(--ink-2);max-width:34em}
.navegacion--pills ul{display:flex;gap:2px;padding:4px;border-radius:999px;background:#e4efe4;overflow-x:auto;max-width:100%;scrollbar-width:none}
.navegacion--pills a{white-space:nowrap}
.navegacion a[aria-current="true"]{background:var(--ink);color:#fff}
.boton,.fab,.navegacion a,.tab,.wa-chip{position:relative;overflow:hidden}
.rip{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s var(--ease) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
.pop{position:fixed;z-index:300;pointer-events:none;width:var(--s);height:calc(var(--s)*1.5);margin:calc(var(--s)*-.75) 0 0 calc(var(--s)*-.5);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c);animation:pop .8s var(--ease) forwards}
@keyframes pop{from{transform:translate(0,0) rotate(0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1);opacity:0}}

/* Videos de "Nosotros" */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--espacio-5);margin-top:var(--espacio-6)}
.val{background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--sombra)}
.val-art{position:relative;aspect-ratio:16/10;background:#eaf6ee}
.val-vid,.val-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.val-vid[hidden],.val-img[hidden]{display:none}
.val h3{margin:var(--espacio-4) var(--espacio-5) var(--espacio-2);font-size:var(--texto-xl)}
.val p{margin:0 var(--espacio-5) var(--espacio-5);color:var(--ink-2)}
.contacto{background:var(--ink);color:#fff;text-align:center}
.contacto .sec-lead{margin-inline:auto;color:#cfe3c9}
.contacto .boton{margin-top:var(--espacio-5);min-height:56px}

/* Botón flotante y hoja de WhatsApp */
.fab{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:25;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--aqua);color:var(--ink);box-shadow:0 2px 4px rgb(11 36 22/.18),0 16px 28px -10px rgb(11 36 22/.5);transition:transform .2s var(--ease)}
.fab:active{transform:scale(.94)}
.wa-body textarea{width:100%;margin-top:18px;min-height:76px;padding:12px 14px;border:2px solid #9bb09f;border-radius:16px;background:#fff;color:var(--ink);font:inherit;resize:none;text-align:left}
.wa-body textarea:focus-visible{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgb(30 86 49/.25)}
.wa-chips{display:flex;gap:8px;margin:12px -28px 0;padding:0 28px 4px;overflow-x:auto;scrollbar-width:none}
.wa-chip{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.wa-chip:active{transform:scale(.96)}
.wa-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;text-decoration:none}
.wa .art-video,.wa .art-anim{background:#eaf6ee}.wa .art::after{height:26px}

/* Pantalla de carga: una regadera que va sembrando */
#loader .ld-bar span{background:linear-gradient(90deg,#2f8450,#f5c518)}
@keyframes wv{to{transform:translateX(-50%)}}
.ld-vac{animation:ldMove 2.6s ease-in-out infinite}
@keyframes ldMove{0%{transform:translateX(60px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(292px);opacity:0}}
.ld-clean{transform-box:fill-box;transform-origin:left center;animation:ldClean 2.6s ease-in-out infinite}
@keyframes ldClean{0%{transform:scaleX(.275);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:scaleX(1);opacity:0}}
.ld-s{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);animation:var(--k) 2.6s ease-out infinite}
.ld-b{transform-box:fill-box;opacity:0;animation:ldBub .9s ease-in infinite;animation-delay:var(--d)}
@keyframes ldBub{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(8px,50px);opacity:0}}
#loader .carga__luciernagas{position:absolute;inset:0;pointer-events:none;z-index:0}
.ld-msg{display:inline}
@media (prefers-reduced-motion:reduce){.ld-vac{animation:none;transform:translateX(176px)}.ld-clean{animation:none;transform:scaleX(.62)}.ld-s{animation:none;transform:scale(1)}.ld-b,#loader .ld-wave svg{animation:none}}

/* ======== Interfaz móvil: pestañas abajo, como en AYRO CLEAN ======== */
@media (max-width:960px){
 :root{--tab-space:calc(98px + env(safe-area-inset-bottom,0px))}
 .tabbar{display:flex}.fab{display:none}
 html.tab-on .navegacion{display:none}
 .pie{padding-bottom:var(--tab-space)}
 .vals{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*var(--espacio-4));padding:4px var(--espacio-4) 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .vals::-webkit-scrollbar{display:none}.val{flex:0 0 82%;max-width:360px;scroll-snap-align:start}
 .contacto .boton{width:100%}
}
@media (max-width:700px){.wa-body h2{font-size:28px}}
@media (prefers-reduced-transparency:reduce){.tabbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.wa .scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(11 36 22/.6)}}
@keyframes ldS0{0%,15.0%{transform:scale(0)}23.0%{transform:scale(1.15)}28.0%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes ldS1{0%,29.6%{transform:scale(0)}37.6%{transform:scale(1.15)}42.6%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes ldS2{0%,44.2%{transform:scale(0)}52.2%{transform:scale(1.15)}57.2%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes ldS3{0%,58.8%{transform:scale(0)}66.8%{transform:scale(1.15)}71.8%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes ldS4{0%,73.3%{transform:scale(0)}81.3%{transform:scale(1.15)}86.3%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes ldS5{0%,87.9%{transform:scale(0)}95.9%{transform:scale(1.15)}100.9%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
.tab span{font-size:10.5px;letter-spacing:0;white-space:nowrap}

/* ======== Cargas distintas: cada pantalla avanza con su propio progreso (--p) ======== */
html{scrollbar-gutter:stable}
#loader{--p:0}
#loader .ld-bar span{transform:scaleX(var(--p));transition:none}
.ld-pb{display:flex;gap:10px;height:34px;align-items:center}
.ld-pb i{width:22px;height:32px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#f4a9c6;--on:clamp(0,calc(var(--p)*5 - var(--i)),1);transform:scale(calc(.55 + .45*var(--on)));opacity:calc(.28 + .72*var(--on))}
.ld-pb i:nth-child(2n){background:#e2525f}.ld-pb i:nth-child(3n){background:#f5c518}
.ld-ticks{display:flex;gap:5px}
.ld-ticks i{width:20px;height:10px;border-radius:3px;background:#8fd19e;opacity:calc(.18 + .82*clamp(0,calc(var(--p)*10 - var(--i)),1))}
.ld-num{margin:0;color:#cfe3c9;font-size:15px;font-variant-numeric:tabular-nums}
.b-tallo{stroke-dasharray:1;stroke-dashoffset:calc(1 - min(var(--p)*1.15,1))}
.b-h,.b-fl,.e-p,.r-trail,.g-l,.g-r{transform-box:fill-box}
.b-hi{transform-origin:100% 100%;transform:scale(clamp(0,calc(var(--p)*2.4 - .6),1))}
.b-hd{transform-origin:0 100%;transform:scale(clamp(0,calc(var(--p)*2.4 - .9),1))}
.b-fl{transform-origin:50% 50%;transform:scale(clamp(0,calc(var(--p)*3.2 - 1.9),1)) rotate(calc(var(--p)*50deg))}
.e-p{transform-origin:50% 100%;transform:scale(clamp(0,calc(var(--p)*7 - var(--i)),1))}
.r-cart{transform:translateX(calc(var(--p)*230px))}
.r-trail{transform-origin:left center;transform:scaleX(var(--p))}
.r-w{transform-box:fill-box;transform-origin:center;animation:ldSpin .6s linear infinite}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.g-l{transform-origin:left center;transform:scaleX(calc(1 - var(--p)*.9))}
.g-r{transform-origin:right center;transform:scaleX(calc(1 - var(--p)*.9))}
.g-sun{transform:translateY(calc((1 - var(--p))*80px))}
@media (prefers-reduced-motion:reduce){.r-w{animation:none}}

/* Rosas que caen en cada clic */
.rosa{position:fixed;z-index:300;pointer-events:none;background:center/contain no-repeat;will-change:transform,opacity}

/* Salida de página: se oscurece al color de la pantalla de carga que sigue, sin destello blanco */
html.saliendo{background:#0b2416}
html.saliendo body{opacity:0;transition:opacity .16s ease-out}
@media (prefers-reduced-motion:reduce){html.saliendo body{transition:none}}

/* Regadera de la carga "siembra": ahora avanza con el mismo progreso (--p) que la barra, a la misma velocidad */
.ld-vac{animation:none;transform:translateX(calc(60px + var(--p)*232px));opacity:min(clamp(0,calc(var(--p)*14),1),clamp(0,calc((1 - var(--p))*14),1))}
.ld-clean{animation:none;opacity:1;transform:scaleX(calc(.125 + .875*var(--p)))}
.ld-s{animation:none;transform:scale(clamp(0,calc((var(--p) - var(--t,.08))*9),1))}
.ld-s[style*="ldS0"]{--t:.08}.ld-s[style*="ldS1"]{--t:.21}.ld-s[style*="ldS2"]{--t:.34}
.ld-s[style*="ldS3"]{--t:.47}.ld-s[style*="ldS4"]{--t:.6}.ld-s[style*="ldS5"]{--t:.73}