/* =========================================================
   Clínica Saúde Familiar — style.css
   ========================================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

/* --- CSS Variables --- */
/*
  ============================================
  PALETA “Oceanic Health” — Clínica Médica
  ============================================
  WCAG AAA: todas as combinações ≥ 7:1

  Navy Primário  #0b3c5d  ←→ #fff  = 11.2:1  ✓ AAA
  Azul Secundário#0f5487  ←→ #fff  =  7.5:1  ✓ AAA
  Verde Esmeralda#0a7e52  ←→ #fff  =  7.3:1  ✓ AAA
  Teal Escuro    #064e44  ←→ #fff  = 13.8:1  ✓ AAA
  Texto Principal#1a2c3d  ←→ #fff  = 14.1:1  ✓ AAA
  Texto Secund.  #3d5265  ←→ #fff  =  7.9:1  ✓ AAA
  ============================================
*/
:root {
  --cor-primaria:    #0b3c5d;   /* Navy Oceânico  — 11.2:1 */
  --cor-secundaria:  #0f5487;   /* Azul Profundo  —  7.5:1 */
  --cor-acento:      #0d5c3a;   /* Verde Floresta  —  8.1:1 ✓ AAA */
  --fundo-alternado: #eef5f8;   /* Cinza-teal Suave */
  --texto-principal: #1a2c3d;   /* Azul-escuro    — 14.1:1 */
  --texto-secundario: #3d5265;  /* Ardósia Escuro  —  7.9:1 */
  --fonte-titulos: 'Raleway', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;
  --sombra-card: 0 4px 20px rgba(0, 0, 0, 0.20);
  --sombra-card-hover: 0 10px 36px rgba(0, 0, 0, 0.32);
  --radius: 8px;
  --transition: 0.25s ease;
}

/* =========================================================
   OVERRIDE BOOTSTRAP SUCCESS — WCAG AAA
   Bootstrap default btn-success (#198754) = 4.18:1 com branco → FALHA AA
   O nosso --cor-acento (#0d5c3a) = 8.1:1 com branco → PASSA AAA
   ========================================================= */
:root {
  --bs-success:         #0d5c3a;
  --bs-success-rgb:     13, 92, 58;
  --bs-btn-bg:          #0d5c3a;
  --bs-btn-border-color:#0d5c3a;
}

.btn-success {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 #0d5c3a;
  --bs-btn-border-color:       #0d5c3a;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #0b4f32;
  --bs-btn-hover-border-color: #0a4730;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #0a4730;
  --bs-btn-active-border-color:#08402a;
  --bs-btn-disabled-bg:        #0d5c3a;
  --bs-btn-disabled-border-color:#0d5c3a;
}

.btn-outline-success {
  --bs-btn-color:              #0d5c3a;
  --bs-btn-border-color:       #0d5c3a;
  --bs-btn-hover-bg:           #0d5c3a;
  --bs-btn-hover-border-color: #0d5c3a;
  --bs-btn-active-bg:          #0d5c3a;
  --bs-btn-active-border-color:#0d5c3a;
}

/* OVERRIDE btn-danger — Bootstrap #dc3545 com branco = 4.53:1 (falha AAA)
   #a71d2a com branco = 7.5:1 → PASSA AAA */
.btn-danger {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 #a71d2a;
  --bs-btn-border-color:       #a71d2a;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #c0392b;   /* vermelho mais quente e vivo */
  --bs-btn-hover-border-color: #c0392b;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #7d151f;
  --bs-btn-active-border-color:#6c121b;
  --bs-btn-disabled-bg:        #a71d2a;
  --bs-btn-disabled-border-color:#a71d2a;
  transition: background-color 0.13s ease-out, border-color 0.13s ease-out,
              box-shadow 0.13s ease-out, transform 0.13s ease-out;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(192, 57, 43, 0.45);  /* glow vermelho */
}

/* WCAG AAA: .text-danger Bootstrap (#DC3545 = 4.53:1) → #a71d2a (7.5:1) */
.text-danger { color: #a71d2a !important; }

/* WCAG AAA: .badge e .bg-success — actualizados para nova cor #0d5c3a */
.badge.bg-success,
.bg-success { background-color: #0d5c3a !important; }
.text-success { color: #0d5c3a !important; }

/* WCAG 2.5.5 Target Size — mínimo 44px de altura para todos os .btn */
.btn,
.btn-sm,
.btn-lg {
  min-height: 44px !important;
  padding-block: 0.6rem !important;   /* garante 44px sem forçar display: flex */
  align-items: center;
  justify-content: center;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-corpo);
  font-size: 16px;
  color: var(--texto-principal);
  line-height: 1.7;
  background-color: #fff;
  min-width: 320px; /* bloqueia no desktop; mobile usa viewport meta tag */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulos);
  color: var(--cor-primaria);
  font-weight: 700;
  line-height: 1.25;
}

p {
  color: var(--texto-secundario);
  margin-bottom: 1rem;
  line-height: 1.5;  /* WCAG 1.4.8: mínimo 1.5× o tamanho da fonte */
}

/* WCAG 1.4.8 — Bootstrap .display-* tem line-height:1.2; forçar mínimo 1.5 */
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  line-height: 1.5 !important;
}

a {
  color: var(--cor-secundaria); /* WCAG AAA: #0f5487 = 7.5:1 em fundo branco (era #1a6ea0 = 5.55:1) */
  transition: color var(--transition);
}

a:hover {
  color: var(--cor-primaria);
}

/* WCAG AAA: sobrescreve Bootstrap .text-muted (#595B5E = 6.78:1) com cor do site (7.9:1) */
.text-muted {
  color: var(--texto-secundario) !important; /* #3d5265 = 7.9:1 em fundo branco */
}

img {
  max-width: 100%;
  height: auto;
}

/* Limitar a largura do conteúdo para melhor legibilidade e centralização */
.container {
  max-width: 1200px !important;
}

