/* =====================================================================
   All Together One Place — design system (R2, 28/10/2026)
   Camada por cima do tema antigo: só aparência, nenhuma lógica. Limitada a html.tema-atop
   (classe no <html>, posta em cabecalho1.php). Redefine as variáveis --dc-* da página inicial
   e os componentes partilhados. Para reverter: retirar o <link> e a classe.
   ===================================================================== */

html.tema-atop {
    --at-azul: #0B2A4A;
    --at-azul-2: #1D4E89;
    --at-petroleo: #0F766E;
    --at-petroleo-escuro: #0B5D57;
    --at-petroleo-fundo: #ECFDF5;
    --at-fundo: #F5F8FB;
    --at-branco: #FFFFFF;
    --at-linha: #E2E8F0;
    --at-texto: #0F172A;
    --at-texto-2: #475569;
    --at-raio: 16px;
    --at-raio-p: 10px;
    --at-sombra: 0 6px 18px rgba(15, 23, 42, .06);
    --at-sombra-forte: 0 14px 34px rgba(11, 42, 74, .12);
    --at-titulo: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
    --at-texto-fonte: 'Inter', 'Segoe UI', Arial, sans-serif;

    /* variáveis da página inicial (index1_atual.php) */
    --dc-primary: #1D4E89;
    --dc-primary-dark: #0B2A4A;
    --dc-accent: #0F766E;
    --dc-soft: #F5F8FB;
    --dc-muted: #475569;
    --dc-border: rgba(11, 42, 74, .10);
    --dc-shadow: 0 14px 34px rgba(11, 42, 74, .10);
}
html.tema-atop body {
    background: var(--at-fundo) !important;
    color: var(--at-texto) !important;
    font-family: var(--at-texto-fonte) !important;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografia ---------- */
html.tema-atop h1, html.tema-atop h2, html.tema-atop h3 {
    font-family: var(--at-titulo) !important;
    color: var(--at-azul) !important;
    letter-spacing: -.2px;
}
html.tema-atop p, html.tema-atop li, html.tema-atop label, html.tema-atop input, html.tema-atop select, html.tema-atop textarea, html.tema-atop button, html.tema-atop a {
    font-family: var(--at-texto-fonte) !important;
}
html.tema-atop a { color: var(--at-petroleo); }
html.tema-atop a:hover { color: var(--at-petroleo-escuro); }
html.tema-atop :focus-visible { outline: 3px solid rgba(15, 118, 110, .45) !important; outline-offset: 2px; }

/* ---------- Cabeçalho e menu ---------- */
html.tema-atop .dc2-header { background: rgba(255, 255, 255, .97) !important; border-bottom: 1px solid var(--at-linha) !important; box-shadow: none !important; }
html.tema-atop .dc2-nav > a, html.tema-atop .dc2-nav > div > a, html.tema-atop .dc2-nav button {
    color: var(--at-texto) !important; font-weight: 500 !important; font-size: 14.5px !important;
}
html.tema-atop .dc2-nav > a:hover, html.tema-atop .dc2-nav > div > a:hover { color: var(--at-petroleo) !important; }
html.tema-atop .dc2-nav a.active, html.tema-atop .dc2-nav .active > a { color: var(--at-azul) !important; box-shadow: inset 0 -2px 0 var(--at-petroleo); }
html.tema-atop .dc2-mega { border: 1px solid var(--at-linha) !important; border-radius: var(--at-raio) !important; box-shadow: var(--at-sombra-forte) !important; }
html.tema-atop .dc2-mega a { color: var(--at-texto) !important; }
html.tema-atop .dc2-mega a:hover { color: var(--at-petroleo) !important; background: var(--at-fundo) !important; }

/* ---------- Bloco principal (página inicial) ---------- */
html.tema-atop .dc2-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--at-fundo) 100%) !important; }
html.tema-atop .dc2-copy h1 { color: var(--at-azul) !important; font-weight: 800 !important; }
html.tema-atop .dc2-copy p { color: var(--at-texto-2) !important; }
html.tema-atop .dc2-search-btn { background: var(--at-petroleo) !important; background-image: none !important; border-radius: var(--at-raio-p) !important; }
html.tema-atop .dc2-search-btn:hover { background: var(--at-petroleo-escuro) !important; }
html.tema-atop .dc2-search-wrap, html.tema-atop .dc2-search-grid { border-radius: var(--at-raio) !important; }
html.tema-atop .dc2-search-grid i, html.tema-atop .dc2-search-wrap i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-chip { color: var(--at-azul) !important; border-radius: 12px !important; }
html.tema-atop .dc-chip i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-chip.active { background: var(--at-azul) !important; background-image: none !important; color: #FFFFFF !important; }
html.tema-atop .dc-chip.active i { color: #FFFFFF !important; }
html.tema-atop .dc2-trust { background: var(--at-azul) !important; background-image: none !important; }
html.tema-atop .dc2-trust, html.tema-atop .dc2-trust * { color: #E2E8F0 !important; }
html.tema-atop .dc2-trust i { color: #5EEAD4 !important; }
html.tema-atop .dc-professional-cta { background: var(--at-azul) !important; background-image: none !important; }
html.tema-atop .dc-professional-cta h2, html.tema-atop .dc-professional-cta h3, html.tema-atop .dc-professional-cta p { color: #FFFFFF !important; }

/* ---------- Botões ---------- */
html.tema-atop .btn { border-radius: var(--at-raio-p) !important; font-weight: 600 !important; }
html.tema-atop .btn-primary, html.tema-atop .btn-warning { background: var(--at-azul) !important; border-color: var(--at-azul) !important; color: #FFFFFF !important; background-image: none !important; }
html.tema-atop .btn-primary:hover, html.tema-atop .btn-warning:hover { background: var(--at-azul-2) !important; border-color: var(--at-azul-2) !important; }
html.tema-atop .btn-success { background: var(--at-petroleo) !important; border-color: var(--at-petroleo) !important; }
html.tema-atop .btn-default, html.tema-atop .btn-secondary { background: #FFFFFF !important; color: var(--at-azul) !important; border: 1px solid var(--at-azul) !important; }

/* ---------- Cartões de profissional ---------- */
html.tema-atop .dc-doctor-card, html.tema-atop .card {
    background: var(--at-branco) !important; border: 1px solid var(--at-linha) !important;
    border-radius: var(--at-raio) !important; box-shadow: var(--at-sombra) !important;
}
html.tema-atop .dc-doctor-card:hover, html.tema-atop .card:hover { box-shadow: var(--at-sombra-forte) !important; }
html.tema-atop .dc-results-head h2, html.tema-atop .dc-filter-head h3 { color: var(--at-azul) !important; }

/* Estados (mesmas classes da Divina, cores ATOP; cor + forma + texto) */
html.tema-atop .status {
    display: inline-flex !important; align-items: center; gap: 7px; padding: 5px 12px;
    border-radius: 999px; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2;
}
html.tema-atop .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; flex: none; }
html.tema-atop .status.disponivel { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .status.disponivel::before { background: #10B981; }
html.tema-atop .status.ocupado { background: #FEF3C7 !important; color: #92400E !important; }
html.tema-atop .status.ocupado::before { background: #D97706; }
html.tema-atop .status.indisponivel, html.tema-atop .status.sem-status { background: #F1F5F9 !important; color: #475569 !important; }
html.tema-atop .status.indisponivel::before, html.tema-atop .status.sem-status::before { border: 2px solid #64748B; background: transparent; }

/* ---------- Formulários ---------- */
html.tema-atop .form-control, html.tema-atop input[type=text], html.tema-atop input[type=email], html.tema-atop input[type=password], html.tema-atop input[type=search], html.tema-atop input[type=tel], html.tema-atop select, html.tema-atop textarea {
    border-radius: var(--at-raio-p) !important; border-color: #CBD5E1 !important; color: var(--at-texto);
}
html.tema-atop .form-control:focus, html.tema-atop input:focus, html.tema-atop select:focus, html.tema-atop textarea:focus {
    border-color: var(--at-petroleo) !important; box-shadow: 0 0 0 3px rgba(15, 118, 110, .2) !important; outline: 0;
}

/* ---------- Rodapé ---------- */
html.tema-atop .at-footer { background: var(--at-azul) !important; background-image: none !important; border-top: 0 !important; }
html.tema-atop .at-footer-brand strong { font-family: var(--at-titulo) !important; color: #FFFFFF !important; }
html.tema-atop .at-footer-brand span, html.tema-atop .at-copyright { color: #CBD5E1 !important; }
html.tema-atop .at-footer a { color: #E2E8F0 !important; }
html.tema-atop .at-footer a:hover { color: #5EEAD4 !important; }
html.tema-atop .at-footer-contact i, html.tema-atop .footer-social a i { color: #5EEAD4 !important; }

/* ---------- Restos de laranja do tema antigo (página inicial e cabeçalho) ---------- */
html.tema-atop .dc2-categories .dc-chip { color: var(--at-azul) !important; }
html.tema-atop .dc2-categories .dc-chip:hover { color: var(--at-petroleo) !important; background: var(--at-fundo) !important; }
html.tema-atop .dc2-categories .dc-chip.active, html.tema-atop .dc2-categories .dc-chip.active:hover { color: #FFFFFF !important; background: var(--at-azul) !important; }
html.tema-atop .dc-verified { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .dc-doctor-card .fa-star, html.tema-atop .dc-doctor-card .text-warning, html.tema-atop .stars .fa-star { color: #D97706 !important; }
html.tema-atop .dc-method-price i, html.tema-atop .dc-method-price span { color: var(--at-azul-2) !important; }
html.tema-atop .dc-method-price:hover { border-color: var(--at-petroleo) !important; }
html.tema-atop .dc-link-btn { color: var(--at-petroleo) !important; }
html.tema-atop .dc-empty-state i, html.tema-atop .dc-step-card strong { color: var(--at-petroleo) !important; }
html.tema-atop .dc2-lang-menu a:hover, html.tema-atop .language-dropdown-nav > li.active > a, html.tema-atop .language-dropdown-nav > li > a:hover { background: var(--at-fundo) !important; color: var(--at-petroleo) !important; }
html.tema-atop .dc2-login:hover { background: var(--at-fundo) !important; color: var(--at-petroleo) !important; }
html.tema-atop .dc2-nav > a:hover { color: var(--at-petroleo) !important; }
html.tema-atop .navbar-inverse .navbar-nav > li.active > a { color: var(--at-azul) !important; }
html.tema-atop .navbar-toggle { border-color: var(--at-azul) !important; }
html.tema-atop .navbar-toggle .icon-bar { background: var(--at-azul) !important; }
html.tema-atop .top-bar-dc a { color: var(--at-petroleo) !important; }
html.tema-atop .dropdown-menu > li > a:hover, html.tema-atop .dropdown-menu > li.active > a { background: var(--at-fundo) !important; color: var(--at-petroleo) !important; }
html.tema-atop .btn-area-cliente > a { background: var(--at-azul) !important; }

/* O skin antigo pinta de laranja todos os span e i (body.orange span / body.orange i): passam a herdar a cor do texto */
html.tema-atop body.orange span, html.tema-atop body.orange i { color: inherit; }
html.tema-atop .dc2-nav-btn, html.tema-atop .dc2-nav-btn span, html.tema-atop .dc2-nav-btn i { color: var(--at-texto) !important; }
html.tema-atop .dc-chip span { color: inherit !important; }
html.tema-atop .dc-chip i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-chip.active i, html.tema-atop .dc-chip.active span { color: #FFFFFF !important; }
html.tema-atop .dc-verified i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-specialty, html.tema-atop .dc-specialty i { color: var(--at-azul-2) !important; }
html.tema-atop .dc-stars, html.tema-atop .dc-stars strong, html.tema-atop .dc-stars i { color: #B45309 !important; }
html.tema-atop .dc-bookmark i { color: var(--at-azul-2) !important; }
html.tema-atop .dc-agenda-btn i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-range-row span { color: var(--at-azul) !important; font-weight: 600; }


/* =====================================================================
   R5 — Página inicial: "Tudo num só lugar"
   ===================================================================== */
html.tema-atop .at-areas { padding: 56px 20px 24px; }
html.tema-atop .at-areas-inner { max-width: 1240px; margin: 0 auto; }
html.tema-atop .at-areas-topo { text-align: center; margin-bottom: 28px; }
html.tema-atop .at-areas-topo h2 { font-size: 34px; font-weight: 800; margin: 0 0 8px; }
html.tema-atop .at-areas-topo p { color: var(--at-texto-2); font-size: 17px; margin: 0; }
html.tema-atop .at-areas-grelha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
html.tema-atop .at-area { background: var(--at-branco); border: 1px solid var(--at-linha); border-radius: var(--at-raio); padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--at-sombra); transition: box-shadow .2s, transform .2s; position: relative; }
html.tema-atop .at-area:hover { box-shadow: var(--at-sombra-forte); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { html.tema-atop .at-area:hover { transform: none; } }
html.tema-atop .at-area-icone { width: 48px; height: 48px; border-radius: 12px; background: var(--at-petroleo-fundo); display: inline-flex; align-items: center; justify-content: center; }
html.tema-atop .at-area-icone i { color: var(--at-petroleo) !important; font-size: 21px; }
html.tema-atop .at-area h3 { font-size: 20px; font-weight: 700; margin: 6px 0 0; }
html.tema-atop .at-area h3 a { color: var(--at-azul) !important; text-decoration: none; }
html.tema-atop .at-area h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--at-raio); }
html.tema-atop .at-area p { color: var(--at-texto-2); font-size: 15px; line-height: 1.55; margin: 0; flex: 1; }
html.tema-atop .at-area-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--at-linha); padding-top: 12px; margin-top: 4px; min-height: 40px; }
html.tema-atop .at-area-n { font-size: 14px; color: var(--at-texto-2); }
html.tema-atop .at-area-n strong { color: var(--at-azul); font-size: 18px; }
html.tema-atop .at-area-ir { position: relative; z-index: 1; font-weight: 600; font-size: 14px; color: var(--at-petroleo) !important; text-decoration: none; }
html.tema-atop .at-area-ir i { color: var(--at-petroleo) !important; margin-left: 4px; }
@media (max-width: 1000px) { html.tema-atop .at-areas-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    html.tema-atop .at-areas { padding: 36px 14px 12px; }
    html.tema-atop .at-areas-topo h2 { font-size: 28px; }
    html.tema-atop .at-areas-grelha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =====================================================================
   R6 — Perfil profissional ATOP (perfil_profissionalatop.php) e perfil de empresa (empresa.php)
   ===================================================================== */
html.tema-atop .atop-page {
    --purple: var(--at-azul);
    --dark: var(--at-texto);
    --border: var(--at-linha);
    --muted: var(--at-texto-2);
    background: linear-gradient(180deg, #FFFFFF, var(--at-fundo) 440px) !important;
    color: var(--at-texto) !important;
}
html.tema-atop .atop-card { border-radius: var(--at-raio) !important; box-shadow: var(--at-sombra) !important; }
html.tema-atop .atop-gallery-main img, html.tema-atop .atop-gallery img { background: var(--at-fundo) !important; }
html.tema-atop .atop-chip { background: var(--at-fundo) !important; color: var(--at-azul-2) !important; border: 1px solid var(--at-linha); }
html.tema-atop .atop-meta .plan { color: var(--at-petroleo) !important; }
html.tema-atop .atop-price { color: var(--at-azul) !important; font-weight: 700; }
html.tema-atop .atop-info-line span:first-child { color: var(--at-azul-2) !important; }
html.tema-atop .atop-tabs a { color: var(--at-azul) !important; border-radius: 10px !important; font-weight: 600; }
html.tema-atop .atop-tabs a:first-child { background: var(--at-azul) !important; color: #FFFFFF !important; }
html.tema-atop .atop-tabs a:hover { border-color: var(--at-petroleo) !important; }
html.tema-atop .atop-btn { background: var(--at-azul) !important; border-radius: var(--at-raio-p) !important; font-weight: 600; }
html.tema-atop .atop-btn:hover { background: var(--at-azul-2) !important; }
html.tema-atop .atop-btn.secondary { background: var(--at-fundo) !important; color: var(--at-azul) !important; border: 1px solid var(--at-linha) !important; }
html.tema-atop .atop-book .atop-btn, html.tema-atop .atop-book button[type=submit] { background: var(--at-petroleo) !important; }
html.tema-atop .atop-book .atop-btn:hover { background: var(--at-petroleo-escuro) !important; }
html.tema-atop .atop-cal-grid button { background: var(--at-fundo) !important; color: var(--at-texto) !important; }
html.tema-atop .atop-cal-grid button.selected { background: var(--at-petroleo) !important; color: #FFFFFF !important; }
html.tema-atop .atop-cal-grid button:not(:disabled):hover { border-color: var(--at-petroleo) !important; }
html.tema-atop .atop-cal-grid .day { color: var(--at-texto-2) !important; }
html.tema-atop .atop-slot { color: var(--at-azul) !important; border-radius: 999px !important; }
html.tema-atop .atop-slot:hover, html.tema-atop .atop-slot.selected { background: var(--at-azul) !important; color: #FFFFFF !important; }
html.tema-atop .atop-field, html.tema-atop .atop-control { border-color: #CBD5E1 !important; border-radius: var(--at-raio-p) !important; }
html.tema-atop .atop-contact a.whatsapp { background: #E7F8EE !important; }
html.tema-atop .atop-crumb, html.tema-atop .atop-crumb a { color: var(--at-texto-2) !important; }

/* Perfil de empresa e páginas de emprego (classes emp-*): azul e verde-petróleo em vez de roxo e laranja */
html.tema-atop .emp-btn, html.tema-atop .emp-btn-main { background: var(--at-azul) !important; background-image: none !important; color: #FFFFFF !important; border-radius: var(--at-raio-p) !important; }
html.tema-atop .emp-btn:hover { background: var(--at-azul-2) !important; }
html.tema-atop .emp-light, html.tema-atop .emp-btn.emp-light, html.tema-atop .emp-btn.emp-btn-light { background: #FFFFFF !important; color: var(--at-azul) !important; border: 1px solid var(--at-linha) !important; }
html.tema-atop .emp-badge { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .emp-meta span { background: var(--at-fundo) !important; border-color: var(--at-linha) !important; color: var(--at-texto-2); }
html.tema-atop .emp-card { border-radius: var(--at-raio) !important; box-shadow: var(--at-sombra) !important; }
html.tema-atop .emp-page { background: var(--at-fundo) !important; }
html.tema-atop .atop-contact a { background: var(--at-fundo) !important; color: var(--at-azul) !important; border: 1px solid var(--at-linha) !important; }
html.tema-atop .atop-contact a:hover { border-color: var(--at-petroleo) !important; color: var(--at-petroleo) !important; }
html.tema-atop .atop-contact a.whatsapp { background: #E7F8EE !important; color: #166534 !important; border-color: #BBE5CB !important; }
html.tema-atop .emp-tag { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .emp-tag i { color: var(--at-petroleo) !important; }
html.tema-atop .emp-small-title { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .emp-small-title i { color: var(--at-petroleo) !important; }
html.tema-atop .dc2-mobile { background: var(--at-fundo) !important; border: 1px solid var(--at-linha) !important; color: var(--at-azul) !important; }
html.tema-atop .dc2-mobile i, html.tema-atop .dc2-mobile span { color: var(--at-azul) !important; }

/* =====================================================================
   R7 — Loja, Academia e Planos
   ===================================================================== */
/* Loja */
html.tema-atop .loja-hero { background: linear-gradient(180deg, #FFFFFF, var(--at-fundo)) !important; border-color: var(--at-linha) !important; }
html.tema-atop .loja-hero button, html.tema-atop .loja-hero button[type=submit], html.tema-atop .loja-btn-filter { background: var(--at-petroleo) !important; background-image: none !important; color: #FFFFFF !important; border-color: var(--at-petroleo) !important; }
html.tema-atop .loja-publicar { background: var(--at-azul) !important; background-image: none !important; color: #FFFFFF !important; }
html.tema-atop .loja-side-title { color: var(--at-petroleo) !important; border-color: var(--at-linha) !important; }
html.tema-atop .loja-side-item { background: var(--at-fundo) !important; color: var(--at-azul) !important; border-color: var(--at-linha) !important; }
html.tema-atop .loja-side-item i { color: var(--at-petroleo) !important; }
html.tema-atop .loja-cat, html.tema-atop .loja-cats-card, html.tema-atop .loja-card { border-color: var(--at-linha) !important; }
html.tema-atop .loja-cat:hover { border-color: var(--at-petroleo) !important; }
html.tema-atop .loja-cat-icon, html.tema-atop .loja-cat-icon i, html.tema-atop .loja-cat i { color: var(--at-petroleo) !important; }
html.tema-atop .loja-cat-more, html.tema-atop .loja-cat-publicar { background: var(--at-fundo) !important; color: var(--at-azul) !important; }

/* Academia */
html.tema-atop .acp-filtros button, html.tema-atop main.acp button[type=submit] { background: var(--at-azul) !important; border-color: var(--at-azul) !important; color: #FFFFFF !important; border-radius: var(--at-raio-p) !important; }
html.tema-atop main.acp { min-height: 58vh; }

/* Planos profissionais */
html.tema-atop .dc-planos-page { background: linear-gradient(180deg, #FFFFFF, var(--at-fundo) 520px) !important; }
html.tema-atop .dc-planos-hero-card, html.tema-atop .dc-planos-hero-right, html.tema-atop .dc-planos-categorias, html.tema-atop .dc-plano-card { border-color: var(--at-linha) !important; }
html.tema-atop .dc-planos-label { border-color: var(--at-linha) !important; background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo-escuro) !important; }
html.tema-atop .dc-planos-mini-card { background: var(--at-fundo) !important; color: var(--at-azul) !important; }
html.tema-atop .dc-planos-mini-card i, html.tema-atop .dc-planos-categorias i, html.tema-atop .dc-planos-hero-card i { color: var(--at-petroleo) !important; background: transparent !important; }
html.tema-atop .dc-planos-search-btn { background: var(--at-petroleo) !important; background-image: none !important; color: #FFFFFF !important; }
html.tema-atop .dc-planos-outline-btn { background: var(--at-azul) !important; color: #FFFFFF !important; border-color: var(--at-azul) !important; }
html.tema-atop .dc-planos-soft-btn { background: #FFFFFF !important; color: var(--at-azul) !important; border: 1px solid var(--at-linha) !important; }
html.tema-atop .dc-plano-icon { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo) !important; border-color: transparent !important; }
html.tema-atop .dc-plano-icon i { color: var(--at-petroleo) !important; }
html.tema-atop .dc-plano-badge { background: var(--at-azul) !important; color: #FFFFFF !important; border-color: var(--at-azul) !important; }
html.tema-atop .dc-plano-preco, html.tema-atop .dc-plano-preco strong { color: var(--at-azul) !important; }
html.tema-atop .dc-plano-comissao { color: var(--at-petroleo-escuro) !important; }
html.tema-atop .dc-plano-btn { background: var(--at-azul) !important; background-image: none !important; color: #FFFFFF !important; }
html.tema-atop .dc-plano-btn:hover { background: var(--at-azul-2) !important; }
html.tema-atop .dc-plano-card.featured { border: 2px solid var(--at-petroleo) !important; box-shadow: var(--at-sombra-forte) !important; }
html.tema-atop .dc-plano-card.featured .dc-plano-btn { background: var(--at-petroleo) !important; }
html.tema-atop .dc-planos-page th { background: var(--at-azul) !important; color: #FFFFFF !important; }
html.tema-atop .dc-planos-page td { color: var(--at-texto) !important; border-color: var(--at-linha) !important; }
html.tema-atop .dc-planos-page td i, html.tema-atop .dc-planos-page .fa-shield-heart, html.tema-atop .dc-planos-page .fa-briefcase, html.tema-atop .dc-planos-page .fa-store { background: var(--at-petroleo-fundo) !important; color: var(--at-petroleo) !important; }
html.tema-atop .dc-planos-cta { background: var(--at-azul) !important; background-image: none !important; }
html.tema-atop .dc-planos-cta h2, html.tema-atop .dc-planos-cta h3, html.tema-atop .dc-planos-cta p { color: #FFFFFF !important; }
html.tema-atop .loja-cat-icon { background: var(--at-petroleo-fundo) !important; }
/* Páginas com secções a 100vw (ex.: planos) criavam deslocamento horizontal em ecrãs com barra de deslocamento clássica (Windows) */
html.tema-atop { overflow-x: hidden; }   /* no <html>: o excesso de elementos absolutos/100vw não cria deslocamento horizontal */


/* =====================================================================
   R8 — Login e registo (sistema/index.php, Bootstrap 4) — All Together One Place
   ===================================================================== */
html.tema-atop .login-block { min-height: 100vh; display: flex; align-items: center; padding: 24px 0; margin-top: 0 !important; }
html.tema-atop .login-block > .container-fluid > .row { max-width: 1080px; margin: 0 auto; background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: var(--at-sombra-forte); }
html.tema-atop .login-sec { padding: 40px 36px !important; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
html.tema-atop .login-marca img { height: 56px; width: auto; }
html.tema-atop .login-titulo { font-family: var(--at-titulo) !important; font-size: 30px !important; font-weight: 800; color: var(--at-azul) !important; margin: 14px 0 18px; }
html.tema-atop .label-input100 { font-weight: 700; font-size: 14px; color: var(--at-azul); margin: 10px 0 6px; display: block; }
html.tema-atop .input100 { width: 100%; border: 1px solid #CBD5E1 !important; border-radius: var(--at-raio-p) !important; padding: 12px 14px !important; font-size: 16px !important; background: #FFFFFF; height: auto !important; }
html.tema-atop .input100:focus { border-color: var(--at-petroleo) !important; box-shadow: 0 0 0 3px rgba(15, 118, 110, .2); outline: 0; }
html.tema-atop .focus-input100 { display: none !important; }
html.tema-atop .wrap-input100 { border: 0 !important; margin-bottom: 4px; }
html.tema-atop .login-entrar, html.tema-atop .login-sec .btn-primary { width: 100%; min-height: 48px; margin-top: 18px; background: var(--at-azul) !important; border-color: var(--at-azul) !important; border-radius: var(--at-raio-p) !important; font-size: 16px !important; }
html.tema-atop .login-sec .copy-text { margin-top: 14px; text-align: center; }
html.tema-atop .login-sec .copy-text a, html.tema-atop .login-sec .text-danger { color: var(--at-petroleo) !important; position: static !important; }
html.tema-atop .login-sec .text-primary { color: var(--at-azul) !important; font-weight: 700; text-decoration: underline; }
html.tema-atop .banner-sec, html.tema-atop .login-block .col-md-8 { padding: 0 !important; }
html.tema-atop .login-block .col-md-8 img, html.tema-atop .banner-sec img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; border-radius: 0 !important; }
html.tema-atop .container { box-shadow: none !important; }
html.tema-atop .modal-header .modal-title { font-family: var(--at-titulo) !important; font-size: 26px; }
html.tema-atop .modal .btn-primary { background: var(--at-azul) !important; border-color: var(--at-azul) !important; }
@media (max-width: 767px) {
    html.tema-atop .login-block { align-items: flex-start; padding: 0; }
    html.tema-atop .login-block > .container-fluid > .row { border-radius: 0; box-shadow: none; }
    html.tema-atop .login-sec { padding: 28px 20px !important; }
    html.tema-atop .login-block .col-md-8 { display: none; }
}
html.tema-atop .login-sec .copy-text { position: static !important; bottom: auto !important; left: auto !important; width: auto !important; order: 10; }
@media (max-width: 767px) { html.tema-atop .login-block .banner-sec { display: none !important; } }

/* Páginas de texto partilhadas com a Divina (termos, privacidade, contactos), agora com o cabeçalho do ATOP (29/10/2026):
   títulos proporcionais e margem lateral no telemóvel */
html.tema-atop #about-page-section-3 .container { padding-left: 16px; padding-right: 16px; }
html.tema-atop #about-page-section-3 h2 { font-size: clamp(20px, 2.2vw + 12px, 28px) !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 28px 0 10px !important; }
html.tema-atop #about-page-section-3 .section-heading h2 { font-size: clamp(24px, 3vw + 12px, 34px) !important; }
html.tema-atop #about-page-section-3 p, html.tema-atop #about-page-section-3 li { font-size: 15.5px; line-height: 1.7; }

/* ---------- Dimensões (31/10/2026) ----------
   Base de leitura a 16 px (antes 14 px do Bootstrap 3) e contentor mais largo em ecrãs grandes.
   Nota: num computador com o zoom do browser a 50 %, o ATOP parecia ter metade do tamanho (Ctrl + 0 repõe 100 %). */
html.tema-atop body { font-size: 16px; line-height: 1.6; }
@media (min-width: 1400px) { html.tema-atop .container { width: 1320px; } }

/* Botão do menu móvel: ícone centrado dentro do botão (o ícone saía por baixo) */
@media (max-width: 1100px) { html.tema-atop .dc2-mobile { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 20px; line-height: 1; } }
/* Emprego: os destaques a laranja do tema antigo passam ao azul institucional e ao verde-petróleo do ATOP */
html.tema-atop .emp-company, html.tema-atop .emp-company i, html.tema-atop .emp-small-title { color: var(--at-azul) !important; }
html.tema-atop .emp-highlight, html.tema-atop .emp-highlight i, html.tema-atop .emp-featured-label, html.tema-atop .emp-empty i { color: var(--at-petroleo) !important; }
/* Secções com width:100vw contam a barra de deslocamento e criavam ~17 px de deslocamento horizontal: corta-se só esse excesso (clip não cria contentor de deslocamento, por isso não afeta position:sticky) */
html.tema-atop body { overflow-x: clip; }
/* Notas do perfil profissional (marcação, consultas) a 14 px no mínimo (estavam a 12 px) */
html.tema-atop .atop-note { font-size: 14px !important; line-height: 1.5; }
/* Menu a 15,5 px só em ecrãs largos (de 1101 a 1599 px os 13 itens só cabem a 14,5 px) */
@media (min-width: 1600px) { html.tema-atop .dc2-nav > a, html.tema-atop .dc2-nav > div > a, html.tema-atop .dc2-nav button { font-size: 15.5px !important; } }
/* O cabeçalho mantém a base de 14 px: os espaçamentos do menu estão em "em" e cresciam com a base de 16 px do corpo */
html.tema-atop .dc2-header { font-size: 14px; }
/* Menu compacto entre 1101 e 1440 px: logótipo de 62 px (a página inicial forçava 160 px) e itens mais juntos, para os 13 itens caberem */
@media (min-width: 1101px) and (max-width: 1440px) {
    html.tema-atop .dc2-header .dc2-logo { flex: 0 0 62px !important; flex-basis: 62px !important; }
    html.tema-atop .dc2-nav > a, html.tema-atop .dc2-nav > div > a, html.tema-atop .dc2-nav button { padding-left: 5px !important; padding-right: 5px !important; font-size: 14px !important; }
}
/* Entre 1101 e 1250 px o menu completo não cabe: usa-se o menu móvel, como abaixo de 1100 px (mesmas regras do cabeçalho) */
@media (min-width: 1101px) and (max-width: 1250px) {
    html.tema-atop .dc2-header-inner { min-height: 70px; flex-wrap: wrap; padding: 8px 0; }
    html.tema-atop .dc2-header .dc2-logo { flex: 0 0 58px !important; }
    html.tema-atop .dc2-mobile { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 20px; line-height: 1; }
    html.tema-atop .dc2-nav { display: none !important; flex: 0 0 100%; flex-direction: column; align-items: stretch; padding: 10px 0 16px; }
    html.tema-atop .dc2-header.menu-open .dc2-nav { display: flex !important; }
    html.tema-atop .dc2-nav > a, html.tema-atop .dc2-nav-btn { justify-content: flex-start; min-height: 42px; }
    html.tema-atop .dc2-mega { position: static; transform: none; width: 100%; grid-template-columns: 1fr 1fr; box-shadow: none; border-radius: 12px; padding: 18px; }
    html.tema-atop .dc2-lang-menu { position: static; width: 100%; box-shadow: none; }
}
/* Menu móvel (até 1250 px): os itens herdavam a altura de 100 px do cabeçalho e o menu aberto ficava por cima da página, sem fundo.
   Agora o cabeçalho cresce quando o menu abre e cada item tem a altura do seu texto (mínimo 44 px, bom para o toque). */
@media (max-width: 1250px) {
    html.tema-atop .dc2-header.menu-open { height: auto !important; }
    html.tema-atop .dc2-header.menu-open .dc2-header-inner { height: auto !important; }
    html.tema-atop .dc2-header.menu-open .dc2-nav { background: #FFFFFF; }
    html.tema-atop .dc2-nav > a, html.tema-atop .dc2-nav > div > a, html.tema-atop .dc2-nav-btn, html.tema-atop .dc2-nav button { height: auto !important; min-height: 44px; line-height: 1.3 !important; font-size: 16px !important; padding: 10px 12px !important; }
}