/* ==========================================================================
   THOR PET SPA — Estética e Day Care
   Bandas de cor cheias, divisores em onda e formas orgânicas.
   Cor principal: o verde-turquesa da marca.
   ========================================================================== */

:root{
  /* ── Turquesa da marca (amostrado do logo novo: #1EC3C8) ── */
  --green:     #1EC3C8;   /* turquesa exato do logo — banda clara */
  --green-d:   #148285;   /* mesmo matiz, mais escuro — bandas escuras e topo */
  --green-dd:  #0F5F62;   /* mais escuro ainda — textos e rodapé */
  --green-l:   #9DEEF0;
  --lime:      #F8DC8C;   /* amarelo da aquarela do logo — acento */

  /* ── Acentos, todos amostrados do próprio logotipo ── */
  --purple:    #32006E;   /* roxo da tipografia do logo */
  --purple-d:  #24004F;
  --pink:      #F860D0;   /* magenta da aquarela do logo */
  --pink-l:    #FBA6E4;
  --yellow:    #F8DC8C;
  --sky-d:     #148285;
  --cream:     #FFF6EE;
  --white:     #fff;

  --ink:  #32006E;
  --body: #4A5F63;

  --wpp:   #25D366;
  --wpp-d: #12A951;

  --sh-s: 0 6px 18px rgba(14,124,119,.12);
  --sh-m: 0 16px 40px rgba(10,60,58,.16);
  --sh-l: 0 30px 70px rgba(10,60,58,.24);

  --hdr-h: 92px;
  --wrap: 1220px;
  --e:  cubic-bezier(.22,1,.36,1);
  --eb: cubic-bezier(.34,1.56,.64,1);
}

/* ───────────── Reset ───────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 10px); -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.75;
  color:var(--body); background:var(--cream);
  overflow-x:hidden;
}
/* height:auto é obrigatório porque as <img> têm width/height no HTML
   (que evitam o "pulo" do layout) — sem ele a proporção se perde. */
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
figure{margin:0;}
button{font:inherit; border:0; background:none; color:inherit; cursor:pointer;}

/* Tipografia redonda e “gordinha” — cara de pet shop */
h1,h2,h3,h4{
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  color:var(--green-dd);
  line-height:1.06;
  margin:0 0 .5em;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.5rem,6vw,4.7rem); letter-spacing:-.025em;}
h2{font-size:clamp(1.95rem,4vw,3.2rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);}
p{margin:0 0 1.1em;}
strong{font-weight:800;}
em{font-style:italic;}
.script{font-family:'Pacifico',cursive; font-weight:400; letter-spacing:0; line-height:1.35; display:inline-block;}
::selection{background:var(--green-l); color:var(--green-dd);}

.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto; position:relative; z-index:2;}
.wrap-narrow{width:min(100%, 880px); margin-inline:auto;}
.ic{width:1.15em; height:1.15em; fill:currentColor; flex:none;}

/* ───────────── Bandas ───────────── */
.band{position:relative; isolation:isolate;}
.sec{padding:clamp(80px,10vw,140px) 0 clamp(110px,12vw,170px);}
.band--cream  {background:var(--cream);}
/* Fundo turquesa (claro ou escuro) pede sempre texto claro: branco + amarelo do logo.
   O rosa da aquarela é o único fundo colorido que fica melhor com o roxo do logo. */
