/* ==========================================================================
   FONTES (self-hosted, woff2) — sem dependencia de Google Fonts CDN
   ========================================================================== */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/WorkSans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/WorkSans-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/WorkSans-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Bitter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Bitter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Newsreader-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Newsreader-SemiBold.woff2') format('woff2');
}

/* ==========================================================================
   DESIGN SYSTEM & TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* Paleta de Cores - Extraída da paleta fornecida */
    --navy: #222222;       /* Fundo Principal Escuro (Cinza Escuro Nobre) */
    --blue: #2E2E2E;       /* Fundo de Cards / Elementos Intermediários */
    --gold: #B29474;       /* Dourado Ocre (Destaques e Botões Principais) */
    --gold-hover: #9E8162; /* Ocre mais escuro para hover */
    --cream: #EBE6DE;      /* Creme Claro (Fundos claros, textos em fundo escuro) */
    --nude: #DDD5C7;       /* Nude Médio (Fundo de Metodologia, respiros) */
    
    /* Cores de Apoio */
    --text-dark: #222222;
    --text-light: #EBE6DE;
    --text-muted: #666666;
    --border-light: rgba(178, 148, 116, 0.2); /* Ocre translúcido para bordas */
    --border-dark: rgba(235, 230, 222, 0.15); /* Creme translúcido para bordas */
    
    /* Tipografia (4 papeis: titulo / leitura longa / UI / destaque-numeros) */
    --font-heading: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Bitter', Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-accent: 'Newsreader', Georgia, serif;
    
    /* Animações Premium (Curva Apple) */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --t-snappy: 0.25s var(--ease-premium);
    --t-smooth: 0.5s var(--ease-premium);
    
    /* Limites de Bordas (Estritas) */
    /* Linguagem editorial flat (ref. Paul Weiss): cantos retos em blocos de layout. */
    /* Overlays flutuantes (chat, FAB, modal) tem raios proprios e nao usam estes tokens. */
    --radius-btn: 2px;
    --radius-card: 0px;
    
    /* Altura da Navbar */
    --nav-height: 80px;
}

/* Prevenção de Tontura (Acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* ==========================================================================
   RESET & ESTILOS GLOBAIS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    font-size: 16px;
}

/* Lenis ativo: desliga o smooth nativo (senao ha "double smoothing" no scroll) */
html.lenis,
html.lenis body {
    height: auto;
}

html.lenis {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-ui);
    background-color: var(--cream);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Reset de Links e Elementos Interativos */
a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

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

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

address {
    font-style: normal;
}

/* Numerais display em Newsreader (serifa editorial, algarismos lining regulares). */
/* line-height 1 para nao invadir o espacamento vertical dos vizinhos. */
.card-number,
.method-num,
.timeline-year {
    font-family: var(--font-accent);
    font-weight: 500;
    font-variant-numeric: lining-nums;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Numeracoes discretas (telefones etc.): Inter light com digitos tabulares. */
.info-value[href^="tel:"],
.info-value[href*="wa.me"] {
    font-family: var(--font-ui);
    font-weight: 300;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.02em;
}

/* Detalhes de acabamento globais */
::selection {
    background-color: var(--gold);
    color: var(--navy);
}

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

/* ==========================================================================
   ESTILOS COMPARTILHADOS & UTILITÁRIOS
   ========================================================================== */
.section-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
}

@media (min-width: 768px) {
    .section-container {
        padding: 120px 40px;
    }
}

/* Kickers & Títulos Editoriais */
.section-kicker {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 12px;
}

.section-kicker.light {
    color: var(--gold);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--navy);
    margin-bottom: 24px;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.section-title.light {
    color: var(--cream);
}

/* Botões Customizados */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-btn);
    transition: background-color var(--t-snappy), transform var(--t-snappy), box-shadow var(--t-snappy);
    text-align: center;
    min-height: 48px; /* Altura mínima de toque mobile */
}

.btn-primary {
    background-color: var(--gold);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.btn-secondary {
    background-color: transparent;
    color: var(--cream);
    border: 1px solid rgba(235, 230, 222, 0.3);
}

/* ---- CTA premium (.cta-anim): rotulo roll-up + sheen diagonal + micro-detalhes ---- */
/* So transform/opacity (GPU). Sobrio: a forma flat e a paleta nao mudam; o movimento  */
/* e que carrega o requinte. Usado no "Fale Conosco" do header e nos botoes WhatsApp. */
.cta-anim {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Faixa de luz diagonal que varre o botao uma vez por hover */
.cta-anim::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
    transform: translateX(-180%) skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}

@keyframes ctaSheen {
    from { transform: translateX(-180%) skewX(-18deg); }
    to { transform: translateX(340%) skewX(-18deg); }
}

/* Rotulo em duas copias empilhadas: no hover a de cima rola pra fora e a debaixo assume */
.cta-label {
    display: flex;
    flex-direction: column;
    height: 1.3em;
    line-height: 1.3;
    overflow: hidden;
}

.cta-label-inner {
    display: block;
    flex-shrink: 0;
    white-space: nowrap; /* forca 1 linha -- .cta-label tem altura fixa (1.3em) pro efeito
                            roll-up, e uma 2a linha fica cortada por overflow:hidden sem aviso */
    transition: transform 0.45s var(--ease-premium);
}

/* Hovers de Botão Seguros e Sofisticados */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background-color: var(--gold-hover);
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(34, 34, 34, 0.18);
    }

    .btn-secondary:hover {
        background-color: rgba(235, 230, 222, 0.05);
        border-color: var(--cream);
        transform: translateY(-2px);
    }

    .cta-anim:hover::before {
        animation: ctaSheen 0.9s var(--ease-premium);
    }

    .cta-anim:hover .cta-label-inner {
        transform: translateY(-100%);
    }
}

/* Feedback fisico de clique */
.btn:active {
    transform: translateY(0) scale(0.99);
}

.btn-large {
    padding: 18px 36px;
    font-size: 0.95rem;
}

/* "Enviar Mensagem via WhatsApp" (unico uso de .btn-large no site) nao cabe em
   1 linha nas telas mais estreitas com o padding/fonte padrao -- ver .cta-label-inner. */
@media (max-width: 479px) {
    .btn-large {
        padding: 16px 18px;
        font-size: 0.7rem;
        letter-spacing: 0.03em;
    }
}

/* ==========================================================================
   SEÇÃO 0: NAVBAR INTELIGENTE
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 1000;
    background-color: transparent;
    transition: transform var(--t-smooth), background-color var(--t-smooth), border-color var(--t-smooth);
    border-bottom: 1px solid transparent;
}

/* Navbar Scrolled: fundo solido (sem backdrop-filter -- mesmo halo fantasma do
   team-modal-overlay em captura de tela inteira, ver backdrop-filter-header-luz-compositor) */
.navbar.scrolled {
    background-color: rgba(34, 34, 34, 0.96);
    border-color: rgba(235, 230, 222, 0.08);
}

/* Lógica de Visibilidade Estrita via IntersectionObserver */
.navbar.navbar-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Full-bleed: logo encostada na borda esquerda, CTA na direita (ref. Paul Weiss) */
.nav-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (min-width: 768px) {
    .nav-container {
        padding: 0 36px;
        gap: 28px;
    }
}

.nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
    order: 1;
    margin-right: auto; /* empurra o resto (links, whatsapp, hamburguer) pra direita, qualquer combinacao */
}

.logo-img {
    height: 46px;
    width: auto;
    object-fit: contain;
}

/* Mobile estreito: logo compacta pra caber ao lado do CTA rotulado + hamburguer */
@media (max-width: 479px) {
    .logo-img {
        height: 34px;
    }
}