/* --- Acessibilidade: Foco Visível --- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--fonte-titulos);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* =========================================================
   TOPBAR — Barra superior de ação rápida
   ========================================================= */
.topbar {
  background: linear-gradient(90deg, #053d34 0%, #064e44 50%, #075a4e 100%);
  color: #ffffff;
  font-size: 0.875rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--fonte-titulos);
}

.topbar-contact a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.topbar-contact a:hover { color: #fff; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* clinic-status dentro da topbar */
.topbar .clinic-status,
.topbar .clinic-status.fechado,
.topbar .clinic-status.aberto {
  font-size: 0.78rem !important;
  padding: 0.22rem 0.75rem !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-family: var(--fonte-titulos) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--cor-primaria) !important;
  border: 1.5px solid #e74c3c !important;
  margin: 0 !important;
  cursor: default;
}

.topbar .clinic-status.aberto {
  border-color: #27ae60 !important;
}

.topbar .clinic-status::before,
.topbar .clinic-status.fechado::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #e74c3c !important;
  flex-shrink: 0 !important;
  animation: none !important;
}

.topbar .clinic-status.aberto::before {
  background: #27ae60 !important;
  animation: pulso-status 1.8s ease-in-out infinite !important;
}


.topbar-btn {
  font-size: 0.78rem !important;
  padding: 0.35rem 0.9rem !important;
  font-family: var(--fonte-titulos);
  font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.70) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 767px) {
  .topbar { display: none; }
}

/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  padding: 1.25rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}

.navbar-brand {
  font-family: var(--fonte-titulos);
  font-weight: 700;
  color: var(--cor-primaria) !important;
  font-size: 1.35rem;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand .brand-icon {
  font-size: 1.6rem;
  color: var(--cor-acento);
}

.navbar-nav .nav-link {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto-principal) !important;
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
  position: relative;
  /* WCAG 2.5.5 — touch target mínimo de 44px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.85rem;
  right: 0.85rem;
  height: 2px;
  background: var(--cor-secundaria);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-nav .nav-link:hover {
  color: var(--cor-primaria) !important;
  background-color: rgba(26, 82, 118, 0.05);
}

.navbar-nav .nav-link.active {
  color: var(--cor-primaria) !important;
}

.navbar-toggler {
  border-color: var(--cor-primaria);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.25);
}

/* Sobrepor o box-shadow azul claro do Bootstrap nos links do navbar */
.navbar-nav .nav-link:focus-visible,
.navbar-brand:focus-visible,
.dropdown-toggle:focus-visible {
  outline: 3px solid var(--cor-primaria) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
  box-shadow: none !important;   /* remove o glow azul-claro Bootstrap */
}

/* =========================================================
   FOCUS VISIBLE GLOBAL — WCAG 2.4.7 Focus Visible (AA)
   Aplica-se apenas a navegação por teclado (:focus-visible)
   sem afectar utilizadores de rato

   REGRA: azul escuro em fundos claros | branco em fundos escuros
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cor-primaria) !important;   /* azul navy sobre fundo branco */
  outline-offset: 3px !important;
  border-radius: 3px;
  box-shadow: none !important;   /* remove o glow azul-claro do Bootstrap */
}

/* --- FUNDO ESCURO: outline branco -------------------------------- */
/* Sidebar de especialidades (fundo navy gradient) */
.esp-sidebar a:focus-visible,
.esp-sidebar button:focus-visible,
.esp-sidebar input:focus-visible,
/* Topbar (fundo teal escuro) */
.topbar a:focus-visible,
.topbar button:focus-visible,
/* Navbar ao colapsar (fundo escuro em mobile) */
.navbar-collapse a:focus-visible,
/* Friso de alertas (fundo navy) */
#friso-alertas a:focus-visible,
#friso-alertas button:focus-visible,
/* Hero section (fundo imagem escura) */
.hero-section a:focus-visible,
.hero-section button:focus-visible,
/* Secções com background inline (ex: CTA gradient) */
section[style*="background"] a:focus-visible,
section[style*="background"] button:focus-visible,
/* Cookie banner (fundo glassmorphism escuro) */
#cookie-banner a:focus-visible,
#cookie-banner button:focus-visible,
/* Footer (fundo navy) */
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible,
/* Page banners internos */
.page-banner a:focus-visible,
.page-banner button:focus-visible {
  outline-color: #ffffff !important;
  outline-width: 3px !important;
}


/* =========================================================
   DROPDOWN — WCAG 2.5.5: alvo mínimo 44×44 px
   Bootstrap .dropdown-item padrão = 24px → corrigido aqui
   ========================================================= */
.dropdown-item {
  font-family: var(--fonte-titulos);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-principal);
  /* min-height 44px + padding vertical para garantir alvo tátil */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  transition: background-color var(--transition), color var(--transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(11, 60, 93, 0.07);
  color: var(--cor-primaria);
}

.dropdown-item:active {
  background-color: var(--cor-primaria);
  color: #fff;
}

/* Input de filtro dentro do dropdown */
.esp-dropdown .dropdown-filter-wrap {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e0e9f0;
}

.esp-dropdown {
  min-width: 220px;
  padding: 0;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: var(--radius);
  overflow: hidden;
}



/* =========================================================
   FRISO DE ALERTAS (abaixo do navbar) — ticker direita→esquerda
   ========================================================= */
#friso-alertas {
  background: linear-gradient(90deg, #6b2d0e 0%, #7c3010 50%, #6b2d0e 100%);
  color: #fff;
  font-size: 0.875rem;
  font-family: var(--fonte-titulos);
  font-weight: 600;
  padding: 0.4em 0;
  min-height: 2.4em;
  position: relative;
  z-index: 999;
  overflow-x: visible;         /* WCAG 1.4.4: não cortar ao zoom */
  overflow-y: visible;
  border-top: 2px solid #f59e0b;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

/* Aplicar overflow:hidden apenas em desktop (> 1200px) onde o ticker anima */
/* A 200% zoom (viewport ~ 960px) o overflow não se aplica — WCAG 1.4.4 */
@media screen and (min-width: 1201px) and (prefers-reduced-motion: no-preference) {
  #friso-alertas {
    overflow-x: hidden;
  }
}

