/* ==========================================================================
   CORE VARIABLES - TEMA PADRÃO (VERDE FRESCO & AMARELO)
   ========================================================================== */

:root {
    --dourado: #F4C430;
    --dourado-hover: #D4A626;
    --petroleo: #1B4332;
    --petroleo-escuro: #1a3f2e;
    --petroleo-claro: #2D7F56;
    --branco: #FFFFFF;
    --cinza: #CCCCCC;
    --transition: 0.3s ease;
    --margem-secao: 80px;
    --margem-secao-mobile: 40px;
}

/* As classes .theme-* sobrescrevem esses valores em runtime */

/* ==========================================================================
   GLOBAL
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--petroleo);
    font-family: 'Open Sans', sans-serif;
    color: var(--branco);
}

h1, h2, h3 {
    margin: 0;
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    color: var(--dourado);
    margin-bottom: 25px;
}

section {
    padding: var(--margem-secao) 60px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 40px;
    background-color: var(--petroleo-escuro);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topo-esquerda {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo {
    height: 60px;
    border-radius: 20px;
}

.topo-titulo {
    display: flex;
    flex-direction: column;
}

.topo-nome {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topo-subtitulo {
    font-size: 0.8rem;
    opacity: 0.7;
}

.menu {
    display: flex;
    align-items: center;
}

.menu a {
    margin: 0 12px;
    text-decoration: none;
    color: var(--branco);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    padding-bottom: 4px;
}

.menu a:hover {
    color: var(--dourado);
    border-bottom: 1px solid var(--dourado);
}

.menu .destaque {
    color: var(--dourado);
}

/* Links gerais */
a {
    color: var(--dourado);
    transition: var(--transition);
}

a:hover {
    color: var(--dourado-hover);
}

/* Theme switcher */

.theme-switcher-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.8rem;
}

.theme-switcher-wrapper label {
    opacity: 0.7;
}

.theme-switcher {
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.25);
    color: var(--branco);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.theme-switcher:hover {
    border-color: var(--dourado);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;
    background-image: url("../img/foto_Capa.jpg");
    background-size: cover;
    background-position: center 70%;
    padding: 140px 80px 100px 80px;
    min-height: 520px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.hero-conteudo {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
}

.hero-texto {
    max-width: 620px;
    margin-left: 10px;
}

.hero-texto h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 3.4rem;
    color: var(--dourado);
    margin-bottom: 15px;
}

.oab {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 6px;
}

