:root{
  --verde:#064420;
  --dourado:#C9A14A;
  --dourado-escuro:#9b7a2e;
  --fundo:#f8f7f3;
  --texto:#1f2937;
  --texto-suave:#4b5563;
  --borda:#e5e7eb;
  --branco:#ffffff;
  --sombra:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--fundo);
  color:var(--texto);
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%;display:block}
main{display:block}

header{
  background:var(--verde);
  color:#fff;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.header-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo{height:48px;width:auto;object-fit:contain}

nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

nav > ul > li{
  position:relative;
  flex:0 0 auto;
}

nav a{
  text-decoration:none;
  color:#fff;
  font-size:.92rem;
  font-weight:600;
  padding:7px 9px;
  border-radius:999px;
  transition:.2s ease;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}

nav a:hover,
nav a:focus-visible{
  background:rgba(255,255,255,.12);
  outline:none;
}

nav a.ativo{
  background:rgba(255,255,255,.18);
}

/* Dropdown desktop */
.menu-dropdown{
  position:relative;
}

.menu-dropdown > a::after{
  content:" ▾";
  font-size:.82em;
}

/* ponte invisível entre o item principal e o submenu */
.menu-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
}

.submenu{
  list-style:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:14px;
  box-shadow:var(--sombra);
  padding:8px;
  display:none;
  z-index:120;
  margin-top:6px;
}

.submenu li{
  margin:0;
}

.submenu a{
  display:block;
  color:var(--verde);
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  white-space:nowrap;
}

.submenu a:hover,
.submenu a:focus-visible{
  background:#f4f8f5;
  outline:none;
}

.menu-dropdown:hover .submenu,
.menu-dropdown:focus-within .submenu{
  display:block;
}

.burger{
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:6px;
}
.burger span{
  display:block;
  width:28px;
  height:3px;
  background:#fff;
  border-radius:3px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(6,68,32,.96);
  z-index:99;
}
.overlay[hidden]{display:none}

.overlay ul{
  list-style:none;
  max-width:760px;
  margin:0 auto;
  padding:88px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.overlay a{
  color:#fff;
  text-decoration:none;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
}

.overlay .menu-label{
  color:rgba(255,255,255,.72);
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:10px;
}

.overlay .submenu-mobile{
  list-style:none;
  margin:6px 0 4px 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.overlay .submenu-mobile a{
  font-size:1.05rem;
  font-weight:600;
}

/* Hero */
.hero{
  position: relative;
  background: url('img/fundo.jpg') center/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:100px 24px;
  min-height:75vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Overlay escuro profissional */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(6,68,32,.75),
    rgba(6,68,32,.55)
  );
  z-index:0;
}

/* Garante que o conteúdo fique acima do overlay */
.hero > *{
  position:relative;
  z-index:1;
}


.hero h1{
  font-size:clamp(2.2rem,3.5vw,3.2rem);
  line-height:1.1;
  margin-bottom:14px;
}

.hero p{
  max-width:760px;
  margin:0 auto 16px;
  font-size:1.05rem;
}
.hero-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.82rem;
  font-weight:700;
  margin-bottom:10px !important;
}
.hero-lead{font-size:1.15rem;font-weight:700}

