/*
  KF Advogadas: folha de estilo do site.
  Verde tirado dos cartões de visita do escritório, títulos em Newsreader
  e textos em Public Sans.
*/

:root {
    --tinta: #1C2621;
    --verde: #1D5C45;
    --verde-escuro: #154534;
    --verde-claro: #E3EEE7;
    --papel: #FBFCFA;
    --branco: #FFFFFF;
    --cinza: #56625B;
    --linha: #CBD6CF;
    --foco: #F2C94C;
    --erro: #A63A2B;

    --serifa: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Public Sans", "Segoe UI", Arial, sans-serif;

    --largura: 72rem;
    --margem: clamp(1.25rem, 4vw, 2.5rem);
    --altura-topo: 4.5rem;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--altura-topo);
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--verde);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--verde-escuro);
}

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    border-radius: 2px;
}

h1,
h2,
h3 {
    font-family: var(--serifa);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

h3 {
    font-size: 1.5rem;
}

p {
    margin: 0 0 1rem;
}

.pular {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    background: var(--tinta);
    color: var(--branco);
    padding: 0.6rem 1rem;
}

.pular:focus {
    top: 1rem;
}

/* ---------- Botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--verde);
    border-radius: 6px;
    background: var(--verde);
    color: var(--branco);
    font: 600 1rem/1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.botao:hover {
    background: var(--verde-escuro);
    border-color: var(--verde-escuro);
    color: var(--branco);
}

.botao .bx {
    font-size: 1.35rem;
}

.botao--contorno {
    background: transparent;
    color: var(--verde);
}

.botao--contorno:hover {
    background: var(--verde-claro);
    border-color: var(--verde);
    color: var(--verde-escuro);
}

.botao--pequeno {
    min-height: 2.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
}

/* ---------- Cabeçalho ---------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(251, 252, 250, 0.96);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.topo.rolou {
    border-bottom-color: var(--linha);
}

.topo__barra {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--margem);
    min-height: var(--altura-topo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.marca {
    font-family: var(--serifa);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.marca:hover {
    color: var(--verde);
}

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

.menu ul {
    display: flex;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul a {
    color: var(--tinta);
    font-weight: 500;
    font-size: 0.975rem;
    text-decoration: none;
}

.menu ul a:hover {
    color: var(--verde);
    text-decoration: underline;
}

.menu-botao {
    display: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--branco);
    color: var(--tinta);
    font: 500 0.95rem var(--sans);
    cursor: pointer;
}

.menu-botao .bx {
    font-size: 1.4rem;
}

@media (max-width: 1000px) {
    .menu-botao {
        display: inline-flex;
    }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0.5rem var(--margem) 1.5rem;
        background: var(--papel);
        border-bottom: 1px solid var(--linha);
    }

    .menu.aberto {
        display: flex;
    }

    .menu ul {
        flex-direction: column;
        gap: 0;
    }

    .menu ul a {
        display: block;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--linha);
        font-size: 1.05rem;
    }

    .menu .botao {
        justify-content: center;
    }
}

/* ---------- Abertura ---------- */

.abertura {
    max-width: var(--largura);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5.5rem) var(--margem) clamp(3rem, 7vw, 6rem);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.abertura h1 {
    font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    max-width: 11ch;
}

.abertura__lead {
    font-size: 1.2rem;
    color: var(--cinza);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.abertura__foto {
    margin: 0;
}

.abertura__foto img {
    width: 100%;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    object-position: 70% 50%;
    border-radius: 10px;
}

.abertura__foto figcaption {
    margin: -2.5rem 0 0 1.5rem;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 3rem);
    padding: 1rem 1.25rem;
    background: var(--branco);
    border-left: 4px solid var(--verde);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 6px 24px rgba(28, 38, 33, 0.12);
    font-size: 0.95rem;
    color: var(--cinza);
    line-height: 1.45;
}

.abertura__foto figcaption strong {
    display: block;
    font-family: var(--serifa);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tinta);
}

