/* =========================================================================
   Holanda Advocacia e Assessoria Juridica
   Paleta extraida do cartao de visita: creme + dourado + grafite
   ========================================================================= */

:root {
    --creme:        #F3ECE0;
    --creme-alto:   #FBF7F0;
    --creme-baixo:  #E8DFCF;
    --borda:        #DCCFB4;

    --dourado:       #B8935A;
    --dourado-claro: #D4AF77;
    --dourado-escuro:#8C6A3B;

    --grafite:      #2B2620;
    --grafite-suave:#5C5346;

    --whats:        #25D366;
    --whats-escuro: #1EA952;

    --raio: 14px;
    --transicao: .25s ease;
}

* { scroll-behavior: smooth; }
html { overflow-x: hidden; }

body {
    background: var(--creme);
    color: var(--grafite);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

a { text-decoration: none; }

.texto-ouro {
    background: linear-gradient(135deg, var(--dourado-escuro) 0%, var(--dourado-claro) 50%, var(--dourado) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------- Botoes --------------------------------- */
.btn {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    border-radius: 50px;
    padding: .7rem 1.7rem;
    transition: var(--transicao);
    border: none;
}
.btn-lg { padding: .95rem 2.2rem; font-size: 1.02rem; }

.btn-whats {
    background: linear-gradient(135deg, var(--whats) 0%, var(--whats-escuro) 100%);
    color: #06210F;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .25);
}
.btn-whats:hover { color: #06210F; transform: translateY(-2px); }

.btn-contorno-ouro {
    border: 1.5px solid var(--dourado);
    color: var(--dourado-escuro);
    background: transparent;
}
.btn-contorno-ouro:hover {
    background: var(--dourado);
    color: var(--creme-alto);
    transform: translateY(-2px);
}

/* ------------------------------- Navbar --------------------------------- */
.navbar-holanda {
    background: var(--creme-baixo);
    border-bottom: 1px solid var(--borda);
    padding: 1.1rem 0;
    transition: var(--transicao);
}
.navbar-holanda.rolada {
    background: var(--creme-baixo);
    box-shadow: 0 2px 14px rgba(43, 38, 32, .12);
}
.navbar-holanda .nav-link {
    color: var(--grafite);
    font-weight: 500;
    margin: 0 .6rem;
}
.navbar-holanda .nav-link.ativo,
.navbar-holanda .nav-link:hover { color: var(--dourado-escuro); }

/* O fundo mais escuro da navbar deixa a logo (dourado claro/fino) com
   pouco contraste - uma sombra sutil reforca as bordas sem mudar as
   cores originais da marca. */
.navbar-holanda .logo-img {
    height: 48px;
    filter: drop-shadow(0 1px 1px rgba(43, 38, 32, .45));
}

/* -------------------------------- Hero ----------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-top: 6rem;
    background: linear-gradient(160deg, var(--creme-alto) 0%, var(--creme) 60%, var(--creme-baixo) 100%);
}
/* Logo grande e clareada ao fundo, preenchendo o hero sem competir com o
   texto por cima (pedido da cliente: sentia o hero muito vazio). */
.hero-marca-fundo {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(720px, 70%) auto;
    opacity: .16;
    pointer-events: none;
}
.hero-conteudo { position: relative; z-index: 1; text-align: center; }
.hero-oab-linha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--dourado-escuro);
    font-weight: 600;
    letter-spacing: .02em;
    font-size: .95rem;
    margin-bottom: 1.2rem;
}
.hero-texto {
    font-size: 1.05rem;
    color: var(--grafite-suave);
    max-width: 42rem;
    margin: 0 auto 2rem;
}
.hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* --------------------------- Faixa diferenciais -------------------------- */
.faixa-diferenciais { padding: 3rem 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.diferencial { text-align: center; padding: 0 1.2rem; }
.diferencial i { font-size: 1.8rem; color: var(--dourado); margin-bottom: .6rem; }
.diferencial h3 { font-size: 1rem; margin-bottom: .3rem; }
.diferencial p { font-size: .88rem; color: var(--grafite-suave); margin: 0; }

/* Une os cards da faixa de destaques numa unica tira, com divisorias
   sutis, em vez de itens soltos - so a partir do breakpoint onde ficam
   todos numa linha so (no mobile, empilhados 2 a 2, a divisoria nao
   faz sentido). */
@media (min-width: 992px) {
    .linha-diferenciais > [class^="col-"]:not(:first-child) .diferencial,
    .linha-diferenciais > [class*=" col-"]:not(:first-child) .diferencial {
        border-left: 1px solid var(--borda);
    }
}

/* --------------------------------- Secao --------------------------------- */
.secao { padding: 6rem 0; }
.secao-escura { background: var(--creme-baixo); }
.secao-cabecalho { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.secao-etiqueta {
    display: block;
    color: var(--dourado-escuro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85rem;
    margin-bottom: .5rem;
}
.secao-titulo { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .5rem; }
.secao-titulo.text-start { text-align: left; }
.secao-descricao { color: var(--grafite-suave); }
.sobre-texto { color: var(--grafite-suave); margin-bottom: 1rem; }

/* "Sobre": a foto flutua a direita e o texto (titulo + paragrafos)
   contorna a curva do circulo e segue por baixo dela. */
.sobre-conteudo { max-width: 54rem; margin-inline: auto; }
.sobre-conteudo::after { content: ""; display: block; clear: both; }

.sobre-foto {
    float: right;
    width: 260px;
    margin: .35rem 0 1rem 2rem;
    shape-outside: circle(50%);
    shape-margin: 1rem;
}
.sobre-foto .avatar-advogada,
.sobre-foto .avatar-advogada-foto { margin: 0; }

/* Primeiro paragrafo do "Sobre" como linha de abertura, um pouco maior. */
.sobre-texto-lead {
    font-size: 1.12rem;
    color: var(--grafite);
}

@media (max-width: 767.98px) {
    .sobre-foto {
        float: none;
        width: auto;
        margin: 0 auto 1.5rem;
        display: flex;
        justify-content: center;
    }
}

/* ------------------------------ Avatar -------------------------------- */
.avatar-advogada {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dourado-escuro), var(--dourado-claro));
    box-shadow: 0 20px 50px rgba(140, 106, 59, .3);
}
.avatar-advogada span {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--creme-alto);
}
.avatar-advogada-foto {
    width: 260px;
    height: 260px;
    padding: .4rem;
    background: linear-gradient(135deg, var(--dourado-escuro), var(--dourado-claro));
    overflow: hidden;
}
.avatar-advogada-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ------------------------------ Card area ------------------------------- */
.card-area {
    background: var(--creme-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 2rem;
    height: 100%;
    transition: var(--transicao);
}
.card-area:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(43, 38, 32, .1); }
.card-area-icone { font-size: 1.8rem; color: var(--dourado); margin-bottom: 1rem; }
.card-area h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.card-area p { color: var(--grafite-suave); font-size: .92rem; margin: 0; }

/* ----------------------------- Depoimentos ------------------------------- */
.card-depoimento {
    background: var(--creme-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 2rem;
    height: 100%;
}
.card-depoimento p { font-style: italic; color: var(--grafite-suave); }
.autor cite { font-weight: 600; font-style: normal; color: var(--grafite); }

/* ------------------------------- Contato --------------------------------- */
.item-contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .7rem;
    height: 100%;
    padding: 2rem 1.4rem;
    background: var(--creme-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--grafite);
    transition: var(--transicao);
}
.item-contato:hover { border-color: var(--dourado); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(43, 38, 32, .1); }
.item-contato i { font-size: 1.8rem; color: var(--dourado); }
.item-contato.destaque { border-color: var(--whats); }
.item-contato.destaque i { color: var(--whats-escuro); }
.item-rotulo { display: block; font-size: .78rem; color: var(--grafite-suave); text-transform: uppercase; letter-spacing: .04em; }
.item-contato strong { color: var(--grafite); }

/* Bloco do formulario (endereco+mapa / formulario) ganha respiro proprio e
   um cartao visual, para nao ficar amontoado logo abaixo dos canais
   rapidos de contato - mesma altura de secao-cabecalho, so que menor. */
.bloco-formulario-contato { margin-top: 4rem; }
.secao-cabecalho-menor { margin-bottom: 2rem; }
.subsecao-titulo { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0; }

.cartao-formulario-contato {
    background: var(--creme-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 2rem;
    height: 100%;
}

.info-endereco { margin-bottom: 1.5rem; }
.info-endereco h3 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.info-endereco h3 i { color: var(--dourado); }
.info-endereco p { color: var(--grafite-suave); margin: 0; }

.mapa-embed {
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
}
.mapa-embed iframe { width: 100%; height: 260px; border: 0; display: block; }

/* Honeypot: escondido fora da tela (nao display:none) para nao ser
   ignorado por bots que checam a propriedade display antes de preencher. */
.campo-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.campo-formulario {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--creme-alto);
    border: 1px solid var(--borda);
    border-radius: 10px;
    color: var(--grafite);
    font-family: 'Inter', sans-serif;
}
.campo-formulario:focus {
    outline: none;
    border-color: var(--dourado);
    box-shadow: 0 0 0 3px rgba(184, 147, 90, .15);
}
textarea.campo-formulario { resize: vertical; min-height: 120px; }

.campo-consentimento { font-size: .85rem; color: var(--grafite-suave); }
.campo-consentimento a { color: var(--dourado-escuro); }

.aviso-formulario {
    padding: .9rem 1.2rem;
    border-radius: var(--raio);
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.aviso-sucesso { background: rgba(37, 211, 102, .15); border: 1px solid rgba(37, 211, 102, .4); color: #145c30; }
.aviso-erro { background: rgba(184, 74, 58, .12); border: 1px solid rgba(184, 74, 58, .4); color: #7a2e21; }

/* ---------------------------- Chamada final ------------------------------ */
.chamada-final {
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--dourado-escuro), var(--dourado));
    color: var(--creme-alto);
}
.chamada-final h2 { color: var(--creme-alto); margin-bottom: .6rem; }
.chamada-final .texto-ouro {
    background: none; -webkit-text-fill-color: var(--grafite); color: var(--grafite);
}
.chamada-final p { margin-bottom: 2rem; opacity: .9; }

/* --------------------------------- Rodape -------------------------------- */
.rodape { background: var(--grafite); color: var(--creme-baixo); padding: 4rem 0 2rem; }
.rodape-texto { color: #C9BFAE; font-size: .92rem; max-width: 24rem; }
.rodape-titulo { color: var(--dourado-claro); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.rodape-lista { list-style: none; padding: 0; margin: 0; }
.rodape-lista li { margin-bottom: .6rem; font-size: .92rem; }
.rodape-lista a { color: #C9BFAE; }
.rodape-lista a:hover { color: var(--dourado-claro); }
.rodape-divisor { border-color: rgba(255,255,255,.1); margin: 2rem 0 1.2rem; }
.rodape small { color: #9C9280; }
.link-painel { color: #6b6255; opacity: .5; font-size: .95rem; transition: var(--transicao); }
.link-painel:hover { opacity: 1; color: var(--dourado-escuro); }

/* ------------------------------- Pagina erro ------------------------------ */
.pagina-erro { min-height: 80vh; display: flex; align-items: center; text-align: center; }
.pagina-erro .codigo { font-family: 'Playfair Display', serif; font-size: 6rem; font-weight: 800; }

/* --------------------------- Revelar ao rolar ----------------------------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: translateY(0); }