/* Amigo Bicho · estilos mobile-first. Identidade em IDENTIDADE-VISUAL.md. */
:root {
  --teal: #0B7C7E; --teal-escuro: #06605F; --oliva: #817F10;
  --verde-zap: #188451; --verde-zap-hover: #146C44;
  --telefone-fundo: #E8F3EA; --telefone-texto: #185D44;
  --pinho: #1B4A44; --pinho-profundo: #0F332E; --creme: #E2DACD;
  --creme-claro: #F2EDE4; --creme-puro: #FAF7F2; --sage: #7EA19D;
  --branco: #fff; --texto: #0F332E; --texto-suave: #52615A;
  --borda: rgba(27,74,68,.17); --f-titulo: 'Archivo', sans-serif;
  --f-texto: 'Montserrat', sans-serif; --raio: 24px;
  --largura: 1240px; --fita-h: 34px; --cab-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme-puro); color: var(--texto); font: 400 1rem/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
figure, blockquote, p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.3rem; }
svg { width: 22px; height: 22px; flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
.container { max-width: var(--largura); margin-inline: auto; padding-inline: 20px; }
.secao { padding-block: 44px; }
.selo { display: block; color: var(--teal-escuro); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.introducao { color: var(--texto-suave); margin-top: 14px; font-size: .9375rem; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 52px; padding: 13px 22px; border-radius: 999px; font-size: .875rem; font-weight: 600; transition: background .2s; }
.btn--primario { color: var(--branco); background: var(--verde-zap); }
.btn--primario:hover { background: var(--verde-zap-hover); }
.btn svg, .link-texto svg { width: 19px; height: 19px; }
.link-texto { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.pular { position: fixed; top: -100px; left: 16px; background: white; padding: 12px; z-index: 200; }
.pular:focus { top: 10px; }
/* Cabeçalho: fita no fluxo; apenas a navegação acompanha a rolagem. */
.fita24 { background: var(--pinho); color: var(--branco); font-size: .625rem; }
.fita24 .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--fita-h); gap: 8px; }
.fita24 a { font-weight: 600; padding-block: 9px; }
.pulso { display: inline-block; width: 6px; height: 6px; background: #A6D8A4; border-radius: 50%; margin-right: 4px; }
.cabecalho { position: sticky; top: 0; background: var(--creme-puro); z-index: 100; border-bottom: 1px solid var(--borda); }
.cabecalho.rolado { box-shadow: 0 4px 20px #0F332E0D; }
.cabecalho__interno { display: flex; justify-content: space-between; align-items: center; height: var(--cab-h); }
.cabecalho__logo img { width: auto; height: 54px; }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--borda); border-radius: 50%; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { width: 18px; height: 2px; background: var(--pinho); display: block; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav { position: absolute; top: var(--cab-h); left: 0; right: 0; display: none; padding: 12px 20px 24px; background: var(--creme-puro); border-bottom: 1px solid var(--borda); box-shadow: 0 16px 24px #0F332E12; }
.nav.aberto { display: flex; flex-direction: column; }
.nav > a { padding-block: 13px; font-size: .875rem; font-weight: 600; }
.nav .btn { margin-top: 10px; }
/* Abertura: foto real de grupo, legenda integrada ao quadro. */
.hero { padding-block: 32px 38px; }
.hero__grid { display: grid; gap: 28px; }
.hero__sub { margin-top: 18px; color: var(--texto-suave); max-width: 32rem; font-size: .9375rem; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.hero__acoes .btn { width: 100%; }
.link-urgencia { display: inline-flex; gap: 9px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border: 1px solid #8FBDA3; border-radius: 999px; background: var(--telefone-fundo); color: var(--telefone-texto); font-size: .8125rem; width: 100%; font-weight: 600; transition: background .2s; }
.link-urgencia:hover { background: #D9ECDD; }
.link-urgencia svg { width: 16px; height: 16px; }
.hero__nota { margin-top: 12px; color: var(--texto-suave); font-size: .75rem; }
.hero__visual { border-radius: var(--raio); overflow: hidden; background: var(--pinho); }
.hero__visual > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hero__visual figcaption { display: flex; align-items: center; gap: 14px; color: var(--creme-puro); padding: 15px 18px; font-size: .65rem; line-height: 1.6; }
.hero__visual figcaption strong { font-size: .75rem; font-weight: 600; }
.hero__selo { font-family: var(--f-titulo); font-weight: 700; font-size: 2.05rem; letter-spacing: -.05em; padding-right: 14px; border-right: 1px solid #ffffff40; }
/* Serviços em resumo + exames expansíveis, sem uma seção por assunto. */
.cuidados { background: var(--creme-claro); }
.cuidados__grid { display: grid; gap: 32px; }
.servicos { margin-top: 24px; border-top: 1px solid var(--borda); }
.servico { border-bottom: 1px solid var(--borda); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.servico summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 14px 0; font-size: .875rem; font-weight: 600; line-height: 1.45; }
.servico summary > span, .exame__toggle { flex-shrink: 0; font-size: 1.4rem; font-weight: 400; transition: transform .2s; }
details[open] > summary > span:last-child { transform: rotate(45deg); }
.servico > p { font-size: .875rem; color: var(--texto-suave); padding: 0 20px 20px 0; }
.prevenpet { border-left: 3px solid var(--oliva); padding-left: 18px; margin-top: 26px; }
.prevenpet .selo { margin-bottom: 5px; font-size: .625rem; }
.prevenpet h3 { font-size: 1.2rem; }
.prevenpet p { color: var(--texto-suave); font-size: .8125rem; margin-top: 8px; }
.prevenpet .link-texto { color: var(--teal-escuro); }
.diagnostico { background: var(--pinho); color: var(--creme-puro); border-radius: var(--raio); padding: 24px 20px 18px; scroll-margin-top: 18px; }
.diagnostico__cabecalho .selo { color: #B8D5CF; margin-bottom: 8px; }
.diagnostico__cabecalho h3 { font-size: 2.35rem; }
.diagnostico__cabecalho p { font-size: .8125rem; color: #D4E2DD; margin-top: 10px; }
.exames { margin-top: 20px; }
.exame { border-top: 1px solid #ffffff30; }
.exame summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .875rem; font-weight: 600; padding-block: 13px; line-height: 1.45; min-height: 52px; }
.exame__conteudo { padding-bottom: 18px; }
.exame__conteudo img { width: 100%; height: 175px; object-fit: cover; border-radius: 12px; }
.exame__conteudo p { color: #D4E2DD; font-size: .8125rem; line-height: 1.6; margin-top: 12px; }
.credito-fotos { font-size: .625rem; line-height: 1.6; color: #CFDED8; padding-block: 14px 4px; border-top: 1px solid #ffffff30; }
.diagnostico :focus-visible { outline-color: #D5E6B5; }
/* Galeria não automática: rolagem nativa, teclado e botões. */
.equipe__cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.galeria__controles { display: flex; gap: 6px; }
.galeria__controles[hidden] { display: none; }
.galeria__controles button { background: transparent; border: 1px solid var(--borda); border-radius: 50%; height: 44px; width: 44px; font-size: 1.3rem; }
.galeria__controles button:disabled { opacity: .35; cursor: default; }
.galeria { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 24px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--sage) transparent; }
.galeria li { flex: 0 0 65%; scroll-snap-align: start; }
.galeria img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; border-radius: 16px; background: var(--creme); }
.galeria__dica { color: var(--texto-suave); font-size: .6875rem; display: flex; justify-content: space-between; margin-top: 4px; }
.depoimento { display: grid; gap: 18px; border-top: 1px solid var(--borda); padding-top: 24px; margin-top: 26px; }
.estrelas { color: #76640E; font-size: .9rem; letter-spacing: .08em; }
.depoimento blockquote { font-size: .875rem; margin-top: 8px; line-height: 1.8; }
.depoimento figcaption { display: grid; font-size: .6875rem; gap: 3px; }
.depoimento figcaption span { color: var(--texto-suave); }
/* Contato e rodapé compactos. */
.contato { background: var(--creme-claro); }
.contato__grid { display: grid; gap: 28px; }
.contato__endereco { margin-top: 20px; font-size: .875rem; color: var(--texto-suave); }
.contato__endereco strong { color: var(--texto); }
.contato__telefones { display: grid; gap: 6px; margin: 16px 0 20px; }
.contato__telefones a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--borda); font-size: .75rem; }
.contato__telefones strong { font-size: .8125rem; }
.contato .btn { width: 100%; }
.mapa { background: var(--creme); border-radius: var(--raio); border: 1px solid var(--borda); overflow: hidden; }
.mapa iframe { display: block; width: 100%; height: 220px; border: 0; }
.localizacao .link-texto { margin-top: 8px; }
.rodape { background: var(--pinho-profundo); color: var(--creme); padding: 28px 0 108px; }
.rodape__interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.rodape img { width: 155px; height: auto; }
.rodape p { order: 3; flex-basis: 100%; font-size: .6875rem; }
.rodape small { color: #C2CDC5; font-size: .625rem; }
.rodape__social { display: flex; gap: 6px; }
.rodape__social a { height: 44px; width: 44px; display: grid; place-items: center; border: 1px solid #ffffff35; border-radius: 50%; }
.rodape :focus-visible { outline-color: var(--creme); }
.contato-fixo { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--creme-puro); border-top: 1px solid var(--borda); box-shadow: 0 -4px 18px #0F332E0A; }
.contato-fixo a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-size: .8125rem; font-weight: 600; border-radius: 999px; }
.contato-fixo__ligar { border: 1px solid #8FBDA3; background: var(--telefone-fundo); color: var(--telefone-texto); }
.contato-fixo__zap { background: var(--verde-zap); color: white; }
.contato-fixo__zap:hover { background: var(--verde-zap-hover); }
@media (min-width: 600px) {
  .container { padding-inline: 32px; }
  .fita24 { font-size: .75rem; }
  .hero__acoes .btn, .contato .btn { width: auto; }
  .link-urgencia { justify-content: flex-start; width: auto; }
  .hero__visual figcaption { padding: 20px 24px; font-size: .8125rem; }
  .hero__visual figcaption strong { font-size: .875rem; }
  .galeria li { flex-basis: 31%; }
  .diagnostico { padding: 28px; }
  .exame__conteudo img { height: 230px; }
  .depoimento { grid-template-columns: 1fr 210px; align-items: center; gap: 35px; }
}
@media (min-width: 900px) {
  .secao { padding-block: 64px; }
  .hero { padding-block: 52px; }
  .hero__grid { grid-template-columns: 1fr 1.14fr; align-items: center; gap: 40px; }
  .hero__visual > img { aspect-ratio: 3/2; object-position: 50% 50%; }
  .hero__acoes { gap: 10px; }
  .hero__nota { margin-top: 18px; }
  .hero__sub { font-size: 1rem; }
  .cuidados__grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 64px; }
  .cuidados__servicos { padding-top: 12px; }
  .prevenpet { margin-top: 30px; }
  .galeria li { flex-basis: calc((100% - 48px) / 4); }
  .galeria { gap: 16px; }
  .contato__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
  .mapa iframe { height: 350px; }
  .contato__telefones { max-width: 410px; }
  .contato-fixo { left: auto; bottom: 20px; right: 20px; padding: 0; background: transparent; border: 0; border-radius: 999px; box-shadow: 0 6px 24px #0F332E26; display: block; }
  .contato-fixo .contato-fixo__ligar { display: none; }
  .contato-fixo__zap { padding-inline: 24px; min-height: 54px !important; }
  .rodape { padding: 30px 0 90px; }
  .rodape p { order: 0; flex-basis: auto; }
}
@media (min-width: 1000px) {
  .menu-btn { display: none; }
  .nav, .nav.aberto { position: static; display: flex; flex-direction: row; align-items: center; gap: 28px; padding: 0; box-shadow: none; border: 0; }
  .nav > a { font-size: .8125rem; }
  .nav .btn { margin: 0; min-height: 44px; }
}
@media (max-width: 359px) {
  .container { padding-inline: 16px; }
  .fita24 { font-size: .58rem; }
  .equipe__cabecalho { flex-wrap: wrap; }
  .galeria li { flex-basis: 78%; }
  .hero__visual figcaption { gap: 10px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .cabecalho, .fita24, .contato-fixo, .galeria__controles { display: none; }
  .rodape { padding-bottom: 24px; }
  .galeria { flex-wrap: wrap; overflow: visible; }
}