/* Única animação da página: a abertura aparece ao carregar */
@media (prefers-reduced-motion: no-preference) {
    .abertura__texto > *,
    .abertura__foto {
        animation: surgir 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .abertura__lead { animation-delay: 0.08s; }
    .abertura__acoes { animation-delay: 0.16s; }
    .abertura__foto { animation-delay: 0.24s; }

    @keyframes surgir {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 820px) {
    .abertura {
        grid-template-columns: 1fr;
    }

    .abertura h1 {
        max-width: 13ch;
    }
}

/* ---------- Áreas de atuação ---------- */

.areas {
    background: var(--branco);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    padding: clamp(3.5rem, 8vw, 6.5rem) var(--margem);
}

.areas__grade {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.areas__intro {
    align-self: start;
    position: sticky;
    top: calc(var(--altura-topo) + 2rem);
}

.areas__intro p {
    color: var(--cinza);
    max-width: 22rem;
}

.areas__lista {
    border-top: 2px solid var(--tinta);
}

.area {
    border-bottom: 1px solid var(--linha);
}

.area summary {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.5rem;
    padding: 1.5rem 0;
    cursor: pointer;
    list-style: none;
}

.area summary::-webkit-details-marker {
    display: none;
}

/* Sinal de + / − que responde ao abrir e fechar */
.area summary::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid var(--linha);
    border-radius: 50%;
    background:
        linear-gradient(var(--verde), var(--verde)) center / 12px 2px no-repeat,
        linear-gradient(var(--verde), var(--verde)) center / 2px 12px no-repeat;
    transition: transform 0.2s, background-color 0.2s;
}

.area[open] summary::after {
    background:
        linear-gradient(var(--branco), var(--branco)) center / 12px 2px no-repeat;
    background-color: var(--verde);
    border-color: var(--verde);
    transform: rotate(180deg);
}

.area summary:hover .area__nome {
    color: var(--verde);
}

.area__nome {
    font-family: var(--serifa);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.15s;
}

.area__situacao {
    grid-column: 1;
    color: var(--cinza);
    margin-top: 0.3rem;
}

.area__corpo {
    padding: 0 0 2rem;
}

.area__corpo ul {
    columns: 2 16rem;
    column-gap: 2.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.area__corpo li {
    break-inside: avoid;
    padding: 0.45rem 0 0.45rem 1.1rem;
    position: relative;
    line-height: 1.45;
}

.area__corpo li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 6px;
    height: 6px;
    background: var(--verde);
    border-radius: 50%;
}

.area__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.area__link .bx {
    font-size: 1.3rem;
}

@media (prefers-reduced-motion: no-preference) {
    .area[open] .area__corpo {
        animation: abrir 0.25s ease-out;
    }

    @keyframes abrir {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
    }
}

@media (max-width: 820px) {
    .areas__grade {
        grid-template-columns: 1fr;
    }

    .areas__intro {
        position: static;
    }
}

/* ---------- O escritório ---------- */

.escritorio {
    background: var(--verde);
    color: var(--branco);
    padding: clamp(3.5rem, 8vw, 6rem) var(--margem);
}

.escritorio__grade {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.escritorio p {
    font-size: 1.2rem;
    line-height: 1.65;
    max-width: 36rem;
    color: #E9F2EC;
}

.escritorio__fatos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.escritorio__fatos li {
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    color: #D5E6DB;
}

.escritorio__fatos li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.escritorio__fatos strong {
    display: block;
    font-family: var(--serifa);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--branco);
    line-height: 1.2;
}

@media (max-width: 820px) {
    .escritorio__grade {
        grid-template-columns: 1fr;
    }
}

/* ---------- Advogadas ---------- */

.equipe {
    max-width: var(--largura);
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6.5rem) var(--margem);
}

.equipe h2 {
    margin-bottom: 2.5rem;
}

.equipe__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pessoa img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 15%;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    background: var(--verde-claro);
}

.pessoa h3 {
    margin-bottom: 0.2rem;
}

