/* =========================================================
   Felinne & Cia — Centro Médico Veterinário
   Direção visual: verde profundo dominante, oliva e lima como
   detalhe, laranja para ação, creme como apoio.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Verdes — herdados da placa do logo oficial (#7C9A54) */
  --verde:       #123D22;
  --verde-2:     #0D2E19;
  --verde-3:     #1B5230;
  --oliva:       #7C9A54;
  --oliva-esc:   #566E38;   /* AA sobre creme e creme-2 */
  --lima:        #B4D45E;

  /* Apoio */
  --creme:       #F7F1E6;
  --creme-2:     #EFE4D0;
  --caramelo:    #DFBB8C;

  /* Ação — laranja do gato do logo (#F08A35) */
  --laranja:     #F08A34;
  --laranja-esc: #C25520;
  --laranja-clr: #F9A45C;

  /* Texto sobre creme */
  --tinta:       #16240F;
  --tinta-2:     #4A5644;

  --fonte-t: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --fonte-c: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --limite: 1180px;
  --gutter: clamp(20px, 1rem + 1.6vw, 28px);
  --secao-y: clamp(72px, 3rem + 6vw, 132px);

  --ease: cubic-bezier(.22,.9,.3,1);
  --barra-h: 88px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--fonte-c);
  font-size:clamp(15.5px, 15px + .18vw, 17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
iframe{ border:0; display:block; }
cite{ font-style:normal; }
::selection{ background:var(--lima); color:var(--verde-2); }

:where(a,button,iframe,[tabindex]):focus-visible{
  outline:3px solid var(--lima); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.skip-link{
  position:absolute; left:50%; top:-120px; transform:translateX(-50%); z-index:300;
  background:var(--lima); color:var(--verde-2); font-weight:700;
  padding:12px 22px; border-radius:100px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

/* ---------- 3. Utilitários ---------- */
.limite{
  width:100%; max-width:var(--limite);
  margin-inline:auto; padding-inline:var(--gutter);
  position:relative;
}
section[id]{ scroll-margin-top:90px; }

.rotulo{
  display:inline-block;
  font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oliva-esc); margin-bottom:16px;
}
.rotulo--lima{ color:var(--lima); }
.rotulo--escuro{ color:var(--verde-2); }

.titulo{
  font-family:var(--fonte-t); font-weight:700;
  font-size:clamp(30px, 1.3rem + 2.9vw, 54px);
  line-height:1.1; letter-spacing:-.5px;
  color:var(--verde); text-wrap:balance;
}
.titulo--claro{ color:var(--creme); }
.titulo--sobre-oliva{ color:var(--verde-2); }
.titulo mark{
  background:none; color:var(--oliva-esc);
  position:relative; white-space:nowrap;
}
.titulo--claro mark{ color:var(--lima); }
.titulo--sobre-oliva mark{ color:var(--creme); }
.titulo mark::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.1em;
  background:var(--laranja); border-radius:100px; opacity:.85;
}

.p-grande{ font-size:clamp(17px, 16px + .4vw, 20px); line-height:1.6; color:var(--tinta-2); }
.p-grande--claro{ color:rgba(247,241,230,.82); }

/* ---------- 4. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--fonte-c); font-weight:700;
  font-size:16px; line-height:1;
  padding:17px 28px; border-radius:100px;
  border:2px solid transparent;
  transition:transform .16s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .16s var(--ease);
  text-align:center;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn--sm{ padding:12px 20px; font-size:14.5px; }
.btn--lg{ padding:19px 34px; font-size:17px; }

.btn--laranja{
  background:var(--laranja); color:#3A1E08;
  box-shadow:0 6px 0 -1px var(--laranja-esc);
}
.btn--laranja:hover{ background:var(--laranja-clr); transform:translateY(-2px); box-shadow:0 8px 0 -1px var(--laranja-esc); }
.btn--laranja:active{ transform:translateY(2px); box-shadow:0 3px 0 -1px var(--laranja-esc); }

.btn--contorno{ border-color:rgba(247,241,230,.42); color:var(--creme); }
.btn--contorno:hover{ border-color:var(--lima); background:rgba(180,212,94,.12); transform:translateY(-2px); }

.btn--lima{ background:var(--lima); color:var(--verde-2); box-shadow:0 6px 0 -1px #8CAA42; }
.btn--lima:hover{ background:#C4E070; transform:translateY(-2px); }

.btn--escuro{ background:var(--verde); color:var(--creme); box-shadow:0 6px 0 -1px var(--verde-2); }
.btn--escuro:hover{ background:var(--verde-3); transform:translateY(-2px); }

.ico-zap{ fill:currentColor; }

/* =========================================================
   5. TOPO + HERO
   ========================================================= */
.topo{
  position:relative; overflow:hidden;
  background:var(--verde);
  padding-bottom:clamp(120px, 8vw, 170px);
  color:var(--creme);
}
.topo__brilho{
  position:absolute; right:-12%; top:-20%;
  width:60vw; height:60vw; max-width:780px; max-height:780px;
  background:radial-gradient(circle, rgba(180,212,94,.17) 0%, rgba(180,212,94,0) 62%);
  pointer-events:none; z-index:0;
}
.tubo{
  position:absolute; left:0; right:0; bottom:96px;
  width:100%; height:260px; z-index:0; pointer-events:none;
}

/* --- Barra --- */
.barra{
  display:flex; align-items:center; gap:28px;
  min-height:var(--barra-h); padding-block:18px;
}
.marca{ display:flex; align-items:center; gap:12px; flex:none; }
.marca__bichos{ width:52px; height:auto; flex:none; }
.marca__txt b{
  display:block; font-family:var(--fonte-t); font-weight:800;
  font-size:22px; line-height:1; letter-spacing:.2px; color:var(--creme);
}
.marca__txt span{
  display:block; margin-top:4px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--lima);
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav__lista{ display:flex; gap:26px; }
.nav__link{
  font-size:15px; font-weight:600; color:rgba(247,241,230,.82);
  white-space:nowrap;
  padding-block:6px; border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover,
.nav__link.ativo{ color:var(--creme); border-bottom-color:var(--lima); }

.zap-topo{
  display:flex; align-items:center; gap:9px; flex:none;
  font-weight:700; font-size:15px; color:var(--creme);
  padding-left:24px; border-left:1px solid rgba(247,241,230,.2);
}
.zap-topo svg{ width:17px; height:17px; fill:var(--lima); }
.zap-topo:hover{ color:var(--lima); }

.burger{
  display:none; width:46px; height:46px; margin-right:-8px;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{
  display:block; width:24px; height:2.5px; border-radius:2px; background:var(--creme);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }

.nav-fundo{
  position:fixed; inset:0; z-index:150; background:rgba(9,26,15,.6);
  opacity:0; transition:opacity .3s var(--ease);
}
.nav-fundo.visivel{ opacity:1; }

/* --- Hero --- */
.hero{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(36px, 2rem + 3vw, 60px);
  align-items:center; padding-top:clamp(28px, 1rem + 3vw, 56px);
}
.selo{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(180,212,94,.14); border:1px solid rgba(180,212,94,.42);
  color:var(--lima); font-weight:700; font-size:13.5px;
  padding:8px 16px; border-radius:100px; margin-bottom:24px;
}
.selo svg{ width:17px; height:17px; flex:none; }

.hero__h1{
  font-family:var(--fonte-t); font-weight:800;
  font-size:clamp(36px, 1.2rem + 4.1vw, 62px);
  line-height:1.06; letter-spacing:-.8px;
  color:var(--creme); margin-bottom:20px; text-wrap:balance;
}
.hero__h1 span{ color:var(--lima); }
.hero__lead{
  font-size:clamp(16.5px, 16px + .4vw, 19px); line-height:1.62;
  color:rgba(247,241,230,.8); max-width:46ch; margin-bottom:32px;
}
.hero__botoes{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

.hero__infos{
  display:flex; flex-wrap:wrap; gap:26px 34px;
  padding-top:26px; border-top:1px solid rgba(247,241,230,.16);
}
.hero__infos li{ display:flex; gap:11px; align-items:flex-start; }
.hero__infos svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--lima); }
.hero__infos b{ display:block; font-size:15px; font-weight:700; color:var(--creme); line-height:1.35; }
.hero__infos small{ font-size:13px; color:rgba(247,241,230,.62); }

/* --- Palco: fotografia real dentro da placa da marca --- */
.palco{ position:relative; padding-top:92px; }
.palco__bichos{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(330px, 74%); height:auto; z-index:2;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.3));
}
.palco__placa{
  position:relative; z-index:1;
  background:var(--oliva);
  border:3px solid rgba(255,255,255,.18);
  border-radius:34px;
  padding:74px 24px 24px;
  box-shadow:0 28px 54px rgba(0,0,0,.34);
}
.palco__foto{
  border-radius:24px; overflow:hidden; aspect-ratio:1/1;
  background:var(--oliva-esc);
}
.palco__foto img{ width:100%; height:100%; object-fit:cover; }
.palco__tag{
  margin-top:16px; text-align:center;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

/* --- Onda de transição --- */
.onda{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; z-index:3; display:block; }

/* =========================================================
   6. A CLÍNICA — fotografia grande + texto
   ========================================================= */
.clinica{ background:var(--creme); padding-block:clamp(40px, 2rem + 3vw, 72px) var(--secao-y); }
.clinica__grade{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px, 2rem + 3vw, 64px); align-items:center;
}
.clinica__foto{ position:relative; z-index:0; }
.clinica__foto img{
  width:100%; border-radius:28px 28px 120px 28px;
  aspect-ratio:4/5; object-fit:cover;
  box-shadow:0 24px 48px rgba(18,61,34,.16);
}
.clinica__foto::before{
  content:""; position:absolute; inset:auto -18px -18px auto;
  width:58%; height:58%; border-radius:0 0 120px 0;
  border-right:3px solid var(--lima); border-bottom:3px solid var(--lima);
  z-index:-1;
}
.clinica__selo{
  position:absolute; top:-26px; left:-20px;
  width:112px; height:112px;
  display:grid; place-items:center; padding-inline:13px;
  background:var(--verde); border-radius:50%;
  box-shadow:0 12px 26px rgba(18,61,34,.28);
}
.clinica__selo svg{ width:100%; height:auto; display:block; }

