/* =========================================================
   STYLE.CSS - INDICE
   copiar o texto da entrada e fazer find
   =========================================================

    1. VARIAVEIS CSS E RESET
    2. BOOTSTRAP SUCCESS
    3. TOPBAR
    4. NAVBAR
    5. FOCUS VISIBLE GLOBAL
    5B. BANNER COOKIES RGPD
    6. DROPDOWN
    7. FRISO DE ALERTAS
    8. HERO / BANNER PRINCIPAL               
    9. BANNER INTERNO (paginas internas)
   10. ANCORA FORMULARIO
   11. SECCOES GERAIS
   12. CARDS
   13. SECCAO SOBRE (Home)                  
   14. GALERIA
   15. FOOTER
   16. BOTAO VOLTAR AO TOPO
   17. FORMULARIOS
   18. BOTOES
   19. SIDEBAR (Detalhe Especialidade)
   20. BOTOES REDES SOCIAIS
   21. SECCAO CONTACTOS                     
   22. TABELA DE HORARIOS
   23. ESPECIALIDADES - SIDEBAR LAYOUT      
   24. DROPDOWN ESPECIALIDADES - NAVBAR
   25. PAINEIS DE ESPECIALIDADE             
   26. LIGHTBOX DE FOTOS DOS PROFISSIONAIS  
   27. EQUIPA - CARTOES DE PROFISSIONAIS    
   28. AUTORES - PERFIL DE AUTORA           
   29. ESPECIALIDADES - lightbox e IMC      
   30. CV DOS PROFISSIONAIS                 
   31. PODCAST DE SAUDE                     
   32. BARRA COMPACTA DE PODCAST            
   33. TRANSICAO SUAVE ENTRE PAGINAS

   ========================================================= */

/* =========================================================
   Clinica Saude 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');

/* =========================================================
   1. VARIAVEIS CSS E RESET
   Define todas as cores fontes e espaçamentos do site
      Alterar aqui muda o visual de todas as paginas
   ========================================================= */
/*
  PALETA CORES

  Navy Primario    #0b3c5d
  Azul Secundario  #0f5487
  Verde Esmeralda  #0a7e52
  Teal Escuro      #064e44
  Texto Principal  #1a2c3d
  Texto Secund    #3d5265
*/
:root {
  --cor-primaria: #0b3c5d;
  --cor-primaria-hover: #1a86c1;
  --cor-secundaria: #0f5487;
  --cor-acento: #0d5c3a;
  --fundo-alternado: #eef5f8;
  --texto-principal: #1a2c3d;
  --texto-secundario: #3d5265;
  --fonte-titulos: 'Raleway', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;
  --sombra-card: 0 4px 20px rgba(0, 0, 0, 0.2);
  --sombra-card-hover: 0 10px 36px rgba(0, 0, 0, 0.32);
  --radius: 8px;
  --transition: 0.25s ease;
  --cor-cursor-typewriter: #5efc8d;
  --cor-borda-leve: #dce8f0;
}

/* =========================================================
   2. BOOTSTRAP SUCCESS
   Substitui as cores padrão do Bootstrap pelas da clinica
      verde escuro e azul navy nos botões e badges
   ========================================================= */
: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;
}

/* Cor de destaque do botao urgencia vermelho clinico */
.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;
  --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 */
}

.text-danger {
  color: #a71d2a !important;
}

.badge.bg-success,
.bg-success {
  background-color: var(--cor-acento) !important;
}

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

.btn,
.btn-sm,
.btn-lg {
  min-height: 44px !important;
  padding-block: 0.6rem !important;
  /* garante 44px sem forcar 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;
}

/* Bootstrap .display para minimo 1.5 */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  line-height: 1.5 !important;
}

a {
  color: var(--cor-secundaria);
  transition: color var(--transition);
}

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

.text-muted {
  color: var(--texto-secundario) !important;
}

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

/* Limitada a largura do conteudo para melhor legibilidade e centralizacao */
.container {
  max-width: 1200px !important;
  padding-inline: 2.25rem !important;
}

/* Layout fixo formulario marcacoes e contacto a 700px */
@media (min-width: 768px) {
  .form-col-fixed {
    flex: 0 0 700px;
    width: 700px;
    max-width: 700px;
  }

  .sidebar-col-flex {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}

/* Campo  medico atribuido automaticamente */
#medico[readonly] {
  background-color: #f0f2f5;
  color: #6c757d;
  cursor: not-allowed;
  border-color: #dee2e6;
}

/* Acessibilidade Foco Visivel */
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;
}

/* =========================================================
   3. TOPBAR
   Barra verde no topo com telefone horario e botao de marcacao
   Em mobile simplifica e oculta informação secundaria
   ========================================================= */
.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: #ffffff;
  font-family: var(--fonte-titulos);
}

.topbar-contact a {
  /* #f0f4f8 hex solido; white-space: nowrap impede que o numero parta em mobile */
  color: #f0f4f8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
  white-space: nowrap;
}

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

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

