/* ============================================================
   ICARO ADVOCACIA — icaroferreira.com
   Vocabulário visual do site inteiro (todas as páginas reusam
   estas classes). Direção do media kit: elegância, contraste
   suave, muito espaço em branco, composição limpa.
   Dispositivo de marca: linha vertical fina (eco da logomarca)
   + sublinhas douradas curtas sob títulos + medalhão hairline.
   Mobile-first. Zero dependências além do Google Fonts.
   ============================================================ */

/* ===== Tokens canônicos (branding/tokens.css) ===== */
:root {
    --creme: #EDE8E1;
    --bege: #C8B8A6;
    --taupe: #8E7F6B;
    --preto: #1A1A1A;
    --dourado: #BDA87A;
  --verde-rodape: #20342A; /* derivado (07/09/2026): rodapé e mergulho do CTA — verde escuro da LP adotado só aqui */
    --superficie: #F6F3EE;
    --linha: #DDD3C6;
    --creme-texto: #EDE8E1;
    --whatsapp: #25D366;
    --serif-principal: "Cormorant Garamond", Georgia, serif;
    --serif-apoio: "Libre Baskerville", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ===== Tokens derivados (AA sobre creme/preto) ===== */
:root {
    --texto-suave: #5C5346;      /* Inter secundário sobre creme — AA */
    --bege-texto: #C8B8A6;       /* texto secundário sobre preto — AA */
    --maxw: 1160px;
    --pad-x: 24px;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

html,
body {
    overflow-x: clip;
}

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--preto);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}

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

/* ===== Acessibilidade ===== */
.skip-link {
    position: absolute;
    top: -64px;
    left: 16px;
    z-index: 300;
    background: var(--preto);
    color: var(--creme-texto);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== Revelação ao rolar (hook do main.js) ===== */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
}

html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ============================================================
   Vocabulário — container, seções, títulos
   ============================================================ */
.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

.section {
    padding: 72px 0;
}

.section--surface {
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}

.section--dark {
    background: var(--preto);
    color: var(--creme-texto);
}

/* Cabeçalho de seção (centrado por padrão; --left alinha à esquerda) */
.section__head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.section__head--left {
    margin: 0 0 40px;
    text-align: left;
}

.eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 20px;
}

.section--dark .eyebrow {
    color: var(--bege-texto);
}

.section__title {
    font-family: var(--serif-principal);
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: .01em;
}

/* Sublinha dourada curta — dispositivo de marca sob títulos */
.section__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--dourado);
    margin: 24px auto 0;
}

.section__head--left .section__title::after {
    margin-left: 0;
}

.section__lead {
    margin-top: 20px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 17px;
    color: var(--texto-suave);
}

.section--dark .section__lead {
    color: var(--bege-texto);
}

/* Link editorial com seta */
.link-arrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: var(--preto);
    text-decoration: none;
    border-bottom: 1px solid var(--dourado);
    padding-bottom: 3px;
    transition: border-color .2s ease;
}

.link-arrow:hover {
    border-bottom-color: var(--preto);
}

/* ============================================================
   Vocabulário — botões
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.btn svg {
    flex: none;
}

/* Primário: preto sobre creme; hover = dourado na borda (sutil) */
.btn--primary {
    background: var(--preto);
    color: var(--creme-texto);
    border-color: var(--preto);
}

.btn--primary:hover {
    border-color: var(--dourado);
    box-shadow: inset 0 -2px 0 0 var(--dourado);
}

/* Fantasma: borda hairline sobre fundo claro */
.btn--ghost {
    background: transparent;
    color: var(--preto);
    border-color: var(--taupe);
}

.btn--ghost:hover {
    border-color: var(--dourado);
}

/* Sobre fundo preto: creme sólido (AA) */
.btn--cream {
    background: var(--creme-texto);
    color: var(--preto);
    border-color: var(--creme-texto);
}

.btn--cream:hover {
    border-color: var(--dourado);
    box-shadow: inset 0 -2px 0 0 var(--dourado);
}

/* Fantasma sobre fundo preto */
.btn--ghost-dark {
    background: transparent;
    color: var(--creme-texto);
    border-color: var(--taupe);
}

.btn--ghost-dark:hover {
    border-color: var(--dourado);
}

.btn--sm {
    padding: 10px 20px;
    font-size: 13.5px;
}

/* ============================================================
   1. HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--creme);
    border-bottom: 1px solid var(--linha);
}

.header__bar {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 12px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header__logo {
    display: inline-flex;
    flex: none;
}

.header__logo img {
    height: 58px;
    width: auto;
}

.nav {
    display: none;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav__link {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--preto);
    text-decoration: none;
    padding: 6px 0;
    background-image: linear-gradient(0deg, var(--dourado) 0 100%);
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size .25s ease;
}

.nav__link:hover {
    background-size: 100% 1px;
}

.header__cta {
    display: none;
}

/* Hambúrguer */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 2px;
}

.nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--preto);
    transition: transform .2s ease, opacity .2s ease;
}

.site-header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.site-header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Painel mobile */
.nav-mobile[hidden] {
    display: none;
}

.nav-mobile {
    display: flex;
    flex-direction: column;
    padding: 8px var(--pad-x) 24px;
    background: var(--creme);
    border-bottom: 1px solid var(--linha);
}

.nav-mobile a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--preto);
    padding: 14px 2px;
    border-bottom: 1px solid var(--linha);
}

.nav-mobile .nav-mobile__cta {
    margin-top: 20px;
    border-bottom: 0;
    text-align: center;
    background: var(--preto);
    color: var(--creme-texto);
    padding: 15px 24px;
    border-radius: 2px;
}

@media (min-width: 1080px) {
    .nav {
        display: block;
    }

    .header__cta {
        display: inline-flex;
    }

    .nav-toggle,
    .nav-mobile {
        display: none;
    }
}

/* ============================================================
   2. HERO — tipográfico, sobre creme, muito respiro
   ============================================================ */
.hero {
    text-align: center;
    padding: 0 0 96px;
}

.hero__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* Linha vertical dourada descendo do header — eco da logomarca */
.hero__line {
    width: 1px;
    height: clamp(56px, 9vw, 96px);
    margin: 0 auto 40px;
    background: var(--dourado);
}

.hero__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.hero__title {
    margin-top: 28px;
    font-family: var(--serif-principal);
    font-size: clamp(48px, 8.5vw, 92px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: .01em;
}

.hero__sub {
    margin-top: 24px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: clamp(17px, 2.2vw, 21px);
    color: var(--preto);
}

.hero__text {
    margin-top: 24px;
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 16.5px;
    color: var(--texto-suave);
}

.hero__actions {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (min-width: 720px) {
    .hero {
        padding-bottom: 128px;
    }
}

/* ============================================================
   3. ÁREAS DE ATUAÇÃO — blocos separados por hairlines verticais
   ============================================================ */
.areas {
    padding: 96px 0;
}

.areas__grid {
    display: grid;
    grid-template-columns: 1fr;
}

.area {
    padding: 40px 0;
}

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

.area__num {
    font-family: var(--serif-principal);
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--taupe);
}

.area__label {
    display: block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.area__title {
    margin-top: 12px;
    font-family: var(--serif-principal);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.area__text {
    margin-top: 16px;
    font-size: 15.5px;
    color: var(--texto-suave);
    max-width: 44ch;
}

.area .link-arrow {
    margin-top: 24px;
}

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

    .area {
        padding: 8px 32px;
    }

    .area:first-child {
        padding-left: 0;
    }

    .area:last-child {
        padding-right: 0;
    }

    .area+.area {
        border-top: 0;
        border-left: 1px solid var(--linha);
    }
}

/* ============================================================
   4. COMO FUNCIONA — stepper horizontal com hairline
   ============================================================ */
.steps {
    padding: 96px 0;
}

.stepper {
    position: relative;
    display: grid;
    gap: 40px;
    counter-reset: passo;
}

/* Hairline conectando os passos: vertical no mobile */
.stepper::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 27px;
    width: 1px;
    background: var(--linha);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 24px;
    align-items: start;
}

.step__num {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--dourado);
    background: var(--creme);
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 600;
    color: var(--preto);
}

.section--surface .step__num {
    background: var(--superficie);
}

.step__title {
    font-family: var(--serif-principal);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    align-self: center;
}

.step__text {
    grid-column: 2;
    margin-top: 8px;
    font-size: 15px;
    color: var(--texto-suave);
    max-width: 32ch;
}

@media (min-width: 720px) {
    .stepper {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        text-align: center;
    }

    .stepper::before {
        top: 28px;
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 1px;
    }

    .step {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .step__num {
        margin-bottom: 20px;
    }

    .step__text {
        grid-column: 1;
    }
}

/* ============================================================
   5. QUEM SOMOS (resumo) — faixa superfície + medalhão hairline
   ============================================================ */
.about {
    padding: 96px 0;
}

.about__grid {
    display: grid;
    gap: 56px;
    align-items: center;
}

.about__text {
    font-size: 16.5px;
    color: var(--texto-suave);
    max-width: 58ch;
}

.about__text+.about__text {
    margin-top: 16px;
}

.about .link-arrow {
    margin-top: 32px;
}

/* Medalhão: círculo hairline com a linha vertical da marca */
.about__figure {
    display: flex;
    justify-content: center;
}

.medallion {
    position: relative;
    width: clamp(200px, 40vw, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--dourado);
    display: grid;
    place-items: center;
}

.medallion::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -32px;
    bottom: -32px;
    width: 1px;
    background: var(--preto);
}

.medallion::after {
    content: "";
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--linha);
}

@media (min-width: 1080px) {
    .about__grid {
        grid-template-columns: 1.4fr 1fr;
        gap: 80px;
    }
}

/* ============================================================
   6. DO BLOG — lista editorial
   ============================================================ */
.posts-section {
    padding: 96px 0;
}

.posts {
    display: grid;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
}

.post {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 24px;
    align-items: center;
    padding: 28px 0;
    text-decoration: none;
    color: inherit;
}

.posts li+li .post {
    border-top: 1px solid var(--linha);
}

.post__thumb {
    width: 104px;
    height: 78px;
    object-fit: cover;
    border-radius: 2px;
}

.post__date {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.post__title {
    margin-top: 6px;
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    transition: color .2s ease;
}

.post:hover .post__title {
    color: var(--taupe);
}

.post__excerpt {
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--texto-suave);
}