.especialidade {
    margin-bottom: 28px;
    font-size: 1.05rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.botao-gold {
    display: inline-block;
    background-color: var(--dourado);
    color: var(--petroleo);
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: var(--transition);
    margin-top: 5px;
}

.botao-gold:hover {
    background-color: var(--dourado-hover);
    color: var(--branco);
}

/* ==========================================================================
   REDES SOCIAIS
   ========================================================================== */

.redes-sociais {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.redes-sociais a {
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Normalização global dos ícones */
.redes-sociais img,
.contato-redes img,
.rodape-social img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 🔑 mantém proporção */
    border-radius: 10px;
    transition: transform 0.25s ease, filter 0.25s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.redes-sociais img:hover,
.contato-redes img:hover,
.rodape-social img:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

/* ==========================================================================
   SEÇÕES INTERNAS
   ========================================================================== */

.sobre,
.areas,
.especialidades {
    background-color: var(--petroleo-claro);
    padding: 65px 55px;
    border-radius: 24px;
    margin: 70px auto;
    width: 85%;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
}

.areas ul {
    padding-left: 20px;
    line-height: 1.9rem;
}

/* ==========================================================================
   PREÇOS E SERVIÇOS
   ========================================================================== */

.preco-box {
    display: flex;
    gap: 30px;
    margin: 40px 0;
    justify-content: center;
    flex-wrap: wrap;
}

.preco-item {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(15, 51, 54, 0.3));
    padding: 30px 40px;
    border-radius: 20px;
    border: 2px solid var(--dourado);
    text-align: center;
    min-width: 280px;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.preco-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25);
}

.preco-item h3 {
    color: var(--dourado);
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-family: 'Playfair Display', serif;
}

.preco-destaque {
    font-size: 2.2rem;
    color: var(--dourado);
    font-weight: bold;
    margin: 10px 0;
}

.preco-desc {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 8px;
}

.servicos-lista {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.servicos-lista li {
    padding: 15px 20px;
    margin: 12px 0;
    background: rgba(212, 175, 55, 0.08);
    border-left: 4px solid var(--dourado);
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.servicos-lista li:hover {
    background: rgba(212, 175, 55, 0.15);
    padding-left: 25px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.12);
}

.emoji {
    font-size: 1.4rem;
    min-width: 30px;
    display: inline-block;
}

/* ==========================================================================
   SLOGAN DESTAQUE
   ========================================================================== */

.slogan-destaque {
    text-align: center;
    margin: 30px 0;
    padding: 25px 30px;
    background: linear-gradient(135deg, var(--petroleo-claro), var(--petroleo));
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
}

.slogan-texto {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--dourado);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

.slogan-descricao {
    font-size: 1rem;
    color: var(--branco);
    margin: 12px 0 0 0;
    line-height: 1.5;
}

/* ==========================================================================
   PLANOS DE SERVIÇO - 3 COLUNAS
   ========================================================================== */

.planos-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 50px 0;
}

.plano-card {
    background: linear-gradient(135deg, rgba(15, 51, 54, 0.5), rgba(212, 175, 55, 0.05));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.plano-card:hover {
    transform: translateY(-8px);
    border-color: var(--dourado);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.2);
}

.plano-destaque {
    border: 2px solid var(--dourado);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(15, 51, 54, 0.4));
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.plano-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dourado);
    color: var(--petroleo);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.plano-header {
    text-align: center;
    margin-bottom: 25px;
}

.plano-header h3 {
    color: var(--dourado);
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}

.plano-frequencia {
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
}

.plano-preco {
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: rgba(212, 175, 55, 0.08);
    border-radius: 15px;
    border-left: 4px solid var(--dourado);
}

.plano-preco .preco-destaque {
    font-size: 2rem;
    color: var(--dourado);
    margin: 0;
}

.plano-preco .preco-desc {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 5px 0 0 0;
}

.plano-economia {
    text-align: center;
    color: var(--dourado);
    font-weight: bold;
    font-size: 0.95rem;
    margin: 15px 0 25px 0;
}

