/* ==========================================================================
   RANERI — Home (seções abaixo do hero + rodapé)
   --------------------------------------------------------------------------
   Base mobile-first. Ajustes por breakpoint em responsive.css.

   A Home é a vitrine do site multipágina: cada seção resume um assunto e
   termina em um link para a página interna (docs/ARQUITETURA.md).
   Ritmo da página (cada seção com identidade própria, mesmo vocabulário do
   hero: fio vermelho, linhas finas, índices mono, nós, diagrama unifilar),
   alternando claro (○) e escuro (●):
     ● Hero
     ○ 01 Soluções espaço lg · figura + registro técnico com ícones
     ● 02 Mercados espaço md · barramento com derivações, nós e ícones
     ○ 03 Projetos espaço lg · figura (planta) + estrutura de cada projeto
     ● Faixa       imagem em largura total
     ○ 04 Empresa  espaço xl · declaração + figura
     ● 05 Insights espaço md · linha editorial
     ● 06 Proposta espaço md · fechamento com fio vermelho sobre a divisa
   Componentes compartilhados com as páginas internas: seção, figura, faixa
   de proposta (.cta), links de contato e rodapé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Seção genérica e cadência vertical
   -------------------------------------------------------------------------- */
.section {
    --_space: var(--section-space);

    position: relative;
    padding-block: var(--_space);
    border-top: var(--border-width) solid var(--color-line-soft);
}

.section--space-sm { --_space: var(--section-space-sm); }
.section--space-md { --_space: var(--section-space-md); }
.section--space-lg { --_space: var(--section-space-lg); }
.section--space-xl { --_space: var(--section-space-xl); }

.section__header {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    max-width: 50rem;
    margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.section__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: var(--ls-tight);
}

.section__lead {
    max-width: 42rem;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

/* Cabeçalho sem conteúdo depois dele: o respiro fica só no padding da seção */
.section__header:last-child {
    margin-bottom: 0;
}

/* Botões ao fim de um cabeçalho de seção — mobile: empilhados */
.section__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    width: 100%;
    max-width: 24rem;
    margin-top: var(--space-sm);
}

/* Supergráfico (estudo P4, docs/IDENTIDADE.md): o símbolo oficial em escala
   de edifício, tom sobre tom. Usa o próprio arquivo do logotipo — nunca um
   redesenho —, recortado no símbolo pela caixa do pseudo-elemento
   (proporção 300 : 354). Máximo de dois pontos no site: faixa final e 404. */
.section--simbolo {
    overflow-x: clip;
    isolation: isolate;
}

.section--simbolo::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -30%;
    z-index: -1;
    height: 58%;
    aspect-ratio: 300 / 354;
    background: url("../img/branding/logo-raneri-white-red.svg") left center / auto 100% no-repeat;
    opacity: 0.06;
    filter: grayscale(1) brightness(1.8);
    pointer-events: none;
}

/* Divisa isométrica (estudo P5): na passagem do escuro para o claro, a borda
   da seção sobe 30° no canto esquerdo — a aresta do símbolo — com um fio
   vermelho. Só nessas passagens (Home: Hero → Soluções, Mercados → Projetos
   e Faixa → Empresa; internas: hero → primeira seção clara).
   --divisa-from: cor da seção anterior (padrão: o preto profundo). */
.section--divisa::after {
    --_w: clamp(4.5rem, 2rem + 8vw, 10rem);

    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: var(--_w);
    height: calc(var(--_w) * 0.5774);
    background: linear-gradient(to bottom right,
        var(--divisa-from, var(--color-bg-deep)) calc(50% - 1px),
        var(--color-accent) calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px));
    pointer-events: none;
}

/* Páginas internas (body.page): o header sólido é fixo — a primeira seção
   desconta a altura dele e dispensa o fio superior */
.page main > .section:first-child {
    padding-top: calc(var(--header-height) + var(--_space));
    border-top: 0;
}

/* --------------------------------------------------------------------------
   Campos de imagem (.figure)
   Cada campo mostra um desenho técnico padrão (assets/img/home/*-desenho.svg)
   até receber uma fotografia: trocar o src, descrever a foto no alt e usar
   data-media="foto". Moldura de prancha: marcas de registro nos cantos e
   índice "FIG." em mono. Guia: docs/IMAGENS.md
   -------------------------------------------------------------------------- */
