/* ============================================================
   GRAN PET | estilo premium (tema claro)
   Paleta: verde-limão + vermelho-coral sobre branco
   ============================================================ */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F7F0;      /* seção clara verde-acinzentada */
  --surface-3:#FCF3EF;      /* seção clara quente (vermelho) */
  --ink:#243024;
  --ink-2:#2C312A;
  --muted:#68715F;
  --line:#E7EADF;
  --line-2:#EEF0E7;
  --green:#68BE36;
  --green-strong:#4E9622;
  --green-tint:#E9F5DB;
  --green-tint-2:#F1F8E7;
  --red:#E8412E;
  --red-strong:#CE3421;
  --red-tint:#FCE5E0;
  --red-tint-2:#FDEFEB;
  --gold:#B98A3E;
  --shadow-sm:0 1px 2px rgba(36,48,36,.05), 0 2px 8px rgba(36,48,36,.05);
  --shadow-md:0 10px 28px rgba(36,48,36,.09), 0 2px 6px rgba(36,48,36,.05);
  --shadow-lg:0 26px 64px rgba(36,55,32,.16);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%20viewBox%3D%270%200%20300%20300%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23D7DECB%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2834%2C44%29%20rotate%28-12%29%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2719%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2728%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cpath%20d%3D%27M14%2014c-6%200-10%204-10%208%200%204%204%206%2010%206s10-2%2010-6c0-4-4-8-10-8z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28168%2C34%29%20rotate%2814%29%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274.5%27%20width%3D%2723%27%20height%3D%276%27%20rx%3D%273%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28214%2C150%29%20rotate%2822%29%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2719%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2728%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cpath%20d%3D%27M14%2014c-6%200-10%204-10%208%200%204%204%206%2010%206s10-2%2010-6c0-4-4-8-10-8z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2858%2C150%29%20rotate%28-8%29%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274.5%27%20width%3D%2723%27%20height%3D%276%27%20rx%3D%273%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28120%2C232%29%20rotate%288%29%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%279%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2719%27%20cy%3D%271%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cellipse%20cx%3D%2728%27%20cy%3D%278%27%20rx%3D%274%27%20ry%3D%275%27%2F%3E%3Cpath%20d%3D%27M14%2014c-6%200-10%204-10%208%200%204%204%206%2010%206s10-2%2010-6c0-4-4-8-10-8z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28232%2C238%29%20rotate%28-18%29%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%274%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2711%27%20r%3D%274.5%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274.5%27%20width%3D%2723%27%20height%3D%276%27%20rx%3D%273%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat;background-size:300px 300px;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Fraunces","Georgia",serif;font-weight:600;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green-strong);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);border-radius:2px}
section{position:relative}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:"Manrope";font-weight:700;font-size:1rem;
  padding:.95rem 1.6rem;border-radius:100px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;letter-spacing:.01em;line-height:1}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(232,65,46,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,65,46,.36)}
.btn-green{background:var(--green);color:#12300a;box-shadow:0 8px 20px rgba(104,190,54,.3)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(104,190,54,.4)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-strong);transform:translateY(-2px)}
.btn-lg{padding:1.1rem 2rem;font-size:1.06rem}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s}
header.scrolled{border-color:var(--line);background:rgba(255,255,255,.94);box-shadow:0 6px 20px rgba(36,48,36,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:700;font-size:.98rem;color:var(--muted);transition:color .2s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--green);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:1rem}
.menu-btn{display:none;background:#fff;border:1.5px solid var(--line);border-radius:12px;width:46px;height:46px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;gap:.15rem;padding:.5rem 0 1.25rem;background:#fff;border-bottom:1px solid var(--line)}
.mobile-menu a{padding:.85rem clamp(20px,5vw,48px);font-weight:700;color:var(--ink)}
.mobile-menu .btn{margin:.75rem clamp(20px,5vw,48px) 0;justify-content:center}

/* ---------- HERO ---------- */
.hero{padding:clamp(44px,6vw,88px) 0 clamp(40px,6vw,72px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero-logo{height:66px;width:auto;margin-bottom:1.3rem}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.025em;margin:1rem 0 0}
.hero h1 .hl{color:var(--green-strong);font-style:italic;font-weight:500}
.hero h1 .hlr{color:var(--red-strong);font-style:italic;font-weight:500}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.26rem);color:var(--muted);max-width:36ch;margin:1.4rem 0 2rem;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.5rem .95rem .5rem .6rem;font-size:.86rem;font-weight:700;box-shadow:var(--shadow-sm)}
.chip .dot{width:26px;height:26px;border-radius:50%;background:var(--green-tint);color:var(--green-strong);display:grid;place-items:center;flex:none}
.chip .dot svg{width:15px;height:15px}
.chip .dot.r{background:var(--red-tint);color:var(--red-strong)}