/* clinic-estado dentro da topbar se esta aberto ou fechado*/
.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;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.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.7) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 767px) {
  .topbar {
    padding: 0.3rem 0;
    font-size: 0.78rem;
  }

  /* Duas linhas em mobile:
     linha 1 — telefone
     linha 2 — badge de estado + botao Marcar Consulta (100% largura) */
  .topbar .container {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  /* Esconde as horas informacao secundaria em mobile */
  .topbar-contact .bi-clock,
  .topbar-contact span:not([class]) {
    display: none;
  }

  .topbar-contact {
    gap: 0.4rem;
    flex: 1 1 auto;
    /* linha 1: telefone ocupa o espaco disponivel */
  }

  .topbar-actions {
    flex: 0 0 100%;
    /* linha 2: status + botao em fila propria, largura total */
    gap: 0.5rem;
  }

  .topbar-btn {
    font-size: 0.72rem !important;
    padding: 0.28rem 0.65rem !important;
  }

  /* Trunca o texto longo do badge mostra apenas Aberto ou Fechado */
  .topbar .clinic-status .status-text {
    max-width: 52px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
  }

  .topbar .clinic-status {
    padding: 0.22rem 0.55rem !important;
  }
}

@media (max-width: 400px) {

  /* Em ecras muito pequenos esconde o badge inteiro */
  .topbar .clinic-status {
    display: none !important;
  }
}

/* =========================================================
   4. NAVBAR
   Barra de navegação com logótipo e links em mobile
   transforma-se em menu hamburguer linha azul no link ativo
   ========================================================= */

/* header fixo: position:sticky falha quando ancestors tem overflow ou
   quando o nav interno tambem e sticky (conflito com Bootstrap sticky-top).
   position:fixed e garantido; --header-height e calculada pelo JS e aplica
   padding-top ao body para compensar o espaco ocupado pelo header fixo. */
header[role='banner'] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

body {
  /* var calculada pelo JS fallback 115px = topbar(35px) + navbar(80px) desktop */
  padding-top: var(--header-height, 115px);
}

.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;
  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);
}

/* Menu colapsado em mobile */
@media (max-width: 991px) {
  .navbar-nav .nav-link {
    padding: 0.85rem 1rem !important;
    min-height: 52px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(26, 82, 118, 0.07);
  }

  .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
}

/* Ecras muito pequenos ~360px reduz o icone para o hamburguer nao quebrar linha */
@media (max-width: 400px) {
  .navbar-brand {
    font-size: 1rem;
  }

  .navbar-brand .brand-icon {
    font-size: 1.2rem;
  }

  .navbar {
    padding: 0.85rem 0;
  }
}

/* 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 */
}

/* =========================================================
   5. FOCUS VISIBLE GLOBAL
   Acessibilidade: mostra contorno visível ao navegar com Tab
      Azul em fundos claros, branco em fundos escuros
   Aplica-se apenas a navegacao por teclado 
   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;
  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 */
.esp-sidebar a:focus-visible,
.esp-sidebar button:focus-visible,
.esp-sidebar input:focus-visible,
/* Topbar */
.topbar a:focus-visible,
.topbar button:focus-visible,
/* Navbar ao colapsar */
.navbar-collapse a:focus-visible,
/* Friso de alertas  */
#friso-alertas a:focus-visible,
#friso-alertas button:focus-visible,
/* Hero section  */
.hero-section a:focus-visible,
.hero-section button:focus-visible,
/* Seccoes com background inline  */
section[style*="background"] a:focus-visible,
section[style*="background"] button:focus-visible,
/* Cookie banner */
#cookie-banner a:focus-visible,
#cookie-banner button:focus-visible,
/* Footer */
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;
}

/* =========================================================
   5B. BANNER COOKIES RGPD
   Aviso RGPD fixo na base do ecra aparece ao primeiro acesso
   e pode ser aceite ou recusado pelo utilizador
   ========================================================= */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 30, 48, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  z-index: 1080;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
  animation: slideUpCookie 0.4s ease;
}

@keyframes slideUpCookie {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-inner p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

.cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn {
    flex: 1;
  }
}

/* =========================================================
   6. DROPDOWN
   Estilo dos menus pendentes  lista de especialidades
   garante area clicável minima de 44px para acessibilidade
   ========================================================= */
.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 tatil */
  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;
}

.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;
}

/* =========================================================
   7. FRISO DE ALERTAS
   Barra laranja com avisos animados a desfilar pode ser
      fechada pelo utilizador, em mobile o texto fica estatico
   ========================================================= */
#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;
  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 */
@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 mascara de fade nas bordas
   mask-image aplica um gradiente de transparencia: as bordas esquerda e direita
   ficam invisiveis transparent e o centro fica opaco (#000).
   Resultado: os avisos do ticker desvanecem ao chegar ao limite da faixa */
.friso-pista-wrap {
  flex: 1;
  overflow: visible;
  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 conteudo duplicado para loop continuo
   O conteudo esta duplicado no HTML para que quando a primeira metade
   terminar o movimento a segunda metade ja esteja a comecar criando
   a ilusao de um scroll infinito sem saltos visiveis */
.friso-pista {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  animation: ticker-move 40s linear infinite;
  width: max-content;
}

/* animation-play-state: paused suspende a animacao enquanto o rato
   esta sobre o ticker dando tempo ao utilizador para ler o aviso */
.friso-pista:hover {
  animation-play-state: paused;
}

/* ticker-move: desloca o ticker da posicao original (0) ate metade do
   seu comprimento -50% como o conteudo esta duplicado, quando atinge
   -50% o visual e identico ao inicio criando um loop perfeito */
@keyframes ticker-move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@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;
  }
}

@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;
  }
}

/* Icones 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;
}

/* =========================================================
   8. HERO / BANNER PRINCIPAL
   Grande área de destaque da página inicial gradiente azul
      slideshow de fundo título animado e estatísticas
   ========================================================= */
.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 cria a curva branca na base do hero
   clip-path: ellipse define uma forma eliptica que corta o elemento
   em forma de arco: 72% de largura, 100% de altura, centrado na base.
   O resultado e a transicao suave entre o banner e a seccao seguinte */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 50px;
  background: var(--fundo-alternado);
  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 */
.hero-linebreak {
  display: block;
}

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

.hero-section h1 {
  color: #fff;
  /* clamp define tamanho de letra responsivo sem media queries
     minimo 2rem em ecras pequenos cresce com a janela (5vw)
     maximo 3.5rem em ecras grandes */
  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;
  min-height: 2.6em;
}

