/* -------------------------------------------
   ESTILOS GLOBAIS
------------------------------------------- */

/* Variaveis CSS para centralizar a paleta de cores e facilitar a manutenção */
:root {
    --cor-azul-marinho: #011126;
    --cor-dourado: #D8A749;
    --cor-branco-fundo: #F0F4F5;
    --cor-texto-claro: #FFFFFF;
    --cor-sombra-suave: rgba(0, 0, 0, 0.1);
    --cor-light: #F8F9FA; /* Adicionado para consistência */
}

/* Tipografia e Estilo de Corpo */
body {
    font-family: 'Century Gothic', sans-serif;
    background-color: var(--cor-branco-fundo);
    color: var(--cor-azul-marinho);
    margin: 0;
    line-height: 1.6;
}

/* Estilo de links genéricos, como os de texto */
a {
    color: var(--cor-azul-marinho); /* Links de texto em azul marinho para contraste */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cor-dourado); /* Efeito de hover em dourado */
    text-decoration: underline; /* underline para reforçar a interatividade */
}

/* Ajustes de Títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Century Gothic', sans-serif;
    color: var(--cor-azul-marinho);
    font-weight: 700;
}

/* -------------------------------------------
   PALETA DE CORES E UTILIDADES
------------------------------------------- */

/* Cores de Fundo (classes com nomes semânticos) */
.bg-azul {
    background-color: var(--cor-azul-marinho) !important;
}

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

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

/* Cores de Texto (classes com nomes semânticos) */
.text-azul-marinho {
    color: var(--cor-azul-marinho) !important;
}

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

/* -------------------------------------------
   ESTILO DO MENU (HEADER)
------------------------------------------- */

/* Estilo para links no menu: Define o hover e o link ativo */
.navbar-nav .nav-link {
    color: var(--cor-texto-claro) !important;
    transition: color 0.3s ease;
}

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

/* -------------------------------------------
   ESTILO DE BOTÕES E FORMULÁRIOS
------------------------------------------- */

/* Botão Principal Dourado */
.btn-dourado {
    background-color: var(--cor-dourado);
    color: var(--cor-azul-marinho);
    border: none;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.btn-dourado:hover {
    background-color: #C1953E; /* Tom mais escuro de dourado */
    color: var(--cor-azul-marinho);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--cor-sombra-suave);
}

/* Formulário de Contato - Estilo de Erro */
.texto-erro {
    color: #DC3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* -------------------------------------------
   ESTILOS DE ELEMENTOS ESPECÍFICOS
------------------------------------------- */

/* Imagens dos Doutores na página de serviços */
.img-doutor {
    max-width: 80%; /* Limita o tamanho da imagem para criar respiro */
    display: block;
    margin: 0 auto; /* Centraliza a imagem na coluna */
}

/* Botão Voltar ao Topo */
#botaoTopo {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    background-color: var(--cor-dourado);
    color: var(--cor-azul-marinho);
    cursor: pointer;
    padding: 1rem 1.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 4px 8px var(--cor-sombra-suave);
    transition: all 0.3s ease;
}

#botaoTopo:hover {
    background-color: #C1953E;
    transform: translateY(-3px);
}