/* ==========================================================================
   Focinho, Pet Shop, Banho & Tosa
   Peca conceitual de portfolio da Mutagex.
   Direcao em docs/DIRECAO.md. Hero e menu em PROMPT-AJUSTES-V2.md.
   Forma estrutural unica: o arco. Nenhum canto vivo na pagina.
   ========================================================================== */

@property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --cresce{ syntax:'<number>'; initial-value:1; inherits:false; }

:root{
  /* paleta. --lilas e sobrescrito em tempo de execucao pela cor amostrada do
     proprio quadro do video, pra nao existir emenda entre canvas e pagina. */
  --lilas:        #E9E1FF;
  --lilas-claro:  #F7F3FF;
  --roxo:         #7B5CFA;
  --rosa:         #FFB8D2;
  --tinta:        #1E1B2E;
  --dourado:      #FFC857;

  --roxo-tinta:   #5A35C9;   /* 7,5:1 no branco. o #7B5CFA da 4,43 e reprova */
  --rosa-forte:   #B3145A;   /* 6,6:1 no branco. o rosa da paleta e fundo, nao texto */
  --lilas-fundo:  #CBB8FF;

  --tinta-70: rgba(30,27,46,.70);
  --tinta-45: #635D77;       /* 4,96:1 no lilas. o rgba .45 antigo dava 2,69 */
  --tinta-12: rgba(30,27,46,.12);

  /* escala do briefing: 8 / 16 / 24 / 40 / 64 / 96 */
  --e0: 4px;
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 96px;

  --raio-p: 14px;
  --raio-m: 24px;
  --raio-g: 36px;
  --arco: 999px 999px 0 0;

  --sombra: 0 18px 44px -20px rgba(51,30,122,.34);
  --sombra-alta: 0 30px 70px -26px rgba(51,30,122,.42);

  --expo: cubic-bezier(.16,1,.3,1);
  --mola: cubic-bezier(.34,1.56,.64,1);
  --micro: 200ms;
  --entrada: 800ms;

  --display: "Unbounded", "Trebuchet MS", system-ui, sans-serif;
  --texto: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Medido em 2560: com 1280 fixo, TODA secao deixava 640px de lilas vazio de
     cada lado, metade da tela. A faixa de cupom usava 672 de 2560. O container
     cresce por degraus em tela grande, e o texto corrido nao vem junto: quem
     segura a linha de leitura e o max-width proprio de cada bloco de prosa
     (40rem na cabeca de secao, 34ch no agendamento). */
  --largura: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --secao: clamp(56px, 7vw, 96px);

  --mascara-estrelas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 20'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 1.4l2.65 5.7 6.15.8-4.5 4.3 1.15 6.1L10 15.2l-5.45 3.1 1.15-6.1-4.5-4.3 6.15-.8z'/%3E%3Cpath transform='translate(23)' d='M10 1.4l2.65 5.7 6.15.8-4.5 4.3 1.15 6.1L10 15.2l-5.45 3.1 1.15-6.1-4.5-4.3 6.15-.8z'/%3E%3Cpath transform='translate(46)' d='M10 1.4l2.65 5.7 6.15.8-4.5 4.3 1.15 6.1L10 15.2l-5.45 3.1 1.15-6.1-4.5-4.3 6.15-.8z'/%3E%3Cpath transform='translate(69)' d='M10 1.4l2.65 5.7 6.15.8-4.5 4.3 1.15 6.1L10 15.2l-5.45 3.1 1.15-6.1-4.5-4.3 6.15-.8z'/%3E%3Cpath transform='translate(92)' d='M10 1.4l2.65 5.7 6.15.8-4.5 4.3 1.15 6.1L10 15.2l-5.45 3.1 1.15-6.1-4.5-4.3 6.15-.8z'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
/* o display do proprio componente vence o [hidden] do navegador: sem isto o
   contador da sacola aparecia com "0" desde o primeiro quadro */
[hidden]{ display:none!important; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--lilas);
  color:var(--tinta);
  font:400 1.0625rem/1.65 var(--texto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; }

h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
h2{ font-size:clamp(1.9rem,4vw,3rem); line-height:1.04; letter-spacing:-.02em; }
h3{ font-size:1.3125rem; line-height:1.18; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--roxo-tinta); }
button{ font:inherit; }

:focus-visible{ outline:3px solid var(--roxo-tinta); outline-offset:3px; border-radius:var(--e0); }

.pular-conteudo{
  position:fixed; top:var(--e2); left:var(--e2); z-index:300;
  transform:translateY(-200%);
  background:var(--roxo-tinta); color:#fff;
  padding:var(--e2) var(--e3); border-radius:999px;
  font:700 .9375rem/1 var(--texto); text-decoration:none;
  transition:transform .18s ease;
}
.pular-conteudo:focus{ transform:translateY(0); }

.caixa{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter); }

/* --------------------------------------------------------------------------
   slot de asset: quando a foto nao esta no disco, mostra o caminho esperado
   -------------------------------------------------------------------------- */
