:root{
    /* Colores oficiales del Manual de Identidad */
    --verde:#037A00; --verde-osc:#025C00; --verde-2:#0B8F06; --verde-suave:#E6F2D9;
    --lima:#E2E200; --lima-suave:#F4F4A6;
    --crema:#FFF8E8; --crema-2:#FDF0D3; --blanco:#fff;
    --tinta:#1D2A12; --tinta-suave:#56604A;
    --fresa:#E4202E; --fresa-suave:#FDE3E0;
    --mango:#F39A00; --mango-suave:#FFEBC7;
    --pina:#F2C200; --pina-suave:#FFF3B8;
    --r:24px; --maxw:1180px;
    --shadow:0 20px 40px -24px rgba(29,42,18,.45);
    --disp:"Baloo 2","Amaranth",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--crema); color:var(--tinta);
    font-family:"Amaranth",system-ui,sans-serif; font-size:18px; line-height:1.55;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  h1,h2,h3,h4,.disp{font-family:var(--disp); font-weight:800; line-height:1; margin:0; letter-spacing:-.005em}
  a{color:inherit}
  img{max-width:100%; height:auto; display:block}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em; text-decoration:none;
    font-family:var(--disp); font-weight:700; font-size:1.02rem; letter-spacing:.02em;
    border:none; cursor:pointer; padding:.9em 1.6em; border-radius:100px;
    background:var(--verde); color:#fff; transition:transform .16s ease, box-shadow .16s ease, background .16s;
    box-shadow:0 12px 24px -14px rgba(3,122,0,.9);
  }
  .btn:hover{background:var(--verde-osc); transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .btn--ghost{background:transparent; color:var(--verde); box-shadow:inset 0 0 0 2px var(--verde)}
  .btn--ghost:hover{background:var(--verde); color:#fff}
  .btn--lima{background:var(--lima); color:var(--verde-osc); box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
  .btn--lima:hover{background:#f0f020}
  .pill{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700;
    font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--verde);
    border:1.5px solid #037a0040; border-radius:100px; padding:.45em 1em; background:#fff8;
  }
  .pill svg{width:16px; height:16px}
  :focus-visible{outline:3px solid var(--verde); outline-offset:3px; border-radius:6px}

  /* ---------- TOPBAR + NAV ---------- */
  .topbar{background:var(--verde); color:#fff; font-size:.88rem; text-align:center; padding:7px 16px}
  .topbar b{color:var(--lima); font-weight:700}
  header.nav{
    position:sticky; top:0; z-index:60; background:rgba(255,248,232,.9);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #037a0014;
  }
  .nav-in{display:flex; align-items:center; gap:24px; height:78px}
  .logo{height:50px; width:auto}
  .nav-links{display:flex; gap:32px; margin-left:auto; align-items:center}
  .nav-links a{text-decoration:none; font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--tinta); position:relative; padding:4px 0}
  .nav-links a:hover{color:var(--verde)}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:-3px; height:3px; width:0; background:var(--lima); border-radius:3px; transition:width .2s}
  .nav-links a:hover::after{width:100%}
  .cart-btn{
    display:flex; align-items:center; gap:8px; background:var(--verde); color:#fff; border:none; cursor:pointer;
    padding:.6em 1.1em; border-radius:100px; font-family:var(--disp); font-weight:700; font-size:.98rem;
    box-shadow:0 10px 20px -12px rgba(3,122,0,.9);
  }
  .cart-btn:hover{background:var(--verde-osc)}
  .cart-btn svg{width:20px; height:20px}
  .cart-count{background:var(--lima); color:var(--verde-osc); border-radius:100px; min-width:22px; height:22px; display:inline-grid; place-items:center; font-size:.8rem; padding:0 6px}
  .menu-toggle{display:none}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:56px 0 40px; overflow:hidden}
  .hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:center}
  .hero h1{color:var(--verde); font-size:clamp(3rem,6.6vw,5.4rem); margin:22px 0 0}
  .hero h1 .l1{display:block; font-weight:700}
  .hero h1 .l2{display:flex; align-items:flex-end; gap:.12em}
  .hero h1 .mas{font-size:.42em; font-weight:700; padding-bottom:.22em}
  .hero h1 .nat{position:relative}
  .hero h1 .nat::after{content:""; position:absolute; left:.05em; right:.05em; bottom:-.08em; height:.16em; background:var(--lima); border-radius:1em; z-index:-1}
  .hero p.lead{font-size:1.22rem; max-width:32ch; color:var(--tinta-suave); margin:26px 0 30px}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap}
  .trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:36px}
  .trust div{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; font-size:.9rem; color:var(--verde); line-height:1.15}
  .trust svg{width:34px; height:34px; flex:0 0 auto}

  .stage{position:relative; height:520px}
  .blob{
    position:absolute; left:4%; right:-6%; top:22%; bottom:4%; background:var(--lima);
    border-radius:58% 42% 55% 45% / 48% 60% 40% 52%; transform:rotate(-6deg);
  }
  .pack{
    position:absolute; width:210px; border-radius:18px; overflow:hidden;
    box-shadow:0 30px 40px -22px rgba(29,42,18,.55), 0 0 0 1px #0000000d;
    transition:transform .3s ease;
  }
  .pack img{width:100%; height:auto}
  .pk-fresa{left:6%;  top:12%; --r:-9deg; transform:rotate(var(--r)); animation:float 6s ease-in-out infinite}
  .pk-mango{left:33%; top:22%; --r:1deg;  transform:rotate(var(--r)); z-index:3; width:228px; animation:float 6.8s ease-in-out infinite}
  .pk-pina{left:61%;  top:10%; --r:9deg;  transform:rotate(var(--r)); animation:float 7.4s ease-in-out infinite}
  @keyframes float{50%{transform:rotate(var(--r)) translateY(-14px)}}
  .fr{position:absolute; filter:drop-shadow(0 16px 18px rgba(29,42,18,.28)); z-index:4; pointer-events:none}
  .fr-fresa{width:200px; left:-2%; bottom:0}
  .fr-pina{width:210px; right:-4%; bottom:-2%}
  .leaf{position:absolute; color:var(--verde); z-index:1}

  /* ---------- SECTIONS ---------- */
  section{padding:88px 0}
  .sec-head{text-align:center; max-width:660px; margin:0 auto 48px}
  .sec-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem); color:var(--verde); margin:.35em 0 .3em}
  .sec-head p{color:var(--tinta-suave); margin:0; font-size:1.12rem}
  .eyebrow{font-family:var(--disp); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:var(--verde-2)}

  /* products */
  #productos{background:#fff; border-radius:48px 48px 0 0}
  .prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
  .card{
    --c:var(--verde); --cs:var(--verde-suave);
    background:var(--cs); border-radius:var(--r); padding:0 0 26px; position:relative; overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
  }
  .card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .card.fresa{--c:var(--fresa); --cs:var(--fresa-suave)}
  .card.mango{--c:var(--mango); --cs:var(--mango-suave)}
  .card.pina{--c:var(--pina); --cs:var(--pina-suave)}
  .card-media{position:relative; height:230px; display:grid; place-items:center}
  .card-media::before{content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:var(--c); opacity:.9; top:12px}
  .card-media img{position:relative; max-height:210px; width:auto; max-width:88%; filter:drop-shadow(0 18px 18px rgba(0,0,0,.22))}
  .badge{position:absolute; top:16px; left:16px; z-index:2; width:62px; height:62px}
  .card-body{padding:10px 24px 0; display:flex; flex-direction:column; flex:1}
  .card h3{font-size:1.6rem; color:var(--tinta); line-height:1}
  .card h3 small{display:block; font-size:.62em; font-weight:700; color:var(--tinta-suave); letter-spacing:.06em; margin-top:4px}
  .card .desc{font-size:1rem; color:var(--tinta-suave); margin:10px 0 18px; flex:1}
  .price-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .price{font-family:var(--disp); font-weight:800; font-size:1.7rem; color:var(--tinta)}
  .price small{font-size:.55em; font-weight:700; color:var(--tinta-suave)}
  .add{padding:.75em 1.2em; font-size:.95rem}
  .price .igv{display:block; font-family:"Amaranth",sans-serif; font-size:.42em; font-weight:400; color:var(--tinta-suave); letter-spacing:.02em; margin-top:2px}

  /* momento */
  #momento{background:var(--verde); color:#fff; position:relative; overflow:hidden}
  .mom-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
  .mom-photo{position:relative}
  .mom-photo img{border-radius:32px; width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .sticker{
    position:absolute; right:-26px; top:28px; background:var(--lima); color:var(--verde-osc);
    border-radius:60% 40% 55% 45% / 55% 45% 55% 45%; padding:22px 26px; transform:rotate(-8deg);
    font-family:var(--disp); font-weight:800; line-height:.95; font-size:1.5rem; text-align:left;
    box-shadow:0 18px 30px -16px rgba(0,0,0,.5);
  }
  .sticker small{display:block; font-size:.62em; font-weight:700}
  #momento h2{font-size:clamp(2.2rem,4.6vw,3.3rem); color:#fff}
  #momento h2 em{font-style:normal; color:var(--lima)}
  #momento p{color:#ffffffd9; font-size:1.14rem; max-width:44ch}
  .aud-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
  .aud{background:#ffffff17; border:1px solid #ffffff33; border-radius:100px; padding:.55em 1.1em; font-family:var(--disp); font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px}
  .aud svg{width:18px; height:18px; color:var(--lima)}

  /* process */
  .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
  .step{background:#fff; border-radius:var(--r); padding:34px 28px; box-shadow:var(--shadow); position:relative}
  .step .num{font-family:var(--disp); font-weight:800; font-size:1rem; color:var(--verde-osc); background:var(--lima);
    width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px}
  .step .ic{width:52px; height:52px; color:var(--verde); margin-bottom:12px}
  .step h3{font-size:1.4rem; color:var(--verde); margin-bottom:8px}
  .step p{margin:0; color:var(--tinta-suave); font-size:1rem}
  .step-arrow{position:absolute; right:-22px; top:50%; transform:translateY(-50%); z-index:2; width:32px; height:32px; color:var(--verde)}
  .quote{max-width:760px; margin:44px auto 0; text-align:center; font-family:var(--disp); font-weight:700; font-size:1.4rem; color:var(--verde); line-height:1.3}
  .quote b{background:linear-gradient(transparent 62%, var(--lima) 62%); font-weight:800}

  /* benefits */
  #beneficios{background:#fff}
  .ben-wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:stretch}
  .ben-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .ben{background:var(--crema); border-radius:var(--r); padding:26px 22px}
  .ben svg{width:44px; height:44px; color:var(--verde); margin-bottom:12px}
  .ben h3{font-size:1.2rem; color:var(--verde); margin-bottom:6px}
  .ben p{margin:0; font-size:.98rem; color:var(--tinta-suave)}
  .best{border-radius:var(--r); overflow:hidden; position:relative; background:var(--verde-suave); display:flex; flex-direction:column}
  .best img{width:100%; height:100%; object-fit:cover; flex:1; min-height:280px}
  .best-txt{position:absolute; left:18px; right:18px; bottom:18px; background:#fffffff2; border-radius:18px; padding:20px 22px; backdrop-filter:blur(4px)}
  .best-txt h3{font-size:1.45rem; color:var(--verde); margin-bottom:6px}
  .best-txt p{margin:0; color:var(--tinta-suave); font-size:.98rem}

  /* social */
  .social-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .social-grid a{position:relative; border-radius:var(--r); overflow:hidden; display:block; aspect-ratio:4/5}
  .social-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
  .social-grid a:hover img{transform:scale(1.05)}
  .social-cta{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:30px}

  /* CTA band */
  .cta-band{background:var(--lima); color:var(--verde-osc); border-radius:40px; padding:60px 40px; text-align:center; position:relative; overflow:hidden}
  .cta-band h2{font-size:clamp(2.1rem,4.4vw,3rem); margin-bottom:12px}
  .cta-band p{max-width:46ch; margin:0 auto 28px; font-size:1.14rem; color:var(--verde-osc)}
  .cta-band .leaf{opacity:.18}

  /* footer */
  footer{background:var(--verde); color:#fff; padding:60px 0 30px; margin-top:0}
  .foot-grid{display:flex; flex-wrap:wrap; gap:44px; justify-content:space-between; align-items:flex-start}
  .foot-logo{height:74px; width:auto}
  .foot-slogan{color:#ffffffd0; margin-top:14px; max-width:28ch}
  .foot-col h4{font-size:1.05rem; margin-bottom:14px; color:var(--lima)}
  .foot-col a{display:flex; align-items:center; gap:10px; color:#ffffffd0; text-decoration:none; margin-bottom:11px; font-size:1rem}
  .foot-col a:hover{color:#fff}
  .foot-col svg{width:18px; height:18px; flex:0 0 auto}
  .foot-bottom{border-top:1px solid #ffffff26; margin-top:40px; padding-top:20px; color:#ffffffa0; font-size:.9rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

  /* ---------- CART DRAWER ---------- */
  .overlay{position:fixed; inset:0; background:#1d2a1280; opacity:0; visibility:hidden; transition:.25s; z-index:90}
  .overlay.open{opacity:1; visibility:visible}
  .drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,94vw); background:var(--crema);
    z-index:100; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s; display:flex; flex-direction:column;
    visibility:hidden}
  .drawer.open{transform:translateX(0); visibility:visible; transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
  .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 22px 16px; border-bottom:1px solid #00000012; background:#fff}
  .drawer-head h3{font-size:1.4rem; color:var(--verde)}
  .x{background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--tinta-suave); line-height:1}
  .drawer-body{flex:1; overflow-y:auto; padding:14px 22px}
  .ci{display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #00000010}
  .ci-pouch{width:52px; height:78px; border-radius:8px; flex:0 0 auto; object-fit:cover; box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
  .ci-info{flex:1}
  .ci-info h4{font-size:1.08rem; margin:0; color:var(--tinta)}
  .ci-info small{color:var(--tinta-suave)}
  .qty{display:flex; align-items:center; gap:8px; margin-top:6px}
  .qty button{width:28px; height:28px; border-radius:50%; border:1.5px solid #037a0033; background:#fff; cursor:pointer; font-weight:700; color:var(--verde); font-size:1rem; line-height:1}
  .qty button:hover{border-color:var(--verde)}
  .qty span{font-weight:700; min-width:18px; text-align:center}
  .ci-price{font-family:var(--disp); font-weight:800; color:var(--tinta)}
  .empty{text-align:center; color:var(--tinta-suave); padding:50px 10px}
  .empty svg{width:56px; height:56px; color:var(--verde); opacity:.5; margin:0 auto 10px}
  .drawer-foot{padding:18px 22px 24px; border-top:1px solid #00000012; background:#fff}
  .tot{display:flex; justify-content:space-between; font-family:var(--disp); font-weight:800; font-size:1.35rem; margin-bottom:10px}
  .drawer-foot small{color:var(--tinta-suave); display:block; margin-bottom:14px}
  .btn.wa{background:#25D366; box-shadow:0 10px 22px -12px rgba(37,211,102,.9)}
  .btn.wa:hover{background:#1FB855}
  .wa-float{position:fixed; right:22px; bottom:22px; z-index:80; width:62px; height:62px; border-radius:50%;
    background:#25D366; border:none; cursor:pointer; display:grid; place-items:center; color:#fff;
    box-shadow:0 14px 30px -8px rgba(37,211,102,.7); transition:transform .18s ease}
  .wa-float:hover{transform:scale(1.08)}
  .wa-float svg{width:32px; height:32px}
  .wa-float .pulse{position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.45; animation:pulse 2.2s ease-out infinite; z-index:-1}
  @keyframes pulse{0%{transform:scale(1); opacity:.45}70%{transform:scale(1.7); opacity:0}100%{opacity:0}}

  /* checkout flow */
  .back{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--verde);line-height:1;padding:0 6px 0 0}
  .dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
  .dots i{width:9px;height:9px;border-radius:50%;background:#00000018;transition:.2s}
  .dots i.on{background:var(--verde);transform:scale(1.25)}
  .field{margin-bottom:14px}
  .field label{display:block;font-family:var(--disp);font-weight:700;font-size:.9rem;color:var(--tinta);margin-bottom:5px}
  .field label .req{color:var(--fresa)}
  .field label .opt{color:var(--tinta-suave);font-weight:500;font-size:.8rem}
  .field input,.field select{width:100%;padding:.72em .9em;border:1.5px solid #00000018;border-radius:12px;font-family:"Amaranth",sans-serif;font-size:1rem;background:#fff;color:var(--tinta)}
  .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356604A' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
  .field select:disabled{background-color:#0000000a;color:#0000005a;cursor:not-allowed}
  .field input:focus,.field select:focus{outline:none;border-color:var(--verde)}
  .field input.bad{border-color:var(--fresa);background:#fff7f7}
  .field .msg{display:block;color:#b3202b;font-size:.84rem;margin-top:4px}
  .field .hint{display:block;color:var(--tinta-suave);font-size:.8rem;margin-top:4px}
  .brk{display:flex;justify-content:space-between;font-size:.88rem;color:var(--tinta-suave);line-height:1.5}
  .brk-wrap{border-bottom:1px dashed #00000018;padding-bottom:8px;margin-bottom:8px}
  .tot span{white-space:nowrap}
  .drawer-foot .tot small{display:inline;margin-bottom:0}
  .tot small{font-family:"Amaranth",sans-serif;font-weight:400;font-size:.62em;color:var(--tinta-suave);margin-left:4px}
  .row2{display:flex;gap:12px}
  .row2 .field{flex:1}
  .seg{display:flex;gap:8px;flex-wrap:wrap}
  .seg button{flex:1;min-width:90px;padding:.65em .4em;border:1.5px solid #00000018;border-radius:12px;background:#fff;cursor:pointer;
    font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--tinta-suave);display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
  .seg button .ic{font-size:1.3rem}
  .seg button.sel{border-color:var(--verde);background:var(--verde-suave);color:var(--verde)}
  .paybox{background:var(--verde-suave);border:1px solid #037a0026;border-radius:14px;padding:14px 16px;margin-top:12px}
  .paybox h5{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--verde);margin:0 0 4px}
  .paybox .bank{padding:8px 0;border-bottom:1px dashed #037a0033}
  .paybox .bank:last-child{border-bottom:none}
  .paybox .bname{font-weight:700;font-size:.95rem;color:var(--tinta)}
  .payrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.92rem;margin-top:3px}
  .payrow span{color:var(--tinta-suave)}
  .payrow b{font-weight:700;color:var(--tinta);letter-spacing:.01em}
  .copy{background:#fff;border:1px solid #037a0033;border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--verde);padding:3px 9px;font-family:inherit}
  .copy:hover{background:var(--verde);color:#fff}
  .voucher{display:flex;align-items:center;gap:10px;border:1.5px dashed #00000026;border-radius:12px;padding:12px;margin-top:4px;cursor:pointer;color:var(--tinta-suave);font-size:.95rem}
  .voucher:hover{border-color:var(--verde)}
  .voucher.has{border-style:solid;border-color:var(--verde);color:var(--verde);font-weight:700}
  .reminder{background:var(--lima-suave);border:1px solid #c9c90055;border-radius:12px;padding:11px 13px;margin-top:12px;font-size:.9rem;color:var(--verde-osc)}
  .ferr{background:#fdecee;border:1px solid #E4202E44;color:#a52738;border-radius:10px;padding:9px 12px;font-size:.9rem;font-weight:700;margin-bottom:12px}
  .paynote{font-size:.86rem;color:var(--tinta-suave);margin-top:10px;text-align:center}
  .thanks{text-align:center;padding:34px 8px}
  .thanks .big{font-size:3rem;margin-bottom:6px}
  .thanks h4{font-size:1.7rem;color:var(--verde);margin:0 0 12px}
  .thanks p{color:var(--tinta-suave);margin:0 0 16px;font-size:1.02rem}
  .thanks .resend{font-size:.9rem}
  .thanks a{color:var(--verde);font-weight:700;cursor:pointer;text-decoration:underline}

  /* reveal */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr; gap:0}
    .stage{height:420px; margin-top:26px}
    .pack{width:160px}
    .pk-mango{width:176px; left:32%}
    .fr-fresa{width:150px}
    .fr-pina{width:150px}
    .hero p.lead{max-width:none}
    .prod-grid{gap:16px}
    .card-body{padding:10px 18px 0}
    .card-media::before{width:170px;height:170px;top:24px}
    .card-media img{max-height:180px}
    .price-row{flex-wrap:wrap}
    .mom-grid{grid-template-columns:1fr; gap:40px}
    .mom-photo{max-width:440px}
    .steps-grid{grid-template-columns:1fr}
    .step-arrow{display:none}
    .ben-wrap{grid-template-columns:1fr}
    .nav-links{display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:flex-start; background:var(--crema); padding:20px 24px; gap:18px; border-bottom:1px solid #00000012}
    .nav-links.show{display:flex}
    .menu-toggle{display:block; margin-left:auto; background:none; border:none; cursor:pointer; padding:6px}
    .menu-toggle span{display:block; width:26px; height:3px; background:var(--verde); border-radius:3px; margin:5px 0}
    .cart-btn{margin-left:4px}
  }
  @media(max-width:720px){
    .prod-grid{grid-template-columns:1fr; max-width:400px; margin:0 auto}
  }
  @media(max-width:600px){
    body{font-size:17px}
    .wrap{padding:0 16px}
    .topbar{font-size:.8rem}
    .logo{height:42px}
    .cart-btn .lbl{display:none}
    .hero{padding-top:34px}
    .stage{height:330px}
    .pack{width:120px; border-radius:12px}
    .pk-fresa{left:2%}
    .pk-mango{width:134px; left:31%}
    .pk-pina{left:62%}
    .fr-fresa{width:110px; left:-4%}
    .fr-pina{width:116px; right:-6%}
    .trust{gap:16px}
    .ben-grid{grid-template-columns:1fr}
    .social-grid{grid-template-columns:1fr 1fr}
    .social-grid a:last-child{display:none}
    section{padding:64px 0}
    #productos{border-radius:32px 32px 0 0}
    .sticker{right:-6px; font-size:1.2rem; padding:16px 20px}
    .cta-band{padding:44px 22px; border-radius:28px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important; scroll-behavior:auto!important}
    .reveal{opacity:1; transform:none}
  }