/* 
  Core Intervention – style.css
  Paleta, tipografia e layout responsivo (mobile-first).
  Cores (variáveis CSS) seguindo o brand book:
  - Azul Escuro: #023047
  - Teal Técnico: #219EBC
  - Bege Institucional: #F8F2E4 (fundo padrão)
  - Bege Dourado (acento): #FFB703
  - Branco: #FFFFFF
*/

:root{
  --ci-navy:#023047;
  --ci-teal:#219EBC;
  --ci-cream:#F8F2E4;
  --ci-gold:#FFB703;
  --ci-white:#FFFFFF;
  --text:#0B2533;
  --muted:#51636E;

  --radius:10px;
  --shadow:0 6px 20px rgba(2,48,71,0.12);
  --container:1200px;
}

/* Reset básico e tipografia */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--ci-cream);
  line-height:1.6;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); border:0;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding: clamp(16px, 2vw, 24px);
}

/* Cabeçalho */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--ci-white);
  border-bottom:1px solid rgba(33,158,188,0.2);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--ci-navy); text-decoration:none; font-weight:700}
.brand-mark{
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, var(--ci-teal), var(--ci-navy));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.brand-name{letter-spacing:.4px}

.main-nav .nav-toggle{display:none}
.main-nav ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.main-nav a{
  text-decoration:none; color:var(--ci-navy); font-weight:600;
  padding:.6rem .8rem; border-radius:999px; transition:transform .2s ease, background .2s ease;
}
.main-nav a:hover{background:rgba(33,158,188,0.12); transform:translateY(-1px)}

/* Hero */
.section-hero{
  position:relative; min-height:90vh;
  background: url('https://lh3.googleusercontent.com/d/13ultWqjFEEhI48DnkQXLYmzZT18OGT6d=w2000') center/cover no-repeat;
  color:var(--ci-white);
}
.hero-overlay{
  width:100%; height:100%; background:linear-gradient(180deg, rgba(2,48,71,.58), rgba(2,48,71,.78));
  display:flex; align-items:center;
}
.hero-content{max-width:800px}
.section-hero h1{font-size: clamp(28px, 5vw, 48px); margin:0 0 .6rem}
.section-hero p{font-size: clamp(16px, 2.2vw, 20px); opacity:.95; margin:0 0 1.2rem}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:700; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: var(--shadow);
}
.btn-primary{background:var(--ci-gold); color:#111}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,183,3,0.35)}
.btn-outline{background:transparent; color:var(--ci-white); border:2px solid var(--ci-white)}
.btn-outline:hover{background:rgba(255,255,255,.12)}

/* Seções genéricas */
.section{padding: clamp(48px, 6vw, 96px) 0; min-height:80vh; display:flex; align-items:center}
.section h2{color:var(--ci-navy); font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 1rem}
.section p{color:var(--text); font-size: clamp(15px, 1.8vw, 18px)}
.alt-bg{background:var(--ci-cream)}
.section .image-elevated img{box-shadow: var(--shadow)}

.grid{display:grid; gap: clamp(16px, 3vw, 32px)}
.grid-2{grid-template-columns: 1fr}
@media (min-width: 900px){
  .grid-2{grid-template-columns: 1.1fr .9fr}
}

.cards{display:grid; gap: clamp(16px, 2vw, 24px)}
.cards-3{grid-template-columns: repeat(1, 1fr)}
.cards-4{grid-template-columns: repeat(1, 1fr)}
@media (min-width: 720px){ .cards-3{grid-template-columns: repeat(3, 1fr)} }
@media (min-width: 960px){ .cards-4{grid-template-columns: repeat(4, 1fr)} }

.card{
  background:var(--ci-white);
  border-radius:var(--radius);
  padding: clamp(16px, 2vw, 24px);
  border:1px solid rgba(33,158,188,0.2);
  box-shadow: var(--shadow);
}

.section-team .doctor-card{
  background:var(--ci-white);
  border-radius:var(--radius);
  padding: clamp(16px, 2vw, 24px);
  border:1px solid rgba(33,158,188,0.2);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:.8rem;
}
.doctor-photo img{width:100%; max-width:100%; height:auto; border-radius:var(--radius)}
.mini-cv{font-size:.95rem; color:var(--muted)}

/* Imagens globais */
img{max-width:100%; height:auto; border-radius:var(--radius)}

/* Location cards */
.location-card figure{margin:0}
.location-card figcaption{margin-top:.4rem; color:var(--ci-navy); font-weight:600}

/* Mapa */
.map{
  width:100%;
  height: clamp(360px, 50vh, 520px);
  border-radius:var(--radius);
  border:1px solid rgba(33,158,188,0.25);
  box-shadow: var(--shadow);
  margin-top: clamp(16px, 2vw, 24px);
}

/* Aside contato */
.contact-aside{
  background:var(--ci-white);
  border:1px solid rgba(33,158,188,0.2);
  border-radius:var(--radius);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow);
}

/* Rodapé */
.site-footer{
  background:var(--ci-white);
  border-top:1px solid rgba(33,158,188,0.2);
}
.footer-inner{
  display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:center;
}
.footer-inner nav{display:flex; gap:1rem}
.footer-inner a{color:var(--ci-teal); text-decoration:none; font-weight:600}
.footer-inner a:hover{text-decoration:underline}

/* Divider sutil entre seções usando a cor teal (linhas finas) */
.section + .section{border-top:1px solid rgba(33,158,188,0.15)}

/* Modais */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(2,48,71,0.6);
  padding: 24px;
}
.modal[aria-hidden="false"]{display:flex}
.modal-content{
  background:var(--ci-white); color:var(--text);
  max-width:min(720px, 92vw);
  border-radius:16px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow);
}
.modal-image{width:100%; margin:.6rem 0}
.modal-close{
  position:absolute; right:24px; top:16px; background:transparent; border:0; font-size:28px; cursor:pointer; color:var(--ci-navy)
}

/* FABs */
.fab-container{
  position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:1100;
}
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#111; text-decoration:none; font-size:22px; font-weight:700;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  background:var(--ci-gold);
}
.fab:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,183,3,0.35)}
.fab-instagram{background:var(--ci-teal); color:#fff}
.fab-instagram:hover{box-shadow:0 12px 28px rgba(33,158,188,0.35)}

/* Navegação mobile */
@media (max-width: 860px){
  .main-nav .nav-toggle{display:inline-flex; background:transparent; border:2px solid var(--ci-navy); color:var(--ci-navy); border-radius:8px; padding:.4rem .6rem; font-weight:700}
  .main-nav ul{
    position:absolute; right:16px; top:64px; flex-direction:column; background:var(--ci-white);
    padding:12px; border-radius:12px; border:1px solid rgba(33,158,188,0.2); box-shadow: var(--shadow);
    display:none;
  }
  .main-nav ul.open{display:flex}
}

/* Acessibilidade de foco */
a:focus, button:focus{outline:3px solid rgba(33,158,188,.5); outline-offset:2px}


.brand-logo{
  height:32px;
  width:auto;
  border-radius:0;
  display:block;
}


/* Ícones SVG dentro dos FABs */
.fab .icon{width:26px; height:26px; display:block}
.fab-whatsapp, .fab-instagram{color:#fff}