.band--green  {background:var(--green);   color:#fff;}
.band--green-d{background:var(--green-d); color:rgba(255,255,255,.93);}
.band--pink   {background:var(--pink);    color:#2E1060;}
.band--purple {background:var(--purple);  color:rgba(255,255,255,.9);}
.band--green h1,.band--green h2,.band--green h3,.band--green h4,
.band--green-d h1,.band--green-d h2,.band--green-d h3,.band--green-d h4,
.band--purple h1,.band--purple h2,.band--purple h3,.band--purple h4{color:#fff;}
.band--pink h1,.band--pink h2,.band--pink h3,.band--pink h4{color:var(--purple);}
.band--green-d strong,.band--purple strong{color:#fff;}
.band--green strong{color:var(--lime);}
.band--pink strong{color:var(--purple);}
.band--green .script  {color:var(--lime);}
.band--green-d .script{color:var(--lime);}
.band--pink .script   {color:#fff;}
.band--purple .script {color:var(--green-l);}
.band--cream .script  {color:var(--green-d);}

/* Divisor em onda */
.wave{position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:1; pointer-events:none;}
.wave svg{width:100%; height:clamp(60px,7vw,120px); display:block;}
.wave path{fill:var(--to);}

/* ───────────── Formas orgânicas ───────────── */
.shape{position:relative; overflow:hidden; background:var(--green-l);}
.shape img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e);}
/* enquadramento: assunto no alto ou embaixo da foto vertical */
img.pos-top{object-position:center 18%;}
img.pos-low{object-position:center 85%;}
.shape:hover img{transform:scale(1.06);}
.shape--blob    {border-radius:58% 42% 47% 53% / 46% 52% 48% 54%; aspect-ratio:1/1.16;}
.shape--blob2   {border-radius:42% 58% 63% 37% / 53% 44% 56% 47%; aspect-ratio:1/1.16;}
.shape--circle  {border-radius:50%; aspect-ratio:1/1;}
.shape--blob,.shape--blob2{animation:morph 16s ease-in-out infinite;}
@keyframes morph{
  0%,100%{border-radius:58% 42% 47% 53% / 46% 52% 48% 54%;}
  33%    {border-radius:44% 56% 60% 40% / 55% 44% 56% 45%;}
  66%    {border-radius:62% 38% 40% 60% / 42% 60% 40% 58%;}
}
.shape--ring-green {box-shadow:0 0 0 9px #fff, 0 0 0 20px rgba(31,178,166,.55), var(--sh-l);}
.shape--ring-yellow{box-shadow:0 0 0 9px #fff, 0 0 0 20px rgba(255,209,82,.85), var(--sh-l);}

/* ───────────── Doodles ───────────── */
.doodle{position:absolute; z-index:0; pointer-events:none; opacity:.15;}
.doodle svg{width:100%; height:100%; fill:currentColor;}
.doodle--paw{color:#fff;}
.band--cream .doodle--paw{color:var(--green); opacity:.10;}
.band--pink .doodle--paw{color:var(--purple); opacity:.09;}
.d1{width:70px;height:70px; top:16%; left:3%;  rotate:-18deg; animation:bob 7s ease-in-out infinite;}
.d2{width:44px;height:44px; top:31%; left:8%;  rotate:12deg;  animation:bob 7s ease-in-out -2s infinite;}
.d3{width:64px;height:64px; bottom:2%;left:-2%; rotate:20deg;}
.d4{width:90px;height:90px; top:8%;  right:4%; rotate:16deg; animation:bob 9s ease-in-out infinite;}
.d5{width:76px;height:76px; bottom:14%;left:3%; rotate:-12deg; animation:bob 8s ease-in-out -3s infinite;}
.d6{width:66px;height:66px; top:12%; right:6%; rotate:-22deg;}
@keyframes bob{0%,100%{translate:0 0;}50%{translate:0 -14px;}}

.dots{position:absolute; z-index:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(currentColor 2px, transparent 2px); background-size:16px 16px;}
.dots--about{width:150px;height:130px; left:2%; top:12%; color:var(--green-l);}
.dots--creative{width:170px;height:140px; right:4%; bottom:10%; color:#fff; opacity:.28;}

/* ───────────── Tipografia de seção ───────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-d); margin-bottom:.9rem;
}
.eyebrow i{width:34px; height:3px; background:currentColor; border-radius:3px; display:inline-block; font-size:0;}
.eyebrow b{color:var(--lime);}
.eyebrow--on-dark{color:var(--lime);}
.band--pink .eyebrow--on-dark{color:var(--purple);}
.band--pink .eyebrow b{color:#fff;}
.band--green .eyebrow b{color:#fff;}
/* abre-alas do topo no roxo do logotipo */
.hero .eyebrow,.hero .eyebrow b{color:var(--purple);}
/* ── Título "GATOS": o O é uma patinha, com a carinha de gato ao lado ── */
.cat-title{
  display:flex; align-items:center; justify-content:center; gap:.35em;
  margin:0 0 .45rem;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(2.4rem,5.4vw,4.2rem); line-height:1;
  letter-spacing:.02em; color:var(--lime);
}
.cat-title span{display:inline-flex; align-items:center;}
.cat-title__cat{
  width:1.35em; height:1.35em; fill:var(--lime); flex:none;
  animation:bob 4.5s ease-in-out infinite;
}
.cat-title__paw{
  width:.78em; height:.78em; fill:var(--lime); flex:none;
  margin:0 .02em; translate:0 .06em; rotate:-14deg;
}
.head{text-align:center; max-width:830px; margin:0 auto clamp(36px,5vw,56px);}
.head__p{font-size:1.08rem; max-width:60ch; margin-inline:auto;}
.intro{margin-bottom:clamp(34px,4vw,52px); font-size:1.08rem;}
.intro p:last-child{margin-bottom:0;}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem); max-width:40em;}

/* ───────────── BOTÕES ───────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1em 2em; border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.02rem; line-height:1;
  cursor:pointer; isolation:isolate;
  transition:transform .35s var(--eb), box-shadow .35s var(--e), background .3s, color .3s;
  will-change:transform;
}
.btn--lg{padding:1.2em 2.4em; font-size:1.1rem;}
.btn span{position:relative; z-index:2;}
.btn .ic{position:relative; z-index:2; transition:transform .4s var(--eb);}
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  translate:-130% 0; transition:translate .7s var(--e);
}
.btn:hover::before{translate:130% 0;}
.btn:hover{transform:translateY(-4px) scale(1.03);}
.btn:hover .ic{transform:rotate(-12deg) scale(1.15);}
.btn:active{transform:translateY(-1px) scale(.99);}
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(0); pointer-events:none; z-index:1;
  animation:ripple .65s var(--e) forwards;
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1); opacity:0;}}

.btn--wpp{background:var(--wpp); color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.42);}
.btn--wpp:hover{background:var(--wpp-d); box-shadow:0 18px 40px rgba(37,211,102,.5);}
.btn--green{background:var(--green-d); color:#fff; box-shadow:var(--sh-m);}
.btn--green:hover{background:var(--green);}
.btn--white{background:#fff; color:var(--green-dd); box-shadow:var(--sh-m);}
.btn--white:hover{background:var(--lime);}
.btn--insta{background:linear-gradient(45deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4); color:#fff; box-shadow:var(--sh-m);}
.btn--outline{background:transparent; color:#fff; box-shadow:inset 0 0 0 3px rgba(255,255,255,.85);}
.btn--outline:hover{background:#fff; color:var(--green-dd); box-shadow:inset 0 0 0 3px #fff;}

.lnk{display:inline-flex; align-items:center; gap:.45em; font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--green-d);}
.lnk i{font-style:normal; transition:translate .35s var(--eb);}
.lnk:hover i{translate:6px 0;}
.lnk--light{color:var(--lime);}

/* ───────────── TOPBAR ───────────── */
.topbar{background:var(--green); color:#fff; font-size:.83rem; padding:.6rem 0; position:relative; z-index:60; font-weight:600;}
.topbar__in{display:flex; gap:1.8rem; justify-content:center; flex-wrap:wrap; align-items:center;}
.topbar__i{display:inline-flex; align-items:center; gap:.45em;}
.topbar__i .ic{fill:var(--lime);}
.topbar__a:hover{color:var(--lime);}

/* ───────────── HEADER ───────────── */
.hdr{
  position:sticky; top:0; z-index:50; height:var(--hdr-h);
  background:#fff; border-bottom:1px solid rgba(14,124,119,.1);
  transition:height .3s var(--e), box-shadow .3s var(--e);
}
.hdr.stuck{height:74px; box-shadow:var(--sh-m);}
.hdr__in{display:flex; align-items:center; justify-content:space-between; height:100%; gap:1rem;}
.brand{display:flex; align-items:center; height:100%;}
.brand__img{height:82%; width:auto; transition:height .3s var(--e);}
.hdr.stuck .brand__img{height:74%;}

.nav{display:flex; align-items:center; gap:1.2rem;}
.nav__list{display:flex; align-items:center; gap:.1rem;}
.nav__l{
  position:relative; display:block; padding:.5em .8em;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.08rem;
  color:var(--green-dd); border-radius:999px;
  transition:color .25s, background .25s;
}
.nav__l::after{
  content:""; position:absolute; left:50%; bottom:.22em; width:0; height:4px; border-radius:4px;
  background:var(--green); translate:-50% 0; transition:width .35s var(--e);
}
.nav__l:hover{color:var(--green);}
.nav__l:hover::after,.nav__l.on::after{width:26px;}
.nav__l.on{color:var(--green);}
.nav__cta{padding:.75em 1.35em; font-size:1rem;}

.burger{display:none; width:50px; height:50px; border-radius:18px; background:var(--green-d);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.burger span{display:block; width:21px; height:3px; background:#fff; border-radius:3px; transition:.3s var(--e);}
.burger.on span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.on span:nth-child(2){opacity:0;}
.burger.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ───────────── HERO ───────────── */
.hero{
  overflow:hidden;
  min-height:min(90vh, 860px);
  display:flex; align-items:center;
  padding:clamp(50px,6vw,80px) 0 clamp(130px,14vw,190px);
}
.hero__photo{
  position:absolute; inset:0 0 0 26%; z-index:0;
  background:url("../img/hero.jpg") center 22%/cover no-repeat;
}
.hero__curve{
  position:absolute; left:0; top:-12%; bottom:-12%; width:74%; z-index:1;
  background:var(--green);
  border-radius:0 62% 62% 0 / 0 50% 50% 0;
  box-shadow:50px 0 90px -25px rgba(15,95,98,.4);
}
.hero__in{max-width:640px; margin-inline:0;}
.hero{--wrap-pad:0;}
.hero .wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto;}
.hero h1{margin-bottom:.32em; text-transform:uppercase; color:#fff; text-shadow:0 3px 14px rgba(15,95,98,.28);}
/* "MELHOR" destacado no amarelo do logo, contornado de branco */
.hl-melhor{
  display:inline-block; font-size:1.16em; color:var(--lime);
  -webkit-text-stroke:5px #fff;
  paint-order:stroke fill;
  text-shadow:0 7px 0 rgba(15,95,98,.22);
}
.hero .lead{color:#fff; margin-bottom:2.2rem; text-shadow:0 2px 10px rgba(15,95,98,.25);}
.hero__btns{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.6rem;}

.hero__facts{display:flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:flex-end;}
.fact{display:flex; flex-direction:column; gap:.15rem; padding-left:1rem; border-left:4px solid var(--lime); line-height:1.25;}
.fact b{
  display:inline-flex; align-items:center; gap:.3em;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:2.1rem; color:#fff;
}
.fact .num::after{content:"+";}
.fact__ico{width:1.5rem; height:1.5rem; fill:var(--lime);}
.fact span{font-size:.9rem; color:rgba(255,255,255,.88);}
.fact--count b{font-size:2.4rem;}
.fact__hydra{height:44px; width:auto; margin-bottom:.25rem;}

/* ───────────── SELOS HYDRA ───────────── */
.hydra-inline{
  display:inline-flex; align-items:center; gap:1rem;
  background:#fff; border:2px solid rgba(31,178,166,.25);
  border-radius:22px; padding:.9rem 1.4rem; margin:.4rem 0 1.6rem;
  box-shadow:var(--sh-s);
}
.hydra-inline img{height:52px; width:auto;}
.hydra-inline b{display:block; font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--green-dd); line-height:1.2;}
.hydra-inline span{font-size:.92rem;}

.hydra-strip{
  display:flex; align-items:center; gap:1.6rem;
  background:#fff; border:2px solid rgba(255,255,255,.6);
  border-radius:28px; padding:1.4rem 1.8rem;
  margin-bottom:clamp(40px,5vw,60px);
  box-shadow:var(--sh-m); color:var(--body);
}
.hydra-strip img{height:70px; width:auto; flex:none;}
.hydra-strip p{margin:0; font-size:1rem;}
.hydra-strip b{color:var(--purple);}

/* ───────────── PÍLULAS ───────────── */
.pills{padding:0 0 clamp(30px,5vw,60px); margin-top:clamp(-120px,-11vw,-90px); z-index:5;}
.pill__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.pill{
  background:#fff; border-radius:34px; padding:2rem 1.7rem 2.2rem; text-align:center;
  box-shadow:var(--sh-m); position:relative; overflow:hidden;
  transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.pill::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--c); scale:0 1; transform-origin:left; transition:scale .5s var(--e);}
.pill:hover{transform:translateY(-10px); box-shadow:var(--sh-l);}
.pill:hover::before{scale:1 1;}
.pill__ph{width:132px; height:132px; margin:0 auto 1.2rem; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 22%, white); transition:box-shadow .4s var(--e);}
.pill:hover .pill__ph{box-shadow:0 0 0 10px color-mix(in srgb, var(--c) 32%, white);}
.pill__ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e);}
.pill:hover .pill__ph img{transform:scale(1.09);}
.pill h3{color:var(--c);}
.pill p{font-size:.97rem;}

/* ───────────── SPLIT ───────────── */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center;}
.split--rev .split__media{order:2;}
.split__media{position:relative;}
.split__media > .shape:first-child{max-width:420px;}
.float-ph{position:absolute; width:42%; max-width:190px; z-index:3; right:-4%; bottom:-6%;
  box-shadow:0 0 0 8px #fff, var(--sh-m);}
.split--rev .float-ph,.float-ph--r{right:auto; left:-4%; bottom:-8%;}

.steps{margin:1.6rem 0 2.2rem; display:grid;}
.steps li{display:grid; grid-template-columns:74px 1fr; gap:1.1rem; padding:.9rem 0; position:relative;}
.steps li::before{content:""; position:absolute; left:36px; top:0; bottom:0; width:2px; background:linear-gradient(var(--green-l),rgba(31,178,166,.2));}
.steps li:first-child::before{top:50%;}
.steps li:last-child::before{bottom:50%;}
.steps span{position:relative; z-index:2; justify-self:center; align-self:start;
  display:grid; place-items:center; width:66px; height:36px; border-radius:999px;
  background:var(--green); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.9rem;
  box-shadow:0 6px 16px rgba(14,124,119,.28);}
.steps b{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.1rem; display:block; color:var(--green-dd);}
.steps p{margin:0; font-size:.95rem;}

.tags{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 2rem;}
.tags li{background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.45); color:#fff;
  padding:.45em 1.05em; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:.92rem;}
.band--pink .tags li{background:rgba(255,255,255,.6); border-color:#fff; color:var(--purple);}

/* ───────────── SERVIÇOS (cards) ───────────── */
.svc{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; align-items:start;}
.svc__c{
  position:relative; background:#fff; border-radius:34px; overflow:hidden;
  box-shadow:var(--sh-m); display:flex; flex-direction:column;
  transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.svc__c:hover{transform:translateY(-10px); box-shadow:var(--sh-l);}
.svc__c--star{outline:4px solid var(--lime); outline-offset:-4px;}
.svc__flag{
  position:absolute; z-index:3; top:1rem; right:1rem;
  background:var(--lime); color:var(--green-dd);
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.8rem;
  padding:.4em 1em; border-radius:999px; box-shadow:var(--sh-s);
}
.svc__ph{aspect-ratio:16/11; overflow:hidden; background:var(--green-l);}
.svc__ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e);}
.svc__c:hover .svc__ph img{transform:scale(1.07);}
.svc__b{padding:1.7rem 1.7rem 2rem; color:var(--body);}
.svc__b h3{color:var(--green-dd);}
.svc__b p{font-size:.97rem;}
.svc__b strong{color:var(--green-dd);}
.ticks{display:grid; gap:.55rem; margin-top:1.2rem;}
.ticks li{display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; font-weight:600; color:var(--green-dd);}
.ticks .ic{width:1.15rem; height:1.15rem; margin-top:.22rem; fill:#fff; background:var(--green); border-radius:50%; padding:2px;}

/* ───────────── CTA em faixa ───────────── */
.cta-band{
  margin-top:clamp(46px,6vw,72px);
  background:rgba(255,255,255,.14); border:2px dashed rgba(255,255,255,.5);
  border-radius:34px; padding:2rem clamp(20px,4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
}
.cta-band p{margin:0; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.18rem; color:#fff;}
.band--cream .cta-band{background:#fff; border-color:var(--green-l);}
.band--cream .cta-band p{color:var(--green-dd);}
.band--green .cta-band{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6);}
.band--green .cta-band p{color:#fff;}

/* ───────────── CRECHE ───────────── */
.bens{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;}
.ben{text-align:center;}
.ben figure{width:172px; margin:0 auto 1.2rem; box-shadow:0 0 0 8px rgba(255,255,255,.16), var(--sh-m);
  transition:box-shadow .4s var(--e), transform .45s var(--e);}
.ben:hover figure{transform:translateY(-8px); box-shadow:0 0 0 12px rgba(201,238,92,.4), var(--sh-l);}
.ben h3{font-size:1.2rem; margin-bottom:.35em;}
.ben p{font-size:.96rem; margin:0;}

.routine__t{text-align:center; margin:clamp(56px,7vw,88px) 0 2rem; font-size:clamp(1.45rem,2.4vw,2rem);}
.routine{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
.routine li{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:28px; padding:1.7rem 1.4rem; transition:transform .4s var(--e), background .4s;}
.routine li:hover{transform:translateY(-8px); background:rgba(255,255,255,.18);}
.routine span{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px;
  background:var(--lime); color:var(--green-dd); font-family:'Baloo 2',sans-serif; font-weight:800; margin-bottom:.9rem;}
.routine b{display:block; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.12rem; color:#fff; margin-bottom:.25em;}
.routine p{margin:0; font-size:.94rem;}

/* ───────────── INSTAGRAM ───────────── */
.ig__widget:empty{display:none;}
.ig__widget{margin-bottom:2rem;}
.ig__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.ig__it{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:32% 32% 32% 32% / 28% 28% 28% 28%;
  box-shadow:var(--sh-s);
  transition:transform .45s var(--eb), border-radius .5s var(--e), box-shadow .4s var(--e);
}
.ig__it:nth-child(even){border-radius:28% 28% 28% 28% / 34% 34% 34% 34%;}
.ig__it img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e);}
.ig__it:hover{transform:translateY(-8px) rotate(-2deg); border-radius:26px; box-shadow:var(--sh-l);}
.ig__it:hover img{transform:scale(1.1);}
.ig__ov{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(45deg,rgba(221,42,123,.75),rgba(129,52,175,.7)); color:#fff;
  opacity:0; transition:opacity .35s var(--e);}
.ig__ov .ic{width:2rem; height:2rem;}
.ig__it:hover .ig__ov{opacity:1;}
.ig__cta{text-align:center; margin-top:2.4rem;}

/* ───────────── CONTATO ───────────── */
.info{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
.info__c{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:30px; padding:2rem 1.6rem; transition:transform .4s var(--e), background .4s;}
.info__c:hover{transform:translateY(-8px); background:rgba(255,255,255,.18);}
.info__i{display:inline-grid; place-items:center; width:58px; height:58px; border-radius:18px;
  background:var(--lime); color:var(--green-dd); margin-bottom:1rem;}
.info__i .ic{width:1.5rem; height:1.5rem;}
.info__c h3{font-size:1.18rem; margin-bottom:.4em;}
.info__c p{font-size:.97rem; margin-bottom:.6em;}
.info__c b{color:#fff;}
.info__c .btn{margin-top:.5rem;}

.mapa{margin-top:clamp(40px,5vw,60px); border-radius:34px; overflow:hidden;
  box-shadow:0 0 0 8px rgba(255,255,255,.16), var(--sh-l); line-height:0;}
.mapa iframe{width:100%; height:clamp(280px,38vw,420px); border:0; display:block;}

/* ───────────── RODAPÉ ───────────── */
.footer{background:var(--green-dd); color:rgba(255,255,255,.75); padding-top:clamp(56px,7vw,84px);}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.4rem; padding-bottom:3rem;}
.footer h4{color:#fff; font-size:1.12rem; margin-bottom:1rem;}
.footer p{font-size:.94rem;}
.footer__logo{width:200px; margin-bottom:1.1rem;}
.footer__hydra{height:56px; width:auto; margin-top:.4rem; opacity:.9;}
.footer ul{display:grid; gap:.55rem;}
.footer a{font-size:.94rem; transition:color .25s, padding-left .25s;}
.footer a:hover{color:var(--lime); padding-left:4px;}
.footer__ct li{font-size:.94rem;}
.social{display:flex; gap:.6rem; margin-top:1.3rem;}
.social a{width:46px; height:46px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); transition:background .3s, transform .35s var(--eb);}
.social a:hover{background:var(--lime); color:var(--green-dd); transform:translateY(-4px) rotate(-8deg); padding-left:0;}
.social .ic{width:1.3rem; height:1.3rem;}
.footer__bar{border-top:1px solid rgba(255,255,255,.14); padding:1.2rem 0;}
.footer__bar p{margin:0; font-size:.85rem; text-align:center;}

/* ───────────── WHATSAPP FLUTUANTE ───────────── */
/* só o ícone, redondo — dobro do tamanho anterior (86px → 172px) */
.wpp{position:fixed; right:24px; bottom:24px; z-index:90;
  display:grid; place-items:center; width:172px; height:172px;
  background:var(--wpp); color:#fff; border-radius:50%;
  box-shadow:0 14px 34px rgba(37,211,102,.5);
  transition:transform .4s var(--eb), box-shadow .4s var(--e), background .3s;}
.wpp__ic{width:94px; height:94px; fill:#fff; position:relative; z-index:2;}
.wpp__txt{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.wpp:hover{background:var(--wpp-d); transform:translateY(-5px) scale(1.06); box-shadow:0 22px 50px rgba(37,211,102,.6);}
.wpp__pulse{position:absolute; inset:0; border-radius:50%; background:var(--wpp); z-index:1;
  animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{scale:1; opacity:.55;}70%{scale:1.7; opacity:0;}100%{opacity:0;}}

.totop{position:fixed; right:86px; bottom:206px; z-index:85; width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--green-dd); font-size:1.25rem; font-weight:800; box-shadow:var(--sh-m);
  display:grid; place-items:center; opacity:0; visibility:hidden; translate:0 12px; transition:.35s var(--e);}
.totop.on{opacity:1; visibility:visible; translate:0 0;}
.totop:hover{background:var(--green-d); color:#fff;}

/* ───────────── REVEAL ───────────── */
.rv{opacity:0; translate:0 30px; transition:opacity .85s var(--e), translate .85s var(--e);}
.rv.in{opacity:1; translate:0 0;}
.rv:nth-child(2){transition-delay:.07s;}
.rv:nth-child(3){transition-delay:.14s;}
.rv:nth-child(4){transition-delay:.21s;}
.rv:nth-child(5){transition-delay:.28s;}
.rv:nth-child(6){transition-delay:.35s;}
.rv:nth-child(7){transition-delay:.42s;}
.rv:nth-child(8){transition-delay:.49s;}

/* ───────────── RESPONSIVO ───────────── */
@media (max-width:1180px){
  .nav__l{font-size:1rem; padding:.5em .62em;}
}
@media (max-width:1080px){
  .pill__grid{grid-template-columns:1fr;}
  .svc{grid-template-columns:repeat(2,1fr);}
  .bens{grid-template-columns:repeat(2,1fr);}
  .routine{grid-template-columns:repeat(2,1fr);}
  .info{grid-template-columns:repeat(2,1fr);}
  .ig__grid{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .hero__photo{inset:0 0 0 14%;}
  .hero__curve{width:80%;}
}

@media (max-width:900px){
  :root{--hdr-h:78px;}
  .topbar{display:none;}
  .burger{display:flex;}
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:1.1rem;
    background:#fff; padding:1.5rem 22px 2.2rem; box-shadow:var(--sh-l);
    translate:0 -130%; transition:translate .45s var(--e);
    max-height:calc(100dvh - var(--hdr-h)); overflow:auto;
  }
  .nav.open{translate:0 0;}
  .nav__list{flex-direction:column; align-items:stretch; gap:.1rem;}
  .nav__l{padding:.9em 1em; font-size:1.2rem; border-bottom:1px solid rgba(14,124,119,.1);}
  .nav__l::after{display:none;}
  .nav__l.on{background:rgba(31,178,166,.12);}
  .nav__cta{width:100%;}

  /* Hero: foto vira fundo com véu turquesa (estilo petbrinka) */
  .hero{min-height:auto; padding:clamp(76px,13vw,110px) 0 clamp(120px,18vw,170px); text-align:center;}
  .hero__photo{inset:0; opacity:.22;}
  .hero__curve{inset:0; width:100%; border-radius:0; background:linear-gradient(180deg,rgba(30,195,200,.93),rgba(20,160,164,.95));}
  .hero__in{max-width:none;}
  .hero .lead{margin-inline:auto;}
  .hero .eyebrow{justify-content:center; flex-wrap:wrap; font-size:.78rem; letter-spacing:.12em;}
  .hero__btns,.hero__facts{justify-content:center;}
  .fact{border-left:0; border-top:4px solid var(--purple); padding:.6rem 0 0; align-items:center;}

  .split,.split--rev{grid-template-columns:1fr;}
  .split--rev .split__media{order:0;}
  .split__media{max-width:420px; margin:0 auto 1.6rem;}
  .hydra-strip{flex-direction:column; text-align:center; gap:1rem;}
  .pills{margin-top:-70px;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .wrap{width:min(100% - 32px, var(--wrap));}
  .bens,.routine,.info,.footer__grid,.svc{grid-template-columns:1fr;}
  .ig__grid{grid-template-columns:repeat(2,1fr);}
  .cta-band{flex-direction:column; text-align:center;}
  .steps li{grid-template-columns:58px 1fr; gap:.9rem;}
  .steps li::before{left:28px;}
  .steps span{width:56px; font-size:.82rem;}
  .float-ph{width:38%; right:0; bottom:-4%;}
  .split--rev .float-ph,.float-ph--r{left:0;}
  .hydra-inline{width:100%; justify-content:center; text-align:left;}
  .wpp{right:16px; bottom:16px; width:124px; height:124px;}
  .wpp__ic{width:68px; height:68px;}
  .totop{right:22px; bottom:152px;}
  .fact b{font-size:1.9rem;}
  .fact--count b{font-size:2.1rem;}
}

@media (max-width:400px){
  .wpp{width:110px; height:110px;}
  .wpp__ic{width:60px; height:60px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important;}
  .rv{opacity:1; translate:none;}
  html{scroll-behavior:auto;}
}