.posts-section__more {
    margin-top: 40px;
    text-align: center;
}

@media (min-width: 720px) {
    .post {
        grid-template-columns: 160px 1fr;
        gap: 32px;
    }

    .post__thumb {
        width: 160px;
        height: 104px;
    }
}

/* ============================================================
   7. CTA FINAL — faixa preta
   ============================================================ */
.cta-final {
    background: var(--preto);
    color: var(--creme-texto);
    text-align: center;
    padding: 104px 0;
}

/* Linha vertical dourada — eco da marca sobre o preto */
.cta-final__line {
    width: 1px;
    height: 56px;
    margin: 0 auto 40px;
    background: var(--dourado);
}

.cta-final__title {
    font-family: var(--serif-principal);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
}

.cta-final__lead {
    margin-top: 20px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 17px;
    color: var(--bege-texto);
}

.cta-final__actions {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer {
    background: var(--preto);
    color: var(--bege-texto);
    border-top: 1px solid rgba(237, 232, 225, .12);
}

.footer__top {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 64px var(--pad-x) 48px;
    display: grid;
    gap: 48px;
}

.footer__logo img {
    width: 120px;
    height: auto;
}

.footer__tagline {
    margin-top: 20px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 14px;
    max-width: 30ch;
}

.footer__cols {
    display: grid;
    gap: 40px;
}

.footer__coltitle {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--creme-texto);
    margin-bottom: 20px;
}

.footer__col ul {
    display: grid;
    gap: 12px;
}

.footer__col a {
    font-size: 14.5px;
    color: var(--bege-texto);
    text-decoration: none;
    transition: color .15s ease;
}

.footer__col a:hover {
    color: var(--creme-texto);
}

.footer__col p {
    font-size: 14.5px;
}

.footer__social {
    display: flex;
    gap: 16px;
}

.footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--taupe);
    border-radius: 50%;
    color: var(--creme-texto);
    transition: border-color .2s ease;
}

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

.footer__bottom {
    border-top: 1px solid rgba(237, 232, 225, .12);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px var(--pad-x) 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: var(--bege-texto);
}

.footer__bottom a {
    color: var(--bege-texto);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer__bottom a:hover {
    color: var(--creme-texto);
}

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

@media (min-width: 1080px) {
    .footer__top {
        grid-template-columns: 1fr 2.2fr;
        gap: 80px;
    }
}

/* ============================================================
   Movimento reduzido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html.js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== APÊNDICE: páginas internas ===== */

/* ------------------------------------------------------------
   Page-hero — hero compacto das páginas internas.
   Reusa .hero__line e .hero__eyebrow existentes no HTML.
   ------------------------------------------------------------ */
.page-hero {
    text-align: center;
    padding: 0 0 64px;
}

.page-hero__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.page-hero__title {
    margin-top: 24px;
    font-family: var(--serif-principal);
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: .01em;
}

.page-hero__sub {
    margin-top: 20px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: clamp(16px, 2vw, 19px);
    color: var(--preto);
}

.page-hero__lead {
    margin-top: 20px;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 16.5px;
    color: var(--texto-suave);
}

@media (min-width: 720px) {
    .page-hero {
        padding-bottom: 88px;
    }
}

/* ------------------------------------------------------------
   svc — páginas de área de atuação
   ------------------------------------------------------------ */

/* Lista de casos em colunas, separadas por hairlines */
.svc-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 56px;
}

.svc-list li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 14px 2px;
    border-top: 1px solid var(--linha);
    font-size: 15.5px;
}

.svc-list li::before {
    content: "\2014";
    flex: none;
    color: var(--dourado);
}

@media (min-width: 720px) {
    .svc-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* Lista curta com traço dourado (valores, itens da política) */
.svc-values {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.svc-values li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 15.5px;
    color: var(--texto-suave);
}

.svc-values li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 1px;
    background: var(--dourado);
    transform: translateY(-4px);
}

/* Link cruzado centralizado no fim de uma seção */
.svc-more {
    margin-top: 48px;
    text-align: center;
}

/* ------------------------------------------------------------
   faq — <details> estilizado
   ------------------------------------------------------------ */
.faq {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--linha);
}

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

.faq-item__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 2px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif-principal);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.faq-item__q::-webkit-details-marker {
    display: none;
}

.faq-item__q::after {
    content: "+";
    flex: none;
    font-family: var(--serif-principal);
    font-size: 26px;
    line-height: 1;
    color: var(--dourado);
    transition: transform .2s ease;
}

.faq-item[open] .faq-item__q::after {
    transform: rotate(45deg);
}

.faq-item__a {
    padding: 0 2px 24px;
    font-size: 15.5px;
    color: var(--texto-suave);
    max-width: 62ch;
}

/* ------------------------------------------------------------
   contact — página de contato
   ------------------------------------------------------------ */
.contact-grid {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

.contact-card {
    padding: 32px 0;
    border-top: 1px solid var(--linha);
}

.contact-card__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.contact-card__value {
    margin-top: 14px;
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.contact-card__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--dourado);
    padding-bottom: 2px;
    transition: border-color .2s ease;
}

.contact-card__value a:hover {
    border-bottom-color: var(--preto);
}

.contact-card__note {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--texto-suave);
}

.contact-card .btn {
    margin-top: 16px;
}

.contact-social {
    margin-top: 16px;
    display: flex;
    gap: 16px;
}

.contact-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--taupe);
    border-radius: 50%;
    color: var(--preto);
    transition: border-color .2s ease;
}

.contact-social a:hover {
    border-color: var(--dourado);
}

@media (min-width: 720px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 64px;
    }
}

/* ------------------------------------------------------------
   legal — política de privacidade (largura de leitura)
   ------------------------------------------------------------ */
.legal-body {
    max-width: 68ch;
    margin: 0 auto;
}

.legal-body h2 {
    margin-top: 40px;
    font-family: var(--serif-principal);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

.legal-body p {
    margin-top: 16px;
    font-size: 16px;
    color: var(--texto-suave);
}

.legal-body a {
    color: var(--preto);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-updated {
    margin-top: 48px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 14px;
    color: var(--texto-suave);
}

/* ------------------------------------------------------------
   nf — página 404
   ------------------------------------------------------------ */
.nf {
    text-align: center;
    padding: 64px 0 112px;
}

.nf .medallion {
    margin: 0 auto 56px;
}

.nf__title {
    font-family: var(--serif-principal);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 600;
    line-height: 1.1;
}

.nf__text {
    margin-top: 16px;
    font-size: 16px;
    color: var(--texto-suave);
}

.nf__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ============================================================
   APÊNDICE: blog — artigo (gerado por blog-src/gerar-blog.mjs)
   ============================================================ */
.artigo {
    padding: 72px 0 96px;
}

.artigo__wrap {
    max-width: 720px;
}

.artigo__breadcrumb {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--texto-suave);
}

.artigo__breadcrumb a {
    color: var(--taupe);
    text-decoration: none;
    border-bottom: 1px solid var(--linha);
}

.artigo__breadcrumb a:hover {
    color: var(--preto);
    border-bottom-color: var(--dourado);
}

.artigo__head {
    margin-top: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--linha);
}

.artigo__title {
    font-family: var(--serif-principal);
    font-size: clamp(32px, 5.4vw, 46px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: .01em;
}

.artigo__meta {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.artigo__body {
    margin-top: 36px;
    font-size: 17px;
    line-height: 1.65;
}

.artigo__body p+p {
    margin-top: 18px;
}

.artigo__body h2 {
    margin: 40px 0 12px;
    font-family: var(--serif-principal);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.artigo__body h3 {
    margin: 30px 0 10px;
    font-family: var(--serif-apoio);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
}

.artigo__body ul,
.artigo__body ol {
    margin: 16px 0 16px 22px;
    display: grid;
    gap: 8px;
}

.artigo__body blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--dourado);
    font-family: var(--serif-apoio);
    font-style: italic;
    color: var(--texto-suave);
}

.artigo__body hr {
    margin: 32px auto;
    width: 48px;
    border: 0;
    border-top: 2px solid var(--dourado);
}

.artigo__body a {
    color: var(--preto);
    text-decoration: underline;
    text-decoration-color: var(--dourado);
    text-underline-offset: 3px;
}

.artigo__aviso {
    margin-top: 40px;
    padding: 16px 20px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    font-size: 13.5px;
    color: var(--texto-suave);
    background: var(--superficie);
}

.artigo__cta {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--linha);
    text-align: center;
}

.artigo__cta-title {
    margin-bottom: 18px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 18px;
}


/* ===== v2 (redesign 09/2026) ===== */
/* Apêndice da home v2 + header/footer novos. Só classes/tokens com prefixo
   v2-/--v2-; tokens derivam das variáveis já existentes em :root. Nada acima
   desta linha foi alterado (as outras páginas dependem daquelas regras).
   Rodada 3 (07/09): "seguir o modelo" — base branca, dourado como botão
   primário, blocos escuros com foto de ambiente, carrossel de áreas com
   foto, header transparente sobre o hero, mais dinamismo (reveal em cascata,
   zoom nas fotos, parallax leve). Fotos em /assets/fotos/ (CREDITOS.md). */

:root {
    --v2-maxw: 1200px;
    --v2-maxw-text: 920px;
    --v2-pad-x: clamp(20px, 5vw, 64px);
    --v2-space-section: clamp(88px, 10vw, 144px);
    --v2-space-head: clamp(44px, 5.5vw, 64px);
    --v2-gap: 32px;
    --v2-nav-h: 72px;
    --v2-branco: #FFFEFB;
    --v2-r-pill: 999px;
    --v2-r-media: 16px;
    --v2-r-card: 20px;
    --v2-r-bloco: 32px;
    --v2-shadow-soft: 0 16px 40px rgba(26, 26, 26, .08);
    --v2-hairline: 1px solid var(--linha);
    --v2-hairline-dark: 1px solid rgba(237, 232, 225, .16);
    --v2-creme-80: rgba(237, 232, 225, .8);
    --v2-creme-72: rgba(237, 232, 225, .72);
    --v2-creme-06: rgba(237, 232, 225, .06);
    --v2-ease: cubic-bezier(.2, .7, .2, 1);
    --v2-dur: 220ms;
    --v2-body: 17px;
    --v2-giant: clamp(96px, 24vw, 360px);
}