.media{ display:block; position:relative; overflow:hidden; background:var(--lilas-fundo); border-radius:var(--raio-m); }
.media img{ display:block; width:100%; height:100%; object-fit:cover; }
.media.is-pending{ background:repeating-linear-gradient(45deg,#DED3FA 0 11px,#D3C5F6 11px 22px); min-height:120px; }
.media.is-pending img{ display:none; }
.media.is-pending::after{
  content:attr(data-arquivo); position:absolute; inset:0;
  display:grid; place-items:center; padding:var(--e2);
  font:600 .6875rem/1.45 ui-monospace,"Cascadia Mono",Consolas,monospace;
  color:#4B3B86; text-align:center; overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   botoes
   -------------------------------------------------------------------------- */
.botao{
  --alt:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e1);
  min-height:var(--alt); padding:0 var(--e3);
  border:2px solid transparent; border-radius:999px;
  font:700 1rem/1 var(--texto); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform var(--micro) ease, background-color var(--micro) ease, color var(--micro) ease, box-shadow var(--micro) ease;
}
.botao:active{ transform:translateY(1px) scale(.99); }
.botao--grande{ --alt:56px; padding:0 var(--e4); font-size:1.0625rem; }
.botao--bloco{ width:100%; }
.botao--solido{ background:var(--roxo-tinta); color:#fff; box-shadow:0 12px 26px -14px rgba(51,30,122,.7); }
.botao--solido:hover{ background:#4A29AE; box-shadow:0 18px 34px -14px rgba(51,30,122,.8); }
.botao--contorno{ border-color:var(--roxo-tinta); color:var(--roxo-tinta); background:transparent; }
.botao--contorno:hover{ background:var(--roxo-tinta); color:#fff; }
.botao--fantasma{ color:var(--roxo-tinta); background:transparent; padding-inline:var(--e2); }
.botao--fantasma:hover{ background:rgba(90,53,201,.1); }
.botao--claro{ background:#fff; color:var(--roxo-tinta); box-shadow:0 16px 34px -16px rgba(20,8,60,.55); }
.botao--claro:hover{ background:var(--lilas-claro); }
/* verde escurecido: o #128C4F dava 4,29:1 com branco em 16px bold, e 16px bold
   ainda conta como texto normal no AA. Este da 5,19:1. */
.botao--zap{ background:#0F7D46; color:#fff; }
.botao--zap:hover{ background:#0B6637; }
.botao:disabled{ opacity:.45; cursor:default; }

.ponto{ display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.34; margin-inline:.6em; vertical-align:.2em; }

.estrelas{
  --nota:100%;
  display:inline-block; width:5.6em; height:1em; font-size:1rem; vertical-align:-.1em;
  background:linear-gradient(90deg,var(--dourado) 0 var(--nota),rgba(30,27,46,.16) var(--nota) 100%);
  -webkit-mask:var(--mascara-estrelas) no-repeat left center/contain;
  mask:var(--mascara-estrelas) no-repeat left center/contain;
}

/* ==========================================================================
   NAV: pilula de vidro com a bolha de sabao
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding:var(--e2) var(--gutter) 0;
  padding-top:calc(var(--e2) + env(safe-area-inset-top,0px));
  transition:transform .32s var(--expo);
}
.nav.is-escondida{ transform:translateY(calc(-100% - 12px)); }

.nav__pilula{
  max-width:var(--largura); margin-inline:auto;
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e1) var(--e1) var(--e1) var(--e3);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 14px 40px -22px rgba(90,53,201,.6);
  transition:padding .3s var(--expo), background-color .3s ease, box-shadow .3s ease;
}
/* ao descer, encolhe. ao subir, volta. */
.nav.is-encolhida .nav__pilula{ padding-block:2px; background:rgba(255,255,255,.86); box-shadow:0 10px 30px -20px rgba(90,53,201,.7); }
.nav.is-encolhida .nav__logo img{ width:clamp(128px,13vw,160px); }

.nav__logo{ display:flex; align-items:center; flex:0 0 auto; min-height:44px; }
.nav__logo img{ width:clamp(150px,16vw,192px); height:auto; transition:width .3s var(--expo); }

.nav__links{ position:relative; display:flex; gap:var(--e0); margin-inline:auto; }
.nav__links a{
  position:relative; z-index:1;
  display:flex; align-items:center; min-height:44px; padding:0 var(--e2);
  font:600 .9375rem/1 var(--texto); color:var(--tinta); text-decoration:none;
  border-radius:999px;
}
.nav__links a > span{ display:inline-block; }
.nav__links a:hover > span{ animation:gelatina 240ms ease; }
@keyframes gelatina{ 0%{ transform:scale(1) } 45%{ transform:scale(1.06) } 100%{ transform:scale(1) } }

/* a bolha: iridescente, gira devagar, tem reflexo e flutua ate o link */
.bolha-nav{
  position:absolute; left:0; top:50%; z-index:0;
  width:var(--bw,96px); height:38px;
  transform:translate(var(--bx,0px),-50%) scale(var(--bs,1));
  border-radius:999px;
  background:conic-gradient(from var(--giro,0deg),
    rgba(255,199,232,.85), rgba(205,224,255,.85), rgba(200,255,238,.85),
    rgba(255,244,205,.85), rgba(226,205,255,.85), rgba(255,199,232,.85));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 -8px 14px -8px rgba(123,92,250,.5), 0 6px 18px -10px rgba(90,53,201,.55);
  opacity:var(--bo,0);
  animation:giraBolha 18s linear infinite;
  transition:transform .42s var(--mola), width .42s var(--mola), opacity .28s ease;
  pointer-events:none;
}
@keyframes giraBolha{ to{ --giro:360deg } }
.bolha-nav::after{
  content:""; position:absolute; left:16%; top:18%;
  width:24%; height:32%; border-radius:50%;
  background:rgba(255,255,255,.88); filter:blur(1.5px);
}

/* micro-bolhas do estouro */
.micro-bolha{
  position:fixed; z-index:120; width:10px; height:10px; border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,199,232,.9),rgba(205,224,255,.9),rgba(200,255,238,.9),rgba(255,199,232,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
  pointer-events:none;
}

.nav__acoes{ display:flex; align-items:center; gap:var(--e1); flex:0 0 auto; }

.busca{ display:flex; align-items:center; }
.busca__botao,.sacola{
  position:relative;
  width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:999px; background:transparent; color:var(--tinta); cursor:pointer;
  transition:background-color var(--micro) ease;
}
.busca__botao:hover,.sacola:hover{ background:rgba(90,53,201,.1); }
.busca__botao svg,.sacola svg{ width:22px; height:22px; }
.busca__campo{
  width:0; padding:0; border:0; opacity:0;
  min-height:44px; border-radius:999px; background:rgba(90,53,201,.08);
  font:400 16px/1 var(--texto); color:var(--tinta);
  transition:width .34s var(--expo), opacity .2s ease, padding .34s var(--expo);
}
.busca.is-aberta .busca__campo{ width:clamp(150px,18vw,230px); padding:0 var(--e2); opacity:1; }
.busca__campo::-webkit-search-cancel-button{ filter:hue-rotate(240deg); }

.sacola__conta{
  position:absolute; top:2px; right:2px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:999px; background:var(--roxo-tinta); color:#fff;
  font:700 .6875rem/1 var(--texto);
}
.sacola.is-pulando{ animation:pulaSacola 420ms var(--mola); }
@keyframes pulaSacola{ 0%{ transform:scale(1) } 40%{ transform:scale(1.22) } 100%{ transform:scale(1) } }

/* produto voando ate a sacola */
.voando{
  position:fixed; z-index:130; width:64px; height:64px; border-radius:50%;
  object-fit:cover; pointer-events:none;
  box-shadow:0 12px 26px -12px rgba(51,30,122,.6);
}

/* ==========================================================================
   barra inferior e gaveta do celular
   ========================================================================== */
.barra-baixo{ display:none; }
.gaveta[hidden]{ display:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero__tela{ position:absolute; inset:0; }
/* Aqui moravam as regras da trava (palco em position:fixed cobrindo a janela,
   overscroll preso). Nao existem mais: a pagina rola normal desde o primeiro
   pixel e a historia acontece sozinha no video. */

/* O FILME fica no palco, do tamanho do palco, e INVISIVEL: quem aparece e o
   canvas, que desenha quadro a quadro em cima dele. Nao adianta escondê-lo com
   display:none nem encolhe-lo pra 1px: navegador nenhum garante decodificar em
   tamanho cheio o que nao esta sendo mostrado, e o canvas receberia um quadro
   borrado. Fica visivel pro navegador e transparente pro olho. */
.hero__filme{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; pointer-events:none;
}

/* A base dos arcos dissolve num degrade ate a cor do fundo. Sem isso o arco,
   que e uma cupula de base reta, aparecia como retangulo rosa e lilas cortado
   no pe do hero, justo onde o canvas ja esta esfumado. */
.hero__arcos{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 46%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0 46%,transparent 88%);
}
/* os arcos ficam ancorados ATRAS DOS PETS, na metade direita, nunca atras do
   texto. Tamanhos em vw pra acompanhar telas largas. */
.arco{
  position:absolute; bottom:-6%;
  border-radius:var(--arco);
  transform:translateX(-50%) scaleY(var(--cresce,1));
  transform-origin:center bottom;
  animation:cresceArco var(--entrada) var(--expo) var(--atraso,0ms) both;
}
@keyframes cresceArco{ from{ --cresce:0 } to{ --cresce:1 } }
.arco--lilas{ width:clamp(460px,46vw,860px); height:84%; left:70%; background:var(--lilas-fundo); --atraso:120ms; }
.arco--rosa{ width:clamp(300px,30vw,540px); height:64%; left:46%; background:var(--rosa); opacity:.9; --atraso:0ms; }

/* palco: sangra de ponta a ponta, sem tilt, sem perspective, sem parallax.
   O video fica 100% parado no lugar. */
.hero__palco{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  background-image:url("data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAAAwBwCdASooABYAPrVGlEUkIiEdWzQARAtE9QBajdMhYD1wAYQB/APb/uzMH2kGg7Q41Cb/dMhZlXmtBQQ9mVu5I/gA/vTlSBhicsVdTQ//rFJquIfZ//VP4elicIMi9BwfJPfAeVyAghpmAAzwR2ett+e40ipBh4kg6F+tI0PkwhLEB9/0qaEMrFSgwpBxpwXY7RoyAKQ9G604NdEycnGZ9iEp2HHeNR0zX02lcthwAAAA");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
body.pintou .hero__palco{ background-image:none; }

.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transform:scale(1.04); max-width:none;
}
body.pintou .hero__canvas{
  opacity:1; transform:scale(1);
  transition:opacity 900ms var(--expo), transform 900ms var(--expo);
}

.hero__chapa{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center;
  opacity:0; pointer-events:none;
}
/* A <img> da chapa fica invisivel nos DOIS caminhos, igual ao caminho normal:
   ela e a fonte que o canvas desenha, nao a imagem que aparece. Com o
   `so-chapas` pintando no canvas, as regras de opacidade que cruzavam start
   com end por `--mistura` sairam, e junto saiu o `.hero__poster`, que existia
   so pra esse cruzamento e baixava o end-860.webp em toda visita de celular. */



.hero__atmosfera{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero__bolhas,.hero__respingos{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gota,.bolha,.brilho{ transform-box:fill-box; transform-origin:center; }
.bolha{ filter:drop-shadow(0 0 4px rgba(255,255,255,.9)); }

/* grade do hero: container de 1280, texto em 5/12, pets nos 7/12 da direita */
.hero__grade{
  position:relative; z-index:4; height:100%;
  width:100%; max-width:var(--largura); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr); align-content:center;
  gap:var(--e3);
}
.hero__copy{ grid-column:1 / span 5; align-self:center; }

.hero__olho{
  font:600 .9375rem/1.4 var(--texto); color:var(--roxo-tinta); margin-bottom:var(--e2);
  animation:entraTexto 600ms var(--expo) 380ms both;
}
@keyframes entraTexto{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes sobeLinha{ from{ transform:translateY(106%) } to{ transform:none } }
/* a saida usa a MESMA mascara da entrada: a linha desce por dentro dela em vez
   de sumir num fade de 12px, que e o que todo gerador faz */
@keyframes desceLinha{ from{ transform:none } to{ transform:translateY(106%) } }

/* Altura reservada: o H1 troca de 1 pra 2 linhas entre as etapas, e sem isso o
   bloco inteiro pula. Duas linhas de 0.95em mais o respiro do corte. */
.hero__titulo{
  position:relative;
  font-family:var(--display); font-weight:800;
  /* Teto medido, nao chutado: a coluna de texto tem 5 de 12 colunas de um
     container de 1280 e fica travada em 479px de 1280px pra cima. A palavra
     mais longa das tres etapas, "chacoalhada…", ocupa 572px a 64px, ou seja
     465px a 52px. Acima disso ela some no corte da mascara da linha. */
  font-size:clamp(2rem,4.1vw,3.25rem);
  line-height:.95; letter-spacing:-.035em;
  margin-bottom:var(--e2);
  min-height:2.02em;
}
/* padding EM CIMA tambem. O overflow:hidden da mascara so tinha folga
   embaixo, e o acento do "Á" de "Água morna," saia guilhotinado numa barra
   reta. A margem negativa devolve o espaco pra o entrelinhas nao mudar. */
.linha{ display:block; overflow:hidden; padding-bottom:.06em; padding-top:.14em; margin-top:-.14em; }
.linha > span{ display:block; animation:sobeLinha var(--entrada) var(--expo) var(--d,0ms) both; }

.hero__sub{
  font-size:1.0625rem; line-height:1.55; color:var(--tinta-70); max-width:34ch;
  min-height:3.1em;
  animation:entraTexto 520ms var(--expo) 400ms both;
}
.hero__olho{ min-height:1.4em; }
/* o texto sai antes do novo entrar: fade mais 12px pra cima, 220ms */
.sai-texto{ opacity:0!important; transform:translateY(-12px)!important; transition:opacity .22s ease, transform .22s ease!important; }
/* o olho e rotulo de progresso: troca cedo e sozinho, com um passo curto */
.troca-olho{ opacity:0; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease; }

.hero__acoes{
  display:flex; align-items:center; gap:var(--e1); flex-wrap:wrap;
  margin-top:var(--e3);
  animation:entraTexto 600ms var(--expo) 600ms both;
}
/* o CTA principal fica em TODAS as paradas, alinhado sob o texto de apoio, com
   "Ver preços" ao lado. Na ultima parada ele so ganha enfase. */
#ctaHero{ transition:box-shadow .4s var(--expo); }

.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* tres blocos parados, so no caminho de movimento reduzido */
.etapas-paradas{ display:none; }

#ctaHero.is-climax{ animation:pulso 700ms var(--expo) 1; }
@keyframes pulso{
  0%{ transform:scale(1); box-shadow:0 12px 26px -14px rgba(51,30,122,.7) }
  45%{ transform:scale(1.045); box-shadow:0 0 0 12px rgba(123,92,250,.16), 0 18px 40px -14px rgba(51,30,122,.8) }
  100%{ transform:scale(1); box-shadow:0 12px 26px -14px rgba(51,30,122,.7) }
}
.rabo{
  width:16px; height:16px; display:inline-block; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20c0-11 12-13 12-6 0 5-7 6-7 1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20c0-11 12-13 12-6 0 5-7 6-7 1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transform-origin:20% 90%;
}
#ctaHero.is-climax .rabo{ animation:abana 640ms ease-in-out 1; }
@keyframes abana{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-16deg) } 60%{ transform:rotate(14deg) } }

/* cards: um jogo por capitulo, na coluna da direita */
.hero__cards{ grid-column:8 / span 5; position:relative; align-self:center; min-height:340px; }
.vidro{
  position:absolute; width:100%; max-width:236px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.88);
  border-radius:var(--raio-m); padding:var(--e2) var(--e3);
  box-shadow:var(--sombra);
  opacity:0; transform:translateY(18px) scale(.96); visibility:hidden;
  transition:opacity .45s var(--expo), transform .45s var(--expo);
}
/* parallax do ponteiro: no maximo 6px, e so nos elementos soltos */
.vidro.is-dentro{ opacity:1; visibility:visible; transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1); }
/* os cards descem: no topo da coluna da direita eles caiam em cima da cara do
   cachorro, que e o que a pessoa veio ver */
.vidro--a{ top:32%; right:0; }
.vidro--b{ top:54%; right:8%; }
.vidro--c{ top:76%; right:2%; }
.vidro__titulo{ font:700 .8125rem/1.2 var(--texto); color:var(--roxo-tinta); }
.vidro__valor{ font-family:var(--display); font-weight:700; font-size:1.0625rem; line-height:1.2; margin-top:var(--e0); }
.vidro__nota{ font-size:.8125rem; color:var(--tinta-70); margin-top:2px; }

.vidro--flip{ background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; perspective:1000px; }
.flip{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 520ms var(--expo); }
.vidro--flip:hover .flip,.vidro--flip:focus-within .flip{ transform:rotateY(180deg); }
.flip__face{
  border-radius:var(--raio-m); padding:var(--e2) var(--e3);
  border:1px solid rgba(255,255,255,.88); box-shadow:var(--sombra);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.flip__frente{ background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); }
.flip__verso{
  position:absolute; inset:0; transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center;
  background:rgba(90,53,201,.95); color:#fff; border-color:rgba(255,255,255,.4);
  text-decoration:none;
}
.flip__verso .vidro__titulo,.flip__verso .vidro__valor,.flip__verso .vidro__nota{ display:block; }
.flip__verso .vidro__titulo{ color:#fff; }
.flip__verso .vidro__nota{ color:rgba(255,255,255,.88); }
/* no celular nao existe hover: o card ja nasce virado, senao a mensagem some */
@media (hover:none){
  .vidro--flip .flip{ transform:none; }
  .vidro--flip .flip__frente{ position:relative; }
  .vidro--flip .flip__verso{ display:none; }
}

.hero__balao{
  position:absolute; z-index:6; left:var(--bx,60%); top:var(--by,40%);
  padding:var(--e1) var(--e2);
  background:#fff; border-radius:18px 18px 18px 4px; box-shadow:var(--sombra);
  font:600 1.25rem/1 ui-monospace,"Cascadia Mono",Consolas,monospace; color:var(--tinta);
  animation:balao 2.4s var(--expo) 1 forwards; pointer-events:none;
}
@keyframes balao{ 0%{ opacity:0; transform:translateY(8px) scale(.8) } 12%{ opacity:1; transform:none } 80%{ opacity:1 } 100%{ opacity:0; transform:translateY(-8px) } }

/* HUD: sempre visivel, bottom fixo de no minimo 32px */
.hero__hud{
  position:absolute; z-index:5;
  left:max(var(--gutter),calc(50vw - var(--largura)/2 + var(--gutter)));
  /* a proxima secao sobe 58px por cima do hero: o HUD tem que ficar acima
     dessa sobreposicao, senao a onda corta o osso pela metade */
  bottom:max(78px, calc(70px + env(safe-area-inset-bottom,0px)));
  display:flex; flex-direction:column; gap:var(--e1);
  animation:entraTexto 600ms var(--expo) 780ms both;
}
.hud__rotulo{ font:600 .8125rem/1.3 var(--texto); color:var(--tinta-45); }
.hud__osso{ position:relative; width:min(240px,58vw); }
.osso{ display:block; width:100%; height:auto; filter:drop-shadow(0 1px 0 rgba(90,53,201,.22)) drop-shadow(0 8px 18px rgba(51,30,122,.26)); }
#ossoCheio{ transition:width 90ms linear; }
/* enquanto o clipe toca quem manda na largura e o rAF, quadro a quadro: a
   transicao ficaria sempre correndo atras e chegaria 90ms depois da pose */
.hud__osso.is-andando #ossoCheio{ transition:none; }
.hud__patas{ position:absolute; inset:0; }
.pata{
  position:absolute; top:50%; left:var(--em); transform:translate(-50%,-50%);
  width:44px; height:44px; padding:0; display:grid; place-items:center;
  border:0; background:none; cursor:pointer; color:rgba(90,53,201,.45);
  transition:color var(--micro) ease, transform var(--micro) var(--expo);
}
.pata::before{ content:""; position:absolute; width:30px; height:30px; border-radius:50%; background:transparent; transition:background var(--micro) ease; }
.pata svg{ position:relative; width:17px; height:17px; }
.pata:hover{ color:var(--roxo-tinta); transform:translate(-50%,-50%) scale(1.18); }
.pata.is-feita{ color:rgba(255,255,255,.96); }
.pata.is-agora{ color:#fff; transform:translate(-50%,-50%) scale(1.14); }
.pata.is-agora::before{ background:var(--roxo-tinta); box-shadow:0 2px 8px rgba(51,30,122,.4); }
/* a patinha nova da um toque quando o gesto e lido. O clipe leva 3,2s pra
   terminar: sem um sinal imediato, o trackpad parece nao ter respondido e a
   pessoa repete o gesto (que e engolido pelo cooldown) achando que falhou */
@keyframes batePata{ 0%{ transform:translate(-50%,-50%) scale(1.14) } 38%{ transform:translate(-50%,-50%) scale(1.42) } 100%{ transform:translate(-50%,-50%) scale(1.14) } }
.pata.is-agora.is-batendo{ animation:batePata 420ms var(--expo); }

/* Aqui moravam o "Role para dar o banho" e o botao "Pular". Os dois existiam
   por causa da trava: um explicava por que a pagina nao rolava, o outro dava
   saida. Sem trava, um seria mentira e o outro nao teria de que pular. */

/* ==========================================================================
   secoes
   ========================================================================== */
.secao{ position:relative; padding-block:var(--secao); }
.secao--claro{ background:var(--lilas-claro); border-radius:var(--raio-g); }
.secao--topo{ border-radius:var(--raio-g) var(--raio-g) 0 0; }
.secao--base{ border-radius:0 0 var(--raio-g) var(--raio-g); }
.secao--onda{
  z-index:2; margin-top:-58px;
  padding-top:calc(var(--secao) + var(--e3));
  border-radius:0 0 var(--raio-g) var(--raio-g);
  box-shadow:0 -34px 60px -34px rgba(51,30,122,.34);
}
.onda{ position:absolute; left:0; top:-59px; width:100%; height:60px; display:block; }

.cabeca{ max-width:46rem; margin-bottom:var(--e4); }
.cabeca p{ margin-top:var(--e2); font-size:1.0625rem; color:var(--tinta-70); max-width:40rem; }
.cabeca--linha{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; }
.cabeca--linha > div{ max-width:40rem; }

.setas{ display:flex; gap:var(--e1); flex:0 0 auto; }
.seta{
  width:48px; height:48px; display:grid; place-items:center;
  border:2px solid var(--tinta-12); border-radius:999px;
  background:transparent; color:var(--tinta); cursor:pointer;
  transition:border-color var(--micro) ease, color var(--micro) ease;
}
.seta svg{ width:22px; height:22px; }
.seta:hover:not(:disabled){ border-color:var(--roxo-tinta); color:var(--roxo-tinta); }
.seta:disabled{ opacity:.3; cursor:default; }

/* --- categorias --- */
.categorias{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--e3); }
/* o estado escondido so entra quando o JS marca a lista: sem script, ou com
   um erro antes desta linha, os seis circulos continuam visiveis */
.categorias.vai-entrar li{ opacity:0; transform:translateY(22px); }
.categorias.is-dentro li{ opacity:1; transform:none; transition:opacity 620ms var(--expo) var(--d,0ms), transform 620ms var(--expo) var(--d,0ms); }
.categoria{
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:var(--e1);
  border:0; background:none; cursor:pointer; color:var(--tinta); padding:0;
}
.categoria__foto{
  width:100%; aspect-ratio:1; border-radius:50%; background:var(--lilas-fundo);
  transition:transform .4s var(--expo), box-shadow .4s ease;
}
/* o zoom e por bicho: cao e gato ja preenchem o recorte, ave, peixe e reptil
   vem pequenos no quadro e precisam de mais aproximacao */
.categoria__foto img{ transform:scale(var(--zoom,1.32)); transform-origin:center 58%; }
.categoria__foto::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(90,53,201,.15); transition:border-color .3s ease, box-shadow .3s ease;
}
/* o circulo "respira" no hover */
.categoria:hover .categoria__foto,.categoria:focus-visible .categoria__foto{ box-shadow:var(--sombra); }
@keyframes respira{ 0%,100%{ transform:translateY(-4px) scale(1.02) } 50%{ transform:translateY(-7px) scale(1.05) } }

/* ==========================================================================
   CADA BICHO SE MEXE DO SEU JEITO
   Um "respira" igual pros seis e o mesmo que nao ter animacao nenhuma: o
   cachorro pula, o gato se espriguica, a ave da o bote de cabeca, o peixe
   nada de lado, o roedor treme de roer e a tartaruga balanca devagar.
   No hover roda em loop; no clique da UMA volta mais forte.
   ========================================================================== */
@keyframes bichoCaes    { 0%,100%{ transform:translateY(0) }            28%{ transform:translateY(-13px) scaleY(1.05) } 52%{ transform:translateY(0) scaleY(.94) } 74%{ transform:translateY(-5px) } }
@keyframes bichoGatos   { 0%,100%{ transform:rotate(0) scale(1) }       35%{ transform:rotate(-6deg) scale(1.05) }      70%{ transform:rotate(4deg) scale(1.02) } }
@keyframes bichoAves    { 0%,100%{ transform:translateY(0) rotate(0) }  20%{ transform:translateY(-9px) rotate(-5deg) } 40%{ transform:translateY(2px) rotate(3deg) } 60%{ transform:translateY(-6px) rotate(-3deg) } 80%{ transform:translateY(1px) } }
@keyframes bichoPeixes  { 0%,100%{ transform:translateX(0) rotate(0) }  25%{ transform:translateX(-9px) rotate(-4deg) } 50%{ transform:translateX(0) }                 75%{ transform:translateX(9px) rotate(4deg) } }
@keyframes bichoRoedores{ 0%,100%{ transform:translate(0,0) }           15%{ transform:translate(-2px,-3px) }           30%{ transform:translate(2px,-1px) }          45%{ transform:translate(-2px,-4px) } 60%{ transform:translate(2px,-1px) } 80%{ transform:translate(-1px,-2px) } }
@keyframes bichoRepteis { 0%,100%{ transform:rotate(0) translateX(0) }  30%{ transform:rotate(-4deg) translateX(-5px) } 65%{ transform:rotate(4deg) translateX(5px) } }

/* o hover troca o respira generico pela animacao do bicho */
.categoria:hover .categoria__foto,
.categoria:focus-visible .categoria__foto{ animation:var(--bicho-anim,respira) 1.6s ease-in-out infinite; }
/* o clique da uma volta so, mais rapida e mais forte */
.categoria.is-pulando .categoria__foto{ animation:var(--bicho-anim,respira) .62s cubic-bezier(.34,1.56,.64,1) 1!important; }

.categoria[data-bicho="caes"]    { --bicho-anim:bichoCaes; }
.categoria[data-bicho="gatos"]   { --bicho-anim:bichoGatos; }
.categoria[data-bicho="aves"]    { --bicho-anim:bichoAves; }
.categoria[data-bicho="peixes"]  { --bicho-anim:bichoPeixes; }
.categoria[data-bicho="roedores"]{ --bicho-anim:bichoRoedores; }
.categoria[data-bicho="repteis"] { --bicho-anim:bichoRepteis; }
.categoria:hover .categoria__foto::after{ border-color:rgba(90,53,201,.42); }
.categoria[aria-pressed="true"] .categoria__foto::after{ border-color:var(--roxo-tinta); box-shadow:0 0 0 4px rgba(123,92,250,.18); }
.categoria__nome{ font-family:var(--display); font-weight:700; font-size:1rem; }
.categoria__qtd{
  font-size:.8125rem; color:var(--tinta-45);
  opacity:0; transform:translateY(-4px);
  transition:opacity .26s ease, transform .26s ease;
}
.categoria:hover .categoria__qtd,.categoria:focus-visible .categoria__qtd,.categoria[aria-pressed="true"] .categoria__qtd{ opacity:1; transform:none; }

/* --- portes --- */
.portes{ display:flex; gap:var(--e0); padding:var(--e0); background:rgba(90,53,201,.08); border-radius:999px; }
.portes button{
  min-height:44px; padding:0 var(--e2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:0; border-radius:999px; background:transparent; color:var(--tinta-70);
  font:700 .9375rem/1 var(--texto); cursor:pointer;
  transition:background-color var(--micro) ease, color var(--micro) ease;
}
/* opacity .8 em cima do lilas do trilho dava 3,43:1 e reprovava no AA.
   Cor solida e 12px no lugar de 11. */
.portes button small{ font-weight:500; font-size:.75rem; color:#4F4A63; }
.portes button[aria-checked="true"]{ background:#fff; color:var(--roxo-tinta); box-shadow:0 4px 12px -6px rgba(51,30,122,.4); }

/* --- servicos --- */
.servicos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); }
.servico{
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--raio-g); padding:var(--e2); gap:var(--e2);
}
.servico__foto{ aspect-ratio:4/3; border-radius:var(--raio-m); }
.servico__corpo{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e1); padding:0 var(--e1) var(--e1); flex:1; }
.servico__corpo p{ color:var(--tinta-70); font-size:.9375rem; line-height:1.55; }
/* a linha quebra INTEIRA quando nao cabe. Sem o wrap, o flex espremia o
   proprio preco e "R$ 120,00" saia em duas linhas dentro do <strong> */
.servico__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--e1); color:var(--tinta)!important; font-size:.9375rem!important; margin-top:auto; }
.servico__preco{ font-family:var(--display); font-weight:700; font-size:1.5rem; white-space:nowrap; transition:color .2s ease; }
.servico__dur{ white-space:nowrap; }
.servico__preco.is-mudando{ color:var(--roxo-tinta); }
.servico__corpo .botao{ margin-top:var(--e1); }
.servico__antes{ font-size:.8125rem; color:var(--tinta-45); }

/* --- agendamento inline --- */
/* Duas colunas: texto e apoio empilhados na esquerda, formulario na direita
   ocupando as duas linhas. As linhas sao explicitas porque o DOM esta na
   ordem do CELULAR (texto, formulario, apoio), nao na do desktop. */
.agenda{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-rows:auto auto; gap:var(--e3) var(--e5); align-items:start;
}
.agenda__texto{ grid-column:1; grid-row:1; }
.agenda__apoio{ grid-column:1; grid-row:2; }
.agenda__caixa{ grid-column:2; grid-row:1 / span 2; }
.agenda__texto p{ margin-top:var(--e2); font-size:1.0625rem; color:var(--tinta-70); max-width:34ch; }
.agenda__fatos{ display:grid; gap:var(--e2); margin-block:var(--e3); }
.agenda__fatos li{ font-size:.9375rem; color:var(--tinta-70); }
.agenda__fatos strong{ display:block; font-family:var(--display); font-weight:700; font-size:1rem; color:var(--tinta); }

.agenda__caixa{ background:#fff; border-radius:var(--raio-g); padding:clamp(24px,3vw,40px); }
.passos{ display:flex; gap:var(--e2); margin-bottom:var(--e3); flex-wrap:wrap; }
.passo{ display:flex; align-items:center; gap:var(--e1); font:600 .875rem/1 var(--texto); color:var(--tinta-45); }
.passo span{
  width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:rgba(90,53,201,.12); color:var(--roxo-tinta); font-size:.8125rem;
}
.passo.is-agora{ color:var(--tinta); }
.passo.is-agora span{ background:var(--roxo-tinta); color:#fff; }
.passo.is-feito span{ background:#0F7D46; color:#fff; }

.painel{ border:0; padding:0; margin:0; display:none; }
.painel.is-ativo{ display:block; animation:entraTexto 320ms var(--expo) both; }
.painel legend{ font-family:var(--display); font-weight:700; font-size:1.125rem; margin-bottom:var(--e2); padding:0; }

.escolhas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--e1); }
.escolhas--porte{ grid-template-columns:repeat(3,1fr); }
.escolha{
  min-height:56px; padding:var(--e1) var(--e2);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  border:2px solid var(--tinta-12); border-radius:var(--raio-p);
  background:#fff; color:var(--tinta); cursor:pointer; text-align:left;
  font:700 .9375rem/1.2 var(--texto);
  transition:border-color var(--micro) ease, background-color var(--micro) ease;
}
.escolha small{ font-weight:500; font-size:.8125rem; color:var(--tinta-45); }
.escolha:hover{ border-color:rgba(90,53,201,.4); }
.escolha[aria-pressed="true"]{ border-color:var(--roxo-tinta); background:rgba(123,92,250,.07); }
.escolha[aria-pressed="true"] small{ color:var(--roxo-tinta); }

.dias{ display:flex; gap:var(--e1); overflow-x:auto; padding-bottom:var(--e1); scrollbar-width:none; }
.dias::-webkit-scrollbar{ display:none; }
.dia{
  flex:0 0 auto; width:64px; min-height:72px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:2px solid var(--tinta-12); border-radius:var(--raio-p);
  background:#fff; cursor:pointer; color:var(--tinta);
  font:700 1.125rem/1 var(--display);
}
.dia small{ font:500 .6875rem/1 var(--texto); color:var(--tinta-45); }
.dia[aria-pressed="true"]{ border-color:var(--roxo-tinta); background:var(--roxo-tinta); color:#fff; }
.dia[aria-pressed="true"] small{ color:rgba(255,255,255,.85); }

.horas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:var(--e1); margin-top:var(--e2); }
.hora{
  min-height:44px; border:2px solid var(--tinta-12); border-radius:999px;
  background:#fff; color:var(--tinta); cursor:pointer; font:600 .9375rem/1 var(--texto);
  transition:border-color var(--micro) ease, background-color var(--micro) ease;
}
.hora:hover:not(:disabled){ border-color:rgba(90,53,201,.4); }
.hora[aria-pressed="true"]{ border-color:var(--roxo-tinta); background:var(--roxo-tinta); color:#fff; }
.hora:disabled{ opacity:.35; cursor:default; text-decoration:line-through; }

.agenda__erro{ margin-top:var(--e2); font:600 .875rem/1.45 var(--texto); color:#8C1D18; }
.agenda__rodape{ display:flex; align-items:center; justify-content:space-between; gap:var(--e2); margin-top:var(--e3); flex-wrap:wrap; }
/* flex:1 1 200px foi escrito pra uma LINHA. Quando o rodape do formulario
   vira coluna no celular, o mesmo 200px passa a valer como altura e abre um
   buraco de quase 200px dentro do unico formulario da peca, bem em cima do
   botao. Achado pelo concelho no print 390-secao-06. */
.agenda__resumo{ font-size:.9375rem; color:var(--tinta-70); flex:1 1 auto; }
.agenda__botoes{ display:flex; gap:var(--e1); }
.agenda__aviso{ margin-top:var(--e2); font-size:.8125rem; color:var(--tinta-45); }
.agenda__feito{ text-align:center; padding-block:var(--e3); }
.agenda__feito h3{ font-size:1.5rem; margin-bottom:var(--e1); }
.agenda__feito p{ color:var(--tinta-70); }

/* confete de patinhas */
.confete{ position:fixed; z-index:140; width:18px; height:18px; pointer-events:none; color:var(--roxo); }

/* --- carrossel --- */
/* O carrossel sangra de proposito, mas o primeiro produto tem que comecar na
   MESMA coluna do titulo da secao. Com padding fixo, em 1920 ele comecava uns
   300px a esquerda de "Mais vendidos". O calculo abaixo e o mesmo do .caixa. */
.carrossel{
  --entrada:max(var(--gutter), calc(50vw - var(--largura)/2 + var(--gutter)));
  display:flex; gap:var(--e3);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--e1) var(--entrada) var(--e4);
  scroll-padding-inline:var(--entrada);
  scrollbar-width:none; cursor:grab;
}
.carrossel::-webkit-scrollbar{ display:none; }
.carrossel.is-arrastando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.carrossel.is-arrastando *{ pointer-events:none; }
.produto{
  position:relative; flex:0 0 clamp(220px,23vw,272px); scroll-snap-align:start;
  background:#fff; border-radius:var(--raio-g); padding:var(--e2);
  display:flex; flex-direction:column; gap:var(--e1);
  transition:opacity .3s ease, transform .3s ease;
}
.produto.is-fora{ display:none; }
.selo{
  position:absolute; top:var(--e2); left:var(--e2); z-index:2;
  padding:3px var(--e1); border-radius:999px;
  font:700 .6875rem/1.5 var(--texto);
}
.selo--vendido{ background:var(--dourado); color:var(--tinta); }
.selo--novo{ background:var(--roxo-tinta); color:#fff; }
.produto__foto{ aspect-ratio:1; border-radius:var(--raio-m); background:var(--lilas); margin-bottom:var(--e0); }
.produto h3{ font-size:.9375rem; line-height:1.3; font-family:var(--texto); font-weight:700; }
.produto__nota{ display:flex; align-items:center; gap:var(--e1); font:600 .875rem/1 var(--texto); }
.produto__nota .estrelas{ font-size:.75rem; }
.produto__votos{ color:var(--tinta-45); font-weight:500; }
.produto__preco{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e1);
  margin-top:auto; padding-top:var(--e1);
  font-family:var(--display); font-weight:700; font-size:1.125rem;
}
.mais{
  width:44px; height:44px; flex:0 0 auto;
  border:0; border-radius:999px; background:var(--roxo-tinta); color:#fff;
  font:400 1.6rem/1 var(--texto); cursor:pointer;
  transition:transform var(--micro) ease, background-color var(--micro) ease;
}
.mais:hover{ background:#4A29AE; transform:scale(1.06); }
.mais.is-feito{ background:#0F7D46; }

.parceiras__intro{ font:600 .9375rem/1 var(--texto); color:var(--tinta-45); margin-bottom:var(--e3); }
.parceiras{ display:flex; align-items:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap; }
.parceiras img{ height:32px; width:auto; opacity:.56; transition:opacity .2s ease; }
.parceiras img:hover{ opacity:.9; }
.parceiras__aviso{ margin-top:var(--e3); font-size:.8125rem; color:var(--tinta-45); }

/* --- por que a Focinho --- */
.porque{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--e5); align-items:start; }
.porque__foto .media{ aspect-ratio:1/1.24; border-radius:var(--arco); }
.porque__lead{ margin-top:var(--e2); font-size:1.125rem; line-height:1.55; color:var(--tinta-70); max-width:40ch; }
.diferenciais{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4) var(--e3); margin-top:var(--e4); }
.dif__icone{ display:block; width:36px; height:36px; color:var(--roxo-tinta); margin-bottom:var(--e1); }
.dif__icone svg{ width:100%; height:100%; }
.diferenciais h3{ font-size:1.0625rem; }
.diferenciais p{ margin-top:var(--e1); font-size:.9375rem; line-height:1.6; color:var(--tinta-70); }

.equipe{ margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--tinta-12); }
.equipe__intro{ font:600 .9375rem/1 var(--texto); color:var(--tinta-45); margin-bottom:var(--e2); }
.equipe ul{ display:flex; gap:var(--e4); flex-wrap:wrap; }
.equipe li{ display:flex; flex-direction:column; gap:2px; width:112px; }
.equipe__foto{ width:64px; aspect-ratio:1; border-radius:50%; margin-bottom:var(--e1); }
.equipe__nome{ font:700 .9375rem/1.3 var(--texto); }
.equipe__papel{ font-size:.8125rem; color:var(--tinta-45); }

/* --- faixa de desconto --- */
.faixa{
  position:relative; overflow:hidden;
  margin-inline:var(--gutter); border-radius:var(--raio-g);
  background:linear-gradient(135deg,#7B5CFA 0%,#5A35C9 58%,#4520A8 100%);
  color:#fff; padding-block:clamp(56px,7vw,96px);
}
.faixa__corpo{ position:relative; z-index:2; text-align:center; max-width:42rem; }
.faixa__numero{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,9vw,6.5rem); line-height:.9; letter-spacing:-.04em; color:var(--rosa); }
.faixa h2{ margin-top:var(--e1); font-size:clamp(1.4rem,3vw,2.2rem); }
/* o :not e obrigatorio: `.faixa__corpo > p` tem especificidade maior que
   `.faixa__numero`, e sem isso o "20% off" sai em 17px branco em vez de
   104px rosa, que e o unico grito da pagina. */
.faixa__corpo > p:not(.faixa__numero){ margin-top:var(--e3); color:rgba(255,255,255,.85); font-size:1.0625rem; }

.cupom{
  display:inline-flex; align-items:center; gap:var(--e2);
  margin-top:var(--e4); min-height:56px; padding:0 var(--e1) 0 var(--e3);
  border:2px dashed rgba(255,255,255,.5); border-radius:999px;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  transition:background-color var(--micro) ease, border-color var(--micro) ease;
}
.cupom:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.8); }
.cupom__codigo{ font-family:var(--display); font-weight:700; font-size:1.125rem; letter-spacing:.02em; }
.cupom__acao{
  min-height:40px; display:grid; place-items:center; padding:0 var(--e2);
  border-radius:999px; background:#fff; color:var(--roxo-tinta);
  font:700 .875rem/1 var(--texto);
}
.cupom.is-copiado .cupom__acao{ background:#0F7D46; color:#fff; }

.faixa__pets{ position:absolute; inset:0; z-index:1; }
.faixa__pet{
  position:absolute; border-radius:50%;
  width:clamp(88px,11vw,164px); aspect-ratio:1;
  border:5px solid rgba(255,255,255,.22);
  animation:flutua 7s ease-in-out infinite;
}
.faixa__pet--1{ top:12%; left:5%; animation-delay:0s; }
.faixa__pet--2{ bottom:10%; left:13%; animation-delay:1.4s; }
.faixa__pet--3{ top:16%; right:7%; animation-delay:.7s; }
.faixa__pet--4{ bottom:8%; right:15%; animation-delay:2.1s; }
@keyframes flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }


/* ==========================================================================
   VIDA FORA DO HERO
   As secoes de conteudo mediam ZERO: nao se mexiam sozinhas e nao reagiam ao
   ponteiro. Folha impressa. O que entra aqui e REACAO, nao protetor de tela:
   com ninguem mexendo, a pagina continua parada, que e como deve ser.
   Nada de card que levanta com sombra nova nem de fade-and-slide por secao:
   e o kit que todo gerador usa e que denuncia pagina feita por maquina.
   ========================================================================== */

/* 0. espuma da rolagem. As bolhas do hero saem dele e sobem pela pagina
      inteira, mas SO enquanto a pessoa rola: parou de rolar, elas ralentam e
      somem. Nao e protetor de tela, e a pagina reagindo a quem a percorre. */
/* A espuma fica ATRAS do conteudo, nao na frente. Quatro dos seis
   conselheiros acharam a mesma coisa, cada um num print diferente: anel
   branco cortando "R$ 95,00", "R$ 189,90", o botao Agendar e o H2 de
   servicos. Preco velado por enfeite e o pior lugar possivel numa loja, e
   nenhuma das 93 checagens pegava porque e pintura, nao DOM.
   z-index 0 com as secoes em 1: ela aparece nas faixas de fundo lilas, que e
   a maior parte da pagina, e nunca por cima de card, preco ou botao.
   O `mix-blend-mode` mantem o anel visivel sobre o lilas sem virar branco
   chapado quando passa por cima de uma foto de fundo. */
/* A ESPUMA FICA ENTRE O FUNDO E O CONTEUDO.
   Ela era z-index 3, acima de tudo, e quatro dos seis conselheiros acharam o
   mesmo defeito em prints diferentes: anel branco cortando "R$ 95,00",
   "R$ 189,90", o H2 de servicos e a palavra "Continuar" no meio do unico
   botao de formulario da peca. Nao lia como sabao, lia como sujeira na lente.
   Nenhuma das 93 checagens nem o axe pegavam, porque e pintura, nao DOM.
   Em z-index 0 ela ainda pinta ACIMA do fundo das secoes (fundo de bloco
   estatico pinta abaixo de elemento posicionado), e tudo o que e conteudo
   sobe pra 1. Resultado: bolha nas faixas de lilas, nunca em cima de preco. */
.espuma{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
/* Espuma e rastro de patinhas sao de PONTEIRO e de tela grande. No celular a
   bolha atravessava card e texto no meio da rolagem e atrapalhava a leitura,
   sem nada em troca: no toque nao existe hover pra estourar a bolha nem
   ponteiro pra deixar rastro. */
@media (max-width:899px){
  .espuma,.patinhas{ display:none; }
}
/* E por PONTEIRO, nao so por largura: tablet de toque deitado passa dos 900px
   e nao tem hover pra estourar bolha nenhuma. */
@media (hover:none),(pointer:coarse){
  .espuma,.patinhas{ display:none; }
  /* Os cards de vidro sairam do celular por LARGURA, e telefone deitado
     (932x430) passa dos 900px: eles voltavam por cima do cachorro num
     aparelho que nem hover tem. */
  .hero__cards{ display:none; }
}
.espuma svg{ width:100%; height:100%; display:block; }
.caixa,.cabeca,.servico,.produto,.depoimento,.dica,.galeria__item,
.agenda__caixa,.agenda__texto,.agenda__apoio,.faixa__corpo,.rodape__grade,
.carrossel,.equipe,.feed,.diferenciais{ position:relative; z-index:1; }

/* 1. rastro de patinhas. So existe enquanto a pessoa move o ponteiro. */
.patinhas{ position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.patinha{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px;
  color:var(--roxo-tinta); opacity:0;
  animation:pisaPatinha 1150ms ease-out forwards;
  will-change:opacity, transform;
}
.patinha svg{ width:100%; height:100%; display:block; }
@keyframes pisaPatinha{
  0%   { opacity:0;   transform:rotate(var(--giro,0deg)) scale(.58); }
  14%  { opacity:.52; transform:rotate(var(--giro,0deg)) scale(1); }
  68%  { opacity:.36; transform:rotate(var(--giro,0deg)) scale(1); }
  100% { opacity:0;   transform:rotate(var(--giro,0deg)) scale(.94); }
}

/* 2. o card vira uma janelinha: a foto dentro dele se mexe com o ponteiro.
      O card NAO levanta e NAO ganha sombra: o que responde e o conteudo. */
.reage{ --mx:.5; --my:.5; --perto:0; }
.reage .media{ transition:transform .5s var(--expo); }
.reage .media img{
  transform:scale(calc(1 + .045 * var(--perto)))
            translate3d(calc((var(--mx) - .5) * -14px), calc((var(--my) - .5) * -14px), 0);
  transition:transform .45s var(--expo);
  will-change:transform;
}
/* e uma luz lilas segue o ponteiro na borda, sem mexer no card */
.reage::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:var(--perto);
  transition:opacity .4s ease;
  background:radial-gradient(240px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
             rgba(123,92,250,.13), transparent 62%);
}
.servico,.produto,.depoimento,.dica,.galeria__item{ position:relative; }

/* 3. a estrela do depoimento e o preco do produto acendem junto */
.reage .produto__preco,.reage .servico__preco{ transition:color .35s ease; }
.reage[style*="--perto:1"] .produto__preco{ color:var(--roxo-tinta); }

/* --- galeria --- */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); }
.galeria__item{ margin:0; }
.galeria__item .media{ aspect-ratio:3/2; border-radius:var(--raio-g); }
.galeria__item--alto{ grid-row:span 2; }
.galeria__item--alto .media{ aspect-ratio:3/4; }
.galeria__item--largo{ grid-column:span 2; }
.galeria__item--largo .media{ aspect-ratio:2/1; }
.galeria figcaption{ margin-top:var(--e1); font-size:.9375rem; color:var(--tinta-70); }

/* --- depoimentos: sem card, com hairline e a foto do pet --- */
.depoimentos{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4) var(--e5); }
.depoimento{ display:flex; flex-direction:column; gap:var(--e2); padding-top:var(--e3); border-top:1px solid var(--tinta-12); }
.depoimento blockquote{ margin:0; font-size:1.0625rem; line-height:1.6; }
.depoimento__quem{ display:flex; align-items:center; gap:var(--e2); margin-top:auto; }
.depoimento__duo{ position:relative; flex:0 0 auto; width:76px; height:52px; }
.depoimento__foto{ position:absolute; width:52px; aspect-ratio:1; border-radius:50%; border:2px solid var(--lilas-claro); }
.depoimento__foto--tutor{ left:0; z-index:1; }
.depoimento__foto--pet{ right:0; }
.depoimento__quem strong{ display:block; font:700 .9375rem/1.4 var(--texto); }
.depoimento__quem span span{ font-size:.8125rem; color:var(--tinta-45); }