.figure {
    --figure-ratio: 16 / 10;
    --figure-mark: 0.875rem;
    --figure-mark-color: var(--color-line-strong);
    /* Chanfro de 30° no canto superior esquerdo (estudo P3) */
    --figure-chamfer: clamp(1.75rem, 1rem + 2vw, 2.75rem);

    position: relative;
    margin: 0;
}

.figure__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--figure-ratio);
    object-fit: cover;
    background-color: var(--color-surface);
    clip-path: polygon(var(--figure-chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--figure-chamfer) * 0.5774));
}

/* Fotografia com <picture> (WebP preferencial, JPG de reserva, versões
   desktop/mobile): o <img class="figure__media"> continua dentro dela e
   recebe o mesmo recorte. Ponto focal: data-focal na <figure> (abaixo). */
.figure__frame > picture {
    display: block;
}

/* Ponto focal da fotografia (object-position) — padrão: centro */
.figure[data-focal="top-left"] .figure__media     { object-position: 0 0; }
.figure[data-focal="top"] .figure__media          { object-position: 50% 0; }
.figure[data-focal="top-right"] .figure__media    { object-position: 100% 0; }
.figure[data-focal="left"] .figure__media         { object-position: 0 50%; }
.figure[data-focal="right"] .figure__media        { object-position: 100% 50%; }
.figure[data-focal="bottom-left"] .figure__media  { object-position: 0 100%; }
.figure[data-focal="bottom"] .figure__media       { object-position: 50% 100%; }
.figure[data-focal="bottom-right"] .figure__media { object-position: 100% 100%; }

/* Fio vermelho sobre o corte do chanfro */
.figure__frame::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--figure-chamfer);
    height: calc(var(--figure-chamfer) * 0.5774);
    background: linear-gradient(to bottom right,
        transparent calc(50% - 1px),
        var(--color-accent) calc(50% - 1px) calc(50% + 1px),
        transparent calc(50% + 1px));
    pointer-events: none;
}

.figure[data-media="foto"] .figure__media {
    filter: saturate(0.92) contrast(1.03);
}

/* Quadro da imagem: recebe as marcas de registro */
.figure__frame {
    position: relative;
    display: block;
}

/* Marcas de registro: cantos em L, afastados da imagem */
.figure__frame::before {
    --_m: var(--figure-mark);
    --_c: var(--figure-mark-color);

    content: "";
    position: absolute;
    inset: calc(var(--space-2xs) * -1);
    z-index: 1;
    background:
        linear-gradient(var(--_c), var(--_c)) left top / var(--_m) 1px,
        linear-gradient(var(--_c), var(--_c)) left top / 1px var(--_m),
        linear-gradient(var(--_c), var(--_c)) right top / var(--_m) 1px,
        linear-gradient(var(--_c), var(--_c)) right top / 1px var(--_m),
        linear-gradient(var(--_c), var(--_c)) left bottom / var(--_m) 1px,
        linear-gradient(var(--_c), var(--_c)) left bottom / 1px var(--_m),
        linear-gradient(var(--_c), var(--_c)) right bottom / var(--_m) 1px,
        linear-gradient(var(--_c), var(--_c)) right bottom / 1px var(--_m);
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Índice da figura: "FIG. 01 ————" */
.figure__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.figure__label::after {
    content: "";
    flex: 1;
    height: var(--border-width);
    background-color: var(--color-line);
}

/* --------------------------------------------------------------------------
   01 · Soluções — registro técnico: linhas numeradas entre fios finos.
   Fio vermelho curto no início de cada linha (estende no hover) e marca de
   cota no fim da linha (desktop).
   -------------------------------------------------------------------------- */
.solutions {
    --solutions-accent: 2.5rem;

    border-bottom: var(--border-width) solid var(--color-line);
}

.solutions__figure {
    margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.solutions__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-xs) var(--space-lg);
    padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
    border-top: var(--border-width) solid var(--color-line);
}

/* Fio vermelho sobre a linha superior */
.solutions__item::before {
    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: 100%;
    height: var(--border-accent);
    background-color: var(--color-accent);
    clip-path: inset(0 calc(100% - var(--solutions-accent)) 0 0);
    transition: clip-path var(--dur-slower) var(--ease-out-expo);
}

.solutions__item:hover::before {
    clip-path: inset(0 0 0 0);
}

.solutions__index {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.solutions__icon {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-text-muted);
}

.solutions__title,
.solutions__text {
    grid-column: 1 / -1;
}

.solutions__title {
    max-width: 22em;
    font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.16;
    letter-spacing: var(--ls-snug);
}