/* texto dinamico do typewriter em verde brilhante */
#typewriter {
  display: inline-block;
  min-height: 1.25em;
  vertical-align: top;
  color: var(--cor-cursor-typewriter);
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(94, 252, 141, 0.35),
    0 0 24px rgba(94, 252, 141, 0.18);
}

.hero-subtitle {
  color: #ffffff;
  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: #ffffff;
  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: #c8daf0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================================================
   9. BANNER INTERNO paginas internas
   Cabecalho azul que aparece no topo de todas as paginas
   exceto a pagina inicial contem o titulo da pagina e o
   breadcrumb de navegacao cada pagina tem uma imagem de
   fundo propria com baixa opacidade e uma curva branca
   na parte inferior que faz a transicao para o conteudo
   ========================================================= */
.page-banner {
  background: #0d4372;
  padding: 120px 0 110px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* .page-banner before e um pseudo-elemento que coloca a imagem de fundo
   de cada pagina por baixo do gradiente azul opacity: 0.12 torna a imagem
   muito subtil (quase invisivel) para nao comprometer a leitura do titulo
   a branco. Cada pagina sobreescreve o background-image mais abaixo */
.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;
}

/* .page-banner after cria a curva branca na base do banner interno
   usa o mesmo principio do hero after mas com elipse mais larga (80%)
   para uma curva menos pronunciada. z-index: 2 garante que fica
   acima da imagem de fundo e do overlay */
.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;
}

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

/* Pagina de Contactos transicao 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.1;
}

.page-banner--contactos+main {
  /* Remove a margem superior negativa ou posicionamento complexo para evitar sobreposicao */
  position: static;
}

/* =========================================================
   10. ANCORA FORMULARIO
   Define o ponto de scroll para o formulário de marcações
   compensando a altura fixa da navbar
   ========================================================= */
/* scroll-margin-top compensa a altura da navbar fixa 130px quando
   o browser navega para esta ancora via link ou JS scrollIntoView
   Sem isto o titulo ficaria escondido por baixo da navbar */
#form-marcacao-section {
  scroll-margin-top: 130px;
}

.contactos-arch-transicao {
  position: relative;
  z-index: 5;
  height: 10px;
  margin-bottom: -10px;
  overflow: hidden;
  pointer-events: none;
}

.contactos-arch-transicao svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Imagens por pagina */
.page-banner--servicos::before,
.page-banner--especialidade::before {
  background-image: url('../img/banner-servicos.jpg');
  background-position: center 40%;
}

.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--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;
}

.page-banner .breadcrumb-item {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item a {
  color: #dce8f6;
  font-size: 0.9rem;
}

.page-banner .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  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.7);
}

/* =========================================================
   11. SECCOES GERAIS
   Espaçamento, títulos de secção e divisórias comuns
      a todas as páginas do site
   ========================================================= */
/* Isola o stacking context do main sem isolation o isolate os transforms
   CSS usados nos cards ex: translateY no hover podem criar um novo
   stacking context que sobrepoe o footer Com isolation o z-index do
   main e dos seus filhos e resolvido de forma independente do footer */
main {
  position: relative;
  isolation: isolate;
}

section {
  padding: 80px 0;
}

/* Primeira seccao logo apos o banner interno menos espaco 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;
}

/* =========================================================
   12. CARDS
   Cartões de especialidades e testemunhos sombra suave
      bordas arredondadas e elevação ao passar o rato
   ========================================================= */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--sombra-card);
  transition:
    transform 0.13s ease-out,
    box-shadow 0.13s ease-out;
}

/* Sem hover global so cartoes clicaveis tem hover */

.card-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  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;
}

.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;
  background-color: #fff;
  border-top: 3px solid transparent;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.especialidade-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 40px rgba(26, 134, 193, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-top-color: #1a86c1;
  background-color: #fff;
}

.especialidade-card:hover .card-link {
  color: #1a86c1;
  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 espaco disponivel empurrando o link para baixo */
}

.especialidade-card .card-link {
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--cor-secundaria);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding-block: 0.6rem;
  margin-top: 1rem;
  transition:
    color 0.2s ease,
    text-decoration 0.2s ease;
}

.especialidade-card .card-link:hover {
  color: #1a86c1;
  text-decoration: underline;
}

.especialidade-card:hover .card-link {
  color: #1a86c1;
  text-decoration: underline;
}

/* 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 semantica 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;
}

/* =========================================================
   13. SECCAO SOBRE (Home)
   Imagem arredondada com sombra da seccao Sobre Nós
      na pagina inicial
   ========================================================= */
.sobre-img {
  border-radius: var(--radius);
  box-shadow: var(--sombra-card-hover);
  object-fit: cover;
  width: 100%;
  max-height: 420px;
}

/* =========================================================
   14. GALERIA
   Grelha de fotos da clinica com efeito de zoom suave
      ao passar o rato por cima de cada imagem
   ========================================================= */
.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);
}

/* =========================================================
   15. FOOTER
   Rodape azul navy com contactos, links uteis redes sociais
      e linha de copyright aparece em todas as paginas
   ========================================================= */

footer {
  background-color: var(--cor-primaria);
  color: #ffffff;
  padding-top: 4rem;
  padding-bottom: 0.5rem;
  position: relative;
  z-index: 10;
}

footer p,
footer address,
footer span {
  color: rgba(255, 255, 255, 0.88);
}

footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    text-shadow 0.2s ease;
  display: inline-block;
}

footer a:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}