.clinica__texto .titulo{ margin-bottom:20px; }
.clinica__texto .p-grande{ margin-bottom:14px; }
.clinica__texto > p:last-of-type{ color:var(--tinta-2); }

.marcadores{ margin-top:32px; display:grid; gap:14px; }
.marcadores li{
  position:relative; padding-left:26px;
  font-size:15.5px; color:var(--tinta-2); line-height:1.55;
}
.marcadores li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:11px; border-radius:50%;
  background:var(--laranja);
}
.marcadores b{ display:block; color:var(--verde); font-family:var(--fonte-t); font-size:19px; font-weight:700; }

/* =========================================================
   7. SERVIÇOS — lista editorial, sem cards
   ========================================================= */
.servicos{ background:var(--creme-2); padding-block:var(--secao-y); }
.servicos__topo{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
  align-items:end; margin-bottom:clamp(34px, 2rem + 2vw, 56px);
}
.servicos__intro{ color:var(--tinta-2); font-size:16.5px; max-width:44ch; }

.lista-svc{ border-top:2px solid rgba(22,36,15,.16); }
.svc{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(18px, 1rem + 2vw, 44px); align-items:start;
  padding:clamp(20px, 1rem + 1.4vw, 30px) clamp(8px, 1vw, 18px);
  border-bottom:1px solid rgba(22,36,15,.16);
  transition:background-color .28s var(--ease), padding-left .28s var(--ease);
}
.svc:hover{ background:rgba(124,154,84,.14); }
.svc__num{
  font-family:var(--fonte-t); font-weight:700;
  font-size:clamp(30px, 1rem + 2.4vw, 46px); line-height:.92;
  color:#708B4C; min-width:1.9em;
}
.svc__corpo h3{
  font-family:var(--fonte-t); font-weight:700;
  font-size:clamp(20px, 1rem + 1vw, 27px); line-height:1.2;
  color:var(--verde); margin-bottom:3px;
}
.svc__corpo p{ color:var(--tinta-2); font-size:15.5px; max-width:62ch; }
.svc__ico{ width:44px; height:44px; color:var(--oliva-esc); flex:none; }
.svc__ico svg{
  width:100%; height:100%; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; fill:none;
}
.svc:hover .svc__num{ color:var(--laranja); }
.svc:hover .svc__ico{ color:var(--verde); }