.solutions__text {
    max-width: 34rem;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   02 · Mercados — a lista é um barramento: cada mercado é uma derivação com
   nó vermelho e ícone (vocabulário do diagrama unifilar do hero).
   Celular: barramento vertical à esquerda. ≥ 768px: barramento horizontal,
   com a derivação descendo até o ícone (responsive.css).
   -------------------------------------------------------------------------- */
.markets {
    display: grid;
    gap: 0 var(--space-3xl);
}

.markets__list {
    --markets-indent: 2.75rem;

    position: relative;
    padding-block: var(--space-2xs);
}

/* Barramento */
.markets__list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: var(--border-width);
    background-color: var(--color-line-strong);
    transform-origin: top center;
}

.markets__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block: clamp(0.875rem, 0.65rem + 0.7vw, 1.3rem);
    padding-left: var(--markets-indent);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    letter-spacing: var(--ls-snug);
}

/* Nó (losango bicolor, centrado no barramento) */
.markets__node {
    position: absolute;
    top: 50%;
    left: calc(3.5px - var(--node-w) / 2);
    translate: 0 -50%;
}

/* Derivação */
.markets__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(3.5px + var(--node-w) / 2);
    width: calc(var(--markets-indent) - 3.5px - var(--node-w) / 2 - 0.875rem);
    height: var(--border-width);
    background-color: var(--color-line-strong);
}

.markets__icon {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Faixa de imagem em largura total (entre Mercados e Empresa)
   Marcas de registro por dentro da imagem, alinhadas à margem do conteúdo.
   -------------------------------------------------------------------------- */
.band {
    --figure-ratio: 4 / 3;
    --figure-mark-color: rgba(255, 255, 255, 0.4);
    --figure-chamfer: 0px;

    background-color: var(--color-bg-deep);
}

.band .figure__frame::before {
    inset: var(--space-lg) var(--container-pad);
}

.band .figure__label {
    position: absolute;
    left: calc(var(--container-pad) + var(--space-md));
    bottom: calc(var(--space-lg) + var(--space-sm));
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
}

.band .figure__label::after {
    display: none;
}

/* Com fotografia: sombra discreta sob o índice */
.band[data-media="foto"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 38%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   03 · Empresa — declaração editorial em tema claro, com figura (vista
   isométrica por padrão). ≥ 960px: texto à esquerda, figura à direita e
   compromissos alinhados à base da figura (responsive.css).
   -------------------------------------------------------------------------- */
.statement {
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
}

.statement__text {
    --reveal-delay: 90ms;

    max-width: 17em;
    font-size: clamp(2rem, 1.25rem + 2.9vw, 4.25rem);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    letter-spacing: var(--ls-tight);
}

.statement__figure {
    --figure-ratio: 4 / 5;

    width: 100%;
    max-width: 32rem;
    margin-top: var(--space-md);
}

.statement__pillars {
    --reveal-delay: 180ms;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: var(--space-xl);
    border-top: var(--border-width) solid var(--color-line);
}

.statement__pillars li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-md) var(--space-sm) var(--space-md) 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Marcador: nó RANERI (mesmo losango de .node) */
.statement__pillars li::before {
    content: "";
    flex: none;
    width: 0.75rem;
    height: calc(0.75rem * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-text) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Link para a página Empresa, logo após a declaração */
.statement__action {
    margin-top: calc(var(--space-xs) * -1);
}

/* --------------------------------------------------------------------------
   03 · Projetos — introdução visual ao portfólio (sem cases fictícios):
   figura à esquerda e texto à direita no desktop (alternância com
   Soluções). A divisa parte do fundo de Mercados (#111).
   -------------------------------------------------------------------------- */
.section--projects {
    --divisa-from: var(--color-ink-900);
}

.projects {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.projects__figure {
    --figure-ratio: 4 / 3;
}

.projects__body {
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
}

.projects__body .section__header {
    margin-bottom: 0;
}

.projects__structure {
    width: 100%;
}

.projects__caption {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.projects__fields {
    counter-reset: campo;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--border-width) solid var(--color-line);
}

.projects__fields li {
    counter-increment: campo;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    border-bottom: var(--border-width) solid var(--color-line);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

.projects__fields li::before {
    content: counter(campo, decimal-leading-zero);
    font-family: var(--font-mono);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   05 · Insights — introdução editorial: a linha editorial (seis temas)
   como sumário, cada tema levando à página Insights. Sem artigos fictícios.
   -------------------------------------------------------------------------- */
.insights {
    display: grid;
    gap: var(--space-xl);
}

.insights__header {
    margin-bottom: 0;
}

.insights__topics ol {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-width) solid var(--color-line);
}

.insights__topics a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    padding-block: var(--space-md);
    border-bottom: var(--border-width) solid var(--color-line);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
}

/* Fio vermelho que percorre a linha no hover */
.insights__topics a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--border-width) * -1);
    height: var(--border-accent);
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur-slow) var(--ease-out-expo);
}

