@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

/* ================================================
   VARIÁVEIS GLOBAIS — DELTA DOMUS ADMINISTRADORA
   PALETA DA MARCA (AZUL #426FA6 + LARANJA #F8AB1B)
   :root = base; tema CLARO aplicado por padrão (boot em estilos.php)
   e definido em html[data-tema="claro"]. Tema ESCURO = base do :root.
================================================ */

:root {

    /* CORES AZUIS DA MARCA — SUPERFÍCIES ESCURAS (HERO, RODAPÉ, MENU LATERAL) */
    --azul-profundo: #0E2036;
    --azul-escuro: #143150;
    --azul-medio: #1F4467;
    --azul-claro: #426FA6;
    --azul-borda: #2C5480;

    /* CORES DE DESTAQUE — LARANJA DA MARCA (mantém os nomes "ouro-*" do template) */
    --ouro-principal: #F8AB1B;
    --ouro-claro: #FCC15A;
    --ouro-escuro: #D98E0A;
    --ouro-suave: rgba(248, 171, 27, 0.12);
    --ouro-borda: rgba(248, 171, 27, 0.30);

    /* AZUL DA MARCA — VERSÕES SUAVES PARA DESTAQUE EM FUNDOS CLAROS/ESCUROS */
    --azul-suave: rgba(66, 111, 166, 0.12);
    --azul-acento-borda: rgba(66, 111, 166, 0.30);

    /* CORES DE TEXTO — BASE (TEMA ESCURO) */
    --texto-primario: #E8ECF4;
    --texto-secundario: #B0BDD4;
    --texto-terciario: #6B7A94;
    --texto-invertido: #FFFFFF;

    /* CORES DE FUNDO — BASE (TEMA ESCURO) */
    --fundo-principal: #0F2238;
    --fundo-secundario: #0B1B2D;
    --fundo-terciario: #15304D;
    --fundo-card: rgba(255, 255, 255, 0.04);
    --fundo-card-hover: rgba(255, 255, 255, 0.07);

    /* CORES UTILITÁRIAS */
    --branco: #FFFFFF;
    --branco-suave: rgba(255, 255, 255, 0.05);
    --divisor: rgba(248, 171, 27, 0.15);

    /* TIPOGRAFIA — FAMÍLIAS */
    --fonte-titulo: 'Raleway', 'Segoe UI', Helvetica, Arial, sans-serif;
    --fonte-corpo: 'Nunito Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --fonte-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* TIPOGRAFIA — TAMANHOS */
    --tam-xs: 0.75rem;
    --tam-sm: 0.875rem;
    --tam-base: 1rem;
    --tam-md: 1.125rem;
    --tam-lg: 1.25rem;
    --tam-xl: 1.5rem;
    --tam-2xl: 1.875rem;
    --tam-3xl: 2.25rem;
    --tam-4xl: 3rem;
    --tam-5xl: 3.75rem;
    --tam-hero: clamp(2.5rem, 5vw, 4.5rem);

    /* TIPOGRAFIA — PESOS */
    --peso-regular: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
    --peso-black: 900;

    /* TIPOGRAFIA — ALTURAS DE LINHA */
    --linha-apertada: 1.2;
    --linha-normal: 1.6;
    --linha-relaxada: 1.8;

    /* ESPAÇAMENTO */
    --espaco-xs: 0.5rem;
    --espaco-sm: 1rem;
    --espaco-md: 1.5rem;
    --espaco-lg: 2rem;
    --espaco-xl: 3rem;
    --espaco-2xl: 5rem;
    --espaco-3xl: 7rem;
    --espaco-secao: clamp(4rem, 8vw, 8rem);

    /* BORDAS */
    --borda-radius-sm: 4px;
    --borda-radius-md: 8px;
    --borda-radius-lg: 16px;
    --borda-radius-xl: 24px;
    --borda-radius-pill: 9999px;

    /* SOMBRAS */
    --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-md: 0 4px 20px rgba(0, 0, 0, 0.10);
    --sombra-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --sombra-xl: 0 16px 64px rgba(0, 0, 0, 0.15);
    --sombra-ouro: 0 4px 24px rgba(248, 171, 27, 0.25);
    --sombra-ouro-lg: 0 8px 48px rgba(248, 171, 27, 0.35);
    --sombra-azul: 0 4px 24px rgba(66, 111, 166, 0.28);
    --sombra-azul-lg: 0 8px 48px rgba(66, 111, 166, 0.38);

    /* TRANSIÇÕES */
    --transicao-rapida: 0.15s ease;
    --transicao-normal: 0.25s ease;
    --transicao-lenta: 0.40s ease;

    /* LARGURAS */
    --largura-max: 1280px;
    --largura-conteudo: 960px;
    --largura-estreita: 720px;

    /* CABEÇALHO */
    --altura-cabecalho: 110px;
}




/* ================================================
   RESET E ESTILOS BASE — DELTA DOMUS ADMINISTRADORA
   FUNDAÇÃO GLOBAL DE TIPOGRAFIA E ELEMENTOS
================================================ */

/* RESET UNIVERSAL */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CONFIGURAÇÃO DA RAIZ */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* overflow-clip não quebra position:sticky (ao contrário de overflow:hidden) */
    overflow-x: clip;
}

/* CORPO DO DOCUMENTO */
body {
    font-family: var(--fonte-corpo);
    font-size: var(--tam-base);
    font-weight: var(--peso-regular);
    line-height: var(--linha-normal);
    color: var(--texto-primario);
    background-color: var(--fundo-secundario);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* TÍTULOS */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-bold);
    line-height: var(--linha-apertada);
    color: var(--texto-primario);
}

h1 {
    font-size: clamp(2rem, 4.5vw, var(--tam-5xl));
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, var(--tam-4xl));
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, var(--tam-xl));
}

h4 {
    font-size: var(--tam-lg);
}

/* PARÁGRAFOS */
p {
    color: var(--texto-secundario);
    line-height: var(--linha-relaxada);
}

/* ÊNFASE ITÁLICA — AZUL DA MARCA */
em {
    font-style: italic;
    color: var(--azul-claro);
}

/* LINKS */
a {
    color: var(--azul-claro);
    text-decoration: none;
    transition: color var(--transicao-normal);
}

a:hover,
a:focus {
    color: var(--texto-primario);
}

a:focus-visible {
    outline: 2px solid var(--azul-claro);
    outline-offset: 3px;
    border-radius: var(--borda-radius-sm);
}

/* IMAGENS */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* LISTAS */
ul,
ol {
    list-style: none;
}

/* ADDRESS */
address {
    font-style: normal;
}