/* A home é branca; creme vira superfície secundária. Páginas internas seguem creme. */
body:has(.v2-hero) {
    background: var(--v2-branco);
}

/* ---------- utilitários ---------- */
.v2-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.v2-container {
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding-left: var(--v2-pad-x);
    padding-right: var(--v2-pad-x);
}

.v2-dark {
    background: var(--preto);
    color: var(--creme-texto);
}

/* Foco visível: preto sobre claro, creme sobre escuro (o dourado global não passa sobre creme/branco) */
.v2-nav :focus-visible,
.v2-statement :focus-visible,
.v2-areas :focus-visible,
.v2-steps :focus-visible,
.v2-posts :focus-visible,
.v2-post:focus-visible,
.v2-faq :focus-visible,
.v2-cta :focus-visible {
    outline: 2px solid var(--preto);
    outline-offset: 4px;
}

.v2-hero :focus-visible,
.v2-dark :focus-visible,
.v2-card :focus-visible,
.v2-where :focus-visible,
.v2-footer :focus-visible,
body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) :focus-visible {
    outline: 2px solid var(--creme-texto);
    outline-offset: 4px;
}

/* Reveal em cascata: cada elemento pode receber --delay inline */
html.js [data-reveal] {
    transition-delay: var(--delay, 0ms);
}

/* ---------- eyebrow, título, cabeçalho de seção ---------- */
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.v2-eyebrow::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dourado);
}

.v2-dark .v2-eyebrow,
.v2-hero .v2-eyebrow,
.v2-where .v2-eyebrow {
    color: var(--dourado);
}

.v2-title {
    margin-top: 22px;
    font-family: var(--serif-principal);
    font-size: clamp(40px, 4.6vw, 60px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.01em;
}

.v2-title em,
.v2-h1 em {
    font-style: italic;
    font-weight: 500;
}

.v2-section-head {
    display: grid;
    gap: 24px;
    align-items: end;
}

.v2-section-head__side {
    display: grid;
    gap: 24px;
    justify-items: start;
}

.v2-section-head__note {
    font-size: var(--v2-body);
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 38ch;
}

.v2-dark .v2-section-head__note {
    color: var(--v2-creme-80);
}

@media (min-width: 900px) {
    .v2-section-head {
        grid-template-columns: 1fr auto;
        gap: 48px;
    }

    .v2-section-head__side {
        justify-items: end;
        text-align: right;
    }
}

/* ---------- botão-pílula com círculo ---------- */
.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 54px;
    padding: 6px 26px 6px 6px;
    border: 1px solid transparent;
    border-radius: var(--v2-r-pill);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease), transform var(--v2-dur) var(--v2-ease);
}

.v2-btn__circle {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform var(--v2-dur) var(--v2-ease);
}

.v2-btn__circle svg {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform var(--v2-dur) var(--v2-ease);
}

/* Hover: o círculo desliza e a seta gira de 45° para 0° (o glifo do WhatsApp não gira) */
.v2-btn:hover .v2-btn__circle,
.v2-btn:focus-visible .v2-btn__circle {
    transform: translateX(4px);
}

.v2-btn:hover .v2-btn__circle:not(.v2-btn__circle--wa) svg,
.v2-btn:focus-visible .v2-btn__circle:not(.v2-btn__circle--wa) svg {
    transform: rotate(45deg);
}

/* Primário: dourado com texto preto (branco sobre #BDA87A não passa AA) e círculo branco */
.v2-btn--gold {
    background: var(--dourado);
    color: var(--preto);
    border-color: var(--dourado);
}

.v2-btn--gold .v2-btn__circle {
    background: var(--v2-branco);
    color: var(--taupe);
}

.v2-btn--gold .v2-btn__circle--wa {
    color: var(--whatsapp);
}

.v2-btn--gold:hover {
    background: #B39D6E;
    border-color: #B39D6E;
}

/* Claro: creme com círculo dourado (sobre fotos e blocos escuros; hairline para o header branco) */
.v2-btn--cream {
    background: var(--creme);
    color: var(--preto);
    border-color: var(--linha);
}

.v2-btn--cream .v2-btn__circle {
    background: var(--dourado);
    color: var(--preto);
}

.v2-btn--cream:hover {
    background: var(--v2-branco);
}

.v2-btn--sm {
    height: 44px;
    padding: 4px 18px 4px 4px;
    font-size: 13px;
    gap: 10px;
}

.v2-btn--sm .v2-btn__circle {
    width: 34px;
    height: 34px;
}

.v2-btn--sm .v2-btn__circle svg {
    width: 14px;
    height: 14px;
}

/* Secundário: link-texto com seta 45° */
.v2-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--preto);
    text-decoration: none;
    background-image: linear-gradient(var(--dourado), var(--dourado));
    background-repeat: no-repeat;
    background-size: calc(100% - 22px) 1px;
    background-position: 0 calc(50% + .75em);
    transition: background-image var(--v2-dur) var(--v2-ease);
}

.v2-link svg {
    width: 14px;
    height: 14px;
    transition: transform var(--v2-dur) var(--v2-ease);
}

.v2-link:hover {
    background-image: linear-gradient(var(--preto), var(--preto));
}

.v2-link:hover svg {
    transform: translate(1px, -1px);
}

.v2-link--light {
    color: var(--creme-texto);
}

.v2-link--light:hover {
    background-image: linear-gradient(var(--creme-texto), var(--creme-texto));
}

/* Setas do carrossel */
.v2-arrows {
    display: flex;
    gap: 10px;
}

.v2-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--v2-branco);
    color: var(--preto);
    display: grid;
    place-items: center;
    transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease);
}

.v2-arrow svg {
    width: 20px;
    height: 20px;
}

.v2-arrow--gold {
    background: var(--dourado);
    border-color: var(--dourado);
}

.v2-arrow:hover {
    background: var(--preto);
    border-color: var(--preto);
    color: var(--creme-texto);
}

/* Chip vertical com seta para baixo (cabeçalho de "Como funciona") */
.v2-down {
    display: none;
    width: 40px;
    height: 64px;
    border-radius: var(--v2-r-pill);
    border: 1.5px solid var(--dourado);
    color: var(--dourado);
    place-items: center;
}

.v2-down svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 900px) {
    .v2-down {
        display: grid;
    }
}

/* ---------- tag (ponto dourado + caixa alta, sem caixa) — usada nos posts ---------- */
.v2-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    white-space: nowrap;
}

.v2-tag::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dourado);
}

/* Chip-pílula branco com ponto dourado (cards com foto e linhas do bloco escuro) */
.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-branco);
    border: 1px solid transparent;
    color: var(--preto);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v2-chip::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dourado);
}

/* Pílula da declaração: escura, itálica, no máximo 3 por texto */
.v2-pill {
    display: inline-block;
    padding: .02em .5em .14em;
    margin: 0 .04em;
    border-radius: var(--v2-r-pill);
    background: var(--preto);
    color: var(--creme-texto);
    font-style: italic;
    font-weight: 500;
    font-size: .82em;
    line-height: 1.1;
    white-space: nowrap;
}

/* ============================================================
   v2 · 0. NAV — 72 px. Páginas internas: creme, hairline ao rolar.
   Home: transparente sobre o hero escuro (links creme, logo clara);
   vira branco com hairline e logo escura quando o hero sai de baixo
   dele (.is-scrolled via main.js) ou com o menu aberto.
   ============================================================ */
.v2-nav {
    background: var(--creme);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 transparent;
    transition: background-color var(--v2-dur) var(--v2-ease), box-shadow var(--v2-dur) var(--v2-ease);
}

.v2-nav.is-scrolled,
.v2-nav.is-open {
    box-shadow: inset 0 -1px 0 var(--linha);
}

.v2-nav__bar {
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding: 0 var(--v2-pad-x);
    height: var(--v2-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.v2-nav__logo {
    display: inline-flex;
    flex: none;
}

.v2-nav__logo img {
    height: 56px;
    width: auto;
}

.v2-nav__logo-light {
    display: none;
}

.v2-nav__links {
    display: none;
}

.v2-nav__link {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--preto);
    text-decoration: none;
    padding: 10px 0;
    background-image: linear-gradient(var(--dourado), var(--dourado));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease);
}

.v2-nav__link:hover,
.v2-nav__link[aria-current="page"] {
    background-size: 100% 1px;
}

.v2-nav__cta {
    display: none;
}

/* Home: branco quando rolado ou aberto; transparente e escuro em cima do hero */
body:has(.v2-hero) .v2-nav {
    background: var(--v2-branco);
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) {
    background: transparent;
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) .v2-nav__link {
    color: var(--creme-texto);
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) .nav-toggle span {
    background: var(--creme-texto);
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) .v2-nav__logo-dark {
    display: none;
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) .v2-nav__logo-light {
    display: block;
}

body:has(.v2-hero) .v2-nav:not(.is-scrolled):not(.is-open) .v2-nav__cta {
    border-color: transparent;
}

body:has(.v2-hero) .v2-nav .nav-mobile {
    background: var(--v2-branco);
}

/* Painel mobile: grupo das áreas com rótulo e recuo */
.v2-nav .nav-mobile {
    border-bottom: 0;
}

.v2-nav .nav-mobile__label {
    margin-top: 18px;
    padding: 0 2px 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.v2-nav .nav-mobile .nav-mobile__sub {
    padding: 11px 2px 11px 16px;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 0;
}

.v2-nav .nav-mobile .nav-mobile__sub + a:not(.nav-mobile__sub) {
    margin-top: 12px;
    border-top: var(--v2-hairline);
}

.v2-nav .nav-mobile .nav-mobile__cta {
    border-radius: var(--v2-r-pill);
    background: var(--dourado);
    color: var(--preto);
    font-weight: 600;
}

@media (min-width: 1080px) {
    .v2-nav__links {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .v2-nav__cta {
        display: inline-flex;
    }
}

/* ============================================================
   v2 · 1. HERO — bloco escuro com foto de biblioteca sob o header
   transparente; copy à esquerda, logo do escritório à direita; "ICARO"
   gigante na base (creme a 55%, textura) mergulhando no branco do corpo.
   ============================================================ */
.v2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: calc(-1 * var(--v2-nav-h));
    padding-top: calc(var(--v2-nav-h) + clamp(40px, 6vw, 88px));
    background: var(--preto);
    color: var(--creme-texto);
    border-radius: 20px 20px 0 0;
}

.v2-hero__bg {
    position: absolute;
    left: 0;
    top: -16%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
    will-change: transform;
}

/* Overlay quente .72 → .92 de cima para baixo + vinheta lateral */
.v2-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(26, 26, 26, .45), transparent 30%, transparent 70%, rgba(26, 26, 26, .45)),
        linear-gradient(180deg, rgba(26, 26, 26, .56) 0%, rgba(26, 26, 26, .72) 50%, rgba(26, 26, 26, .88) 100%);
}