.footer-h {
  font-family: var(--fonte-titulos);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 1.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

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

footer ul li {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Links Uteis seta sempre visivel a esquerda */
footer ul:not(.social-icons) li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.25rem;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    transform 0.2s ease;
}

footer ul:not(.social-icons) li a::before {
  content: '›';
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  display: inline-block;
}

footer ul:not(.social-icons) li a:hover {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transform: translateX(4px);
}

footer ul:not(.social-icons) li a:hover::before {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  min-height: 44px;
}

.footer-contact-item .bi {
  font-size: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom {
  /* #09304a = rgba(0,0,0,0.2) composto sobre #0b3c5d:
     hex solido para que o AccessMonitor calcule o contraste do texto #c8d6e0 correctamente */
  background: #09304a;
  padding: 1rem 0;
  margin-top: 3rem;
}

.footer-bottom p {
  color: #c8d6e0;
  font-size: 0.8rem;
  margin: 0;
}

.social-icons.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin: 0.75rem 0 0;
}

@media (max-width: 767px) {
  .social-icons.list-inline {
    gap: 1.8rem;
  }
}

.social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.7rem;
  transition:
    color var(--transition),
    transform var(--transition),
    opacity var(--transition);
  text-decoration: none;
  padding: 0.2rem;
}

.social-icons li a:hover {
  background: none;
  border: none;
  color: #ffffff;
  transform: translateY(-4px) scale(1.25);
  opacity: 1;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* Footer mobile mais espaco vertical e horizontal nos links */
@media (max-width: 767px) {
  footer ul li {
    margin-bottom: 0;
    font-size: 0.95rem;
  }

  footer ul:not(.social-icons) li a {
    padding: 0.3rem 0.25rem;
    min-height: 44px;
    gap: 0.55rem;
  }

  .footer-contact-item {
    margin-bottom: 0;
    min-height: 44px;
    font-size: 0.92rem;
    gap: 0.75rem;
    align-items: center;
  }

  .footer-contact-item .bi {
    font-size: 1.1rem;
  }
}

/* =========================================================
   16. BOTAO VOLTAR AO TOPO
   Botao circular verde seta para cima fixo no canto inferior direito
      Aparece apos fazer scroll e leva de volta ao topo
   ========================================================= */

#btn-topo {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1050;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: #0a7e52;
  border: 2.5px solid #0a7e52;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2.45rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

#btn-topo .bi {
  filter: drop-shadow(0 0 0.4px currentColor);
}

#btn-topo.visivel {
  display: flex;
}

#btn-topo:hover {
  background: #0a7e52;
  color: #ffffff;
  border-color: #0a7e52;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 126, 82, 0.35);
}

#btn-topo:focus-visible {
  outline: 3px solid #0a7e52;
  outline-offset: 3px;
}

/* =========================================================
   17. FORMULARIOS
   Estilo dos campos de texto, selects e fieldsets nos
      formularios de contacto e marcacoes
   ========================================================= */
.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);
}

input[type='date'].form-control {
  position: relative;
  min-height: 44px;
  cursor: pointer;
}

/* Expande o icone do calendario 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;
  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;
}

/* Formularios mobile padding reduzido */
@media (max-width: 767px) {
  fieldset {
    padding: 1rem 0.9rem;
    margin-bottom: 1.1rem;
  }

  legend {
    font-size: 0.92rem;
  }

  /* font-size 1rem (=16px) */
  .form-control,
  .form-select {
    font-size: 1rem;
    padding: 0.6rem 0.85rem;
  }

  .form-label {
    font-size: 0.9rem;
    white-space: normal;
  }

  /* Garante que a mensagem de erro nao fica cortada */
  .invalid-feedback {
    white-space: normal;
    font-size: 0.8rem;
  }
}

/* =========================================================
   18. BOTOES
   Estilos de todos os botões do site primário success
      outline com animações de elevação ao passar o rato
   ========================================================= */
.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: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 134, 193, 0.35);
}

/* Outline com a cor primaria do site*/
.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: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  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);
}

.hero-section .btn-outline-light,
.cta-section .btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

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

/* =========================================================
   19. SIDEBAR (Detalhe Especialidade)
   Caixa lateral com foto do médico horario e botoes de acao
      nas paginas de detalhe de 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);
}

/* =========================================================
   20. BOTOES REDES SOCIAIS - cores da paleta do site
   Icones das redes sociais no footer com animacao de elevacao
      e brilho ao passar o rato
   ========================================================= */
.footer-social-links {
  display: flex;
  gap: 0.7rem;
}

.footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background-color: #ffffff;
  color: var(--cor-primaria);
  font-size: 1.3rem;
  transition: all var(--transition);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}

.footer-social-links a:hover {
  background-color: var(--cor-primaria);
  color: #ffffff;
  border-color: var(--cor-primaria);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 15px rgba(26, 82, 118, 0.3);
}

/* =========================================================
   21. SECCAO CONTACTOS
   Layout dos blocos de informacao telefone email morada
      com ícones circulares 
   ========================================================= */
.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;
}

/* Garante que o bloco de texto ocupa o espaço restante e nao transborda o card */
.info-contacto .info-text {
  min-width: 0;
  flex: 1;
}

/* Links longos quebram linha em vez de transbordarem */
.info-contacto .info-text a {
  overflow-wrap: break-word;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

/* =========================================================
   22. TABELA DE HORARIOS
   Tabela completa de horários com cabeçalho
      linhas alternadas e texto legível
   ========================================================= */
.horario-table-full {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
}

.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;
}

/* Linha de sub-cabecalho DIA / HORARIO */
.horario-table-full th.horario-th-col {
  background: #deeaf3;
  color: #1a2e44;
  font-family: var(--fonte-titulos);
}

.horario-table-full td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #dde8f0;
  font-size: 0.9rem;
  color: var(--texto-principal);
  background-color: #fff;
}

.horario-table-full tr:nth-child(even) td {
  background-color: #deeaf3;
}

