/* =========================================================================
   Fonoserv - one page
   Paleta: #32306f (azul escuro) | #44d593 (verde destaque) | #d7d7d7 (cinza)
   ========================================================================= */

/* ------------------------------------------------ tokens */
:root{
  --azul:#32306f;
  --azul-escuro:#26254f;
  --azul-claro:#4a4894;
  --verde:#44d593;
  --verde-escuro:#2fbb7c;
  --cinza:#d7d7d7;
  --cinza-card:#f4f4f5;
  --cinza-topo:#eaeaea;
  --texto:#3c3c46;
  --texto-claro:#6b6b78;
  --branco:#fff;

  --fonte:'Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --container:1240px;
  --raio:14px;
  --raio-grande:34px;
  --sombra:0 14px 40px rgba(50,48,111,.10);
  --sombra-forte:0 18px 50px rgba(50,48,111,.18);
  --transicao:.25s ease;
  --altura-topo:92px;
}

/* ------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--altura-topo)}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.6;
  color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;color:var(--azul);line-height:1.2}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
ul{list-style:none}

:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.secao{padding:76px 0}
.verde{color:var(--verde)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--azul);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
}
.pular-para-conteudo:focus{left:0}

/* ------------------------------------------------ botões */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:16px 30px;border-radius:8px;border:2px solid transparent;
  cursor:pointer;transition:var(--transicao);text-align:center;
}
.botao__icone{width:20px;height:20px;flex:0 0 20px;fill:currentColor;margin-right:10px}

.botao--azul{background:var(--azul);color:#fff}
.botao--azul:hover{background:var(--azul-escuro);transform:translateY(-2px);box-shadow:var(--sombra)}

.botao--verde{background:var(--verde);color:var(--azul)}
.botao--verde:hover{background:var(--verde-escuro);color:#fff;transform:translateY(-2px);box-shadow:var(--sombra)}

.botao--contorno{
  background:var(--branco);color:var(--azul);border-color:var(--azul);
  border-radius:999px;font-size:20px;text-transform:none;letter-spacing:0;
  padding:14px 46px;
}
.botao--contorno:hover{background:var(--azul);color:#fff}

.botao--enviar{
  background:var(--azul);color:var(--verde);border-radius:8px;
  padding:14px 44px;align-self:flex-start;
}
.botao--enviar:hover{background:var(--azul-escuro);color:#fff}
.botao--enviar[disabled]{opacity:.6;cursor:progress}

/* ------------------------------------------------ cabeçalho */
.cabecalho{
  position:sticky;top:0;z-index:100;
  background:var(--cinza-topo);
  transition:box-shadow var(--transicao),background var(--transicao);
}
.cabecalho.rolou{box-shadow:0 6px 24px rgba(0,0,0,.10)}

.cabecalho__interno{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--altura-topo);
}
.cabecalho__logo img{width:172px;height:auto}

.menu ul{display:flex;align-items:center;gap:38px}
.menu__link{
  position:relative;display:inline-block;padding:6px 0;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--azul);transition:color var(--transicao);
}
.menu__link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicao);
}
.menu__link:hover::after,.menu__link.ativo::after{transform:scaleX(1)}
.menu__link.ativo{color:var(--azul)}

