:root{
  /* fundo claro levemente esverdeado, no lugar do azul */
  --color-bg:#f5f8ef;

  /* verde original do Hospital da Visão */
  --color-primary:#638806;

  /* variação mais viva, pra botões/destaques */
  --color-secondary:#9ac002;

  /* fundo neutro para cards/faixas */
  --color-muted:#eef4e3;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--color-bg);color:#0a0a0a}
a{color:var(--color-primary);text-decoration:none}
.container{width:min(960px,90%);margin:0 auto}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
}
.logo img{
  height:52px;
  width:auto;
  display:block;
}
/*nav a{margin:0 8px;padding:8px 10px;border-radius:10px}*/
/*nav a[aria-current="page"]{
  background:var(--color-primary);
  color:#fff;
  font-weight:600;
}*/
.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--color-primary);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}
.hero{padding:72px 0;background:linear-gradient(180deg,var(--color-muted),#fff)}
.cta-row{display:flex;gap:12px;margin-top:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:48px 0}
.card{padding:18px;border:1px solid #eee;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.banner-comemorativo{background:var(--color-secondary);color:#fff}
.banner-comemorativo .container{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0}
.chip{background:rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.site-footer{margin-top:40px;background:#0b0b0b;color:#eaeaea}
.site-footer .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:30px 0}
.site-footer h4{margin:0 0 8px 0}
.copy{text-align:center;padding:10px 0;border-top:1px solid #222}
.pad{
  padding:28px 0;
}

@media (max-width:768px){
  .pad{
    padding:50px 0;
  }
}
.form label{display:block;margin:10px 0}
.form input,.form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px}
.form button{margin-top:10px}
.muted{opacity:.75;font-size:.9rem}
@media (prefers-color-scheme: dark){
  body{background:#0e0f10;color:#e7e7e7}
  .site-header{background:#111;border-color:#222}
  .card{border-color:#222}
  .site-footer{background:#0b0b0b;color:#d0d0d0}
  
  /* logo no header */
.logo img{
  height:50px;
  display:block;
}

/* hero com imagem */
.hero-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
}
.hero-text{
  flex:1 1 260px;
  min-width:260px;
}
.hero-media{
  flex:1 1 260px;
  min-width:260px;
}
.hero-media img{
  width:100%;
  border-radius:18px;
  display:block;
}

/* cards com imagem */
.cards-with-img .card img{
  width:100%;
  border-radius:12px;
  display:block;
  margin-bottom:8px;
  object-fit:cover;
  max-height:180px;
}

@media (max-width:768px){
  .hero-grid{
    flex-direction:column-reverse;
  }
}

}

/* CARROSSEL */
.hero-carousel{
  position:relative;
  width:100%;

  /* ALTERADO: tela inteira */
  max-width:none;      /* era 960px */
  margin:0;            /* era 0 auto */
  height:100vh;        /* era 550px */

  overflow:hidden;
  border-radius:0px;
}

.hero-carousel .hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
}

.hero-carousel .hero-slide.active{
  opacity:1;
}

.hero-carousel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* overlay opcional */
.hero-carousel .hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 6%;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1),rgba(0,0,0,0));
  color:#fff;
}

.hero-dots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
}

.hero-dots button{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.4);
  cursor:pointer;
}

.hero-dots button.active{
  background:#fff;
}

/* MOBILE: continua tela cheia */
@media (max-width:768px){
  .hero-carousel{
    height:100vh;   /* era 220px */
    border-radius:0;
  }
}

/* REMOVIDO o bloco que anulava a altura do carrossel
@media (max-width:768px){
  .hero-carousel{
    aspect-ratio:auto;
    height:auto;
  }
  .hero-carousel img{
    height:auto;
  }
}
*/

/* cards com imagem */
.cards-with-img .card img{
  width:100%;
  max-height:150px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:8px;
  display:block;
}

.brand img{
  height:54px;      /* aumenta aqui */
  max-width:190px;  /* garante que não estoure pro lado */
  width:auto;
  object-fit:contain;
}


/* MENU + RESPONSIVO */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:26px;
  cursor:pointer;
  color:var(--color-primary);
}

.main-nav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;          /* não deixa quebrar */
}