.nav-links {
    order: 2;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Micro-interação de Link com Linha Expansiva */
.nav-item {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cream);
    padding: 8px 0;
    position: relative;
    transition: color var(--t-snappy);
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .nav-item:hover {
        color: var(--gold);
    }
    
    .nav-item:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Dropdown "Blog" -> categorias do informativo (Dropdown Patterns.md, origem HAAS). */
/* display:contents no mobile: o wrapper some do fluxo, o <a> continua filho direto  */
/* do <li> do drawer (largura/numeracao intactas). So vira dropdown de verdade a     */
/* partir do breakpoint desktop do proprio header (992px, ver .nav-links acima).     */
.nav-group {
    display: contents;
}

@media (min-width: 992px) {
    .nav-group {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    /* Caret = span de verdade, injetado pelo JS logo apos o texto (nunca ::after: */
    /* .nav-item ja usa ::after pro sublinhado do hover, e os dois colidiriam no   */
    /* mesmo pseudo-elemento -- o quadradinho herdava position:absolute/bottom:0/  */
    /* left:0 do sublinhado e aparecia fora do lugar em vez de ao lado do texto).  */
    .nav-group__trigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-caret {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 240ms var(--ease-premium);
        opacity: 0.65;
    }

    .nav-group.is-open .nav-caret {
        transform: rotate(225deg);
    }

    /* Painel: comeca invisivel, deslocado 8px p/ baixo. padding-top = bridge anti dead-zone */
    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        padding-top: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 220ms var(--ease-premium), transform 220ms var(--ease-premium), visibility 0s linear 220ms;
        z-index: 10;
    }

    .nav-group.is-open .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        transition: opacity 220ms var(--ease-premium), transform 220ms var(--ease-premium), visibility 0s;
    }

    /* Card minimalista: fundo solido (sem backdrop-filter -- evita o vazamento de luz */
    /* do blur sobre o hero escuro, ja documentado em .navbar.scrolled) */
    .nav-dropdown__inner {
        min-width: 300px;
        background-color: var(--navy);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-btn);
        box-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.55);
        padding: 8px;
    }

    .nav-dropdown__eyebrow {
        font-family: var(--font-ui);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--gold);
        margin: 8px 14px 10px;
    }

    .nav-dropdown__item {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 11px 14px;
        border-radius: var(--radius-btn);
        transition: background-color var(--t-snappy);
    }

    .nav-dropdown__item + .nav-dropdown__item {
        border-top: 1px solid rgba(235, 230, 222, 0.08);
    }

    .nav-dropdown__item:hover,
    .nav-dropdown__item:focus-visible {
        background-color: rgba(178, 148, 116, 0.12);
        outline: none;
    }

    .nav-dropdown__label {
        font-family: var(--font-ui);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--cream);
        transition: color var(--t-snappy);
    }

    .nav-dropdown__item:hover .nav-dropdown__label {
        color: var(--gold);
    }

    .nav-dropdown__sub {
        font-family: var(--font-ui);
        font-size: 0.75rem;
        color: rgba(235, 230, 222, 0.55);
        line-height: 1.4;
    }
}

/* CTA do header com rotulo: unico caminho ao WhatsApp visivel durante o Hero (FAB oculto ate #sobre) */
.nav-whatsapp {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-btn);
    background-color: var(--gold);
    color: var(--navy);
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: background-color var(--t-snappy), transform var(--t-snappy), box-shadow var(--t-snappy);
}

.nav-whatsapp-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform 0.45s var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .nav-whatsapp:hover {
        background-color: var(--gold-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    }

    .nav-whatsapp:hover .nav-whatsapp-icon {
        transform: scale(1.15) rotate(-8deg);
    }
}

.nav-whatsapp:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 479px) {
    .nav-whatsapp {
        height: 40px;
        padding: 0 12px;
        font-size: 0.6875rem;
        gap: 6px;
    }
}

/* Menu Toggle Mobile (Hamburguer) */
.menu-toggle {
    order: 4;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    z-index: 1010;
}

.menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: var(--cream);
    transition: transform var(--t-snappy), opacity var(--t-snappy);
}

/* Navbar Responsiva Mobile */
@media (max-width: 991px) {
    .menu-toggle {
        display: flex;
    }

    /* .nav-group vira display:contents aqui (ver acima): sem isto o painel do    */
    /* dropdown do Blog renderizaria solto dentro do drawer, junto do link. */
    .nav-dropdown {
        display: none;
    }

    .nav-caret {
        display: none;
    }

    /* Overlay escurecedor atras do drawer (classe .menu-open no body via JS) */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(10, 10, 10, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-smooth);
        z-index: 999;
    }

    body.menu-open::before {
        opacity: 1;
    }

    /* Drawer editorial: itens numerados sobre hairlines, rotulo no topo */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--navy);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 104px 32px 40px;
        gap: 0;
        counter-reset: navitem;
        transform: translateX(100%);
        transition: transform var(--t-smooth);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
        border-left: 1px solid var(--border-dark);
        overflow-y: auto;
    }

    /* Rotulo discreto no alto do drawer */
    .nav-links::before {
        content: 'Menu';
        font-family: var(--font-ui);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--gold);
        margin-bottom: 14px;
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links li {
        width: 100%;
        counter-increment: navitem;
        border-top: 1px solid rgba(235, 230, 222, 0.08);
        opacity: 0;
        transform: translateX(18px);
        transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
    }

    .nav-links li:last-child {
        border-bottom: 1px solid rgba(235, 230, 222, 0.08);
    }

    /* Entrada em cascata quando o drawer abre; saida imediata (sem delay) ao fechar */
    .nav-links.active li {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-links.active li:nth-child(1) { transition-delay: 0.10s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.14s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.18s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.22s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.26s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.30s; }
    .nav-links.active li:nth-child(7) { transition-delay: 0.34s; }
    .nav-links.active li:nth-child(8) { transition-delay: 0.38s; }

    .nav-item {
        display: flex;
        align-items: baseline;
        gap: 14px;
        width: 100%;
        padding: 15px 2px;
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--cream);
    }

    /* Numeracao editorial 01-08 na serifa de destaque */
    .nav-item::before {
        content: counter(navitem, decimal-leading-zero);
        font-family: var(--font-accent);
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--gold);
        letter-spacing: 0.08em;
    }

    /* Menu Ativo Hamburguer */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* ==========================================================================
   SEÇÃO 1: HERO (#inicio)
   ========================================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-end; /* texto ancorado embaixo, nao mais centralizado */
    background-color: var(--navy);
    padding-top: var(--nav-height);
    color: var(--cream);
    border-bottom: 1px solid rgba(235, 230, 222, 0.05);
    position: relative;
    overflow: hidden;
}

/* Scrim independente no topo, so pra legibilidade da navbar sobre a foto */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Foto real do escritorio (ensaio) como fundo full-bleed */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Wrapper SO do Ken Burns: mantem o scale() longe do transform que o JS do
   parallax escreve na img (ver comentario no HTML e em initHeroParallax). */
.hero-media-zoom {
    position: absolute;
    inset: 0;
    animation: heroKenBurns 2.6s var(--ease-premium);
}

/* Assentamento sutil no carregamento: comeca um pouco mais proxima e assenta em
   escala normal, reforcando o caráter cinematografico da entrada sem ser chamativo.
   Leve (1.025) e lento (2.6s): o foco e o texto, a foto so "respira" ao fundo. */
@keyframes heroKenBurns {
    from { transform: scale(1.025); }
    to { transform: scale(1); }
}

.hero-media-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Sobra de 12% de altura SO embaixo (top:0 fixo preserva o enquadramento do
       topo -- respiro acima da cabeca): reserva de bleed para o parallax de scroll
       (8% de deslocamento) nunca vazar a cor do fundo da secao (ver initHeroParallax).
       O JS escreve translateY() direto aqui -- sem animation neste elemento,
       entao nao ha disputa de "transform" com o Ken Burns (que vive no wrapper). */
    height: 112%;
    object-fit: cover;
    object-position: 30% 50%;
    filter: grayscale(95%) contrast(108%) brightness(92%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-media-zoom {
        animation: none;
    }
}

/* Veu radial navy: concentra na zona calma da foto (sem rosto/mao), sem aresta reta */
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 58% 78% at 92% 48%, rgba(34, 34, 34, 0.97) 0%, rgba(34, 34, 34, 0.9) 42%, rgba(34, 34, 34, 0.4) 70%, rgba(34, 34, 34, 0) 100%);
}

/* Grao fino monocromatico sobre a foto (mesma receita do .cta::before, sem chuvisco colorido) */
.hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.04;
    mix-blend-mode: soft-light;
}

.hero-container {
    width: 100%;
    padding: 64px 44px 96px 24px; /* right apertado: bloco de texto quase encostando na borda */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* bloco de texto ancorado no lado do veu (direita) */
    text-align: left;
    position: relative;
    z-index: 2;
}