/* Névoa branca na base: o hero "afunda" no corpo branco */
.v2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(170px, 26vw, 360px);
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 55%, var(--v2-branco) 100%);
}

.v2-hero__inner {
    position: relative;
    z-index: 4;
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding: 0 var(--v2-pad-x);
    display: grid;
    gap: 40px;
}

.v2-hero__copy {
    max-width: 620px;
}

.v2-h1 {
    margin-top: 26px;
    font-family: var(--serif-principal);
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.015em;
    color: var(--creme-texto);
}

/* Lead único do hero (07/09): Libre Baskerville 18–20 px, creme a 85%, até 58ch */
.v2-hero__lead {
    margin-top: 26px;
    font-family: var(--serif-apoio);
    font-size: clamp(18px, 1.5vw, 20px);
    line-height: 1.6;
    color: rgba(237, 232, 225, .85);
    max-width: 58ch;
}

.v2-hero__actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

/* Logo do escritório: no mobile fica abaixo do texto e acima do "ICARO" gigante (~260 px) */
.v2-hero__figure {
    position: relative;
    width: min(72vw, 260px);
    margin: 0 auto;
    padding-bottom: calc(var(--v2-giant) * .9); /* deixa a logo acima do "ICARO" gigante */
    display: grid;
    justify-items: center;
}

.v2-hero__logo {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(189, 168, 122, .18));
}

/* Wordmark gigante na base, atrás da logo, dentro da névoa */
.v2-hero__mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.2em;
    z-index: 2;
    margin: 0;
    font-size: var(--v2-giant);
    line-height: 1;
    text-align: center;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 35%, rgba(0, 0, 0, .35) 70%, transparent 100%);
    mask-image: linear-gradient(#000 35%, rgba(0, 0, 0, .35) 70%, transparent 100%);
}

.v2-giant {
    font-family: var(--serif-principal);
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* a logo já traz "ICARO": o gigante vira textura (creme a 55%), não segundo título */
    color: rgba(237, 232, 225, .55);
    white-space: nowrap;
}

@media (min-width: 900px) {
    .v2-hero {
        border-radius: var(--v2-r-bloco) var(--v2-r-bloco) 0 0;
    }

    .v2-hero__inner {
        grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
        align-items: center;
        gap: 40px;
    }

    /* copy e logo compartilham o mesmo recuo inferior (espaço do "ICARO"), logo o centro vertical coincide */
    .v2-hero__copy,
    .v2-hero__figure {
        padding-bottom: calc(var(--v2-giant) * .55);
    }

    /* Logo na coluna direita, ~460–520 px, centralizada em relação ao texto */
    .v2-hero__figure {
        width: 100%;
        max-width: 520px;
        margin: 0;
        justify-self: end;
    }
}

/* ============================================================
   v2 · 1b. FAIXA DE FATOS — hairline em cima e embaixo, uma linha
   ============================================================ */
.v2-facts {
    border-top: var(--v2-hairline);
    border-bottom: var(--v2-hairline);
    background: var(--v2-branco);
}

.v2-facts__list {
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding: 16px var(--v2-pad-x);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 0;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--texto-suave);
    text-align: center;
}

.v2-facts__list li {
    display: inline-flex;
    align-items: center;
}

.v2-facts__list li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--dourado);
    margin: 0 14px;
}

/* No mobile só "Atendimento 100% online em todo o Brasil"; as praças entram a partir de 720 px */
.v2-facts__list .v2-facts__city {
    display: none;
}

@media (min-width: 720px) {
    .v2-facts__list .v2-facts__city {
        display: inline-flex;
    }
}

@media (min-width: 1080px) {
    .v2-facts__list {
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 14px;
    }

    .v2-facts__list li + li::before {
        margin: 0 20px;
    }
}

/* ============================================================
   v2 · 2. DECLARAÇÃO — manifesto centrado com até 3 pílulas escuras
   ============================================================ */
.v2-statement {
    padding: var(--v2-space-section) 0;
    text-align: center;
    background: var(--v2-branco);
}

.v2-statement__inner {
    max-width: var(--v2-maxw-text);
    margin: 0 auto;
    padding: 0 var(--v2-pad-x);
}

.v2-statement__text {
    margin-top: 32px;
    font-family: var(--serif-principal);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 500;
    line-height: 1.18;
    color: var(--preto);
}

.v2-statement__soft {
    color: var(--taupe);
}

.v2-statement__action {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* ============================================================
   v2 · 3. ÁREAS — carrossel scroll-snap de cards 320×400 com foto
   ============================================================ */
.v2-areas {
    padding: var(--v2-space-section) 0 calc(var(--v2-space-section) - 24px);
    background: var(--v2-branco);
    overflow: hidden;
}

.v2-carousel {
    list-style: none;
    display: flex;
    gap: 24px;
    margin: calc(var(--v2-space-head) - 40px) calc(-1 * var(--v2-pad-x)) 0;
    padding: 48px var(--v2-pad-x) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--v2-pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.v2-carousel::-webkit-scrollbar {
    display: none;
}

.v2-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    width: min(320px, 82vw);
    height: 400px;
    padding: 20px;
    border-radius: var(--v2-r-card);
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--preto);
    color: var(--creme-texto);
    transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}

.v2-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--v2-ease);
}

/* Overlay escuro quente de baixo para cima */
.v2-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(26, 26, 26, .18) 0%, rgba(26, 26, 26, .34) 32%, rgba(64, 50, 28, .84) 66%, rgba(26, 26, 26, .96) 100%);
}

.v2-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(26, 26, 26, .16);
}

.v2-card:hover .v2-card__img {
    transform: scale(1.04);
}

/* Cascata: os cards aparecem um a um depois que a seção entra (animation com fill
   "backwards" para não sobrescrever o transform do hover/lift depois de terminar) */
html.js .v2-areas:not(.is-in) .v2-card {
    opacity: 0;
}

html.js .v2-areas.is-in .v2-card {
    animation: v2-rise .7s var(--v2-ease) var(--delay, 0ms) backwards;
}

@keyframes v2-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

.v2-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.v2-card__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dourado);
    color: var(--preto);
    display: grid;
    place-items: center;
}

.v2-card__icon svg {
    width: 20px;
    height: 20px;
}

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

.v2-card__title {
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.12;
    color: var(--creme-texto);
}

.v2-card__title em {
    font-style: italic;
    font-weight: 500;
}

.v2-card__text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--v2-creme-80);
}

.v2-card .v2-btn {
    margin-top: 16px;
}

@media (min-width: 1080px) {
    /* O card central sobe 40 px (margem, não transform, para não brigar com hover/cascata) */
    .v2-card:nth-child(3) {
        margin-top: -40px;
    }
}

/* ============================================================
   v2 · 4. COMO FUNCIONA — foto vertical + stepper 01–04 pontilhado
   ============================================================ */
.v2-steps {
    padding: var(--v2-space-section) 0;
    background: var(--v2-branco);
}

.v2-steps__body {
    margin-top: var(--v2-space-head);
    display: grid;
    gap: 48px;
}

.v2-steps__media {
    margin: 0;
}

.v2-steps__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 600px;
    object-fit: cover;
    border-radius: var(--v2-r-card);
}

.v2-steps__quote {
    position: relative;
    margin-top: 24px;
    padding-left: 22px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--preto);
    max-width: 30ch;
}

.v2-steps__quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    bottom: .3em;
    width: 1px;
    background: var(--dourado);
}

.v2-stepper {
    position: relative;
    display: grid;
    gap: 12px;
}

.v2-stepper::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 56px;
    bottom: 56px;
    border-left: 1px dashed var(--bege);
}

.v2-step {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 24px;
    align-items: start;
    padding: 24px 24px 24px 0;
    border-radius: var(--v2-r-card);
}

.v2-step__num {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--v2-branco);
    display: grid;
    place-items: center;
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 500;
    color: var(--preto);
}

.v2-step__title {
    margin-top: 16px;
    font-family: var(--serif-principal);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
}

.v2-step__text {
    grid-column: 2;
    margin-top: 8px;
    font-size: var(--v2-body);
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 44ch;
}

/* Passo 02 em card branco com sombra suave (como na referência) */
.v2-step--active {
    margin-left: -12px;
    padding-left: 12px;
    background: var(--v2-branco);
    box-shadow: var(--v2-shadow-soft);
    border: 1px solid rgba(221, 211, 198, .6);
}

.v2-step--active .v2-step__num {
    border-color: var(--dourado);
}

@media (min-width: 720px) {
    .v2-step--active {
        margin-left: -24px;
        padding-left: 24px;
    }
}

@media (min-width: 900px) {
    .v2-steps__body {
        grid-template-columns: 5fr 7fr;
        gap: 64px;
        align-items: start;
    }
}

/* ============================================================
   v2 · 5. O QUE VOCÊ PODE ESPERAR — bloco escuro com foto desfocada,
   degradês brancos em cima/embaixo (110 px) e 5 linhas glass
   ============================================================ */
.v2-expect {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--v2-space-section) + 48px) 0;
}

.v2-expect__bg {
    position: absolute;
    inset: -40px;
    z-index: 0;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    filter: blur(14px);
    transform: scale(1.04);
}

.v2-expect__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, var(--v2-branco) 0, rgba(255, 255, 255, 0) 110px, rgba(255, 255, 255, 0) calc(100% - 110px), var(--v2-branco) 100%),
        linear-gradient(180deg, rgba(52, 40, 22, .66), rgba(26, 26, 26, .78));
}

.v2-expect .v2-container {
    position: relative;
    z-index: 2;
}