/* BLOCKQUOTE */
blockquote {
    margin: 0;
}

/* CITE */
cite {
    font-style: normal;
}

/* BOTÕES RESET */
button {
    font-family: var(--fonte-corpo);
    cursor: pointer;
    border: none;
    background: none;
}

/* SELEÇÃO DE TEXTO */
::selection {
    background-color: var(--azul-claro);
    color: var(--texto-invertido);
}

/* SCROLLBAR PERSONALIZADA */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--fundo-principal);
}

::-webkit-scrollbar-thumb {
    background: var(--azul-borda);
    border-radius: var(--borda-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ouro-escuro);
}


/* ================================================
   COMPONENTES REUTILIZÁVEIS — DELTA DOMUS ADMINISTRADORA
   BOTÕES, TAGS, CABEÇALHOS DE SEÇÃO
================================================ */


/* ------------------------------------------------
   BOTÕES — BASE COMPARTILHADA
------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-semibold);
    font-size: var(--tam-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 2rem;
    border-radius: var(--borda-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition:
        color var(--transicao-normal),
        background-color var(--transicao-normal),
        border-color var(--transicao-normal),
        box-shadow var(--transicao-normal),
        transform var(--transicao-normal),
        font-size var(--transicao-normal),
        padding var(--transicao-normal);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:focus-visible {
    outline: 2px solid var(--ouro-principal);
    outline-offset: 4px;
}

/* Pseudo-element para efeito de shimmer / sweep */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transicao-normal);
    pointer-events: none;
    z-index: -1;
}

/* Ícone SVG dentro do botão */
.btn svg,
.btn i {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    transition: transform var(--transicao-normal);
}

/* Tamanhos alternativos */
.btn--sm {
    font-size: var(--tam-xs);
    padding: 0.6rem 1.4rem;
}

.btn--lg {
    font-size: var(--tam-base);
    padding: 1.05rem 2.5rem;
}


/* ------------------------------------------------
   BOTÃO PRIMÁRIO — LARANJA SÓLIDO (AÇÃO PRINCIPAL)
   Classe: .btn-primario
------------------------------------------------ */

.btn-primario {
    background: linear-gradient(135deg, var(--ouro-principal) 0%, var(--ouro-claro) 50%, var(--ouro-principal) 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    border-color: transparent;
    color: var(--azul-profundo);
    box-shadow: 0 4px 20px rgba(248, 171, 27, 0.30);
}

/* Shimmer sweep diagonal */
.btn-primario::before {
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    opacity: 1;
    transition: transform 0.55s ease;
    z-index: -1;
}

.btn-primario:hover,
.btn-primario:focus-visible {
    background-position: 100% 0%;
    border-color: transparent;
    color: var(--azul-profundo);
    box-shadow:
        0 6px 28px rgba(248, 171, 27, 0.50),
        0 2px 8px rgba(248, 171, 27, 0.20);
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-primario:hover::before {
    transform: translateX(100%);
}

.btn-primario:hover svg,
.btn-primario:hover i {
    transform: translateX(3px);
}

.btn-primario:active {
    transform: translateY(0px);
    box-shadow: 0 2px 10px rgba(248, 171, 27, 0.35);
    transition-duration: 0.1s;
}


/* ------------------------------------------------
   BOTÃO SECUNDÁRIO — CONTORNO AZUL / GHOST (AÇÃO SECUNDÁRIA)
   Classe: .btn-secundario
------------------------------------------------ */

.btn-secundario {
    background: transparent;
    border-color: var(--azul-claro);
    color: var(--texto-primario);
    box-shadow: inset 0 0 0 0 var(--azul-claro);
}

/* Fill animado de dentro para fora */
.btn-secundario::before {
    background: var(--azul-claro);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 1;
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-secundario:hover,
.btn-secundario:focus-visible {
    border-color: var(--ouro-principal);
    color: var(--branco);
    box-shadow:
        0 0 0 1px var(--ouro-principal),
        0 4px 20px rgba(66, 111, 166, 0.30);
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-secundario:hover::before {
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-claro));
    transform: scaleX(1);
}

.btn-secundario:hover svg,
.btn-secundario:hover i {
    transform: translateX(3px);
}

.btn-secundario:active {
    transform: translateY(0px);
    transition-duration: 0.1s;
}


/* ------------------------------------------------
   VARIANTE ESCURA DO SECUNDÁRIO — fundo azul escuro
   Classe: .btn-secundario--escuro
   (útil em seções claras do tema light)
------------------------------------------------ */

.btn-secundario--escuro {
    border-color: var(--azul-borda);
    color: var(--texto-secundario);
}

.btn-secundario--escuro:hover {
    border-color: var(--ouro-principal);
    color: var(--branco);
}

/* Força texto e ícone sempre brancos — usado no banner hero */
.btn-texto-branco,
.btn-texto-branco svg {
    color: var(--branco) !important;
}



/* ------------------------------------------------
   BOTÃO DO MENU MOBILE
------------------------------------------------ */

.btn-menu-mobile {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}

.btn-menu-mobile span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--ouro-principal);
    border-radius: var(--borda-radius-pill);
    transition: all var(--transicao-normal);
}

.btn-menu-mobile.ativo span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.btn-menu-mobile.ativo span:nth-child(2) {
    opacity: 0;
}

.btn-menu-mobile.ativo span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* ------------------------------------------------
   TAGS DE SEÇÃO
------------------------------------------------ */

.secao-tag,
.hero-tag {
    display: inline-block;
    font-family: var(--fonte-corpo);
    font-size: var(--tam-xs);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--azul-claro);
    padding: 0.35rem 1rem;
    border: 1px solid var(--azul-borda);
    border-radius: var(--borda-radius-pill);
    background: rgba(66, 111, 166, 0.12);
    margin-bottom: var(--espaco-md);
}


/* ------------------------------------------------
   CABEÇALHOS DE SEÇÃO — PADRÃO CENTRALIZADO
------------------------------------------------ */

.secao-cabecalho {
    text-align: center;
    max-width: var(--largura-estreita);
    margin: 0 auto var(--espaco-2xl);
}

.secao-cabecalho h2 {
    margin-bottom: var(--espaco-sm);
}

.secao-descricao {
    font-size: var(--tam-md);
    color: var(--texto-secundario);
    line-height: var(--linha-relaxada);
}


/* ------------------------------------------------
   LINHA DECORATIVA — AZUL DA MARCA
------------------------------------------------ */

.linha-dourada {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--azul-claro), transparent);
    margin: var(--espaco-md) 0;
}

