/* ===== Nutry Pro — estilos ===== */
:root{
  --yellow:#FFD400; --yellow-2:#FFE84A; --ink:#141a3d;
  --green:#0FB85E; --green-2:#2CE86E; --red:#FF3B3B; --orange:#FF7A1A; --blue:#2D7DFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:radial-gradient(130% 85% at 50% -8%, var(--yellow-2) 0%, var(--yellow) 52%, #FFB300 100%);
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-2)}

.page{position:relative;min-height:100vh;overflow-x:hidden}

/* blobs animados */
.blob{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:multiply;z-index:0}
.blob-1{top:-12%;right:-22%;width:70vw;height:70vw;max-width:520px;max-height:520px;
  background:radial-gradient(closest-side,rgba(255,122,26,.55),transparent 70%);animation:bg 11s ease-in-out infinite}
.blob-2{bottom:-18%;left:-24%;width:68vw;height:68vw;max-width:500px;max-height:500px;
  background:radial-gradient(closest-side,rgba(45,125,255,.4),transparent 70%);animation:bg2 14s ease-in-out infinite}
.blob-3{top:32%;left:-15%;width:44vw;height:44vw;max-width:300px;max-height:300px;
  background:radial-gradient(closest-side,rgba(15,184,94,.4),transparent 70%);animation:bg 16s ease-in-out infinite reverse}

.wrap{position:relative;z-index:2;width:100%;max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 20px 30px}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:24px}
.brand{display:flex;align-items:center;gap:9px}
.brand-txt{line-height:1;text-align:left}
.brand-name{font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand-sub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;opacity:.65}
.members{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(20,26,61,.12);font-size:12px;font-weight:700}

/* dots */
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.dot-live{animation:live 1.4s ease-in-out infinite}
.dot-y{background:var(--yellow);width:6px;height:6px}
.dot-r{background:var(--red);width:7px;height:7px}

/* hero */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:var(--ink);color:var(--yellow);font-size:11.5px;font-weight:700;letter-spacing:.05em;margin-bottom:16px}
h1{font-size:clamp(34px,11vw,48px);line-height:1;letter-spacing:-.03em;margin-bottom:14px;text-wrap:balance}
.off{display:inline-block;margin-top:4px;
  background:linear-gradient(90deg,var(--green),var(--green-2),var(--orange),var(--green));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 3.2s linear infinite;filter:drop-shadow(0 2px 0 rgba(20,26,61,.15))}
.lead{font-size:16px;line-height:1.45;margin-bottom:20px;max-width:34ch;color:rgba(20,26,61,.8)}

/* selos */
.seals{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.seal{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;
  background:rgba(255,255,255,.6);font-size:12.5px;font-weight:600}
.seal svg{flex:none}

/* cta */
.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:20px 24px;border-radius:16px;color:#fff;font-weight:700;font-size:21px;letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--green-2),var(--green));animation:pulse 2.2s ease-in-out infinite}
.cta:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.cta:active{transform:translateY(1px)}
.cta::before{content:"";position:absolute;top:0;left:-120px;width:80px;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sheen 3s ease-in-out infinite;pointer-events:none}
.cta svg{flex:none}
.cta-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:12.5px;font-weight:600;color:rgba(20,26,61,.72)}

/* ofertas / marquee */
.offers{width:100%;margin-top:28px}
.offers-title{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.track{display:flex;width:max-content;gap:13px;animation:marq 26s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.card{width:160px;flex:none;background:#fff;border-radius:16px;padding:9px;
  box-shadow:0 10px 26px rgba(20,26,61,.18);text-align:left}
.card-img{position:relative;height:122px;border-radius:11px;overflow:hidden;background:#f2f3f7}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.off-tag{position:absolute;top:7px;left:7px;z-index:2;padding:3px 8px;border-radius:8px;
  background:var(--red);color:#fff;font-size:11.5px;font-weight:800}
.card-name{font-size:13.5px;font-weight:600;line-height:1.2;margin-top:9px;min-height:33px}
.card-weight{font-size:11px;color:rgba(20,26,61,.5);margin-top:1px}
.card-price{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.price-old{font-size:11.5px;text-decoration:line-through;color:rgba(20,26,61,.45)}
.price-new{font-weight:800;font-size:19px;color:var(--green)}

/* notificador */
.toast{position:fixed;left:14px;right:14px;bottom:16px;z-index:20;max-width:340px;margin:0 auto;
  display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border-radius:14px;background:#fff;
  box-shadow:0 16px 40px rgba(20,26,61,.3);opacity:0;transform:translateY(22px) scale(.96);pointer-events:none}
.toast.show{animation:toast-in .5s cubic-bezier(.2,.9,.3,1.3) forwards}
.toast-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow-2),var(--yellow));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:var(--ink)}
.toast-badge{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  background:var(--green);border:2.5px solid #fff}
.toast-txt{line-height:1.3;text-align:left;font-size:13.5px}
.toast .muted{color:rgba(20,26,61,.55)}
.toast-sub{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--green);margin-top:1px}

/* entrada animada */
.anim{opacity:0;transform:translateY(26px);animation:rise .6s cubic-bezier(.2,.8,.3,1.1) forwards;animation-delay:var(--d,0s)}

@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px rgba(15,157,88,.4),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 18px 44px rgba(15,157,88,.55),0 0 0 16px rgba(37,211,102,0)}}
@keyframes toast-in{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes bg{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,5%) scale(1.15)}}
@keyframes bg2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-6%) scale(1.2)}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes sheen{0%{transform:translateX(0)}55%,100%{transform:translateX(460px)}}

@media (min-width:520px){ .wrap{padding-top:26px} }