.hero-kicker {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 20px;
}

/* Heading fora do --font-heading padrao: usa a serifa de destaque (--font-accent) */
/* pesada (600) para dar o impacto editorial/institucional que a Work Sans Regular nao dava. */
/* Segunda excecao do site: ver .about-heading (secao Quem Somos). */
.hero-title {
    font-family: var(--font-accent);
    font-size: clamp(2.65rem, 5.2vw, 3.7rem);
    font-weight: 600;
    line-height: 1.16;
    max-width: 560px;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    color: var(--cream);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-subtitle {
    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 300;
    line-height: 1.6;
    max-width: 440px;
    margin-bottom: 40px;
    color: rgba(235, 230, 222, 0.75);
}

/* Link discreto: unico "CTA" que sobra no corpo do Hero (o WhatsApp mudou pro header, ver .nav-whatsapp) */
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2px; /* area de toque ~48px sem precisar de fundo visivel */
    margin: -14px -2px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cream);
    border-bottom: 1px solid rgba(235, 230, 222, 0.4);
    transition: color var(--t-snappy), border-color var(--t-snappy), gap var(--t-snappy);
}

.hero-link-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .hero-link:hover {
        color: var(--gold);
        border-color: var(--gold);
        gap: 14px;
    }

    .hero-link:hover .hero-link-arrow {
        transform: translateY(3px);
    }
}

/* Os 3 pontos sao um componente exclusivo do mobile (desktop mantem o paragrafo) */
.hero-points {
    display: none;
    list-style: none;
}

/* ==========================================================================
   CORTINA DE ENTRADA DO HERO (mask reveal)
   .hero-mask e a janela fixa (overflow:hidden, sempre visivel/estatica); o
   filho comeca 120% abaixo da propria altura (fora da janela, invisivel) e
   sobe ate translateY(0), como se emergisse por uma fresta fixa. Mais impacto
   que o fade+rise generico do .reveal, mantendo a sobriedade (sem bounce, sem
   caractere-por-caractere). Sobrescreve o .reveal aqui SO dentro do Hero --
   o resto do site continua com o fade+rise padrao (ver §2464).
   ========================================================================== */
.hero-mask.reveal {
    opacity: 1;
    transform: none;
    transition: none;
    overflow: hidden;
    display: block;
}

.hero-mask > .hero-kicker {
    display: inline-block;
}

.hero-mask > .hero-kicker,
.hero-mask > .hero-title,
.hero-mask > .hero-subtitle,
.hero-mask > .hero-points {
    transform: translateY(120%);
    transition: transform 0.9s var(--ease-premium);
    /* Longhand DEPOIS do shorthand na MESMA regra: assim herda --hero-delay do
       wrapper sem perder pra especificidade (uma regra separada so de delay
       com selector mais fraco perderia pro shorthand acima -- ja aconteceu). */
    transition-delay: var(--hero-delay, 0ms);
    will-change: transform;
}

.hero-mask.revealed > .hero-kicker,
.hero-mask.revealed > .hero-title,
.hero-mask.revealed > .hero-subtitle,
.hero-mask.revealed > .hero-points {
    transform: translateY(0);
}

/* CTA: fica de fora da cortina (o hack de area-de-toque com margin negativo do
   .hero-link nao convive bem com um pai overflow:hidden auto-ajustado) -- ganha
   um fade+blur+rise mais suave em vez disso, coerente como "nota de rodape" da
   sequencia depois do impacto do titulo. */
.hero-link.reveal {
    transform: translateY(24px);
    filter: blur(6px);
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium), filter 0.8s var(--ease-premium);
    transition-delay: var(--hero-delay, 0ms);
}

.hero-link.reveal.revealed {
    filter: blur(0);
}

/* Cadencia espacada da coreografia: kicker -> titulo -> subtitulo/pontos -> CTA.
   Custom property (nao transition-delay direto) para herdar do wrapper sem
   depender de especificidade de selector. */
.hero-delay-1 { --hero-delay: 0ms; }
.hero-delay-2 { --hero-delay: 150ms; }
.hero-delay-3 { --hero-delay: 300ms; }
.hero-delay-4 { --hero-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
    .hero-mask > .hero-kicker,
    .hero-mask > .hero-title,
    .hero-mask > .hero-subtitle,
    .hero-mask > .hero-points,
    .hero-link.reveal {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Mobile: recorte da foto focado no rosto, veu cobrindo quase tudo (sem "sobra" pra respirar foto numa tela estreita). */
/* padding-bottom so estetico agora -- o widget do WhatsApp fica oculto no Hero em qualquer viewport, sem risco de colisao. */
@media (max-width: 767px) {
    .hero {
        padding-bottom: 64px;
    }

    .hero-media-img {
        object-position: 38% 22%;
    }

    .hero-media::after {
        background: radial-gradient(ellipse 100% 90% at 62% 38%, rgba(34, 34, 34, 0.93) 0%, rgba(34, 34, 34, 0.86) 55%, rgba(34, 34, 34, 0.55) 80%, rgba(34, 34, 34, 0.3) 100%);
    }

    .hero-container {
        padding: 28px 24px 24px;
    }

    /* Hero enxuto: titulo mais compacto, paragrafo longo sai, entram 3 pontos */
    /* editoriais com hairline -- escaneaveis num relance, sem parede de texto. */
    .hero-kicker {
        font-size: 0.75rem;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 2.15rem;
        line-height: 1.18;
        margin-bottom: 28px;
    }

    .hero-subtitle {
        display: none;
    }

    .hero-points {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 36px;
    }

    .hero-points li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-top: 1px solid rgba(235, 230, 222, 0.16);
        font-family: var(--font-ui);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(235, 230, 222, 0.82);
    }

    .hero-points li::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--gold);
        flex-shrink: 0;
    }
}

/* ==========================================================================
   SEÇÃO 2: A ADVOGADA / SOBRE (#sobre)
   ========================================================================== */
.about {
    background-color: var(--cream);
    color: var(--navy);
}

/* Cabecalho tipografico: kicker + titulo grande + paragrafo de abertura.
   Sem .reveal nos filhos individuais -- o bloco inteiro entra junto (mesmo
   padrao estatico de cabecalhos de outras secoes, ex. .method-header). */
.about-intro {
    max-width: 900px;
    margin-bottom: 56px;
}

.about-kicker {
    margin-bottom: 20px;
}

/* Unica outra excecao do site (alem do .hero-title) a usar --font-accent:
   serifa pesada pra dar o "peso editorial" da referencia (estilo Paul Weiss),
   contrastando com o Work Sans do .section-title padrao usado no resto do site. */
.about-heading {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 28px;
    text-wrap: balance;
}

.about-lead {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.65;
    color: rgba(34, 34, 34, 0.85);
    max-width: 680px;
}

/* Paineis de apoio: bloco chapado (sem sombra, cantos retos) no lugar dos
   paineis azul-acinzentados da referencia -- traduzidos pra paleta da marca. */
.about-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .about-panels {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

.about-panel {
    background-color: var(--nude);
    padding: 36px 40px;
}

.about-panel-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(34, 34, 34, 0.85);
}

/* --- LINHA DO TEMPO HISTÓRICA --- */
.timeline-wrapper {
    margin-top: 80px;
    border-top: 1px solid var(--border-light);
    padding-top: 60px;
}

.timeline-section-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-bottom: 40px;
    font-weight: 500;
}

.timeline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .timeline-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
}

/* Ledger editorial: ano grande em serifa sobre hairline, sem chip/sombra */
.timeline-item {
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    padding-top: 24px;
}

.timeline-year {
    display: block;
    font-size: 2rem;
    color: var(--gold-hover);
    margin-bottom: 16px;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.timeline-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   SEÇÃO: VALORES INSTITUCIONAIS (#valores)
   ========================================================================== */
.institutional {
    background-color: var(--cream);
    border-top: 1px solid var(--border-light);
    color: var(--navy);
}

.institutional-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .institutional-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .inst-card-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .institutional-grid {
        grid-template-columns: 1fr 1fr 1.2fr;
    }
    
    .inst-card-wide {
        grid-column: span 1;
    }
}

/* Colunas editoriais separadas por hairline (sem caixas flutuantes) */
.inst-card {
    padding: 28px 0 0;
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .inst-card {
        padding: 8px 0 0 36px;
        border-top: none;
        border-left: 1px solid rgba(178, 148, 116, 0.45);
    }

    .inst-card:first-child {
        padding-left: 0;
        border-left: none;
    }
}

.inst-kicker {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 10px;
    font-weight: 600;
}

.inst-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.inst-text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(34, 34, 34, 0.8);
}