.menu-botao{
  display:none;width:46px;height:40px;padding:8px;
  background:none;border:0;cursor:pointer;
}
.menu-botao span{
  display:block;height:3px;border-radius:2px;background:var(--azul);
  transition:var(--transicao);
}
.menu-botao span+span{margin-top:6px}
.menu-botao[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ------------------------------------------------ hero */
.hero{padding:64px 0 40px}

.hero__moldura{position:relative;padding:26px 0 30px}
.hero__moldura::before{
  content:'';position:absolute;left:-18px;right:-18px;top:0;bottom:0;
  border:2px solid #c9c8dd;border-radius:46px;
}

.hero__card{position:relative;border-radius:var(--raio-grande);overflow:visible}
.hero__imagem{
  width:100%;height:clamp(300px,31vw,450px);object-fit:cover;object-position:72% 45%;
  border-radius:var(--raio-grande);box-shadow:var(--sombra);
}

.hero__painel{
  position:absolute;left:-24px;top:50%;transform:translateY(-50%);
  width:min(58%,620px);
  background:var(--azul);color:#fff;
  padding:44px 48px;border-radius:var(--raio-grande);
  box-shadow:var(--sombra-forte);
}
.hero__titulo{
  color:#fff;font-size:clamp(30px,3.1vw,50px);font-weight:800;letter-spacing:-.01em;
  margin-bottom:18px;text-wrap:balance;
}
.hero__texto{margin:0;font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:rgba(255,255,255,.94)}

.hero__selo{
  position:absolute;top:50%;left:min(58%,620px);
  transform:translate(-46%,-50%);
  width:clamp(74px,8vw,124px);height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.22));
}

/* ------------------------------------------------ título com linhas */
.titulo-com-linhas{
  display:flex;align-items:center;gap:22px;justify-content:center;
  font-size:clamp(22px,2.2vw,30px);font-weight:700;text-align:center;
  margin-bottom:46px;
}
.titulo-com-linhas::before,.titulo-com-linhas::after{
  content:'';flex:1;max-width:180px;height:1px;background:var(--cinza);
}

.titulo-secao{font-size:clamp(28px,3vw,42px);font-weight:800;margin-bottom:26px}

/* ------------------------------------------------ grades */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch}