/* =========================================================
   8. MEDICINA FELINA — bloco escuro + foto sangrando
   ========================================================= */
.felina{
  position:relative; background:var(--verde-2); color:var(--creme);
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  align-items:stretch; isolation:isolate;
}
.felina::before,
.felina::after{
  content:""; position:absolute; left:0; right:0; height:clamp(38px, 4vw, 72px);
  z-index:3; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%;
}
.felina::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 44 C1190 96 1000 22 720 60 C420 100 220 12 0 56 Z' fill='%23EFE4D0'/%3E%3C/svg%3E");
}
.felina::after{
  bottom:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 66 C 220 12 400 104 720 64 C 1000 30 1200 92 1440 48 L1440 110 L0 110 Z' fill='%23F7F1E6'/%3E%3C/svg%3E");
}
.felina__foto{ position:relative; overflow:hidden; min-height:clamp(420px, 46vw, 620px); }
.felina__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.felina__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,46,25,.34) 0%, rgba(13,46,25,.02) 42%, rgba(13,46,25,.72) 100%);
}
.felina__conteudo{
  display:flex; align-items:center;
  padding:clamp(72px, 6vw, 120px) var(--gutter) clamp(72px, 6vw, 120px) clamp(30px, 4vw, 68px);
}
.felina__caixa{ max-width:560px; }
.felina__caixa .titulo{ margin-bottom:18px; }
.pilulas{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 30px; }
.pilulas li{
  font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:100px;
  border:1px solid rgba(180,212,94,.42); color:var(--lima);
}