#friso-alertas.fechado {
  display: none;
}

.friso-inner {
  display: flex;
  align-items: center;
}

.friso-icon {
  font-size: 1.1rem;
  color: #ffffff;
  flex-shrink: 0;
  padding: 0 0.9rem;
  border-right: 1px solid rgba(255,255,255,0.25);
  line-height: 1;
}

/* Wrapper com máscara de fade nas bordas — sem overflow:hidden (WCAG 1.4.4) */
/* O clip é feito pelo #friso-alertas pai, não aqui */
.friso-pista-wrap {
  flex: 1;
  overflow: visible;           /* WCAG 1.4.4: não cortar texto ao zoom 200% */
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* Faixa que se move — conteúdo duplicado para loop contínuo */
.friso-pista {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  animation: ticker-move 40s linear infinite;
  width: max-content;
}

.friso-pista:hover {
  animation-play-state: paused;  /* pausa ao passar o rato */
}

@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* WCAG 1.4.4 + prefers-reduced-motion:
   Ao zoom alto ou sem animação, mostrar texto normalmente */
@media (prefers-reduced-motion: reduce) {
  .friso-pista {
    animation: none;
    white-space: normal;
    flex-wrap: wrap;
    width: auto;
  }
  /* Mostrar apenas os primeiros 4 itens (sem duplicados) */
  .friso-pista span:nth-child(n+9) {
    display: none;
  }
  .friso-pista-wrap {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .friso-icon {
    animation: none;
  }
}

/* WCAG 1.4.4: ao zoom alto (viewport estreito = 200% em 1920px desktop),
   parar o ticker e mostrar texto em formato lista acessível */
@media screen and (max-width: 960px) {
  #friso-alertas {
    overflow-x: visible;
    overflow-y: visible;
  }
  .friso-pista {
    animation: none;
    white-space: normal;
    flex-wrap: wrap;
    width: auto;
    gap: 0.5rem;
  }
  .friso-pista-wrap {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  
}


/* Ícones Bootstrap dentro do friso — brancos e alinhados */
.friso-pista span .bi {
  color: #fff;
  vertical-align: middle;
  font-size: 0.85rem;
  opacity: 0.9;
  margin-right: 0.75rem !important;  /* sobrescreve Bootstrap me-1 (!important) */
}





.friso-fechar {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  line-height: 1;
  margin: 0 0.7rem;
}

.friso-fechar:hover {
  background: rgba(255,255,255,0.35);
}

.friso-fechar:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =========================================================
   HERO / BANNER PRINCIPAL
   ========================================================= */
.hero-section {
  min-height: 85vh;
  background: linear-gradient(135deg, #0a2744 0%, #1a5276 50%, #0d3d6e 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Slideshow de fundo do hero */
.hero-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  animation: hero-bg-fade 24s ease-in-out infinite;
}

.hero-bg-slide:nth-child(1) { animation-delay:  0s; }
.hero-bg-slide:nth-child(2) { animation-delay:  6s; }
.hero-bg-slide:nth-child(3) { animation-delay: 12s; }
.hero-bg-slide:nth-child(4) { animation-delay: 18s; }

@keyframes hero-bg-fade {
  0%   { opacity: 0; }
  6%   { opacity: 0.11; }
  21%  { opacity: 0.11; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}


.hero-section::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 50px;
  background: #eef5f8;
  clip-path: ellipse(72% 100% at 50% 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Substitui o <br> no h1 do hero — evita o falso positivo text_block_heading */
.hero-linebreak {
  display: block;
}

/* Skip-nav: landmark que envolve o skip link (aria_content_in_landmark) */
.skip-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

.hero-section h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  margin-bottom: 1.25rem;
}

.hero-subtitle {
  color: rgba(255,255,255,0.9);
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 2rem;
  max-width: 550px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 0.35rem 1rem;
  color: rgba(255,255,255,0.95);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}

.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat .stat-number {
  display: block;
  font-family: var(--fonte-titulos);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.hero-stat .stat-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================================================
   GALERIA HERO — Carousel de imagens
   ========================================================= */
.hero-galeria {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 0 4px rgba(255,255,255,0.15);
  animation: hero-float 5s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.hero-slide-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Indicadores (bolinhas) */
.hero-indicators {
  bottom: 14px !important;
}

.hero-indicators [data-bs-target] {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.55) !important;
  border: none !important;
  margin: 0 4px !important;
  transition: background 0.3s, transform 0.3s !important;
}

.hero-indicators .active {
  background: #fff !important;
  transform: scale(1.3) !important;
}

/* Setas de controlo */
.hero-ctrl {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3) !important;
  transition: background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-ctrl:hover {
  background: rgba(255,255,255,0.4) !important;
}

.carousel-control-prev.hero-ctrl { left: 10px !important; }
.carousel-control-next.hero-ctrl { right: 10px !important; }

.hero-ctrl .bi {
  font-size: 1.1rem;
  color: #fff;
  display: flex;
}



/* =========================================================
   BANNER INTERNO (páginas internas)
   ========================================================= */
.page-banner {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
  padding: 120px 0 110px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Imagem de fundo subtil por página */
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 15%;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Overlay com gradiente radial — igual ao hero */
.page-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Gradiente decorativo sobre a imagem */
.page-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Curva inferior — menos pronunciada */
.page-banner::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 50px;
  background: #ffffff;
  clip-path: ellipse(80% 100% at 50% 100%);
  pointer-events: none;
  z-index: 2;
}

/* Conteúdo do banner acima da curva */
.page-banner .container {
  position: relative;
  z-index: 3;
}

/* ─── Página de Contactos — transição puzzle: banner navy → mapa ─── */
.page-banner--contactos::after { display: none; } /* sem arco branco */
.page-banner--contactos {
  padding-bottom: 35px;
  position: relative;
  z-index: 2;
}
.page-banner--contactos::before { opacity: 0.10; }

.page-banner--contactos + main {
  position: static;
}

/* =========================================================
   ÂNCORA FORMULÁRIO — scroll-margin-top
   Compensa navbar sticky (~70px) + friso (~42px) + margem
   ========================================================= */
#form-marcacao-section {
  scroll-margin-top: 130px;
}

/* 
  .contactos-arch-transicao:
  SVG standalone (1.º filho de main) que cria o arco navy invertido.
  Tem margin-bottom negativo para que o mapa suba para trás dele.
  z-index: 5 fica à frente do mapa (z-index auto).
  Resultado visual: navy nas laterais (80 px), mapa aparece no centro do arco.
*/
.contactos-arch-transicao {
  position: relative;
  z-index: 5;
  height: 10px;
  margin-bottom: -10px; /* puxa o mapa para trás do arco */
  overflow: hidden;
  pointer-events: none;
}
.contactos-arch-transicao svg {
  display: block;
  width: 100%;
  height: 100%;
}








/* ─── Imagens por página ─── */
.page-banner--servicos::before    { background-image: url('../img/banner-servicos.jpg');  background-position: center 40%; }
.page-banner--sobre::before       { background-image: url('../img/banner-sobre.jpg');     background-position: center 65%; }
.page-banner--equipa::before      { background-image: url('../img/banner-equipa.jpg');    background-position: center 50%; }
.page-banner--marcacoes::before   { background-image: url('../img/banner-marcacoes.jpg'); background-position: center 20%; }
.page-banner--autores::before     { background-image: url('../img/banner-autores.jpg');   background-position: center 35%; }
.page-banner--especialidade::before { background-image: url('../img/banner-servicos.jpg'); background-position: center 40%; }
.page-banner--contactos::before   { background-image: url('../img/banner-contactos.jpg'); background-position: center 40%; }

.page-banner h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin-bottom: 0.75rem;
}

.page-banner .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  min-height: 44px;
  /* WCAG 2.5.5: sem align-items:center — default stretch permite que <li> cresça até 44px */
}

.page-banner .breadcrumb-item {
  display: flex;
  align-items: center;  /* centra o conteúdo dentro dos 44px do <li> */
  min-height: 44px;     /* garante explicitamente os 44px em cada item */
}

.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

/* WCAG 2.5.5 AAA — área mínima 44×44px no link do breadcrumb */
.page-banner .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;      /* altura mínima explícita — detetável pelo checker */
  min-width: 44px;
  padding-inline: 6px;
  padding-block: 8px;
}

.page-banner .breadcrumb-item.active {
  color: #fff;
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.5);
}