.inst-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.inst-list li {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(34, 34, 34, 0.85);
    position: relative;
    padding-left: 20px;
}

.inst-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 1.25rem;
    line-height: 1;
}

.inst-list li strong {
    font-weight: 600;
    color: var(--navy);
}

/* ==========================================================================
   SEÇÃO 3: ÁREAS DE ATUAÇÃO (#atuacao)
   ========================================================================== */
.practice {
    background-color: var(--navy);
    color: var(--cream);
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.practice-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.practice-subtitle {
    font-size: 1.1rem;
    color: rgba(235, 230, 222, 0.7);
    line-height: 1.6;
}

.practice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 48px;
}

@media (min-width: 768px) {
    .practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .practice-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ledger editorial: bloco flat sobre o navy, aberto por hairline dourada (sem caixa) */
.practice-card {
    padding: 28px 0 0;
    border-top: 1px solid rgba(178, 148, 116, 0.35);
    transition: border-color var(--t-smooth);
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.card-number {
    font-size: 2.5rem;
    color: rgba(178, 148, 116, 0.45);
    margin-bottom: 20px;
    transition: color var(--t-smooth);
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--cream);
}

.card-desc {
    font-size: 0.875rem;
    color: rgba(235, 230, 222, 0.7);
    line-height: 1.65;
}

/* Card especial com Foto do Ensaio */
/* Camadas (topo -> base): moldura de tamanho FIXO (altura = a linha do grid, igual as     */
/* demais colunas, overflow:hidden) que nao muda de tamanho no hover; dentro dela a foto   */
/* descansa ampliada (scale > 1, origem na base) e no hover recua para escala 1, revelando */
/* mais da cena de baixo para cima sem nunca extrapolar os limites da moldura; a legenda   */
/* fica centralizada e sobe suavemente (ease-in) por cima do scrim junto com o zoom-out.   */
.practice-card-media {
    padding: 0;
    position: relative;
    border-top: none;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.card-media-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* foco no terno e nas maos (nao no rosto/topo da foto) */
    object-position: 50% 38%;
    /* p&b consistente com o resto da fotografia do site */
    filter: grayscale(100%) contrast(105%) brightness(78%);
    transform: scale(1.12);
    transform-origin: 50% 100%;
    transition: transform 0.9s var(--ease-premium);
}

/* Legenda centralizada, escondida em repouso (opacity) e um span interno que sobe */
/* de baixo para cima em ease-in no hover, junto com o zoom-out da foto. */
.card-media-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96px;
    padding: 0 24px;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.35) 70%, rgba(10, 10, 10, 0) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.card-media-caption span {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    line-height: 1.65;
    letter-spacing: 0.05em;
    color: var(--gold);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
    transform: translateY(24px);
    transition: transform 0.5s ease-in;
}

@media (hover: hover) and (pointer: fine) {
    .practice-card-media:hover .card-media-img {
        transform: scale(1);
    }

    .practice-card-media:hover .card-media-caption {
        opacity: 1;
    }

    .practice-card-media:hover .card-media-caption span {
        transform: translateY(0);
    }
}

/* Touch: sem hover -> foto e legenda empilhadas em fluxo normal, sempre visiveis */
@media (max-width: 767px) {
    .practice-card-media {
        min-height: 0;
        height: auto;
    }

    .card-media-img {
        position: static;
        display: block;
        height: 360px;
        transform: none;
    }

    .card-media-caption {
        position: static;
        height: auto;
        padding: 20px 0 0;
        background: none;
        opacity: 1;
    }

    .card-media-caption span {
        transform: none;
    }
}

/* Hovers dos Cards: flat, sem levitar -- a hairline e o numero acendem */
@media (hover: hover) and (pointer: fine) {
    .practice-card:hover {
        border-top-color: var(--gold);
    }

    .practice-card:hover .card-number {
        color: var(--gold);
    }
}

/* ==========================================================================
   SEÇÃO 4: METODOLOGIA (#metodologia)
   ========================================================================== */
.method {
    background-color: var(--nude);
    color: var(--navy);
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.method-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.method-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .method-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
}

.method-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.method-num {
    font-size: clamp(3.5rem, 6vw, 5rem);
    color: rgba(34, 34, 34, 0.12); /* Opacidade reduzida conforme diretriz */
    margin-bottom: 16px;
}

.method-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.method-desc {
    font-size: 0.9rem;
    color: rgba(34, 34, 34, 0.85);
    line-height: 1.65;
}

/* Destaque Metodologia / Foto Atendendo */
.method-featured {
    display: grid;
    grid-template-columns: 1fr;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid rgba(178, 148, 116, 0.2);
}

@media (min-width: 992px) {
    .method-featured {
        grid-template-columns: 1.2fr 1fr;
    }
}

.method-featured-content {
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .method-featured-content {
        padding: 60px;
    }
}

/* Hover do card = "focus pull": o lado esquerdo passa pelo desfoque e TERMINA na foto */
/* nitida e COLORIDA. Sem filter animado em runtime -- sao dois assets pre-prontos      */
/* (desfocado e nitido, mesmo recorte/cor) em crossfade escalonado. Barato na GPU. */
.featured-swap-blur,
.featured-swap-sharp {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    /* p&b padrao do site (mesma receita do .team-img) */
    filter: grayscale(100%) contrast(106%) brightness(0.96);
}

/* Saida (sem hover): o nitido desfoca rapido e o blur segura um instante antes de sumir */
.featured-swap-blur {
    background-image: url('assets/images/compromisso_reuniao_blur.webp');
    transition: opacity 0.6s var(--ease-premium) 0.15s;
}

.featured-swap-sharp {
    background-image: url('assets/images/compromisso_reuniao.webp');
    transition: opacity 0.45s var(--ease-premium);
}

/* Mesma tipografia nos DOIS estados: o painel do hover usa ESTAS classes -- a       */
/* transicao le "limpa" porque so o conteudo muda, nunca a formatacao. Na saida do    */
/* hover o texto de repouso volta por ULTIMO (delay 0.3s, depois do blur dissolver). */
.featured-heading {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-bottom: 18px;
    font-weight: 500;
    transition: opacity 0.5s var(--ease-premium) 0.3s;
}

.featured-text {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(34, 34, 34, 0.8);
    transition: opacity 0.5s var(--ease-premium) 0.3s;
}

.featured-text + .featured-text {
    margin-top: 14px;
}

/* A coluna da foto dita a altura via aspect-ratio do recorte exato (1200x1143):        */
/* garante cabelo e maos da advogada sempre visiveis, sem novo corte pelo object-fit.   */
.method-featured-media {
    width: 100%;
    min-height: 300px;
    position: relative;
    aspect-ratio: 1200 / 1143;
    overflow: hidden;
}

/* Parallax sutil (JS escreve translateY via rAF): a foto e 8% mais alta que o quadro, */
/* com 4% de folga p/ cada lado -- o corte maximo do topo (3.7%) fica ABAIXO da margem  */
/* acima do cabelo baked no crop (5.5%), entao a cabeca nunca corta (geometria do       */
/* padrao parallax head-safe da agencia). */
.featured-img {
    position: absolute;
    top: -4%;
    left: 0;
    width: 100%;
    height: 108%;
    object-fit: cover;
    will-change: transform;
    /* Colorida, natural -- unica foto "de repouso" fora do padrao p&b do site (pedido do operador) */
    filter: none;
}

/* Lado direito no hover: painel claro com o texto-compromisso, na MESMA formatacao */
/* do texto de repouso (usa .featured-heading/.featured-text) e mesmo padding do     */
/* .method-featured-content -> os dois estados de texto sao visualmente identicos. */
.featured-hover-panel {
    position: absolute;
    inset: 0;
    background-color: #FBF8F3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
    pointer-events: none;
}

@media (min-width: 768px) {
    .featured-hover-panel {
        padding: 60px;
    }
}

