/* =========================================================
   CORES
========================================================= */

:root {
    --preto: #090909;
    --preto-suave: #111111;
    --grafite: #191919;
    --grafite-claro: #242424;

    --vinho: #7d1830;
    --vinho-claro: #a52a48;
    --vinho-escuro: #541020;

    --dourado: #c6a15b;
    --dourado-claro: #e0c27d;

    --off-white: #f7f5f2;
    --branco: #ffffff;

    --cinza: #9b9b9b;
    --cinza-claro: #d4d4d4;

    --borda: #303030;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--branco);
    background: var(--preto);
    line-height: 1.7;
    overflow-x: hidden;
}

body.menu-aberto {
    overflow: hidden;
}

::selection {
    background: var(--vinho);
    color: white;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

section {
    position: relative;
    padding: 120px 8%;
}

.container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}


/* =========================================================
   TÍTULOS
========================================================= */

.subtitulo {
    display: flex;
    align-items: center;
    gap: 15px;

    color: var(--dourado);

    text-transform: uppercase;
    letter-spacing: 4px;

    font-size: .72rem;
    font-weight: 600;

    margin-bottom: 18px;
}

.subtitulo::before {
    content: "";

    width: 32px;
    height: 1px;

    background: var(--dourado);
}

.titulo-secao {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    line-height: 1;

    font-weight: 500;
}

.texto-cinza {
    color: #666;
}

.linha {
    width: 65px;
    height: 1px;

    margin: 30px 0;

    background: var(--vinho);
}


/* =========================================================
   PROGRESSO
========================================================= */

.progresso {
    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    z-index: 99999;

    background:
        linear-gradient(
            90deg,
            var(--vinho),
            var(--dourado)
        );
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.65,.3,1);
}

.reveal.esquerda {
    transform: translateX(-55px);
}

.reveal.direita {
    transform: translateX(55px);
}

.reveal.ativo {
    opacity: 1;
    transform: translate(0, 0);
}


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

header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 5000;

    transition: .35s;
}

header.rolagem {
    background: rgba(9, 9, 9, .94);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 35px rgba(0,0,0,.3);

    border-bottom:
        1px solid rgba(198,161,91,.15);
}

nav {
    height: 95px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transition: height .3s;
}

header.rolagem nav {
    height: 75px;
}


/* =========================================================
   HEADER DESKTOP
   Mantém logo e menu na área escura
========================================================= */

@media (min-width: 1051px) {

    nav {
        width: 53%;
        max-width: none;
        margin: 0;
        padding: 0 2.2% 0 4.2%;
        justify-content: flex-end;
    }

    .menu {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .menu a {
        font-size: .61rem;
        letter-spacing: .75px;
        white-space: nowrap;
    }

    .menu-contato {
        padding: 11px 15px;
    }
}



/* =========================================================
   LOGO
========================================================= */

.logo {
    position: relative;
    z-index: 10;

    flex-shrink: 0;

    color: white;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.6rem;
    line-height: 1;
    font-weight: 600;
}

.logo span {
    display: block;

    margin-top: 7px;

    color: var(--dourado);

    font-family: "Inter", sans-serif;

    font-size: .52rem;

    letter-spacing: 4px;
}


/* =========================================================
   MENU
========================================================= */

.menu {
    list-style: none;

    display: flex;
    align-items: center;

    gap: 22px;
}

.menu a {
    position: relative;

    color: white;

    font-size: .65rem;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    font-weight: 500;

    transition: color .3s;
}

.menu a:not(.menu-contato)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--dourado);

    transition: width .35s;
}

.menu a:hover,
.menu a.ativo {
    color: var(--dourado);
}

.menu a:hover::after,
.menu a.ativo::after {
    width: 100%;
}

.menu-contato {
    padding: 12px 20px;

    border: 1px solid var(--vinho-claro);

    background: var(--vinho);
}

.menu-contato:hover {
    color: white !important;

    background: var(--vinho-claro);
}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle {
    display: none;

    position: relative;

    z-index: 6000;

    width: 35px;
    height: 30px;

    border: 0;

    background: none;

    cursor: pointer;
}

.menu-toggle span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background: white;

    transition: .3s;
}

.menu-toggle span:nth-child(1) {
    top: 6px;
}