.v2-rows {
    list-style: none;
    margin-top: var(--v2-space-head);
    display: grid;
    gap: 12px;
}

.v2-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 44px;
    grid-template-areas:
        "num title go"
        "num chip go"
        "num desc go";
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--creme-texto);
    text-decoration: none;
    transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease), transform var(--v2-dur) var(--v2-ease);
}

.v2-row__num {
    grid-area: num;
    align-self: start;
    font-family: var(--serif-principal);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.v2-row__title {
    grid-area: title;
    font-family: var(--serif-principal);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.15;
}

.v2-row__chip {
    grid-area: chip;
    justify-self: start;
}

.v2-row__desc {
    grid-area: desc;
    font-size: 14px;
    line-height: 1.5;
    color: var(--v2-creme-80);
}

.v2-row__go {
    grid-area: go;
    align-self: start;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--v2-branco);
    color: var(--taupe);
    display: grid;
    place-items: center;
    transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease), transform var(--v2-dur) var(--v2-ease);
}

.v2-row__go svg {
    width: 18px;
    height: 18px;
}

/* Linha 03 em destaque branco; as outras ficam brancas no hover */
.v2-row--hi,
.v2-row:hover,
.v2-row:focus-visible {
    background: var(--v2-branco);
    border-color: var(--v2-branco);
    color: var(--preto);
}

.v2-row--hi .v2-row__desc,
.v2-row:hover .v2-row__desc,
.v2-row:focus-visible .v2-row__desc {
    color: var(--texto-suave);
}

.v2-row--hi .v2-row__chip,
.v2-row:hover .v2-row__chip,
.v2-row:focus-visible .v2-row__chip {
    border-color: var(--linha);
}

.v2-row--hi .v2-row__go,
.v2-row:hover .v2-row__go,
.v2-row:focus-visible .v2-row__go {
    background: var(--dourado);
    color: var(--preto);
}

.v2-row:hover .v2-row__go {
    transform: translate(2px, -2px);
}

@media (min-width: 900px) {
    .v2-row {
        grid-template-columns: 48px minmax(0, 1.1fr) auto minmax(0, 1.4fr) 44px;
        grid-template-areas: "num title chip desc go";
        column-gap: 28px;
        padding: 22px 24px;
    }

    .v2-row__num,
    .v2-row__go {
        align-self: center;
    }
}

/* ============================================================
   v2 · 6. FAQ — split 4/8: medalhão + frase | accordion em cartões
   ============================================================ */
.v2-faq {
    padding: var(--v2-space-section) 0;
    background: var(--v2-branco);
}

.v2-faq__body {
    margin-top: var(--v2-space-head);
    display: grid;
    gap: 48px;
}

.v2-faq__aside {
    max-width: 340px;
}

.v2-faq__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

.v2-faq__phrase {
    margin-top: 22px;
    font-family: var(--serif-principal);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.v2-faq__note {
    margin-top: 12px;
    font-size: var(--v2-body);
    line-height: 1.6;
    color: var(--texto-suave);
}

.v2-faq__aside .v2-btn {
    margin-top: 28px;
}

.v2-faq__list {
    display: grid;
    gap: 12px;
}

.v2-faq__item {
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: var(--v2-branco);
    transition: box-shadow var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease);
}

.v2-faq__item[open] {
    box-shadow: var(--v2-shadow-soft);
}

.v2-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
    padding: 11px 11px 11px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif-principal);
    font-size: clamp(20px, 1.9vw, 23px);
    font-weight: 500;
    line-height: 1.25;
    transition: color var(--v2-dur) var(--v2-ease);
}

.v2-faq__q:hover {
    color: var(--texto-suave);
}

.v2-faq__q::-webkit-details-marker {
    display: none;
}

.v2-faq__toggle {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    display: grid;
    place-items: center;
    color: var(--preto);
    transition: transform var(--v2-dur) var(--v2-ease), background-color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease);
}

.v2-faq__toggle svg {
    width: 18px;
    height: 18px;
}

.v2-faq__item[open] .v2-faq__toggle {
    transform: rotate(180deg);
    background: var(--dourado);
    border-color: var(--dourado);
}

.v2-faq__a {
    padding: 0 22px 22px;
    font-size: var(--v2-body);
    line-height: 1.65;
    color: var(--texto-suave);
    max-width: 60ch;
}

.v2-faq__a a {
    color: var(--preto);
    text-decoration: underline;
    text-decoration-color: var(--dourado);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--v2-dur) var(--v2-ease);
}

.v2-faq__a a:hover {
    text-decoration-color: var(--preto);
}

@media (min-width: 900px) {
    .v2-faq__body {
        grid-template-columns: 4fr 8fr;
        gap: 80px;
        align-items: start;
    }
}

/* ============================================================
   v2 · 7. BLOG — faixa creme, cards brancos: capa 16:10 em cima
   ============================================================ */
.v2-posts {
    background: var(--creme);
    padding: var(--v2-space-section) 0;
}

.v2-posts__grid {
    list-style: none;
    display: grid;
    gap: 24px var(--v2-gap);
}

.v2-posts .v2-posts__grid {
    margin-top: var(--v2-space-head);
}

.v2-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 10px 24px;
    border-radius: var(--v2-r-card);
    background: var(--v2-branco);
    color: var(--preto);
    text-decoration: none;
    transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}

.v2-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-soft);
}

.v2-post__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--v2-r-media);
    background: var(--bege);
}

.v2-post__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--v2-ease);
}

.v2-post:hover .v2-post__thumb {
    transform: scale(1.04);
}

/* Sem capa: bege com o perfil em taupe — nunca foto genérica */
.v2-post__glyph {
    position: absolute;
    right: 6%;
    bottom: -12%;
    height: 96%;
    width: auto;
    max-width: none;
    opacity: .45;
}

.v2-post__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 12px 0;
}

.v2-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.v2-post__title {
    margin-top: 14px;
    font-family: var(--serif-principal);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    transition: color var(--v2-dur) var(--v2-ease);
}

.v2-post:hover .v2-post__title {
    color: var(--texto-suave);
}

.v2-post__excerpt {
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 48ch;
}

.v2-post__go {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--preto);
    background-image: linear-gradient(var(--dourado), var(--dourado));
    background-repeat: no-repeat;
    background-size: calc(100% - 22px) 1px;
    background-position: 0 100%;
    padding-bottom: 4px;
}

.v2-post__go svg {
    width: 14px;
    height: 14px;
    transition: transform var(--v2-dur) var(--v2-ease);
}

.v2-post:hover .v2-post__go svg {
    transform: translate(1px, -1px);
}

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

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

/* ============================================================
   v2 · 8. CONTATO — card de canais (7) + card "Onde estamos" com foto (5)
   + "Vamos conversar." mergulhando no rodapé
   ============================================================ */
.v2-cta {
    padding-top: var(--v2-space-section);
    background: var(--v2-branco);
}

.v2-cta__grid {
    margin-top: var(--v2-space-head);
    display: grid;
    gap: 24px;
}

.v2-contact {
    display: grid;
    gap: 36px;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--linha);
    border-radius: 24px;
    background: var(--v2-branco);
}

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

.v2-contact__value {
    margin-top: 14px;
    font-family: var(--serif-principal);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.v2-contact__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--dourado);
    padding-bottom: 2px;
    transition: border-color var(--v2-dur) var(--v2-ease);
}

.v2-contact__value a:hover {
    border-bottom-color: var(--preto);
}

.v2-contact__hint {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--texto-suave);
    max-width: 34ch;
}

.v2-contact__channel .v2-btn {
    margin-top: 22px;
}

.v2-contact__note {
    padding-top: 28px;
    border-top: var(--v2-hairline);
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 60ch;
}

.v2-where {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 400px;
    padding: 32px;
    border-radius: 24px;
    background: var(--preto);
    color: var(--creme-texto);
    display: flex;
    align-items: flex-end;
}

.v2-where__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.v2-where::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(26, 26, 26, .1) 0%, rgba(26, 26, 26, .3) 40%, rgba(64, 50, 28, .82) 72%, rgba(26, 26, 26, .96) 100%);
}

.v2-where__list {
    list-style: none;
    margin-top: 18px;
    display: grid;
    gap: 4px;
    font-family: var(--serif-principal);
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 1.15;
}

.v2-where__hint {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--v2-creme-80);
}

.v2-cta__dive {
    position: relative;
    overflow: hidden;
    margin-top: clamp(64px, 8vw, 112px);
    text-align: center;
}

.v2-cta__dive::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    background: var(--verde-rodape);
}

.v2-giant--cta {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 var(--v2-pad-x);
    font-family: var(--serif-principal);
    font-size: clamp(40px, 13vw, 200px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--preto);
    -webkit-mask-image: linear-gradient(#000 38%, rgba(0, 0, 0, .45) 64%, transparent 100%);
    mask-image: linear-gradient(#000 38%, rgba(0, 0, 0, .45) 64%, transparent 100%);
}

@media (min-width: 900px) {
    .v2-cta__grid {
        grid-template-columns: 7fr 5fr;
        align-items: stretch;
    }
}

/* ============================================================
   v2 · 9. RODAPÉ — foto de ambiente com overlay quase opaco, marca +
   3 colunas, aviso Prov. 205; cantos inferiores arredondados na home
   ============================================================ */
.v2-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--verde-rodape);
    color: var(--v2-creme-72);
    border-top: var(--v2-hairline-dark);
}

/* Na home o CTA já termina em preto: sem hairline entre os dois, e o bloco fecha arredondado */
body:has(.v2-cta) .v2-footer {
    border-top: 0;
}

body:has(.v2-hero) .v2-footer {
    border-radius: 0 0 20px 20px;
}

.v2-footer__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
}

.v2-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--verde-rodape) 0, var(--verde-rodape) 72px, rgba(32, 52, 42, .93) 360px, rgba(32, 52, 42, .93) 100%);
}

.v2-footer__inner {
    position: relative;
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding: clamp(64px, 8vw, 104px) var(--v2-pad-x) clamp(56px, 6vw, 80px);
    display: grid;
    gap: 56px;
}

.v2-footer__logo {
    display: inline-flex;
}

.v2-footer__logo img {
    width: 180px;
    height: auto;
}

