/* Site modelo do Kit Clínica: clínico claro, mobile first. A cor da clínica
   chega por --cor-primaria e --cor-destaque, num <style> gerado; aqui ficam
   só os tons neutros, que precisam de contraste AA sobre branco e areia. */
:root{
  --areia:#f7f3ec;--linha:#e7e1d7;--texto:#1c2629;--suave:#56646b;
  --raio:12px;--raio-grande:20px;
  --sombra:0 1px 2px rgb(16 24 40/.04),0 8px 24px rgb(16 24 40/.06);
  --fundo-acento:color-mix(in srgb,var(--cor-primaria) 9%,#fff);
  --serifa:'Playfair Display',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
/* O topo fixo e o botão fixo do celular não podem cobrir o que recebe foco ou é alvo de âncora. */
html{scroll-behavior:smooth;scroll-padding:5rem 0 5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font:400 1rem/1.6 Inter,system-ui,sans-serif;color:var(--texto);background:#fff;-webkit-font-smoothing:antialiased;padding-bottom:5rem}
img{display:block;max-width:100%}
a{color:var(--cor-primaria)}
h1,h2,h3{font-family:var(--serifa);font-weight:600;line-height:1.15;margin:0;color:var(--texto)}
h1{font-size:clamp(2.1rem,6vw,3.5rem);letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:1.25rem}
p,figure{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:3px solid var(--cor-primaria);outline-offset:3px;border-radius:4px}

.pular{position:absolute;left:1rem;top:.75rem;z-index:30;background:#fff;padding:.75rem 1rem;border-radius:var(--raio);box-shadow:var(--sombra);transform:translateY(-200%)}
.pular:focus{transform:none}
.conteiner{width:100%;max-width:1160px;margin:0 auto;padding:0 1.25rem}
section{padding:4rem 0}
.fundo-areia{background:var(--areia)}
.icone{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Topo fixo */
.topo{position:sticky;top:0;z-index:10;background:rgb(255 255 255/.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo .conteiner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{max-height:2.75rem;width:auto;font-family:var(--serifa);font-size:1.2rem;color:var(--texto)}
.topo-acoes{display:flex;align-items:center;gap:1.25rem}
.topo-telefone{display:none;align-items:center;gap:.5rem;font-weight:500;text-decoration:none;color:var(--texto)}
.topo-telefone .icone{width:1.125rem;height:1.125rem;color:var(--cor-primaria)}

/* Botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:0 1.5rem;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.botao .icone{width:1.125rem;height:1.125rem}
.botao-principal{background:var(--cor-destaque);color:#1d1d1f}
.botao-principal:hover{box-shadow:0 6px 18px rgb(0 0 0/.12);transform:translateY(-1px)}
.botao-secundario{background:#fff;border-color:var(--cor-primaria);color:var(--cor-primaria)}
.botao-secundario:hover{background:var(--fundo-acento)}
/* No celular quem chama para agendar é o botão fixo; no topo ele seria o terceiro na mesma tela. */
.topo .botao{display:none;min-height:2.75rem;padding:0 1.25rem;font-size:.95rem}

/* Títulos de seção */
.sobretitulo{font:600 .78rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cor-primaria);margin-bottom:.75rem}
.cabeca{max-width:40rem;margin-bottom:2.25rem}

/* Abertura */
.abertura{padding:2.5rem 0 3.5rem;background:linear-gradient(180deg,#fff 0%,var(--areia) 100%)}
.abertura .conteiner{display:grid;gap:2rem;align-items:center}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.acoes .botao{flex:1 1 auto}
.horario{display:flex;align-items:flex-start;gap:.5rem;margin-top:1.25rem;color:var(--suave);font-size:.95rem}
.horario .icone{width:1.25rem;height:1.25rem;margin-top:.125rem;color:var(--cor-primaria)}
.abertura-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio-grande);box-shadow:var(--sombra)}

/* Diferenciais */
.diferenciais{padding:2rem 0;background:#fff;border-bottom:1px solid var(--linha)}
.diferenciais ul{display:grid;gap:1.25rem}
.diferenciais li{display:flex;gap:.75rem}
.diferenciais .icone{color:var(--cor-primaria);margin-top:.125rem}
.diferenciais strong{display:block;font-weight:600}
.diferenciais span{color:var(--suave);font-size:.95rem}

/* Especialidades */
.cartoes{display:grid;gap:1rem}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:1.5rem;transition:border-color .15s,box-shadow .15s}
.cartao:hover{border-color:color-mix(in srgb,var(--cor-primaria) 35%,var(--linha));box-shadow:var(--sombra)}
.cartao h3{margin:1rem 0 .5rem}
.cartao p{color:var(--suave)}
.selo{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:var(--raio);background:var(--fundo-acento);color:var(--cor-primaria)}

/* Equipe */
.equipe{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.equipe img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio);margin-bottom:1rem;background:var(--linha)}
.equipe strong{display:block;font-family:var(--serifa);font-size:1.25rem;font-weight:600}
.equipe span{color:var(--suave);font-size:.95rem}

/* Galeria, mantida para quem já usa o campo fotos */
.fotos{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio)}

/* Primeira consulta */
.passos{display:grid;gap:1rem;counter-reset:passo}
/* role=list no HTML: sem marcador, o Safari deixa de anunciar a lista. */
.passos li{counter-increment:passo;border:1px solid var(--linha);border-radius:var(--raio);padding:1.5rem}
.passos li::before{content:counter(passo);display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;margin-bottom:1rem;background:var(--cor-primaria);color:#fff;font-weight:600}
.passos h3{margin-bottom:.5rem}
.passos p{color:var(--suave)}

/* Perguntas frequentes */
.faq{display:grid;gap:.75rem;max-width:50rem}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:0 1.25rem}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';content:'+' / '';flex:none;font-size:1.5rem;font-weight:400;line-height:1;color:var(--cor-primaria);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.125rem;color:var(--suave)}

/* Agendamento */
.agendar .conteiner{display:grid;gap:2rem}
.agendar-texto>p{color:var(--suave);max-width:28rem;margin-top:-1rem}
.agendar-texto .agendar-ligar{margin-top:1.5rem;color:var(--texto);font-weight:500}
.agendar-ligar a{display:inline-flex;align-items:center;gap:.5rem;margin-left:.25rem;font-weight:600}
.agendar-ligar .icone{width:1.125rem;height:1.125rem}
.formulario{display:grid;gap:.875rem;background:#fff;border:1px solid var(--linha);border-radius:var(--raio-grande);padding:1.5rem;box-shadow:var(--sombra)}
label{display:grid;gap:.375rem;font-weight:500;font-size:.95rem}
input,textarea{font:inherit;font-weight:400;padding:.75rem .875rem;border:1px solid #cfc8bc;border-radius:.625rem;background:#fff;color:var(--texto)}
input:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--cor-primaria) 30%,transparent);outline-offset:0;border-color:var(--cor-primaria)}
.formulario .botao{width:100%;margin-top:.25rem}
#retorno{color:var(--suave);font-size:.95rem}
.isca{position:absolute;left:-9999px}

/* Onde estamos */
.onde .conteiner{display:grid;gap:2rem}
.info{display:grid;gap:1rem}
.info li{display:flex;gap:.75rem}
.info .icone{color:var(--cor-primaria);margin-top:.125rem}
.mapa{width:100%;height:100%;min-height:20rem;border:0;border-radius:var(--raio)}

/* Rodapé e botão fixo do celular */
.rodape{padding:2rem 0;border-top:1px solid var(--linha);color:var(--suave);font-size:.9rem;text-align:center}
.rodape p+p{margin-top:.5rem}
.agendar-fixo{position:fixed;left:1rem;right:1rem;bottom:.75rem;z-index:20;box-shadow:0 10px 30px rgb(0 0 0/.18)}

@media (min-width:768px){
  body{padding-bottom:0}
  .agendar-fixo{display:none}
  .topo-telefone,.topo .botao{display:inline-flex}
  .acoes .botao{flex:none}
  #duvidas .conteiner{display:grid;grid-template-columns:1fr 1.7fr;gap:3.5rem;align-items:start}
  section{padding:6rem 0}
  .abertura{padding:4.5rem 0 6rem}
  .abertura .conteiner:has(.abertura-foto){grid-template-columns:1.05fr 1fr;gap:3.5rem}
  .abertura-texto{max-width:44rem}
  .diferenciais{padding:2.5rem 0}
  .diferenciais ul{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:2rem}
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
  .agendar .conteiner,.onde .conteiner:has(.mapa){grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  .onde .conteiner{align-items:stretch}
  html{scroll-padding-bottom:0}
  .formulario{padding:2rem}
}
@media (min-width:1024px){
  .cartoes{grid-template-columns:repeat(3,1fr)}
}