.hero-visual{position:relative}
.blob{position:absolute;z-index:0;width:82%;aspect-ratio:1;pointer-events:none}
.blob-g{background:var(--green);top:-10%;left:-14%;border-radius:63% 37% 54% 46%/57% 43% 57% 43%;transform:rotate(-6deg);opacity:.92}
.blob-r{background:var(--red);bottom:-12%;right:-13%;border-radius:44% 56% 41% 59%/52% 46% 54% 48%;transform:rotate(8deg);opacity:.92}
.hero-photo{position:relative;z-index:1;aspect-ratio:3/2;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-logo-badge{position:absolute;z-index:3;top:14px;left:14px;background:#fff;border-radius:16px;padding:.55rem .8rem;box-shadow:var(--shadow-md)}
.hero-logo-badge img{height:34px;width:auto}
.hero-badge{position:absolute;z-index:3;bottom:-20px;left:-20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.1rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.8rem;max-width:225px}
.hero-badge .big{font-family:"Fraunces";font-size:2rem;font-weight:700;color:var(--green-strong);line-height:1;font-variant-numeric:tabular-nums}
.hero-badge .lbl{font-size:.78rem;color:var(--muted);font-weight:700;line-height:1.3}
.hero-badge2{position:absolute;z-index:3;top:22px;right:-16px;background:var(--red);color:#fff;border-radius:var(--r-md);padding:.65rem 1rem;box-shadow:var(--shadow-md);font-weight:800;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transform:rotate(4deg)}
.hero-badge2 svg{width:18px;height:18px}

/* ---------- FAIXA DE MARCAS ---------- */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.35rem clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.05rem;justify-content:center;background:#fff}
.brands .lbl{font-size:.8rem;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;margin-right:.3rem}
.brands .pill{display:inline-flex;align-items:center;gap:.45rem;font-family:"Fraunces";font-weight:600;font-size:1.02rem;color:var(--ink);border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:.4rem 1rem}
.brands .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.brands .pill.r::before{background:var(--red)}

/* ---------- SEÇÃO ---------- */
.sec{padding:clamp(56px,8vw,108px) 0}
.sec.tint{background:var(--surface-2)}
.sec-head{max-width:56ch}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem);margin:1rem 0 0}
.sec-head .lead{color:var(--muted);font-size:clamp(1.02rem,1.4vw,1.18rem);margin-top:1rem;line-height:1.55}

/* ---------- COMPARATIVO ---------- */
.compare{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:1.15fr 1.35fr 1.15fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.col{display:flex;flex-direction:column}
.col-head{padding:1.5rem 1.6rem;border-bottom:1px solid var(--line)}
.col-head .k{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.col-head .n{font-family:"Fraunces";font-size:1.32rem;font-weight:600;margin-top:.3rem}
.col.gp{background:linear-gradient(180deg,var(--green-tint),transparent 42%);position:relative;outline:2px solid var(--green);outline-offset:-2px;border-radius:var(--r-lg);z-index:1}
.col.gp .col-head{border-color:rgba(104,190,54,.35)}
.col.gp .n{color:var(--green-strong)}
.col.gp .tag{position:absolute;top:0;right:0;background:var(--green);color:#12300a;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:0 0 0 12px}
.cell{padding:1.2rem 1.6rem;border-bottom:1px solid var(--line);min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.cell:last-child{border-bottom:none}
.crit .cell{background:var(--surface-2)}
.crit .cell .cl{font-weight:800;font-size:1rem}
.crit .cell .cs{font-size:.82rem;color:var(--muted)}
.cell .val{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.02rem}
.cell .val .num{font-family:"Fraunces";font-size:1.5rem;color:var(--green-strong);font-variant-numeric:tabular-nums}
.cell .sub{font-size:.83rem;color:var(--muted);font-weight:600}
.yes,.no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}
.yes{background:var(--green-tint);color:var(--green-strong)}
.no{background:#F0EDE4;color:#9A9384}
.yes svg,.no svg{width:14px;height:14px}
.col:not(.gp) .cell .val{color:var(--muted);font-weight:700}
.mlabel{display:none;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.compare-note{margin-top:1.1rem;font-size:.85rem;color:var(--muted);display:flex;gap:.5rem;align-items:flex-start}
.compare-note svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--green-strong)}

/* ---------- RAÇÕES EM DESTAQUE ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:clamp(36px,5vw,56px)}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.1rem 1.3rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;overflow:hidden}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green)}
.pcard .ph{position:relative;aspect-ratio:1/1;width:100%;border-radius:var(--r-md);background:radial-gradient(120% 100% at 50% 0%,var(--surface-2),#fff 80%);display:flex;align-items:center;justify-content:center;padding:.5rem;overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 14px 20px rgba(36,48,36,.18))}
.pcard-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tag-species{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);padding:.3rem .7rem;border-radius:100px}
.tag-species svg{width:13px;height:13px;color:var(--green-strong)}
.tag-prot{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--red-tint);color:var(--red-strong);padding:.3rem .7rem;border-radius:100px}
.pcard .species{position:absolute;top:.6rem;left:.6rem;z-index:3;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#fff;border:1px solid var(--line);color:var(--muted);padding:.28rem .6rem;border-radius:100px;display:inline-flex;align-items:center;gap:.35rem}
.pcard .species svg{width:13px;height:13px}
.pcard .hot{position:absolute;top:.6rem;right:.6rem;z-index:3;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--red);color:#fff;padding:.28rem .6rem;border-radius:100px}
.pcard .brandname{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green-strong);margin:.6rem 0 .2rem}
.pcard h3{font-family:"Fraunces";font-size:1.18rem;font-weight:600;line-height:1.15}
.pcard .meta{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.pcard .tagw{font-size:.78rem;font-weight:700;color:var(--ink);background:var(--surface-2);border-radius:100px;padding:.25rem .65rem}
.prod-cta{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}

/* ---------- LOJAS ---------- */
.stores-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.city-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:2rem}
.city{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.7rem 1.1rem;font-weight:700;font-size:.96rem;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.city:hover{transform:translateX(3px);border-color:var(--green);box-shadow:var(--shadow-sm)}
.city .pin{width:26px;height:26px;border-radius:50%;background:var(--red-tint);color:var(--red-strong);display:grid;place-items:center;flex:none}
.city .pin svg{width:15px;height:15px}
.stores-side>.btn{margin-top:2rem}
.map-card{position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff;background:
  radial-gradient(120% 90% at 15% 0%,var(--green-tint),transparent 55%),
  radial-gradient(120% 90% at 100% 100%,var(--red-tint),transparent 52%),#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:.6rem}
.map-card svg.mapart{width:74%;max-width:320px;height:auto}
.map-card .mt{font-family:"Fraunces";font-size:1.3rem;color:var(--ink);font-weight:600;max-width:22ch}
.map-card .md{font-size:.9rem;color:var(--muted);max-width:26ch}
.count-chip{display:inline-flex;align-items:baseline;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;box-shadow:var(--shadow-sm);font-weight:700;font-size:.9rem;margin-bottom:.6rem}
.count-chip b{font-family:"Fraunces";font-size:1.3rem;color:var(--red-strong)}

/* ---------- DEPOIMENTOS ---------- */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:clamp(36px,5vw,56px)}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1.1rem;transition:transform .25s var(--ease),box-shadow .25s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.stars{display:flex;gap:.15rem;color:#F5A623}
.stars svg{width:18px;height:18px}
.tcard blockquote{margin:0;font-family:"Fraunces";font-size:1.16rem;line-height:1.5;font-weight:500;color:var(--ink)}
.tcard .who{display:flex;align-items:center;gap:.85rem;margin-top:auto}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--green-tint);color:var(--green-strong);display:grid;place-items:center;font-family:"Fraunces";font-weight:700;font-size:1.1rem;flex:none}
.who .nm{font-weight:800;font-size:.98rem}
.who .ct{font-size:.84rem;color:var(--muted)}
.prod-tag{align-self:flex-start;font-size:.74rem;font-weight:800;letter-spacing:.04em;background:var(--red-tint);color:var(--red-strong);padding:.3rem .7rem;border-radius:100px}

/* ---------- BANNER CTA ---------- */
.banner .wrap{position:relative}
.banner-card{position:relative;overflow:hidden;border-radius:var(--r-xl);background:
  radial-gradient(80% 140% at 0% 0%,var(--green-tint) 0%,transparent 55%),
  radial-gradient(80% 140% at 100% 100%,var(--red-tint) 0%,transparent 55%),#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:clamp(44px,6vw,76px) clamp(28px,5vw,60px)}
.banner-card .b-copy h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch;margin:1rem auto 0}
.banner-card .b-copy h2 .hl{color:var(--green-strong);font-style:italic;font-weight:500}
.banner-card .b-copy h2 .hlr{color:var(--red-strong);font-style:italic;font-weight:500}
.banner-card .b-copy .btn{margin-top:1.9rem}
.banner-blob{position:absolute;inset:auto -50px -70px auto;width:240px;height:240px;background:var(--green);opacity:.1;border-radius:50% 50% 44% 56%/56% 44% 56% 44%;pointer-events:none}
.banner-blob.two{inset:-70px auto auto -50px;background:var(--red);opacity:.09}

/* ---------- RODAPÉ ---------- */
footer{background:var(--surface-2);border-top:1px solid var(--line);padding:clamp(48px,6vw,78px) 0 2rem;color:var(--ink)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot-brand img{height:52px;width:auto;margin-bottom:1.1rem}
.foot-brand p{color:var(--muted);font-size:.94rem;max-width:34ch;line-height:1.6}
.foot-col h4{font-family:"Manrope";font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot-col a{color:var(--ink);font-size:.95rem;font-weight:600;opacity:.9;transition:opacity .2s,color .2s}
.foot-col a:hover{opacity:1;color:var(--green-strong)}
.foot-cities{display:flex;flex-wrap:wrap;gap:.4rem}
.foot-cities span{font-size:.82rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:.28rem .62rem;border-radius:100px}
.foot-bottom{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;color:var(--muted);font-size:.85rem}
.social{display:flex;gap:.6rem}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.social a:hover{background:var(--green);border-color:var(--green);color:#12300a}
.social svg{width:18px;height:18px}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- RESPONSIVO ---------- */
@media (max-width:940px){
  .nav-links,.nav-cta .btn{display:none}
  .menu-btn{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;gap:3.5rem}
  .hero-visual{max-width:460px;margin:0 auto}
  .compare{grid-template-columns:1fr}
  .col.gp{order:-1}
  .crit{display:none}
  .cell{min-height:auto}
  .col:not(.crit) .cell .mlabel{display:block}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .stores-grid{grid-template-columns:1fr}
  .map-card{max-width:480px}
  .tgrid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:560px){
  .city-list{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-badge{left:0;bottom:-14px}
  .hero-badge2{right:0}
  .brands .lbl{width:100%;text-align:center;margin:0 0 .2rem}
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.page-hero{padding:clamp(48px,6vw,86px) 0 clamp(28px,4vw,44px);position:relative;overflow:hidden;background:
  radial-gradient(70% 130% at 0% 0%,var(--green-tint) 0%,transparent 55%),
  radial-gradient(70% 130% at 100% 0%,var(--red-tint) 0%,transparent 52%)}
.page-hero .crumb{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:1rem}
.page-hero .crumb a{color:var(--green-strong)}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.02em;max-width:20ch}
.page-hero h1 .hl{color:var(--green-strong);font-style:italic;font-weight:500}
.page-hero h1 .hlr{color:var(--red-strong);font-style:italic;font-weight:500}
.page-hero .lead{color:var(--muted);font-size:clamp(1.04rem,1.5vw,1.24rem);max-width:60ch;margin-top:1.2rem;line-height:1.55}

/* filtros do catálogo */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 clamp(28px,4vw,40px)}
.filter{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;color:var(--muted);background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:.6rem 1.2rem;cursor:pointer;transition:all .2s var(--ease)}
.filter svg{width:16px;height:16px}
.filter:hover{border-color:var(--green);color:var(--ink)}
.filter.active{background:var(--green);border-color:var(--green);color:#12300a}
.pcard[hidden]{display:none}
.cat-count{font-size:.9rem;color:var(--muted);font-weight:600;margin:-.5rem 0 1.5rem}

/* diferenciais */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:clamp(36px,5vw,56px)}
.diff-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s}
.diff-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.diff-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.1rem}
.diff-ico svg{width:26px;height:26px}
.diff-ico.g{background:var(--green-tint);color:var(--green-strong)}
.diff-ico.r{background:var(--red-tint);color:var(--red-strong)}
.diff-card h3{font-family:"Fraunces";font-size:1.28rem;font-weight:600;margin-bottom:.5rem}
.diff-card p{color:var(--muted);font-size:.97rem;line-height:1.55}
.diff-card .big{font-family:"Fraunces";font-size:2.4rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.diff-card .big.g{color:var(--green-strong)}
.diff-card .big.r{color:var(--red-strong)}

/* lojas */
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:clamp(32px,4vw,48px)}
.store-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.5rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.store-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green)}
.store-card .sc-top{display:flex;align-items:center;gap:.7rem}
.store-card .pin{width:34px;height:34px;border-radius:10px;background:var(--red-tint);color:var(--red-strong);display:grid;place-items:center;flex:none}
.store-card .pin svg{width:18px;height:18px}
.store-card .city-n{font-family:"Fraunces";font-size:1.2rem;font-weight:600}
.store-card .uf{font-size:.8rem;color:var(--muted);font-weight:700}
.store-card .sc-line{font-size:.92rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.store-card .sc-line svg{width:15px;height:15px;color:var(--green-strong);flex:none}
.store-card .sc-cta{margin-top:.6rem;font-weight:700;font-size:.92rem;color:var(--green-strong);display:inline-flex;align-items:center;gap:.4rem}
.store-card .sc-cta svg{width:15px;height:15px}
.info-note{margin-top:2rem;background:var(--green-tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.25rem;font-size:.92rem;color:var(--ink);display:flex;gap:.6rem;align-items:flex-start}
.info-note svg{width:18px;height:18px;color:var(--green-strong);flex:none;margin-top:.15rem}

@media (max-width:940px){
  .diff-grid{grid-template-columns:1fr 1fr}
  .store-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .diff-grid{grid-template-columns:1fr}
  .store-grid{grid-template-columns:1fr}
}

/* telefone clicável no card de loja */
.store-card a.sc-link{color:var(--ink);font-weight:700;text-decoration:none;transition:color .2s}
.store-card a.sc-link:hover{color:var(--green-strong)}
.store-card a.sc-link svg{color:var(--green-strong)}

/* ============================================================
   PÁGINA DE PRODUTO (PDP)
   ============================================================ */
.pdp{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,56px);align-items:start;margin-top:clamp(20px,3vw,32px)}
.pdp-media{position:relative;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow-md);
  background:radial-gradient(120% 90% at 20% 0%,var(--green-tint),transparent 55%),radial-gradient(120% 90% at 100% 100%,var(--red-tint),transparent 52%),#fff;
  padding:clamp(1.5rem,3vw,2.5rem);display:grid;place-items:center;min-height:340px}
.pdp-media img{max-height:440px;width:auto;filter:drop-shadow(0 20px 30px rgba(36,48,36,.2))}
.pdp-media .species-badge{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#fff;border:1px solid var(--line);color:var(--muted);padding:.35rem .7rem;border-radius:100px}
.pdp-media .species-badge svg{width:14px;height:14px}
.pdp-brand{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-strong);display:flex;align-items:center;gap:.5rem}
.pdp-line{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}
.pdp h1{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.02em;margin:.7rem 0 0}
.pdp .desc{color:var(--muted);font-size:1.06rem;line-height:1.6;margin-top:1rem}
.pdp .badge-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.pdp .bdg{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:700;background:var(--green-tint);color:var(--green-strong);border-radius:100px;padding:.4rem .85rem}
.pdp .bdg.r{background:var(--red-tint);color:var(--red-strong)}
.pdp .bdg svg{width:14px;height:14px}
.pdp .block{margin-top:1.8rem}
.pdp .block h4{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem}
.size{font-family:"Fraunces";font-weight:600;font-size:1.02rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.55rem .95rem;min-width:70px;text-align:center}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.3rem}
.facts .f{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;padding:.25rem 0;border-bottom:1px dashed var(--line)}
.facts .f:last-child,.facts .f:nth-last-child(2){border-bottom:none}
.facts .f .k{color:var(--muted);font-weight:600}
.facts .f .v{font-weight:700;text-align:right}
.pdp-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

.pdp-specs{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)}
.spec-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.spec-card h3{font-family:"Fraunces";font-size:1.4rem;font-weight:600;margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.spec-card h3 .ic{width:34px;height:34px;border-radius:10px;background:var(--green-tint);color:var(--green-strong);display:grid;place-items:center;flex:none}
.spec-card h3 .ic svg{width:19px;height:19px}
.gtable{width:100%;border-collapse:collapse}
.gtable tr{border-bottom:1px solid var(--line)}
.gtable tr:last-child{border-bottom:none}
.gtable td{padding:.62rem 0;font-size:.96rem}
.gtable td:first-child{color:var(--muted)}
.gtable td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.compo{font-size:.98rem;line-height:1.7;color:var(--ink)}
.compo .muted{color:var(--muted);font-size:.9rem;margin-top:1rem;display:block}
.maker{margin-top:1rem;font-size:.85rem;color:var(--muted);line-height:1.5}
.rec-note{grid-column:1/-1;background:var(--green-tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.3rem;font-size:.95rem;color:var(--ink);display:flex;gap:.6rem;align-items:flex-start}
.rec-note svg{width:18px;height:18px;color:var(--green-strong);flex:none;margin-top:.15rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--green-strong);margin-top:clamp(40px,5vw,60px)}
.back-link svg{width:16px;height:16px}
.related{margin-top:clamp(48px,6vw,80px)}

@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:2rem}
  .pdp-media{position:relative;top:0;max-width:460px;margin:0 auto;width:100%}
  .pdp-specs{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}