.menu-toggle span:nth-child(2) {
    top: 15px;
}

.menu-toggle span:nth-child(3) {
    top: 24px;
}

.menu-toggle.ativo span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
}

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

.menu-toggle.ativo span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
}


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

#inicio {
    min-height: 100vh;

    padding: 0;

    display: grid;

    grid-template-columns: 53% 47%;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(125,24,48,.22),
            transparent 40%
        ),
        var(--preto);

    overflow: hidden;
}

#inicio::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -260px;
    top: 22%;

    border:
        1px solid rgba(198,161,91,.17);

    border-radius: 50%;
}

.hero-texto {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 150px 9% 90px;
}

.hero-mini {
    color: var(--dourado);

    text-transform: uppercase;

    font-size: .7rem;

    letter-spacing: 4px;

    margin-bottom: 25px;

    opacity: 0;

    animation:
        entradaHero .9s .2s forwards;
}

.hero-texto h1 {
    font-family: "Cormorant Garamond", serif;

    font-weight: 500;

    font-size: clamp(4rem, 7vw, 7rem);

    line-height: .88;

    letter-spacing: -2px;

    margin-bottom: 35px;

    color: white;

    opacity: 0;

    animation:
        entradaHero 1s .4s forwards;
}

.hero-texto h1 span {
    color: var(--dourado);

    font-style: italic;
}

.hero-texto > p {
    max-width: 590px;

    color: #b5b5b5;

    font-size: .98rem;

    opacity: 0;

    animation:
        entradaHero 1s .6s forwards;
}

.botoes {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    opacity: 0;

    animation:
        entradaHero 1s .8s forwards;
}

@keyframes entradaHero {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

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


/* =========================================================
   BOTÕES
========================================================= */

.btn {
    position: relative;

    z-index: 1;

    overflow: hidden;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 29px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-size: .68rem;

    font-weight: 600;

    transition: .35s;
}

.btn::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: var(--vinho-claro);

    transition:
        width .4s cubic-bezier(.7,0,.2,1);
}

.btn:hover::before {
    width: 100%;
}

.btn-principal {
    color: white;

    background: var(--vinho);

    border: 1px solid var(--vinho);
}

.btn-secundario {
    color: white;

    border: 1px solid var(--dourado);
}

.btn-secundario::before {
    background: var(--dourado);
}

.btn-secundario:hover {
    color: var(--preto);
}

.btn-dourado {
    color: var(--preto);

    border: 1px solid var(--dourado);

    background: var(--dourado);
}

.btn-dourado::before {
    background: white;
}


/* =========================================================
   FOTO PRINCIPAL

   Ajustada para priorizar rosto e cabeça.
========================================================= */

.hero-foto {
    position: relative;

    min-height: 100vh;

    background-color: #222;

    background-image:
        linear-gradient(
            90deg,
            rgba(9,9,9,.35),
            transparent 32%
        ),
        url("../img/advogada.jpeg");

    background-size: cover;

    /*
       A imagem fica ancorada no topo.
       Isso evita cortar a cabeça.
    */
    background-position: center top;

    background-repeat: no-repeat;

    overflow: hidden;

    transform: scale(1.02);

    animation:
        zoomHero 1.8s ease forwards;
}

.hero-foto::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(9,9,9,.18),
            transparent 50%
        );
}

@keyframes zoomHero {

    to {
        transform: scale(1);
    }
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-indicador {
    position: absolute;

    bottom: 35px;
    left: 9%;

    display: flex;
    align-items: center;

    gap: 15px;

    color: #777;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .58rem;
}

.scroll-linha {
    position: relative;

    overflow: hidden;

    width: 1px;
    height: 45px;

    background: #444;
}

.scroll-linha::after {
    content: "";

    position: absolute;

    top: -100%;

    width: 100%;
    height: 60%;

    background: var(--dourado);

    animation:
        scrollLinha 2s infinite;
}

@keyframes scrollLinha {

    from {
        top: -100%;
    }

    to {
        top: 130%;
    }
}


/* =========================================================
   SOBRE
========================================================= */

#sobre {
    background: var(--preto-suave);
}

.sobre-grid {
    display: grid;

    grid-template-columns: 43% 57%;

    gap: 100px;

    align-items: center;
}