/* logo */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.brand img{
  height:32px;
  width:auto;
  object-fit:contain;
}

.brand span{
  font-size:18px;
  font-weight:600;
  white-space:nowrap;
}

/* RESPONSIVO */
@media(max-width:820px){
  .menu-toggle{
    display:block;
  }

  .main-nav{
    position:absolute;
    top:70px;
    right:0;
    background:white;
    flex-direction:column;
    padding:16px;
    gap:12px;
    border-radius:0 0 0 12px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    display:none;
  }

  .main-nav.show{
    display:flex;
  }
}

/* cards de SOBRE e CORPO CLÍNICO com o mesmo layout */
.sobre-cards .card,
.corpo-cards .card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:16px;
  border:1px solid #eee;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  background:#fff;
}

.sobre-cards .card-img,
.corpo-cards .card-img{
  width:100%;
  height:600px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}


.sobre-cards .card,
.corpo-cards .card,
.localizacao-cards .card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:16px;
  border:1px solid #eee;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  background:#fff;
}



/* MOBILE */
@media(max-width:768px){
  .sobre-card-horizontal{
    flex-direction:column;
    text-align:center;
  }

  .sobre-card-horizontal .sobre-img{
    width:100%;
    height:180px;
  }
}

/* forçar tamanho da logo no header */
.site-header .brand img{
  height:70px !important;   /* ajuste aqui o tamanho */
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
}

/* CARD DO CORPO CLÍNICO */
.corpo-cards .card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:16px;
  border:1px solid #eee;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  background:#fff;
}

.corpo-cards .card-img{
  width:100%;
  height:600px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

.corpo-cards .card h3{
  margin:4px 0 0 0;
}

/* MOSAICO DE CONVÊNIOS */
.convenios-logos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:16px;
  margin-top:20px;
  align-items:center;
  justify-items:center;
}

.convenios-logos img{
  max-width:120px;
  max-height:60px;
  object-fit:contain;
  background:#fff;
  padding:8px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  filter:grayscale(.15);
  opacity:.95;
  transition:transform .2s, box-shadow .2s, filter .2s, opacity .2s;
}

.convenios-logos img:hover{
  filter:grayscale(0);
  opacity:1;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

/* MAPA DENTRO DO CARD (LOCALIZAÇÃO) */
.localizacao-cards .card-map{
  width:100%;
  height:400px;
  border-radius:12px;
  overflow:hidden;
}

.localizacao-cards .card-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:14px 0;
  gap:18px;
  flex-wrap:nowrap;
}

.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
}

/* CARD LOCAL / HORA / TEMPERATURA */
.header-info-card{
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.95);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  font-size:.85rem;
  line-height:1.2;
  min-width:150px;
}

.header-info-city{
  font-weight:600;
  color:var(--color-primary);
}

.header-info-meta{
  display:flex;
  align-items:center;
  gap:6px;
  color:#555;
  margin-top:2px;
}

.header-info-meta .sep{
  color:#bbb;
}

/* Esconde o card no mobile se ficar apertado */
@media(max-width:820px){
  .header-info-card{
    display:none;
  }
}

.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:14px 0;
  gap:18px;
  flex-wrap:nowrap;
}

.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
}

/* em telas um pouco menores, some só com o texto do nome pra abrir espaço */
@media (max-width:1100px){
  .brand span{
    display:none;
  }
}

/* em telas menores ainda, some com o card de hora/temp pra sobrar espaço pro menu */
@media (max-width:1000px){
  .header-info-card{
    display:none;
  }
}

/* MENU PRINCIPAL – visual original com efeito + sem quebrar linha */
.main-nav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;          /* não deixa quebrar linha */
}

.main-nav a{
  position:relative;
  padding:6px 8px;
  text-decoration:none;
  color:var(--color-primary);
  font-weight:500;
  font-size:0.95rem;
  white-space:nowrap;        /* mantém "Corpo Clínico" em uma linha */
}

/* underline animado */
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:2px;
  background:var(--color-primary);
  transition:width .3s;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{
  width:100%;
}

/* item ativo: mesma cor, só mais forte */
.main-nav a[aria-current="page"]{
  color:var(--color-primary);
  font-weight:700;
}

