/* Toca do Bicho: LPs
   Paleta em identidade-visual/identidade-visual.md */
:root{
  --bege:#F6EFE7;
  --offwhite:#FBF8F2;
  --branco:#FFFFFF;
  --verde:#40AFA2;        /* marca: destaques, formas */
  --verde-claro:#A8D5CE;
  --salvia:#B3C6C2;
  --cta:#237A70;          /* exclusivo de botões (contraste 5,1 com branco) */
  --cta-hover:#1B6259;
  --grafite:#29272B;
  --cinza:#5E5C5B;
  --linha:#E4DBD2;
  --fonte-titulo:"Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fonte-texto:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largura:1080px;
  --leitura:680px;
  --raio:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bege);color:var(--grafite);font-family:var(--fonte-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--fonte-titulo);line-height:1.12;margin:0 0 .5em;color:var(--grafite);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6.2vw,3.3rem)}
h2{font-size:clamp(1.6rem,4.6vw,2.4rem)}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
strong{font-weight:800}
.destaque{color:var(--verde)}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 20px}
.leitura{max-width:var(--leitura)}
.centro{text-align:center;margin-left:auto;margin-right:auto}
section{padding:64px 0;position:relative}
.sec-branca{background:var(--offwhite)}
.sec-verde{background:var(--verde);color:var(--branco)}
.sec-verde h2,.sec-verde h3{color:var(--branco)}
.sec-salvia{background:#E3ECE9}

/* Topo */
.topo{background:var(--bege);padding:12px 0;position:relative;z-index:5}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topo img{width:132px}
.topo .tel{font-weight:800;color:var(--cta);text-decoration:none;font-size:.95rem;white-space:nowrap}

/* Hero */
.hero{padding:24px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-120px;right:-140px;width:420px;height:320px;background:var(--verde-claro);border-radius:50%;opacity:.7;z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;gap:28px;align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:48px}.hero{padding:40px 0 80px}}
.selo-google{display:inline-flex;align-items:center;gap:8px;background:var(--branco);border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:700;margin-bottom:16px;box-shadow:0 1px 0 var(--linha)}
.selo-google .estrelas{color:#E9A100;letter-spacing:1px}
.hero .sub{font-size:1.12rem;color:var(--cinza)}
.checks{list-style:none;padding:0;margin:0 0 24px}
.checks li{padding-left:30px;position:relative;margin-bottom:8px;font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hero-foto{border-radius:28px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 18px 40px -18px rgba(41,39,43,.35)}
.hero-foto img{width:100%;height:100%;object-fit:cover}

/* CTA */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:16px 26px;border:0;border-radius:999px;background:var(--cta);color:#fff;font:800 1.06rem/1.2 var(--fonte-texto);text-align:center;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.cta:hover{background:var(--cta-hover)}
.cta:active{transform:scale(.98)}
.cta:focus-visible{outline:3px solid var(--grafite);outline-offset:3px}
.cta svg{width:22px;height:22px;flex:none}
@media(min-width:720px){.cta{display:inline-flex;width:auto}}
.micro{font-size:.88rem;color:var(--cinza);margin-top:10px}
.bloco-cta{margin-top:28px}
.sec-verde .cta{background:var(--branco);color:var(--cta)}
.sec-verde .micro{color:#EAF6F4}

/* Listas de sintomas */
.sintomas{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
@media(min-width:720px){.sintomas{grid-template-columns:1fr 1fr}}
.sintomas li{background:var(--branco);border-radius:14px;padding:14px 16px 14px 48px;position:relative}
.sintomas li::before{content:"";position:absolute;left:14px;top:15px;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2340AFA2'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='3'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='3'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='3'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='3'/%3E%3Cpath d='M12 11c-3 0-6 4-6 6.5 0 2 1.6 2.5 3 2.5s2-.7 3-.7 1.6.7 3 .7 3-.5 3-2.5C18 15 15 11 12 11z'/%3E%3C/svg%3E") center/contain no-repeat}
.virada{font-family:var(--fonte-titulo);font-size:1.35rem;line-height:1.3;font-weight:700}

/* Duas colunas texto + imagem */
.duas{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.duas{grid-template-columns:1fr 1fr;gap:56px}.duas.inv>:first-child{order:2}}
.foto-redonda{border-radius:24px;overflow:hidden}
.foto-redonda img{width:100%;height:100%;object-fit:cover}
.legenda{font-size:.85rem;color:var(--cinza);margin-top:8px}

/* Depoimentos */
.depos{display:grid;gap:18px}
@media(min-width:900px){.depos{grid-template-columns:repeat(3,1fr)}}
.depo{background:var(--branco);border-radius:var(--raio);padding:24px;margin:0}
.depo .estrelas{color:#E9A100;letter-spacing:2px;margin-bottom:8px}
.depo h3{font-size:1.15rem;margin-bottom:.4em}
.depo p{color:var(--cinza);font-size:.98rem}
.depo footer{font-size:.9rem;font-weight:700}
.depo footer span{font-weight:400;color:var(--cinza)}

/* Autoridade */
.credenciais{list-style:none;padding:0;margin:20px 0}
.credenciais li{padding:10px 0;border-bottom:1px dashed var(--linha)}
.credenciais li strong{color:var(--cta)}

/* Passos */
.passos{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:p}
@media(min-width:900px){.passos{grid-template-columns:repeat(4,1fr)}}
.passos li{background:var(--branco);border-radius:var(--raio);padding:24px 20px;counter-increment:p;position:relative}
.passos li::before{content:counter(p);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--verde);color:#fff;font:800 1.2rem var(--fonte-titulo);margin-bottom:12px}
.passos h3{font-size:1.1rem}
.passos p{font-size:.97rem;color:var(--cinza);margin:0}

/* Diferenciais */
.difs{display:grid;gap:16px}
@media(min-width:720px){.difs{grid-template-columns:1fr 1fr}}
.dif{background:var(--branco);border-radius:var(--raio);padding:22px;border-top:5px solid var(--verde)}
.dif h3{font-size:1.12rem;margin-bottom:.35em}
.dif p{margin:0;color:var(--cinza);font-size:.97rem}

/* Galeria */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:900px){.galeria{grid-template-columns:repeat(4,1fr)}}
.galeria figure{margin:0;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:1}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{position:absolute;left:8px;bottom:8px;background:rgba(41,39,43,.78);color:#fff;font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:999px}

/* Tabela */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--raio);background:var(--branco)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
th,td{padding:14px 12px;border-bottom:1px solid var(--linha);text-align:center;vertical-align:top}
th{font-family:var(--fonte-texto);font-weight:800;font-size:1rem;background:#EFE6DC}
th:first-child,td:first-child{text-align:left;font-weight:700}
th.nos{background:var(--verde);color:#fff}
td.nos{background:#EAF6F4;font-weight:700}

/* Placeholder de foto */
.foto-pendente{background:repeating-linear-gradient(45deg,#EAE1D7,#EAE1D7 12px,#E2D8CC 12px,#E2D8CC 24px);border-radius:var(--raio);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:#6B5E52;font-size:.92rem;font-weight:700}

/* Pendências visíveis (remover antes de ir ao ar) */
.pend{background:#FFF4CC;color:#6B5200;border-radius:6px;padding:0 5px;font-size:.85em;font-weight:700;white-space:normal}

/* Local */
.local{display:grid;gap:24px}
@media(min-width:900px){.local{grid-template-columns:1fr 1fr;align-items:stretch}}
.local ul{list-style:none;padding:0;margin:0}
.local li{padding:10px 0 10px 34px;position:relative;border-bottom:1px dashed var(--linha)}
.local li span.ic{position:absolute;left:0;top:9px;font-size:1.1rem}
.mapa{border:0;width:100%;min-height:300px;border-radius:var(--raio)}

/* Para quem */
.pq{display:grid;gap:16px}
@media(min-width:720px){.pq{grid-template-columns:1fr 1fr}}
.pq>div{background:var(--branco);border-radius:var(--raio);padding:24px}
.pq ul{margin:0;padding-left:1.1em}
.pq li{margin-bottom:6px}
.caminhos{counter-reset:c;list-style:none;padding:0;margin:24px 0}
.caminhos li{counter-increment:c;padding:10px 0 10px 40px;position:relative;font-weight:700}
.caminhos li::before{content:counter(c);position:absolute;left:0;top:8px;width:28px;height:28px;border-radius:50%;background:var(--verde-claro);display:flex;align-items:center;justify-content:center;font-weight:800}
.caminhos li:last-child::before{background:var(--verde);color:#fff}

/* FAQ */
.faq details{background:var(--branco);border-radius:14px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800;list-style:none;padding-right:28px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:1.4rem;color:var(--verde)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--cinza)}

/* Final */
.final{text-align:center;overflow:hidden}
.final::after{content:"";position:absolute;bottom:-160px;left:-120px;width:380px;height:300px;background:#5CBDB1;border-radius:50%;opacity:.5}
.final .wrap{position:relative;z-index:1}

/* Rodapé */
.rodape{padding:40px 0 120px;font-size:.88rem;color:var(--cinza);background:var(--offwhite)}
.rodape img{width:120px;margin-bottom:14px}
.rodape p{margin:0 0 .5em}
.rodape nav a{color:var(--cta);font-weight:700;margin-right:14px}

/* Sticky mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(251,248,242,.97);box-shadow:0 -4px 18px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .25s;z-index:50}
.sticky-cta.visivel{transform:none}
@media(min-width:900px){.sticky-cta{display:none}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ===================== Motion design ===================== */

/* Hero: entrada suave ao carregar a página */
.hero .wrap>*{opacity:0;transform:translateY(18px);animation:entra-hero .7s cubic-bezier(.22,.9,.32,1) forwards}
.hero .wrap>*:nth-child(2){animation-delay:.12s}
.hero-foto{animation-delay:.05s !important}
@keyframes entra-hero{to{opacity:1;transform:none}}

/* Scroll-reveal: qualquer elemento marcado com [data-reveal] sobe e aparece ao entrar na tela */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1)}
[data-reveal].em-vista{opacity:1;transform:none}
/* Atraso escalonado para grupos de cartões (sintomas, depoimentos, passos, diferenciais, galeria) */
[data-reveal-grupo]>*{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.9,.32,1),transform .6s cubic-bezier(.22,.9,.32,1)}
[data-reveal-grupo].em-vista>*{opacity:1;transform:none}
[data-reveal-grupo].em-vista>*:nth-child(1){transition-delay:.02s}
[data-reveal-grupo].em-vista>*:nth-child(2){transition-delay:.09s}
[data-reveal-grupo].em-vista>*:nth-child(3){transition-delay:.16s}
[data-reveal-grupo].em-vista>*:nth-child(4){transition-delay:.23s}
[data-reveal-grupo].em-vista>*:nth-child(5){transition-delay:.30s}
[data-reveal-grupo].em-vista>*:nth-child(6){transition-delay:.37s}
[data-reveal-grupo].em-vista>*:nth-child(7){transition-delay:.44s}
[data-reveal-grupo].em-vista>*:nth-child(8){transition-delay:.51s}

/* Botões e cartões: um pouco mais de vida no hover/toque */
.cta{transition:background .18s,transform .18s,box-shadow .18s}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(35,122,112,.55)}
.sec-verde .cta:hover{box-shadow:0 10px 22px -10px rgba(0,0,0,.25)}
.depo,.dif,.sintomas li,.passos li,.galeria figure,.pq>div{transition:transform .25s cubic-bezier(.22,.9,.32,1),box-shadow .25s}
.depo:hover,.dif:hover,.passos li:hover{transform:translateY(-4px);box-shadow:0 14px 26px -16px rgba(41,39,43,.28)}
.galeria figure:hover img{transform:scale(1.06)}
.galeria img{transition:transform .5s cubic-bezier(.22,.9,.32,1)}
.checks li::before{transition:transform .2s}
.checks li:hover::before{transform:scale(1.15)}

/* FAQ: animação de altura ao abrir/fechar (com fallback para navegadores sem interpolate-size) */
.faq details{transition:background .2s}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--cta)}
.faq summary::after{transition:transform .3s cubic-bezier(.22,.9,.32,1),color .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .conteudo-faq{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s cubic-bezier(.22,.9,.32,1),opacity .3s ease .05s}
.faq .conteudo-faq>p{overflow:hidden;margin:0}
.faq details[open] .conteudo-faq{grid-template-rows:1fr;opacity:1}
.faq details[open] .conteudo-faq>p{margin-top:12px}

@media (prefers-reduced-motion:reduce){
  .hero .wrap>*{animation:none;opacity:1;transform:none}
  [data-reveal],[data-reveal-grupo]>*{transition:none}
  .cta:hover,.depo:hover,.dif:hover,.passos li:hover{transform:none}
}

/* Recortes da curadoria de fotos: manter rostos, aves e ninhadas inteiros. */
.hero-foto.foto-equipe{aspect-ratio:1350/717}
.hero-foto.foto-equipe img{object-fit:contain}
.hero-foto.foto-filhotes img{object-position:50% 42%}
.foto-retrato{aspect-ratio:4/5;object-position:50% 35%}
.foto-vitrine{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio);margin-bottom:14px}
.hero-ambiente .legenda{margin-bottom:0}

.galeria figcaption{max-width:calc(100% - 16px);line-height:1.3}

/* Heroes ilustrativas: preservar aparelho, radiografia e todas as patas. */
.hero-foto.foto-ilustrativa{aspect-ratio:4/3}
.hero-foto.foto-ilustrativa img{object-fit:contain}
.hero-visual .legenda{margin-bottom:0}