/* Reset minimal */
:root{
	--bg:#fff;
	--text:#222;
	--muted:#666;
	--brand:#c62828; /* vermelho de destaque */
	--accent:#d32f2f;
	--container:1100px;
	--radius:8px;
	--gap:1.25rem;
	--max-width:1200px;
	--header-height: 80px; /* ajuste se seu header for maior/menor */
	--header-card-max: 1100px;
	--header-outer-space: 32px;
	--header-offset: 18px; /* distância do topo para o cartão do header */
	--topbar-height: 36px;
}
h1 {
  font-size: 2.5rem;
  color: var(--brand);
  text-align: center;
  margin-top: 0rem;
  margin-bottom: 5rem;
  font-weight: 700;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:var(--text);
	background:var(--bg);
	line-height:1.45;
	margin:0;
}
.container{max-width:var(--container);margin:0 auto;padding:1rem}

/* Header (consolidado - posição normal, não fixa) */
.site-header{width:100%;z-index:90;background:#fff;padding:1rem 0;border-bottom:1px solid rgba(10,10,10,0.04)}
.header-bar{
	pointer-events:auto;
	width:100%;
	margin:0;
	background:#fff;
	border-radius:0;
	padding:0;
	box-shadow:none;
	box-sizing:border-box;
	z-index:92;
}
.header-bar .header-inner{display:flex;align-items:center;gap:10px;padding:0;max-width:var(--container);margin:0 auto}
.logo-img{height:20px;display:block}
.main-nav{flex:1 1 65%;max-width:920px;margin:0 12px}
.main-nav ul{display:flex;gap:24px;align-items:center;justify-content:center;margin:0;padding:0;list-style:none}
.main-nav a{display:inline-block;padding:4px 6px;font-size:15px;font-weight:600;color:#222;text-decoration:none}
.header-cta{margin-left:auto;padding:8px 10px;font-size:14px;border-radius:6px;background:#d32f2f;color:#fff;text-decoration:none;display:inline-block}
.nav-toggle{display:none;background:transparent;border:0;font-size:18px;margin-left:12px}

/* Sem espaço extra para header (não é mais fixo) */
main{padding-top:100px}

/* Hero (unificado, full-bleed) */
.hero{position:relative;min-height:56vh;display:block;overflow:hidden;margin-top:0}
.hero-media{position:absolute;inset:0;width:100vw;margin-left:calc(50% - 50vw);height:100%;z-index:10;overflow:hidden;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25));z-index:12;pointer-events:none}
.hero-inner{position:relative;z-index:20;padding:36px 0;color:#fff;display:flex;gap:2rem;align-items:center;justify-content:space-between}
.hero-content{max-width:860px}
.lead{color:var(--muted);margin-top:0}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn-primary{background:var(--brand);color:#fff}
.btn-secondary{background:transparent;color:var(--brand);border-color:var(--brand)}

/* Services (corrigido selector e layout) */
.services{padding:3rem 0;background:transparent}
.services h2{font-size:1.6rem;color:var(--brand);text-align:center;margin:0 0 .5rem}
.services .lead{max-width:720px;margin:0 auto 1.25rem;color:var(--muted);text-align:center}

/* grid de cards expansível */
.services-grid--expandable{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:1.25rem;
	list-style:none;
	padding:0;
	margin:1.25rem 0 0;
	align-items:start;
}

/* card expansível */
.service-card--expandable{
	background:#fff;
	border-radius:14px;
	border:1px solid rgba(10,10,10,0.04);
	box-shadow:0 8px 24px rgba(16,24,40,0.04);
	transition:all .3s cubic-bezier(.25,.46,.45,.94);
	overflow:hidden;
	cursor:pointer;
}

.service-card--expandable:hover{
	box-shadow:0 12px 32px rgba(16,24,40,0.08);
	border-color:rgba(198,40,40,0.08);
}

.service-card--expandable[aria-expanded="true"]{
	box-shadow:0 18px 48px rgba(198,40,40,0.15);
	border-color:rgba(198,40,40,0.15);
}

/* header do card (sempre visível) */
.service-header{
	display:flex;
	gap:14px;
	align-items:flex-start;
	padding:1.25rem;
	transition:background .3s ease;
}

.service-card--expandable[aria-expanded="true"] .service-header{
	background:linear-gradient(135deg,rgba(198,40,40,0.04),rgba(214,47,47,0.02));
}

/* ícone do serviço */
.service-icon{
	width:56px;
	height:56px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	background:linear-gradient(135deg,var(--brand),var(--accent));
	color:#fff;
	box-shadow:0 8px 20px rgba(198,40,40,0.08);
	transition:transform .3s ease;
}

.service-card--expandable:hover .service-icon{
	transform:scale(1.08);
}

.service-icon--large{
	width:72px;
	height:72px;
	box-shadow:0 12px 28px rgba(198,40,40,0.12);
}

.service-icon i{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	width:100%;
}

.service-icon svg{display:block;width:28px;height:28px;stroke:#fff;fill:none;transition:width .3s ease,height .3s ease}
.service-icon--large svg{width:38px;height:38px}

/* conteúdo do preview (título + subtítulo) */
.service-preview{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:.35rem;
	min-width:0;
}

.service-preview h3{
	margin:0;
	font-size:1.1rem;
	font-weight:700;
	color:#12202b;
	transition:color .3s ease;
}

/* pequeno ícone junto ao título do serviço (Neurologia) */
.service-h3-icon{
  width:18px;
  height:18px;
  margin-left:0.5rem;
  vertical-align:middle;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
}

.service-h3-icon svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6 }

/* ===== Simple & explanatory services redesign ===== */
/* layout */
.services{padding:3.5rem 0;background:linear-gradient(180deg,rgba(198,40,40,0.02),rgba(255,255,255,0));}
.services .section-title{font-size:1.75rem;text-align:center}
.services .section-lead{margin-bottom:1.25rem;color:var(--muted);text-align:center}

.services-grid--expandable{
  display:grid;
   flex-direction:column;
  grid-template-columns:repeat(auto-fit,minmax(330px, 1fr));
  gap:1rem;
  list-style:none;
  padding:0;
  margin:1.5rem 0 0;
}

/* card: clean surface with subtle left accent */
.service-card--expandable{
  background: #fff;
  border-radius:12px;
  border:1px solid rgba(16,24,40,0.04);
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  transition:transform .18s ease,box-shadow .18s ease;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.service-card--expandable:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(16,24,40,0.08); }
.service-card--expandable[aria-expanded="true"]{ box-shadow:0 24px 44px rgba(198,40,40,0.08); }

/* header layout: icon left, content right */
.service-header{
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px 16px;
}

.service-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(16,24,40,0.06);
  color:var(--brand);
  flex-shrink:0;
}
.service-icon svg{ width:26px; height:26px; stroke:var(--brand); }

.service-preview{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.service-preview h3{ font-size:1.05rem; margin:0; display:flex; align-items:center; gap:8px }
.service-subtitle{ margin:0; color:var(--muted); font-size:0.9rem }

/* small summary always visible to be explanatory */
.service-summary{ margin:0; color:#586069; font-size:0.95rem; padding:0 16px 16px 16px }

/* expanded content (keeps existing behaviour) */
.service-expanded{ padding:0 16px 18px 16px; border-top:1px solid rgba(16,24,40,0.03); }

/* chevron stays at the right but visually lighter */
.service-toggle{ margin-left:auto; color:var(--muted); }

@media (max-width:900px){
	.services-grid--expandable{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
	/* nav mobile painel */
	.main-nav{ position:fixed; top:calc(var(--header-height) + 12px); left:12px; right:12px; z-index:91; display:none }
	.main-nav.open{ display:block }
    .main-nav.open ul{ display:flex; flex-direction:column; gap:12px; background:#fff; padding:12px; align-items:stretch; border:1px solid #ddd; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.08) }
    .main-nav a{ font-size:16px; padding:10px 12px; border-radius:8px }
    .main-nav a:active{ background:#f7f7f7 }
    .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.18); backdrop-filter:blur(1px); display:none; z-index:90 }
    .main-nav.open ~ .nav-overlay{ display:block }
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid #ddd; border-radius:10px; background:#fff; position:relative; font-size:0 }
    .nav-toggle::after{ content:'☰'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#222; font-size:20px; line-height:1 }
    .nav-toggle[aria-expanded="true"]{ border-color:var(--brand) }
    .nav-toggle[aria-expanded="true"]::after{ content:'✕'; color:var(--brand) }
}

@media (max-width:600px){
  .service-header{ padding:12px }
  .service-summary{ padding:0 12px 12px 12px }
}

.service-card--expandable:hover .service-preview h3{
	color:var(--brand);
}

.service-subtitle{
	margin:0;
	font-size:0.85rem;
	color:#888;
	font-weight:500;
	transition:color .3s ease;
}

/* botão toggle (chevron) */
.service-toggle{
	background:transparent;
	border:none;
	padding:0;
	width:24px;
	height:24px;
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--brand);
	cursor:pointer;
	transition:transform .3s ease;
}

.service-card--expandable[aria-expanded="true"] .service-toggle{
	transform:rotate(180deg);
}

.service-toggle i{display:flex;align-items:center;justify-content:center}
.service-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}

/* seção expandida (detalhes do serviço) */
.service-expanded{
	max-height:0;
	overflow:hidden;
	opacity:0;
	transition:max-height .4s cubic-bezier(.25,.46,.45,.94),opacity .3s ease .05s;
	border-top:1px solid rgba(10,10,10,0.04);
}

.service-card--expandable[aria-expanded="true"] .service-expanded{
	max-height:500px;
	opacity:1;
	transition:max-height .4s cubic-bezier(.25,.46,.45,.94),opacity .3s ease;

}

.service-expanded{
	padding:1.25rem;
	display:flex;
	flex-direction:column;
	gap:1rem;
}

.service-description{
	margin:0;
	color:#555;
	font-size:0.95rem;
	line-height:1.6;
	font-weight:500;
}

/* lista de features */
.service-features{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:0.65rem;
}

.service-features li{
	display:flex;
	align-items:center;
	gap:0.6rem;
	color:#555;
	font-size:0.93rem;
	font-weight:500;
}

.feature-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	flex-shrink:0;
	background:linear-gradient(135deg,rgba(198,40,40,0.1),rgba(214,47,47,0.05));
	color:var(--brand);
	border-radius:4px;
	font-size:0.75rem;
	font-weight:700;
}

/* botão dentro do expanded */
.btn-sm{
	padding:0.5rem 0.9rem;
	font-size:0.9rem;
	border-radius:8px;
	align-self:flex-start;
	transition:all .25s ease;
}

.btn-primary.btn-sm{
	background:var(--brand);
	color:#fff;
	border:none;
}

.btn-primary.btn-sm:hover{
	background:#a01d1d;
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(198,40,40,0.2);
}

/* responsivo */
@media (max-width:900px){
	.services-grid--expandable{
		grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	}
	
	.service-header{
		gap:12px;
		padding:1rem;
	}
	
	.service-icon{
		width:48px;
		height:48px;
	}
	
	.service-icon svg{width:24px;height:24px}
	.service-icon--large svg{width:32px;height:32px}
}

@media (max-width:700px){
	.services-grid--expandable{
		grid-template-columns:1fr;
	}
	
	.service-header{
		padding:1rem;
		gap:12px;
	}
	
	.service-card--expandable[aria-expanded="true"] .service-expanded{
		max-height:600px;
	}
	
	.service-preview h3{
		font-size:1rem;
	}
}
/* Team / Carousel (ajustado overflow para deslizar) */
.team{padding:2.5rem 0}

/* grid fix: mostrar 4 cards na primeira linha, 3 na segunda */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(260px,1fr));
  gap:24px;
  list-style:none;
  padding:0;
  margin:28px 0 0;
  align-items:stretch;
}

/* ========== CARDS DA EQUIPE - DESIGN MODERNO E PROFISSIONAL ========== */

/* grid dos cards */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  list-style:none;
  padding:0;
  margin:40px 0 0;
  align-items:stretch;
}