.site-header .nav{
  display:flex;
  align-items:center;
  padding:14px 0;
  gap:16px;
}

/* logo + nome totalmente à esquerda */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.brand img{
  height:42px;
  width:auto;
  object-fit:contain;
}

.brand span{
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
}

/* menu no meio */
.main-nav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  margin-left:24px;
}

/* manter efeito e fonte do menu */
.main-nav a{
  position:relative;
  padding:6px 8px;
  text-decoration:none;
  color:var(--color-primary);
  font-weight:500;
  font-size:0.95rem;
  white-space:nowrap;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:2px;
  background:var(--color-primary);
  transition:width .3s;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{
  width:100%;
}

.main-nav a[aria-current="page"]{
  color:var(--color-primary);
  font-weight:700;
}

/* CARD totalmente à direita */
.header-info-card{
  margin-left:auto;              /* EMPURRA PRA DIREITA */
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.95);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  font-size:0.8rem;
  line-height:1.2;
  min-width:140px;
}

.header-info-city{
  font-weight:600;
  color:var(--color-primary);
}

.header-info-meta{
  display:flex;
  align-items:center;
  gap:6px;
  color:#555;
  margin-top:2px;
}

.header-info-meta .sep{
  color:#bbb;
}

/* botão mobile some no desktop */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:26px;
  cursor:pointer;
  color:var(--color-primary);
}

/* responsivo */
@media (max-width:1100px){
  .brand span{
    display:none;       /* esconde o texto, deixa só logo pra caber tudo */
  }
}

@media (max-width:900px){
  .header-info-card{
    display:none;       /* some com o card no mobile */
  }
  .menu-toggle{
    display:block;      /* mostra o botão mobile */
  }
  .main-nav{
    position:absolute;
    top:70px;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:16px;
    gap:12px;
    border-radius:0 0 0 12px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    display:none;
  }
  .main-nav.show{
    display:flex;
  }
}

::root{
  --header-h:72px; /* mantém como estava */
}

/* cada seção principal ocupa a tela, mas conteúdo começa mais em cima */
.section-full{
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:flex-start;     /* em vez de center */
  padding:22px 0 32px 0;      /* borda menor */
}

.section-full > .container{
  width:100%;
}

/* ancora compensa o header fixo */
section[id]{
  scroll-margin-top:var(--header-h);
  
}

/* HERO mais harmonioso (não ocupa a tela toda) */
.hero-carousel{
  height:clamp(510px, 55vh, 620px) !important; /* ajusta automático */
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* mantém sem distorcer */
.hero-carousel img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* mobile mais confortável */
@media (max-width:768px){
  .hero-carousel{
    height:clamp(220px, 40vh, 360px) !important;
  }
}

/* ===== SOBRE (id="institucional") — IMAGEM ESQ + TEXTO DIR, OCUPANDO A TELA ===== */

/* container em largura total */
#institucional .container{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:5vw !important;
  padding-right:5vw !important;
}

/* garante que o wrapper não limita */
#institucional .sobre-cards{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* card em 2 colunas */
#institucional .sobre-cards .card{
  width:100% !important;
  max-width:none !important;
  padding:28px !important;

  display:grid !important;
  grid-template-columns:48% 52% !important;  /* imagem | texto */
  column-gap:24px !important;
  align-items:start !important;
}

/* imagem ocupa a coluna esquerda */
#institucional .sobre-cards .card-img{
  width:100% !important;
  height:clamp(340px, 55vh, 620px) !important;
  object-fit:cover !important;
  border-radius:12px !important;
  display:block !important;
  margin:0 !important;

  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}

/* texto na coluna direita */
#institucional .sobre-cards .card h3,
#institucional .sobre-cards .card p{
  grid-column:2 !important;
  margin:0 !important;
}

#institucional .sobre-cards .card h3{
  font-size:1.6rem !important;
  line-height:1.2 !important;
  margin-top:6px !important;
}

#institucional .sobre-cards .card p{
  font-size:1.05rem !important;
  line-height:1.6 !important;
  margin-top:10px !important;
}