/* =========================================================
   9. ESTRUTURA — galeria assimétrica
   ========================================================= */
.estrutura{ background:var(--creme); padding-block:var(--secao-y); }
.estrutura__topo{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
  align-items:end; margin-bottom:clamp(32px, 2rem + 2vw, 52px);
}
.estrutura__intro{ color:var(--tinta-2); font-size:16.5px; max-width:44ch; }

.galeria{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(12px, 1vw + 4px, 20px); align-items:start;
}
.galeria figure img{
  width:100%; height:100%; object-fit:cover;
  border-radius:24px; box-shadow:0 20px 40px rgba(18,61,34,.15);
}
.galeria figcaption{
  margin-top:12px; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-esc);
}
.galeria__a{ grid-column:1 / 6; }
.galeria__a img{ aspect-ratio:3/4.15; border-radius:28px 28px 28px 110px; }
.galeria__b{ grid-column:6 / 10; margin-top:clamp(24px, 4vw, 64px); }
.galeria__b img{ aspect-ratio:4/3.2; }
.galeria__c{ grid-column:10 / 13; }
.galeria__c img{ aspect-ratio:3/4; border-radius:24px 24px 90px 24px; }

.galeria__notas{
  grid-column:6 / 13; margin-top:clamp(16px, 2vw, 28px);
  background:var(--verde); color:var(--creme);
  border-radius:28px 28px 28px 90px; padding:clamp(24px, 2vw + 10px, 38px);
  display:grid; gap:clamp(18px, 2vw, 30px);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.galeria__notas h3{
  font-family:var(--fonte-t); font-weight:700; font-size:19px;
  color:var(--lima); margin-bottom:5px;
}
.galeria__notas p{ font-size:14.5px; color:rgba(247,241,230,.76); line-height:1.55; }

/* =========================================================
   10. EQUIPE — bloco oliva + fotografia real
   ========================================================= */
.equipe{ background:var(--oliva); padding-block:var(--secao-y); position:relative; }
.equipe__grade{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px, 2rem + 3vw, 64px); align-items:center;
}
.equipe__foto img{
  width:100%; aspect-ratio:1/1.05; object-fit:cover;
  border-radius:130px 28px 28px 28px;
  border:4px solid rgba(255,255,255,.28);
  box-shadow:0 26px 50px rgba(10,30,15,.28);
}
.equipe__intro{ color:#122D14; font-size:17px; margin-top:14px; max-width:46ch; }
.equipe__texto .titulo{ margin-bottom:4px; }

.pessoas{ margin-top:34px; display:grid; gap:0; }
.pessoas li{ padding:24px 0; border-top:1px solid rgba(18,45,20,.24); }
.pessoas li:last-child{ border-bottom:1px solid rgba(18,45,20,.24); }
.pessoas h3{
  font-family:var(--fonte-t); font-weight:700;
  font-size:clamp(22px, 1rem + 1.3vw, 30px); line-height:1.15;
  color:var(--verde-2); margin-bottom:4px;
}
.pessoas p{ font-size:15.5px; color:#122D14; }
.pessoas p b{
  display:inline-block; vertical-align:middle; margin-left:2px;
  background:var(--verde-2); color:var(--lima);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  padding:4px 12px; border-radius:100px;
}
/* Hierarquia por tamanho, não por opacidade: sobre oliva o contraste é apertado. */
.pessoas small{ display:block; margin-top:8px; font-size:13.5px; color:#122D14; }

/* =========================================================
   11. DIFERENCIAIS — verde escuro, tipográfico
   ========================================================= */
.valores{
  position:relative; overflow:hidden;
  background:var(--verde); color:var(--creme);
  padding-block:var(--secao-y);
}
.valores__marca{
  position:absolute; right:-70px; bottom:-40px; width:min(420px, 42vw);
  opacity:.07; z-index:0; pointer-events:none;
}
.valores__marca svg{ width:100%; height:auto; display:block; }
.valores__topo{ max-width:44ch; margin-bottom:clamp(34px, 2rem + 2vw, 58px); }

.valores__lista{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(28px, 2vw + 10px, 46px) clamp(32px, 3vw, 70px);
}
.valores__lista li{
  position:relative; padding-left:clamp(56px, 5vw, 74px);
  border-top:1px solid rgba(247,241,230,.18); padding-top:22px;
}
.valores__lista li:nth-child(even){ transform:translateY(clamp(0px, 2vw, 34px)); }
.valores__lista span{
  position:absolute; left:0; top:16px;
  font-family:var(--fonte-t); font-weight:700; font-size:clamp(30px, 3vw, 42px);
  line-height:1; color:transparent;
  -webkit-text-stroke:1.6px var(--lima);
}
.valores__lista h3{
  font-family:var(--fonte-t); font-weight:700;
  font-size:clamp(19px, 1rem + .8vw, 24px); color:var(--creme); margin-bottom:6px;
}
.valores__lista p{ font-size:15.5px; color:rgba(247,241,230,.74); line-height:1.6; }

/* =========================================================
   12. DEPOIMENTOS — editorial
   ========================================================= */
.vozes{ background:var(--creme); padding-block:var(--secao-y); }
.vozes__grade{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(34px, 3vw + 12px, 72px); align-items:start;
}
.vozes__destaque{ position:relative; }
.vozes__destaque blockquote{ position:relative; padding-left:clamp(38px, 4vw, 62px); }
.vozes__destaque blockquote::before{
  content:"“"; position:absolute; left:-6px; top:-.18em;
  font-family:var(--fonte-t); font-weight:800;
  font-size:clamp(80px, 9vw, 140px); line-height:1; color:var(--lima);
}
.vozes__destaque blockquote p{
  font-family:var(--fonte-t); font-weight:600;
  font-size:clamp(24px, 1rem + 2.2vw, 40px); line-height:1.22;
  color:var(--verde); letter-spacing:-.3px;
}
.vozes__destaque cite{
  display:inline-block; margin-top:22px; margin-left:clamp(38px, 4vw, 62px);
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oliva-esc);
}
.vozes__menores{ display:grid; gap:26px; padding-top:14px; }
.vozes__menores figure{ border-top:2px solid var(--oliva); padding-top:20px; }
.vozes__menores blockquote p{
  font-family:var(--fonte-t); font-weight:600; font-size:clamp(17px, 1rem + .5vw, 21px);
  line-height:1.35; color:var(--verde);
}
.vozes__menores figcaption{
  margin-top:12px; font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-2);
}

/* =========================================================
   13. CHAMADA — faixa laranja
   ========================================================= */
.chamada{ background:var(--laranja); color:#3A1E08; padding-block:clamp(48px, 4vw + 16px, 80px); }
.chamada__grade{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px, 3vw, 48px); flex-wrap:wrap;
}
.chamada h2{
  font-family:var(--fonte-t); font-weight:800;
  font-size:clamp(26px, 1rem + 2.4vw, 44px); line-height:1.08;
  letter-spacing:-.5px; max-width:18ch;
}
.chamada p{ margin-top:10px; font-size:17px; color:#3A1E08; max-width:42ch; }

/* =========================================================
   14. LOCALIZAÇÃO
   ========================================================= */
.local{ background:var(--verde); color:var(--creme); padding-block:var(--secao-y); }
.local__grade{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px, 3vw + 14px, 66px); align-items:center;
}
.local__texto .titulo{ margin-bottom:30px; }
.local__dados{ display:grid; gap:22px; }
.local__dados li{ display:flex; gap:14px; align-items:flex-start; }
.local__dados svg{ width:21px; height:21px; flex:none; margin-top:4px; color:var(--lima); }
.local__dados small{
  display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lima); margin-bottom:3px;
}
.local__dados b{ font-family:var(--fonte-t); font-weight:600; font-size:19px; line-height:1.35; color:var(--creme); }
.local__dados a:hover{ color:var(--lima); }
.local__botoes{
  display:flex; flex-wrap:wrap; gap:13px;
  margin-top:34px; padding-top:30px; border-top:1px solid rgba(247,241,230,.18);
}