/* =========================================================
   23. ESPECIALIDADES - SIDEBAR LAYOUT
   Layout da pagina de especialidades sidebar azul a esquerda
   e painel de conteudo a direita
   ========================================================= */
.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: #0c4272;
  border-radius: 16px;
  padding: 1.5rem 0 1rem;
  position: static;
  align-self: flex-start;
}

.esp-sidebar-title {
  color: #c8d8e8;
  font-size: 1rem;
  letter-spacing: 1.2px;
  padding: 0 1.25rem 0.75rem;
  font-weight: 700;
  font-family: var(--fonte-titulos);
}

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

.esp-sidebar-search-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 0 0.3rem;
  cursor: default;
}

.esp-search-inner {
  position: relative;
  /* ancora do icone absoluto */
}

/* Icone 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;
  /* espaco para o icone a 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.active {
  background: rgba(255, 255, 255, 0.16);
}

.esp-nav li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  color: #b8cee0;
  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;
  border-left-color: #fff;
  font-weight: 600;
}

.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;
}

/* esp-in: animacao de entrada do painel quando e ativado
   O painel desliza 10px de baixo para cima enquanto aparece (opacity 0 -> 1)
   Duracao curta 0.28s para resposta rapida ao clique */
@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;
}

/* columns: 2 distribui os itens da lista automaticamente em duas colunas
   sem precisar de grid ou flexbox. Resulta numa lista mais compacta e
   facil de ler em ecras largos */
.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 impede que um item de lista fique partido
     entre as duas colunas o item e sempre apresentado inteiro */
  break-inside: avoid;
}

@media (max-width: 991.98px) {
  .esp-layout {
    flex-direction: column;
  }

  .esp-sidebar {
    width: 100%;
    min-width: unset;
    position: static;
    max-height: 340px;
    overflow-y: auto;
    border-radius: 12px;
  }

  /* Mais espaco vertical entre os itens da lista em mobile */
  .esp-nav li a {
    padding: 0.9rem 1.25rem;
    min-height: 52px;
    font-size: 0.92rem;
  }

  .esp-panel.active {
    padding: 1.5rem 1.25rem;
    min-height: unset;
    border-radius: 12px;
  }

  .esp-conditions ul {
    columns: 1;
  }
}

/* =========================================================
   24. DROPDOWN ESPECIALIDADES - NAVBAR
   Mega-menu de especialidades em duas colunas na navbar
      em desktop abre ao passar o rato
   ========================================================= */
.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 nao flex para evitar colapso em column-count */
  min-height: 24px;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  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;
  }
}

/* =========================================================
   25. PAINEIS DE ESPECIALIDADE
   Cada painel mostra descrição exames disponíveis médicos
      e botões de marcação de cada especialidade
   ========================================================= */

.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 */
  border: 2px solid rgba(46, 134, 193, 0.35);
  flex-shrink: 0;
  cursor: zoom-in;
}

.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;
}

/* Botao outline - mesma cor que o preenchido para coerencia 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: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  color: #fff;
}

/* =========================================================
   26. LIGHTBOX DE FOTOS DOS PROFISSIONAIS
   Janela modal que abre ao clicar na foto de um profissional.
      Fecha com ESC, clique no X ou no fundo escurecido.
   ========================================================= */
#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 reticencias */
#subtipo {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* =========================================================
   27. EQUIPA - CARTOES DE PROFISSIONAIS
   Cartões dos membros da equipa com foto nome especialidade
      breve bio e botão de acesso ao CV completo
   ========================================================= */
.prof-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(11, 60, 93, 0.1),
    0 12px 36px rgba(11, 60, 93, 0.18);
  border: 1px solid rgba(11, 60, 93, 0.12);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.prof-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 4px 12px rgba(11, 60, 93, 0.14),
    0 24px 56px rgba(11, 60, 93, 0.26);
}

.prof-card-top {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.prof-card-top .prof-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: top center garante que o rosto do profissional
     fica visivel mesmo quando a imagem e cortada para a altura do cartao
     Sem isto o corte seria ao centro e poderia mostrar apenas o torso */
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.prof-card:hover .prof-photo {
  transform: scale(1.05);
}

.prof-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cor-primaria);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  /* backdrop-filter: blur cria o efeito glassmorphism:
     o fundo visivel por baixo do badge fica desenfocado,
     dando a sensacao de vidro fosco sobre a foto */
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* .prof-wave cria uma curva branca na base da foto de cada cartao
   usando o mesmo principio do hero::after e page-banner::after.
   Faz a transicao visual entre a foto e o conteudo de texto abaixo */
.prof-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 36px;
  background: #fff;
  clip-path: ellipse(55% 100% at 50% 100%);
}

.prof-card-body {
  padding: 8px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.prof-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
}

.prof-esp-text {
  font-size: 0.875rem;
  color: var(--cor-primaria);
  font-weight: 600;
  margin-bottom: 10px;
}

.prof-bio {
  font-size: 0.83rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.btn-cv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: var(--cor-primaria);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  border: 2px solid var(--cor-primaria);
  text-decoration: none;
  transition:
    background-color 0.13s,
    border-color 0.13s,
    transform 0.13s;
  align-self: flex-start;
  line-height: 1.4;
}

.btn-cv:hover {
  background-color: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-cv:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 3px;
}

/* =========================================================
   28. AUTORES - PERFIL DE AUTORA
   Cartão detalhado do autor foto biografia dados académicos
      hobbies e projeto curricular
   ========================================================= */
.autores-section {
  padding: 4rem 0;
}