.v2-footer__tagline {
    margin-top: 24px;
    font-family: var(--serif-apoio);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--creme-texto);
    max-width: 26ch;
}

.v2-footer__cols {
    display: grid;
    gap: 40px 32px;
}

.v2-footer__coltitle {
    font-family: var(--serif-principal);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--creme-texto);
    margin-bottom: 20px;
}

.v2-footer__col ul {
    display: grid;
    gap: 12px;
    list-style: none;
}

.v2-footer__col a,
.v2-footer__col p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--v2-creme-72);
    text-decoration: none;
    transition: color var(--v2-dur) var(--v2-ease);
}

.v2-footer__col a:hover {
    color: var(--creme-texto);
}

.v2-footer__social {
    display: flex !important;
    gap: 10px;
    margin-top: 24px;
}

.v2-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(237, 232, 225, .25);
    display: grid;
    place-items: center;
    color: var(--creme-texto);
    transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease);
}

.v2-footer__social a:hover {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--preto);
}

.v2-footer__social svg {
    flex: none;
}

.v2-footer__legal {
    position: relative;
    max-width: var(--v2-maxw);
    margin: 0 auto;
    padding: 28px var(--v2-pad-x) 40px;
    border-top: var(--v2-hairline-dark);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-creme-72);
}

.v2-footer__legal a {
    color: var(--v2-creme-72);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-footer__legal a:hover {
    color: var(--creme-texto);
}

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

    .v2-footer__col--wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    body:has(.v2-hero) .v2-footer {
        border-radius: 0 0 var(--v2-r-bloco) var(--v2-r-bloco);
    }
}

@media (min-width: 1024px) {
    .v2-footer__inner {
        grid-template-columns: 4fr 8fr;
        gap: 80px;
    }

    .v2-footer__cols {
        grid-template-columns: 1fr 1.2fr 1.5fr;
    }

    .v2-footer__col--wide {
        grid-column: auto;
    }
}

/* ---------- movimento reduzido: sem parallax, zoom, lift ou cascata ---------- */
@media (prefers-reduced-motion: reduce) {
    .v2-hero__bg {
        transform: none !important;
    }

    .v2-card:hover,
    .v2-post:hover {
        transform: none;
    }

    .v2-card:hover .v2-card__img,
    .v2-post:hover .v2-post__thumb {
        transform: none;
    }

    html.js .v2-areas:not(.is-in) .v2-card {
        opacity: 1;
    }

    html.js .v2-areas.is-in .v2-card {
        animation: none;
    }
}

/* ===== v2 internas (rodada 4, 07/09/2026) ===== */
/* Primitivos das páginas internas no vocabulário v2. Só apêndice: nada acima
   foi alterado. Nomes fixos (outras páginas dependem deles): .v2-hero--page,
   .v2-crumbs, .v2-h1--page, .v2-pagehead, .v2-prose, .v2-split, .v2-cases,
   .v2-pillars, .v2-nf. Utilitários genéricos: .v2-block, .v2-container--narrow,
   .v2-flush, .v2-btn--light, .v2-contact__channels/.v2-contact__social. */

/* ---------- base das internas: página branca também sem hero ---------- */
body:has(.v2-pagehead),
body:has(.v2-nf) {
    background: var(--v2-branco);
}

body:has(.v2-pagehead) .v2-nav,
body:has(.v2-nf) .v2-nav {
    background: var(--v2-branco);
}

body:has(.v2-pagehead) .v2-footer,
body:has(.v2-nf) .v2-footer {
    border-radius: 0 0 20px 20px;
}

/* Foco visível preto nas superfícies claras novas */
.v2-block :focus-visible,
.v2-pagehead :focus-visible,
.v2-prose :focus-visible,
.v2-split :focus-visible,
.v2-pillars :focus-visible,
.v2-cases :focus-visible,
.v2-nf :focus-visible,
.v2-contact__social a:focus-visible {
    outline: 2px solid var(--preto);
    outline-offset: 4px;
}

/* Seção genérica branca (história, pilares, texto legal…) */
.v2-block {
    padding: var(--v2-space-section) 0;
    background: var(--v2-branco);
}

.v2-block--tight {
    padding: clamp(40px, 5vw, 64px) 0 var(--v2-space-section);
}

/* Container estreito para texto corrido (Política, corpo de artigo) */
.v2-container--narrow {
    max-width: calc(760px + 2 * var(--v2-pad-x));
}

/* Tira o respiro inferior de uma seção que antecede o mergulho "Vamos conversar." */
section.v2-flush,
div.v2-flush {
    padding-bottom: 0;
}

/* Botão claro para páginas brancas: branco com hairline, círculo dourado */
.v2-btn--light {
    background: var(--v2-branco);
    color: var(--preto);
    border-color: var(--linha);
}

.v2-btn--light .v2-btn__circle {
    background: var(--dourado);
    color: var(--preto);
}

.v2-btn--light:hover {
    background: var(--creme);
    border-color: var(--bege);
}

/* ============================================================
   A. HERO DE PÁGINA INTERNA — o mesmo bloco escuro da home, menor,
   uma coluna, sem o "ICARO" gigante; conteúdo apoiado na base,
   acima da névoa que afunda no branco
   ============================================================ */
.v2-hero--page {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--v2-nav-h) + clamp(44px, 6vw, 80px));
    padding-bottom: clamp(120px, 15vw, 200px);
}

.v2-hero--page::after {
    height: clamp(120px, 15vw, 210px);
}

.v2-hero--page .v2-hero__bg {
    object-position: var(--v2-hero-pos, center 40%);
}

.v2-hero--page .v2-hero__inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.v2-hero--page .v2-hero__copy {
    max-width: 760px;
    padding-bottom: 0;
}

.v2-h1--page {
    margin-top: 22px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
    max-width: 18ch;
}

.v2-hero--page .v2-hero__lead {
    margin-top: 22px;
    font-size: clamp(17px, 1.4vw, 19px);
    color: var(--v2-creme-80);
    max-width: 56ch;
}

.v2-hero--page .v2-hero__actions {
    margin-top: 32px;
}

/* Entrada em cascata do conteúdo do hero (só com JS; reduzida abaixo) */
html.js .v2-hero--page .v2-crumbs,
html.js .v2-hero--page .v2-hero__copy > * {
    animation: v2-rise .8s var(--v2-ease) both;
}

html.js .v2-hero--page .v2-hero__copy > :nth-child(1) { animation-delay: 80ms; }
html.js .v2-hero--page .v2-hero__copy > :nth-child(2) { animation-delay: 160ms; }
html.js .v2-hero--page .v2-hero__copy > :nth-child(3) { animation-delay: 260ms; }
html.js .v2-hero--page .v2-hero__copy > :nth-child(4) { animation-delay: 360ms; }

@media (min-width: 900px) {
    .v2-hero--page {
        min-height: clamp(420px, 52vh, 560px);
    }

    .v2-hero--page .v2-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: end;
    }

    .v2-hero--page .v2-hero__copy {
        padding-bottom: 0;
    }
}

/* Migalhas: Inter 13 px; creme sobre o hero, taupe-AA sobre o branco */
.v2-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--texto-suave);
}

.v2-crumbs a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--v2-dur) var(--v2-ease);
}

.v2-crumbs a:hover {
    text-decoration: underline;
    color: var(--preto);
}

.v2-crumbs > [aria-hidden="true"] {
    color: var(--dourado);
}

.v2-crumbs [aria-current="page"] {
    color: var(--preto);
}

.v2-hero .v2-crumbs {
    margin-bottom: clamp(28px, 4vw, 44px);
    color: var(--v2-creme-72);
}

.v2-hero .v2-crumbs a:hover,
.v2-hero .v2-crumbs [aria-current="page"] {
    color: var(--creme-texto);
}

.v2-pagehead .v2-crumbs {
    margin-bottom: clamp(24px, 3vw, 36px);
}

/* ============================================================
   B. CABEÇALHO LEVE — páginas utilitárias, sem foto, header branco
   ============================================================ */
.v2-pagehead {
    background: var(--v2-branco);
    padding: clamp(40px, 6vw, 88px) 0 clamp(8px, 2vw, 24px);
}

.v2-pagehead .v2-title {
    font-size: clamp(38px, 4.4vw, 56px);
    max-width: 18ch;
}

.v2-pagehead__text {
    margin-top: 22px;
    font-family: var(--serif-apoio);
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 56ch;
}

/* ============================================================
   C. PROSA — texto longo: Libre Baskerville 17–18 px, 68ch,
   títulos Cormorant, marcador dourado, links dourado→preto,
   citação com barra, figura/tabela/código robustos para o blog
   ============================================================ */
.v2-prose {
    font-family: var(--serif-apoio);
    font-size: clamp(17px, 1.3vw, 18px);
    line-height: 1.7;
    color: var(--preto);
    max-width: 68ch;
}

.v2-prose > * + * {
    margin-top: 1.25em;
}

.v2-prose h2,
.v2-prose h3,
.v2-prose h4 {
    font-family: var(--serif-principal);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--preto);
}

.v2-prose h2 {
    margin-top: 2.1em;
    font-size: clamp(28px, 2.6vw, 32px);
}

.v2-prose h3 {
    margin-top: 1.8em;
    font-size: 22px;
}

.v2-prose h4 {
    margin-top: 1.6em;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.v2-prose h2 em,
.v2-prose h3 em {
    font-style: italic;
    font-weight: 500;
}

.v2-prose h2 + *,
.v2-prose h3 + *,
.v2-prose h4 + * {
    margin-top: .75em;
}

.v2-prose > :first-child {
    margin-top: 0;
}

.v2-prose strong {
    font-weight: 700;
}

.v2-prose a {
    color: var(--preto);
    text-decoration: underline;
    text-decoration-color: var(--dourado);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--v2-dur) var(--v2-ease);
}

.v2-prose a:hover {
    text-decoration-color: var(--preto);
}

.v2-prose ul,
.v2-prose ol {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
}

.v2-prose li {
    position: relative;
    padding-left: 26px;
}

.v2-prose li > * + * {
    margin-top: .6em;
}

.v2-prose ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .66em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dourado);
}

.v2-prose ol {
    counter-reset: v2-prose;
}

.v2-prose ol > li {
    padding-left: 38px;
}