.foto-sobre {
    position: relative;
    z-index: 1;

    min-height: 600px;

    background-color: #252525;

    background-image:
        linear-gradient(
            180deg,
            rgba(9,9,9,.02),
            rgba(9,9,9,.14)
        ),
        url("../img/advogada-sobre.jpeg");

    background-size: cover;

    /* Enquadramento mais equilibrado para retrato */
    background-position: center 18%;

    background-repeat: no-repeat;

    border: 1px solid rgba(198,161,91,.72);

    box-shadow:
        0 28px 65px rgba(0,0,0,.38);

    overflow: visible;
}

/* Moldura decorativa externa, atrás da fotografia */
.foto-sobre::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 22px;
    left: -22px;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(198,161,91,.30);

    pointer-events: none;
}

/* Pequeno detalhe vinho para integrar a foto à identidade visual */
.foto-sobre::after {
    content: "";

    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 90px;
    height: 3px;

    background: var(--vinho-claro);
}

.sobre-texto {
    max-width: 620px;
}

.sobre-texto p {
    margin-bottom: 18px;

    color: #aaa;
}

.frase-destaque {
    padding-left: 25px;

    margin: 30px 0 !important;

    border-left:
        2px solid var(--vinho-claro);

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.7rem;

    line-height: 1.35;

    color: white !important;
}

.assinatura {
    margin-top: 35px;

    color: var(--dourado);

    font-family:
        "Cormorant Garamond", serif;

    font-size: 2rem;
}


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

.redes-destaque {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(125,24,48,.24),
            transparent 35%
        ),
        var(--preto);
}

.redes-cabecalho {
    max-width: 700px;

    margin-bottom: 55px;
}

.redes-cabecalho p {
    max-width: 600px;

    margin-top: 20px;

    color: var(--cinza);
}

.redes-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}

.rede-card {
    position: relative;

    min-height: 220px;

    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--grafite);

    border: 1px solid #292929;

    overflow: hidden;

    transition:
        transform .4s,
        border-color .4s,
        box-shadow .4s;
}

.rede-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 0;

    background:
        linear-gradient(
            145deg,
            var(--vinho),
            var(--vinho-escuro)
        );

    transition:
        height .45s cubic-bezier(.7,0,.2,1);
}

.rede-card:hover::before {
    height: 100%;
}

.rede-card:hover {
    transform: translateY(-8px);

    border-color: var(--vinho-claro);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);
}

.rede-topo {
    position: relative;

    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rede-icone {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--dourado-claro);

    border: 1px solid var(--dourado);

    transition: .35s;
}

.rede-icone svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;
}

.rede-letra {
    font-family: Arial, sans-serif;

    font-size: 1.3rem;

    font-weight: bold;
}

.rede-card:hover .rede-icone {
    color: var(--preto);

    background: var(--dourado-claro);

    transform: scale(1.08);
}

.rede-info {
    position: relative;

    z-index: 2;

    margin-top: 30px;
}

.rede-info span {
    display: block;

    margin-bottom: 5px;

    color: var(--dourado-claro);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .62rem;
}

.rede-info strong {
    color: white;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.35rem;

    font-weight: 500;
}

.rede-seta {
    color: #777;

    font-size: 1.3rem;

    transition: .35s;
}

.rede-card:hover .rede-seta {
    color: white;

    transform:
        translate(3px, -3px);
}


/* =========================================================
   NÚMEROS
========================================================= */

.numeros {
    padding: 0 8%;

    background: var(--preto);
}

.numeros-container {
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid #292929;
}

.numero {
    padding: 55px 30px;

    text-align: center;

    border-right:
        1px solid #292929;
}

.numero:last-child {
    border-right: 0;
}

.numero strong {
    display: block;

    color: var(--dourado);

    font-family:
        "Cormorant Garamond", serif;

    font-size: 3.3rem;

    line-height: 1;

    font-weight: 500;
}

.numero span {
    display: block;

    margin-top: 10px;

    color: #777;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .65rem;
}


/* =========================================================
   ÁREAS DE ATUAÇÃO
========================================================= */

#atuacao {
    color: white;

    background:
        linear-gradient(
            135deg,
            #151515 0%,
            #090909 60%,
            #240812 100%
        );

    overflow: hidden;
}