.plano-card h4 {
    color: var(--dourado);
    font-size: 1.05rem;
    margin: 25px 0 15px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

.servicos-lista-plano {
    list-style: none;
    padding: 0;
    margin: 15px 0 30px 0;
    flex-grow: 1;
}

.servicos-lista-plano li {
    padding: 12px 0;
    margin: 10px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.servicos-lista-plano li:last-child {
    border-bottom: none;
}

.servicos-lista-plano li:hover {
    padding-left: 8px;
    opacity: 1;
}

.servicos-lista-plano .emoji {
    font-size: 1.3rem;
    min-width: 25px;
}

.botao-plano {
    display: inline-block;
    background: linear-gradient(135deg, var(--dourado), #c9a227);
    color: var(--petroleo);
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.botao-plano:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    color: var(--petroleo);
}

.botao-destaque {
    background: linear-gradient(135deg, var(--dourado), #e8c547);
    font-size: 1rem;
    padding: 16px 32px;
}

/* Responsivo */
@media (max-width: 1200px) {
    .planos-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plano-destaque {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
        transform: scale(1.02);
    }
}

@media (max-width: 768px) {
    .planos-container {
        grid-template-columns: 1fr;
    }
    
    .plano-destaque {
        grid-column: 1;
        max-width: 100%;
        transform: scale(1);
    }
}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */

.formulario {
    display: flex;
    justify-content: center;
    padding: 110px 0;
}

.form-box {
    background: var(--branco);
    color: var(--petroleo);
    width: 460px;
    padding: 50px;
    border-radius: 28px;
    border-left: 6px solid var(--dourado);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.form-box h2 {
    color: var(--petroleo);
}

.microcopy {
    font-size: 0.9rem;
    margin-bottom: 18px;
    opacity: 0.8;
}

.form-contato {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-contato input,
.form-contato textarea {
    padding: 14px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    background-color: #ffffff;
}

.form-contato input:focus,
.form-contato textarea:focus {
    outline: 2px solid var(--dourado);
}

/* SELECT PADRÃO */

.campo-select {
    padding: 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-size: 1rem;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    transition: 0.3s ease;
}

/* GOLD THEME */

.gold-select {
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(135deg, #ffffff, #fafafa);
}

.gold-select:hover {
    border-color: var(--dourado);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

.gold-select:focus {
    outline: none;
    border-color: var(--dourado);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* Animação suave ao abrir (suporte parcial) */

select {
    transition: all 0.25s ease;
}

/* OPTGROUP */

optgroup {
    font-weight: bold;
    color: var(--dourado);
    background-color: #f6f6f6;
}

/* ==========================================================================
   WHATSAPP FIXO
   ========================================================================== */

.whats-flutuante img {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.whats-flutuante img:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
    background-color: var(--petroleo-escuro);
    padding: 60px 60px 25px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 100px;
}

.rodape-conteudo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 50px;
}

.rodape-info {
    max-width: 450px;
}

.rodape-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    color: var(--dourado);
    margin-bottom: 10px;
}

.rodape-info p {
    margin: 6px 0;
    opacity: 0.9;
}

.rodape-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.rodape-copy {
    text-align: center;
    color: var(--cinza);
    margin-top: 45px;
    font-size: 0.9rem;
    opacity: 0.8;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   THEMES – PALETAS ORIGINAIS DO PROJETO
   ========================================================================== */

/* 1) Tema padrão já está em :root e .theme-default */

/* 2) Azul Supremo */
:root.theme-azul-supremo {
    --dourado: #C8A24E;
    --dourado-hover: #a68540;
    --petroleo: #0A2342;
    --petroleo-escuro: #071728;
    --petroleo-claro: #123A63;
    --branco: #FFFFFF;
    --cinza: #D9D9D9;
}

/* 3) Preto Vermelho Elegante */
:root.theme-preto-vermelho {
    --dourado: #B40000;
    --dourado-hover: #8d0000;
    --petroleo: #0A0A0A;
    --petroleo-escuro: #000000;
    --petroleo-claro: #1A1A1A;
    --branco: #FFFFFF;
    --cinza: #BFBFBF;
}

/* 4) Verde Justiça */
:root.theme-verde-justica {
    --dourado: #4FB36A;
    --dourado-hover: #3a8d52;
    --petroleo: #0F2F2F;
    --petroleo-escuro: #0B2222;
    --petroleo-claro: #154040;
    --branco: #FFFFFF;
    --cinza: #D0D0D0;
}

/* 5) Bordô Aristocrata */
:root.theme-bordo-aristocrata {
    --dourado: #D4AF8A;
    --dourado-hover: #b89472;
    --petroleo: #2C0E14;
    --petroleo-escuro: #1E090D;
    --petroleo-claro: #40141C;
    --branco: #FFFFFF;
    --cinza: #D6D6D6;
}

/* 6) Cinza Platina Royal */
:root.theme-cinza-platina {
    --dourado: #2F6FED;
    --dourado-hover: #2358c0;
    --petroleo: #1B1F23;
    --petroleo-escuro: #131619;
    --petroleo-claro: #2A2F33;
    --branco: #FFFFFF;
    --cinza: #E0E0E0;
}

/* 7) Creme Ouro */
:root.theme-creme-ouro {
    --dourado: #B89B35;
    --dourado-hover: #9c832d;
    --petroleo: #F1ECE2;
    --petroleo-escuro: #E3DDD1;
    --petroleo-claro: #FFFFFF;
    --branco: #000000;
    --cinza: #4F4F4F;
}

/* 8) Branco Azul Minimalista */
:root.theme-branco-azul {
    --dourado: #102542;
    --dourado-hover: #0d1e35;
    --petroleo: #FFFFFF;
    --petroleo-escuro: #F5F5F5;
    --petroleo-claro: #FFFFFF;
    --branco: #000000;
    --cinza: #7A7A7A;
}

/* ==========================================================================
   THEMES – 10 NOVOS TEMAS PREMIUM
   ========================================================================== */

/* 9) Azul Marinho Clássico */
:root.theme-azul-marinho-classico {
    --dourado: #C6A667;
    --dourado-hover: #b18f4f;
    --petroleo: #0B1E33;
    --petroleo-escuro: #081626;
    --petroleo-claro: #132D4A;
    --branco: #FFFFFF;
    --cinza: #D1D1D1;
}

/* 10) Preto Champagne Luxo */
:root.theme-preto-champagne {
    --dourado: #E9D8A6;
    --dourado-hover: #d4c28e;
    --petroleo: #000000;
    --petroleo-escuro: #0C0C0C;
    --petroleo-claro: #1A1A1A;
    --branco: #FFFFFF;
    --cinza: #C0C0C0;
}

/* 11) Azul Petróleo Moderno */
:root.theme-azul-petroleo {
    --dourado: #9FB8C9;
    --dourado-hover: #89a6ba;
    --petroleo: #0E2A32;
    --petroleo-escuro: #081D23;
    --petroleo-claro: #1C4650;
    --branco: #FFFFFF;
    --cinza: #CFD8DC;
}

/* 12) Verde Oliva Jurídico */
:root.theme-verde-oliva {
    --dourado: #C0B283;
    --dourado-hover: #a99a6c;
    --petroleo: #3A4235;
    --petroleo-escuro: #2D3229;
    --petroleo-claro: #4C5746;
    --branco: #FFFFFF;
    --cinza: #D8D8D8;
}

/* 13) Marrom Amadeirado Premium */
:root.theme-marrom-premium {
    --dourado: #BAA378;
    --dourado-hover: #a38d64;
    --petroleo: #3E2C20;
    --petroleo-escuro: #2D1F17;
    --petroleo-claro: #513B2A;
    --branco: #FFFFFF;
    --cinza: #D7D3CF;
}

/* 14) Grafite Minimalista */
:root.theme-grafite-minimalista {
    --dourado: #4F83CC;
    --dourado-hover: #3c68a1;
    --petroleo: #1B1E21;
    --petroleo-escuro: #141618;
    --petroleo-claro: #2B2F33;
    --branco: #FFFFFF;
    --cinza: #C8C8C8;
}

/* 15) Vinho Magistrado */
:root.theme-vinho-magistrado {
    --dourado: #D4C2A6;
    --dourado-hover: #bfa98d;
    --petroleo: #3A0A1A;
    --petroleo-escuro: #2B0714;
    --petroleo-claro: #4E0F24;
    --branco: #FFFFFF;
    --cinza: #D6D6D6;
}

/* 16) Azul Royal Executivo */
:root.theme-azul-royal {
    --dourado: #F0D98C;
    --dourado-hover: #d4bf78;
    --petroleo: #0F1C52;
    --petroleo-escuro: #0A133A;
    --petroleo-claro: #19276E;
    --branco: #FFFFFF;
    --cinza: #D1D1D1;
}

/* 17) Preto & Dourado Premium */
:root.theme-preto-dourado-premium {
    --dourado: #D4AF37;
    --dourado-hover: #b8922f;
    --petroleo: #0A0A0A;
    --petroleo-escuro: #000000;
    --petroleo-claro: #1A1A1A;
    --branco: #FFFFFF;
    --cinza: #E0E0E0;
}

/* 18) Areia & Marinho Clean */
:root.theme-areia-marinho {
    --dourado: #406E8E;
    --dourado-hover: #345a73;
    --petroleo: #EFE8DA;
    --petroleo-escuro: #E2D9C5;
    --petroleo-claro: #FFFFFF;
    --branco: #333333;
    --cinza: #6A6A6A;
}
/* ==========================================================================
   FIM DO ARQUIVO
   ========================================================================== */