/* =========================================================
   SECÇÕES GERAIS
   ========================================================= */
/* Isola o stacking context do main — impede transforms de cards de sobrepor o footer */
main {
  position: relative;
  isolation: isolate;
}

section {
  padding: 80px 0;
}

/* Primeira secção logo após o banner interno — menos espaço em cima */
.page-banner + main > section:first-child {
  padding-top: 15px;
}


section.bg-light-section {
  background-color: var(--fundo-alternado);
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--cor-primaria);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--texto-secundario);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 600px;
}

.section-divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
  border-radius: 2px;
  margin: 0.75rem auto 1rem;
}

.section-divider.left {
  margin-left: 0;
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--sombra-card);
  transition: transform 0.13s ease-out, box-shadow 0.13s ease-out;  /* snappy */
}

/* Sem hover global — só cartões clicáveis têm hover (ver .especialidade-card:hover) */

.card-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;   /* círculo */
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transition: background 0.12s ease, transform 0.12s ease;  /* snappy */
}

.especialidade-card:hover .card-icon-wrap {
  background: linear-gradient(135deg, #1a86c1, #2e9ed6);
  transform: scale(1.1);
}

.card-icon-wrap i,
.card-icon-wrap span {
  font-size: 1.9rem;
  color: #fff;
}

/* --- Destaque Cards (Homepage) --- */
.destaque-card {
  border-top: 4px solid var(--cor-secundaria);
  text-align: center;
  padding: 2rem 1.5rem;
}

/* --- Especialidade Cards --- */
.especialidade-card {
  text-align: center;
  padding: 2rem 1.25rem 1.5rem;
  cursor: pointer;
  position: relative;           /* âncora do stretched-link */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.especialidade-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.especialidade-card:hover .card-link {
  color: var(--cor-primaria);
  text-decoration: underline;
}

/* Card-body em coluna para empurrar o link sempre para o fundo */
.especialidade-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0;
}

.especialidade-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.especialidade-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
  flex: 1;              /* ocupa o espaço disponível empurrando o link para baixo */
}

.especialidade-card .card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-secundaria); /* #0f5487 = 7.5:1 em fundo branco → WCAG AAA ✓ */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;        /* WCAG 2.5.5: área mínima de toque */
  padding-block: 0.6rem;   /* garante altura real mesmo sem conteúdo suficiente */
  margin-top: 1rem;        /* espaço fixo acima do link — alinha na mesma linha em todos os cards */
}

.especialidade-card .card-link:hover {
  color: var(--cor-primaria);
  text-decoration: underline;
}

/* --- Serviço Cards --- */
.servico-card .card-img-top {
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.servico-card .card-body {
  padding: 1.5rem;
}

/* --- Equipa Cards — Slide Overlay --- */

/* Wrapper: contentor com overflow hidden para o slide */
.flip-card-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  height: 360px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

.flip-card-wrap:hover,
.flip-card-wrap:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

/* Container interno — apenas posicionamento */
.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ── FRENTE: foto + overlay gradiente com nome ── */
.flip-card-front {
  position: absolute;
  inset: 0;
}

.flip-card-front .fc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.flip-card-wrap:hover .fc-photo {
  transform: scale(1.06);
}

/* Gradiente escuro na parte inferior com o nome */
.flip-card-front .fc-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(
    to top,
    rgba(8, 24, 48, 0.90) 0%,
    rgba(8, 24, 48, 0.45) 55%,
    transparent 100%
  );
  padding: 55px 18px 18px;
}