.v2-prose ol > li::before {
    counter-increment: v2-prose;
    content: counter(v2-prose, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .08em;
    font-family: var(--serif-principal);
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dourado);
}

/* Lista com hairline entre itens (na <ul> ou no contêiner) */
.v2-prose--list > li + li,
.v2-prose .v2-prose--list > li + li,
.v2-prose--list ul > li + li {
    border-top: var(--v2-hairline);
    padding-top: 14px;
}

.v2-prose--list,
.v2-prose .v2-prose--list,
.v2-prose--list ul {
    gap: 14px;
}

.v2-prose blockquote {
    margin: 1.8em 0;
    padding: 6px 0 6px 26px;
    border-left: 2px solid var(--dourado);
    font-family: var(--serif-principal);
    font-style: italic;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.35;
    color: var(--preto);
}

.v2-prose blockquote p + p {
    margin-top: .6em;
}

.v2-prose blockquote cite {
    display: block;
    margin-top: .9em;
    font-family: var(--sans);
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.v2-prose figure {
    margin: 2.2em 0;
}

.v2-prose img,
.v2-prose video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 16px;
}

.v2-prose figcaption {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--texto-suave);
}

/* Tabela: rola dentro de si mesma no mobile; nunca alarga a página.
   (display:block na <table>: thead/tbody viram uma única tabela anônima,
   colunas alinhadas; quem quiser 100% de largura embrulha num div com overflow-x) */
.v2-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
}

.v2-prose th,
.v2-prose td {
    padding: 12px 16px 12px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--v2-hairline);
}

.v2-prose th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.v2-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    padding: .1em .45em;
    border-radius: 6px;
    background: var(--creme);
    color: var(--preto);
}

.v2-prose pre {
    overflow-x: auto;
    padding: 18px 22px;
    border-radius: 16px;
    background: var(--creme);
    font-size: 14px;
    line-height: 1.6;
}

.v2-prose pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

.v2-prose hr {
    border: 0;
    border-top: var(--v2-hairline);
    margin: 2.4em 0;
}

/* Rodapé de nota do texto (ex.: "Atualizada em…") */
.v2-prose__note {
    margin-top: 2.6em;
    padding-top: 1.4em;
    border-top: var(--v2-hairline);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--texto-suave);
}

/* ============================================================
   D. SPLIT — texto | foto (7/5), foto com raio 20 px e sombra quente;
   empilha no mobile com a foto primeiro (4:3). --rev = foto à esquerda
   ============================================================ */
.v2-split {
    display: grid;
    gap: clamp(36px, 5vw, 56px);
    align-items: center;
}

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

.v2-split__body .v2-title {
    font-size: clamp(34px, 3.6vw, 48px);
}

.v2-split__body .v2-prose {
    margin-top: 28px;
}

.v2-split__body .v2-eyebrow + .v2-prose {
    margin-top: 24px;
}

.v2-split__body .v2-btn,
.v2-split__body .v2-link {
    margin-top: 32px;
}

.v2-split__media {
    order: -1;
    margin: 0;
    min-width: 0;
}

.v2-split__frame {
    overflow: hidden;
    border-radius: var(--v2-r-card);
    background: var(--bege);
    box-shadow: 0 24px 56px rgba(64, 50, 28, .14);
    transform: translateZ(0);
}

.v2-split__frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: var(--v2-split-pos, center);
    transition: transform .6s var(--v2-ease);
}

.v2-split__media:hover .v2-split__frame img {
    transform: scale(1.03);
}

.v2-split__caption {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--texto-suave);
}

.v2-split__caption::before {
    content: "";
    flex: none;
    width: 18px;
    height: 1px;
    background: var(--dourado);
}

@media (min-width: 900px) {
    .v2-split {
        grid-template-columns: 7fr 5fr;
        gap: clamp(48px, 6vw, 96px);
    }

    .v2-split__media {
        order: 0;
    }

    .v2-split__frame img {
        aspect-ratio: auto;
        height: 520px;
    }

    .v2-split--rev {
        grid-template-columns: 5fr 7fr;
    }

    .v2-split--rev .v2-split__media {
        order: -1;
    }
}

/* ============================================================
   E. CASOS/SERVIÇOS — <ul> em 2 colunas, check dourado em traço,
   hairline entre itens, sem cards (o check é só CSS: <li>texto</li>)
   ============================================================ */
.v2-cases {
    list-style: none;
    display: grid;
    column-gap: clamp(32px, 4vw, 64px);
    border-top: var(--v2-hairline);
}

.v2-cases > li {
    position: relative;
    padding: 14px 0 14px 38px;
    border-bottom: var(--v2-hairline);
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--preto);
}

.v2-cases > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dourado);
}

.v2-cases > li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    width: 5px;
    height: 9px;
    border: solid var(--preto);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.v2-dark .v2-cases {
    border-top: var(--v2-hairline-dark);
}

.v2-dark .v2-cases > li {
    color: var(--creme-texto);
    border-bottom: var(--v2-hairline-dark);
}

@media (min-width: 720px) {
    .v2-cases:not(.v2-cases--single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   F. PILARES — 3 cards creme sobre o branco, numeral dourado
   Cormorant 40 px, hover sobe 4 px, cascata no reveal (--delay)
   ============================================================ */
.v2-pillars {
    list-style: none;
    margin-top: var(--v2-space-head);
    display: grid;
    gap: 20px;
}

.v2-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(32px, 3vw, 44px);
    border-radius: var(--v2-r-card);
    background: var(--creme);
    color: var(--preto);
    transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}

.v2-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-soft);
}

.v2-pillar__num {
    font-family: var(--serif-principal);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--dourado);
}

.v2-pillar__title {
    margin-top: 28px;
    font-family: var(--serif-principal);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
}

.v2-pillar__text {
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto-suave);
}

.v2-pillars__values {
    list-style: none;
    margin-top: 12px;
    width: 100%;
    display: grid;
}

.v2-pillars__values > li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-top: 1px solid rgba(142, 127, 107, .22);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--preto);
}

.v2-pillars__values > li:first-child {
    border-top: 0;
}

.v2-pillars__values > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dourado);
}

/* Cascata: os cards sobem um a um quando a seção (data-reveal) entra */
html.js [data-reveal]:not(.is-in) .v2-pillar {
    opacity: 0;
}

html.js [data-reveal].is-in .v2-pillar {
    animation: v2-rise .7s var(--v2-ease) var(--delay, 0ms) backwards;
}

@media (min-width: 900px) {
    .v2-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

/* ============================================================
   Contato: canais em 2 colunas dentro do card e ícones das redes
   ============================================================ */
.v2-contact__channels {
    display: grid;
    gap: 36px 32px;
}

.v2-contact__social {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

.v2-contact__social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    display: grid;
    place-items: center;
    color: var(--preto);
    transition: background-color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease), transform var(--v2-dur) var(--v2-ease);
}

.v2-contact__social a:hover {
    background: var(--dourado);
    border-color: var(--dourado);
    transform: translateY(-2px);
}

.v2-contact__social svg {
    flex: none;
}