/* --- dicas --- */
.dicas{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); }
.dica{ display:flex; flex-direction:column; gap:var(--e1); }
.dica__foto{ aspect-ratio:3/2; border-radius:var(--raio-m) var(--raio-m) var(--raio-p) var(--raio-p); }
.dica h3{ font-size:1.125rem; margin-top:var(--e1); }
.dica p{ color:var(--tinta-70); font-size:.9375rem; line-height:1.6; }

/* --- feed --- */
.arroba{
  display:inline-flex; align-items:center; min-height:44px;
  font:700 1rem/1 var(--display); color:var(--roxo-tinta); text-decoration:none;
}
.arroba:hover{ text-decoration:underline; }
.feed{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--e1); }
.feed li{ position:relative; }
.feed .media{ aspect-ratio:1; border-radius:var(--raio-m); }
.feed .media img{ transition:transform .5s var(--expo); }
.feed li:hover .media img{ transform:scale(1.07); }

.redes{ display:flex; gap:var(--e1); margin-top:var(--e3); }
.redes--linha{ margin-top:var(--e4); }
.redes a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:999px; background:rgba(90,53,201,.1); color:var(--roxo-tinta);
  transition:background-color var(--micro) ease, color var(--micro) ease, transform var(--micro) var(--mola);
}
.redes a:hover{ background:var(--roxo-tinta); color:#fff; transform:translateY(-3px); }
.redes svg{ width:20px; height:20px; }
.rodape .redes a{ background:rgba(255,255,255,.12); color:#fff; }
.rodape .redes a:hover{ background:#fff; color:var(--roxo-tinta); }

/* --- rodape --- */
.rodape{
  margin-top:var(--e6);
  background:#241C4A; color:rgba(255,255,255,.78);
  border-radius:var(--raio-g) var(--raio-g) 0 0;
  padding-block:var(--e5) var(--e3);
}
.rodape__grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--e4) var(--e3); }
.rodape__logo{ width:192px; height:auto; }
.rodape__frase{ margin-top:var(--e2); max-width:24rem; font-size:.9375rem; }
.rodape h2{ font-size:.9375rem; font-family:var(--texto); font-weight:700; color:#fff; margin-bottom:var(--e1); }
.rodape__grade p{ font-size:.9375rem; line-height:1.8; }
.rodape a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.rodape a:hover{ border-bottom-color:#fff; }
.rodape .redes a{ border-bottom:0; }
.rodape__contato a{ display:inline-flex; align-items:center; min-height:44px; font-size:.9375rem; }
.rodape__base{
  margin-top:var(--e4); padding-top:var(--e3);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; font-size:.8125rem;
}
.rodape__credito{ color:rgba(255,255,255,.55); }

/* --- aviso (toast) --- */
.aviso{
  position:fixed; z-index:200; left:50%; bottom:24px; transform:translate(-50%,120%);
  padding:var(--e2) var(--e3); border-radius:999px;
  background:var(--tinta); color:#fff; font:600 .9375rem/1 var(--texto);
  box-shadow:var(--sombra-alta); pointer-events:none; opacity:0;
  transition:transform .4s var(--mola), opacity .3s ease;
}
.aviso.is-visivel{ transform:translate(-50%,0); opacity:1; }

/* ==========================================================================
   tablet
   ========================================================================== */
/* telas grandes: o container cresce, a prosa nao */
@media (min-width:1700px){
  :root{ --largura:1520px; --gutter:40px; }
  .faixa__corpo{ max-width:48rem; }
}
@media (min-width:2200px){
  :root{ --largura:1760px; }
  .servicos{ grid-template-columns:repeat(3,1fr); }
  .galeria{ gap:var(--e4); }
}

@media (max-width:1080px){
  .categorias{ grid-template-columns:repeat(3,1fr); gap:var(--e4) var(--e3); }
  .servicos{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .galeria__item--alto{ grid-row:auto; }
  .galeria__item--alto .media{ aspect-ratio:3/2; }
  .galeria__item--largo{ grid-column:span 2; }
  .dicas{ grid-template-columns:1fr; }
  .dica{ flex-direction:row; align-items:flex-start; gap:var(--e3); }
  .dica__foto{ flex:0 0 clamp(160px,28vw,280px); aspect-ratio:1; }
  .porque{ grid-template-columns:1fr; gap:var(--e4); }
  .porque__foto .media{ aspect-ratio:16/10; border-radius:var(--raio-g); }
  /* no celular o DOM ja esta na ordem certa: texto, formulario, apoio */
  .agenda{ grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:var(--e4); }
  .agenda__texto,.agenda__caixa,.agenda__apoio{ grid-column:1; grid-row:auto; }
  .rodape__grade{ grid-template-columns:repeat(2,1fr); }
  .feed{ grid-template-columns:repeat(3,1fr); }
  .nav__links{ display:none; }
}

/* ==========================================================================
   celular
   ========================================================================== */
@media (max-width:899px){
  /* a barra de baixo e fixa: sem estas duas medidas o ultimo bloco de cada
     secao entra por baixo dela, e um #ancora aterrissa com o botao tapado */
  html{ scroll-padding-top:84px; scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
  body{ padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)); }

  .nav__cta,.busca{ display:none; }
  /* No celular a pilula ia de ponta a ponta e tapava a cabeca do cachorro e a
     orelha do gato: 18% dos pixels opacos deles, medido no alfa do canvas.
     Aqui ela perde o fundo e vira DUAS pastilhas, uma no logo e outra na
     sacola, com o meio vazado. Os bichos aparecem pelo vao. */
  .nav__pilula{
    padding:0; background:none; border:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .nav.is-encolhida .nav__pilula{ background:none; box-shadow:none; padding:0; }
  .nav__logo,.nav__acoes{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.9);
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 12px 30px -20px rgba(90,53,201,.6);
    border-radius:999px;
  }
  .nav__logo{ padding:6px var(--e2) 6px var(--e2); }
  .nav__acoes{ padding:4px; }
  .nav__acoes{ margin-left:auto; }

  .barra-baixo{
    position:fixed; z-index:110; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
    padding:var(--e0) 4px calc(var(--e0) + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-top:1px solid rgba(90,53,201,.12);
  }
  .barra-baixo a,.barra-baixo button{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px;
    min-height:52px; padding:0 2px; border:0; background:none; cursor:pointer;
    color:var(--tinta-45); text-decoration:none; text-align:center;
    font:600 .625rem/1.2 var(--texto);
  }
  .barra-baixo svg{ width:22px; height:22px; }
  .barra-baixo [aria-current="page"]{ color:var(--roxo-tinta); }

  /* o icone da loja carrega o contador da sacola */
  .barra-baixo__icone{ position:relative; display:block; line-height:0; }
  .barra-baixo__conta{
    position:absolute; top:-5px; right:-8px; min-width:17px; height:17px; padding:0 4px;
    display:grid; place-items:center; border-radius:999px;
    background:var(--rosa-forte); color:#fff;
    font:700 .625rem/1 var(--texto); box-shadow:0 0 0 2px #fff;
  }
  .barra-baixo__conta.is-pulando{ animation:pulaConta .44s var(--expo); }
  @keyframes pulaConta{ 40%{ transform:scale(1.5) } }

  /* o do meio e a acao principal, e e a unica cor cheia da barra.
     Precisa do "a" junto: `.barra-baixo a` e mais especifico que a classe
     sozinha e a etiqueta saia cinza como a dos outros */
  .barra-baixo a.barra-baixo__acao{ color:var(--roxo-tinta); }
  .barra-baixo__disco{
    display:grid; place-items:center; width:46px; height:46px; margin-top:-16px;
    border-radius:999px; color:#fff;
    background:linear-gradient(150deg,var(--roxo) 0%,var(--roxo-tinta) 100%);
    box-shadow:0 8px 20px rgba(90,53,201,.36), 0 0 0 4px rgba(255,255,255,.92);
    transition:transform .28s var(--expo);
  }
  .barra-baixo__disco svg{ width:26px; height:26px; }
  .barra-baixo__acao:active .barra-baixo__disco{ transform:scale(.92); }
  .barra-baixo__acao[aria-current="page"] .barra-baixo__disco{ transform:scale(1.06); }

  .gaveta{ position:fixed; inset:0; z-index:150; display:block; }
  .gaveta__fundo{ position:absolute; inset:0; background:rgba(30,27,46,.45); backdrop-filter:blur(3px); animation:apareceFundo .28s ease both; }
  @keyframes apareceFundo{ from{ opacity:0 } to{ opacity:1 } }
  .gaveta__folha{
    position:absolute; left:0; right:0; bottom:0;
    /* a folha inteira TEM que caber sem rolar por dentro: os dois botoes do
       pe sao a razao de ela existir, e rolagem dentro de rolagem esconde
       justamente eles. As medidas abaixo foram cortadas ate fechar em 390x844 */
    max-height:92svh; overflow-y:auto;
    padding:var(--e1) var(--e3) 0;
    background:var(--lilas-claro);
    border-radius:var(--raio-g) var(--raio-g) 0 0;
    animation:sobeFolha .34s var(--expo) both;
  }
  @keyframes sobeFolha{ from{ transform:translateY(100%) } to{ transform:none } }
  .gaveta__puxador{
    display:block; width:56px; height:22px; margin:0 auto var(--e2);
    border:0; background:none; cursor:pointer;
  }
  .gaveta__puxador::before{ content:""; display:block; width:44px; height:5px; margin:8px auto; border-radius:999px; background:var(--tinta-12); }
  .gaveta__folha h2{ font-size:1.25rem; margin-bottom:var(--e2); }
  .gaveta__bichos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e1) var(--e2); margin-bottom:var(--e2); }
  .gaveta__bichos .categoria__foto{ background:var(--lilas-fundo); width:76px; margin-inline:auto; }
  .gaveta__links{ display:grid; border-top:1px solid var(--tinta-12); padding-top:var(--e1); }
  .gaveta__links a{
    display:flex; align-items:center; min-height:46px;
    font:700 1rem/1 var(--texto); color:var(--tinta); text-decoration:none;
  }
  /* as duas saidas ficam juntas no pe, onde o polegar chega sem esticar */
  /* Os dois botoes sao a razao da folha existir. Em tela baixa (SE, 667px) a
     lista de bichos nao cabe junto e eles saiam pra fora do alcance, entao
     ficam GRUDADOS no pe: o meio rola por dentro, eles nao saem do lugar. */
  .gaveta__acoes{
    position:sticky; bottom:0; z-index:1;
    display:grid; gap:var(--e1); margin-top:var(--e2);
    padding-block:var(--e1) calc(var(--e2) + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top, var(--lilas-claro) 78%, rgba(247,243,255,0));
  }
  .gaveta__acoes .botao{ width:100%; justify-content:center; }

  /* 186px e nao 148: com os cards fora do celular, o bloco de texto passou a
     descer mais e o "Ver preços" caia em cima do rotulo do osso, 33px de
     sobreposicao medidos em 844, 780 e 667. O padding de baixo e o que reserva
     a faixa do HUD, entao ele cresce junto. */
  .hero__grade{ display:flex; flex-direction:column; justify-content:flex-end; padding-block:96px 186px; gap:var(--e2); }
  .hero__copy{ order:2; }
  /* align-self:center herdado do desktop colapsava a caixa pra largura zero no
     flex do celular, e o card virava uma tira de uma palavra por linha */
  /* Os cards de vidro saem do celular INTEIROS. Numa tela de 390 eles
     disputavam os mesmos pixels com o cachorro e com a manchete, e o que
     sobrava era ruido: tres coisas brigando pela mesma faixa. No desktop
     existe coluna pra eles; aqui nao existe, e forcar so atrapalha. */
  .hero__cards{ display:none; }
  .hero__titulo{ font-size:clamp(2.1rem,10vw,3.2rem); }
  .hero__hud{ left:var(--gutter); right:var(--gutter); bottom:max(76px, calc(68px + env(safe-area-inset-bottom,0px))); }
  .hud__osso{ width:min(220px,64vw); }
  /* A pista some no celular desde sempre, e com ela sumia a UNICA frase que
     explica por que a pagina nao rola. O dedo empurrava, nada andava, e o
     unico texto na tela era "Pular". Ela volta, menor e colada no osso. */

  /* os arcos so na area de cima, dissolvendo antes da headline */
  .hero__arcos{
    inset:0 0 auto 0; height:56%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 46%,transparent 96%);
    mask-image:linear-gradient(to bottom,#000 0 46%,transparent 96%);
  }
  .arco{ bottom:0; }
  .arco--lilas{ width:88%; height:94%; left:62%; }
  .arco--rosa{ width:54%; height:70%; left:26%; }

  .cabeca--linha{ flex-direction:column; align-items:flex-start; }
  .setas{ display:none; }
  .servicos{ grid-template-columns:1fr; }
  .equipe ul{ gap:var(--e3); }
  /* As quatro fotos sao posicionadas nos cantos do retangulo largo. Num
     retangulo estreito nao existe canto livre: elas caiam em cima do "20% off"
     e do codigo do cupom. No celular saem do absoluto e viram uma fileira de
     tres acima do numero, que e onde sobra espaco de verdade. */
  .faixa__pets{
    position:static; display:flex; justify-content:center; align-items:center;
    gap:var(--e2); margin-bottom:var(--e2);
  }
  .faixa__pet{ position:static; inset:auto; width:68px; flex:0 0 auto; }
  .faixa__pet--3{ display:none; }
  .rodape__grade{ grid-template-columns:1fr; gap:var(--e4); }
  .rodape{ margin-bottom:0; }
  .secao--onda{ margin-top:-38px; }
  .onda{ top:-39px; height:40px; }
  .depoimentos{ grid-template-columns:1fr; gap:var(--e3); }
  .aviso{ bottom:88px; }
}

/* JANELA DEITADA (telefone virado, 932x430) E QUALQUER JANELA BAIXA.
   Quem manda aqui e a ALTURA, nao a largura: a grade do desktop cai num vao de
   430px e tudo se empilha. Medido nessa tela: o CTA "Agendar banho & tosa"
   sentava EM CIMA do osso e do rotulo "Tres etapas ate o pet pronto", "Ver
   precos" cobria o "Role para dar o banho", e a pilula do menu tapava o olho,
   porque o `align-content:center` centraliza a copy num vao onde ela nao cabe.
   Sai a decoracao (osso e rotulo), a copy passa a comecar ABAIXO da pilula em
   vez de ser centralizada, e o titulo encolhe. A instrucao de rolar fica. */
@media (min-width:900px) and (max-height:540px){
  .hud__rotulo,.hud__osso{ display:none; }
  /* e a instrucao desce pro rodape da tela: sem o osso, o hud encolhe pra
     altura de uma linha e, ancorado nos 78px de sempre, ela batia no CTA */
  .hero__hud{ gap:0; bottom:max(24px, calc(16px + env(safe-area-inset-bottom,0px))); }
  .hero__grade{ align-content:start; padding-block:92px 56px; }
  .hero__titulo{ font-size:clamp(1.8rem,4.4vw,2.4rem); }
  .hero__olho{ margin-bottom:var(--e1); min-height:0; }
  .hero__sub{ min-height:0; }
  .hero__cards{ display:none; }
}

/* TELA BAIXA (iPhone SE e afins). Aqui a conta nao fecha de jeito nenhum: em
   360x667 cobrir a largura ja obriga a imagem a 299px de altura, e ainda
   precisam caber 306px de copy, 110 de osso e 78 de barra. O osso e decoracao
   de progresso e o texto e conteudo, entao quem sai e o osso: o rotulo da
   etapa continua no olho ("Etapa 2 · secagem") e o "Pular" continua na tela. */
@media (max-width:899px) and (max-height:700px){
  /* Sai o OSSO, que e decoracao de progresso, e fica o rotulo da etapa, que
     e conteudo. (Este bloco ja escondeu o hud INTEIRO uma vez, e junto foi a
     unica frase que explicava por que a pagina nao rolava. A frase nao existe
     mais, porque a pagina rola.) */
  .hud__rotulo,.hud__osso{ display:none; }
  .hero__hud{ gap:0; animation-delay:400ms; }
  .hero__grade{ padding-block:72px 96px; }
}

@media (max-width:560px){
  .categorias{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:1fr; }
  .galeria__item--largo{ grid-column:auto; }
  .galeria__item--largo .media{ aspect-ratio:3/2; }
  .dica{ flex-direction:column; }
  .dica__foto{ flex:none; width:100%; aspect-ratio:3/2; }
  .faixa{ margin-inline:var(--e2); }
  .diferenciais{ grid-template-columns:1fr; gap:var(--e3); }
  .rodape__base{ flex-direction:column; gap:var(--e1); }
  .escolhas{ grid-template-columns:1fr; }
  .agenda__rodape{ flex-direction:column; align-items:stretch; }
  .agenda__botoes{ width:100%; }
  .agenda__botoes .botao{ flex:1; }
}

@media (max-width:380px){
  :root{ --gutter:16px; }
  .hero__titulo{ font-size:2rem; }
  .feed{ grid-template-columns:repeat(3,1fr); }
  .equipe li{ width:96px; }
}

/* ==========================================================================
   movimento reduzido: sem trava e sem palco, as quatro paradas em figuras
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  /* o hero vira tres blocos parados lado a lado: quadro-chave mais o texto de
     cada etapa. Sem trava, sem gesto, sem video. */
  .hero{ height:auto!important; min-height:0; overflow:visible; }
  .hero__tela{ position:static!important; }
  .hero__palco,.hero__atmosfera,.hero__cards,.hero__hud,.hero__arcos{ display:none!important; }
  .hero__grade{ height:auto; padding-block:120px var(--e4); }
  .hero__copy{ grid-column:1 / -1; max-width:56ch; }
  .hero__titulo,.hero__sub,.hero__olho{ min-height:0; }
  .linha > span{ transform:none!important; }
  .hero__olho,.hero__sub,.hero__acoes{ opacity:1!important; transform:none!important; }
  #ctaHero{ opacity:1!important; transform:none!important; pointer-events:auto!important; }

  .etapas-paradas{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e3);
    width:100%; max-width:var(--largura); margin:0 auto var(--e5);
    padding-inline:var(--gutter);
  }
  .etapas-paradas figure{ margin:0; }
  .etapas-paradas img{ width:100%; height:auto; border-radius:var(--raio-m); display:block; background:var(--lilas-fundo); }
  .etapas-paradas figcaption{ margin-top:var(--e2); font-size:.9375rem; line-height:1.6; color:var(--tinta-70); }
  .etapas-paradas strong{ display:block; font-family:var(--display); font-size:1rem; color:var(--tinta); margin-bottom:2px; }
  @media (max-width:1080px){ .etapas-paradas{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .etapas-paradas{ grid-template-columns:1fr; } }
  .arco{ --cresce:1; }
  .faixa__pet{ animation:none!important; }
  .patinhas,.espuma{ display:none; }
  .reage .media img{ transform:none!important; }
  .reage::after{ display:none; }
  .categorias li{ opacity:1!important; transform:none!important; }
  .categoria:hover .categoria__foto,.categoria.is-pulando .categoria__foto{ animation:none!important; }
  .bolha-nav{ animation:none!important; }
}