/* link "ver detalhes" no card do catálogo */
.pcard-more{margin-top:.9rem;font-weight:700;font-size:.9rem;color:var(--green-strong);display:inline-flex;align-items:center;gap:.4rem}
.pcard-more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.pcard:hover .pcard-more svg{transform:translateX(3px)}

.pdp-brand svg{width:15px;height:15px;flex:none;color:#F5A623}

/* ---------- CARD COMPACTO: pacote em evidência (>=60% do card) ---------- */
.pcard{padding:.8rem}
.pcard .ph{aspect-ratio:1/1;margin-bottom:.65rem;padding:.4rem}
.pc-info{display:flex;flex-direction:column}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.45rem}
.pcard .tag-species{font-size:.66rem;padding:.2rem .55rem;gap:.3rem}
.pcard .tag-species svg{width:12px;height:12px}
.pcard .tag-prot{font-size:.66rem;padding:.2rem .55rem}
.tag-size{font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:.2rem .55rem}
.pcard .brandname{font-size:.66rem;margin:.1rem 0 .1rem;line-height:1.22}
.pcard h3{font-size:1.02rem;line-height:1.12;margin-bottom:.2rem}
.pcard .pcard-more{margin-top:.5rem;font-size:.82rem}
/* mobile: 1 coluna, imagem no topo ocupando a largura toda (pacote em destaque) */
@media (max-width:560px){
  .prod-grid{gap:1.1rem}
  .pcard{padding:1rem}
  .pcard .ph{aspect-ratio:1/1;margin-bottom:.8rem;padding:.6rem}
  .pcard h3{font-size:1.15rem}
}