/* GATILHO: a classe .is-inverted, escrita pelo JS (initFeaturedInvert) -- NAO :hover  */
/* cru. Coreografias com delay escalonado congelam pela metade quando o :hover reverte */
/* no meio da sequencia (camada parada esperando o proprio delay); o JS aplica         */
/* intencao (hover sustentado inicia), trava (a entrada sempre COMPLETA antes de       */
/* poder reverter) e graca na saida (re-entrada rapida cancela a reversao).            */
/* Coreografia de entrada: texto SAI primeiro, blur entra atrasado, nitido foca por    */
/* ultimo. Saida espelhada nas regras-base de cada camada. */
@media (hover: hover) and (pointer: fine) {
    .method-featured.is-inverted .method-featured-content .featured-heading,
    .method-featured.is-inverted .method-featured-content .featured-text {
        opacity: 0;
        transition: opacity 0.35s var(--ease-premium);
    }

    .method-featured.is-inverted .featured-swap-blur {
        opacity: 1;
        transition: opacity 0.5s var(--ease-premium) 0.2s;
    }

    .method-featured.is-inverted .featured-swap-sharp {
        opacity: 1;
        transition: opacity 1s var(--ease-premium) 0.45s;
    }

    .method-featured.is-inverted .featured-hover-panel {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s var(--ease-premium) 0.3s, transform 0.8s var(--ease-premium) 0.3s;
    }
}

/* ==========================================================================
   SEÇÃO 5: FAQ / DÚVIDAS (#faq)
   ========================================================================== */
.faq {
    background-color: var(--cream);
    color: var(--navy);
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.faq-header {
    max-width: 800px;
    margin-bottom: 60px;
}

/* Lista editorial com hairlines (sem cards brancos arredondados) */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(178, 148, 116, 0.45);
}

.faq-item {
    border-top: 1px solid rgba(178, 148, 116, 0.45);
}

.faq-question {
    width: 100%;
    padding: 26px 4px 26px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--navy);
    transition: color var(--t-snappy);
}

.faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 20px;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--gold);
    transition: transform var(--t-smooth);
}

/* Barra horizontal */
.faq-icon::before {
    top: 7px;
    left: 0;
    width: 100%;
    height: 2px;
}

/* Barra vertical */
.faq-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
}

/* Estado Aberto do Ícone */
.faq-question[aria-expanded="true"] .faq-icon::after {
    transform: rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-icon::before {
    transform: rotate(90deg);
    opacity: 0;
}

/* UX do Accordion Obrigatória (CSS Grid para animação de altura) */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-smooth);
}

/* Regra exigida pelo criadordesite.md que faltava: sem ela o accordion nunca abre */
.faq-answer.open {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-text {
    font-family: var(--font-body);
    padding: 0 48px 26px 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(34, 34, 34, 0.8);
    max-width: 65ch;
}

@media (hover: hover) and (pointer: fine) {
    .faq-question:hover {
        color: var(--gold-hover);
    }
}

/* ==========================================================================
   SEÇÃO 6: CTA FINAL & CONTATO (#contato)
   ========================================================================== */
.cta {
    background-color: var(--navy);
    color: var(--cream);
    position: relative;
}

/* Grain fino monocromatico: feColorMatrix saturate 0 elimina o chuvisco COLORIDO do feTurbulence puro, */
/* que sobre o navy lia como pixels estranhos; frequencia mais alta deixa o grao mais fino e uniforme.  */
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Statement flat: sem caixa dentro de caixa */
.cta-card {
    padding: 20px 0;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cta-kicker {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 16px;
}

.cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.5vw, 3.25rem);
    line-height: 1.12;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.cta-subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: rgba(235, 230, 222, 0.7);
    max-width: 600px;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Grid de Informações de Contato: 3 itens -- Telefone (fixo, pra ligar), WhatsApp
   (numero diferente, pra mensagem) e Endereço. Numeros distintos de proposito:
   esclarecer aqui evita o usuario tentar chamar no WhatsApp o telefone fixo. */
.cta-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
    max-width: 760px;
    margin-bottom: 48px;
    border-top: 1px solid rgba(235, 230, 222, 0.1);
    border-bottom: 1px solid rgba(235, 230, 222, 0.1);
    padding: 30px 0;
}

@media (min-width: 700px) {
    .cta-info-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.cta-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 700px) {
    .cta-info-item {
        align-items: flex-start;
        text-align: left;
    }
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 8px;
}

.info-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--cream);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

a.info-value {
    transition: color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    a.info-value:hover {
        color: var(--gold);
    }
}

/* ==========================================================================
   SEÇÃO 7: FOOTER
   ========================================================================== */
.footer {
    background-color: #171717;
    color: rgba(235, 230, 222, 0.6);
    border-top: 1px solid rgba(235, 230, 222, 0.05);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 40px 24px;
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(235, 230, 222, 0.05);
}

@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.logo-img-footer {
    height: 35px;
    width: auto;
    object-fit: contain;
    filter: opacity(80%);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.footer-nav a {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(235, 230, 222, 0.7);
    transition: color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .footer-nav a:hover {
        color: var(--gold);
    }
}

.footer-bottom {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copy {
    max-width: 500px;
}

.footer-credit {
    font-weight: 500;
    color: rgba(235, 230, 222, 0.6);
}

.credit-link {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color var(--t-snappy), border-color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .credit-link:hover {
        color: var(--cream);
        border-bottom-color: var(--cream);
    }
}

/* ==========================================================================
   SEÇÃO: LOCALIZAÇÃO (#localizacao)
   ========================================================================== */
.location {
    background-color: var(--navy);
    color: var(--cream);
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

/* Grao fino monocromatico: mesma receita do Hero/CTA (feColorMatrix saturate 0 evita
   o chuvisco colorido do feTurbulence puro sobre o navy) */
.location::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
}

@media (min-width: 900px) {
    .location-grid {
        grid-template-columns: 1fr 1.25fr;
        gap: 64px;
        align-items: stretch;
    }
}

.location-info {
    max-width: 560px;
}

.location-lead {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(235, 230, 222, 0.85);
    margin-bottom: 36px;
}

.location-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--nude);
    border: 1px solid var(--border-dark);
    overflow: hidden;
    margin-bottom: 36px;
}

/* Mesmo padrao das fotos de perfil (.team-img: p&b em repouso, hover restaura
   a cor) só que em ZOOM OUT -- comeca mais fechado (aprox. o enquadramento
   anterior) e o hover afasta, revelando mais cenario da foto (mais espaco ao
   redor). Curva propria (nao --ease-premium, que e front-loaded/ease-out-expo)
   em ease-in-out simetrico, pra a velocidade crescer e diminuir suavemente
   nas duas pontas, sem parecer abrupta. */
.location-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
    filter: grayscale(100%) contrast(106%) brightness(0.96);
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), filter 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
    .location-photo-frame:hover .location-photo {
        transform: scale(1);
        filter: none;
    }
}

.location-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.location-fact {
    display: flex;
    flex-direction: column;
}

.location-map-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border-dark);
}

@media (min-width: 900px) {
    .location-map-frame {
        aspect-ratio: auto;
        height: 100%;
        min-height: 480px;
    }
}

.location-map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nude);
}

/* Retonalizacao: filtro so no pane dos tiles do Leaflet -- marker/popup
   customizados vivem em panes separados por cima e ficam intocados. */
.location-map-canvas .leaflet-tile-pane {
    filter: grayscale(1) contrast(1.05) brightness(1.1);
}

/* Tint navy por cima dos tiles: z-index entre o tilePane (200) e o
   markerPane (600) do Leaflet, pra nao colorir o pin/popup junto. */
.location-map-tint {
    position: absolute;
    inset: 0;
    z-index: 350;
    background-color: var(--navy);
    mix-blend-mode: color;
    opacity: 0.55;
    pointer-events: none;
}

/* Controles do Leaflet (zoom +/-, atribuicao) reskin flat/hairline */
.location-map-canvas .leaflet-control-zoom {
    border: 1px solid var(--border-dark);
    border-radius: 0;
    box-shadow: none;
}