.autores-badge {
  display: inline-block;
  background: rgba(26, 134, 193, 0.12);
  color: var(--cor-primaria);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.autores-card {
  border: none;
  border-radius: 24px;
  box-shadow: 0 12px 56px rgba(11, 60, 93, 0.15);
  overflow: hidden;
  background: #fff;
}

.autores-card-accent {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #1a5276 100%);
  height: 8px;
}

.autores-col-foto {
  background: linear-gradient(180deg, #f0f5f9 0%, #e3edf6 100%);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: 1px solid var(--cor-borda-leve);
}

.autores-photo-wrap {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--cor-borda-leve);
  border: 4px solid var(--cor-primaria);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 20px rgba(11, 60, 93, 0.2);
}

.autores-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.autores-name {
  font-family: var(--fonte-titulos);
  color: var(--cor-primaria);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.autores-role {
  color: var(--cor-primaria);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.autores-signature {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  color: var(--cor-primaria);
  border-top: 1px solid #c8d8e8;
  padding-top: 1rem;
  width: 100%;
  letter-spacing: 0.02em;
}

.autores-signature cite {
  font-style: normal;
}

.autores-linkedin-btn {
  border-radius: 10px !important;
}

.autores-col-bio {
  padding: 2.5rem 2rem;
  text-align: left;
}

.autores-bio {
  color: #555;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.autores-data-table {
  width: 100%;
  font-size: 0.88rem;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.autores-data-table tr th,
.autores-data-table tr td {
  vertical-align: middle;
}

.autores-data-label {
  color: var(--cor-primaria);
  font-weight: 700;
  padding: 0.4rem 0.6rem 0.4rem 0;
  width: 44%;
  white-space: nowrap;
  display: table-cell;
}

/* Wrapper interno do label para alinhar icone + texto */
.autores-data-label-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.autores-data-icon {
  color: #1a86c1;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.autores-data-value {
  color: #444;
  padding: 0.4rem 0;
  text-align: left;
  vertical-align: middle;
}

.autores-col-hobbies {
  padding: 2.5rem 1.5rem;
  background: #fafcfe;
  border-left: 1px solid var(--cor-borda-leve);
}

.autores-hobbies-title {
  font-family: var(--fonte-titulos);
  color: var(--cor-primaria);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}

.autores-hobbies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.autores-hobby-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.autores-hobby-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(26, 134, 193, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.autores-hobby-bi {
  font-size: 1.3rem;
  color: #1a86c1;
}

.autores-hobby-label {
  font-size: 0.875rem;
  color: #444;
  text-align: center;
}

.autores-project-box {
  background: #13476a;
  border-radius: 14px;
  padding: 1rem 1.2rem;
}

.autores-project-tag {
  color: #b0c8de;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.autores-project-title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.autores-project-desc {
  color: #f0f6fc;
  font-size: 0.875rem;
  margin-bottom: 0.2rem;
}

.autores-project-year {
  color: #e8f2f8;
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* =========================================================
   COMO FUNCIONA — bloco de 3 passos no card de marcações
   ========================================================= */
.como-funciona-wrap {
  background: #eaf3fb;
  border: 1px solid var(--cor-borda-leve);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.como-funciona-titulo {
  font-family: var(--fonte-titulos);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 0.75rem;
}

.como-funciona-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.como-funciona-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.como-funciona-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  font-family: var(--fonte-titulos);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.como-funciona-texto {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.3;
}

.como-funciona-texto strong {
  font-size: 0.88rem;
  color: var(--texto-principal);
  font-family: var(--fonte-titulos);
}

.como-funciona-texto span {
  font-size: 0.8rem;
  color: var(--texto-secundario);
}

.como-funciona-nota {
  font-size: 0.78rem;
  color: var(--cor-primaria);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Contraste */
.form-text {
  color: #3a3a3a !important;
  font-size: 0.85rem;
}

.page-banner-subtitle {
  color: #ffffff;
}

/* Enderecos footer + info cards */
.site-address {
  margin: 0;
  font-style: normal;
}

/* Lista de redes sociais */
.social-icons {
  padding: 0;
  margin: 0;
}

/* Descricao curta na coluna de redes sociais do footer */
/* Video embed ratio box */
.video-ratio {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* Secao marcar consulta gradiente */
.cta-section {
  background: linear-gradient(135deg,
      var(--cor-primaria),
      var(--cor-secundaria));
}

/* Google Maps wrapper */
.mapa-wrapper {
  background: #f4f6f7;
  position: relative;
  overflow: hidden;
  max-height: 600px;
}

.mapa-wrapper .ratio {
  max-height: 600px;
}

.mapa-wrapper iframe {
  border: 0;
}

.mapa-nota {
  font-size: 0.88rem;
}

/* Secao principal de contactos sobre o mapa */
.contactos-body-section {
  position: relative;
  z-index: 1;
}

/* Cabecalho principal da tabela de horario */
.horario-th-main {
  background: var(--cor-primaria);
  color: #fff;
  font-family: var(--fonte-titulos);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  letter-spacing: 0.01em;
  border-bottom: none;
}

/* Cabecalhos de coluna da tabela de horario */
.horario-th-col {
  background: #e4edf5;
  color: #1a2e44;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.55rem 1rem;
  border-top: none;
  border-bottom: 1px solid #c8d8e8;
}

/* Select desativado readonly controlado por JS */
.select-readonly {
  background: var(--bs-secondary-bg, #f8f9fa);
  cursor: default;
  font-weight: 500;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a;
}

/* Imagem de destaque na pagina de especialidade */
.esp-img-destaque {
  height: 360px;
  object-fit: cover;
}

/* Icone com cor de acento */
.icon-acento {
  color: var(--cor-acento) !important;
}

/* =========================================================
   29. ESPECIALIDADES - lightbox e IMC
   Calculadora de IMC integrada nos painéis de especialidade
      com categorias coloridas e sugestão de consulta.
   ========================================================= */

/* Calculadora IMC  separacao do bloco acima */
.esp-imc-wrap {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e9f0;
}

/* Calculadora IMC  titulo */
.imc-titulo {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-primaria);
  margin-bottom: 0.35rem;
}

/* Calculadora IMC  card container */
.imc-widget {
  background: #f4f7fb;
  border: 1px solid #dce8f0;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1rem;
}

/* IMC  area de referencia*/
.imc-referencia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
  margin-top: 1rem;
}

/* IMC  cada linha de referencia */
.imc-ref-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--texto-principal);
}

/* IMC  ponto colorido */
.imc-ref-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* IMC cores das categorias */
.imc-ref-dot--magro {
  background: #17a2b8;
}

.imc-ref-dot--normal {
  background: #28a745;
}

.imc-ref-dot--sobrepeso {
  background: #ffc107;
}

.imc-ref-dot--obesidade {
  background: #dc3545;
}

/* IMC nota de rodape */
.imc-nota {
  font-size: 0.8rem;
  color: var(--texto-secundario);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Dialog lightbox do profissional */
#pd {
  background: transparent;
  border: none;
  padding: 0;
  max-width: min(640px, 94vw);
}

#pd::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.pd-inner {
  position: relative;
}

#pd-img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  object-position: top center;
  border-radius: 12px;
  display: block;
}

.pd-close-form {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}

.pd-close-btn {
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #fff;
  color: #fff;
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   30. CV DOS PROFISSIONAIS
   Layout do currículo individual de cada profissional
      Usado no ficheiro cv-exemplo.html da pasta cvs
   ============================================================ */

/* Skip link  acessibilidade */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: #0b3c5d;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* container do cv*/
.cv-wrap {
  max-width: 700px;
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

.cv-header {
  background: linear-gradient(135deg, #0b3c5d, #0f5487);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cv-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
  flex-shrink: 0;
}

.cv-header-info h1 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 6px;
}

/* texto da especialidade */
.cv-header-info .cv-esp {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* aviso de documento de exemplo */
.cv-aviso {
  background: #fff8e1;
  border-left: 4px solid #f59e0b;
  padding: 12px 20px;
  font-size: 0.85rem;
  color: #78350f;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cv-body {
  padding: 32px 40px;
}

/* titulo da seccao*/
.cv-section h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0b3c5d;
  margin: 0 0 10px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
}

.cv-section {
  margin-bottom: 24px;
}

/* texto do corpo do cv*/
.cv-section p {
  color: #334155;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 8px;
}

.cv-item {
  margin-bottom: 14px;
}

/* nome do profissional */
.cv-item strong {
  color: #0b3c5d;
  font-size: 0.92rem;
}

/* data e localizacao */
.cv-item span {
  display: block;
  color: #4b5563;
  font-size: 0.875rem;
}

/* texto da placeholder */
.cv-placeholder {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 14px 18px;
  color: #374151;
  font-size: 0.875rem;
  font-style: italic;
}

/* footer do cv*/
.cv-footer {
  text-align: center;
  padding: 16px;
  background: #f8fafc;
  font-size: 0.875rem;
  color: #374151;
}

/* responsividade impressao*/
@media print {
  body {
    background: #fff;
  }

  .cv-wrap {
    box-shadow: none;
    margin: 0;
    border-radius: 0;
  }

  .cv-aviso {
    display: none;
  }

  .skip-link {
    display: none;
  }
}

/* ===================================================
   31. PODCAST DE SAUDE
   Player de podcast com capa titulo descrição e
      controlos de reprodução de áudio
   ================================================== */

.podcast-section {
  padding: 5rem 0;
}

.podcast-player-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  border: 1px solid var(--cor-borda-leve);
}

.podcast-player-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.podcast-icon-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--cor-primaria), #1a86c1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podcast-icon {
  font-size: 1.6rem;
  color: #fff;
}

.podcast-info {
  flex: 1;
}

.podcast-episode {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-primaria);
  margin-bottom: 0.3rem;
}

.podcast-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-texto);
  margin-bottom: 0.4rem;
}