.pessoa__oab {
    font-weight: 600;
    color: var(--verde);
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.pessoa p:not(.pessoa__oab) {
    color: var(--cinza);
}

.pessoa__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.pessoa__link .bx {
    font-size: 1.25rem;
}

@media (max-width: 820px) {
    .equipe__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .equipe__grade {
        grid-template-columns: 1fr;
    }

    .pessoa img {
        aspect-ratio: 1 / 1;
    }
}

/* ---------- Links dos tribunais ---------- */

.tribunais {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--margem) clamp(3.5rem, 8vw, 6rem);
}

.tribunais h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.tribunais__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--linha);
}

.tribunais__lista li {
    padding: 1rem 0;
}

.tribunais__lista a {
    display: block;
    font-weight: 600;
}

.tribunais__lista span {
    font-size: 0.95rem;
    color: var(--cinza);
}

@media (max-width: 820px) {
    .tribunais__lista {
        grid-template-columns: 1fr;
    }

    .tribunais__lista li {
        border-bottom: 1px solid var(--linha);
    }
}

/* ---------- Contato ---------- */

.contato {
    max-width: var(--largura);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) var(--margem) clamp(3.5rem, 8vw, 6rem);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.contato__info > p {
    color: var(--cinza);
    max-width: 30rem;
}

.contato__dados {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.7rem 1rem;
    margin: 2rem 0;
}

.contato__dados dt {
    font-weight: 600;
    color: var(--cinza);
    font-size: 0.95rem;
    padding-top: 0.1rem;
}

.contato__dados dd {
    margin: 0;
    line-height: 1.5;
}

.contato__mapa {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
    border-radius: 8px;
    background: var(--verde-claro);
}

.formulario {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 10px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.formulario h3 {
    margin-bottom: 1.5rem;
}

.formulario__linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.form-group input,
.form-group textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1.5px solid var(--linha);
    border-radius: 6px;
    background: var(--papel);
    color: var(--tinta);
    font: 400 1rem/1.5 var(--sans);
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--verde);
    background: var(--branco);
    outline: 3px solid var(--foco);
    outline-offset: 1px;
}