.location-map-canvas .leaflet-control-zoom a {
    background-color: var(--navy);
    color: var(--cream);
    border-radius: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.location-map-canvas .leaflet-control-zoom-in {
    border-bottom: 1px solid var(--border-dark);
}

@media (hover: hover) and (pointer: fine) {
    .location-map-canvas .leaflet-control-zoom a:hover {
        background-color: rgba(235, 230, 222, 0.08);
        color: var(--gold);
    }
}

.location-map-canvas .leaflet-control-attribution {
    background-color: rgba(34, 34, 34, 0.75);
    color: rgba(235, 230, 222, 0.65);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 0;
}

.location-map-canvas .leaflet-control-attribution a {
    color: rgba(235, 230, 222, 0.85);
}

/* ---- Pin customizado: conteudo do divIcon do marker. O Leaflet posiciona e
   move o marker sozinho (pan/zoom) -- aqui so o visual do pin em si. ---- */
.location-pin {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    color: var(--gold);
    cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.location-pin-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.location-pin::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-bottom: -6px;
    border-radius: 50%;
    background-color: var(--gold);
    opacity: 0.55;
    animation: locationPinPulse 2.4s var(--ease-premium) infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes locationPinPulse {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .location-pin::before {
        animation: none;
    }
}

/* ---- Popup customizado (bindPopup do marker, conteudo = .location-card):
   sobrescreve o chrome arredondado/com sombra padrao do Leaflet pela
   linguagem flat/hairline do site -- a "seta" vira o proprio leaflet-popup-tip. ---- */
.location-map-canvas .leaflet-popup-content-wrapper {
    background-color: var(--navy);
    border: 1px solid var(--border-dark);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.location-map-canvas .leaflet-popup-content {
    margin: 0;
}

.location-map-canvas .leaflet-popup-tip {
    background-color: var(--navy);
    border: 1px solid var(--border-dark);
    box-shadow: none;
}

.location-map-canvas .leaflet-popup-close-button {
    color: rgba(235, 230, 222, 0.5) !important;
}

@media (hover: hover) and (pointer: fine) {
    .location-map-canvas .leaflet-popup-close-button:hover {
        color: var(--gold) !important;
    }
}

.location-card {
    display: block;
    padding: 18px 20px 16px;
    text-decoration: none;
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .location-card:hover .location-card-arrow {
        color: var(--gold);
        border-color: var(--gold);
        transform: translate(2px, -2px);
    }
}

.location-card-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 2px;
}

.location-card-sub {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: rgba(235, 230, 222, 0.65);
    margin-bottom: 12px;
}

.location-card-parking {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--gold);
    padding-top: 12px;
    border-top: 1px solid var(--border-dark);
}

.location-card-parking-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.location-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--cream);
    border: 1px solid var(--border-dark);
    transition: color var(--t-snappy), border-color var(--t-snappy), transform var(--t-snappy);
}

.location-card-arrow svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   SEÇÃO: BLOG / INFORMAÇÃO (#blog)
   ========================================================================== */
.blog {
    background-color: var(--cream);
    color: var(--navy);
    content-visibility: auto;
    contain-intrinsic-size: 800px;
    border-top: 1px solid var(--border-light);
}

.blog-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 48px;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Flat editorial: hairline no topo, sem caixa */
.blog-card {
    padding: 28px 0 0;
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color var(--t-smooth);
    position: relative; /* ancora o ::before do blog-read-more, que estica a hitbox pro card inteiro */
}

.blog-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 600;
}

.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 16px;
    color: var(--navy);
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: rgba(34, 34, 34, 0.8);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* .blog-read-more fica de fora de position:relative de proposito: assim o ::before
   (hitbox esticada) ancora no .blog-card (proximo ancestral posicionado), nao na
   propria caixinha do link. O sublinhado precisa da SUA propria ancora, por isso
   mora num span filho (.blog-read-more-label) em vez de viver direto no link. */
.blog-read-more {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    transition: color var(--t-snappy);
    display: inline-block;
}

.blog-read-more-label {
    position: relative;
    display: inline-block;
}

.blog-read-more-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-snappy);
}

/* Estica a hitbox do link pro card inteiro (titulo/autor/trecho/espaco em branco
   incluidos) -- mesma area que ja dispara o hover (.blog-card:hover acima). */
.blog-read-more::before {
    content: '';
    position: absolute;
    inset: 0;
}

@media (hover: hover) and (pointer: fine) {
    /* Hover no card inteiro (mesma area da hitbox) ja acende o link: nao precisa
       passar exatamente em cima do texto "Ler artigo completo" pra ver a reacao. */
    .blog-card:hover {
        border-top-color: var(--gold);
    }

    .blog-card:hover .blog-read-more {
        color: var(--gold-hover);
    }

    .blog-card:hover .blog-read-more-label::after {
        transform: scaleX(1);
        transform-origin: left;
        background-color: var(--gold-hover);
    }
}

/* ==========================================================================
   PAGINAS DO BLOG (/blog/ e /blog/<slug>/) -- chrome compartilhado via style.css
   ========================================================================== */
/* Nas paginas internas nao ha hero escura: a navbar nasce solida */
.page-blog .navbar {
    background-color: rgba(34, 34, 34, 0.97);
    border-color: rgba(235, 230, 222, 0.08);
}

.blog-hero {
    background-color: var(--navy);
    color: var(--cream);
    padding: calc(var(--nav-height) + 72px) 0 72px;
    position: relative;
}

.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.blog-hero .section-container {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.blog-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--cream);
    margin-bottom: 16px;
    text-wrap: balance;
}

.blog-hero-sub {
    font-size: 1rem;
    color: rgba(235, 230, 222, 0.75);
    max-width: 560px;
    line-height: 1.65;
}

/* Categorias no hub: mesmo ledger editorial do resto do site */
.blog-cat {
    border-top: 1px solid var(--border-light);
}

.blog-cat:first-of-type {
    border-top: none;
}

.blog-cat .section-container {
    padding-top: 72px;
    padding-bottom: 72px;
}

.blog-cat-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 8px;
}

.blog-cat-sub {
    font-size: 0.9rem;
    color: rgba(34, 34, 34, 0.65);
    margin-bottom: 40px;
    max-width: 640px;
}

.blog-card-author {
    font-size: 0.8125rem;
    color: rgba(34, 34, 34, 0.6);
    margin: -12px 0 20px;
}

/* Link "ver todos" no teaser da home */
.blog-all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
    border-bottom: 1px solid rgba(34, 34, 34, 0.35);
    padding-bottom: 6px;
    transition: color var(--t-snappy), border-color var(--t-snappy), gap var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .blog-all-link:hover {
        color: var(--gold-hover);
        border-color: var(--gold-hover);
        gap: 14px;
    }
}

/* Pagina de artigo */
.article {
    background-color: var(--cream);
}

.article-container {
    max-width: 760px;
    margin: 0 auto;
    /* Navbar do artigo e sempre solida (.page-blog .navbar, sem hero atras pra
       ficar transparente) e fixa (position:fixed) -- sem somar --nav-height
       aqui, os 64px de respiro ficavam por baixo dela, cortando o breadcrumb
       (.article-kicker), mais visivel no mobile por causa do titulo maior. */
    padding: calc(var(--nav-height) + 64px) 24px 96px;
}

.article-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--gold-hover);
    margin-bottom: 16px;
}

.article-kicker a {
    color: inherit;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .article-kicker a:hover {
        border-color: currentColor;
    }
}

.article-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 20px;
    text-wrap: balance;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.8125rem;
    color: rgba(34, 34, 34, 0.6);
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(178, 148, 116, 0.45);
}

.article-meta strong {
    color: rgba(34, 34, 34, 0.85);
    font-weight: 600;
}

.article-body p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(34, 34, 34, 0.85);
    margin-bottom: 22px;
    text-wrap: pretty;
}

.article-body h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 44px 0 16px;
}

.article-body ul {
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-body ul li {
    font-family: var(--font-body);
    position: relative;
    padding-left: 20px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(34, 34, 34, 0.85);
}

.article-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 1px;
    background-color: var(--gold-hover);
}

.article-disclaimer {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(34, 34, 34, 0.55);
}

/* Bloco do autor */
.article-author {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    border-bottom: 1px solid rgba(178, 148, 116, 0.45);
}

/* Moldura dupla: quadro externo hairline (destaque) + janela de corte interna com zoom no rosto */
.article-author-frame {
    flex-shrink: 0;
    padding: 5px;
    border: 1px solid rgba(178, 148, 116, 0.5);
    background: rgba(255, 255, 255, 0.35);
}