.linha-dourada-centro {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--azul-claro), transparent);
    margin: var(--espaco-md) auto;
}


/* ------------------------------------------------
   DIVISOR DE SEÇÃO
------------------------------------------------ */

.divisor-secao {
    width: 100%;
    height: 1px;
    background: var(--divisor);
    margin: 0;
}


/* ================================================
   CABEÇALHO — DELTA DOMUS ADMINISTRADORA
   HEADER FIXO COM NAVEGAÇÃO PRINCIPAL
================================================ */

/* ESTRUTURA DO CABEÇALHO */
#cabecalho {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--altura-cabecalho);
    transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* CABEÇALHO COM SCROLL — ENCOLHIDO */
#cabecalho.rolado {
    height: 68px;
    background: rgba(14, 32, 54, 0.99);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.40);
}

/* CONTAINER INTERNO DO CABEÇALHO */
.container-cabecalho {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 var(--espaco-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-lg);
}

/* LOGOTIPO */
.logo {
    flex-shrink: 0;
}

.logo a {
    display: block;
}

.logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
    transition: height 0.3s ease;
}

#cabecalho.rolado .logo img {
    height: 38px;
}

#cabecalho.rolado #menu-principal ul li a,
#cabecalho.rolado .menu-area-cliente-btn {
    font-size: 0.78rem;
}

#cabecalho.rolado .btn-nav-contato {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.9rem !important;
}

#cabecalho.rolado .btn-tema {
    width: 32px;
    height: 32px;
}

#cabecalho.rolado .btn-tema svg {
    width: 15px;
    height: 15px;
}

/* CONTROLES DIREITOS DO CABEÇALHO */
.cabecalho-controles {
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
    flex-shrink: 0;
}

/* NAVEGAÇÃO PRINCIPAL */
#menu-principal ul {
    display: flex;
    align-items: center;
    gap: var(--espaco-lg);
    list-style: none;
}

#menu-principal ul li a {
    font-size: var(--tam-sm);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    padding: 0 0 0.25rem;
    position: relative;
    transition: color var(--transicao-normal), font-size var(--transicao-normal);
}

/* SUBLINHADO ANIMADO DOS LINKS */
#menu-principal ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--ouro-principal);
    transition: width var(--transicao-normal);
}

#menu-principal ul li a:hover,
#menu-principal ul li a:focus-visible,
#menu-principal ul li a.ativo {
    color: var(--ouro-principal);
}

#menu-principal ul li a:hover::after,
#menu-principal ul li a:focus-visible::after,
#menu-principal ul li a.ativo::after {
    width: 100%;
}

nav#menu-principal {
    display: flex;
    gap: 20px;
}

/* BOTÃO DE CONTATO NA NAVEGAÇÃO — só ajuste de tamanho */
.btn-nav-contato {
    font-size: var(--tam-xs) !important;
    padding: 0.5rem 1.25rem !important;
    text-transform: none;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 12px rgba(248, 171, 27, 0.22);
}

.btn-nav-contato::after {
    display: none !important;
}

/* Hover suave — sem pulo, glow contido */
.btn-nav-contato:hover,
.btn-nav-contato:focus-visible {
    transform: none !important;
    box-shadow:
        0 2px 16px rgba(248, 171, 27, 0.38),
        0 0 0 2px rgba(248, 171, 27, 0.18) !important;
    background-position: 100% 0%;
    filter: brightness(1.06);
}

.btn-nav-contato:active {
    transform: scale(0.97) !important;
    filter: brightness(0.96);
    transition-duration: 0.08s;
}

/* Estado rolado — botão menor, hover proporcional */
#cabecalho.rolado .btn-nav-contato {
    box-shadow: 0 1px 8px rgba(248, 171, 27, 0.18);
}

#cabecalho.rolado .btn-nav-contato:hover,
#cabecalho.rolado .btn-nav-contato:focus-visible {
    box-shadow:
        0 2px 12px rgba(248, 171, 27, 0.32),
        0 0 0 2px rgba(248, 171, 27, 0.15) !important;
    filter: brightness(1.06);
}

/* Modo claro — fundo claro, botão dourado precisa de mais contraste */
html[data-tema="claro"] .btn-nav-contato {
    box-shadow: 0 2px 12px rgba(180, 120, 0, 0.20);
    color: #1a2a3a;
}

html[data-tema="claro"] .btn-nav-contato:hover,
html[data-tema="claro"] .btn-nav-contato:focus-visible {
    box-shadow:
        0 2px 16px rgba(180, 120, 0, 0.35),
        0 0 0 2px rgba(180, 120, 0, 0.16) !important;
    filter: brightness(1.04);
}

/* BOTÃO MENU MOBILE — OCULTO NO DESKTOP, VISÍVEL NO MOBILE */
.btn-menu-mobile {
    display: none;
}

.menu-container {
    display: flex;
    gap: 20px;
}

/* ------------------------------------------------
   DROPDOWN — ÁREA DO CLIENTE
------------------------------------------------ */

.menu-item-area-cliente {
    position: relative;
}

.menu-area-cliente-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--tam-sm);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    color: #B0BDD4;
    background: none;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    transition: color var(--transicao-normal), font-size var(--transicao-normal);
    white-space: nowrap;
}

.menu-area-cliente-btn svg {
    transition: transform var(--transicao-normal);
    flex-shrink: 0;
}

.menu-area-cliente-btn:hover,
.menu-item-area-cliente:hover .menu-area-cliente-btn {
    color: var(--ouro-principal);
}

.menu-item-area-cliente:hover .menu-area-cliente-btn svg,
.menu-area-cliente-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* PAINEL DO DROPDOWN */
.dropdown-area-cliente {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--azul-escuro);
    border: 1px solid rgba(66, 111, 166, 0.35);
    border-radius: var(--borda-radius-md);
    box-shadow: var(--sombra-lg);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transicao-normal), visibility var(--transicao-normal), transform var(--transicao-normal);
    transform: translateX(-50%) translateY(-6px);
    z-index: 200;
}

/* SETA DO DROPDOWN */
.dropdown-area-cliente::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: var(--azul-escuro);
    border-top: 1px solid rgba(66, 111, 166, 0.35);
    border-left: 1px solid rgba(66, 111, 166, 0.35);
}

.menu-item-area-cliente:hover .dropdown-area-cliente,
.dropdown-area-cliente:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.dropdown-area-cliente li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    font-size: var(--tam-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    color: var(--texto-secundario);
    text-decoration: none;
    border-radius: var(--borda-radius-sm);
    transition: all var(--transicao-normal);
    white-space: nowrap;
}