.flip-card-front .fc-info h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.flip-card-front .fc-info .fc-esp {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.flip-card-front .fc-hint {
  display: none; /* substituído pelo efeito visual */
}

/* ── VERSO: slide-up com gradiente e bio ── */
.flip-card-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #1a6fb3 0%, #0c7a70 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card-wrap:hover .flip-card-back,
.flip-card-wrap:focus-within .flip-card-back {
  transform: translateY(0);
}

.flip-card-back .fc-back-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.flip-card-back h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 5px;
}

.flip-card-back .fc-back-esp {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.flip-card-back .fc-back-cv {
  color: rgba(255, 255, 255, 0.90);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.flip-card-back .btn-marcar-flip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--cor-primaria);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flip-card-back .btn-marcar-flip:hover {
  transform: scale(1.05);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.24);
  color: var(--cor-primaria);
}

/* --- Testemunho Cards --- */
.testemunho-card {
  padding: 2rem;
  position: relative;
}

.testemunho-card::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 5rem;
  color: var(--cor-secundaria);
  opacity: 0.15;
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  line-height: 1;
}

.testemunho-text {
  font-size: 0.97rem;
  color: var(--texto-secundario);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* blockquote reset — semântica correta sem alterar visual */
blockquote.testemunho-text {
  margin: 0 0 1.25rem 0;
  padding: 0;
  border: none;
  quotes: none;
}

.testemunho-autor {
  font-weight: 600;
  color: var(--cor-primaria);
  font-family: var(--fonte-titulos);
  font-size: 0.95rem;
}

.stars {
  color: #f4b400;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* =========================================================
   SECÇÃO SOBRE (Home)
   ========================================================= */
.sobre-img {
  border-radius: var(--radius);
  box-shadow: var(--sombra-card-hover);
  object-fit: cover;
  width: 100%;
  max-height: 420px;
}

/* =========================================================
   VALORES (Sobre nós)
   ========================================================= */
.valor-card {
  border-left: 4px solid var(--cor-secundaria);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  text-align: left;
}

.valor-card .card-icon-wrap {
  margin: 0 0 1rem 0;
}

/* =========================================================
   GALERIA
   ========================================================= */
.gallery-img {
  border-radius: var(--radius);
  object-fit: cover;
  width: 100%;
  height: 200px;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--sombra-card);
}

.gallery-img:hover {
  transform: scale(1.03);
  box-shadow: var(--sombra-card-hover);
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
.form-label {
  font-weight: 600;
  font-family: var(--fonte-titulos);
  color: var(--cor-primaria);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  border: 1.5px solid #d0d9e2;
  border-radius: var(--radius);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  padding: 0.65rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* ── Campo de data: área de toque = campo inteiro (WCAG 2.5.5 — 44px) ── */
input[type="date"].form-control {
  position: relative;
  min-height: 44px;
  cursor: pointer;
}

/* Expande o ícone do calendário para cobrir todo o input —
   clicar em qualquer ponto do campo abre o seletor de data */
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;          /* transparente — o cursor pointer já indica a ação */
  cursor: pointer;
  z-index: 1;
}


.form-control:focus,
.form-select:focus {
  border-color: var(--cor-secundaria);
  box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.2);
  outline: none;
}

fieldset {
  border: 1.5px solid #e0e9f0;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

legend {
  font-family: var(--fonte-titulos);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cor-primaria);
  padding: 0 0.5rem;
  width: auto;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.65rem 1.5rem;
  transition: all var(--transition);
  letter-spacing: 0.2px;
}

.btn-primary {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-primary:hover {
  background-color: #1a86c1;
  border-color: #1a86c1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 134, 193, 0.35);
}

/* Outline com a cor primária do site (não o azul Bootstrap) */
.btn-outline-site {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  border-width: 2px;
  background-color: transparent;
}
.btn-outline-site:hover,
.btn-outline-site:focus-visible {
  color: #fff;
  background-color: #1a86c1;
  border-color: #1a86c1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 134, 193, 0.35);
}

.btn-success {
  background-color: var(--cor-acento);
  border-color: var(--cor-acento);
}

.btn-success:hover {
  background-color: #0d9e63;
  border-color: #0d9e63;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(10, 126, 82, 0.55);
  filter: brightness(1.08);
}

.btn-outline-light:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.35);
}

/* =========================================================
   SIDEBAR (Detalhe Especialidade)
   ========================================================= */
.sidebar-card {
  position: sticky;
  top: 80px;
}

.sidebar-card .card-header {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  color: #fff;
  font-family: var(--fonte-titulos);
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}

.medico-sidebar-foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(26, 82, 118, 0.2);
}

.horario-table td {
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
}

.horario-table td:first-child {
  font-weight: 600;
  color: var(--cor-primaria);
}

/* =========================================================
   BOTÕES REDES SOCIAIS — cores da paleta do site (navy)
   ========================================================= */