.article-author-crop {
    display: block;
    width: 78px;
    height: 78px;
    overflow: hidden;
}

.article-author-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Foco no rosto POR FOTO: cada retrato do ensaio tem composicao diferente, entao o ponto */
    /* focal (--fx/--fy) e o zoom (--fs) vem inline de cada <img>, calibrados visualmente.    */
    object-position: var(--fx, 50%) var(--fy, 20%);
    transform: scale(var(--fs, 1.7));
    transform-origin: var(--fx, 50%) var(--fy, 20%);
    filter: grayscale(100%) contrast(106%);
}

.article-author-name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--navy);
    display: block;
}

.article-author-oab {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--gold-hover);
    display: block;
    margin: 2px 0 6px;
}

.article-author-bio {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(34, 34, 34, 0.7);
}

.article-cta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
    transition: color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .article-back:hover {
        color: var(--gold-hover);
    }
}

/* ==========================================================================
   ANIMAÇÃO DE ENTRADA AO ROLAR (SCROLL REVEAL)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
    will-change: opacity, transform;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Transições com Delays Sequenciais */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* Respeita a Acessibilidade (Redução de Movimento) */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SEÇÃO: CORPO JURÍDICO (EQUIPE)
   ========================================================================== */
/* Editorial flat (ref. Paul Weiss): sem card escuro flutuando no creme. */
/* Foto p&b + bloco de texto sobre o proprio fundo da secao, separado por hairline. */
.team {
    background-color: var(--cream);
    border-bottom: 1px solid var(--border-light);
}

.team-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.team-subtitle {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: rgba(34, 34, 34, 0.75);
    margin-top: 15px;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px 40px;
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.team-card {
    display: flex;
    flex-direction: column;
    position: relative; /* ancora o ::after do team-expand-btn, que estica a hitbox pro card inteiro */
}

.team-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #d9d2c7;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* p&b em repouso; hover restaura a cor e aproxima (ver regra abaixo) */
    filter: grayscale(100%) contrast(106%) brightness(0.96);
    transition: transform 0.6s var(--ease-premium), filter 0.6s var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .team-card:hover .team-img {
        transform: scale(1.05);
        filter: none;
    }
}

.team-info {
    padding: 22px 0 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(178, 148, 116, 0.45);
    margin-top: 18px;
}

.team-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--navy);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.team-oab {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--gold-hover);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.team-specialty {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    color: rgba(34, 34, 34, 0.7);
    line-height: 1.55;
    /* Reserva SEMPRE a altura de 2 linhas (3.1em = 2 x 1.55): cards com especialidade de 1 linha */
    /* mantem o Ver Perfil na mesma altura dos vizinhos, colado ao proprio card (sem flex-grow). */
    min-height: 3.1em;
    margin-bottom: 14px;
}

/* Link editorial no lugar de botao em caixa */
.team-expand-btn {
    align-self: flex-start;
    min-height: 44px;
    background: none;
    border: none;
    padding: 0;
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--t-snappy), gap var(--t-snappy);
}

/* Estica a hitbox do botao pro card inteiro (foto incluida) -- mesma area que ja
   dispara o hover (.team-card:hover, ver .team-img acima). O rotulo "Ver Perfil"
   continua so visualmente onde estava; quem realmente responde ao clique/toque
   em qualquer ponto do card e essa camada invisivel. */
.team-expand-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.team-expand-btn .btn-icon {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); /* seta -> */
    transition: transform var(--t-snappy);
    margin-bottom: 1px;
}

@media (hover: hover) and (pointer: fine) {
    .team-expand-btn:hover {
        color: var(--gold-hover);
        gap: 12px;
    }
}

/* ==========================================================================
   MODAL DE PERFIL DA EQUIPE (UX PREMIUM)
   ========================================================================== */
.team-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-premium), visibility 0.5s var(--ease-premium);
}

.team-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.team-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Solido (sem backdrop-filter): blur+rgba translucido em elemento fixed full-bleed
       gera halo de luz fantasma na composicao de GPU, visivel so em captura de tela
       inteira (mesma assinatura do bug ja corrigido no header, ver backdrop-filter-header-luz-compositor) */
    background-color: rgba(34, 34, 34, 0.94);
    opacity: 0;
    transition: opacity 0.5s var(--ease-premium);
}

.team-modal.active .team-modal-overlay {
    opacity: 1;
}

.team-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    background-color: var(--navy); /* Fundo Navy (#222222) correspondendo exatamente à paleta real do site */
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-card); /* 8px - estrito ao manual */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    z-index: 2;
    overflow: hidden;
    transform: scale(0.96) translateY(25px); /* Transição de subida clássica e escala suave */
    transition: transform 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
}

.team-modal.active .team-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.team-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(235, 230, 222, 0.92);
    /* Fundo circular translucido: garante contraste em qualquer foto atras (a fica
       no topo, sobre a midia, no empilhamento mobile) -- sem isso o X sozinho some
       dependendo do tom da foto do advogado. */
    background: rgba(0, 0, 0, 0.32);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: color var(--t-snappy), background-color var(--t-snappy), transform var(--t-snappy);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG com viewBox centrado (nao o glifo de texto "x", cuja metrica de fonte nao
   fica visualmente centralizada na propria line-box) -- o rotate(90deg) no hover
   passa a girar exatamente em torno do centro visual do icone, sem deslocamento. */
.team-modal-close-icon {
    width: 18px;
    height: 18px;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .team-modal-close:hover {
        color: var(--gold);
        transform: rotate(90deg);
    }
}

.team-modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
    overscroll-behavior: contain; /* trava o scroll no modal ao chegar no fim, sem "vazar" pra pagina de tras */
}

@media (min-width: 768px) {
    .team-modal-body {
        flex-direction: row;
    }
}

.team-modal-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 350px;
    overflow: hidden;
    background-color: #1f1f1f;
    border-bottom: 1px solid var(--border-dark);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .team-modal-media {
        width: 35%;
        max-height: none;
        border-bottom: none;
        border-right: 1px solid var(--border-dark);
    }
}

.team-modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s var(--ease-premium);
}

.team-modal-img.loaded {
    opacity: 1;
}

.team-modal-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 768px) {
    .team-modal-info {
        padding: 40px;
    }
}

.team-modal-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--cream);
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 10px;
}

.team-modal-oab {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.team-modal-specialty {
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    color: rgba(235, 230, 222, 0.7);
    line-height: 1.5;
    margin-bottom: 24px;
    font-weight: 500;
}

.team-modal-bio-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.team-modal-text {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    color: rgba(235, 230, 222, 0.85);
    line-height: 1.7;
    margin: 0;
}

/* Contatos individuais do advogado: fileira de botoes circulares so com icone */
.team-modal-contacts {
    display: none;
}

.team-modal-contacts.has-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Rotulo microscopico antes dos icones, no mesmo tom do OAB */
.team-modal-contacts.has-contacts::before {
    content: "Contato";
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    color: rgba(178, 148, 116, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin-right: 6px;
}

.team-contact-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(235, 230, 222, 0.72);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* Realce interno sutil no topo: le como vidro lapidado, nao como chip chapado */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: color 0.45s var(--ease-premium),
                border-color 0.45s var(--ease-premium),
                background-color 0.45s var(--ease-premium),
                transform 0.45s var(--ease-premium);
}

.team-contact-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.45s var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .team-contact-btn:hover {
        color: var(--gold);
        border-color: rgba(178, 148, 116, 0.65);
        background-color: rgba(178, 148, 116, 0.12);
        transform: translateY(-2px);
    }

    .team-contact-btn:hover svg {
        transform: scale(1.08);
    }
}

.team-contact-btn:active {
    transform: translateY(0) scale(0.96);
}

.team-contact-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Custom scrollbar para o corpo do modal */
.team-modal-info::-webkit-scrollbar,
.team-modal-body::-webkit-scrollbar {
    width: 4px;
}

.team-modal-info::-webkit-scrollbar-thumb,
.team-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(178, 148, 116, 0.2);
    border-radius: 4px;
}

/* ==========================================================================
   WIDGET DE WHATSAPP FLUTUANTE INTELIGENTE
   ========================================================================== */
