:root {
    /* Paleta alinhada com a logo da H2 Sistemas (ciano -> azul) */
    --cor-primaria: #1E4FE0;
    --cor-primaria-escura: #14369E;
    --cor-primaria-rgb: 30, 79, 224;
    --cor-secundaria: #1FC8E0;
    --cor-secundaria-rgb: 31, 200, 224;
    --cor-fundo: #F6F7FB;
    --cor-texto: #1F2333;
    --cor-texto-suave: #6B7280;
    --raio: 14px;
    --sombra: 0 2px 10px rgba(31, 35, 51, 0.06);
    --sombra-hover: 0 12px 24px rgba(31, 35, 51, 0.10);
}

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

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

/* --- Navbar --- */
.navbar.bg-primary {
    background-color: var(--cor-primaria) !important;
    box-shadow: 0 2px 12px rgba(var(--cor-primaria-rgb), 0.28);
}
.navbar-brand {
    letter-spacing: 0.2px;
}

/* --- Botões --- */
.btn {
    border-radius: 10px;
    font-weight: 500;
}
/* Um <a> estilizado como botão (ex: "Entrar com Google") não pode herdar a
   cor padrão de "link visitado" do navegador (fica roxo/marrom) -- trava
   na cor que o próprio botão já define. */
a.btn:visited {
    color: var(--bs-btn-color, inherit) !important;
}
.btn-primary {
    --bs-btn-bg: var(--cor-primaria);
    --bs-btn-border-color: var(--cor-primaria);
    --bs-btn-hover-bg: var(--cor-primaria-escura);
    --bs-btn-hover-border-color: var(--cor-primaria-escura);
    --bs-btn-active-bg: var(--cor-primaria-escura);
    --bs-btn-active-border-color: var(--cor-primaria-escura);
    --bs-btn-disabled-bg: var(--cor-primaria);
    --bs-btn-disabled-border-color: var(--cor-primaria);
    --bs-btn-focus-shadow-rgb: var(--cor-primaria-rgb);
    box-shadow: 0 3px 8px rgba(var(--cor-primaria-rgb), 0.28);
}
.btn-outline-primary {
    --bs-btn-color: var(--cor-primaria);
    --bs-btn-border-color: var(--cor-primaria);
    --bs-btn-hover-bg: var(--cor-primaria);
    --bs-btn-hover-border-color: var(--cor-primaria);
    --bs-btn-active-bg: var(--cor-primaria);
    --bs-btn-active-border-color: var(--cor-primaria);
    --bs-btn-focus-shadow-rgb: var(--cor-primaria-rgb);
}
.btn-link {
    color: var(--cor-primaria);
    font-weight: 500;
}

/* --- Texto e fundo "primary" (usados por badges/links soltos) --- */
.text-primary {
    color: var(--cor-primaria) !important;
}
.bg-primary {
    background-color: var(--cor-primaria) !important;
}

/* --- Cards --- */
.card {
    border: none;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-hover);
}
.card-img-top {
    border-radius: var(--raio) var(--raio) 0 0;
}
.card-title {
    font-weight: 600;
}

/* --- Formulários --- */
.form-control,
.form-select {
    border-radius: 10px;
    border-color: #E3E6EF;
    padding: 0.6rem 0.9rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.2rem rgba(var(--cor-primaria-rgb), 0.15);
}
.form-label {
    font-weight: 500;
    color: var(--cor-texto);
}
.form-check-input:checked {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--cor-primaria-rgb), 0.15);
}

/* --- Badges --- */
.badge {
    font-weight: 500;
    border-radius: 20px;
    padding: 0.42em 0.85em;
}
.badge.bg-secondary {
    background-color: #EEF0F7 !important;
    color: #4B5163 !important;
}
.badge.bg-primary {
    background-color: var(--cor-primaria) !important;
}

/* --- Alertas e caixas de destaque --- */
.alert {
    border: none;
    border-radius: 12px;
}
.alert-light {
    background-color: #EEF0F7;
    color: var(--cor-texto-suave);
}

/* Barra fixa de WhatsApp no rodapé da tela, só no mobile — o objetivo
   principal do perfil (chamar no WhatsApp) fica sempre acessível mesmo
   depois de rolar a página até as recomendações. */