.btn-social-outline {
  --bs-btn-color:              var(--cor-primaria);
  --bs-btn-border-color:       var(--cor-primaria);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #1a86c1;   /* azul claro — igual aos outros botões */
  --bs-btn-hover-border-color: #1a86c1;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #1a86c1;
  --bs-btn-active-border-color:#1a86c1;
  background: transparent;
  border: 1.5px solid var(--cor-primaria);
  color: var(--cor-primaria);
  font-family: var(--fonte-titulos);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  transition: all 0.13s ease-out;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.btn-social-outline:hover,
.btn-social-outline:focus {
  background: #1a86c1;
  border-color: #1a86c1;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26, 134, 193, 0.35);
}

/* =========================================================
   CONTACTOS
   ========================================================= */
.info-contacto {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}


.info-contacto .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(26, 82, 118, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-contacto .icon-wrap i {
  font-size: 1.2rem;
  color: var(--cor-primaria);
}

.info-contacto .info-text strong {
  color: var(--cor-primaria);
  font-family: var(--fonte-titulos);
  display: block;
  margin-bottom: 0.15rem;
}

/* =========================================================
   TABELA DE HORÁRIOS
   ========================================================= */
.horario-table-full {
  width: 100%;
  border-collapse: collapse;
}

.horario-table-full caption {
  font-family: var(--fonte-titulos);
  font-weight: 700;
  color: var(--cor-primaria);
  font-size: 1rem;
  text-align: left;
  padding-bottom: 0.5rem;
  caption-side: top;
}

.horario-table-full th {
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.6rem 1rem;
  font-family: var(--fonte-titulos);
  font-size: 0.9rem;
}

.horario-table-full td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e8eef3;
  font-size: 0.9rem;
}

.horario-table-full tr:nth-child(even) td {
  background-color: var(--fundo-alternado);
}

/* =========================================================
   AUTORES
   ========================================================= */
.autores-table th[scope="row"] {
  font-family: var(--fonte-titulos);
  font-weight: 600;
  color: var(--cor-primaria);
  width: 45%;
  background-color: var(--fundo-alternado);
}

.autores-table caption {
  font-family: var(--fonte-titulos);
  font-weight: 700;
  color: var(--cor-primaria);
  font-size: 1rem;
  caption-side: top;
  text-align: left;
  padding-bottom: 0.5rem;
}

/* =========================================================
   REDES SOCIAIS
   ========================================================= */
.social-icons a {
  font-size: 1.8rem;
  color: #fff;
  margin: 0 8px;
  transition: opacity var(--transition), transform var(--transition);
  display: inline-block;
}

.social-icons a:hover {
  opacity: 0.75;
  transform: translateY(-3px);
  color: #fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background-color: var(--cor-primaria);
  color: #ffffff;
  padding-top: 3rem;
  position: relative;
  z-index: 10;  /* acima dos cards animados com transform */
}

/* Garantir que <p> dentro do footer usa cor clara — WCAG AAA: #fff sobre #0b3c5d = 11.2:1 */
footer p {
  color: #ffffff;
}

footer h5,
footer h2.footer-h {
  color: #fff;
  font-family: var(--fonte-titulos);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

footer a {
  color: rgba(255,255,255,0.92); /* WCAG AAA: ~10:1 sobre #0b3c5d */
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: 0.92rem;
  display: inline-block;
}

footer a:hover {
  color: #fff;
  transform: scale(1.08);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,255,255,0.80), 0 0 20px rgba(255,255,255,0.45);
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer ul li {
  /* WCAG 2.5.5: reduz margem porque o min-height do link cria espaçamento */
  margin-bottom: 0;
}

/* WCAG 2.5.5 Target Size: área mínima de 44px nos links de navegação */
footer ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 4px;
}

footer ul li a::before {
  content: '›';
  margin-right: 0.4rem;
  color: var(--cor-secundaria);
}

/* Sem seta nos ícones de redes sociais */
.social-icons li a::before { content: none; }

/* Ícones sociais: área clicável 44×44px centrada */
.social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 44px;
  transition: transform 0.2s ease, color 0.2s ease !important;
  transform-origin: center center;
}

.social-icons li a:hover {
  transform: scale(1.30) !important;
  color: #fff !important;
  /* text-shadow em icon fonts coloca o brilho ATRAS do glifo */
  text-shadow:
    0 0 6px  rgba(255,255,255,0.90),
    0 0 16px rgba(255,255,255,0.65),
    0 0 32px rgba(255,255,255,0.35);
}

/* Foco por teclado visível no footer (fundo escuro) */
footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 3px;
}

footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

footer .footer-contact-item i {
  color: var(--cor-secundaria);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

footer .footer-contact-item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

footer .footer-contact-item a:hover {
  padding-left: 0;
  transform: scale(1.05);
}

.footer-bottom {
  background: rgba(0,0,0,0.25);
  padding: 1rem 0;
  margin-top: 2.5rem;
}

.footer-bottom p {
  color: rgba(255,255,255,0.92); /* WCAG AAA: contraste suficiente sobre fundo escuro */
  font-size: 0.85rem;
  margin: 0;
}


/* =========================================================
   UTILIDADES
   ========================================================= */
.text-acento {
  color: var(--cor-acento) !important;
}

.text-primaria {
  color: var(--cor-primaria) !important;
}

.bg-primaria {
  background-color: var(--cor-primaria) !important;
}

.badge-especialidade {
  background: rgba(26, 82, 118, 0.1);
  color: #0a3352; /* dark navy — contraste >7:1 em fundos claros */
  font-family: var(--fonte-titulos);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 50px;
  padding: 0.2rem 0.75rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Alert feedback */
.alert-form {
  border-radius: var(--radius);
  font-family: var(--fonte-titulos);
  font-weight: 600;
  display: none;
}

.alert-form.show {
  display: block;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 767.98px) {
  section {
    padding: 55px 0;
  }

  .hero-section {
    min-height: 55vh;
    text-align: center;
  }

  .hero-subtitle {
    max-width: 100%;
  }

  .hero-stats {
    justify-content: center;
    gap: 1.5rem;
  }

  .hero-section::after {
    height: 30px;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }

  .page-banner {
    padding: 65px 0 55px;
  }

  .sidebar-card {
    position: static;
    margin-top: 2rem;
  }
}

@media (max-width: 575.98px) {
  .hero-section {
    min-height: 50vh;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    padding: 0.5rem 0.85rem !important;
  }
}

/* =========================================================
   BOTÃO VOLTAR AO TOPO
   ========================================================= */
#btn-topo {
  position: fixed;
  bottom: 6rem;   /* acima do banner de cookies */
  right: 2rem;
  width: 52px;
  min-width: 44px;
  height: 52px;
  min-height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cor-acento);
  color: var(--cor-acento);
  font-size: 1.65rem;
  -webkit-text-stroke: 0.6px var(--cor-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(30, 132, 73, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease,
              background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  z-index: 1040;
  text-decoration: none;
}

#btn-topo::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(30, 132, 73, 0.18);
  animation: topo-pulse 2.4s ease-in-out infinite;
}

@keyframes topo-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%       { transform: scale(1.18); opacity: 0; }
}