/* card principal */
.doctor-card--modern{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e8e8e8;
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  transition:all .35s cubic-bezier(.25,.46,.45,.94);
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  padding:0;
}

/* ===== SEÇÃO DE IMAGEM ===== */
.doctor-media{
  position:relative;
  width:100%;
  height:380px;
  overflow:hidden;
  background:#f5f5f5;
  margin:0;
  padding:0;
  flex-shrink:0;
}

.doctor-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .6s cubic-bezier(.33,.66,.66,1), filter .35s ease;
  margin:0;
  padding:0;
}

.doctor-card--modern:hover .doctor-media img{
  transform:scale(1.05);
  filter:brightness(1.08);
}

/* overlay com informações básicas */
.doctor-media-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px 24px;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  z-index:10;
}

.overlay-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}

.doctor-name{
  margin:0;
  font-size:1.15rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.3);
  line-height:1.2;
}

.doctor-role{
  font-size:0.9rem;
  font-weight:600;
  color:rgba(255,255,255,0.95);
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* ===== SEÇÃO DE CONTEÚDO ===== */
.doctor-body{
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

/* botões de ação */
.doctor-actions{
  display:flex;
  gap:10px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #f0f0f0;
}

.doctor-actions .btn{
  flex:1;
  padding:10px 12px;
  font-size:0.85rem;
  font-weight:700;
  border-radius:10px;
  text-align:center;
  text-decoration:none;
  transition:all .25s ease;
  border:none;
  cursor:pointer;
  display:inline-block;
}

.doctor-actions .btn-outline{
  background:#f8f8f8;
  color:#222;
  border:1.5px solid #ddd;
}

.doctor-actions .btn-outline:hover{
  background:#f0f0f0;
  border-color:#c62828;
  color:#222;
  transform:translateY(-2px);
}

.doctor-actions .btn-primary{
  background:#c62828;
  color:#fff;
}

.doctor-actions .btn-primary:hover{
  background:#a01d1d;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(198,40,40,0.28);
}

/* ===== EFEITOS HOVER DO CARD ===== */
.doctor-card--modern:hover{
  transform:translateY(-10px);
  box-shadow:0 24px 56px rgba(0,0,0,0.12);
  border-color:#e0e0e0;
}

.doctor-card--modern:focus-within{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width:1024px){
  .team-grid{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
}

@media (max-width:768px){
  .team-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
  
  .doctor-media{
    height:320px;
  }
}

@media (max-width:600px){
  .team-grid{
    gap:16px;
    margin-top:24px;
    padding-inline: 20px;
  }
  
 
  
  .doctor-media{
    width:100%;
    height:250px;
    min-width:120px;
    border-radius:12px 0 0 12px;
  }
  
  .doctor-body{
    padding:14px 16px;
    gap:10px;
  }
  
  
  
  .doctor-actions{
    flex-direction:column;
    gap:8px;
    padding-top:10px;
  }
  
  .doctor-actions .btn{
    padding:8px 10px;
    font-size:0.8rem;
  }
}

/* Team header — detalhe visual elegante */
.team-header{
  text-align:center;
  margin:0 0 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:center;
}
.team-header .team-title{
  margin:0;
  font-size:1.35rem;
  color:var(--brand);
  letter-spacing:.2px;
}
.team-header .team-underline{
  width:64px;
  height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border-radius:999px;
  margin-top:6px;
}

/* Section header shared style (reused by "Nossa equipe" e demais seções) */
.section-header,
.team-header{
  text-align:center;
  margin:0 0 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:center;
}
.section-header .section-title,
.team-header .team-title{
  margin:0;
  font-size:1.85rem;
  color:var(--brand);
  letter-spacing:.2px;
}
.section-header .section-underline,
.team-header .team-underline{
  width:64px;
  height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border-radius:999px;
  margin-top:6px;
}
.section-header .section-lead{
  max-width:640px;
  margin-top: .2rem;
  color:var(--muted);
}

/* Gallery / Contact / About (mantidos) */
/* Estrutura: layout imagem (esquerda) + texto (direita) */
.structure-grid{
  display:grid;
  grid-template-columns: 1fr; /* imagem | conteúdo */
  gap:2rem;
  align-items:center;
  margin-inline: 3rem;
}

/* Wrapper para centralizar o vídeo */
.video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 2rem 0;
}

/* Media frame com largura reduzida em 25% */
.media-frame {
  width: 75%;
  max-width: 900px;
}

video {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
}


.structure-content{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.structure-content h3{ margin:0;color:var(--brand);font-size:1.35rem }
.structure-content p{ margin:0;color:var(--muted);line-height:1.5 }

/* Responsividade: empilha em telas menores */
@media (max-width:900px){
  .structure-grid{ grid-template-columns:1fr; gap:1rem }
}

.about-grid--alt{display:grid;grid-template-columns:1fr 520px;gap:2rem;align-items:center}
.about-image-frame img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(16,24,40,0.06)}

/* Footer (visual profissional - Branco e Moderno) */
.site-footer{
  background: #ffffff;
  color: #222;
  padding-top:64px;
  padding-bottom:36px;
  font-size:0.95rem;
  border-top: 1px solid #e8e8e8;
}
.footer-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:48px;
  padding:20px 28px 48px;
  align-items:start;
}
.footer-about .footer-logo img{ height:44px; display:block }
.footer-about .footer-desc{ margin:16px 0 24px; color:#555; line-height:1.6; max-width:46ch; font-weight:500 }

/* Links úteis */
.footer-links h4{ margin:0 0 .8rem; color:#222; font-size:1.08rem; font-weight:700; letter-spacing:0.3px }
.footer-links ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem }
.footer-links a{ color:#555; text-decoration:none; transition:color .18s ease, transform .12s ease; font-weight:500 }
.footer-links a:hover{ color:var(--brand); transform:translateX(4px) }

/* Horário / Diretor técnico */
.footer-hours h4{ margin:0 0 .6rem; color:#222; font-weight:700; letter-spacing:0.3px }
.footer-hours p{ margin:0; color:#555; line-height:1.6; font-weight:500 }

/* Box de horário / CTA */
.footer-right{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-end }
.hours-box{ background:linear-gradient(135deg, #f5f5f5, #fafafa); padding:16px 18px; border-radius:12px; border:1px solid #e0e0e0; box-shadow:0 4px 16px rgba(16,24,40,0.06) }
.hours-title{ display:block; font-weight:700; color:#222; margin-bottom:10px; font-size:0.98rem; letter-spacing:0.3px }
.hours-list{ margin:0; padding:0; list-style:none; color:#555 }
.hours-list li{ margin-bottom:8px; font-weight:500 }
.hours-list strong{ color:#222; font-weight:700 }

.footer-action .footer-cta{ background:var(--brand); border:2px solid var(--brand); color:#fff; padding:.7rem 1.2rem; border-radius:10px; text-decoration:none; font-weight:700; transition:all .22s ease }
.footer-action .footer-cta:hover{ background:#a01d1d; border-color:#a01d1d; transform:translateY(-2px); box-shadow:0 8px 24px rgba(198,40,40,0.25) }

/* social */
.footer-social{ display:flex; gap:.8rem; margin-top:16px; align-items:center }
.footer-social .social{ 
	width:44px; 
	height:44px; 
	display:inline-flex; 
	align-items:center; 
	justify-content:center; 
	border-radius:12px; 
	background:#f0f0f0; 
	border:1.5px solid #ddd; 
	color:#222; 
	transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
	text-decoration:none;
	flex:0 0 auto;
}
.footer-social .social i{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}
.footer-social .social svg{
	width:22px;
	height:22px;
	stroke:#222;
	fill:none;
	stroke-width:2;
}
.footer-social .social:hover{ 
	transform:translateY(-5px); 
	background:var(--brand); 
	color:#fff; 
	border-color:var(--brand);
}
.footer-social .social:hover svg{
	stroke:#fff;
}

/* footer bottom */
.footer-bottom{ border-top:1px solid #e8e8e8; padding:24px 0 36px; background:#fff }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center }
.footer-bottom p.small{ color:#888; margin:0; font-weight:500 }
  .footer-legal{ list-style:none; padding:0; margin:0; display:flex; gap:2rem }
  .footer-legal li{ display:inline }
  .footer-legal a{ color:#888; text-decoration:none; font-weight:500; transition:color .18s ease }
  .footer-legal a:hover{ color:var(--brand) }
  
  /* Responsive: empilha o footer em telas pequenas */
  @media (max-width:900px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; padding:16px }
    .footer-right{ align-items:flex-start }
  }
  @media (max-width:600px){
    .footer-grid{ grid-template-columns:1fr; gap:16px; padding:12px }
    .footer-about{ order:1; text-align:left }
    .footer-links{ order:2 }
    .footer-hours{ order:3 }
    .footer-right{ order:4; align-items:flex-start; width:100% }
    .hours-box{ width:100% }
    .footer-action{ width:100% }
    .footer-action .footer-cta{ align-self:flex-start; width:100%; text-align:center }
    .footer-social{ justify-content:flex-start }
    .footer-social .social{ width:48px; height:48px }
    .footer-links ul{ gap:1rem }
    .footer-links a{ padding:8px 10px; border-radius:8px; background:#f8f8f8 }
    .footer-links a:active{ background:#efefef }
    .footer-bottom-inner{ flex-direction:column; gap:16px; align-items:flex-start; padding-top:8px }
    .footer-legal{ gap:1.25rem; flex-direction:column }
  }

/* Accessibility helpers */

/* Responsive */
@media (max-width:1000px){.highlights-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
	.hero-inner{flex-direction:column;align-items:flex-start}
	.services-grid{grid-template-columns:repeat(1,1fr)}
	.main-nav ul{display:none}
	.nav-toggle{display:inline-block}
	.header-bar{top:12px;width:calc(100% - 24px)}
	main{padding-top:calc(var(--topbar-height) + 1px)}
	.team-grid{ grid-template-columns:1fr; }
	/* Logo e menu centralizados em mobile */
	.header-bar .header-inner{flex-direction:column;justify-content:center;align-items:center;gap:12px}
	.main-nav{flex:none;margin:0}
	.header-cta{display:none}
}
@media (max-width:700px){
    .about-grid--alt{grid-template-columns:1fr;gap:1rem}
    .about-image-frame{order:-1}
}
@media (max-width:600px){
    :root{--header-height:64px}
    .site-header{height:var(--header-height)}
    .services{padding:2rem 0}
    .service-card{padding:1rem}
    .header-cta{display:none}
    .nav-toggle{display:inline-block}
    .btn{font-size:.95rem}
    .mobile-cta{position:fixed;left:1rem;right:1rem;bottom:1rem;background:var(--brand);color:#fff;padding:.8rem 1rem;border-radius:12px;text-align:center;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.12)}
    .container{padding:.75rem}
    .hero{min-height:44vh}
    .hero-inner{padding:20px 0}
    .section-header .section-title, .team-header .team-title{font-size:1.4rem}
    .section-header .section-lead{font-size:.95rem; padding:0 12px}
    .services .section-title{font-size:1.45rem}
    .service-toggle{width:28px;height:28px}
    section{scroll-margin-top:calc(var(--header-height) + 14px)}
}


/* Nav open state for toggle (mobile) */
.main-nav.open ul{ display:flex; flex-direction:column; gap:12px; background:#fff; padding:12px; align-items:center; border:1px solid #ddd; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.08) }

/* pequenas melhorias para a .noscript-warning */
.noscript-warning{
  background:#fff3cd;
  color:#856404;
  border:1px solid #ffeeba;
  padding:10px 14px;
  border-radius:6px;
  margin:12px;
  text-align:center;
}

/* Moderniza a seção "Por que escolher" para visual de cards (semelhante a serviços) */
.highlights{ padding:2.25rem 0 3rem; }
.highlights-lead{ max-width:760px; margin:0 auto 1rem; color:var(--muted); text-align:center; }

/* grid responsivo de cards */
.highlights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  list-style:none;
  padding:0;
  margin:1.25rem 0 0;
  align-items:stretch;
}

/* card */
.highlight-item{
  background:#fff;
  border-radius:12px;
  padding:1.15rem;
  border:1px solid rgba(10,10,10,0.04);
  box-shadow:0 8px 20px rgba(16,24,40,0.04);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
  min-height:150px;
}

/* ícone dentro do card (circular/gradiente) */
.highlight-icon{
  width:56px;
  height:56px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  box-shadow:0 8px 20px rgba(198,40,40,0.08);
  flex:0 0 auto;
}

/* garante que o <i data-feather> fique centralizado e o SVG injete com tamanho adequado */
.highlight-icon i{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.highlight-icon svg{ width:24px; height:24px; stroke:#fff; fill:none; }

/* tipografia do card */
.highlight-item h3{ margin:0; font-size:1rem; color:#12202b; }
.highlight-item p{ margin:0; color:#55616a; font-size:0.95rem; line-height:1.45; }

/* hover / foco */
.highlight-item:hover,
.highlight-item:focus-within,
.highlight-item[tabindex]:focus{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(16,24,40,0.12);
  border-color:rgba(198,40,40,0.12);
  outline:none;
}

/* responsivo (mantém uma coluna em telas pequenas) */
@media (max-width:700px){
  .highlights-grid{ grid-template-columns:repeat(1,1fr); }
  .highlight-item{ flex-direction:row; align-items:center; gap:12px; }
  .highlight-item h3{ font-size:1rem; }
}

/* Hero - Bottom Card (novo estilo para cartão inferior na hero) */
.hero-bottom-card{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-28px; /* ajusta a distância de sobreposição */
  width:calc(100% - 64px);
  max-width: var(--header-card-max);
  height:56px;
  background:#d62323;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(16,24,40,0.08);
  pointer-events:none;
  z-index:30;
  /* pequeno contorno sutil para separar sobre fundos claros */
  border:1px solid rgba(10,10,10,0.03);
  box-sizing:border-box;
}

/* evita que o detalhe polua telas muito pequenas */
@media (max-width:700px){
  .hero-bottom-card{ display:none; }
}

/* Section dividers — decorative separators between sections */
.section-divider{
  width:100%;
  overflow:visible;
  line-height:0;
  margin:0; /* divider touches section edges */
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 0;
  position:relative;
}
.section-divider svg{
  display:block;
  width:100%;
  max-width:1200px;
  height:auto;
}

/* the path receives color via currentColor for easy theming */
.section-divider .shape{ 
  fill:none;
  stroke:#c62828;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ECG (batimento cardíaco) */
.section-divider .ecg{
  fill:none;
  stroke:#c62828;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.section-divider .ecg-start{
  animation:pulse-start 1.2s ease-in-out infinite;
}

.section-divider .ecg-end{
  animation:pulse-end 1.2s ease-in-out infinite;
}

@keyframes pulse-start {
  0%, 100% { opacity:1; }
  50% { opacity:0.6; }
}

@keyframes pulse-end {
  0%, 100% { opacity:1; }
  50% { opacity:0.6; }
}

/* inverse modifier - mantém a mesma cor (vermelha) */
.section-divider.inverse{
  padding:20px 0;
}

.section-divider.inverse .shape{
  fill:none;
  stroke:#c62828;
  stroke-width:2.5;
}

.section-divider.inverse .ecg{
  fill:none;
  stroke:#c62828;
  stroke-width:2;
}

/* quando é small */
.section-divider.small{
  padding:12px 0;
}

/* small visual polish: animate slight wave on hover (desktop) */
@media (hover: hover) and (pointer: fine){
  .section-divider svg{ transition: transform .6s ease; }
  .section-divider:hover svg{ transform: translateY(-4px); }
}

/* responsive adjustments */
@media (max-width:700px){
  .section-divider{
    padding:16px 0;
  }
  .section-divider.small{ 
    padding:8px 0;
  }
}

/* Esconder divisor imediatamente após o hero (remove espaçamento extra) */
.section-divider.hero-divider{
	display:none;
}

/* puxa a seção para cima, aproximando-a do banner; responsivo para evitar sobreposição em telas pequenas */
section.tight-top{
	margin-top: -36px; /* ajusta quanto a seção sobe (teste ±) */
	padding-top: 0.25rem; /* evita que conteúdo fique colado */
}

/* reduzir o pull em telas menores para evitar sobreposição com elementos do hero */
@media (max-width:900px){
	section.tight-top{ margin-top: -12px; }
}
@media (max-width:520px){
	section.tight-top{ margin-top: 0; } /* em mobile, evita sobreposição */
}
main{
  padding-inline: 10px;
}

/* ========== DOCTOR PROFILE MODAL ========== */
.doctor-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.doctor-modal.active{
  opacity:1;
  pointer-events:auto;
}

/* overlay/backdrop */
.doctor-modal-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  z-index:1;
}

/* modal content box */
.doctor-modal-content{
  position:relative;
  z-index:2;
  background:#fff;
  border-radius:20px;
  max-width:600px;
  width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,0.25);
  transform:scale(0.9);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  max-height:90vh;
  overflow-y:auto;
}

.doctor-modal.active .doctor-modal-content{
  transform:scale(1);
}

/* close button */
.doctor-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#f5f5f5;
  border:1px solid #e0e0e0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  z-index:10;
  padding:0;
}

.doctor-modal-close:hover{
  background:#c62828;
  border-color:#c62828;
  transform:rotate(90deg);
}

.doctor-modal-close i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.doctor-modal-close svg{
  width:24px;
  height:24px;
  stroke:#222;
  transition:stroke .2s ease;
}

.doctor-modal-close:hover svg{
  stroke:#fff;
}

/* modal body */
.doctor-modal-body{
  padding:32px;
}

/* header: photo + name/role */
.doctor-modal-header{
  display:flex;
  gap:20px;
  align-items:center;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:2px solid #f0f0f0;
}

.doctor-modal-photo{
  width:120px;
  height:120px;
  border-radius:16px;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

.doctor-modal-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.doctor-modal-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.doctor-modal-name{
  margin:0;
  font-size:1.5rem;
  font-weight:700;
  color:#222;
  line-height:1.2;
}

.doctor-modal-role{
  margin:0;
  font-size:1rem;
  font-weight:600;
  color:var(--brand);
}

/* details section */
.doctor-modal-details{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.doctor-modal-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field-label{
  font-size:0.9rem;
  font-weight:700;
  color:#222;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.field-value{
  font-size:1rem;
  font-weight:600;
  color:#555;
}

.field-description{
  margin:0;
  font-size:0.95rem;
  line-height:1.7;
  color:#555;
  text-align:justify;
  font-weight:400;
}

/* responsive adjustments */
@media (max-width:700px){
  .doctor-modal{
    padding:12px;
  }
  
  .doctor-modal-content{
    border-radius:16px;
    max-height:95vh;
  }
  
  .doctor-modal-body{
    padding:24px 20px;
  }
  
  .doctor-modal-header{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:16px;
    margin-bottom:20px;
  }
  
  .doctor-modal-photo{
    width:100px;
    height:100px;
  }
  
  .doctor-modal-name{
    font-size:1.3rem;
  }
  
  .doctor-modal-close{
    top:12px;
    right:12px;
    width:36px;
    height:36px;
  }
  
  .doctor-modal-close svg{
    width:20px;
    height:20px;
  }
  
  .field-description{
    text-align:left;
  }
}