.dropdown-area-cliente li a svg {
    color: var(--ouro-principal);
    flex-shrink: 0;
}

.dropdown-area-cliente li a:hover {
    color: var(--texto-primario);
    background: var(--branco-suave);
}

.dropdown-area-cliente li a::after {
    display: none;
}


/* ================================================
   DROPDOWN — SERVIÇOS
================================================ */

.menu-item-servicos {
    position: relative;
}

.menu-servicos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--tam-sm);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    color: #fff;
    background: none;
    border: none;
    padding: 0.25rem 0 0.25rem;
    cursor: pointer;
    transition: color var(--transicao-normal);
    white-space: nowrap;
    font-family: var(--fonte-corpo);
    position: relative;
}

.menu-servicos-btn svg {
    transition: transform var(--transicao-normal);
    flex-shrink: 0;
}

.menu-servicos-btn:hover,
.menu-item-servicos.aberto .menu-servicos-btn,
.menu-servicos-btn.ativo {
    color: var(--ouro-principal);
}

/* Sublinhado animado — igual aos links <a> do menu */
.menu-servicos-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--ouro-principal);
    transition: width var(--transicao-normal);
}

.menu-servicos-btn:hover::after,
.menu-servicos-btn.ativo::after {
    width: 100%;
}

.menu-servicos-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ---- DROPDOWN SERVICOS ---- */
.dropdown-servicos {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 260px;
    background: #0D1B2A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    padding: 0.35rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    z-index: 200;
    list-style: none !important;
}

.dropdown-servicos::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0D1B2A;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-item-servicos.aberto .dropdown-servicos {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.dropdown-servicos li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* reset total dos estilos herdados do nav principal */
.dropdown-servicos li a,
.dropdown-servicos li a:hover,
.dropdown-servicos li a:focus {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    padding: 0.6rem 0.8rem !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    transition: background 0.14s ease !important;
    letter-spacing: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    font-family: var(--fonte-corpo) !important;
    color: rgba(195, 210, 228, 0.9) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dropdown-servicos li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}

.dropdown-servicos li a.ativo {
    background: rgba(212, 160, 23, 0.12) !important;
    color: var(--ouro-principal) !important;
}

.dropdown-servicos li a.ativo .dd-titulo {
    color: var(--ouro-principal) !important;
}

.dropdown-servicos li a::after,
.dropdown-servicos li a:hover::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

.dropdown-servicos li a .dd-icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: rgba(107, 159, 212, 0.65) !important;
    transition: color 0.14s ease !important;
}

.dropdown-servicos li a .dd-icone svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.dropdown-servicos li a:hover .dd-icone {
    color: #F8AB1B !important;
}

.dropdown-servicos li a .dd-texto {
    display: block !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.dropdown-servicos li a .dd-titulo {
    display: block !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
}

.dropdown-servicos li a .dd-desc { display: none !important; }
/* ---- FIM DROPDOWN SERVICOS ---- */

/* DROPDOWN SERVICOS — MODO CLARO + ROLADO: fundo branco, texto escuro */
html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos {
    background: #FFFFFF !important;
    border-color: rgba(30, 42, 56, 0.1) !important;
    box-shadow: 0 16px 40px rgba(30, 42, 56, 0.13) !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos::before {
    background: #FFFFFF !important;
    border-color: rgba(30, 42, 56, 0.1) !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a,
html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a:hover,
html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a:focus {
    color: #1E2D40 !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a .dd-titulo {
    color: #1E2D40 !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a .dd-icone {
    color: var(--azul-claro) !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a:hover {
    background: rgba(66, 111, 166, 0.07) !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a:hover .dd-titulo {
    color: var(--azul-profundo) !important;
}

html[data-tema="claro"] #cabecalho.rolado .dropdown-servicos li a:hover .dd-icone {
    color: var(--ouro-escuro) !important;
}


/* ================================================
   BOTÃO BAIXAR APP
================================================ */

.menu-item-app {
    position: relative;
}

.btn-app {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--fonte-corpo);
    font-size: var(--tam-xs);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.06em;
    color: var(--ouro-claro);
    background: rgba(248, 171, 27, 0.10);
    border: 1px solid rgba(248, 171, 27, 0.28);
    border-radius: var(--borda-radius-pill);
    cursor: pointer;
    transition: all var(--transicao-normal);
    white-space: nowrap;
}

.btn-app:hover,
.menu-item-app.aberto .btn-app {
    background: rgba(248, 171, 27, 0.18);
    border-color: rgba(248, 171, 27, 0.50);
    color: var(--ouro-claro);
}

.btn-app-chevron {
    transition: transform var(--transicao-normal);
}

.btn-app[aria-expanded="true"] .btn-app-chevron {
    transform: rotate(180deg);
}

.dropdown-app {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--azul-escuro);
    border: 1px solid rgba(248, 171, 27, 0.25);
    border-radius: var(--borda-radius-md);
    box-shadow: var(--sombra-lg);
    padding: 0.5rem;
    padding-top: calc(0.5rem + 10px);
    margin-top: -10px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transicao-normal), visibility var(--transicao-normal), transform var(--transicao-normal);
    transform: translateY(-6px);
    z-index: 200;
    list-style: none;
}

.dropdown-app::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    transform: rotate(45deg);
    width: 9px;
    height: 9px;
    background: var(--azul-escuro);
    border-top: 1px solid rgba(248, 171, 27, 0.25);
    border-left: 1px solid rgba(248, 171, 27, 0.25);
}