.whatsapp-sticky-spacer {
    height: 76px;
}
.whatsapp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

/* Card de "deixe sua recomendação" no perfil público — precisa ser bem
   visível, então ganha fundo destacado em vez de um card branco comum. */
.recomendacao-card {
    background: #FFF9E6;
    border: 1px solid #FCE7A6;
}

/* Seleção de estrelas clicável (sem JS): os inputs vêm em ordem 5..1 no
   HTML e o container é invertido com row-reverse, então o seletor de
   irmãos gerais (~) consegue "pintar" da nota escolhida pra baixo. */
.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.star-rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.star-rating label {
    font-size: 2.2rem;
    line-height: 1;
    color: #E0E0E0;
    cursor: pointer;
    padding: 0 0.1rem;
    transition: color 0.1s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #FFC107;
}
.star-rating input:focus-visible + label {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bloco de informações médicas (perfil e edição) */
.info-medica {
    background: #EEF5FF;
    border-radius: var(--raio);
    padding: 1rem 1.25rem;
}

.foto-atual-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}

/* Placeholder de "sem foto" */
.sem-foto {
    background-color: #EEF0F7;
    color: var(--cor-texto-suave);
    border-radius: var(--raio);
}

/* --- Catálogo: cards compactos --- */
.card-prof-foto {
    height: 92px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--raio) var(--raio) 0 0;
    font-size: 1.3rem;
}

/* Foto no perfil público — tamanho fixo pra não depender das dimensões
   da imagem que o profissional enviou (evita ficar gigante ou distorcida). */
.foto-perfil-publico {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: var(--raio);
    font-size: 1.6rem;
}
.card-prof-nome {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Card mais compacto no catálogo — badge, texto e botão menores que o
   padrão do site, já que aqui aparecem várias dezenas por tela. */
.card-prof-body .badge {
    font-size: 0.68rem;
    padding: 0.3em 0.6em;
}
.card-prof-body p {
    font-size: 0.76rem;
}
.card-prof-body .btn {
    font-size: 0.76rem;
    padding: 0.3rem 0.5rem;
}

/* Título discreto de seção (ex: nome do bairro agrupando o catálogo) */
.titulo-secao {
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

/* Atalhos em formato de botão (barra de saudação no topo da home) —
   fundo azul bem claro pra ficar óbvio que são clicáveis, sem competir
   visualmente com o catálogo. */
.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #EEF1FF;
    color: var(--cor-primaria-escura);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    transition: background 0.15s ease;
}
.btn-chip:visited {
    color: var(--cor-primaria-escura);
}
.btn-chip:hover {
    background: #DCE2FF;
    color: var(--cor-primaria-escura);
}

/* Quadrante de bairro no catálogo — separa visivelmente cada grupo */
.secao-bairro {
    background: #fff;
    border: 1px solid #EEF0F7;
    border-radius: var(--raio);
    padding: 1.25rem;
}
.secao-bairro-destaque {
    background: #F3F5FF;
    border: 1px solid #D7DDFF;
}

/* --- Menu de categorias com ícone + painel no hover (estilo GetNinjas) --- */
.mega-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 0.5rem;
    position: relative;
}
.mega-item-wrap {
    position: relative;
}
.mega-item {
    flex: 0 0 auto;
    width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--cor-texto);
    text-align: center;
}
.category-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EEF1FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.mega-item:hover .category-icon {
    transform: translateY(-3px);
}
.category-label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
}
.mega-item.active .category-icon {
    background: var(--cor-primaria);
}
.mega-item.active .category-label {
    color: var(--cor-primaria);
    font-weight: 600;
}

/* Painel que abre ao passar o mouse (ou focar via teclado) num grupo.
   Em telas de toque não existe ":hover" de verdade, então o clique no
   ícone simplesmente navega direto pro grupo — o painel é um extra
   pra quem usa mouse. */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    background: #fff;
    border: 1px solid #EEF0F7;
    border-radius: var(--raio);
    box-shadow: var(--sombra-hover);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 280px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.mega-item-wrap:hover .mega-panel,