/* ---------- LOGO DA LINHA (página de marca) ---------- */
.lb-plate{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:.85rem 1.35rem;box-shadow:0 10px 30px rgba(20,40,10,.07);margin-bottom:.5rem}
.lb-logo{display:block;height:64px;width:auto;max-width:min(78vw,340px);object-fit:contain}
@media (max-width:560px){.lb-logo{height:52px}.lb-plate{padding:.7rem 1.1rem;border-radius:14px}}

/* ---------- HEADER-CAPA (home) ---------- */
.cover{background:#ECEBEA;position:relative;overflow:hidden;border-bottom:1px solid #E1E0DD}
.cover-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.cover-top{display:flex;align-items:center;gap:1.1rem;min-height:92px;padding:12px 0 4px;flex-wrap:nowrap}
.cover-brands{display:flex;align-items:center;gap:.7rem;flex:none;flex-wrap:nowrap}
.cover-brands a{display:inline-flex;transition:transform .2s var(--ease)}
.cover-brands a:hover{transform:translateY(-2px)}
.cover-brands img{height:36px;width:auto}
.cover-center{display:flex;align-items:center;gap:.2rem;flex:none}
.cover-center .cl-stack{display:flex;flex-direction:column;align-items:center}
.cover-center .cl-logo{height:50px;width:auto}
.cover-center .cl-tag{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7a746e;margin-top:3px;white-space:nowrap}
.cover-center .cl-mascot{height:60px;width:auto;margin-top:-6px}
.cover-navwrap{margin-left:auto;flex:none;display:flex;align-items:center;border:1.6px solid #D9D8D4;border-radius:100px;background:#fff;padding:.3rem .35rem .3rem 1.15rem}
.cover-nav{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap}
.cover-nav a:not(.btn){font-weight:700;font-size:.88rem;color:#3c4038;white-space:nowrap}
.cover-nav a:not(.btn):hover{color:var(--green-strong)}
.cover-navwrap .btn{padding:.66rem 1.15rem;font-size:.9rem}
.cover-nav a:not(.btn):hover{color:var(--green-strong)}
.cover-menu-btn{display:none;justify-self:end;background:#fff;border:1.5px solid #dcdbd7;border-radius:12px;width:46px;height:46px;cursor:pointer;color:#333;align-items:center;justify-content:center}
.cover-menu-btn svg{width:24px;height:24px}
.cover-nav a.active{color:var(--green-strong)}
.cover-nav a.active::after{content:"";display:block;height:2px;border-radius:2px;background:var(--green);margin-top:2px}

/* ---------- CAPA: pets em blobs organicos (home) ---------- */
.petband{width:100%;padding:clamp(10px,1.7vw,24px) 0 2px}
.petband-row{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;gap:clamp(10px,2.4vw,36px);align-items:flex-end;justify-content:center}
.pet{flex:1 1 0;min-width:0;width:100%;height:auto;filter:drop-shadow(0 15px 20px rgba(30,50,15,.16))}
@media (max-width:560px){
  .petband-row{max-width:410px;flex-wrap:wrap;gap:clamp(8px,3.5vw,20px)}
  .pet{flex:0 0 calc(50% - clamp(4px,1.8vw,10px))}
}

@media (max-width:1200px){
  .cover-top{min-height:64px}
  .cover-brands,.cover-navwrap{display:none}
  .cover-center{gap:.15rem}
  .cover-center .cl-logo{height:44px}
  .cover-center .cl-tag{display:none}
  .cover-center .cl-mascot{height:54px}
  .cover-menu-btn{display:inline-flex;margin-left:auto}
}

.eyebrow.eyebrow-stack{flex-direction:column;gap:.1rem;align-items:center;text-align:center;line-height:1.25}
.eyebrow.eyebrow-stack::before{display:none}