/* ------------------------------------------------ cards de pilar (sobre) */
.card-pilar{
  background:var(--cinza-card);border-radius:18px;
  padding:40px 34px;text-align:center;
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.card-pilar:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.card-pilar__icone{width:66px;height:66px;margin:0 auto 22px}
.card-pilar__titulo{font-size:21px;font-weight:700;margin-bottom:18px}
.card-pilar p{font-size:14.5px;line-height:1.65;color:var(--texto);margin:0}

/* ------------------------------------------------ exames */
.exames{background:var(--azul);padding:76px 0 90px}
.exames__titulo{
  color:var(--verde);font-size:clamp(30px,3.4vw,44px);font-weight:800;
  text-align:center;margin-bottom:52px;
}

.card-exame{
  display:flex;flex-direction:column;
  background:var(--branco);border-radius:var(--raio);overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.card-exame:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(0,0,0,.28)}
.card-exame__midia{overflow:hidden}
.card-exame__midia img{width:100%;height:230px;object-fit:cover;transition:transform .5s ease}
.card-exame:hover .card-exame__midia img{transform:scale(1.05)}
.card-exame__corpo{padding:26px 26px 32px;text-align:center}
.card-exame__titulo{font-size:19px;font-weight:700;margin-bottom:16px}
.card-exame p{font-size:14px;line-height:1.62;margin:0}

/* ------------------------------------------------ faixa verde */
.faixa-verde{background:var(--verde);padding:34px 0}
.faixa-verde .container{display:flex;justify-content:center}

/* ------------------------------------------------ aparelhos */
.aparelhos__grade{
  display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;
}
.aparelhos__grade>*{min-width:0}
.aparelhos__subtitulo{font-size:18px;font-weight:700;margin:34px 0 14px}
.aparelhos__texto p{font-size:16px}
.aparelhos__lista{
  list-style:decimal;padding-left:22px;margin:0 0 34px;
  font-size:16px;line-height:1.9;
}
.aparelhos__lista::marker{color:var(--azul)}
.aparelhos__botoes{display:flex;flex-wrap:wrap;gap:16px}
.aparelhos__midia img{margin:0 auto;width:100%;max-width:560px}

/* ------------------------------------------------ contato */
.contato{background:var(--cinza);padding:62px 0}
.contato__grade{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contato__texto p{font-size:16px;margin:0}

.formulario{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column}
.formulario input{
  width:100%;padding:16px 22px;
  font-family:inherit;font-size:15px;color:var(--texto);
  background:var(--branco);border:2px solid transparent;border-radius:10px;
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.formulario input::placeholder{color:#9a9aa5}
.formulario input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(50,48,111,.12)}
.formulario input.invalido{border-color:#d64545}

.campo__erro{min-height:0;font-size:12.5px;color:#a92727;padding:2px 6px}
.campo__erro:not(:empty){min-height:18px}

.formulario__status{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--azul)}
.formulario__status.erro{color:#a92727}

.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------ rodapé */
.rodape{background:var(--azul);color:#fff;padding:64px 0 0}
.rodape__grade{
  display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:44px;align-items:start;
}
.rodape__marca img{width:210px}
.rodape__titulo{color:var(--verde);font-size:17px;font-weight:700;margin-bottom:16px}
.rodape__lista li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:15px}
.rodape__lista svg{width:20px;height:20px;flex:0 0 20px;fill:#fff;margin-top:2px}
.rodape__lista a{transition:color var(--transicao)}
.rodape__lista a:hover{color:var(--verde)}

.rodape__base{margin-top:52px;border-top:1px solid rgba(255,255,255,.16);padding:20px 0}
.rodape__base p{margin:0;font-size:13px;color:rgba(255,255,255,.7);text-align:center}

/* ------------------------------------------------ whatsapp flutuante */
.whatsapp-flutuante{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--verde);box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:var(--transicao);
}
.whatsapp-flutuante svg{width:32px;height:32px;fill:var(--azul)}
.whatsapp-flutuante:hover{background:var(--verde-escuro);transform:scale(1.07)}
.whatsapp-flutuante:hover svg{fill:#fff}

/* ------------------------------------------------ animação de entrada */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.revelar.visivel{opacity:1;transform:none}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:1080px){
  .menu ul{gap:24px}
  .menu__link{font-size:12px}
  .hero__painel{padding:34px 32px;width:min(54%,460px)}
  .rodape__grade{grid-template-columns:1fr 1fr;gap:36px}
  .rodape__marca{grid-column:1/-1}
}

@media (max-width:860px){
  :root{--altura-topo:78px}
  .secao{padding:56px 0}

  .menu-botao{display:block}
  .menu{
    position:absolute;left:0;right:0;top:100%;
    background:var(--cinza-topo);
    max-height:0;overflow:hidden;
    box-shadow:0 14px 24px rgba(0,0,0,.12);
    transition:max-height .32s ease;
  }
  .menu.aberto{max-height:340px}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px}
  .menu li+li{border-top:1px solid rgba(50,48,111,.12)}
  .menu__link{display:block;padding:14px 0;font-size:13px}
  .menu__link::after{display:none}

  .grade-3{grid-template-columns:1fr;gap:22px;max-width:520px;margin:0 auto}
  .aparelhos__grade,.contato__grade{grid-template-columns:1fr;gap:34px}
  .aparelhos__midia{order:-1}
  .card-exame__midia img{height:210px}
}

@media (max-width:700px){
  .hero{padding:34px 0 10px}
  .hero__moldura{padding:0}
  .hero__moldura::before{display:none}

  .hero__imagem{height:300px;object-position:72% 42%;border-radius:22px}
  .hero__painel{
    position:static;transform:none;width:auto;
    margin:14px 0 0;padding:28px 26px;border-radius:22px;
  }
  .hero__titulo{margin-bottom:12px}
  .hero__titulo br,.hero__texto br,.contato__texto br{display:none}
  .hero__selo{top:248px;left:auto;right:18px;transform:none;width:76px}

  .titulo-com-linhas::before,.titulo-com-linhas::after{max-width:40px}
  .botao{width:100%;padding:15px 22px}
  .botao--contorno{font-size:17px;padding:13px 24px}
  .botao--enviar{align-self:stretch}
  .aparelhos__botoes{flex-direction:column;gap:12px}
  .rodape__grade{grid-template-columns:1fr;gap:32px;text-align:left}
  .whatsapp-flutuante{width:52px;height:52px;right:16px;bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .revelar{opacity:1;transform:none}
}