#atuacao::before {
    content: "JUSTIÇA";

    position: absolute;

    right: -30px;
    top: 40px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 12rem;

    letter-spacing: 10px;

    color:
        rgba(255,255,255,.018);
}

.cabecalho-atuacao {
    max-width: 720px;

    margin-bottom: 70px;
}

.cabecalho-atuacao > p {
    margin-top: 25px;

    color: #aaa;
}

.areas-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-left:
        1px solid #383838;

    border-top:
        1px solid #383838;
}

.area {
    position: relative;

    min-height: 300px;

    padding: 42px;

    border-right:
        1px solid #383838;

    border-bottom:
        1px solid #383838;

    overflow: hidden;
}

.area::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 0;

    background:
        linear-gradient(
            145deg,
            var(--vinho),
            var(--vinho-escuro)
        );

    transition:
        height .45s cubic-bezier(.7,0,.2,1);
}

.area:hover::before {
    height: 100%;
}

.area-conteudo {
    position: relative;

    z-index: 2;
}

.area-numero {
    color: var(--dourado);

    font-size: .65rem;

    letter-spacing: 2px;

    transition: .4s;
}

.area h3 {
    margin: 30px 0 18px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 2.1rem;

    line-height: 1.1;

    font-weight: 500;
}

.area p {
    color: #aaa;

    font-size: .86rem;

    transition: .4s;
}

.area-seta {
    position: absolute;

    right: 0;
    bottom: -45px;

    opacity: 0;

    font-size: 1.5rem;

    transform: translateX(-15px);

    transition: .4s;
}

.area:hover p,
.area:hover .area-numero {
    color: white;
}

.area:hover .area-seta {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   DIFERENCIAIS
========================================================= */

#diferenciais {
    color: var(--grafite);

    background: var(--off-white);
}

.diferenciais-grid {
    margin-top: 70px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 45px;
}

.diferencial {
    position: relative;

    padding-top: 30px;
}

.diferencial::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: #ccc;
}

.diferencial::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--vinho);

    transition: width .5s;
}

.diferencial:hover::after {
    width: 100%;
}

.icone {
    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--vinho);

    color: var(--vinho);

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.4rem;

    transition: .35s;
}

.diferencial:hover .icone {
    color: white;

    background: var(--vinho);

    transform: translateY(-5px);
}

.diferencial h3 {
    margin-bottom: 15px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.7rem;

    line-height: 1.2;
}

.diferencial p {
    color: #666;

    font-size: .86rem;
}


/* =========================================================
   FRASE
========================================================= */

.frase {
    min-height: 480px;

    padding: 100px 8%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 50% 50%,
            #3c0c18,
            #090909 65%
        );

    overflow: hidden;
}

.frase::before {
    content: "“";

    position: absolute;

    top: -140px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 28rem;

    color:
        rgba(255,255,255,.025);
}

.frase blockquote {
    position: relative;

    z-index: 2;

    max-width: 900px;

    font-family:
        "Cormorant Garamond", serif;

    font-size:
        clamp(2.3rem,4vw,4rem);

    line-height: 1.15;
}

.frase blockquote span {
    color: var(--dourado-claro);
}


/* =========================================================
   FORMAÇÃO
========================================================= */

#formacao {
    color: var(--grafite);

    background: var(--off-white);
}

.formacao-grid {
    display: grid;

    grid-template-columns:
        35% 65%;

    gap: 100px;
}

.formacao-intro {
    position: sticky;

    top: 130px;

    align-self: start;
}

.timeline {
    padding-left: 45px;

    border-left:
        1px solid var(--vinho);
}

.formacao-item {
    position: relative;

    padding-bottom: 50px;
}

.formacao-item:last-child {
    padding-bottom: 0;
}

.formacao-item::before {
    content: "";

    position: absolute;

    left: -52px;
    top: 7px;

    width: 11px;
    height: 11px;

    border:
        2px solid var(--vinho);

    border-radius: 50%;

    background: var(--off-white);

    transition: .3s;
}

.formacao-item:hover::before {
    background: var(--vinho);

    transform: scale(1.25);
}

.formacao-item span {
    color: var(--vinho);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .7rem;
}

.formacao-item h3 {
    margin: 5px 0;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.8rem;

    font-weight: 500;
}