.wa-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    /* Escondido durante o Hero, so aparece ao alcancar #sobre (ver initWhatsAppFabVisibility em script.js) */
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition: opacity var(--t-smooth), transform var(--t-smooth);
}

.wa-widget.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* So o FAB e sempre clicavel; painel e tooltip apenas quando ATIVOS. */
/* Um "> *" generico aqui daria hitbox ao painel invisivel (320x400px), */
/* bloqueando hover/clique em tudo que fica sob ele no canto da tela.   */
.wa-widget.is-visible .wa-btn {
    pointer-events: auto;
}

.wa-widget.is-visible .wa-panel.active,
.wa-widget.is-visible .wa-tooltip.active {
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .wa-widget {
        transform: none;
    }
}

/* FAB redondo verde WhatsApp oficial (#25D366, paleta da marca WhatsApp) */
.wa-btn {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: background-color var(--t-snappy), transform var(--t-snappy), box-shadow var(--t-snappy);
    cursor: pointer;
}

.wa-icon {
    width: 30px;
    height: 30px;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .wa-btn:hover {
        background-color: #1FBC59;
        transform: scale(1.06);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }
}

/* Chat e teaser sao desktop-only (whatsapp-bubble-button.md): no touch o FAB navega direto pro wa.me */
/* Especificidade dupla de proposito: .wa-panel define display:flex mais abaixo no arquivo */
@media (max-width: 767px) {
    .wa-widget .wa-tooltip,
    .wa-widget .wa-panel {
        display: none;
    }
}

/* Balao claro e redondo, mesma linguagem do painel (canto inferior-direito menor = */
/* "cauda" apontando para o FAB circular). */
.wa-tooltip {
    position: absolute;
    bottom: 80px;
    right: 0;
    background-color: #ffffff;
    border: 1px solid rgba(178, 148, 116, 0.28);
    padding: 12px 18px;
    border-radius: 18px 18px 6px 18px;
    box-shadow: 0 14px 32px rgba(34, 34, 34, 0.16);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity var(--t-smooth), transform var(--t-smooth);
    pointer-events: none;
    z-index: 2;
}

/* pointer-events NAO entra aqui: precisa ficar restrito a .wa-widget.is-visible */
/* (ver acima), senao o balao vira clicavel/hoverable mesmo invisivel durante o  */
/* Hero -- ele e ativado por timeout de inatividade, independente do scroll, e   */
/* bloqueava o hover do CTA "Conhecer Escritorio" no canto inferior-direito.     */
.wa-tooltip.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wa-tooltip span {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    color: var(--navy);
    font-weight: 500;
}

.wa-tooltip-close {
    font-size: 1.1rem;
    color: rgba(34, 34, 34, 0.4);
    padding: 2px;
    line-height: 1;
    transition: color var(--t-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .wa-tooltip-close:hover {
        color: var(--gold-hover);
    }
}

/* Painel claro em forma de balao de conversa: cantos generosos e o canto inferior- */
/* direito menor apontando para o FAB redondo (linguagem circular do WhatsApp). */
.wa-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 330px;
    height: 420px;
    background-color: #FBF8F3;
    border: 1px solid rgba(178, 148, 116, 0.3);
    border-radius: 26px 26px 10px 26px;
    box-shadow: 0 24px 56px rgba(34, 34, 34, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.92) translateY(15px);
    transform-origin: bottom right;
    transition: opacity var(--t-smooth), transform var(--t-smooth);
    pointer-events: none;
    z-index: 3;
}

/* Ponte invisível de hover para evitar o fechamento do painel no trajeto do mouse */
.wa-panel::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 100%;
    height: 20px;
    background-color: transparent;
    pointer-events: auto;
}

/* Mesmo motivo do .wa-tooltip.active acima: pointer-events fica so na regra */
/* escopada em .wa-widget.is-visible, para nao criar hitbox invisivel no Hero. */
.wa-panel.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.wa-panel-header {
    background-color: #ffffff;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(178, 148, 116, 0.22);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar circular navy com o monograma AM dourado (eco do FAB redondo) */
.wa-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--navy);
    background-image: url('assets/images/logo-icon-gold.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62% auto;
    border: 1px solid rgba(178, 148, 116, 0.35);
}

.wa-brand {
    display: flex;
    flex-direction: column;
}

.wa-brand-name {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: var(--navy);
    font-weight: 600;
}

.wa-brand-status {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    color: rgba(34, 34, 34, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bolinha verde "online" pulsante */
.wa-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #25D366;
    animation: waStatusPulse 2.4s infinite ease-in-out;
}

@keyframes waStatusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
    50% { box-shadow: 0 0 0 4px rgba(37, 211, 102, 0); }
}

.wa-panel-body {
    flex-grow: 1;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior-y: contain; /* trava o scroll no painel: nao "vaza" pro site atras dele no fim do curso */
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #F2ECE3;
}

.wa-chat-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Preenchimento/scroll proprio so entram enquanto a lista de perguntas esta   */
/* oculta (conversa em andamento, classe ligada/desligada pelo JS junto com    */
/* o display:none/flex do wa-faq-list). Fixos sempre-on deixavam um vao vazio  */
/* em repouso (com so a saudacao inicial): flex-grow esticava a area toda, e   */
/* o min-height sozinho ja bastava pra sobrar espaco atras de uma mensagem     */
/* curta. Em repouso o chat-area agora so ocupa a altura do proprio conteudo   */
/* (o wa-panel-body, que ja tem overflow-y:auto, rola tudo junto se precisar). */
.wa-chat-area.wa-chat-area--full {
    flex-grow: 1;
    min-height: 140px; /* impede colapso a 0px: flexbox encolhe overflow:auto antes de overflow:visible (wa-faq-list) */
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Estilização Premium e Unificada de Scrollbar (Sem quebras de design) */
.wa-panel-body,
.wa-chat-area {
    scrollbar-width: thin;
    scrollbar-color: rgba(178, 148, 116, 0.2) transparent;
}

.wa-panel-body::-webkit-scrollbar,
.wa-chat-area::-webkit-scrollbar {
    width: 4px;
}

.wa-panel-body::-webkit-scrollbar-thumb,
.wa-chat-area::-webkit-scrollbar-thumb {
    background-color: rgba(178, 148, 116, 0.2);
    border-radius: 4px;
}

/* Bolhas de conversa reais: cantos redondos com um canto "de origem" menor */
.wa-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.wa-msg-received {
    background-color: #ffffff;
    color: var(--navy);
    align-self: flex-start;
    border-top-left-radius: 6px;
    border: 1px solid rgba(178, 148, 116, 0.18);
    box-shadow: 0 2px 6px rgba(34, 34, 34, 0.05);
}

.wa-msg-sent {
    background-color: #E9DCC8;
    color: var(--navy);
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 6px rgba(34, 34, 34, 0.05);
}

.wa-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.wa-typing-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--gold);
    border-radius: 50%;
    animation: waDotPulse 1.2s infinite ease-in-out;
}

.wa-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.wa-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes waDotPulse {
    0%, 100% { transform: scale(0.6); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 1; }
}

.wa-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border-dark);
    padding-top: 12px;
}

.wa-faq-btn {
    text-align: left;
    background-color: #ffffff;
    border: 1px solid rgba(178, 148, 116, 0.4);
    color: var(--navy);
    padding: 10px 16px;
    font-size: 0.75rem;
    font-family: var(--font-ui);
    font-weight: 500;
    border-radius: 16px;
    transition: background-color var(--t-snappy), border-color var(--t-snappy), transform var(--t-snappy);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .wa-faq-btn:hover {
        background-color: rgba(178, 148, 116, 0.12);
        border-color: var(--gold);
        transform: translateY(-1px);
    }
}

.wa-panel-footer {
    background-color: #ffffff;
    padding: 14px 18px;
    border-top: 1px solid rgba(178, 148, 116, 0.22);
    display: flex;
    justify-content: center;
}

/* CTA em pilula verde WhatsApp: o unico bloco solido do painel claro */
.wa-direct-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 999px;
    background-color: #25D366;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    transition: background-color var(--t-snappy), transform var(--t-snappy);
}

.wa-direct-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .wa-direct-link:hover {
        background-color: #1FBC59;
        transform: translateY(-1px);
    }
}