.local__visual{ display:grid; gap:16px; }
.local__fachada img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 42%;
  border-radius:110px 28px 28px 28px;
  border:3px solid rgba(180,212,94,.32);
}
.local__mapa{ border-radius:24px; overflow:hidden; border:3px solid rgba(180,212,94,.32); }
.local__mapa iframe{ width:100%; height:clamp(200px, 20vw, 250px); filter:saturate(.85); }

/* =========================================================
   15. RODAPÉ
   ========================================================= */
.rodape{ background:var(--verde-2); color:rgba(247,241,230,.72); padding-block:clamp(48px, 4vw, 72px) 26px; font-size:15px; }
.rodape__grade{
  display:grid; gap:clamp(30px, 3vw, 52px);
  grid-template-columns:1.4fr .8fr .8fr;
  padding-bottom:clamp(32px, 3vw, 48px);
}
.marca--rodape .marca__bichos{ width:46px; }
.rodape__resp{ margin-top:22px; line-height:1.6; color:rgba(247,241,230,.76); }
.rodape__resp em{ font-style:normal; font-size:13px; letter-spacing:.12em; color:var(--lima); }
.rodape h3{
  font-family:var(--fonte-t); font-weight:700; font-size:16px;
  color:var(--lima); margin-bottom:14px;
}
.rodape__nav ul, .rodape__contato ul{ display:grid; gap:9px; }
.rodape a:hover{ color:var(--lima); }
.rodape__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  padding-top:22px; border-top:1px solid rgba(247,241,230,.13);
  font-size:13.5px; color:rgba(247,241,230,.6);
}