.formacao-item p {
    color: #666;
}


/* =========================================================
   ATENDIMENTO
========================================================= */

#atendimento {
    background: var(--preto-suave);
}

.atendimento-cabecalho {
    max-width: 750px;

    margin-bottom: 65px;
}

.atendimento-cabecalho > p {
    max-width: 650px;

    margin-top: 25px;

    color: var(--cinza);
}

.atendimento-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-bottom: 25px;
}

.atendimento-card {
    position: relative;

    min-height: 400px;

    padding: 55px;

    color: white;

    background: var(--grafite);

    border: 1px solid #303030;

    transition:
        transform .4s,
        border-color .4s,
        box-shadow .4s;
}

.atendimento-card:hover {
    transform: translateY(-7px);

    border-color: var(--vinho);

    box-shadow:
        0 20px 50px rgba(0,0,0,.3);
}

.atendimento-online {
    background:
        linear-gradient(
            145deg,
            var(--vinho-escuro),
            var(--grafite)
        );
}

.atendimento-numero {
    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .65rem;
}

.atendimento-card h3 {
    margin: 40px 0 20px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 2.5rem;

    line-height: 1;

    font-weight: 500;
}

.atendimento-card p {
    max-width: 480px;

    margin-bottom: 20px;

    color: #aaa;
}

.atendimento-card strong {
    display: block;

    margin: 25px 0;

    color: var(--dourado-claro);

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.5rem;
}

.online-destaque {
    margin-top: 30px;

    color: #ddd;

    font-size: .8rem;
}

.online-destaque span {
    margin-right: 7px;

    color: var(--dourado);
}

.link-seta {
    position: absolute;

    left: 55px;
    bottom: 45px;

    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-size: .7rem;

    font-weight: 600;

    transition: .3s;
}

.link-seta:hover {
    color: white;

    letter-spacing: 2.3px;
}


/* =========================================================
   LOCALIZAÇÃO
========================================================= */

.localizacao {
    display: grid;

    grid-template-columns:
        40% 60%;

    min-height: 500px;

    background: var(--grafite);

    border: 1px solid #333;

    overflow: hidden;
}

.localizacao-info {
    padding: 55px;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--grafite),
            var(--preto)
        );
}

.localizacao-info h3 {
    margin: 35px 0 15px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 2.7rem;

    line-height: 1;

    font-weight: 500;
}

.localizacao-texto {
    margin-bottom: 35px;

    color: var(--cinza);
}

.endereco-escritorio {
    margin-bottom: 35px;

    padding-left: 20px;

    border-left:
        2px solid var(--vinho-claro);
}

.endereco-escritorio span {
    display: block;

    margin-bottom: 8px;

    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .65rem;
}

.endereco-escritorio strong {
    display: block;

    margin-bottom: 7px;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.5rem;

    font-weight: 500;
}

.endereco-escritorio p {
    color: #aaa;
}

.btn-mapa {
    color: white;

    background: var(--vinho);

    border: 1px solid var(--vinho);
}

.mapa {
    position: relative;

    min-height: 500px;

    background: #222;
}

.mapa iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(20%)
        contrast(105%);
}


/* =========================================================
   FAQ
========================================================= */

#faq {
    color: var(--grafite);

    background: var(--off-white);
}

.faq-grid {
    display: grid;

    grid-template-columns:
        35% 65%;

    gap: 100px;
}

.faq-intro {
    align-self: start;
}

.faq-intro p {
    color: #666;
}

.faq-item {
    border-bottom:
        1px solid #d6d6d6;
}

.faq-pergunta {
    width: 100%;

    padding: 27px 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: 0;

    background: none;

    color: var(--grafite);

    text-align: left;

    cursor: pointer;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.45rem;
}

.faq-icone {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--vinho);

    color: var(--vinho);

    font-family:
        "Inter", sans-serif;

    font-size: 1.2rem;

    transition: .35s;
}

.faq-item.ativo .faq-icone {
    color: white;

    background: var(--vinho);

    transform: rotate(45deg);
}

.faq-resposta {
    max-height: 0;

    overflow: hidden;

    color: #666;

    transition:
        max-height .45s ease;
}

.faq-resposta div {
    max-width: 700px;

    padding: 0 50px 28px 0;

    font-size: .9rem;
}