.menu-item-app.aberto .dropdown-app {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.dropdown-app li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    font-size: var(--tam-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.03em;
    color: var(--texto-secundario);
    text-decoration: none;
    border-radius: var(--borda-radius-sm);
    transition: all var(--transicao-normal);
    white-space: nowrap;
}

.dropdown-app li a svg {
    color: var(--ouro-principal);
    flex-shrink: 0;
}

.dropdown-app li a:hover {
    color: var(--texto-primario);
    background: var(--branco-suave);
}

.dropdown-app li a::after {
    display: none;
}


/* ================================================
   OFF-CANVAS — SERVIÇOS SUBMENU
================================================ */

.oc-item-servicos {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.oc-servicos-btn {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 1.1rem var(--espaco-lg);
    font-family: var(--fonte-corpo);
    font-size: var(--tam-base);
    font-weight: var(--peso-medio);
    color: rgba(232, 236, 244, 0.70);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.01em;
    transition: color var(--transicao-normal);
}

.oc-servicos-btn .oc-num {
    font-size: var(--tam-xs);
    font-weight: var(--peso-bold);
    color: var(--ouro-principal);
    letter-spacing: 0.12em;
    margin-right: var(--espaco-md);
    min-width: 28px;
}

.oc-servicos-btn .oc-chevron {
    margin-left: auto;
    transition: transform var(--transicao-normal);
    flex-shrink: 0;
}

.oc-servicos-btn[aria-expanded="true"] .oc-chevron {
    transform: rotate(180deg);
}

.oc-servicos-btn:hover {
    color: #FFFFFF;
}

.oc-submenu-servicos {
    list-style: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
    background: rgba(0, 0, 0, 0.15);
}

.oc-submenu-servicos.aberto {
    max-height: 400px;
}

.oc-submenu-servicos li a {
    display: block;
    padding: 0.75rem var(--espaco-lg) 0.75rem calc(var(--espaco-lg) + 44px);
    font-size: var(--tam-sm);
    color: rgba(176, 189, 212, 0.80);
    text-decoration: none;
    transition: color var(--transicao-normal), background var(--transicao-normal);
    border-bottom: none;
}

.oc-submenu-servicos li a:hover {
    color: var(--texto-primario);
    background: rgba(66, 111, 166, 0.07);
}

.oc-submenu-servicos li a::before,
.oc-submenu-servicos li a::after {
    display: none !important;
}


/* ================================================
   OFF-CANVAS — BOTÕES DO APP
================================================ */

.oc-item-app {
    padding: var(--espaco-md) var(--espaco-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.oc-app-titulo {
    display: block;
    font-size: var(--tam-xs);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--azul-claro);
    margin-bottom: 0.75rem;
}

.oc-app-links {
    display: flex;
    gap: var(--espaco-sm);
}

.oc-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    font-size: var(--tam-xs);
    font-weight: var(--peso-semibold);
    color: var(--texto-primario);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--borda-radius-sm);
    text-decoration: none;
    transition: all var(--transicao-normal);
}

.oc-app-btn:hover {
    background: rgba(66, 111, 166, 0.12);
    border-color: var(--azul-borda);
    color: var(--texto-primario);
}

.oc-app-btn svg {
    flex-shrink: 0;
}


/* ================================================
   MODO CLARO — AJUSTES DOS NOVOS COMPONENTES
================================================ */

html[data-tema="claro"] .menu-servicos-btn {
    color: #FFFFFF;
}

html[data-tema="claro"] #cabecalho.rolado .menu-servicos-btn {
    color: var(--texto-secundario);
}

html[data-tema="claro"] .menu-servicos-btn:hover,
html[data-tema="claro"] .menu-item-servicos:hover .menu-servicos-btn,
html[data-tema="claro"] .menu-servicos-btn.ativo,
html[data-tema="claro"] .menu-item-servicos.aberto .menu-servicos-btn {
    color: var(--ouro-escuro);
}

html[data-tema="claro"] #cabecalho.rolado .menu-servicos-btn:hover,
html[data-tema="claro"] #cabecalho.rolado .menu-item-servicos:hover .menu-servicos-btn {
    color: var(--ouro-escuro);
}

html[data-tema="claro"] .dropdown-app {
    background: #FFFFFF;
    border-color: rgba(30, 42, 56, 0.09);
    box-shadow: 0 16px 48px rgba(30, 42, 56, 0.13);
}

html[data-tema="claro"] .dropdown-app::before {
    background: #FFFFFF;
    border-color: rgba(30, 42, 56, 0.09);
}

html[data-tema="claro"] .dropdown-app li a {
    color: #2C3E50 !important;
}

html[data-tema="claro"] .dropdown-app li a:hover {
    color: var(--azul-profundo) !important;
    background: rgba(30, 42, 56, 0.05);
}


/* ================================================
   RESPONSIVIDADE DO CABEÇALHO
================================================ */

@media (max-width: 900px) {

    /* REDUZ A ALTURA DO CABEÇALHO NO MOBILE */
    #cabecalho {
        height: 90px;
    }

    /* EXIBE BOTÃO HAMBURGUÊR */
    .btn-menu-mobile {
        display: flex;
    }

    /* CONTROLES — MENOS ESPAÇO NO MOBILE */
    .cabecalho-controles {
        gap: 0.6rem;
    }

    /* OCULTA A NAV PRINCIPAL NO MOBILE — O OFF-CANVAS SUBSTITUI */
    #menu-principal {
        display: none !important;
    }
}

@media (max-width: 480px) {

    .container-cabecalho {
        padding: 0 var(--espaco-sm);
    }

    /* logo no topo (header de 90px): altura menor pra não transbordar a largura
       e espremer os controles. Ao rolar, encolhe pra 38px normalmente */
    .logo img {
        height: 52px;
    }
}

@media (max-width: 380px) {

    .logo img {
        height: 46px;
    }
}


/* ================================================
   OFF-CANVAS — MENU LATERAL MOBILE
   PAINEL DESLIZANTE DA DIREITA COM OVERLAY
================================================ */

/* OVERLAY ESCURO DE FUNDO */
.offcanvas-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 18, 30, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.offcanvas-overlay.ativo {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* PAINEL LATERAL */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    width: min(360px, 88vw);
    background: var(--azul-escuro);
    border-left: 1px solid rgba(248, 171, 27, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.40s;
    overflow-y: auto;
    overflow-x: hidden;
}

/* PAINEL ABERTO */
.offcanvas-menu.aberto {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0s;
}

/* FAIXA DOURADA DECORATIVA NO TOPO DO PAINEL */
.offcanvas-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ouro-principal), var(--ouro-claro), transparent);
    pointer-events: none;
}

/* TOPO DO PAINEL — LOGO + BOTÃO FECHAR */
.offcanvas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem var(--espaco-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.offcanvas-logo img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(1.05);
}

/* BOTÃO FECHAR */
.offcanvas-fechar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(248, 171, 27, 0.20);
    border-radius: 50%;
    color: rgba(176, 189, 212, 0.80);
    cursor: pointer;
    transition: all var(--transicao-normal);
    flex-shrink: 0;
}

.offcanvas-fechar:hover {
    background: rgba(66, 111, 166, 0.12);
    border-color: var(--azul-borda);
    color: var(--texto-primario);
}

/* NAVEGAÇÃO DO OFF-CANVAS */
.offcanvas-nav {
    flex: 1;
    padding: var(--espaco-lg) 0;
}

.offcanvas-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.offcanvas-nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.offcanvas-nav ul li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.offcanvas-nav ul li a {
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
    padding: 1rem var(--espaco-lg);
    font-size: var(--tam-md);
    font-weight: var(--peso-medio);
    color: rgba(176, 189, 212, 0.85);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--transicao-normal), background var(--transicao-normal), padding-left var(--transicao-normal);
    position: relative;
}