.mega-item-wrap:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 2px);
}
.mega-panel-link {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.mega-panel-link:hover {
    background: #EEF1FF;
    color: var(--cor-primaria);
}
.mega-panel-link.active {
    color: var(--cor-primaria);
    font-weight: 600;
}

/* --- Navegação por abas/collapse no mobile --- */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- Rodapé --- */
.site-footer-full {
    background: #fff;
    border-top: 1px solid #E3E6EF;
    margin-top: 3rem;
}
.footer-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.site-footer-full ul li {
    margin-bottom: 0.4rem;
}
.site-footer-full ul a {
    color: var(--cor-texto-suave);
    text-decoration: none;
}
.site-footer-full ul a:hover {
    color: var(--cor-primaria);
}
.site-footer-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 4px;
}

/* --- Hero da landing page (visitante não logado) --- */
.landing-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
    padding: 3.5rem 1.5rem;
    color: #fff;
    text-align: center;
    box-shadow: 0 16px 40px rgba(var(--cor-primaria-rgb), 0.28);
}
.landing-hero .lead {
    color: rgba(255, 255, 255, 0.92);
}
.landing-hero .btn-light {
    color: var(--cor-primaria-escura);
}
.landing-hero .btn-outline-light:hover {
    color: var(--cor-primaria-escura);
}
.landing-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

/* Bolhas decorativas flutuando no fundo do hero — efeito "colagem"
   sem depender de fotos reais de profissionais. */
.landing-hero-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-bubble {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.hero-bubble.b1 { top: 8%; left: 6%; transform: rotate(-8deg); }
.hero-bubble.b2 { top: 64%; left: 10%; transform: rotate(6deg); width: 42px; height: 42px; font-size: 1.2rem; }
.hero-bubble.b3 { top: 12%; right: 8%; transform: rotate(10deg); }
.hero-bubble.b4 { top: 66%; right: 12%; transform: rotate(-6deg); width: 46px; height: 46px; font-size: 1.3rem; }
.hero-bubble.b5 { top: 40%; left: 2%; transform: rotate(4deg); width: 38px; height: 38px; font-size: 1.1rem; }
.hero-bubble.b6 { top: 42%; right: 3%; transform: rotate(-4deg); width: 38px; height: 38px; font-size: 1.1rem; }

@media (max-width: 767px) {
    .hero-bubble { display: none; }
    .landing-hero { padding: 2.5rem 1rem; border-radius: 18px; }
}

/* Ícone redondo nos cards "Sou cliente" / "Sou profissional" da landing */
.landing-role-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #EEF1FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

/* Painel de cada lado do "Como funciona" na landing */
.como-funciona-card {
    background: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.75rem;
    height: 100%;
    text-align: left;
}

/* Barra de busca em destaque no hero — funciona como "porta de entrada"
   pro cadastro, já que navegar o catálogo de verdade exige login. */
.hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    max-width: 560px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.hero-search-icon {
    font-size: 1.1rem;
    margin-right: 0.6rem;
    color: var(--cor-texto-suave);
}
.hero-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    color: var(--cor-texto);
    background: transparent;
}
.hero-search-input:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}
.hero-search-btn {
    border-radius: 50px;
    white-space: nowrap;
    padding: 0.55rem 1.25rem;
}
@media (max-width: 575px) {
    .hero-search {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 0.75rem;
    }
    .hero-search-input { flex-basis: 100%; order: 1; margin-bottom: 0.5rem; }
    .hero-search-btn { order: 2; width: 100%; }
}

/* Cards de categoria em destaque na home de visitante */
.categoria-destaque-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--cor-texto);
    text-align: center;
    background: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.categoria-destaque-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-hover);
}

/* Painel de destaque pra atrair profissionais — fundo escuro, separado
   visualmente do resto da página em tons claros. */
.pro-cta-panel {
    background: linear-gradient(135deg, #0B1B4D 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    border-radius: 24px;
    padding: 3rem 2rem;
}
.pro-cta-panel p {
    color: rgba(255, 255, 255, 0.85);
}
.pro-cta-checklist li {
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.95);
}
.pro-cta-icon {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    margin: 0 auto;
}

/* Card de item de "Por que usar o SocorreAqui?" */
.diferencial-card {
    background: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem 1rem;
    text-align: center;
    height: 100%;
}

/* Círculo numerado do "Como funciona" na tela de boas-vindas */
.step-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}