/* =========================================================
   CTA
========================================================= */

.cta {
    min-height: 520px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            120deg,
            #090909 0%,
            #240812 50%,
            #7d1830 140%
        );
}

.cta-conteudo {
    max-width: 850px;
}

.cta-conteudo > span {
    display: block;

    margin-bottom: 20px;

    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: .7rem;
}

.cta h2 {
    font-family:
        "Cormorant Garamond", serif;

    font-size:
        clamp(2.8rem,5vw,4.8rem);

    line-height: 1;

    font-weight: 500;
}

.cta p {
    max-width: 550px;

    margin: 25px auto 35px;

    color: #bbb;
}


/* =========================================================
   CONTATO
========================================================= */

#contato {
    color: white;

    background: #0d0d0d;
}

.contato-grid {
    display: grid;

    grid-template-columns:
        43% 57%;

    gap: 100px;
}

.contato-info > p {
    max-width: 500px;

    margin-bottom: 30px;

    color: #aaa;
}

.contato-item {
    padding: 19px 0;

    border-bottom:
        1px solid #292929;
}

.contato-item strong {
    display: block;

    margin-bottom: 4px;

    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-size: .75rem;
}

.contato-item p {
    color: #bbb;
}

.redes-contato {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.redes-contato a {
    padding: 9px 13px;

    border:
        1px solid #333;

    color: var(--dourado);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: .65rem;

    transition: .3s;
}

.redes-contato a:hover {
    color: white;

    border-color: var(--vinho);

    background: var(--vinho);
}


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

.form-linha {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}

.campo {
    position: relative;

    margin-bottom: 22px;
}

.campo input,
.campo textarea,
.campo select {
    width: 100%;

    padding: 16px 3px;

    color: white;

    background: transparent;

    border: 0;

    border-bottom:
        1px solid #555;

    outline: 0;
}

.campo select {
    color: #888;
}

.campo select option {
    color: #222;

    background: white;
}

.campo textarea {
    min-height: 120px;

    resize: vertical;
}

.campo::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--vinho-claro);

    transition: width .4s;
}

.campo:focus-within::after {
    width: 100%;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: #777;
}

.privacidade-check {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: 10px 0 30px;

    color: #888;

    font-size: .75rem;

    cursor: pointer;
}

.privacidade-check input {
    margin-top: 5px;

    accent-color: var(--vinho);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 70px 8% 30px;

    color: #777;

    background: #070707;

    border-top:
        1px solid #222;
}

.footer-principal {
    max-width: 1250px;

    margin: auto;

    padding-bottom: 55px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 60px;
}

.footer-logo {
    margin-bottom: 7px;

    color: white;

    font-family:
        "Cormorant Garamond", serif;

    font-size: 1.7rem;
}

.footer-marca p {
    color: var(--dourado);

    font-size: .72rem;
}

.footer-links {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-links strong {
    margin-bottom: 10px;

    color: #ddd;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-size: .68rem;
}

.footer-links a {
    font-size: .75rem;

    transition: color .3s;
}

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

.footer-final {
    max-width: 1250px;

    margin: auto;

    padding-top: 28px;

    display: flex;

    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid #222;

    font-size: .68rem;
}


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

.whatsapp {
    position: fixed;

    right: 27px;
    bottom: 27px;

    z-index: 4000;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #25D366;

    box-shadow:
        0 8px 25px rgba(0,0,0,.3);

    transition: .3s;
}

.whatsapp svg {
    width: 28px;
    height: 28px;

    fill: white;
}

.whatsapp:hover {
    transform:
        translateY(-5px)
        scale(1.05);
}

.whatsapp::before {
    content: "";

    position: absolute;

    inset: -6px;

    border:
        1px solid rgba(37,211,102,.6);

    border-radius: 50%;

    animation:
        whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {

    from {
        transform: scale(.9);
        opacity: 1;
    }

    to {
        transform: scale(1.4);
        opacity: 0;
    }
}


/* =========================================================
   VOLTAR AO TOPO
========================================================= */

.voltar-topo {
    position: fixed;

    right: 32px;
    bottom: 100px;

    z-index: 3000;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    border:
        1px solid #444;

    background:
        rgba(15,15,15,.9);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px);

    transition: .3s;
}

.voltar-topo.visivel {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.voltar-topo:hover {
    color: white;

    background: var(--vinho);

    border-color: var(--vinho);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 1050px) {

    nav {
        width: 100%;

        padding: 0 6%;
    }

    .menu-toggle {
        display: block;
    }

    .menu {
        position: fixed;

        inset: 0;

        height: 100vh;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 25px;

        background:
            radial-gradient(
                circle at 50% 30%,
                #320b16,
                #090909 60%
            );

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-20px);

        transition: .4s;
    }

    .menu.ativo {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }

    .menu a {
        font-family:
            "Cormorant Garamond", serif;

        font-size: 2rem;

        text-transform: none;

        letter-spacing: 0;
    }

    .menu-contato {
        border:
            1px solid var(--vinho);

        padding: 10px 25px;
    }

    #inicio {
        grid-template-columns: 1fr;
    }

    .hero-texto {
        min-height: 720px;
    }

    .hero-foto {
        min-height: 650px;

        background-position: center top;
    }

    .scroll-indicador {
        display: none;
    }

    .sobre-grid,
    .formacao-grid,
    .faq-grid,
    .contato-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .formacao-intro {
        position: static;
    }

    .areas-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .diferenciais-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .redes-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-principal {
        grid-template-columns:
            1fr 1fr;
    }
}