/* BORDA ESQUERDA HOVER */
.offcanvas-nav ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 60%;
    background: var(--azul-claro);
    border-radius: var(--borda-radius-pill);
    transition: transform 0.22s ease;
}

.offcanvas-nav ul li a:hover {
    color: var(--texto-primario);
    background: rgba(66, 111, 166, 0.07);
    padding-left: calc(var(--espaco-lg) + 6px);
}

.offcanvas-nav ul li a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.offcanvas-nav ul li a.ativo {
    color: var(--azul-claro);
}

/* NÚMERO DECORATIVO */
.oc-num {
    font-family: var(--fonte-titulo);
    font-size: var(--tam-xs);
    font-weight: var(--peso-black);
    color: var(--azul-claro);
    opacity: 0.50;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    min-width: 24px;
    transition: opacity var(--transicao-normal);
}

.offcanvas-nav ul li a:hover .oc-num {
    opacity: 1;
}

/* RODAPÉ DO PAINEL */
.offcanvas-rodape {
    padding: var(--espaco-lg);
    border-top: 1px solid rgba(248, 171, 27, 0.12);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-md);
    flex-shrink: 0;
}

/* CTA DO OFF-CANVAS */
.offcanvas-cta {
    width: 100%;
    justify-content: center;
    font-size: var(--tam-xs) !important;
    padding: 0.8rem var(--espaco-md);
}

/* REDES SOCIAIS */
.offcanvas-redes {
    display: flex;
    gap: 0.75rem;
}

.offcanvas-rede-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(248, 171, 27, 0.18);
    border-radius: 50%;
    color: rgba(176, 189, 212, 0.70);
    transition: all var(--transicao-normal);
    text-decoration: none;
}

.offcanvas-rede-link:hover {
    background: rgba(66, 111, 166, 0.12);
    border-color: var(--azul-borda);
    color: var(--texto-primario);
    transform: translateY(-2px);
}

.offcanvas-rede-link svg {
    width: 16px;
    height: 16px;
}

/* TAGLINE NO RODAPÉ DO PAINEL */
.offcanvas-tagline {
    font-size: var(--tam-xs);
    color: rgba(176, 189, 212, 0.30);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    line-height: var(--linha-normal);
}

/* ANIMAÇÃO SEQUENCIAL DOS ITENS (STAGGER) */
.offcanvas-menu.aberto .offcanvas-nav ul li {
    animation: oc-item-entra 0.35s ease both;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(1) {
    animation-delay: 0.08s;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(2) {
    animation-delay: 0.13s;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(3) {
    animation-delay: 0.18s;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(4) {
    animation-delay: 0.23s;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(5) {
    animation-delay: 0.28s;
}

.offcanvas-menu.aberto .offcanvas-nav ul li:nth-child(6) {
    animation-delay: 0.33s;
}

@keyframes oc-item-entra {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

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

/* OCULTA OFF-CANVAS NO DESKTOP */
@media (min-width: 901px) {

    .offcanvas-overlay,
    .offcanvas-menu {
        display: none !important;
    }
}


/* ================================================
   RODAPÉ — DELTA DOMUS ADMINISTRADORA
================================================ */

#rodape {
    background: var(--fundo-secundario);
    position: relative;
    overflow: hidden;
}

/* TRIÂNGULOS DECORATIVOS — CANVAS */
.rodape-triangulos-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Garante que o conteúdo do footer fique acima dos triângulos */
.rodape-acento,
.rodape-corpo,
.rodape-fundo,
.rodape-base {
    position: relative;
    z-index: 1;
}

/* LINHA DE ACENTO DOURADO NO TOPO */
.rodape-acento {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ouro-principal), transparent);
}

/* CORPO PRINCIPAL — GRID 4 COLUNAS */
.rodape-corpo {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 5rem var(--espaco-lg) 4rem;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.3fr 1.5fr;
    gap: 3rem 4rem;
    align-items: start;
}

/* COLUNA GENÉRICA */
.rodape-coluna {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* COLUNA 1 — IDENTIDADE */
.rodape-identidade .rodape-logo img {
    height: 65px;
    width: auto;
}

.rodape-slogan {
    font-size: var(--tam-sm);
    color: var(--texto-secundario);
    line-height: 1.75;
    max-width: 260px;
}

.rodape-endereco {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-style: normal;
    margin-top: 0.25rem;
}

.rodape-endereco-icone {
    color: var(--ouro-principal);
    flex-shrink: 0;
    margin-top: 2px;
}

.rodape-endereco span {
    font-size: var(--tam-sm);
    color: var(--texto-secundario);
    line-height: 1.7;
}

/* TÍTULOS DAS COLUNAS */
.rodape-coluna h4 {
    font-family: var(--fonte-corpo);
    font-size: 0.7rem;
    font-weight: var(--peso-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ouro-principal);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--divisor);
    margin-bottom: 0.25rem;
}

/* LISTAS GERAIS */
.rodape-nav ul,
.rodape-servicos ul,
.rodape-contato ul {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* LINKS DE NAVEGAÇÃO */
.rodape-nav ul li a,
.rodape-servicos ul li a {
    font-size: var(--tam-sm);
    color: var(--texto-secundario);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s, gap 0.2s;
}

.rodape-nav ul li a::before,
.rodape-servicos ul li a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 1px;
    background: var(--ouro-principal);
    opacity: 0;
    transition: opacity 0.2s, width 0.2s;
    flex-shrink: 0;
}

.rodape-nav ul li a:hover,
.rodape-servicos ul li a:hover {
    color: var(--texto-primario);
    gap: 0.7rem;
}

.rodape-nav ul li a:hover::before,
.rodape-servicos ul li a:hover::before {
    opacity: 1;
    width: 8px;
}

/* LINK EXTERNO (com icone) */
.rodape-link-externo {
    color: var(--ouro-claro) !important;
    opacity: 0.8;
}

.rodape-link-externo:hover {
    opacity: 1;
}

/* COLUNA DE CONTATO */
.rodape-contato ul li a {
    font-size: var(--tam-sm);
    color: var(--texto-secundario);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: color 0.2s;
    word-break: break-all;
}

.rodape-contato-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--texto-secundario);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.rodape-contato-icone--whats {
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.2);
    color: #25d366;
}

.rodape-contato ul li a:hover {
    color: var(--texto-primario);
}

.rodape-contato ul li a:hover .rodape-contato-icone {
    background: rgba(248, 171, 27, 0.1);
    border-color: var(--ouro-borda);
    color: var(--ouro-principal);
}

/* CRECI */
.rodape-creci {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(248, 171, 27, 0.08);
    border: 1px solid var(--ouro-borda);
    border-radius: var(--borda-radius-sm);
    margin-top: 0.5rem;
}

.rodape-creci span {
    font-size: 0.7rem;
    font-weight: var(--peso-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ouro-claro);
}

/* REDES SOCIAIS */
.rodape-redes-sociais {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rodape-redes-sociais a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--texto-secundario);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.rodape-redes-sociais a:hover {
    color: var(--azul-profundo);
    background: var(--ouro-principal);
    border-color: var(--ouro-principal);
    transform: translateY(-2px);
}

/* BARRA INFERIOR */
.rodape-barra-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

.rodape-barra-inferior-inner {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 1.25rem var(--espaco-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rodape-copyright {
    font-size: var(--tam-xs);
    color: var(--texto-terciario);
}

.rodape-barra-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: var(--tam-xs);
    color: var(--texto-terciario);
}

.rodape-barra-links a {
    color: var(--texto-terciario);
    text-decoration: none;
    transition: color 0.2s;
}

.rodape-barra-links a:hover {
    color: var(--ouro-claro);
}

.rodape-barra-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.12);
}