/* =========================================================
   16. WHATSAPP FLUTUANTE
   ========================================================= */
.zap-flutua{
  position:fixed; z-index:120;
  bottom:clamp(16px, 2.4vw, 26px); right:clamp(16px, 2.4vw, 26px);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--laranja); color:#3A1E08;
  box-shadow:0 6px 0 -1px var(--laranja-esc), 0 12px 28px rgba(0,0,0,.26);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s;
}
.zap-flutua.visivel{ opacity:1; visibility:visible; transform:none; }
.zap-flutua:hover{ background:var(--laranja-clr); transform:translateY(-3px); }
.zap-flutua svg{ width:29px; height:29px; fill:currentColor; }

/* =========================================================
   17. ANIMAÇÕES DE ENTRADA
   ========================================================= */
.js .anim{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.anim.dentro{ opacity:1; transform:none; }
.svc.anim:nth-child(2){ transition-delay:.05s; }
.svc.anim:nth-child(3){ transition-delay:.1s; }
.svc.anim:nth-child(4){ transition-delay:.15s; }
.svc.anim:nth-child(5){ transition-delay:.2s; }
.svc.anim:nth-child(6){ transition-delay:.25s; }
.valores__lista li.anim:nth-child(2){ transition-delay:.07s; }
.valores__lista li.anim:nth-child(3){ transition-delay:.14s; }
.valores__lista li.anim:nth-child(4){ transition-delay:.21s; }
.valores__lista li.anim{ transition-property:opacity, transform; }
.valores__lista li.anim.dentro:nth-child(even){ transform:translateY(clamp(0px, 2vw, 34px)); }
@media (prefers-reduced-motion: reduce){
  .js .anim{ opacity:1; transform:none; }
  .valores__lista li.anim:nth-child(even){ transform:translateY(clamp(0px, 2vw, 34px)); }
}

/* =========================================================
   18. RESPONSIVO
   ========================================================= */

/* --- Notebooks --- */
@media (max-width:1080px){
  .nav__lista{ gap:20px; }
  .nav__link{ font-size:14.5px; }
  .zap-topo{ display:none; }
}

/* --- Tablet --- */
@media (max-width:980px){
  .barra{ gap:18px; min-height:76px; }
  .burger{ display:flex; position:relative; z-index:200; }
  .marca{ position:relative; z-index:200; }

  .nav{
    position:fixed; inset:0 0 0 auto; z-index:160;
    width:min(86vw, 350px); height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    margin-left:0; padding:104px var(--gutter) 40px;
    background:var(--verde-2);
    border-left:1px solid rgba(180,212,94,.22);
    transform:translateX(101%); transition:transform .4s var(--ease);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.aberto{ transform:none; }
  .nav__lista{ flex-direction:column; gap:0; }
  .nav__lista li + li{ border-top:1px solid rgba(247,241,230,.13); }
  .nav__link{
    display:block; padding:15px 0; font-size:19px;
    font-family:var(--fonte-t); font-weight:600; color:var(--creme);
    border-bottom:0;
  }
  .nav__link.ativo{ color:var(--lima); }
  .nav__cta{ margin-top:26px; width:100%; }
  body.menu-aberto{ overflow:hidden; }

  .hero{ grid-template-columns:1fr; gap:clamp(64px, 9vw, 92px); }
  .palco{ max-width:440px; margin-inline:auto; width:100%; }
  .tubo{ display:none; }

  .clinica__grade,
  .equipe__grade,
  .local__grade{ grid-template-columns:1fr; }
  .clinica__foto,
  .equipe__foto{ max-width:440px; }
  .servicos__topo,
  .estrutura__topo{ grid-template-columns:1fr; gap:18px; align-items:start; }

  .felina{ grid-template-columns:1fr; }
  .felina__foto{ min-height:clamp(300px, 52vw, 420px); }
  .felina__foto::after{ background:linear-gradient(180deg, rgba(13,46,25,.42) 0%, rgba(13,46,25,.06) 40%, rgba(13,46,25,.55) 100%); }
  .felina__conteudo{ padding:clamp(48px, 8vw, 76px) var(--gutter) clamp(64px, 8vw, 90px); }

  .galeria{ grid-template-columns:repeat(6,1fr); }
  .galeria__a{ grid-column:1 / 7; }
  .galeria__a img{ aspect-ratio:4/3.1; border-radius:28px 28px 28px 90px; }
  .galeria__b{ grid-column:1 / 4; margin-top:0; }
  .galeria__c{ grid-column:4 / 7; }
  .galeria__b img, .galeria__c img{ aspect-ratio:3/3.6; }
  .galeria__notas{ grid-column:1 / 7; grid-template-columns:1fr; gap:20px; }

  .vozes__grade{ grid-template-columns:1fr; }
  .rodape__grade{ grid-template-columns:1fr 1fr; }
  .rodape__marca{ grid-column:1 / -1; }
}

/* --- Mobile --- */
@media (max-width:620px){
  :root{ --secao-y:64px; }

  .marca__bichos{ width:44px; }
  .marca__txt b{ font-size:19px; }
  .marca__txt span{ font-size:9px; letter-spacing:.2em; }

  .topo{ padding-bottom:clamp(90px, 18vw, 120px); }
  .hero__botoes .btn{ flex:1 1 100%; }
  .hero__infos{ gap:18px; }
  .hero__infos li{ flex:1 1 100%; }

  .palco{ padding-top:66px; }
  .palco__bichos{ width:min(240px, 66%); }
  .palco__placa{ padding:54px 16px 18px; border-radius:28px; }
  .palco__foto{ border-radius:20px; }

  .clinica__selo{ width:88px; height:88px; top:-20px; left:-10px; padding-inline:10px; }
  .clinica__foto img{ border-radius:24px 24px 90px 24px; }

  .svc{ grid-template-columns:auto 1fr; gap:14px 16px; padding-inline:0; }
  .svc__ico{ display:none; }
  .svc__num{ font-size:26px; min-width:auto; }

  .galeria{ grid-template-columns:1fr; }
  .galeria__a, .galeria__b, .galeria__c, .galeria__notas{ grid-column:1 / -1; }
  .galeria__a img, .galeria__b img, .galeria__c img{ aspect-ratio:4/3.2; }

  .valores__lista{ grid-template-columns:1fr; }
  .valores__lista li:nth-child(even),
  .valores__lista li.anim.dentro:nth-child(even){ transform:none; }
  .valores__marca{ width:260px; right:-60px; }

  .equipe__foto img{ border-radius:90px 24px 24px 24px; }
  .local__fachada img{ border-radius:80px 24px 24px 24px; }
  .local__botoes .btn{ flex:1 1 100%; }

  .chamada__grade{ display:block; }
  .chamada .btn{ margin-top:26px; width:100%; }

  .rodape__grade{ grid-template-columns:1fr; }
  .rodape__base{ flex-direction:column; align-items:flex-start; }

  .zap-flutua{ width:54px; height:54px; }
  .zap-flutua svg{ width:27px; height:27px; }
}

/* --- Telas grandes --- */
@media (min-width:1500px){
  :root{ --limite:1280px; }
}