:root{
  --primary:#0b5b8a;
  --accent:#f2a541;
  --muted:#666;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#222;line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo img{height:96px}
.main-nav ul{display:flex;gap:0.5rem;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.main-nav a{color:#111;text-decoration:none;padding:0.75rem 0.5rem;font-size:0.95rem}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem}
.hero{background:#f7f9fb;padding:0;text-align:center;margin-bottom:0.5cm}
/* overlay text inside the slider */
.hero-text{position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 1rem;color:#fff;}
.hero-text h1{margin:0;font-size:3rem;line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.6);}
/* legacy hero text (container) is no longer used */
.hero h1{margin:0 0 .5rem;font-size:1.8rem}
.hero .container{padding-top:1rem;padding-bottom:1rem}
.section{padding:2rem 0;border-bottom:1px solid #f0f0f0}
.btn{display:inline-block;padding:.6rem 1rem;background:var(--primary);color:#fff;border-radius:4px;text-decoration:none}
.contact form{display:grid;gap:.5rem;max-width:520px}
.contact input,.contact textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:4px}
.site-footer{background:#111;color:#fff;padding:1.2rem 0;text-align:center}

/* Responsive */
@media (max-width:800px){
  .main-nav{display:none}
  .menu-toggle{display:block}
  .hero h1{font-size:1.4rem}
  .site-header .container{gap:.5rem}
  .container{padding:0.8rem}
}

.mobile-nav-active .main-nav{display:block;background:#fff;position:absolute;left:0;right:0;top:64px;padding:1rem;border-bottom:1px solid #eee}
.mobile-nav-active .main-nav ul{flex-direction:column}

/* Hero slider simple styling */
.hero-slider{position:relative;overflow:hidden;/* maintain same aspect ratio as original site images (1920x820) */
  aspect-ratio: 1920 / 820;
}

/* when using aspect-ratio the height will scale automatically with width,
   so we no longer need a fixed pixel height. */
.hero-slider img{width:100%;height:100%;object-fit:cover;display:block}

.clinic-gallery{display:flex;gap:0.5rem;margin-top:1rem}
.clinic-carousel-wrapper{display:flex;align-items:center;gap:0.5rem;margin-top:1rem}
.carousel-prev,.carousel-next{background:#fff;border:1px solid #eee;border-radius:6px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,0.08)}
.clinic-carousel{display:flex;gap:0.5rem;overflow-x:auto;padding:10px 6px;scroll-behavior:smooth}
.clinic-carousel a{flex:0 0 auto}
.clinic-carousel img{width:260px;height:160px;object-fit:cover;border-radius:6px;display:block}

.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:800}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-image{max-width:90%;max-height:85%;border-radius:6px}
.lightbox-close{position:absolute;right:22px;top:18px;background:transparent;border:0;color:#fff;font-size:28px}

.team-grid{display:flex;gap:1rem;margin-top:1rem}
.team-grid figure{margin:0;text-align:center}
.team-grid img{width:160px;height:160px;object-fit:cover;border-radius:4px}
.team-grid figcaption{font-size:.9rem;color:var(--muted);margin-top:.4rem}


/* Three column section under Sobre Nós */
.three-cols{display:flex;gap:1rem;margin-top:1rem}
.three-cols article{flex:1;background:#fff;padding:1rem;border-radius:6px;border:1px solid #eee}
.three-cols h3{margin-top:0;color:var(--primary)}

@media (max-width:900px){
  .three-cols{flex-direction:column}
}

/* WhatsApp Floating Button */
.whatsapp-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#25D366; /* garante visibilidade mesmo se o SVG não renderizar */
  border-radius:50%;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  z-index:9999;
}
.whatsapp-fab svg{width:32px;height:32px}

@media (max-width:480px){
  /* keep the same aspect ratio on smaller screens rather than forcing a tiny
     fixed height */
  .hero-slider{aspect-ratio: 1920 / 820}
  .clinic-gallery img{height:100px}
  .team-grid img{width:110px;height:110px}
  .whatsapp-fab{right:12px;bottom:12px;width:48px;height:48px}
}

/* Exams page styles */
.exames-page h1{margin-top:0;color:var(--primary);text-align:center;font-size:2rem}
.exames-subtitle{text-align:center;font-weight:bold;color:var(--primary);margin:0.5rem 0}
.exames-description{text-align:center;color:var(--muted);margin:1rem 0 2rem}

.exames-tabs{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}
.tab-btn{background:transparent;border:2px solid var(--primary);color:var(--primary);padding:0.8rem 1.5rem;
  border-radius:4px;cursor:pointer;font-size:0.95rem;font-weight:bold;
  transition:all 0.3s}
.tab-btn:hover{background:var(--primary);color:#fff}
.tab-btn.active{background:var(--primary);color:#fff}
.tab-btn-small{background:var(--primary);color:#fff;border:0;padding:0.5rem 1rem;
  border-radius:4px;cursor:pointer;font-size:0.85rem;text-decoration:none}
.tab-btn-small:hover{background:#005580;opacity:0.9}

.tab-content{display:none}
.tab-content.active{display:block}

.exames-list{display:grid;gap:1rem;margin-top:1.5rem}
.exame-item{background:#f7f9fb;padding:1.5rem;border-radius:6px;border:1px solid #eee;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.exame-item h3{margin:0;color:var(--primary);flex:1}

@media(max-width:768px){
  .exames-tabs{flex-direction:column}
  .exame-item{flex-direction:column;text-align:center}
}