#btn-topo.visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#btn-topo:hover {
  background: var(--cor-acento);
  color: #fff;
  -webkit-text-stroke: 0.6px #fff;
  box-shadow: 0 6px 22px rgba(30, 132, 73, 0.40);
  transform: translateY(-3px);
}

#btn-topo:focus-visible {
  /* outline navy visível em fundo branco, anel branco visível em fundo escuro */
  outline: 4px solid var(--cor-primaria) !important;
  outline-offset: 5px !important;
  /* anel branco preenche o espaço entre o botão e o outline navy */
  box-shadow: 0 0 0 5px #ffffff !important;
}

@media (max-width: 575.98px) {
  #btn-topo {
    bottom: 5rem;   /* acima do banner de cookies em mobile */
    right: 1.25rem;
    width: 46px;
    min-width: 44px;
    height: 46px;
    min-height: 44px;
    font-size: 1.4rem;
    padding: 0;
  }
}

/* =========================================================
   BARRA DE PROGRESSO DE SCROLL
   ========================================================= */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cor-acento), var(--cor-secundaria));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* =========================================================
   MÁQUINA DE ESCREVER
   ========================================================= */
#typewriter {
  color: var(--cor-acento);
  border-right: 3px solid var(--cor-acento);
  animation: piscar-cursor 0.75s step-end infinite;
  padding-right: 2px;
}

/* Verde mais brilhante só no hero — contraste contra fundo azul */
.hero-section #typewriter {
  color: #5efc8d;
  border-right-color: #5efc8d;
  text-shadow: 0 0 20px rgba(94, 252, 141, 0.35);
}

@keyframes piscar-cursor {
  0%, 100% { border-color: var(--cor-acento); }
  50%       { border-color: transparent; }
}

/* Cursor hero também mais brilhante */
.hero-section #typewriter {
  animation: piscar-cursor-hero 0.75s step-end infinite;
}

@keyframes piscar-cursor-hero {
  0%, 100% { border-color: #5efc8d; }
  50%       { border-color: transparent; }
}


/* =========================================================
   INDICADOR ABERTO / FECHADO
   ========================================================= */
.clinic-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-family: var(--fonte-titulos);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  cursor: default;
}

.clinic-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulso-status 1.8s ease-in-out infinite;
}

.clinic-status.aberto {
  background: rgba(30, 132, 73, 0.12);
  color: #155724;
}

.clinic-status.aberto::before {
  background: var(--cor-acento);
}

.clinic-status.fechado {
  background: rgba(114, 28, 36, 0.08);
  color: #721c24;
}

.clinic-status.fechado::before {
  background: #c0392b;
  animation: none;
}

@keyframes pulso-status {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* =========================================================
   CALCULADORA IMC
   ========================================================= */
#imc-resultado {
  min-height: 60px;
  transition: all 0.3s ease;
}

.imc-widget {
  background: linear-gradient(135deg, rgba(26,82,118,0.04), rgba(46,134,193,0.07));
  border: 1.5px solid rgba(46,134,193,0.2);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.imc-widget h3 {
  color: var(--cor-primaria);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.imc-referencia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.imc-ref-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.imc-ref-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================================
   BANNER RGPD / COOKIES
   ========================================================= */
#cookie-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(11, 60, 93, 0.88);   /* azul navy semitransparente */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  padding: 1rem 1.5rem;
  z-index: 1050;
  transition: bottom 0.4s ease;
  border-top: 2px solid rgba(30, 132, 73, 0.6);  /* verde subtil */
  box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.30);
}

#cookie-banner.visivel {
  bottom: 0;
}

#cookie-banner p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.90);
}

#cookie-banner a {
  color: #5efc8d;   /* verde brilhante — contraste sobre fundo escuro */
  text-decoration: underline;
  font-weight: 600;
}

#cookie-banner a:hover {
  color: #fff;
}

.cookie-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  #cookie-banner .cookie-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .cookie-actions {
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* =========================================================
   FILTRO DE PESQUISA DE SERVIÇOS
   ========================================================= */
.search-wrap {
  position: relative;
}

.search-wrap .bi-search {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-secundario);
  font-size: 1rem;
  pointer-events: none;
}

#pesquisa-servicos {
  padding-left: 2.75rem;
  border-radius: 50px;
  border: 2px solid rgba(46,134,193,0.3);
  font-size: 1rem;
  height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#pesquisa-servicos:focus {
  border-color: var(--cor-secundaria);
  box-shadow: 0 0 0 3px rgba(46,134,193,0.15);
  outline: none;
}

#servicos-count {
  font-size: 0.88rem;
  color: var(--texto-secundario);
  font-style: italic;
}

/* =========================================================
   ESPECIALIDADES — SIDEBAR LAYOUT
   ========================================================= */
.esp-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.esp-content {
  flex: 1;
  min-width: 0;
}

.esp-sidebar {
  width: 270px;
  min-width: 250px;
  background: linear-gradient(160deg, var(--cor-primaria) 0%, #0d4a7a 100%);
  border-radius: 16px;
  padding: 1.5rem 0 1rem;
  position: sticky;
  top: 85px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.esp-sidebar-title {
  color: rgba(255,255,255,0.80);
  font-size: 0.875rem;
  letter-spacing: 1.8px;
  padding: 0 1.25rem 0.75rem;
  font-weight: 700;
  font-family: var(--fonte-titulos);
}

.esp-search-wrap {
  padding: 0 1rem 1rem;
}

.esp-search-inner {
  position: relative; /* âncora do ícone absoluto */
}

/* Ícone de pesquisa — branco para bom contraste sobre o fundo escuro */
.esp-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.9);
  font-size: 0.875rem;
  pointer-events: none;
  z-index: 1;
}