.insights__topics a:hover::after,
.insights__topics a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.insights__index {
    min-width: 1.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   06 · Solicitar proposta — fechamento: fio vermelho sobre a divisa da
   seção e título em escala maior. (Sem ação até o canal oficial existir.)
   -------------------------------------------------------------------------- */
.cta {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    align-items: end;
}

.cta::before {
    content: "";
    position: absolute;
    top: calc(var(--_space) * -1 - var(--border-width));
    left: var(--container-pad);
    right: var(--container-pad);
    height: var(--border-accent);
    background-color: var(--color-accent);
    transform-origin: left center;
}

.cta__body {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    max-width: 60rem;
}

.cta__title {
    max-width: 15em;
    font-size: clamp(2.25rem, 1.15rem + 3.9vw, 5rem);
    font-weight: var(--fw-semibold);
    line-height: 1.04;
    letter-spacing: var(--ls-tight);
}

.cta__text {
    max-width: 38rem;
    margin-top: var(--space-xs);
    font-size: var(--fs-md);
    color: var(--color-text-muted);
}

/* Canais de contato: linhas "rótulo · valor · seta" entre fios finos;
   o fio vermelho se desenha no hover (mesmo gesto das linhas de Soluções) */
.cta__contacts {
    width: 100%;
    border-top: var(--border-width) solid var(--color-line);
}

.contact-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label icon"
        "value icon";
    align-items: center;
    gap: var(--space-3xs) var(--space-md);
    padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    border-bottom: var(--border-width) solid var(--color-line);
    color: var(--color-white);
    text-decoration: none;
}

.contact-link::before {
    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: 100%;
    height: var(--border-accent);
    background-color: var(--color-accent);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--dur-slower) var(--ease-out-expo);
}

.contact-link:hover::before,
.contact-link:focus-visible::before {
    clip-path: inset(0 0 0 0);
}