/* ================================================
   RESPONSIVIDADE DO RODAPÉ
================================================ */

@media (max-width: 1024px) {
    .rodape-corpo {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 3rem;
        padding: 4rem var(--espaco-lg) 3rem;
    }

    .rodape-identidade {
        grid-column: span 2;
    }

    .rodape-slogan {
        max-width: 380px;
    }
}

@media (max-width: 640px) {
    .rodape-corpo {
        grid-template-columns: 1fr;
        padding: 3rem var(--espaco-sm) 2.5rem;
        gap: 2rem;
    }

    .rodape-identidade {
        grid-column: span 1;
    }

    .rodape-barra-inferior-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 1.25rem var(--espaco-sm);
    }

    .rodape-barra-links {
        flex-direction: column;
        gap: 0.4rem;
    }

    .rodape-barra-sep {
        display: none;
    }
}


/* ================================================
   UTILITÁRIO — VISUALLY HIDDEN (ACESSIBILIDADE)
================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================
   BOTÃO DE ALTERNÂNCIA DE TEMA (CLARO / ESCURO)
================================================ */

.btn-tema {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--fundo-card);
    border: 1px solid var(--ouro-borda);
    border-radius: var(--borda-radius-pill);
    cursor: pointer;
    color: var(--ouro-principal);
    transition: background var(--transicao-normal), border-color var(--transicao-normal), width var(--transicao-normal), height var(--transicao-normal);
    flex-shrink: 0;
}

.btn-tema:hover {
    background: var(--ouro-suave);
    border-color: var(--ouro-principal);
    transform: scale(1.05);
}

.btn-tema svg {
    width: 18px;
    height: 18px;
    transition: opacity var(--transicao-normal), transform var(--transicao-normal);
}

/* ÍCONES — SOMENTE UM VISÍVEL POR VEZ
   Tema CLARO (padrão) → mostra LUA (clique leva ao escuro)
   Tema ESCURO (base/:root) → mostra SOL (clique leva ao claro) */
.btn-tema .icone-sol {
    display: block;
}

.btn-tema .icone-lua {
    display: none;
}

html[data-tema="claro"] .btn-tema .icone-sol {
    display: none;
}

html[data-tema="claro"] .btn-tema .icone-lua {
    display: block;
}

@media (max-width: 900px) {
    .btn-tema {
        width: 34px;
        height: 34px;
        /* garante que permaneça visível ao lado do hambúrguer */
    }
}


/* ================================================
   TEMA CLARO — OVERRIDES DE VARIÁVEIS E COMPONENTES
   (Tema PADRÃO do site — aplicado por estilos.php)
================================================ */

html[data-tema="claro"] {
    --texto-primario: #212121;
    --texto-secundario: #4D5666;
    --texto-terciario: #8A93A3;
    --fundo-principal: #FFFFFF;
    --fundo-secundario: #F5F7FA;
    --fundo-terciario: #EBEFF4;
    --fundo-card: #FFFFFF;
    --fundo-card-hover: #F5F7FA;
    --branco-suave: rgba(0, 0, 0, 0.04);
    --divisor: rgba(30, 42, 56, 0.12);
}

html[data-tema="claro"] #cabecalho.rolado {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(30, 42, 56, 0.10);
}

/* Modo claro no topo: logo branca → links brancos */
html[data-tema="claro"] #menu-principal ul li a,
html[data-tema="claro"] .menu-area-cliente-btn {
    color: #FFFFFF;
}

html[data-tema="claro"] #menu-principal ul li a:hover,
html[data-tema="claro"] #menu-principal ul li a:focus-visible,
html[data-tema="claro"] #menu-principal ul li a.ativo {
    color: var(--ouro-principal);
}

/* Modo claro após scroll: logo normal → links escuros */
html[data-tema="claro"] #cabecalho.rolado #menu-principal ul li a,
html[data-tema="claro"] #cabecalho.rolado .menu-area-cliente-btn {
    color: var(--texto-secundario);
}

html[data-tema="claro"] #cabecalho.rolado #menu-principal ul li a:hover,
html[data-tema="claro"] #cabecalho.rolado #menu-principal ul li a:focus-visible,
html[data-tema="claro"] #cabecalho.rolado #menu-principal ul li a.ativo {
    color: var(--ouro-escuro);
}

/* TROCA DE LOGO POR SCROLL + TEMA
   Padrão (topo da página, ambos os temas): logo branca (logoFooter)
   Modo claro + scroll: logo colorida normal
   Modo escuro + scroll: continua logo branca */
.logo-tema-claro {
    display: none;
}

.logo-tema-escuro {
    display: block;
}

/* Modo claro no topo: mantém logo branca */
html[data-tema="claro"] .logo-tema-claro {
    display: none;
}

html[data-tema="claro"] .logo-tema-escuro {
    display: block;
}

/* Modo claro após scroll: troca para logo colorida */
html[data-tema="claro"] #cabecalho.rolado .logo-tema-claro {
    display: block;
}

html[data-tema="claro"] #cabecalho.rolado .logo-tema-escuro {
    display: none;
}

/* Rodapé modo claro: logo colorida (fundo claro) */
html[data-tema="claro"] .rodape-logo .logo-tema-claro {
    display: block !important;
}

html[data-tema="claro"] .rodape-logo .logo-tema-escuro {
    display: none !important;
}