.container,.wrap,.conteudo,.conteudo-texto,.page-shell{
  max-width:1140px;
  margin:0 auto;
  padding:32px 20px;
}
.narrow{max-width:900px}
.section-intro{margin-bottom:20px}
.section-intro h2,.page-hero h1,main h1,main h2,main h3{color:var(--verde)}
.page-hero{
  margin-top:24px;
}
.card,.page-hero,.cta-box,.alert,.info-strip{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:18px;
  box-shadow:var(--sombra);
}
.page-hero,.card,.cta-box,.alert{padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

p{margin-bottom:14px}
ul,ol{padding-left:22px;margin:8px 0 16px}
li+li{margin-top:6px}

.btn,
.btn-secundario,
.btn-terciario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  padding:13px 20px;
  transition:.2s ease;
  border:1px solid transparent;
}
.btn{background:var(--dourado);color:var(--verde)}
.btn:hover,.btn:focus-visible{background:#d6b362;outline:none}
.btn-secundario{background:#fff;color:var(--verde);border-color:var(--verde)}
.btn-secundario:hover,.btn-secundario:focus-visible{background:#f4f8f5;outline:none}
.btn-terciario{background:transparent;color:var(--verde);border-color:#cdd5d1}
.btn-terciario:hover,.btn-terciario:focus-visible{background:#f8faf9;outline:none}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.section-cta{text-align:center;margin-top:18px}

.home-destaques{margin-top:-28px}
.destaque-card{min-height:100%}
.home-section{display:flex;flex-direction:column;gap:18px}
.exames-grid,.lentes-grid,.sintomas-grid,.especialidades-grid,.mini-grid{align-items:stretch}
.galeria{max-width:1140px;margin:0 auto;padding:0 20px 12px}
.galeria h2{margin-bottom:8px}
.galeria-texto{max-width:800px;margin-bottom:16px}
.galeria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.galeria-grid img{width:100%;height:260px;object-fit:cover;border-radius:16px;box-shadow:var(--sombra)}

.main-content{max-width:900px;margin:0 auto;padding:32px 20px}
.main-content h1{margin-bottom:12px}
.main-content h2{margin:26px 0 10px}
.main-content h3{margin:18px 0 8px}
.main-content .intro{font-size:1.08rem}
.cta-box{border-left:5px solid var(--dourado);margin:24px 0;scroll-margin-top:90px}
.cta-box-inline p:last-child{margin-bottom:0}
.legend{font-size:.95rem;color:var(--texto-suave);text-align:center}
.related-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.alert{font-size:.98rem;color:var(--texto)}
.info-strip{padding:16px 18px;margin:20px 0}

.galeria-lentes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:22px 0 10px}
.galeria-lentes figure,.figura-destaque figure,.refrativa-figure figure{margin:0}
.galeria-lentes img,.figura-destaque img,.refrativa-figure img{
  width:100%;
  object-fit:contain;
  border-radius:16px;
  background:#f5f6f7;
  padding:14px;
  box-shadow:var(--sombra);
}
.galeria-lentes img{max-height:230px}
.figura-destaque{max-width:720px;margin:28px auto}
.figura-destaque img{max-height:420px}
.refrativa-figure{max-width:760px;margin:24px auto}
.refrativa-figure img{max-height:380px}

.equipe-wrap{max-width:1140px;margin:0 auto;padding:32px 20px}
.equipe-intro{margin-bottom:24px}
.perfil-grid{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
.perfil-foto{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius:16px;
  box-shadow:var(--sombra);
}
.perfil em{display:block;color:var(--texto-suave);margin-bottom:10px}
.equipe-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.badge-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#edf3ef;color:var(--verde);font-size:.9rem;font-weight:700}

.footer-wrap{max-width:1140px;margin:0 auto}
footer{background:var(--verde);color:#fff;text-align:center;padding:22px 16px;margin-top:32px}
footer p{margin-bottom:8px}
footer p:last-child{margin-bottom:0}
footer a{text-decoration:none;color:#fff}

/* Ajustes responsivos */
@media (max-width:1100px){
  .header-wrap{gap:16px}
  nav ul{gap:6px}
  nav a{font-size:.88rem;padding:7px 8px}
}

@media (max-width:920px){
  nav ul{display:none}
  .burger{display:flex}
  .galeria-grid{grid-template-columns:1fr 1fr}
  .home-destaques{margin-top:0}
  .submenu{display:none !important}
}

@media (max-width:760px){
  .perfil-grid{grid-template-columns:1fr}
  .galeria-lentes{grid-template-columns:1fr}
}

@media (max-width:620px){
  .galeria-grid{grid-template-columns:1fr}
  .galeria-grid img{height:220px}
  .page-hero,.card,.cta-box,.alert{padding:20px}
  .hero{padding:76px 20px}
}
.perfil-hero{
  padding:28px;
}

.perfil-hero-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:28px;
  align-items:start;
}

.perfil-hero-media{
  width:100%;
}

.perfil-foto-grande{
  display:block;
  width:100%;
  max-width:260px;
  height:auto;
  border-radius:16px;
  box-shadow:var(--sombra);
  object-fit:cover;
}

.perfil-hero-content{
  min-width:0;
}

.perfil-hero-content h1{
  margin-bottom:10px;
}

.perfil-hero-content .lead{
  margin-bottom:14px;
}

.perfil-hero-content .badge-list{
  margin-bottom:18px;
}

@media (max-width:760px){
  .perfil-hero-grid{
    grid-template-columns:1fr;
  }

  .perfil-hero-media{
    display:flex;
    justify-content:center;
  }

  .perfil-foto-grande{
    max-width:240px;
  }
}
/* ==========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   Adicionado em setembro/2026
   ========================================================== */

.wa-float{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:90;                 /* abaixo do header (100) e do menu mobile (99) */
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;         /* verde oficial do WhatsApp */
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.wa-float svg{
  width:34px;
  height:34px;
  fill:#fff;
  display:block;
}

.wa-float:hover,
.wa-float:focus-visible{
  background:#1ebe5b;
  transform:scale(1.06);
  box-shadow:0 10px 26px rgba(0,0,0,.34);
  outline:none;
}

.wa-float:focus-visible{
  outline:3px solid var(--dourado);
  outline-offset:3px;
}

.wa-float:active{transform:scale(.96)}

/* Rótulo que aparece ao passar o mouse (somente telas maiores) */
.wa-float-label{
  position:absolute;
  right:72px;
  white-space:nowrap;
  background:var(--verde);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.86rem;
  font-weight:700;
  line-height:1;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label{
  opacity:1;
  transform:translateX(0);
}

/* Anel de atenção: chama o olhar nos primeiros segundos e para sozinho */
.wa-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:-1;
  animation:wa-pulse 2.2s ease-out 3;
}

@keyframes wa-pulse{
  0%   {transform:scale(1);   opacity:.55}
  70%  {transform:scale(1.7); opacity:0}
  100% {transform:scale(1.7); opacity:0}
}

@media (max-width:760px){
  .wa-float{
    width:56px;
    height:56px;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .wa-float svg{width:32px;height:32px}
  .wa-float-label{display:none}   /* sem hover no celular */
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion:reduce){
  .wa-float,
  .wa-float-label{transition:none}
  .wa-float::before{animation:none}
  .wa-float:hover,
  .wa-float:focus-visible{transform:none}
}

/* Some quando o menu mobile está aberto */
body:has(.overlay:not([hidden])) .wa-float{
  opacity:0;
  visibility:hidden;
}

/* Folga no rodapé para o botão não cobrir o CRM e o endereço do site.
   O botão ocupa 56px + 16px da borda inferior; 84px garante respiro. */
@media (max-width:920px){
  footer{
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================
   PÁGINA DE EXAME — trilha de navegação e herói com imagem
   Adicionado em setembro/2026 (bloco OCT)
   Classes novas; nenhuma regra anterior é alterada.
   ========================================================== */

.breadcrumb{
  font-size:.9rem;
  color:var(--texto-suave);
  margin-bottom:18px;
}
.breadcrumb ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
}
.breadcrumb li{margin:0}
.breadcrumb li+li::before{
  content:"›";
  margin-right:6px;
  color:#9aa3a0;
}
.breadcrumb a{
  color:var(--verde);
  font-weight:600;
  text-decoration:none;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible{
  text-decoration:underline;
  outline:none;
}
.breadcrumb a:focus-visible{
  outline:2px solid var(--dourado);
  outline-offset:2px;
  border-radius:4px;
}
.breadcrumb [aria-current="page"]{color:var(--texto-suave)}

.exame-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:center;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:18px;
  box-shadow:var(--sombra);
  padding:24px;
  margin-bottom:28px;
}
.exame-hero-media{margin:0}
.exame-hero-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
}
.exame-hero-content{min-width:0}
.exame-hero-content h1{margin-bottom:10px}
.exame-hero-content .intro{margin-bottom:18px}
.exame-hero-content .btn{margin-bottom:0}

@media (max-width:760px){
  .exame-hero{
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
  }
  .exame-hero-media img{aspect-ratio:16/10}
}

/* Enquadramento das fotos da equipe.
   O recorte 4/5 sai do centro da imagem. Em fotos com a cabeça mais alta,
   isso corta o topo — esta classe ancora o recorte na borda superior. */
.perfil-foto-topo{object-position:top}