@media (min-width: 720px) {
    .v2-contact__channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   G. 404 — centrado: medalhão 120 px, título Cormorant 44 px, dois botões
   ============================================================ */
.v2-nf {
    background: var(--v2-branco);
    padding: clamp(64px, 10vh, 128px) 0 clamp(88px, 14vh, 168px);
    text-align: center;
}

.v2-nf__inner {
    max-width: calc(640px + 2 * var(--v2-pad-x));
    margin: 0 auto;
    padding: 0 var(--v2-pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.v2-nf__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.v2-nf .v2-eyebrow {
    margin-top: 32px;
}

.v2-nf__title {
    margin-top: 18px;
    font-family: var(--serif-principal);
    font-size: clamp(36px, 4.4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--preto);
}

.v2-nf__title em {
    font-style: italic;
    font-weight: 500;
}

.v2-nf__text {
    margin-top: 18px;
    font-family: var(--serif-apoio);
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 40ch;
}

.v2-nf__actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ---------- movimento reduzido: sem entrada do hero, zoom, lift ou cascata ---------- */
@media (prefers-reduced-motion: reduce) {
    html.js .v2-hero--page .v2-crumbs,
    html.js .v2-hero--page .v2-hero__copy > * {
        animation: none;
    }

    .v2-split__media:hover .v2-split__frame img,
    .v2-pillar:hover,
    .v2-contact__social a:hover {
        transform: none;
    }

    html.js [data-reveal]:not(.is-in) .v2-pillar {
        opacity: 1;
    }

    html.js [data-reveal].is-in .v2-pillar {
        animation: none;
    }
}

/* Contato: em 2 colunas o valor (e-mail) não cabe a 30 px — reduz sem quebrar a palavra (prova visual 07/09) */
.v2-contact__channels .v2-contact__value {
    font-size: clamp(20px, 1.55vw, 22px);
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ===== v2 blog (rodada 4, 07/09/2026) ===== */
/* Índice do blog (/blog/) e página de artigo (/blog/<slug>/) no vocabulário
   v2. Apêndice a concatenar DEPOIS de style.css: depende dos tokens v2 e de
   .v2-post/.v2-posts__grid, .v2-faq__item, .v2-crumbs, .v2-prose,
   .v2-container--narrow, .v2-section-head. Nada acima foi alterado.
   Classes novas: .v2-blog (+ __empty), .v2-posts__featured, .v2-post--featured,
   .v2-article (+ __main, __video, __faq, __fontes), .v2-article-head (+ __area,
   __title, __meta, __cover), .v2-crumbs--dark, .v2-note, .v2-article-cta
   (+ __title, __text, __actions), .v2-related. */

/* ---------- base: a página do artigo é branca (não tem hero nem pagehead) ---------- */
body:has(.v2-article) {
    background: var(--v2-branco);
}

body:has(.v2-article) .v2-nav {
    background: var(--v2-branco);
}

body:has(.v2-article) .v2-footer {
    border-radius: 0 0 20px 20px;
}

/* Foco visível preto nas superfícies claras do blog */
.v2-blog :focus-visible,
.v2-article :focus-visible,
.v2-related :focus-visible {
    outline: 2px solid var(--preto);
    outline-offset: 4px;
}

/* ============================================================
   /blog/ — "Últimas publicações": página branca, cards creme
   (inverso da faixa creme/cards brancos da home)
   ============================================================ */
.v2-blog .v2-posts__grid {
    margin-top: var(--v2-space-head);
}

.v2-blog .v2-post,
.v2-related .v2-post {
    background: var(--creme);
}

.v2-blog__empty {
    margin-top: var(--v2-space-head);
    font-family: var(--serif-apoio);
    font-size: var(--v2-body);
    line-height: 1.6;
    color: var(--texto-suave);
}

/* Destaque: o artigo mais recente em card largo — capa 16:9 (7/12) | texto (5/12) */
.v2-posts__featured {
    grid-column: 1 / -1;
}

.v2-post--featured .v2-post__media {
    aspect-ratio: 16 / 9;
}

.v2-post--featured .v2-post__body {
    padding: 22px 14px 8px;
}

.v2-post--featured .v2-post__title {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    max-width: 18ch;
    text-wrap: pretty;
}

.v2-post--featured .v2-post__excerpt {
    font-size: 16.5px;
    max-width: 52ch;
}

@media (min-width: 900px) {
    .v2-post--featured {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: clamp(24px, 3vw, 48px);
        align-items: center;
        padding: 10px;
    }

    .v2-post--featured .v2-post__media {
        height: 100%;
        min-height: 100%;
    }

    .v2-post--featured .v2-post__body {
        padding: 28px 40px 28px 8px;
        justify-content: center;
    }
}

/* ============================================================
   /blog/<slug>/ — cabeçalho sem foto de fundo: migalhas, área,
   H1 Cormorant, meta Inter 13 px, capa 16:9 na largura de leitura
   ============================================================ */
.v2-article {
    background: var(--v2-branco);
}

.v2-article-head {
    padding: clamp(40px, 6vw, 80px) 0 0;
}

/* Migalhas sobre o branco (a base de .v2-crumbs já é a variante escura;
   a classe fixa a cor mesmo se a base mudar) — o título atual encurta com reticências */
.v2-crumbs--dark {
    color: var(--texto-suave);
}

.v2-crumbs--dark a:hover,
.v2-crumbs--dark [aria-current="page"] {
    color: var(--preto);
}

.v2-article-head .v2-crumbs {
    margin-bottom: clamp(28px, 4vw, 44px);
}

.v2-article-head .v2-crumbs [aria-current="page"] {
    max-width: min(44ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Eyebrow com a área linkando para a página da área */
.v2-article-head__area a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--dourado), var(--dourado));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 3px;
    transition: color var(--v2-dur) var(--v2-ease);
}

.v2-article-head__area a:hover {
    color: var(--preto);
}

.v2-article-head__title {
    margin-top: 22px;
    font-family: var(--serif-principal);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.012em;
    color: var(--preto);
    max-width: 22ch;
    text-wrap: pretty;
}

.v2-article-head__meta {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--texto-suave);
}

.v2-article-head__meta > span + span::before {
    content: "\00b7";
    margin: 0 10px;
    color: var(--dourado);
}

.v2-article-head__cover {
    margin: clamp(32px, 4vw, 48px) 0 0;
    overflow: hidden;
    border-radius: var(--v2-r-card);
    background: var(--bege);
    box-shadow: 0 24px 56px rgba(64, 50, 28, .12);
    transform: translateZ(0);
}

.v2-article-head__cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------- corpo ---------- */
.v2-article__main {
    padding: clamp(36px, 5vw, 64px) 0 var(--v2-space-section);
}

.v2-article__video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 clamp(32px, 4vw, 48px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--preto);
}

.v2-article__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* .artigo__body (legado) fica no corpo por compatibilidade; estas regras
   neutralizam o que dele vaza para dentro da .v2-prose */
.v2-article .v2-prose {
    margin-top: 0;
}

.v2-article .v2-prose p + p {
    margin-top: 1.25em;
}

.v2-article .v2-prose ul,
.v2-article .v2-prose ol {
    margin: 0;
}

.v2-article .v2-prose hr {
    width: auto;
    margin: 2.4em 0;
    border-top: var(--v2-hairline);
}

/* FAQ do artigo: os cartões .v2-faq__item da home, sem o aside */
.v2-article__faq .v2-faq__list {
    margin-top: 1.2em;
}

.v2-article .v2-faq__q {
    margin: 0;
}

.v2-article .v2-faq__a {
    margin: 0;
    font-family: var(--sans);
}

/* Aviso: texto pequeno com barra dourada */
.v2-note {
    margin-top: clamp(40px, 5vw, 56px);
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--dourado);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: .01em;
    color: var(--texto-suave);
    max-width: 60ch;
}

/* Próximo passo: card creme com botão dourado (WhatsApp) e link para a área */
.v2-article-cta {
    margin-top: clamp(40px, 5vw, 64px);
    padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
    border-radius: var(--v2-r-card);
    background: var(--creme);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.v2-article-cta__title {
    margin-top: 18px;
    font-family: var(--serif-principal);
    font-size: clamp(26px, 2.6vw, 30px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--preto);
    max-width: 22ch;
}

.v2-article-cta__text {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto-suave);
    max-width: 52ch;
}

.v2-article-cta__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

/* ============================================================
   "Leia também" — sobre o branco, hairline em cima, cards creme
   ============================================================ */
.v2-related {
    padding: var(--v2-space-section) 0;
    background: var(--v2-branco);
    border-top: var(--v2-hairline);
}

.v2-related .v2-title {
    font-size: clamp(32px, 3.4vw, 44px);
}

.v2-related .v2-posts__grid {
    margin-top: var(--v2-space-head);
}

@media (min-width: 900px) {
    body:has(.v2-article) .v2-footer {
        border-radius: 0 0 var(--v2-r-bloco) var(--v2-r-bloco);
    }
}

/* ---------- movimento reduzido ---------- */
/* .v2-post--featured herda o lift/zoom de .v2-post, já desligados no bloco
   prefers-reduced-motion do style.css; nada mais anima aqui. */

/* ===== v2 áreas (rodada 4, 07/09/2026) ===== */
/* Apêndice das 5 páginas de área (direito-*.html). Só o que os primitivos das
   internas não cobrem: a faixa "Outras áreas" (.v2-areas-mini), o "Veja também"
   abaixo do FAQ (.v2-areas-more) e dois ajustes finos (respiro da .v2-cases
   depois do cabeçalho de seção; scrim mais fechado para foto clara no hero).
   Para mesclar no fim de style.css, depois do bloco "v2 internas". */

/* ---------- ajustes finos ---------- */

/* Lista de casos respira do cabeçalho de seção como os outros corpos (steps, faq) */
.v2-section-head + .v2-cases {
    margin-top: var(--v2-space-head);
}

/* Foto de hero muito clara (tributário: papel branco) — overlay mais fechado para
   manter creme AA sobre a foto; o degradê lateral fica igual ao da home */
.v2-hero--deep .v2-hero__scrim {
    background:
        linear-gradient(90deg, rgba(26, 26, 26, .45), transparent 30%, transparent 70%, rgba(26, 26, 26, .45)),
        linear-gradient(180deg, rgba(26, 26, 26, .74) 0%, rgba(26, 26, 26, .84) 50%, rgba(26, 26, 26, .92) 100%);
}

/* "Veja também: …" no fim da lista de perguntas */
.v2-areas-more {
    margin-top: 20px;
    padding-left: 22px;
}

/* ============================================================
   OUTRAS ÁREAS — faixa creme curta: eyebrow + link à direita e
   4 cards brancos (miniatura 64×80 raio 14 + chip + nome + seta)
   ============================================================ */
.v2-areas-mini {
    background: var(--creme);
    padding: clamp(56px, 7vw, 96px) 0;
}

.v2-areas-mini :focus-visible {
    outline: 2px solid var(--preto);
    outline-offset: 4px;
}

.v2-areas-mini__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}

.v2-areas-mini__head .v2-eyebrow {
    margin: 0;
}

.v2-areas-mini__grid {
    list-style: none;
    margin-top: 28px;
    display: grid;
    gap: 14px;
}

.v2-areas-mini__card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 10px 14px 10px 10px;
    border-radius: var(--v2-r-card);
    background: var(--v2-branco);
    color: var(--preto);
    text-decoration: none;
    transition: transform .4s var(--v2-ease), box-shadow .4s var(--v2-ease);
}

.v2-areas-mini__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--v2-shadow-soft);
}

.v2-areas-mini__thumb {
    flex: none;
    width: 64px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    object-position: center 40%;
    background: var(--bege);
}

.v2-areas-mini__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-areas-mini__tag {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.v2-areas-mini__name {
    font-family: var(--serif-principal);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.v2-areas-mini__go {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    display: grid;
    place-items: center;
    color: var(--preto);
    transition: background-color var(--v2-dur) var(--v2-ease), border-color var(--v2-dur) var(--v2-ease);
}

.v2-areas-mini__go svg {
    width: 14px;
    height: 14px;
    transition: transform var(--v2-dur) var(--v2-ease);
}

.v2-areas-mini__card:hover .v2-areas-mini__go {
    background: var(--dourado);
    border-color: var(--dourado);
}

.v2-areas-mini__card:hover .v2-areas-mini__go svg {
    transform: translate(1px, -1px);
}

/* Cascata no reveal (mesmo padrão dos pilares/cards da home) */
html.js [data-reveal]:not(.is-in) .v2-areas-mini__card {
    opacity: 0;
}

html.js [data-reveal].is-in .v2-areas-mini__card {
    animation: v2-rise .7s var(--v2-ease) var(--delay, 0ms) backwards;
}

@media (min-width: 560px) {
    .v2-areas-mini__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .v2-areas-mini__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    .v2-areas-mini__card:hover {
        transform: none;
    }

    .v2-areas-mini__card:hover .v2-areas-mini__go svg {
        transform: none;
    }

    html.js [data-reveal]:not(.is-in) .v2-areas-mini__card {
        opacity: 1;
    }

    html.js [data-reveal].is-in .v2-areas-mini__card {
        animation: none;
    }
}

/* "Veja também" quebra em 2 linhas no mobile: sublinhado por text-decoration, não pelo gradiente (prova visual 07/09) */
.v2-areas-more .v2-link {
    display: inline;
    min-height: 0;
    background: none;
    text-decoration: underline;
    text-decoration-color: var(--dourado);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    line-height: 1.6;
}
.v2-areas-more .v2-link svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}