.esp-search-input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 1.85rem; /* espaço para o ícone à esquerda */
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.875rem;
}

.esp-search-input::placeholder { color: rgba(255,255,255,0.5); }
.esp-search-input:focus {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 1px;
}

.esp-nav { list-style: none; padding: 0; margin: 0; }

.esp-nav li a {
  display: flex;
  align-items: center;
  min-height: 44px;   /* WCAG 2.5.5: área mínima de toque 44px */
  padding: 0.65rem 1.25rem;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.18s;
  border-left: 3px solid transparent;
  line-height: 1.35;
}

.esp-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-left-color: rgba(255,255,255,0.45);
}

.esp-nav li.active a {
  color: #fff;
  background: rgba(255,255,255,0.16);
  border-left-color: #fff;
  font-weight: 600;
}

/* esp-content defined above in esp-layout block */

.esp-panel {
  display: none;
}

.esp-panel.active {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2.25rem;
  box-shadow: 0 4px 24px rgba(26,82,118,0.08);
  border-top: 4px solid var(--cor-secundaria);
  animation: esp-in 0.28s ease;
}

@keyframes esp-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.esp-panel-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--fundo-alternado);
}

.esp-panel-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.45rem;
  flex-shrink: 0;
}

.esp-panel-header h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--cor-primaria);
  margin: 0;
}

.esp-conditions {
  background: var(--fundo-alternado);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.esp-conditions h3 {
  color: var(--cor-primaria);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.9rem;
}

.esp-conditions ul {
  padding-left: 1.2rem;
  margin: 0;
  columns: 2;
  gap: 0.5rem;
}

.esp-conditions ul li {
  margin-bottom: 0.35rem;
  color: var(--texto-principal);
  font-size: 0.9rem;
  break-inside: avoid;
}

@media (max-width: 991.98px) {
  .esp-layout { flex-direction: column; }
  .esp-sidebar {
    width: 100%;
    min-width: unset;
    position: static;
    max-height: 260px;
    border-radius: 12px;
  }
  .esp-panel.active {
    padding: 1.5rem 1.25rem;
    min-height: unset;
    border-radius: 12px;
  }
  .esp-conditions ul { columns: 1; }
}

/* =========================================================
   DROPDOWN ESPECIALIDADES — NAVBAR
   ========================================================= */
.esp-dropdown {
  min-width: 540px;
  padding: 0.6rem 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26,82,118,0.15);
  column-count: 2;
  column-gap: 0;
  z-index: 1100 !important;
}

.esp-dropdown .dropdown-item {
  display: block;          /* block (não flex) para evitar colapso em column-count */
  min-height: 24px;        /* WCAG 2.5.8 — alvo mínimo 24×24 px */
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem; /* 8px + 8px → altura total ≥ 37px */
  color: var(--texto-principal);
  transition: background 0.14s, color 0.14s;
  break-inside: avoid;
  white-space: nowrap;
}

.esp-dropdown .dropdown-item:hover,
.esp-dropdown .dropdown-item:focus {
  background: var(--fundo-alternado);
  color: var(--cor-primaria);
  font-weight: 600;
}

/* Hover-to-open on desktop */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: esp-in 0.18s ease;
  }
}

/* =========================================================
   PAINÉIS DE ESPECIALIDADE — Secções adicionais
   ========================================================= */

.esp-exames {
  background: #f0f7ff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  border-left: 3px solid var(--cor-secundaria);
}

.esp-exames h3 {
  color: var(--cor-secundaria);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 0.65rem;
}

.esp-exames ul {
  padding-left: 1.1rem;
  margin: 0;
  columns: 2;
  gap: 0.5rem;
}

.esp-exames ul li {
  margin-bottom: 0.3rem;
  color: var(--texto-principal);
  font-size: 0.875rem;
  break-inside: avoid;
}

@media (max-width: 600px) {
  .esp-exames ul { columns: 1; }
}

.esp-equipa-mini {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fundo-alternado);
}

.esp-equipa-mini h3 {
  color: var(--texto-secundario);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.esp-equipa-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.esp-medico-mini {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.esp-medico-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center; /* mostrar rosto, nao paisagem */
  border: 2px solid rgba(46, 134, 193, 0.35);
  flex-shrink: 0;
}

.esp-medico-mini span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-principal);
}

.esp-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fundo-alternado);
}

.esp-actions .btn {
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 40px;
  border-radius: 8px;
  padding: 0.45rem 1.1rem;
}

/* Botão outline — mesma cor que o preenchido para coerência com a paleta */
.esp-actions .btn-outline-primary {
  color: var(--cor-primaria);
  border: 2px solid var(--cor-primaria);
  background: transparent;
}
.esp-actions .btn-outline-primary:hover,
.esp-actions .btn-outline-primary:focus {
  background: #1a86c1;
  border-color: #1a86c1;
  color: #fff;
}

/* Botão preenchido */
.esp-actions .btn-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}
.esp-actions .btn-primary:hover,
.esp-actions .btn-primary:focus {
  background: #1a86c1;
  border-color: #1a86c1;
  color: #fff;
}

/* =========================================================
   LIGHTBOX DE FOTOS DOS PROFISSIONAIS
   ========================================================= */
.esp-medico-avatar {
  cursor: zoom-in;
}

#photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo-lightbox[hidden] {
  display: none;
}

#photo-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.82);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  animation: lb-fade-in 0.22s ease;
}

#photo-lb-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  max-width: min(480px, 90vw);
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  animation: lb-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

#photo-lb-img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  object-position: top center;
  border-radius: 10px;
  display: block;
}

#photo-lb-caption {
  margin: 12px 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-principal);
}

#photo-lb-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(11, 60, 93, 0.08);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#photo-lb-close:hover {
  background: rgba(11, 60, 93, 0.18);
}

@keyframes lb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lb-scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Select subtipo: truncar valor selecionado com reticências ──────── */
#subtipo {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}