/* mobile: empilha */
@media (max-width:768px){
  #institucional .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #institucional .sobre-cards .card{
    grid-template-columns:1fr !important;
  }

  #institucional .sobre-cards .card-img{
    grid-column:1 !important;
    grid-row:auto !important;
    height:220px !important;
    margin-bottom:12px !important;
  }

  #institucional .sobre-cards .card h3,
  #institucional .sobre-cards .card p{
    grid-column:1 !important;
  }
}

/* Alinha todos os títulos (h2) das seções */
.section-full > .container > h2{
  margin:0 0 12px 0 !important;  /* mesma distância do conteúdo */
  padding:0 !important;
}

/* se existir h2 fora desse padrão, garante alinhamento também */
.section-full h2{
  margin-left:0 !important;
}

/* ===== PADRÃO GLOBAL: LARGURA + ÂNCORAS (SEM CORTAR) ===== */

/* altura real do header sticky (ajuste se precisar) */
:root{
  --header-h:72px;
}

/* faz o navegador compensar o header ao rolar pra âncoras */
html{
  scroll-padding-top:calc(var(--header-h) + 14px);
}

/* garante compensação também por elemento */
section[id]{
  scroll-margin-top:calc(var(--header-h) + 14px);
}

/* todas as seções com o MESMO “tamanho útil” e início alinhado */
.section-full{
  min-height:calc(100vh - var(--header-h));
  padding-top:18px !important;
  padding-bottom:32px !important;
}

/* LARGURA ÚTIL PADRÃO (aplica em todas as seções) */
.section-full > .container{
  width:min(1200px, 94%) !important;
  max-width:1200px !important;
  margin:0 auto !important;
}

/* garante que grids/cards não “encolham” estranhos */
.section-full .cards{
  width:100% !important;
  margin:0 !important;
}

/* ===== CORPO CLÍNICO: imagem ESQ + texto DIR (igual ao SOBRE) ===== */
#corpo-clinico .corpo-cards .card{
  width:100% !important;
  max-width:none !important;
  padding:28px !important;

  display:grid !important;
  grid-template-columns:48% 52% !important;
  column-gap:24px !important;
  align-items:start !important;
}

/* imagem ocupa a coluna esquerda */
#corpo-clinico .corpo-cards .card-img{
  width:100% !important;
  height:clamp(340px, 55vh, 620px) !important;
  object-fit:cover !important;
  border-radius:12px !important;
  display:block !important;
  margin:0 !important;

  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}

/* texto na coluna direita */
#corpo-clinico .corpo-cards .card h3,
#corpo-clinico .corpo-cards .card p{
  grid-column:2 !important;
  margin:0 !important;
}

#corpo-clinico .corpo-cards .card h3{
  font-size:1.6rem !important;
  line-height:1.2 !important;
  margin-top:6px !important;
}

#corpo-clinico .corpo-cards .card p{
  font-size:1.05rem !important;
  line-height:1.6 !important;
  margin-top:10px !important;
}

/* mobile: empilha */
@media (max-width:768px){
  #corpo-clinico .corpo-cards .card{
    grid-template-columns:1fr !important;
  }
  #corpo-clinico .corpo-cards .card-img{
    grid-column:1 !important;
    grid-row:auto !important;
    height:220px !important;
    margin-bottom:12px !important;
  }
  #corpo-clinico .corpo-cards .card h3,
  #corpo-clinico .corpo-cards .card p{
    grid-column:1 !important;
  }
}

/* CONTATO (id="agendar"): centralizado como as outras seções */
#agendar > .container{
  width:min(1200px, 94%) !important;
  max-width:1200px !important;
  margin:0 auto !important;
}

/* SERVIÇOS: fotos maiores (quebra o max-height antigo) */
#servicos.cards-with-img .card img{
  max-height:none !important;
  height:clamp(260px, 34vh, 500px) !important;
  width:100% !important;
  object-fit:cover !important;
  border-radius:12px !important;
}

/* LOCALIZAÇÃO: sobe o card de verdade */
#localizacao .localizacao-cards .card{
  transform:translateY(-50px) !important;
}

/* CORPO CLÍNICO: sobe o ponto da âncora ao clicar no menu */
#corpo-clinico{
  scroll-margin-top: calc(var(--header-h) - 20px) !important;
}