.contact-link__label {
    grid-area: label;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-link__value {
    grid-area: value;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: var(--ls-snug);
    overflow-wrap: anywhere;
}

.contact-link__icon {
    grid-area: icon;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    transition:
        color var(--dur-base) var(--ease-standard),
        transform var(--dur-base) var(--ease-out);
}

.contact-link:hover .contact-link__icon {
    color: var(--color-white);
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Revelação ao rolar — efeitos específicos (ativos só com .has-reveal)
   -------------------------------------------------------------------------- */
.solutions__item:nth-child(2) { --reveal-delay: 70ms; }
.solutions__item:nth-child(3) { --reveal-delay: 140ms; }
.solutions__item:nth-child(4) { --reveal-delay: 210ms; }

/* Soluções: o fio vermelho de cada linha se desenha ao aparecer */
.has-reveal .solutions__item:not(.is-revealed)::before {
    clip-path: inset(0 100% 0 0);
}

/* Mercados: o barramento desce e as derivações surgem em sequência */
.markets__item:nth-child(2) { --_i: 1; }
.markets__item:nth-child(3) { --_i: 2; }
.markets__item:nth-child(4) { --_i: 3; }
.markets__item:nth-child(5) { --_i: 4; }
.markets__item:nth-child(6) { --_i: 5; }
.markets__item:nth-child(n + 7) { --_i: 6; }

.has-reveal .markets__list::before {
    transition: transform 1000ms var(--ease-out-expo);
}

.has-reveal .markets__item {
    transition:
        opacity 600ms var(--ease-out),
        transform 800ms var(--ease-out-expo);
    transition-delay: calc(200ms + var(--_i, 0) * 80ms);
}

.has-reveal .markets__node {
    transition: transform 500ms var(--ease-out-expo);
    transition-delay: calc(260ms + var(--_i, 0) * 80ms);
}

.has-reveal .markets__list:not(.is-revealed)::before {
    transform: scaleY(0);
}

.has-reveal .markets__list:not(.is-revealed) .markets__item {
    opacity: 0;
    transform: translateX(-0.5rem);
}

.has-reveal .markets__list:not(.is-revealed) .markets__node {
    transform: scale(0);
}

/* Campos de imagem: a imagem se abre de cima para baixo; marcas e índice
   aparecem logo depois */
.has-reveal .figure .figure__media {
    transition: clip-path 1200ms var(--ease-out-expo);
}

.has-reveal .figure .figure__frame::before,
.has-reveal .figure .figure__frame::after,
.has-reveal .figure .figure__label {
    transition: opacity 600ms var(--ease-out) 450ms;
}

.has-reveal .figure:not(.is-revealed) .figure__media {
    clip-path: polygon(var(--figure-chamfer) 0, 100% 0, 100% 0, 0 0, 0 0);
}

.has-reveal .figure:not(.is-revealed) .figure__frame::before,
.has-reveal .figure:not(.is-revealed) .figure__frame::after,
.has-reveal .figure:not(.is-revealed) .figure__label {
    opacity: 0;
}

/* Proposta: o fio vermelho percorre a divisa, depois entra o texto */
.has-reveal .cta::before {
    transition: transform 1200ms var(--ease-out-expo);
}

.has-reveal .cta__body {
    transition:
        opacity 700ms var(--ease-out) 250ms,
        transform 900ms var(--ease-out-expo) 250ms;
}

.has-reveal .cta:not(.is-revealed)::before {
    transform: scaleX(0);
}

.has-reveal .cta__contacts {
    transition:
        opacity 700ms var(--ease-out) 400ms,
        transform 900ms var(--ease-out-expo) 400ms;
}

.has-reveal .cta:not(.is-revealed) .cta__body,
.has-reveal .cta:not(.is-revealed) .cta__contacts {
    opacity: 0;
    transform: translateY(1.25rem);
}

/* --------------------------------------------------------------------------
   Rodapé — idêntico em todas as páginas (docs/ARQUITETURA.md)
   Marca · Páginas · Contato · Redes · linha legal. Celular: marca em cima,
   Páginas e Redes lado a lado, Contato em largura total. ≥ 40em e ≥ 60em em
   responsive.css. Página atual: aria-current="page" (branco + nó RANERI).
   -------------------------------------------------------------------------- */
.site-footer {
    padding-block: var(--space-2xl) var(--space-xl);
    border-top: var(--border-width) solid var(--color-line-soft);
    background-color: var(--color-bg-deep);
    font-size: var(--fs-sm);
    color: var(--color-text-subtle);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "brand   brand"
        "nav     social"
        "contact contact"
        "legal   legal";
    gap: var(--space-xl) var(--space-lg);
    align-items: start;
}

.site-footer__brand {
    grid-area: brand;
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
}

.site-footer__logo {
    width: auto;
    height: 1.5rem;
}

.site-footer__tagline {
    max-width: 22rem;
    color: var(--color-text-muted);
}

.site-footer__nav { grid-area: nav; }
.site-footer__group--contact { grid-area: contact; }
.site-footer__group--social { grid-area: social; }

/* Título de coluna: pequeno, técnico, com o fio vermelho do eyebrow */
.site-footer__heading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: var(--space-xs);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.site-footer__heading::before {
    content: "";
    flex: none;
    width: 1rem;
    height: var(--border-width);
    background-color: var(--color-accent);
}

.site-footer__links li,
.site-footer__contact li,
.site-footer__social li {
    padding-block: var(--space-3xs);
    color: var(--color-text-muted);
}

.site-footer__links a,
.site-footer__contact a,
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: var(--space-3xs);
    color: var(--color-text-muted);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--dur-base) var(--ease-standard);
}

.site-footer__links a:hover,
.site-footer__contact a:hover,
.site-footer__social a:hover,
.site-footer__links a[aria-current="page"] {
    color: var(--color-white);
}

/* Página atual: nó RANERI depois do nome */
.site-footer__links a[aria-current="page"]::after {
    content: "";
    flex: none;
    width: 0.625rem;
    height: calc(0.625rem * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-white) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Página ainda não publicada (não clicável) */
.site-footer__soon {
    display: inline-block;
    padding-block: var(--space-3xs);
    color: var(--color-text-subtle);
}

.site-footer__soon span {
    font-size: var(--fs-xs);
}

.site-footer__legal {
    grid-area: legal;
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--color-line-soft);
    font-size: var(--fs-xs);
}