.podcast-desc {
  font-size: 0.88rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

.podcast-audio {
  border-radius: 8px;
  accent-color: var(--cor-primaria);
}

/* ===================================================
   32. BARRA COMPACTA DE PODCAST
   Barra horizontal compacta no topo com play
   barra de progresso e transcrição.
   =================================================== */

.podcast-bar {
  background: #0d1f2d;
  color: #fff;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
  /* Transicao suave para colapso ao fazer scroll */
  max-height: 120px;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease;
}

/* Expande a barra quando a transcricao esta visivel */
.podcast-bar:has(.podcast-transcript-panel:not([hidden])) {
  max-height: 600px;
}

/* Classe aplicada pelo JS ao fazer scroll >80px */
.podcast-bar.podcast-collapsed {
  max-height: 0;
  overflow: hidden;
}

.podcast-bar>.container {
  padding-top: 0;
  padding-bottom: 0;
}

.podcast-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}

.podcast-bar-icon {
  color: #fff;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.podcast-bar-label {
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.podcast-bar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: #fff;
  font-size: 0.82rem;
}

/* Controlos agrupados a direita como media player */
.podcast-bar-controls {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Botão play/pause — ícone limpo sem borda */
.podcast-bar-btn {
  background: none;
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: color 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.podcast-bar-btn:hover {
  color: #5bc4f5;
}

/* Barra de progresso estilizada */
.podcast-bar-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  outline: none;
  border: none;
  transition: background 0.2s;
}

.podcast-bar-progress:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* bolinha de arrastamento */
.podcast-bar-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5bc4f5;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 4px rgba(91, 196, 245, 0.5);
}

.podcast-bar-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5bc4f5;
  cursor: pointer;
  border: none;
}