/* Rodapé modo claro: ícones de redes sociais */
html[data-tema="claro"] .rodape-redes-sociais a {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}

/* DROPDOWN ÁREA DO CLIENTE — painel sempre escuro, texto claro fixo no tema claro */
html[data-tema="claro"] .dropdown-area-cliente li a {
    color: rgba(232, 236, 244, 0.85);
}

html[data-tema="claro"] .dropdown-area-cliente li a:hover {
    color: #FFFFFF;
}

/* CARDS DE CONTATO */
html[data-tema="claro"] .contato-canal,
html[data-tema="claro"] .contato-horarios {
    border-color: rgba(0, 0, 0, 0.07);
}

html[data-tema="claro"] .contato-endereco {
    border-color: rgba(0, 0, 0, 0.07);
    border-left-color: var(--ouro-principal);
}

/* FORMULÁRIO CLARO */
html[data-tema="claro"] .contato-formulario {
    background: #FFFFFF;
}

html[data-tema="claro"] .form-campo input,
html[data-tema="claro"] .form-campo select,
html[data-tema="claro"] .form-campo textarea {
    background: var(--fundo-principal);
    border-color: rgba(0, 0, 0, 0.12);
}

/* CARDS DE BLOG */
html[data-tema="claro"] .card-post {
    border-color: rgba(0, 0, 0, 0.07);
}


/* ================================================
   BOTÃO FLUTUANTE — WHATSAPP
================================================ */

#btn-whats-flutuante {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

#btn-whats-flutuante:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .6);
}

#btn-whats-flutuante:focus-visible {
    outline: 3px solid #25d366;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    #btn-whats-flutuante {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 50px;
        height: 50px;
    }
}

/* ================================================
   BANNER DE COOKIES — ESTILOS
================================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    padding: var(--espaco-md) var(--espaco-lg);
    background: var(--fundo-secundario);
    border-top: 1px solid var(--divisor);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, .25);
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.cookie-banner.visivel {
    transform: translateY(0);
}

.cookie-banner-inner {
    max-width: var(--largura-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espaco-md);
}

.cookie-banner-icone {
    color: var(--ouro-principal);
    flex-shrink: 0;
}

.cookie-banner-texto strong {
    display: block;
    font-size: var(--tam-sm);
    font-weight: var(--peso-semibold);
    color: var(--texto-primario);
    margin-bottom: .25rem;
}

.cookie-banner-texto p {
    font-size: var(--tam-xs);
    color: var(--texto-secundario);
    line-height: var(--linha-normal);
    margin: 0;
}

.cookie-link {
    color: var(--ouro-principal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-link:hover {
    color: var(--ouro-claro);
}

.cookie-banner-acoes {
    display: flex;
    gap: var(--espaco-xs);
    flex-shrink: 0;
}

.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.1rem;
    border-radius: var(--borda-radius-pill);
    font-size: var(--tam-xs);
    font-weight: var(--peso-semibold);
    font-family: var(--fonte-corpo);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--transicao-rapida), color var(--transicao-rapida),
                border-color var(--transicao-rapida), transform var(--transicao-rapida);
    white-space: nowrap;
}

.cookie-btn:active {
    transform: scale(.97);
}

.cookie-btn--primario {
    background: var(--ouro-principal);
    color: var(--azul-profundo);
    border-color: var(--ouro-principal);
}

.cookie-btn--primario:hover {
    background: var(--ouro-claro);
    border-color: var(--ouro-claro);
}

.cookie-btn--secundario {
    background: transparent;
    color: var(--texto-secundario);
    border-color: var(--divisor);
}

.cookie-btn--secundario:hover {
    border-color: var(--ouro-borda);
    color: var(--texto-primario);
}

/* MODO CLARO */
html[data-tema="claro"] .cookie-banner {
    background: var(--fundo-secundario);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, .10);
}

html[data-tema="claro"] .cookie-btn--secundario {
    border-color: rgba(0, 0, 0, .15);
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .cookie-banner {
        padding: var(--espaco-md);
    }

    .cookie-banner-inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .cookie-banner-acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .cookie-banner-inner {
        grid-template-columns: 1fr;
    }

    .cookie-banner-icone {
        display: none;
    }

    .cookie-banner-acoes {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
    }
}

/* ================================================
   TEMA CLARO — SEÇÃO DEPOIMENTOS
================================================ */

html[data-tema="claro"] #depoimentos-preview {
    background: var(--fundo-secundario);
}

html[data-tema="claro"] .dep-carrossel::before {
    background: linear-gradient(to right, var(--fundo-secundario) 0%, transparent 100%);
}

html[data-tema="claro"] .dep-carrossel::after {
    background: linear-gradient(to left, var(--fundo-secundario) 0%, transparent 100%);
}

html[data-tema="claro"] .dep-slide {
    background: #FFFFFF;
    border-color: rgba(30, 42, 56, 0.12);
    box-shadow: 0 2px 12px rgba(30, 42, 56, 0.06);
}

html[data-tema="claro"] .dep-slide--ativo {
    border-color: var(--azul-claro);
    box-shadow: 0 8px 32px rgba(66, 111, 166, 0.15);
}

html[data-tema="claro"] .dep-slide-footer {
    border-top-color: rgba(30, 42, 56, 0.10);
}

html[data-tema="claro"] .dep-modal {
    background: #FFFFFF;
    border-color: rgba(30, 42, 56, 0.12);
    box-shadow: 0 16px 48px rgba(30, 42, 56, 0.15);
}

html[data-tema="claro"] .dep-modal-footer {
    border-top-color: rgba(30, 42, 56, 0.10);
}


/* ================================================
   TRANSIÇÕES DE PÁGINA — @view-transition
================================================ */

/*
 * Fundo do html garante que qualquer transparência durante a transição
 * mostre a cor do site, nunca branco.
 */
html {
    background-color: #0B1B2D;
}
html[data-tema="claro"] {
    background-color: #F5F7FA;
}

@view-transition {
    navigation: auto;
}

/*
 * Página que SAI: desaparece rápido (ease-in 200ms) com leve escala —
 * sai do caminho antes de a nova aparecer.
 * Página que ENTRA: sobe suavemente de 14px com ease-out 440ms —
 * começa imediato mas desacelera elegante ao pousar.
 */
::view-transition-old(root) {
    animation: 200ms cubic-bezier(0.4, 0, 1, 1) both vt-saida;
}

::view-transition-new(root) {
    animation: 440ms cubic-bezier(0, 0, 0.2, 1) both vt-entrada;
}

@keyframes vt-saida {
    to { opacity: 0; transform: scale(0.99); }
}

@keyframes vt-entrada {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}