.validate {
    display: none;
    color: var(--erro);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.armadilha {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario__status .loading,
.formulario__status .error-message,
.formulario__status .sent-message {
    display: none;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.formulario__status .loading {
    background: var(--verde-claro);
}

.formulario__status .error-message {
    background: #F8E3DF;
    color: var(--erro);
}

.formulario__status .sent-message {
    background: var(--verde);
    color: var(--branco);
}

.formulario .botao {
    width: 100%;
    justify-content: center;
}

@media (max-width: 900px) {
    .contato {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .formulario__linha {
        grid-template-columns: 1fr;
    }

    .contato__dados {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .contato__dados dd {
        margin-bottom: 0.8rem;
    }
}

/* ---------- Rodapé ---------- */

.rodape {
    background: var(--tinta);
    color: #B9C7BF;
    padding: 3rem var(--margem) 2rem;
    font-size: 0.95rem;
}

.rodape__grade,
.rodape__copy {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
}

.rodape__grade {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.rodape__marca {
    font-family: var(--serifa);
    font-size: 1.4rem;
    color: var(--branco);
    margin-bottom: 0.5rem;
}

.rodape__copy {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
}

/* ---------- WhatsApp flutuante ---------- */

.whats-flutuante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    width: 3.75rem;
    height: 3.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25D366;
    color: var(--branco);
    font-size: 2.1rem;
    box-shadow: 0 4px 14px rgba(28, 38, 33, 0.25);
    text-decoration: none;
}

.whats-flutuante:hover {
    background: #1EBE5A;
    color: var(--branco);
}

@media (max-width: 420px) {
    .marca {
        font-size: 1.1rem;
    }
}

/* =====================================================================
   Versão 2: mais cor. Topo e contato em verde escuro, ícones nas áreas,
   passos do atendimento e o dourado da estátua da Justiça como detalhe.
   ===================================================================== */

:root {
    --verde-noite: #133F30;
    --dourado: #B08A3E;
    --dourado-claro: #D9BD7E;
}

/* ---------- Abertura em verde escuro ---------- */

.abertura-faixa {
    background:
        radial-gradient(ellipse at 85% 20%, rgba(217, 189, 126, 0.14), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
        var(--verde-noite);
    color: var(--branco);
}

.abertura-faixa .abertura h1 {
    color: var(--branco);
}

.abertura-faixa .abertura__lead {
    color: #C9DDD1;
}

.abertura-faixa .botao {
    background: var(--branco);
    border-color: var(--branco);
    color: var(--verde-noite);
}

.abertura-faixa .botao:hover {
    background: var(--dourado-claro);
    border-color: var(--dourado-claro);
    color: var(--verde-noite);
}

.abertura-faixa .botao--contorno {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--branco);
}

.abertura-faixa .botao--contorno:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--branco);
    color: var(--branco);
}

.abertura__foto {
    position: relative;
}

/* Moldura dourada deslocada atrás da foto */
.abertura__foto::before {
    content: "";
    position: absolute;
    inset: 1.1rem -1.1rem auto 1.1rem;
    aspect-ratio: 4 / 3.4;
    border: 1.5px solid var(--dourado-claro);
    border-radius: 10px;
}

.abertura__foto img {
    position: relative;
}

.abertura__foto figcaption {
    border-left-color: var(--dourado);
}

.topo {
    background: rgba(251, 252, 250, 0.97);
}

/* ---------- Ícones nas áreas ---------- */

.area summary {
    grid-template-columns: 3.25rem 1fr auto;
    column-gap: 1.25rem;
}

.area__icone {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde-claro);
    color: var(--verde);
    font-size: 1.6rem;
    transition: background-color 0.2s, color 0.2s;
}

.area[open] .area__icone {
    background: var(--verde);
    color: var(--branco);
}

.area__nome,
.area__situacao {
    grid-column: 2;
}

.area summary::after {
    grid-column: 3;
}

.area__corpo {
    padding-left: 4.5rem;
}

@media (max-width: 540px) {
    .area summary {
        grid-template-columns: 2.5rem 1fr auto;
        column-gap: 0.9rem;
    }

    .area__icone {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.3rem;
    }

    .area__corpo {
        padding-left: 0;
    }
}

/* ---------- Como funciona ---------- */

.passos {
    background: var(--verde-claro);
    padding: clamp(3.5rem, 8vw, 6rem) var(--margem);
}

.passos__grade {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
}

.passos h2 {
    margin-bottom: 2.5rem;
}

.passos__lista {
    counter-reset: passo;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.passos__lista li {
    counter-increment: passo;
    border-top: 2px solid var(--verde);
    padding-top: 1.25rem;
}

.passos__lista li::before {
    content: counter(passo);
    display: block;
    font-family: var(--serifa);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--dourado);
    margin-bottom: 0.75rem;
}

.passos__lista h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.passos__lista p {
    color: var(--cinza);
    margin: 0;
}

@media (max-width: 820px) {
    .passos__lista {
        grid-template-columns: 1fr;
    }
}

/* ---------- O escritório com o ano em destaque ---------- */

.escritorio {
    background: var(--branco);
    color: var(--tinta);
}

.escritorio__grade {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.escritorio .escritorio__ano {
    font-family: var(--serifa);
    font-size: clamp(6rem, 3rem + 10vw, 11.5rem);
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--verde);
    margin: 0;
}

.escritorio p {
    color: var(--cinza);
    font-size: 1.15rem;
}

.escritorio__fatos {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.escritorio__fatos li,
.escritorio__fatos li:last-child {
    border-top: 1px solid var(--linha);
    border-bottom: 0;
    color: var(--cinza);
    font-size: 0.95rem;
    padding: 0.9rem 0 0;
}

.escritorio__fatos strong {
    color: var(--tinta);
    font-size: 1.35rem;
}

@media (max-width: 820px) {
    .escritorio__fatos {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .escritorio__fatos li {
        padding-bottom: 0.9rem;
    }
}

/* ---------- Advogadas em cartões ---------- */

.equipe-faixa {
    background: var(--papel);
    border-top: 1px solid var(--linha);
}

.pessoa {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 10px;
    overflow: hidden;
    padding: 0 1.4rem 1.5rem;
}

.pessoa img {
    width: calc(100% + 2.8rem);
    max-width: none;
    margin: 0 -1.4rem 1.25rem;
    border-radius: 0;
}

.pessoa__oab {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    background: var(--verde-claro);
}

/* ---------- Contato em verde escuro ---------- */

.contato-faixa {
    background: var(--verde-noite);
    color: var(--branco);
}

.contato-faixa .contato {
    padding-top: clamp(3.5rem, 8vw, 6rem);
}

.contato-faixa .contato__info > p {
    color: #C9DDD1;
}

.contato-faixa .contato__dados dt {
    color: var(--dourado-claro);
}

.contato-faixa .contato__dados a {
    color: var(--branco);
}

.contato-faixa .contato__dados a:hover {
    color: var(--dourado-claro);
}

.contato-faixa .formulario {
    color: var(--tinta);
    border: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.rodape {
    background: #0E2C22;
}

@media (max-width: 820px) {
    .escritorio__grade {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 820px) {
    .abertura__foto::before {
        display: none;
    }
}


/* =====================================================================
   Ajustes: nome no topo no estilo do Clássico e contato em painel.
   ===================================================================== */

:root {
    --verde-vivo: #5CB874;
}

.marca {
    font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--verde);
}

.marca span {
    font-weight: 500;
    color: var(--tinta);
}

.marca:hover {
    color: var(--verde-escuro);
}

@media (max-width: 1080px) {
    .marca {
        font-size: 1.35rem;
    }
}

@media (max-width: 420px) {
    .marca {
        font-size: 1.05rem;
    }
}

/* ---------- Contato: informações em painel, lado a lado com o formulário ---------- */

.contato {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
        "cabecalho cabecalho"
        "info formulario";
    row-gap: 2.25rem;
    align-items: stretch;
}

.contato__cabecalho {
    grid-area: cabecalho;
}

.contato__cabecalho p {
    color: #C9DDD1;
    max-width: 36rem;
    margin: 0;
}

.contato__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.contato-faixa .formulario {
    grid-area: formulario;
}

.contato__lista {
    display: grid;
    gap: 1.3rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.contato__lista li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #DCEAE1;
    line-height: 1.5;
}

.contato__icone {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(92, 184, 116, 0.18);
    color: var(--verde-vivo);
    font-size: 1.35rem;
}

.contato__rotulo {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dourado-claro);
    margin-bottom: 0.1rem;
}

.contato__lista a {
    color: var(--branco);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contato__lista a:hover {
    color: var(--dourado-claro);
    text-decoration: underline;
}

.contato__mapa {
    flex: 1;
    min-height: 230px;
    height: auto;
    margin-top: auto;
}

@media (max-width: 900px) {
    .contato {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cabecalho"
            "info"
            "formulario";
    }
}

@media (max-width: 540px) {
    .contato__info {
        padding: 1.4rem;
    }
}




/* Ajuste do topo: nome menor e um pouco mais claro, menu mais compacto */
.marca {
    font-size: 1.35rem;
    color: #2B7A58;
}

.marca span {
    color: var(--tinta);
}

.marca:hover {
    color: var(--verde);
}

.menu {
    gap: 1.5rem;
}

.menu ul {
    gap: 1.35rem;
}

.menu ul a {
    font-size: 0.92rem;
}

@media (max-width: 1180px) and (min-width: 1001px) {
    .marca {
        font-size: 1.2rem;
    }

    .menu ul {
        gap: 1.1rem;
    }
}

@media (max-width: 1000px) {
    .menu {
        display: none;
    }

    .menu.aberto {
        display: flex;
    }
}

@media (max-width: 480px) {
    .marca {
        font-size: 1.1rem;
    }
}

/* Endereço menor e mais discreto no painel de contato */
.contato__endereco {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #C9DDD1;
}

/* =====================================================================
   Páginas de área de atuação e links "Saiba mais" da página inicial
   ===================================================================== */

.area__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}

/* ---------- Abertura da página de área ---------- */

.pagina-topo {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--margem) clamp(3rem, 6vw, 4.5rem);
    box-sizing: content-box;
}

.pagina-topo h1 {
    color: var(--branco);
    font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    max-width: 18ch;
}

.pagina-topo .abertura__lead {
    color: #C9DDD1;
    max-width: 42rem;
}

.trilha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #C9DDD1;
}

.trilha a {
    color: var(--dourado-claro);
}

.trilha a:hover {
    color: var(--branco);
}

@media (max-width: 820px) {
    .pagina-topo {
        padding-left: var(--margem);
        padding-right: var(--margem);
    }
}

/* ---------- Serviços e perguntas frequentes ---------- */

.pagina-corpo {
    background: var(--branco);
    padding: clamp(3rem, 7vw, 5.5rem) var(--margem);
}

.pagina-corpo__grade {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.pagina-corpo h2 {
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
    margin-bottom: 1.25rem;
}

.lista-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-check li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.9rem;
    border-bottom: 1px solid var(--linha);
    line-height: 1.5;
}

.lista-check li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.85rem;
    width: 0.45rem;
    height: 0.8rem;
    border: solid var(--verde);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.duvidas {
    border-top: 2px solid var(--tinta);
}

.duvida {
    border-bottom: 1px solid var(--linha);
}

.duvida summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--serifa);
    font-size: 1.25rem;
    line-height: 1.3;
}