/* =========================================================
   MAPA RESPONSIVO
========================================================= */

@media(max-width: 850px) {

    .localizacao {
        grid-template-columns: 1fr;
    }

    .mapa {
        min-height: 420px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width: 650px) {

    section {
        padding: 85px 7%;
    }

    nav {
        height: 80px;

        padding: 0 7%;
    }

    header.rolagem nav {
        height: 70px;
    }

    .logo {
        font-size: 1.35rem;
    }

    .hero-texto {
        min-height: 650px;

        padding:
            130px 7% 80px;
    }

    .hero-texto h1 {
        font-size: 3.8rem;
    }

    .hero-foto {
        min-height: 560px;

        background-size: cover;

        background-position: center top;
    }

    .areas-grid,
    .diferenciais-grid,
    .atendimento-grid,
    .numeros-container,
    .redes-grid {
        grid-template-columns: 1fr;
    }

    .numero {
        border-right: 0;

        border-bottom:
            1px solid #292929;
    }

    .atendimento-card {
        min-height: 430px;

        padding: 40px 30px;
    }

    .link-seta {
        left: 30px;
    }

    .localizacao-info {
        padding: 40px 28px;
    }

    .mapa {
        min-height: 350px;
    }

    .form-linha {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .footer-principal {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .footer-final {
        flex-direction: column;
    }

    .whatsapp {
        width: 55px;
        height: 55px;

        right: 18px;
        bottom: 18px;
    }

    .voltar-topo {
        right: 24px;
        bottom: 88px;
    }
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media(prefers-reduced-motion: reduce) {

    * {
        scroll-behavior: auto !important;

        animation: none !important;

        transition: none !important;
    }

    .reveal {
        opacity: 1;

        transform: none;
    }
}

/* AJUSTES FINAIS: degradê da foto e responsividade */
#inicio { position: relative; isolation: isolate; }
.hero-foto {
  z-index: 1; min-width: 0; background-image: url("../img/advogada.jpeg");
  background-size: cover; background-position: center 12%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.72) 19%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.72) 19%, #000 34%);
}
.hero-foto::after { background: linear-gradient(0deg, rgba(9,9,9,.22), transparent 48%); }
.numeros { display: none !important; }

@media (max-width: 1050px) {
  #inicio { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); min-height: auto; }
  .hero-texto { min-height: 690px; padding: 125px 7% 70px; }
  .hero-texto h1 { font-size: clamp(3.4rem, 6vw, 5.3rem); }
  .hero-foto { min-height: 690px; background-position: 52% top; }
}

@media (max-width: 650px) {
  section { padding: 64px 6%; scroll-margin-top: 72px; }
  #inicio { display: flex; flex-direction: column; min-height: 0; padding-top: 70px; }
  .hero-texto { min-height: 0; padding: 52px 7% 34px; }
  .hero-mini { font-size: .62rem; letter-spacing: 2.2px; line-height: 1.7; margin-bottom: 17px; }
  .hero-texto h1 { font-size: clamp(2.8rem, 12vw, 4.1rem); line-height: .92; letter-spacing: -1px; margin-bottom: 22px; overflow-wrap: anywhere; }
  .hero-texto > p { font-size: .92rem; line-height: 1.7; }
  .botoes { margin-top: 25px; gap: 10px; flex-direction: column; align-items: stretch; }
  .botoes .btn, .hero-texto .btn { width: 100%; min-height: 48px; padding: 14px 16px; text-align: center; justify-content: center; font-size: .72rem; }
  .hero-foto {
    width: 100%; min-height: 0; height: clamp(250px, 78vw, 360px); flex: none;
    background-size: cover; background-position: center 12%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
    transform: none; animation: none;
  }
  .hero-foto::after { background: linear-gradient(to bottom, transparent 60%, var(--preto) 100%); }
  .titulo-secao, section h2 { font-size: clamp(2.1rem, 9vw, 3.1rem); line-height: 1.05; overflow-wrap: break-word; }
  .sobre-grid, .formacao-grid, .faq-grid, .contato-grid { gap: 32px; }
  .sobre-foto, .foto-sobre, .formacao-foto { max-height: 430px; overflow: hidden; }
  .sobre-foto img, .foto-sobre img, .formacao-foto img { width: 100%; max-height: 430px; object-fit: cover; object-position: center 20%; }
  .areas-grid, .diferenciais-grid, .atendimento-grid, .redes-grid { grid-template-columns: 1fr; }
  .atendimento-card { min-height: 0; padding: 30px 24px 70px; }
  .localizacao { grid-template-columns: 1fr; }
  .localizacao-info { padding: 30px 24px; }
  .mapa { min-height: 280px; }
  .form-linha { grid-template-columns: 1fr; gap: 0; }
  .footer-principal { grid-template-columns: 1fr; gap: 28px; }
  .footer-final { gap: 12px; flex-direction: column; align-items: flex-start; }
  .whatsapp { width: 52px; height: 52px; right: 15px; bottom: 15px; }
  .voltar-topo { right: 20px; bottom: 78px; }
}
@media (max-width: 380px) {
  .hero-texto h1 { font-size: 2.65rem; }
  .hero-texto { padding-left: 6%; padding-right: 6%; }
  .hero-foto { height: 250px; }
}

/* Marca do escritório no cabeçalho */
.marca-cabecalho { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; flex:0 0 64px; position:relative; z-index:6001; }
.marca-cabecalho img { width:100%; height:100%; object-fit:contain; display:block; }
@media (min-width:1051px) { nav { width:100%; padding:0 2.5%; justify-content:flex-start; gap:18px; } nav .menu { width:auto; flex:1; max-width:1000px; } nav .menu a { font-size:.68rem; } }
@media (max-width:1050px) { nav { justify-content:space-between; } .marca-cabecalho { width:56px; height:56px; flex-basis:56px; } .menu-toggle { order:2; } }
@media (max-width:650px) { .marca-cabecalho { width:48px; height:48px; flex-basis:48px; } }

/* Serviços: lista com check discreto, mantendo as cores dos cartões. */
#atuacao .area-servicos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    color: #aaa;
    font-size: .86rem;
    line-height: 1.65;
    transition: color .4s;
}
#atuacao .area-servicos li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    margin: 0;
    padding: 0;
}
#atuacao .area-check {
    color: #4caf50;
    display: block;
    width: 9px;
    height: 5px;
    margin-top: .55em;
    border-left: 1.4px solid #4caf50;
    border-bottom: 1.4px solid #4caf50;
    transform: rotate(-45deg);
}
#atuacao .area:hover .area-servicos {
    color: white;
}

/* Espaço entre o título do cartão e os serviços. */
#atuacao .area h3 {
    margin-bottom: 32px;
}

/* Redes sociais no lado direito do cabeçalho. */
#header .redes-topo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
#header .redes-topo a,
#header .redes-topo .rede-topo-pendente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--dourado);
}
#header .redes-topo a:hover { color: white; }
#header .redes-topo a:focus-visible {
    outline: 1px solid var(--dourado);
    outline-offset: 2px;
}
#header .redes-topo svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 1050px) {
    #header .redes-topo { order: 1; margin-right: 12px; }
}