/* Track preenchido */
.podcast-bar-progress::-webkit-slider-runnable-track {
  background: transparent;
  border-radius: 2px;
}

.podcast-bar-progress::-moz-range-track {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  height: 3px;
}

.podcast-bar-time {
  color: #fff;
  font-size: 0.72rem;
  min-width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Slider de volume -> mesmo estilo que o progresso */
.podcast-bar-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  outline: none;
  border: none;
  transition: background 0.2s;
}

.podcast-bar-volume:hover {
  background: rgba(255, 255, 255, 0.4);
}

.podcast-bar-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5bc4f5;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 4px rgba(91, 196, 245, 0.5);
}

.podcast-bar-volume::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5bc4f5;
  cursor: pointer;
  border: none;
}

.podcast-bar-volume::-webkit-slider-runnable-track {
  background: transparent;
  border-radius: 2px;
}

.podcast-bar-volume::-moz-range-track {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  height: 3px;
}

@media (max-width: 767px) {
  .podcast-bar-progress {
    width: 100px;
  }
}

@media (max-width: 576px) {
  .podcast-bar-title {
    display: none;
  }

  .podcast-bar-progress {
    width: 80px;
  }

  /* Espaco respiracao entre controlos e borda direita (Galaxy A13 e similares) */
  .podcast-bar-inner {
    padding-right: 0.25rem;
  }
}

/* Ecras muito pequenos ~360px */
@media (max-width: 400px) {
  .podcast-bar-label {
    display: none;
  }

  .podcast-bar-progress {
    width: 60px;
  }

  .transcript-label {
    display: none;
  }

  /* Oculta volume (mute + slider) em 360px:
     controls total ~366px > viewport; sem volume fica ~216px que cabe sem corte.
     O utilizador controla o volume pelo dispositivo em mobile. */
  .podcast-bar-volume-btn,
  .podcast-bar-volume {
    display: none;
  }

  .podcast-bar-time {
    min-width: 58px;
    font-size: 0.68rem;
  }
}

/* Botão Transcricao  mesmo estilo que o botão play: ícone limpo */
.podcast-bar-transcript-btn {
  background: none;
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.15s;
  padding: 0;
  flex-shrink: 0;
  /* Afasta o botao da borda direita do ecra em mobile */
  margin-right: 0.35rem;
}

.podcast-bar-transcript-btn:hover,
.podcast-bar-transcript-btn[aria-expanded='true'] {
  color: #5bc4f5;
}

/* Label de texto ao lado do ícone de transcrição */
.transcript-label {
  font-size: 0.72rem;
  margin-left: 0.2rem;
  color: inherit;
  white-space: nowrap;
}

.podcast-transcript-panel {
  display: none;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #fff !important;
  line-height: 1.7;
}

.podcast-transcript-panel:not([hidden]) {
  display: block;
}

.podcast-transcript-panel p {
  margin: 0;
  color: #fff !important;
}

/* Audio com controls nativo escondido visualmente mas acessivel */
.podcast-audio-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Foco de teclado Tab visivel a branco na podcast bar */
.podcast-bar *:focus,
.podcast-bar *:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
  border-radius: 3px;
}

/* ===================================================
   33. TRANSICAO SUAVE ENTRE PAGINAS
   Animação de fade + deslize ao entrar e sair de cada página.
      Desativa-se ao navegar com os botões Avançar/Voltar
   =================================================== */

@keyframes pageIn {
  from {
    opacity: 0;
    /* SEM transform: qualquer transform no body torna-o containing block
       de position:fixed, fazendo btn-topo e outros fixed ficarem
       ancorados ao fundo da pagina em vez do viewport */
  }

  to {
    opacity: 1;
  }
}

@keyframes pageOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

body {
  /* Sem 'forwards': apos o fade-in o body nao fica com
     nenhuma propriedade animada activa (evita fixed-positioning bug) */
  animation: pageIn 0.45s ease;
}

body.page-exit {
  animation: pageOut 0.3s ease forwards;
  pointer-events: none;
}

/* =========================================================
   FIX: HOVER COLADO EM DISPOSITIVOS TOUCH
   Em ecras touch (telemoveis/tablets) o :hover fica preso
   apos o toque. @media (hover: none) aplica so em
   dispositivos sem rato (touch screens).
   ========================================================= */
@media (hover: none) {

  /* Botoes gerais */
  .btn:hover,
  .btn-primary:hover,
  .btn-success:hover,
  .btn-danger:hover,
  .btn-outline-site:hover,
  .btn-outline-light:hover,
  .btn-outline-primary:hover,
  .btn-cv:hover,
  .esp-actions .btn-outline-primary:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    background-color: unset;
    border-color: unset;
    color: unset;
  }

  /* Links e navegacao */
  a:hover,
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:hover::after,
  .dropdown-item:hover,
  .esp-nav li a:hover,
  footer a:hover,
  footer ul:not(.social-icons) li a:hover,
  footer ul:not(.social-icons) li a:hover::before,
  .topbar-contact a:hover,
  .footer-social-links a:hover,
  .social-icons li a:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: unset;
    color: unset;
    text-decoration: none;
  }

  /* Cards e elementos interativos */
  .especialidade-card:hover,
  .especialidade-card:hover .card-icon-wrap,
  .especialidade-card:hover .card-link,
  .especialidade-card .card-link:hover,
  .gallery-img:hover,
  .prof-card:hover,
  .prof-card:hover .prof-photo {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Elementos da interface */
  .friso-pista:hover,
  .friso-fechar:hover,
  #btn-topo:hover,
  .podcast-bar-btn:hover,
  .podcast-bar-transcript-btn:hover,
  #photo-lb-close:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: unset;
    color: unset;
    opacity: 1;
  }
}