.duvida summary::-webkit-details-marker {
    display: none;
}

.duvida summary::after {
    content: "+";
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--linha);
    border-radius: 50%;
    font-family: var(--sans);
    font-size: 1.2rem;
    color: var(--verde);
}

.duvida[open] summary::after {
    content: "−";
    background: var(--verde);
    border-color: var(--verde);
    color: var(--branco);
}

.duvida summary:hover {
    color: var(--verde);
}

.duvida p {
    margin: 0 0 1.25rem;
    color: var(--cinza);
    max-width: 44rem;
}

.aviso {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--cinza);
}

@media (max-width: 820px) {
    .pagina-corpo__grade {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Outras áreas ---------- */

.outras-areas {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--margem);
    box-sizing: content-box;
}

.outras-areas h2 {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}

.outras-areas ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.outras-areas a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: var(--branco);
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
}

.outras-areas a:hover {
    border-color: var(--verde);
    color: var(--verde);
}

.outras-areas .bx {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde-claro);
    color: var(--verde);
    font-size: 1.25rem;
}

@media (max-width: 1000px) {
    .outras-areas ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .outras-areas ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Links com ícone: o sublinhado fica só no texto, nunca no ícone */
.area__link,
.pessoa__link {
    text-decoration: none;
}

.area__link span,
.pessoa__link span {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Advogadas: texto de apresentação à esquerda e uma coluna por advogada.
   O número de colunas vem de --quantidade, definido no HTML a partir da lista. */
.equipe__grade {
    grid-template-columns: minmax(0, 0.9fr) repeat(var(--quantidade, 2), minmax(0, 1fr));
    align-items: stretch;
}

.equipe__intro {
    align-self: start;
    position: sticky;
    top: calc(var(--altura-topo) + 2rem);
}

.equipe__intro h2 {
    margin-bottom: 1rem;
}

.equipe__intro p {
    color: var(--cinza);
    max-width: 22rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 1000px) {
    .equipe__grade {
        grid-template-columns: repeat(var(--quantidade, 2), minmax(0, 1fr));
    }

    .equipe__intro {
        grid-column: 1 / -1;
        position: static;
    }

    .equipe__intro p {
        max-width: 36rem;
    }
}

@media (max-width: 540px) {
    .equipe__grade {
        grid-template-columns: minmax(0, 1fr);
    }
}