/* ==================================================================
   Camax Engenharia — folha do site público.

   Identidade: Manual da Marca (2026). Paleta, tipografia e recursos
   gráficos vêm de lá. O que este arquivo decide é o ACABAMENTO.

   Cinco princípios, e cada um corrige um excesso da versão anterior:

   1. Os recursos da marca são ASSINATURA, não textura. O traço
      estrutural aparecia 32 vezes; agora abre a página e fecha seção.
      Grid técnico em dois lugares. Marca d'água em um.
   2. Nem tudo é card. Borda, fundo e chanfro só onde é preciso separar
      um objeto dos vizinhos. O resto é lista, texto e imagem.
   3. O chanfro é do botão primário e da foto de obra. Mais que isso e
      ele vira o `border-radius` de sempre, só com outra forma.
   4. Hierarquia é tipográfica. Antes de acrescentar caixa, ícone ou
      etiqueta, resolva com tamanho, peso e espaço.
   5. Espaço em branco é material, não sobra.
   ================================================================== */

:root {
    /* Paleta oficial — Manual da Marca, página 13 */
    --marinho:      #0B1D33;
    --marinho-esc:  #071523;
    --grafite:      #1F2933;
    --champagne:    #C7BFA8;
    --concreto:     #E6E4DF;
    --offwhite:     #F7F5F0;
    --preto:        #111111;

    /*
     * NÃO existe champagne para fundo claro.
     *
     * Em fundo claro ele precisa ser escurecido para aparecer, e
     * escurecido ele vira MARROM — que é a identidade da Sollievo.
     * A regra que resolve as duas coisas de uma vez:
     *
     *     O CHAMPAGNE SÓ APARECE SOBRE O MARINHO.
     *
     * Ali ele é ouro sobre azul: discreto, inconfundível e dentro
     * dos 5–10% que o manual pede. Em fundo claro, a assinatura é
     * o próprio azul da marca.
     */

    /*
     * O ACENTO DA CAMAX É AZUL.
     *
     * O marinho é a cor dominante do manual e era a cor do site
     * antigo. O champagne é ASSINATURA, não acento: o manual limita
     * em 5–10% e proíbe botão inteiro. Dourado espalhado, além de
     * contrariar o manual, invade a identidade da Sollievo — as duas
     * construtoras dividem a base de código e não podem dividir a cor.
     *
     * Estes dois são TINTA DO PRÓPRIO MARINHO (H 211°, contra os 213°
     * dele). Nada a ver com o #2568EF que o manual proíbe pelo nome:
     * aquele é H 220°, S 86%, L 54% — azul elétrico de banner.
     */
    --acento:      #245489;  /* sobre fundo claro  — 7,13:1, passa AA */
    --acento-inv:  #8FB8E0;  /* sobre fundo escuro — 8,16:1           */

    /*
     * O AZUL DA MARCA — o que o dono reconhece como "o azul da Camax".
     *
     * O site atual usa #2568EF, que o manual PROIBE pelo nome. Estes
     * dois fazem o mesmo gesto e passam em AA, o que o #2568EF nao faz
     * sobre marinho (3,48:1). Sao o mesmo azul em duas luminancias,
     * separados pelo papel:
     */
    --azul-acao:   #2E6FE0;  /* fundo de botao — branco em cima da 4,70:1 */
    --azul-luz:    #4A8CF0;  /* texto azul sobre marinho — 5,09:1         */

    /* Marinho levantado: #0B1D33 tem L 12% e lê como preto. Este
       devolve o azul quando a área é grande. */
    --marinho-claro:  #16324F;

    --tx-claro:     #E6E4DF;
    --tx-claro-2:   rgba(230, 228, 223, .76);
    --tx-claro-3:   rgba(230, 228, 223, .56);

    --tx-escuro:    #1F2933;
    --tx-escuro-2:  #4A535E;
    --tx-escuro-3:  #656E7A;

    --linha-clara:  rgba(201, 214, 228, .22);
    --linha-escura: rgba(31, 41, 51, .18);

    --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --corpo:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;

    --container: 1240px;
    --goteira:   clamp(1.25rem, 4vw, 2.5rem);

    /* Respiro generoso: é o que separa um site de alto padrão de um
       catálogo. A versão anterior usava 3,5–6,5rem e ficava apertada. */
    --secao-y:   clamp(4.5rem, 10vw, 8.5rem);

    --transicao: 240ms cubic-bezier(.22, .61, .36, 1);

    /* O corte angular da marca. NAO e 45 graus: o hexagono da logo tem
       inclinacao de telhado, e o corte a 45 e o chanfro generico de
       qualquer lugar. A razao 1,7:1 entre x e y reproduz a agua do
       telhado do simbolo — e o unico detalhe do site que so a Camax tem. */
    --corte-x: 17px;
    --corte-y: 10px;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    font-family: var(--corpo);
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--tx-escuro);
    background: var(--offwhite);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

/* Peso 600, não 700/800: em corpo grande o extra-bold engrossa e
   empobrece. A firmeza vem do espacejamento negativo. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.022em;
    text-wrap: balance;
}

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--acento-inv);
    outline-offset: 3px;
}
.secao--claro :where(a, button, input, select, textarea):focus-visible,
.secao--concreto :where(a, button, input, select, textarea):focus-visible,
.rodape__certificacao:focus-visible {
    outline-color: var(--acento);
}

.pular {
    position: absolute; left: -9999px;
    background: var(--marinho); color: var(--concreto);
    padding: .8rem 1.25rem; z-index: 200;
    font-family: var(--display); font-size: .82rem;
}
.pular:focus { left: 1rem; top: 1rem; }

.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------
   Malha — 12 colunas. É ela que permite assimetria com disciplina.
   ------------------------------------------------------------------ */

.container {
    width: min(100% - (var(--goteira) * 2), var(--container));
    margin-inline: auto;
}

/* Todo item de malha zera min-width pelo mesmo motivo da grade de obras. */
.malha > * { min-width: 0; }

.malha {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.2vw, 1.75rem);
    row-gap: clamp(2rem, 5vw, 3.5rem);
}

.col-texto  { grid-column: 1 / span 12; }
.col-largo  { grid-column: 1 / span 12; }
.col-recuo  { grid-column: 1 / span 12; }
.col-meia-e { grid-column: 1 / span 12; }
.col-meia-d { grid-column: 1 / span 12; }

/* O recuo é o que tira o layout do centro perfeito sem virar bagunça. */
@media (min-width: 900px) {
    .col-texto  { grid-column: 1 / span 6; }
    .col-largo  { grid-column: 1 / span 10; }
    .col-recuo  { grid-column: 4 / span 8; }
    .col-meia-e { grid-column: 1 / span 6; }
    .col-meia-d { grid-column: 8 / span 5; }
}

/* ------------------------------------------------------------------
   Recursos da marca — com parcimônia
   ------------------------------------------------------------------ */

.grid-tecnico { position: relative; isolation: isolate; overflow: hidden; }
.grid-tecnico::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(to right, rgba(169, 192, 216, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(169, 192, 216, .10) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 58%);
            mask-image: linear-gradient(115deg, #000 0%, transparent 58%);
}

/* Traço estrutural: abre página, fecha seção. Não enfeita título. */
.traco {
    height: 2px; border: 0; margin: 0;
    background: var(--champagne);
    width: 52px;
}
.secao--claro .traco, .secao--concreto .traco {
    background: var(--acento);
}

.chanfro,
.btn,
.obra-item {
    clip-path: polygon(
        var(--corte-x) 0,
        100% 0,
        100% calc(100% - var(--corte-y)),
        calc(100% - var(--corte-x)) 100%,
        0 100%,
        0 var(--corte-y)
    );
}

/* Marca d'água: uma por site. */
.dagua {
    position: absolute; z-index: -1;
    right: -2%; bottom: -14%;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(6rem, 15vw, 13rem);
    letter-spacing: -.06em; line-height: 1;
    color: rgba(230, 228, 223, .02);
    pointer-events: none; user-select: none; white-space: nowrap;
}
@media (max-width: 860px) { .dagua { display: none; } }

/* ------------------------------------------------------------------
   Tipografia de seção — três aberturas, não uma fórmula
   ------------------------------------------------------------------ */

.rotulo {
    display: block;
    font-family: var(--display);
    font-size: .68rem; font-weight: 500;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--acento);
}
.secao--marinho .rotulo, .secao--grafite .rotulo,
.convite .rotulo { color: var(--acento-inv); }

/* A medida existe para titulo longo. Apertada demais (18ch) ela quebrava
   "O que a Camax conduz" em duas linhas sem motivo — a coluna ja limita. */
.titulo-secao { font-size: clamp(1.7rem, 3.6vw, 2.55rem); max-width: 24ch; }
.titulo-secao--largo { max-width: 30ch; }

.entrada {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    line-height: 1.62;
    color: var(--tx-escuro-2);
    max-width: 46ch;
}
.secao--marinho .entrada, .secao--grafite .entrada, .convite .entrada { color: var(--tx-claro-2); }

/* Frase serifada, curta. Uso raro, por definição. */
.frase {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.35rem, 3vw, 1.95rem);
    line-height: 1.38; letter-spacing: 0;
    color: var(--acento);
    max-width: 30ch;
}
.secao--marinho .frase, .secao--grafite .frase { color: var(--champagne); }

.texto-apoio { color: var(--tx-escuro-2); max-width: 58ch; }
.secao--marinho .texto-apoio, .secao--grafite .texto-apoio { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Seções
   ------------------------------------------------------------------ */

.secao { padding-block: var(--secao-y); }
.secao--curta { padding-block: clamp(3rem, 6vw, 5rem); }

.secao--marinho {
    background:
        radial-gradient(120% 90% at 12% 0%, var(--marinho-claro) 0%, transparent 62%),
        var(--marinho);
    color: var(--tx-claro);
}
.secao--grafite {
    background:
        radial-gradient(120% 90% at 88% 0%, #2B3846 0%, transparent 58%),
        var(--grafite);
    color: var(--tx-claro);
}
.secao--claro    { background: var(--offwhite); color: var(--tx-escuro); }
.secao--concreto { background: var(--concreto); color: var(--tx-escuro); }

/* ------------------------------------------------------------------
   Botões — um, e um link
   ------------------------------------------------------------------ */

/*
 * O BOTÃO É AZUL, em qualquer fundo.
 *
 * O site atual tem botão azul e o dono pediu essa cor de volta. Azul
 * também é a resposta mais barata ao "tem que ter mais azul no site":
 * o botão é o elemento que mais se repete — capa, fim de cada página,
 * convite, formulário. Uma cor só, em toda parte, também tira uma
 * decisão de cima de quem for mexer nisto depois.
 */
.btn {
    display: inline-flex; align-items: center; gap: .7rem;
    padding: 1rem 1.9rem;
    border: 1px solid var(--azul-acao);
    background: var(--azul-acao); color: #FFF;
    font-family: var(--display);
    font-size: .74rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao),
                border-color var(--transicao);
}
.btn:hover { background: var(--marinho); border-color: var(--marinho); color: var(--concreto); }

/* Sobre marinho o mesmo azul precisa de um degrau a mais de luz para se
   descolar do fundo — e aí o hover é que vira claro. */
.secao--marinho .btn, .secao--grafite .btn, .convite .btn, .hero .btn {
    background: var(--azul-acao); border-color: var(--azul-acao); color: #FFF;
}
.secao--marinho .btn:hover, .secao--grafite .btn:hover,
.convite .btn:hover, .hero .btn:hover {
    background: var(--concreto); border-color: var(--concreto); color: var(--marinho);
}

/* Link com seta — menos peso visual, mesma função do segundo botão. */
.link-seta {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--display);
    font-size: .74rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; color: var(--tx-escuro);
    padding-block: .65rem;
    border-bottom: 1px solid var(--linha-escura);
    transition: border-color var(--transicao), color var(--transicao);
}
.link-seta svg { width: 15px; height: 15px; transition: transform var(--transicao); }
.link-seta:hover { border-bottom-color: var(--acento); color: var(--acento); }
.link-seta:hover svg { transform: translateX(5px); }

.secao--marinho .link-seta, .secao--grafite .link-seta, .convite .link-seta, .hero .link-seta {
    color: var(--tx-claro); border-bottom-color: var(--linha-clara);
}
.secao--marinho .link-seta:hover, .secao--grafite .link-seta:hover,
.convite .link-seta:hover, .hero .link-seta:hover {
    color: var(--acento-inv); border-bottom-color: var(--acento-inv);
}

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

.cabecalho {
    position: sticky; top: 0; z-index: 100;
    background: var(--marinho);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transicao), border-color var(--transicao);
}
.cabecalho--solto { position: fixed; inset: 0 0 auto 0; background: transparent; }
.cabecalho--solto.is-rolado {
    background: rgba(7, 21, 35, .94);
    border-bottom-color: var(--linha-clara);
    backdrop-filter: saturate(150%) blur(10px);
}

.cabecalho__interno {
    width: min(100% - (var(--goteira) * 2), 1440px);
    margin-inline: auto;
    display: flex; align-items: center; gap: 2rem;
    min-height: 84px;
}

.cabecalho__logo { flex: 0 0 auto; display: block; }
.cabecalho__logo img { width: auto; height: 52px; transition: opacity var(--transicao); }
.cabecalho__logo:hover img { opacity: .78; }

.cabecalho__nav { margin-left: auto; }
.cabecalho__nav ul { display: flex; align-items: center; gap: 2.4rem; list-style: none; }
.cabecalho__nav a {
    color: var(--tx-claro-2); text-decoration: none;
    font-family: var(--display);
    font-size: .76rem; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase;
    padding-block: .5rem;
    position: relative; white-space: nowrap;
    transition: color var(--transicao);
}
.cabecalho__nav a:hover { color: var(--tx-claro); }

/* A marca da página atual é um ponto, não um sublinhado que corre. */
.cabecalho__nav a.is-ativo { color: var(--tx-claro); }
.cabecalho__nav a.is-ativo::before {
    content: ""; position: absolute; left: 50%; top: -.35rem;
    width: 3px; height: 3px; margin-left: -1.5px;
    background: var(--acento-inv);
}

/* Mesmo corpo e mesmo espacejamento do menu: o que separa este link dos
   outros e o fio a esquerda, nao uma caixa alta diferente. */
.cabecalho__contato {
    font-family: var(--display); font-size: .76rem; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase; color: var(--acento-inv);
    text-decoration: none; white-space: nowrap;
    padding-left: 2rem; border-left: 1px solid var(--linha-clara);
    transition: color var(--transicao);
}
.cabecalho__contato:hover { color: var(--concreto); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.cabecalho__hamburguer {
    display: none; width: 44px; height: 44px; padding: 12px;
    margin-left: auto;
    flex-direction: column; justify-content: center; gap: 6px;
    cursor: pointer; background: transparent; border: 0;
}
.cabecalho__hamburguer span {
    display: block; height: 1px; background: var(--concreto);
    transition: transform var(--transicao), opacity var(--transicao);
}
.nav-fundo { display: none; }

/* ------------------------------------------------------------------
   Capa da home
   ------------------------------------------------------------------ */

.hero {
    position: relative; isolation: isolate;
    /* A capa ocupa a tela INTEIRA, sempre — pedido do dono. `svh` e não
       `vh`: no celular a barra do navegador entra e sai, e `100vh` deixaria
       o pé da capa escondido atrás dela. O `vh` antes é o reserva. */
    min-height: 100vh;
    min-height: 100svh;
    display: grid; align-items: end;
    color: var(--tx-claro); overflow: hidden;
    background: var(--marinho-esc);
}

.hero__fundo { position: absolute; inset: 0; z-index: -3; }
.hero__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06); }
.hero__foto.is-ativa { opacity: 1; }

.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    /* Dois veus somados: o vertical da o pe e o topo; o horizontal da
       base solida ao texto, que fica a esquerda. Sem ele, a legenda
       caia sobre a parte clara da foto e perdia contraste. */
    background:
        linear-gradient(180deg, rgba(7, 21, 35, .62) 0%, rgba(7, 21, 35, 0) 24%),
        linear-gradient(0deg, rgba(7, 21, 35, .70) 0%, rgba(7, 21, 35, 0) 34%),
        linear-gradient(100deg, rgba(7, 21, 35, .90) 0%, rgba(7, 21, 35, .62) 38%, rgba(7, 21, 35, .08) 72%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(to right, rgba(169, 192, 216, .09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(169, 192, 216, .09) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 52%);
            mask-image: linear-gradient(115deg, #000 0%, transparent 52%);
}

.hero__interno { padding-block: clamp(8rem, 15vw, 11rem) clamp(3.5rem, 7vw, 5.5rem); }

/* Tela baixa (notebook de 657 a 820px de altura útil): a capa ocupa a
   tela inteira, então quem tem de caber é o CONTEÚDO. Com os respiros de
   monitor grande ela media 802px numa janela de 657, e o pé da capa —
   cidades e contador — ficava abaixo da dobra. Aqui os espaços e o
   título passam a acompanhar a ALTURA, não a largura. */
@media (min-width: 900px) and (max-height: 860px) {
    .hero__interno { padding-block: max(6rem, 14svh) clamp(1.25rem, 4svh, 3.5rem); }
    .hero__titulo  { font-size: clamp(2.2rem, 7.6svh, 4.4rem); }
    .hero__texto   { margin-top: clamp(1rem, 2.6svh, 1.9rem); }
    .hero__acoes   { margin-top: clamp(1.25rem, 3.6svh, 2.75rem); }
    .hero__rodape  { margin-top: clamp(1.5rem, 4.5svh, 5rem); }
}

.hero__titulo {
    font-size: clamp(2.35rem, 6vw, 4.4rem);
    font-weight: 600; letter-spacing: -.04em; line-height: 1.02;
    /*
     * A MEDIDA SAIU.
     *
     * Com `max-width: 19ch` o título quebrava onde a linha acabasse, e a
     * palavra que gira tem três larguras diferentes — "Realiza" ficava
     * pendurada no fim da primeira linha e "Transforma" empurrava tudo.
     * Hoje a quebra é decidida pela estrutura (`.hero__gira` é bloco e
     * ocupa a linha dela), não pela sobra de espaço: três linhas fixas,
     * sempre as mesmas, com qualquer das palavras.
     */
    max-width: 16ch;
    text-wrap: initial;
}
.hero__titulo em { font-style: normal; color: var(--champagne); }

.hero__texto {
    margin-top: 1.9rem; max-width: 42ch;
    color: var(--tx-claro-2);
    font-size: clamp(1rem, 1.35vw, 1.1rem);
}

.hero__acoes { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-top: 2.75rem; }

/* Rodapé da capa: uma linha, discreta. Não é painel de números. */
.hero__rodape {
    border-top: 1px solid var(--linha-clara);
    padding-top: 1.2rem; margin-top: clamp(3rem, 7vw, 5rem);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1.5rem; flex-wrap: wrap;
    font-family: var(--display);
    font-size: .7rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--tx-claro-3);
}
.hero__controles { display: flex; gap: 1.5rem; align-items: center; }
.hero__contador { font-variant-numeric: tabular-nums; color: var(--tx-claro-2); }
.hero__pausa {
    background: none; border: 0; cursor: pointer; padding: .4rem 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: var(--tx-claro-3);
    border-bottom: 1px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.hero__pausa:hover { color: var(--acento-inv); border-bottom-color: var(--acento-inv); }

/* ------------------------------------------------------------------
   Índice editorial — no lugar da grade de cards
   ------------------------------------------------------------------ */

.indice { border-top: 1px solid var(--linha-escura); }
.secao--marinho .indice, .secao--grafite .indice { border-top-color: var(--linha-clara); }

.indice__item {
    display: grid; gap: .35rem 2rem;
    grid-template-columns: 1fr;
    padding-block: 1.6rem;
    border-bottom: 1px solid var(--linha-escura);
    text-decoration: none; color: inherit;
    transition: background-color var(--transicao);
}
.secao--marinho .indice__item, .secao--grafite .indice__item { border-bottom-color: var(--linha-clara); }

@media (min-width: 760px) {
    .indice__item {
        grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) 2rem;
        align-items: baseline;
        padding-inline: .75rem; margin-inline: -.75rem;
    }
}

.indice__item:hover { background: rgba(31, 41, 51, .035); }
.secao--marinho .indice__item:hover, .secao--grafite .indice__item:hover {
    background: rgba(230, 228, 223, .04);
}

.indice__n {
    font-family: var(--display); font-size: .7rem; font-weight: 400;
    letter-spacing: .12em; color: var(--tx-escuro-3);
    font-variant-numeric: tabular-nums;
}
.secao--marinho .indice__n, .secao--grafite .indice__n { color: var(--tx-claro-3); }

.indice__nome {
    font-family: var(--display); font-size: 1.12rem; font-weight: 500;
    letter-spacing: -.012em;
    transition: color var(--transicao);
}
.indice__item:hover .indice__nome { color: var(--acento); }
.secao--marinho .indice__item:hover .indice__nome,
.secao--grafite .indice__item:hover .indice__nome { color: var(--acento-inv); }

.indice__desc { color: var(--tx-escuro-2); font-size: .95rem; }
.secao--marinho .indice__desc, .secao--grafite .indice__desc { color: var(--tx-claro-2); }

.indice__seta {
    justify-self: end; align-self: center; color: var(--tx-escuro-3);
    opacity: 0; transform: translateX(-6px);
    transition: opacity var(--transicao), transform var(--transicao);
}
.indice__item:hover .indice__seta { opacity: 1; transform: none; }
.indice__seta svg { width: 16px; height: 16px; }
@media (max-width: 759px) { .indice__seta { display: none; } }

/* ------------------------------------------------------------------
   O Método — sequência real, numeração justificada
   ------------------------------------------------------------------ */

.metodo { list-style: none; display: grid; }
@media (min-width: 900px) { .metodo { grid-template-columns: repeat(4, 1fr); } }

.etapa {
    padding: 1.9rem 0 2.2rem;
    border-top: 1px solid var(--linha-clara);
    position: relative;
}
@media (min-width: 900px) {
    .etapa { padding-right: 2rem; }
    /* Fio vertical curto entre etapas: marca a passagem sem virar caixa. */
    .etapa + .etapa::before {
        content: ""; position: absolute; left: -1rem; top: 1.9rem;
        width: 1px; height: 2.2rem; background: var(--linha-clara);
    }
}

.etapa__n {
    display: block; margin-bottom: 1rem;
    font-family: var(--display); font-size: .7rem; font-weight: 400;
    letter-spacing: .2em; color: var(--acento-inv);
    font-variant-numeric: tabular-nums;
}
.etapa h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: .55rem; }
.etapa p { color: var(--tx-claro-2); font-size: .93rem; margin: 0; }

.secao--claro .etapa, .secao--concreto .etapa { border-top-color: var(--linha-escura); }
.secao--claro .etapa + .etapa::before,
.secao--concreto .etapa + .etapa::before { background: var(--linha-escura); }
.secao--claro .etapa__n, .secao--concreto .etapa__n { color: var(--acento); }
.secao--claro .etapa p, .secao--concreto .etapa p { color: var(--tx-escuro-2); }

/* ------------------------------------------------------------------
   Valores — lista, não sequência: sem numeração
   ------------------------------------------------------------------ */

.valores { display: grid; gap: 2.25rem 3.5rem; }
@media (min-width: 720px)  { .valores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .valores { grid-template-columns: repeat(3, 1fr); } }

.valor { display: grid; gap: .55rem; align-content: start; }
.valor h3 {
    font-size: 1.02rem; font-weight: 500;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--linha-escura);
}
.secao--marinho .valor h3, .secao--grafite .valor h3 { border-bottom-color: var(--linha-clara); }
.valor p { font-size: .93rem; color: var(--tx-escuro-2); margin: 0; }
.secao--marinho .valor p, .secao--grafite .valor p { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Obras — grade editorial, alturas diferentes
   ------------------------------------------------------------------ */

.obras { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
/* Largura assimetrica, ALTURA igual dentro da linha.
   Com `aspect-ratio` e larguras diferentes a altura nunca casa, e
   sobra um buraco embaixo do item mais estreito. Altura fixa por
   linha resolve, e a proporcao muda de uma linha para a outra. */
@media (min-width: 840px) {
    .obras { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    /* `min-width: 0` e obrigatorio: item de grid nasce com `min-width: auto`
 e nao encolhe abaixo do tamanho intrinseco da foto (1080px), estourando
 a propria trilha em 50px. A minmax(0,1fr) resolve a TRILHA, nao o item. */
    .obras > * { aspect-ratio: auto; min-width: 0; }
    .obras > *:nth-child(6n+1) { grid-column: span 7; height: clamp(22rem, 34vw, 30rem); }
    .obras > *:nth-child(6n+2) { grid-column: span 5; height: clamp(22rem, 34vw, 30rem); }
    .obras > *:nth-child(6n+3) { grid-column: span 5; height: clamp(18rem, 27vw, 24rem); }
    .obras > *:nth-child(6n+4) { grid-column: span 7; height: clamp(18rem, 27vw, 24rem); }
    .obras > *:nth-child(6n+5) { grid-column: span 6; height: clamp(16rem, 24vw, 21rem); }
    .obras > *:nth-child(6n)   { grid-column: span 6; height: clamp(16rem, 24vw, 21rem); }
}

.obra-item {
    position: relative; display: block; overflow: hidden;
    text-decoration: none; color: var(--tx-claro);
    background: var(--marinho-esc);
}
/* A proporcao vale so no empilhado. Acima de 840px a altura da linha manda,
 e deixar `aspect-ratio` aqui fazia a largura ser calculada a partir dela —
 o item estourava a trilha do grid em 50px. */
@media (max-width: 839px) { .obra-item { aspect-ratio: 4 / 3; } }

.obra-item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.06);
    transition: transform 900ms cubic-bezier(.22, .61, .36, 1), filter var(--transicao);
}
.obra-item:hover img { transform: scale(1.035); filter: saturate(1.12); }

.obra-item__tampa {
    position: absolute; inset: auto 0 0 0;
    padding: 3rem 1.5rem 1.4rem;
    background: linear-gradient(180deg, transparent 12%, rgba(7, 21, 35, .90));
}
/* Virou <h2> na grade de obras (era <span>): o <h2> do navegador traz
   margem e corpo proprios, e sem zerar os dois o cartao muda de altura. */
.obra-item__nome {
    display: block; margin: 0;
    font-family: var(--display); font-size: 1rem; font-weight: 500;
    line-height: 1.3; color: inherit;
}
.obra-item__meta {
    display: block; margin-top: .3rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx-claro-3);
}

/* ------------------------------------------------------------------
   Depoimentos — citação, não cartão
   ------------------------------------------------------------------ */

.citacoes { display: grid; }
@media (min-width: 860px) { .citacoes { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

.citacao { margin: 0; padding-block: 2.25rem; border-top: 1px solid var(--linha-clara); }
.citacao blockquote {
    margin: 0;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    line-height: 1.5; color: var(--tx-claro);
}
.citacao figcaption {
    margin-top: 1.1rem;
    font-family: var(--display); font-size: .68rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx-claro-3);
}
.citacao figcaption b { font-weight: 500; color: var(--tx-claro-2); }

.secao--claro .citacao, .secao--concreto .citacao { border-top-color: var(--linha-escura); }
.secao--claro .citacao blockquote, .secao--concreto .citacao blockquote { color: var(--tx-escuro); }
.secao--claro .citacao figcaption, .secao--concreto .citacao figcaption { color: var(--tx-escuro-3); }
.secao--claro .citacao figcaption b, .secao--concreto .citacao figcaption b { color: var(--tx-escuro-2); }

/* ------------------------------------------------------------------
   Blog
   ------------------------------------------------------------------ */

.grade-posts { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) {
    .grade-posts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}

.card-post { display: grid; gap: 1.1rem; align-content: start; text-decoration: none; color: inherit; }
.card-post__foto {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    background: var(--concreto);
    transition: opacity var(--transicao);
}
.card-post:hover .card-post__foto { opacity: .88; }
.card-post__data {
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-escuro-3);
}
.card-post h2, .card-post h3 {
    font-size: 1.1rem; font-weight: 500; line-height: 1.32;
    transition: color var(--transicao);
}
.card-post:hover h2, .card-post:hover h3 { color: var(--acento); }
.card-post p { font-size: .93rem; color: var(--tx-escuro-2); margin: 0; }

/* Artigo */
.artigo { padding-block: var(--secao-y); background: var(--offwhite); }
.artigo__capa { width: 100%; max-height: 520px; object-fit: cover; margin-bottom: 3rem; }
.artigo__corpo { font-size: 1.06rem; line-height: 1.78; }
.artigo__corpo h2 { font-size: 1.35rem; margin: 2.5rem 0 .9rem; }
.artigo__corpo h3 { font-size: 1.12rem; margin: 2rem 0 .7rem; }
.artigo__corpo ul, .artigo__corpo ol { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.artigo__corpo li { margin-bottom: .5rem; }
.artigo__corpo a {
    color: var(--acento);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------
   Capa das páginas internas
   ------------------------------------------------------------------ */

.capa-pagina {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--marinho); color: var(--tx-claro);
    padding: clamp(8rem, 14vw, 11rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.capa-pagina__foto {
    position: absolute; inset: 0; z-index: -3;
    background-size: cover; background-position: center;
}
.capa-pagina__foto img { width: 100%; height: 100%; object-fit: cover; }
.capa-pagina::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(180deg, rgba(7, 21, 35, .60) 0%, rgba(7, 21, 35, 0) 30%),
        linear-gradient(0deg, rgba(7, 21, 35, .80) 0%, rgba(7, 21, 35, .10) 62%),
        linear-gradient(100deg, rgba(7, 21, 35, .90) 0%, rgba(7, 21, 35, .58) 46%, rgba(7, 21, 35, .22) 100%);
}
.capa-pagina h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.035em; max-width: 17ch; }
.capa-pagina p { margin-top: 1.4rem; max-width: 48ch; color: var(--tx-claro-2); }

.trilha {
    display: flex; gap: .6rem; flex-wrap: wrap; list-style: none;
    margin-bottom: 1.75rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-claro-3);
}
.trilha a { color: var(--tx-claro-3); text-decoration: none; transition: color var(--transicao); }
.trilha a:hover { color: var(--acento-inv); }

/* O ultimo degrau e a pagina atual: nao e link, e um <span> com
   `aria-current`. Ele herda a cor da trilha, so que um tom acima —
   quem esta chegando precisa saber onde parou. */
.trilha [aria-current="page"] { color: var(--tx-claro-2); }

/* A trilha ganhou um <nav> em volta, para o leitor de tela poder
   pular direto para ela. A margem que era do <ul> passa para ca,
   senao o espaco embaixo dobra. */
.trilha-nav { margin-bottom: 1.75rem; }
.trilha-nav .trilha { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Chamada final
   ------------------------------------------------------------------ */

/* Lista com fio — substitui as etiquetas de região */
.lista-fio { list-style: none; display: grid; }
.lista-fio li {
    padding-block: .9rem;
    border-bottom: 1px solid var(--linha-escura);
    display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
    font-size: .97rem;
}
.lista-fio li:first-child { border-top: 1px solid var(--linha-escura); }
.secao--marinho .lista-fio li, .secao--grafite .lista-fio li, .convite .lista-fio li {
    border-color: var(--linha-clara);
}
.lista-fio span {
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx-escuro-3);
    white-space: nowrap;
}
.secao--marinho .lista-fio span, .secao--grafite .lista-fio span, .convite .lista-fio span { color: var(--tx-claro-3); }

/* ------------------------------------------------------------------
   Formulário — fio embaixo, não caixa
   ------------------------------------------------------------------ */

.formulario { display: grid; gap: 1.7rem; }

.campo { display: block; }
.campo__rotulo {
    display: block; margin-bottom: .5rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-escuro-3);
}
.campo__rotulo .obrigatorio { color: var(--acento); }

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo select, .campo textarea {
    width: 100%; padding: .6rem 0;
    border: 0; border-bottom: 1px solid var(--linha-escura);
    border-radius: 0; background: transparent;
    font-family: var(--corpo); font-size: 1rem; color: var(--tx-escuro);
    transition: border-color var(--transicao);
}
.campo select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--tx-escuro-3) 50%),
                      linear-gradient(135deg, var(--tx-escuro-3) 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 1.5rem;
}
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.7; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-bottom-color: var(--acento); border-bottom-width: 2px;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
    outline: 1px solid var(--acento); outline-offset: 4px;
}

.campo--check { display: flex; align-items: flex-start; gap: .75rem; }
.campo--check input { margin-top: .3rem; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--marinho); }
.campo--check span { font-size: .9rem; color: var(--tx-escuro-2); }
.campo--check a { color: var(--acento); text-underline-offset: 3px; }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem; }

.aviso { padding: 1.1rem 1.3rem; border-left: 2px solid; margin-bottom: 1.5rem; font-size: .95rem; }
.aviso--ok   { background: rgba(36, 84, 137, .07); border-color: var(--acento); color: var(--tx-escuro); }
.aviso--erro { background: rgba(122, 59, 46, .06); border-color: #7A3B2E; color: #7A3B2E; }

/* Canais de contato */
.canais { list-style: none; display: grid; }
.canais li { border-bottom: 1px solid var(--linha-escura); }
.canais li:first-child { border-top: 1px solid var(--linha-escura); }
.canal {
    display: grid; gap: .2rem; padding-block: 1.2rem;
    text-decoration: none; color: inherit;
    transition: padding-left var(--transicao);
}
a.canal:hover { padding-left: .6rem; }
.canal__rotulo {
    font-family: var(--display); font-size: .64rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-escuro-3);
}
.canal__valor { font-size: 1rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Política da qualidade
   ------------------------------------------------------------------ */

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

.rodape { background: var(--marinho-esc); color: var(--tx-claro-2); }

.rodape__grade {
    display: grid; gap: 3rem;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.rodape__coluna--marca img { width: auto; height: 62px; margin-bottom: 1.4rem; }
.rodape__tagline { font-size: .9rem; max-width: 30ch; color: var(--tx-claro-3); }

.rodape__titulo {
    margin-bottom: 1.4rem; color: var(--tx-claro-3);
    font-family: var(--display); font-size: .64rem; font-weight: 400;
    letter-spacing: .24em; text-transform: uppercase;
}
.rodape__lista { list-style: none; display: grid; gap: .75rem; font-size: .9rem; }
.rodape__lista a {
    color: var(--tx-claro-2); text-decoration: none;
    display: inline-block; padding-block: .2rem;
    overflow-wrap: anywhere;
    transition: color var(--transicao);
}
.rodape__lista a:hover { color: var(--acento-inv); }

.rodape__redes { list-style: none; display: flex; gap: 1.4rem; margin-top: 1.6rem; }
.rodape__redes a {
    color: var(--tx-claro-3); display: grid; place-items: center;
    width: 26px; height: 26px;
    transition: color var(--transicao);
}
.rodape__redes a:hover { color: var(--acento-inv); }
.rodape__redes svg { width: 17px; height: 17px; }

.rodape__barra { border-top: 1px solid var(--linha-clara); }
.rodape__barra-interna {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1.5rem; flex-wrap: wrap; padding-block: 1.5rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .14em; color: var(--tx-claro-3);
}
.rodape__barra a {
    color: var(--tx-claro-3); text-decoration: none;
    display: inline-block; padding-block: .25rem;
    transition: color var(--transicao);
}
.rodape__barra a:hover { color: var(--acento-inv); }
.rodape__legal { margin: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.rodape__credito { margin: 0; }

/* WhatsApp — discreto, sem gritar mais que o conteúdo */
.zap {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
    width: 48px; height: 48px; display: grid; place-items: center;
    background: rgba(7, 21, 35, .9); color: var(--concreto);
    border: 1px solid var(--linha-clara);
    backdrop-filter: blur(6px);
    transition: background-color var(--transicao), color var(--transicao),
                border-color var(--transicao), bottom .28s ease;
}
.zap:hover { background: var(--concreto); color: var(--marinho); border-color: var(--concreto); }

/* Enquanto a faixa de cookies estiver na tela o botao sobe — a regra
   mora em `assets/css/medicao.css`. */
.zap svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------
   Entrada — quase imperceptível, e só no que importa
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    [data-revelar].vai-revelar { opacity: 0; transform: translateY(10px); }
    [data-revelar] { transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1); }
    [data-revelar].is-visivel { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------ */

@media (max-width: 1080px) {
    .rodape__grade { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 960px) {
    .cabecalho__interno { min-height: 68px; }
    .cabecalho__logo img { height: 42px; }
    .cabecalho__hamburguer { display: flex; position: relative; z-index: 115; }
    .cabecalho__contato { display: none; }

    .cabecalho__nav {
        position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
        background: var(--marinho-esc);
        padding: 6rem var(--goteira) 2rem;
        transform: translateX(100%);
        transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
        z-index: 110; overflow-y: auto; margin-left: 0;
        visibility: hidden;
        border-left: 1px solid var(--linha-clara);
    }
    .cabecalho__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .cabecalho__nav a {
        display: block; padding-block: 1.1rem;
        font-size: .95rem; letter-spacing: .06em; text-transform: none;
        font-weight: 400; color: var(--tx-claro);
        border-bottom: 1px solid var(--linha-clara);
    }
    .cabecalho__nav a.is-ativo::before { left: auto; right: 0; top: 50%; margin: 0; }

    .nav-toggle:checked ~ .cabecalho .cabecalho__nav { transform: none; visibility: visible; }
    .nav-toggle:checked ~ .nav-fundo {
        display: block; position: fixed; inset: 0; z-index: 105;
        background: rgba(7, 21, 35, .55);
    }
    .nav-toggle:checked ~ .cabecalho .cabecalho__hamburguer span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .cabecalho .cabecalho__hamburguer span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .cabecalho .cabecalho__hamburguer span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .linha-dupla { grid-template-columns: 1fr; }
    .rodape__grade { grid-template-columns: 1fr; gap: 2.25rem; }
    .rodape__barra-interna { justify-content: flex-start; }
    .hero__acoes { gap: 1.25rem; }
    .obra-item { --corte-x: 12px; --corte-y: 7px; }
    .zap { width: 44px; height: 44px; right: 1rem; bottom: 1rem; }
    .zap svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Respiro entre título e o parágrafo que o segue — vale em qualquer
   seção, em vez de margem inline repetida em cada view. */
.titulo-secao + .texto-apoio,
.titulo-secao + .entrada,
.capa-pagina h1 + p { margin-top: 1.15rem; }

/* ==================================================================
   Refinamento — os detalhes que separam "correto" de "acabado"
   ================================================================== */

/* Número é dado: alinha em coluna e não dança de largura. */
.indice__n, .etapa__n, .hero__contador,
.obra-item__meta, .card-post__data, .lista-fio span {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Espacejamento ótico: quanto maior o corpo, mais fechado o tracking.
   Um valor único para todos os tamanhos deixa o título grande frouxo
   e o pequeno apertado. */
.hero__titulo   { letter-spacing: -.042em; }
.titulo-secao   { letter-spacing: -.028em; }
.convite h2 { letter-spacing: -.028em; }
.etapa h3, .valor h3, .indice__nome { letter-spacing: -.014em; }

/* O hover do índice deixa de ser mancha de fundo e passa a ser um fio
   que corre sob a linha — o mesmo traço estrutural da marca, agora com
   função. Mancha de fundo é o hover de tabela de qualquer lugar. */
.indice__item { position: relative; background: none !important; }
.indice__item::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--acento);
    transform: scaleX(0); transform-origin: left;
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}
.secao--marinho .indice__item::after,
.secao--grafite .indice__item::after { background: var(--acento-inv); }
.indice__item:hover::after,
.indice__item:focus-visible::after { transform: scaleX(1); }
.indice__item:hover .indice__n { color: var(--acento); }
.secao--marinho .indice__item:hover .indice__n { color: var(--acento-inv); }

/* A foto de obra ganha um fio interno em vez de borda: o contorno fica
   por dentro do corte angular, sem brigar com ele. */
.obra-item::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(169, 192, 216, .22);
}

/* Separador entre os links legais: fio, não um ponto solto que o
   navegador espaçava de forma irregular. */
.rodape__legal { gap: 0; }
.rodape__legal a + a {
    margin-left: 1.4rem; padding-left: 1.4rem;
    border-left: 1px solid var(--linha-clara);
}

/* O botão do WhatsApp é fixo no canto inferior direito e cobria o controle
   de pausa da capa, que termina no mesmo lugar. O rodapé da capa recua o
   suficiente para os dois conviverem. */
.hero__rodape { padding-right: 4.5rem; }
@media (max-width: 640px) { .hero__rodape { padding-right: 3.75rem; } }

/* ==================================================================
   RECONSTRUÇÃO — 13/09/2026

   Os componentes que faltavam para devolver ao site o conteúdo que o
   WordPress tinha, sem devolver junto o layout de WordPress.

   Uma regra vale para todos eles: PAINEL FOTOGRÁFICO, NÃO CARTÃO.
   O site antigo apresentava serviços e interiores em caixas brancas
   com foto em cima — a forma mais previsível que existe. Aqui a foto
   ocupa o painel inteiro, o véu marinho garante o contraste e o texto
   assenta no rodapé. E os painéis têm tamanhos diferentes de
   propósito: seis retângulos iguais lado a lado não dizem nada.
   ================================================================== */

/* ------------------------------------------------------------------
   Painéis fotográficos — serviços e segmentos
   ------------------------------------------------------------------ */

.paineis { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); }

.painel {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; isolation: isolate;
    min-height: 17rem; padding: clamp(1.4rem, 2.4vw, 2rem);
    text-decoration: none; color: var(--tx-claro);
    background: var(--marinho-esc);
}
.painel img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.06);
    transition: transform 1100ms cubic-bezier(.22, .61, .36, 1), filter var(--transicao);
}
.painel::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(176deg, rgba(7, 21, 35, .04) 0%, rgba(7, 21, 35, .48) 50%, rgba(7, 21, 35, .90) 100%);
    transition: opacity var(--transicao);
}
.painel:hover img { transform: scale(1.04); filter: saturate(1.12); }

/* Sem foto, o painel não vira buraco: fica marinho com o grid técnico. */
.painel--sem-foto { background: var(--marinho); }

.painel__n {
    position: absolute; top: clamp(1.4rem, 2.4vw, 2rem); left: clamp(1.4rem, 2.4vw, 2rem);
    font-family: var(--display); font-size: .68rem; font-weight: 400;
    letter-spacing: .2em; color: var(--acento-inv);
    font-variant-numeric: tabular-nums;
}
.painel__nome {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -.018em;
    line-height: 1.18;
}
.painel__desc {
    margin-top: .6rem; max-width: 42ch;
    font-size: .92rem; line-height: 1.6; color: var(--tx-claro-2);
}
.painel__mais {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: 1.1rem;
    font-family: var(--display); font-size: .66rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase; color: var(--acento-inv);
}
.painel__mais svg { width: 14px; height: 14px; transition: transform var(--transicao); }
.painel:hover .painel__mais svg { transform: translateX(5px); }

/* O fio champagne corre na base no hover — mesma gramática do índice. */
.painel::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--acento-inv);
    transform: scaleX(0); transform-origin: left;
    transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
}
.painel:hover::after, .painel:focus-visible::after { transform: scaleX(1); }

/*
 * O ritmo. Dois painéis altos, três médios e uma faixa larga: a leitura
 * desacelera e acelera em vez de bater o mesmo compasso seis vezes.
 */
@media (min-width: 860px) {
    .paineis { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .paineis > * { min-width: 0; }
    .paineis > *:nth-child(6n+1) { grid-column: span 7; min-height: clamp(21rem, 30vw, 27rem); }
    .paineis > *:nth-child(6n+2) { grid-column: span 5; min-height: clamp(21rem, 30vw, 27rem); }
    .paineis > *:nth-child(6n+3),
    .paineis > *:nth-child(6n+4),
    .paineis > *:nth-child(6n+5) { grid-column: span 4; min-height: clamp(16rem, 22vw, 20rem); }
    .paineis > *:nth-child(6n)   { grid-column: span 12; min-height: clamp(13rem, 18vw, 16rem); }

    /* Na faixa larga o texto não precisa da coluna inteira. */
    .paineis > *:nth-child(6n) .painel__desc { max-width: 60ch; }
}

/*
 * Segmentos: seis blocos, três linhas de dois.
 *
 * A primeira versão era 6+6 / 4+4+4 / 4 — e o sexto item ficava
 * sozinho numa linha inteira, com dois terços de vazio ao lado. Item
 * órfão no fim de uma grade é o defeito que mais denuncia layout
 * automático. A contagem tem de fechar.
 */
@media (min-width: 860px) {
    .paineis--segmentos > *:nth-child(6n+1) { grid-column: span 7; min-height: clamp(19rem, 25vw, 23rem); }
    .paineis--segmentos > *:nth-child(6n+2) { grid-column: span 5; min-height: clamp(19rem, 25vw, 23rem); }
    .paineis--segmentos > *:nth-child(6n+3) { grid-column: span 5; min-height: clamp(17rem, 22vw, 20rem); }
    .paineis--segmentos > *:nth-child(6n+4) { grid-column: span 7; min-height: clamp(17rem, 22vw, 20rem); }
    .paineis--segmentos > *:nth-child(6n+5),
    .paineis--segmentos > *:nth-child(6n)   { grid-column: span 6; min-height: clamp(17rem, 22vw, 20rem); }
}

.painel__lista { list-style: none; display: grid; gap: .35rem; margin-top: .9rem; }
.painel__lista li {
    font-size: .84rem; color: var(--tx-claro-2);
    padding-left: 1rem; position: relative;
}
.painel__lista li::before {
    content: ""; position: absolute; left: 0; top: .68em;
    width: 5px; height: 1px; background: var(--acento-inv);
}

/* ------------------------------------------------------------------
   Interiores Camax — o mosaico

   Recuperado do site antigo: dois blocos de texto marinho intercalados
   com quatro fotos, dois deles com título por cima. A ordem e os textos
   são os de lá; o que mudou é que os seis quadros deixaram de ter o
   mesmo tamanho.
   ------------------------------------------------------------------ */

.mosaico { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); }
.mosaico > * { min-width: 0; }

@media (min-width: 900px) {
    .mosaico {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: clamp(17rem, 24vw, 22rem);
    }
    .mosaico__texto--abre { grid-column: span 5; }
    .mosaico__foto--1     { grid-column: span 3; }
    .mosaico__foto--2     { grid-column: span 4; }
    .mosaico__foto--3     { grid-column: span 4; }
    .mosaico__texto--fecha{ grid-column: span 5; }
    .mosaico__foto--4     { grid-column: span 3; }
}

.mosaico__texto {
    background:
        radial-gradient(130% 100% at 0% 0%, var(--marinho-claro) 0%, transparent 68%),
        var(--marinho);
    color: var(--tx-claro);
    padding: clamp(1.75rem, 3vw, 2.75rem);
    display: flex; flex-direction: column; justify-content: center;
}
.mosaico__texto h2, .mosaico__texto h3 {
    font-size: clamp(1.45rem, 2.6vw, 2.05rem); letter-spacing: -.03em;
    max-width: 14ch;
}
.mosaico__texto p {
    margin: 1.1rem 0 0; max-width: 34ch;
    font-size: .95rem; line-height: 1.62; color: var(--tx-claro-2);
}
.mosaico__texto .traco { margin-bottom: 1.4rem; }

.mosaico__foto {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--marinho-esc);
    display: flex; align-items: flex-end;
    padding: clamp(1.4rem, 2.4vw, 2rem);
}
.mosaico__foto img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.06);
    transition: transform 1200ms cubic-bezier(.22, .61, .36, 1);
}
.mosaico__foto:hover img { transform: scale(1.035); }
.mosaico__foto--legenda::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(178deg, rgba(7, 21, 35, .10), rgba(7, 21, 35, .82));
}
.mosaico__legenda {
    font-family: var(--display); font-weight: 500; color: var(--tx-claro);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -.022em;
    line-height: 1.14; max-width: 12ch;
}

@media (max-width: 899px) {
    .mosaico__foto { aspect-ratio: 4 / 3; }
    .mosaico__texto { padding-block: clamp(2rem, 7vw, 3rem); }
}

/* ------------------------------------------------------------------
   Depoimentos — carrossel

   A versão anterior era um empilhado de citações em texto puro. Isto
   aqui continua sendo citação (o manual não quer cartão), mas ganha
   retrato, contador e navegação: o leitor entende que há mais gente
   falando, e escolhe se quer ouvir.

   Refeito em 17/09/2026, depois de um "palco" de uma citação só que o
   dono achou pior. A estrutura é a de sempre; o que mudou é acabamento:

   - o cartão que não cabe ESMAECE na borda, em vez de ser cortado seco
     pela margem do container — o corte seco lia como erro, o esmaecido
     diz "tem mais para o lado";
   - a citação cresceu e as aspas viraram peça de desenho, grandes e
     atrás do texto, e não um caractere solto em cima dele;
   - o fio azul do topo se desenha no cartão sob o cursor;
   - uma barra de progresso junto do contador mostra quanto falta.
   ------------------------------------------------------------------ */

.depos { position: relative; }

.depos__trilho {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: min(86%, 34rem);
    gap: clamp(1rem, 2.2vw, 1.75rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Respiro para o cartão subir no hover sem ser cortado pelo trilho. */
    padding: .5rem 0 .75rem;
    /* A barra some, mas a rolagem por toque continua funcionando. */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 7rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 7rem), transparent 100%);
    transition: -webkit-mask-image var(--transicao), mask-image var(--transicao);
}
.depos__trilho::-webkit-scrollbar { display: none; }
/* O esmaecido acompanha a rolagem: à esquerda só depois de rolar, à
   direita só enquanto houver mais. Parado no fim, sem ele o último
   cartão ficaria apagado para sempre. */
.depos.rolou .depos__trilho {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
}
.depos.no-fim .depos__trilho {
    -webkit-mask-image: none; mask-image: none;
}
.depos.rolou.no-fim .depos__trilho {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7rem);
            mask-image: linear-gradient(90deg, transparent 0, #000 7rem);
}

@media (min-width: 1080px) { .depos__trilho { grid-auto-columns: min(40%, 27rem); } }

.depo {
    position: relative; isolation: isolate; overflow: hidden;
    scroll-snap-align: start;
    margin: 0; padding: clamp(1.75rem, 3vw, 2.4rem);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(74, 140, 240, .09) 0%, transparent 60%),
        rgba(230, 228, 223, .045);
    border: 1px solid rgba(201, 214, 228, .12);
    display: flex; flex-direction: column;
    transition: transform var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
/* O fio do topo: um terço em repouso, inteiro sob o cursor. */
.depo::after {
    content: ""; position: absolute; top: 0; left: 0; z-index: 1;
    width: 3rem; height: 2px; background: var(--azul-luz);
    transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.depo:hover { transform: translateY(-4px); border-color: rgba(143, 184, 224, .32); }
.depo:hover::after { width: 100%; }

/* As aspas são de Cormorant, o mesmo tipo da citação — não é um ícone
   genérico colado em cima. Em champagne, é um dos usos contados da
   assinatura ("as aspas da citação"). Ficam NO FLUXO, acima do texto:
   atrás dele, grandes, elas cobriam a primeira linha da citação. A
   caixa tem altura fixa e o glifo, maior que ela, sobra para cima — é o
   que as deixa grandes sem empurrar o texto para baixo. */
.depo::before {
    content: "\201C"; display: block;
    height: 2.1rem; margin-top: -.35rem;
    font-family: var(--serif); font-size: 5.25rem; line-height: 1;
    color: var(--champagne); opacity: .85;
    pointer-events: none;
}

.depo blockquote {
    margin: 1rem 0 0; flex: 1;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    line-height: 1.42; color: var(--tx-claro);
    text-wrap: pretty;
}

.depo__assina {
    display: flex; align-items: center; gap: .95rem;
    margin-top: 2rem; padding-top: 1.35rem;
    border-top: 1px solid var(--linha-clara);
}
.depo__foto {
    width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px var(--grafite), 0 0 0 3px rgba(143, 184, 224, .45);
}
/* Sem foto cadastrada, as iniciais — nunca um círculo vazio. */
.depo__inicial {
    display: grid; place-items: center;
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
    border: 1px solid rgba(143, 184, 224, .45);
    font-family: var(--display); font-size: .75rem; font-weight: 500;
    letter-spacing: .06em; color: var(--acento-inv);
}
.depo__nome {
    display: block;
    font-family: var(--display); font-size: .92rem; font-weight: 500;
    color: var(--tx-claro); letter-spacing: -.012em;
}
.depo__cidade {
    display: block; margin-top: .2rem;
    font-family: var(--display); font-size: .62rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-claro-3);
}

.depos__controles {
    display: flex; align-items: center; gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.depos__contador {
    font-family: var(--display); font-size: .68rem; letter-spacing: .2em;
    color: var(--tx-claro-3); font-variant-numeric: tabular-nums;
}
/* A barra de progresso: trilho de 1px e o trecho já rolado, que cresce. */
.depos__barra {
    position: relative; flex: 1; height: 1px;
    margin-right: .5rem;
    background: var(--linha-clara);
}
.depos__barra i {
    position: absolute; left: 0; top: -1px; height: 3px;
    width: var(--depos-feito, 0%); min-width: 2.5rem;
    background: var(--azul-luz);
    transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.depos__seta {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: transparent; cursor: pointer; color: var(--tx-claro-2);
    border: 1px solid var(--linha-clara);
    transition: color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
.depos__seta:hover:not(:disabled) { color: var(--marinho); background: var(--concreto); border-color: var(--concreto); }
.depos__seta:disabled { opacity: .3; cursor: default; }
.depos__seta svg { width: 16px; height: 16px; }

/* Sem JavaScript, as setas e a barra não fazem nada: escondê-las é mais
   honesto do que oferecer um botão morto. O trilho continua rolando por
   toque. */
.sem-js .depos__seta, .sem-js .depos__barra { display: none; }

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

/* A mesma peça sobre fundo claro. */
.secao--claro .depo, .secao--concreto .depo {
    background: rgba(31, 41, 51, .03); border-color: var(--linha-escura);
}
.secao--claro .depo::after, .secao--concreto .depo::after { background: var(--acento); }
.secao--claro .depo::before, .secao--concreto .depo::before { color: var(--acento); opacity: .55; }
.secao--claro .depo:hover, .secao--concreto .depo:hover { border-color: rgba(36, 84, 137, .35); }
.secao--claro .depo blockquote, .secao--concreto .depo blockquote { color: var(--tx-escuro); }
.secao--claro .depo__assina, .secao--concreto .depo__assina { border-top-color: var(--linha-escura); }
.secao--claro .depo__foto, .secao--concreto .depo__foto { box-shadow: 0 0 0 2px var(--offwhite), 0 0 0 3px rgba(36, 84, 137, .4); }
.secao--claro .depo__inicial, .secao--concreto .depo__inicial { border-color: rgba(36, 84, 137, .4); color: var(--acento); }
.secao--claro .depo__nome, .secao--concreto .depo__nome { color: var(--tx-escuro); }
.secao--claro .depo__cidade, .secao--concreto .depo__cidade { color: var(--tx-escuro-3); }
.secao--claro .depos__contador, .secao--concreto .depos__contador { color: var(--tx-escuro-3); }
.secao--claro .depos__barra, .secao--concreto .depos__barra { background: var(--linha-escura); }
.secao--claro .depos__barra i, .secao--concreto .depos__barra i { background: var(--acento); }
.secao--claro .depos__seta, .secao--concreto .depos__seta { color: var(--tx-escuro-2); border-color: var(--linha-escura); }

/* ------------------------------------------------------------------
   Método na vertical — quando a sequência anda ao lado de uma foto

   As quatro colunas continuam existindo (páginas internas). Na home o
   método passou a correr na vertical, ao lado da foto do canteiro: a
   seção deixou de ser uma faixa avulsa e virou uma composição.
   ------------------------------------------------------------------ */

.metodo--vertical { grid-template-columns: 1fr !important; }
.metodo--vertical .etapa {
    display: grid; gap: .2rem 1.75rem;
    grid-template-columns: 3rem minmax(0, 1fr);
    padding: 1.5rem 0;
}
.metodo--vertical .etapa__n { margin: 0; padding-top: .3rem; }
.metodo--vertical .etapa h3 { grid-column: 2; }
.metodo--vertical .etapa p  { grid-column: 2; }
@media (min-width: 900px) {
    .metodo--vertical .etapa { padding-right: 0; }
    .metodo--vertical .etapa + .etapa::before { content: none; }
}
.metodo--vertical .etapa:last-child { border-bottom: 1px solid var(--linha-clara); }
.secao--claro .metodo--vertical .etapa:last-child,
.secao--concreto .metodo--vertical .etapa:last-child { border-bottom-color: var(--linha-escura); }

/* A foto que acompanha o método: alta, cortada no ângulo da marca. */
.metodo__foto {
    position: relative; overflow: hidden;
    height: 100%; min-height: 20rem;
    background: var(--marinho-esc);
}
.metodo__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06); }
.metodo__foto figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 2.5rem 1.4rem 1.2rem;
    background: linear-gradient(180deg, transparent, rgba(7, 21, 35, .9));
    font-family: var(--display); font-size: .64rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-claro-3);
}

/* ------------------------------------------------------------------
   Equipe
   ------------------------------------------------------------------ */

/* A foto do time inteiro, em faixa. Não é capa de página nem cartão:
   é o retrato do grupo, que era o que abria Quem Somos no site antigo. */
.time {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(22rem, 46vw, 34rem);
    display: flex; align-items: flex-end;
    background: var(--marinho-esc); color: var(--tx-claro);
}
.time img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
}
.time::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    /*
     * O véu desta foto tem de resolver duas coisas ao mesmo tempo: os
     * ROSTOS precisam aparecer (é a única foto do acervo em que a
     * empresa é gente) e o TÍTULO precisa assentar. Por isso ele é
     * quase nulo até 45% — a altura das cabeças — e só então fecha.
     */
    background:
        linear-gradient(180deg, rgba(7, 21, 35, .55) 0%, rgba(7, 21, 35, 0) 24%),
        linear-gradient(180deg, rgba(7, 21, 35, 0) 44%, rgba(7, 21, 35, .58) 66%, rgba(7, 21, 35, .95) 100%);
}
.time__legenda {
    padding-block: clamp(2rem, 4vw, 3rem);
    font-family: var(--display); font-size: .68rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tx-claro-2);
}

.socios { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .socios { grid-template-columns: 1fr 1fr; } }

.socio { display: grid; gap: 1.5rem; align-content: start; }
.socio__foto {
    position: relative; overflow: hidden;
    background: var(--concreto);
}
.socio__foto img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
    transition: transform 1000ms cubic-bezier(.22, .61, .36, 1);
}
.socio:hover .socio__foto img { transform: scale(1.02); }

.socio__nome { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.022em; }
.socio__cargo {
    display: block; margin-top: .55rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase; color: var(--acento);
}
.secao--marinho .socio__cargo, .secao--grafite .socio__cargo { color: var(--acento-inv); }
.socio__texto { margin-top: 1rem; font-size: .94rem; color: var(--tx-escuro-2); max-width: 40ch; }
.secao--marinho .socio__texto, .secao--grafite .socio__texto { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Princípios — missão, visão, objetivo, valores

   Fio à esquerda em vez de caixa: são quatro declarações, não quatro
   produtos. O fio é o traço estrutural da marca em posição de serviço.
   ------------------------------------------------------------------ */

.principios { display: grid; gap: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
@media (min-width: 800px) { .principios { grid-template-columns: 1fr 1fr; } }

.principio { padding-left: clamp(1.25rem, 2.5vw, 2rem); border-left: 1px solid var(--linha-escura); }
.secao--marinho .principio, .secao--grafite .principio { border-left-color: var(--linha-clara); }
.principio h3 {
    font-family: var(--display); font-size: .68rem; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase; color: var(--acento);
    margin-bottom: .9rem;
}
.secao--marinho .principio h3, .secao--grafite .principio h3 { color: var(--acento-inv); }
.principio p {
    margin: 0; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6;
    color: var(--tx-escuro); max-width: 40ch;
}
.secao--marinho .principio p, .secao--grafite .principio p { color: var(--tx-claro); }

/* ------------------------------------------------------------------
   Política da qualidade — numerada, porque são compromissos contados

   Antes era faixa repetida acima do rodapé em toda página, o que a
   fazia parecer aviso de cookie. Agora mora em Quem Somos, junto da
   certificação, com link fixo no rodapé.
   ------------------------------------------------------------------ */

.compromissos { list-style: none; counter-reset: compromisso; display: grid; }
.compromissos li {
    counter-increment: compromisso;
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--linha-escura);
    font-size: 1rem; line-height: 1.55;
}
.compromissos li:first-child { border-top: 1px solid var(--linha-escura); }
.compromissos li::before {
    content: counter(compromisso, decimal-leading-zero);
    font-family: var(--display); font-size: .68rem; font-weight: 400;
    letter-spacing: .16em; color: var(--acento);
    font-variant-numeric: tabular-nums; padding-top: .32em;
}
.secao--marinho .compromissos li, .secao--grafite .compromissos li { border-color: var(--linha-clara); }
.secao--marinho .compromissos li::before, .secao--grafite .compromissos li::before { color: var(--acento-inv); }

/* A certificação é credencial, não medalhão: logo pequena, legenda que
   diz o que ela é. Foi assim que o selo 3D foi aposentado. */
.credencial {
    display: flex; align-items: center; gap: 1.25rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding-top: 1.5rem; border-top: 1px solid var(--linha-escura);
}
.credencial img { height: 52px; width: auto; opacity: .9; }
.credencial p {
    margin: 0; font-size: .82rem; line-height: 1.5; color: var(--tx-escuro-2); max-width: 34ch;
}

/* ------------------------------------------------------------------
   Dados em linha — garantias, área de atuação, tempo de casa

   Substitui o painel de números do site antigo ("226+ clientes"). Aqui
   só entra dado verificável, e o número não é o herói da composição.
   ------------------------------------------------------------------ */

.dados { display: grid; gap: 0; }
@media (min-width: 640px) { .dados { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }

.dados > div {
    padding: 1.4rem 1.5rem 1.4rem 0;
    border-top: 1px solid var(--linha-escura);
}
.secao--marinho .dados > div, .secao--grafite .dados > div { border-top-color: var(--linha-clara); }

.dados dt {
    font-family: var(--display); font-size: .62rem; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase; color: var(--tx-escuro-3);
}
.secao--marinho .dados dt, .secao--grafite .dados dt { color: var(--tx-claro-3); }
.dados dd {
    margin: .6rem 0 0;
    font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500;
    letter-spacing: -.022em; font-variant-numeric: tabular-nums;
}
.dados dd small {
    display: block; margin-top: .45rem;
    font-family: var(--corpo); font-size: .82rem; font-weight: 400;
    letter-spacing: 0; line-height: 1.5; color: var(--tx-escuro-2);
}
.secao--marinho .dados dd small, .secao--grafite .dados dd small { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Convite final — o lugar do próximo passo

   Substituiu o `.fecho`, que era a frase da marca sozinha no fim da
   página. Aqui a mesma área tem função: diz o que fazer, com o que
   escrever e para onde vai.
   ------------------------------------------------------------------ */

.convite {
    background:
        radial-gradient(110% 90% at 85% 0%, var(--marinho-claro) 0%, transparent 60%),
        var(--marinho);
    color: var(--tx-claro);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}
.convite h2 { font-size: clamp(1.7rem, 3.6vw, 2.55rem); letter-spacing: -.028em; max-width: 18ch; }
.convite .entrada { margin-top: 1.35rem; }
.convite .btn { margin-top: 2.25rem; }

.convite__contato { list-style: none; display: grid; }
.convite__contato li { border-bottom: 1px solid var(--linha-clara); }
.convite__contato li:first-child { border-top: 1px solid var(--linha-clara); }

/* ------------------------------------------------------------------
   Separador de conteúdo — a ponte entre blog e obras

   Uma linha, não uma seção. Existe porque o visitante precisa saber
   que artigo e portfólio são coisas diferentes e moram em endereços
   diferentes — e não porque a página precisava de mais um bloco.
   ------------------------------------------------------------------ */

.ponte {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem 2rem; flex-wrap: wrap;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.5rem; border-top: 1px solid var(--linha-escura);
}
.ponte p { margin: 0; color: var(--tx-escuro-2); font-size: .95rem; max-width: 52ch; }
.secao--marinho .ponte, .secao--grafite .ponte { border-top-color: var(--linha-clara); }
.secao--marinho .ponte p, .secao--grafite .ponte p { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Ficha técnica de obra — a tabela do projeto
   ------------------------------------------------------------------ */

.ficha { display: grid; gap: 0; margin: 0; }
@media (min-width: 640px) { .ficha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } }
.ficha > div { padding: 1.2rem 1.5rem 1.2rem 0; border-top: 1px solid var(--linha-escura); }
.ficha dt {
    font-family: var(--display); font-size: .62rem; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase; color: var(--tx-escuro-3);
}
.ficha dd { margin: .5rem 0 0; font-family: var(--display); font-size: 1rem; font-weight: 500; }

/* ------------------------------------------------------------------
   Ajustes de composição
   ------------------------------------------------------------------ */

/* Seção que encosta na anterior sem espaço morto entre as duas. */
.secao--cola-acima { padding-top: 0; }

/* A malha com foto grande de um lado: a coluna do texto não vai até a
   borda da foto. */
.col-foto-d { grid-column: 1 / span 12; }
.col-foto-e { grid-column: 1 / span 12; }
@media (min-width: 900px) {
    .col-foto-d { grid-column: 7 / span 6; }
    .col-foto-e { grid-column: 1 / span 6; }
}

/* Cabeçalho de seção em duas colunas — usado onde há título de um lado
   e texto de apoio do outro. Existe para tirar `style=""` das views. */
.abertura { display: grid; gap: 1.25rem 2rem; align-items: end; }
@media (min-width: 900px) {
    .abertura { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
.abertura + * { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.abertura .rotulo + .titulo-secao { margin-top: 1.3rem; }


/* ------------------------------------------------------------------
   Complementos da reconstrução
   ------------------------------------------------------------------ */

/* Três painéis lado a lado — "outras frentes", no fim da página de um
   serviço. Mesmo tamanho aqui é proposital: são pares, não hierarquia. */
@media (min-width: 760px) {
    .paineis--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .paineis--tres > * { grid-column: auto !important; min-height: clamp(13rem, 18vw, 16rem) !important; }
}

/* Filtros do blog e paginação — fio embaixo, não pílula. */
.filtros, .paginas {
    display: flex; flex-wrap: wrap; gap: .35rem 2rem;
    padding-bottom: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--linha-escura);
    font-family: var(--display); font-size: .72rem; font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase;
}
.filtros a, .paginas a, .paginas span {
    text-decoration: none; color: var(--tx-escuro-3);
    padding-block: .4rem; border-bottom: 1px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.filtros a:hover, .paginas a:hover { color: var(--tx-escuro); }
.filtros a.is-ativo, .paginas .is-ativo {
    color: var(--tx-escuro); border-bottom-color: var(--acento);
}

.paginas {
    justify-content: center; gap: .35rem 1.5rem;
    border-bottom: 0; border-top: 1px solid var(--linha-escura);
    margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 1.5rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* A certificação no rodapé: pequena, sobre fundo claro para o logotipo
   colorido não flutuar no marinho. */
.rodape__certificacao {
    display: inline-block; margin-top: 1.75rem;
    background: var(--offwhite); padding: .5rem .7rem;
    transition: opacity var(--transicao);
}
.rodape__certificacao img { height: 34px; width: auto; }
.rodape__certificacao:hover { opacity: .8; }

/* Compromissos: o texto fica na coluna 2, ao lado do número. */
.compromissos li span { display: block; }

/* A ficha em coluna única (página de obra) não precisa do fio de topo
   no primeiro item colado ao rótulo. */
.ficha > div:first-child { border-top-color: var(--linha-escura); }

/* O `.dados` dentro de seção escura precisa do fio claro também no
   primeiro item — ele é o único com borda visível na primeira linha. */
.secao--grafite .dados dd, .secao--marinho .dados dd { color: var(--tx-claro); }

/* Capa de página: a foto entra por <img> em todas as views agora, mas o
   `background-image` continua funcionando onde alguém use. */
.capa-pagina__foto img { width: 100%; height: 100%; object-fit: cover; }

/* A malha de uma página interna não deve encostar título em foto. */
@media (max-width: 899px) {
    .abertura { align-items: start; }
}

/* ------------------------------------------------------------------
   Correções da revisão visual — 13/09/2026
   ------------------------------------------------------------------ */

/*
 * O bloco marinho do mosaico é uma ILHA ESCURA dentro de uma seção
 * clara. Os seletores de fundo escuro do site olham para `.secao--*`,
 * então nada ali sabia que estava sobre marinho: o link "Acabamentos"
 * saía em champagne escuro (invisível) e o traço, idem.
 */
.mosaico__texto .traco { background: var(--champagne); }
.mosaico__texto .link-seta {
    color: var(--tx-claro); border-bottom-color: var(--linha-clara);
}
.mosaico__texto .link-seta:hover {
    color: var(--acento-inv); border-bottom-color: var(--acento-inv);
}
.mosaico__texto :where(a, button):focus-visible { outline-color: var(--acento-inv); }

/* A legenda sobre a foto clara de interior perdia contraste: o véu
   precisa ser mais fundo aqui do que sobre foto de canteiro. */
.mosaico__foto--legenda::before {
    background: linear-gradient(178deg, rgba(7, 21, 35, .02) 0%, rgba(7, 21, 35, .42) 52%, rgba(7, 21, 35, .90) 100%);
}

/* A marca d'água ficava legível demais no vão abaixo da lista e lia-se
   como erro. Continua sendo o recurso da marca — só que no volume de
   marca d'água, que é quase nenhum. */
.dagua { color: rgba(169, 192, 216, .028); bottom: -8%; }

/* O painel menor tem menos altura para o gradiente trabalhar, e a
   descrição encostava na parte clara da foto. */
@media (min-width: 860px) {
    .paineis > *:nth-child(6n+3)::before,
    .paineis > *:nth-child(6n+4)::before,
    .paineis > *:nth-child(6n+5)::before {
        background: linear-gradient(176deg, rgba(7, 21, 35, .08) 0%, rgba(7, 21, 35, .58) 44%, rgba(7, 21, 35, .93) 100%);
    }
}

/* ------------------------------------------------------------------
   Ajustes de escala — 13/09/2026
   ------------------------------------------------------------------ */

/* Dois retratos ocupando 600px de largura cada viravam banner de
   fotógrafo. A escala certa para "a sociedade" é a de um retrato
   editorial: o nome ao pé, a foto sem gritar. */
.socio__foto { max-width: 370px; }
.socio__foto img { object-position: center 16%; }

/* A credencial precisa ser lida como logotipo, não como carimbo. */
.credencial img { height: 62px; }

/* A capa de Quem Somos agora É a foto da equipe: ela carrega o título,
   então precisa de altura de capa e não de faixa. */
.time { min-height: min(80svh, 760px); }
.time .container { padding-block: clamp(8rem, 15vw, 11rem) clamp(2.5rem, 5vw, 4rem); }
.time h1 {
    font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.035em; max-width: 17ch;
}
.time__texto {
    margin-top: 1.3rem; max-width: 46ch; color: var(--tx-claro-2);
}
.time__legenda {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 1.2rem; border-top: 1px solid var(--linha-clara);
}

/* ------------------------------------------------------------------
   Alvo de toque — 44px onde o dedo encosta

   O teste por CDP a 360 e 390px apontou nove links com menos de 32px de
   altura: trilha, rodapé, redes sociais e o contato do topo. Em todos, o
   TEXTO continua do mesmo tamanho — o que cresce é a área clicável, por
   dentro. Aumentar a fonte para resolver alvo de toque estraga a
   hierarquia; aumentar o padding não estraga nada.
   ------------------------------------------------------------------ */

.trilha a          { padding-block: .6rem; margin-block: -.6rem; }
.rodape__lista a   { padding-block: .5rem; }
/* O botao de cookies e irmao dos links da barra, mas e <button>: a
   regra acima so pega <a>, e ele ficava com 18px de altura. Mesmo
   padding, mesmo resultado — aumentar a fonte estragaria a linha. */
.rodape__barra a,
.rodape__consent   { padding-block: .55rem; }
.cabecalho__contato{ padding-block: .75rem; }

/* O ícone continua com 17px; o que vai a 44 é o quadrado em volta. As
   margens negativas devolvem o espaçamento visual entre eles. */
.rodape__redes     { gap: .5rem; margin-left: -10px; }
.rodape__redes a   { width: 44px; height: 44px; }

/* A caixa de seleção do formulário: 18px reprova em WCAG 2.5.8 (mínimo
   24). O rótulo inteiro já é clicável, mas o quadrado também precisa ser
   acertável sem mira. */
.campo--check input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: .15rem; }

/* Telefone e e-mail dentro de uma lista com fio: a linha é alta, mas o
   link em si media 27px. O padding entra por dentro e a margem negativa
   devolve a altura da linha — o fio não se mexe. */
.lista-fio li > a, .lista-fio a[href] { display: inline-block; padding-block: .45rem; margin-block: -.45rem; }

/* O link do índice e do painel são blocos grandes: nada a fazer ali. */

/* ------------------------------------------------------------------
   Véu das capas no celular

   O scrim das capas é DIAGONAL: escurece a esquerda, onde o texto
   assenta, e deixa a direita da foto viva. Isso funciona em tela larga.
   Numa tela de 390px o mesmo gradiente tem 38% de 390 = 148px de parte
   escura — e o subtítulo cai inteiro sobre a parte clara da foto.

   Abaixo de 900px o véu vira VERTICAL: escuro embaixo, onde o texto
   está, claro em cima, onde a foto tem de aparecer. É a mesma decisão de
   composição, resolvida no eixo que existe nessa largura.
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .hero::before {
        background:
            linear-gradient(180deg, rgba(7, 21, 35, .70) 0%, rgba(7, 21, 35, .20) 18%),
            linear-gradient(0deg, rgba(7, 21, 35, .94) 0%, rgba(7, 21, 35, .86) 42%, rgba(7, 21, 35, .30) 78%);
    }

    .capa-pagina::before {
        background:
            linear-gradient(180deg, rgba(7, 21, 35, .72) 0%, rgba(7, 21, 35, .28) 22%),
            linear-gradient(0deg, rgba(7, 21, 35, .94) 0%, rgba(7, 21, 35, .78) 50%, rgba(7, 21, 35, .34) 86%);
    }

    /* A foto da equipe é a exceção: os rostos ficam no meio e continuam
       tendo de aparecer. O véu fecha só no terço de baixo. */
    .time::before {
        background:
            linear-gradient(180deg, rgba(7, 21, 35, .62) 0%, rgba(7, 21, 35, .10) 22%),
            linear-gradient(0deg, rgba(7, 21, 35, .96) 0%, rgba(7, 21, 35, .82) 30%, rgba(7, 21, 35, 0) 62%);
    }
    .time img { object-position: center 26%; }
}

/* O painel de segmento carrega título, resumo E quatro itens — bloco de
   texto alto. O véu do painel de serviço, calibrado para duas linhas,
   deixava o título cair na parte clara da foto. Aqui ele fecha mais
   cedo, e o que sobra de foto viva é o terço de cima. */
.paineis--segmentos .painel::before {
    background: linear-gradient(176deg, rgba(7, 21, 35, .22) 0%, rgba(7, 21, 35, .74) 32%, rgba(7, 21, 35, .95) 100%);
}

/* ==================================================================
   O método na home — a tese e a prova numa seção só

   Abertura centralizada, régua centralizada, painel compacto. Antes eram
   duas seções ("A empresa" + método) somando 2.300px num monitor de 915;
   ver o comentário em `pages/home.php`.
   ================================================================== */

.metodo-home { padding-block: clamp(4.5rem, 8vw, 6.75rem); }

.metodo-home__abertura {
    position: relative; z-index: 1;
    display: grid; justify-items: center; gap: 1.15rem;
    max-width: 54rem; margin-inline: auto;
    text-align: center;
}
.metodo-home__titulo {
    font-size: clamp(2.2rem, 4.8vw, 3.9rem);
    font-weight: 600; letter-spacing: -.042em; line-height: 1.02;
    text-wrap: balance;
}
.metodo-home__abertura .frase { max-width: none; }
.metodo-home__abertura .texto-apoio { max-width: 60ch; margin-top: .15rem; }

/* ==================================================================
   A jornada do método — adaptada da Sollievo

   A régua de passos em cima, um painel por vez embaixo. O painel divide
   a etapa em três partes — o que ela é, o que é da Camax e o que é do
   cliente — LADO A LADO no monitor.

   Sem JavaScript os quatro painéis aparecem empilhados, cada um com o
   seu próprio endereço (`#jornada-1`…). A régua vira índice âncora. O
   conteúdo nunca depende do script.
   ================================================================== */

.jornada {
    position: relative; z-index: 1;
    max-width: 72rem; margin: clamp(2.75rem, 5vw, 3.75rem) auto 0;
}

/* ------------------------------------------------------------------
   A régua — um STEPPER, não uma legenda

   A primeira versão eram quatro títulos com um fio por cima. Ninguém
   descobria que dava para clicar: parecia legenda de seção. O conserto
   não é escrever "clique em cada etapa" — é usar a FORMA que todo mundo
   já reconhece: bolinhas numeradas ligadas por uma linha, a ativa cheia.

   A linha é UMA peça (`.jornada__trilha`), do centro da primeira bolha
   ao da última, e o trecho percorrido se pinta de azul conforme
   `--jornada-feito` (0 a 1, posto pelo script). Linha que avança é o
   que faz a régua ler como caminho, e não como quatro botões soltos.
   ------------------------------------------------------------------ */

.jornada__regua {
    --bolha: 3.5rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--jornada-n, 4), minmax(0, 1fr));
}

.jornada__trilha {
    position: absolute;
    top: calc(var(--bolha) / 2 - 1px); height: 2px;
    left: calc(100% / (2 * var(--jornada-n, 4)));
    right: calc(100% / (2 * var(--jornada-n, 4)));
    background: var(--linha-clara);
}
.jornada__trilha::after {
    content: ""; position: absolute; inset: 0 auto 0 0;
    width: calc(var(--jornada-feito, 0) * 100%);
    background: linear-gradient(90deg, var(--azul-acao), var(--azul-luz));
    transition: width .55s cubic-bezier(.22, .61, .36, 1);
}

.jornada__passo {
    position: relative; z-index: 1;
    display: grid; justify-items: center; align-content: start; gap: .95rem;
    padding: 0 .75rem;
    text-align: center; text-decoration: none; color: inherit; cursor: pointer;
}

/* A bolha. Contorno quando falta percorrer, cheia quando é a atual. O
   fundo é o marinho da seção: é ele que "corta" a trilha atrás dela. */
.jornada__bolha {
    display: grid; place-items: center;
    width: var(--bolha); height: var(--bolha);
    border: 1px solid var(--linha-clara); border-radius: 50%;
    background: var(--marinho);
    font-family: var(--display); font-size: .82rem; font-weight: 500;
    letter-spacing: .04em; color: var(--tx-claro-2);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transicao), color var(--transicao),
                border-color var(--transicao), box-shadow var(--transicao),
                transform var(--transicao);
}
.jornada__passo:hover .jornada__bolha {
    border-color: var(--azul-luz); color: var(--azul-luz);
}
/* A atual ganha dois anéis de halo: é o ponto da seção para onde o olho
   vai primeiro, e o que diz "você está aqui". */
.jornada__passo.is-ativo .jornada__bolha {
    background: var(--azul-acao); border-color: var(--azul-acao); color: #FFF;
    box-shadow: 0 0 0 7px rgba(46, 111, 224, .2), 0 0 0 15px rgba(46, 111, 224, .07);
    transform: scale(1.06);
}
/* Etapa já vista: a bolha fica marcada, não apagada. */
.jornada__passo.is-vista .jornada__bolha {
    background: var(--marinho-claro);
    border-color: var(--azul-luz); color: var(--azul-luz);
}

.jornada__passo-nome {
    max-width: 17ch;
    font-family: var(--display); font-size: .95rem; font-weight: 500;
    letter-spacing: -.014em; line-height: 1.3;
    color: var(--tx-claro-3);
    transition: color var(--transicao);
}
.jornada__passo:hover .jornada__passo-nome,
.jornada__passo.is-ativo .jornada__passo-nome { color: var(--tx-claro); }

.jornada__passo:focus-visible { outline: none; }
.jornada__passo:focus-visible .jornada__bolha {
    outline: 2px solid var(--acento-inv); outline-offset: 5px;
}

/* ------------------------------------------------------------------
   O painel
   ------------------------------------------------------------------ */

.jornada__painel {
    margin-top: clamp(2.5rem, 4.5vw, 3.25rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(230, 228, 223, .035);
    border: 1px solid var(--linha-clara);
}

/* Com JavaScript, um painel por vez. */
.jornada.is-interativa .jornada__painel { display: none; }
.jornada.is-interativa .jornada__painel.is-ativo {
    display: block;
    animation: jornada-entra .45s cubic-bezier(.22, .61, .36, 1);
}
@keyframes jornada-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* O topo: rótulo à esquerda, navegação à direita. A navegação mora AQUI,
   e não no pé, para ficar na mesma tela da régua — antes o "Próxima
   etapa" estava a quase mil pixels do clique que o revelava. */
.jornada__topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem 1.5rem; flex-wrap: wrap;
    padding-bottom: 1.1rem; margin-bottom: clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid var(--linha-clara);
}

/* Empilhado (sem JavaScript) os quatro painéis já estão à vista: os
   botões não teriam função e não aparecem. */
.jornada__pe { display: none; }
.jornada.is-interativa .jornada__pe { display: flex; align-items: center; gap: .6rem; }

.jornada__conta {
    margin-right: .5rem;
    font-family: var(--display); font-size: .7rem; font-weight: 400;
    letter-spacing: .2em; color: var(--tx-claro-3);
    font-variant-numeric: tabular-nums;
}

.jornada__navega {
    display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
    min-width: 46px; min-height: 46px; padding: 0 1.2rem;
    background: transparent; cursor: pointer; text-decoration: none;
    border: 1px solid var(--linha-clara);
    font-family: var(--display); font-size: .68rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--tx-claro-2);
    transition: background-color var(--transicao), color var(--transicao),
                border-color var(--transicao);
}
.jornada__navega[aria-label] { padding: 0; }
.jornada__navega svg { width: 14px; height: 14px; }
.jornada__navega:hover:not(:disabled) { color: var(--tx-claro); border-color: var(--acento-inv); }
.jornada__navega:disabled { opacity: .3; cursor: default; }
/* A próxima é a ação principal: ela é o botão cheio. */
.jornada__navega--proxima {
    background: var(--azul-acao); border-color: var(--azul-acao); color: #FFF;
}
.jornada__navega--proxima:hover:not(:disabled) {
    background: var(--concreto); border-color: var(--concreto); color: var(--marinho);
}

.jornada__corpo {
    display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 720px) {
    .jornada__corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jornada__cabeca { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .jornada__corpo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
    .jornada__cabeca { grid-column: auto; }
}

.jornada__cabeca h3 {
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    letter-spacing: -.028em; line-height: 1.14;
}
.jornada__lead {
    margin-top: .9rem;
    font-size: .98rem; line-height: 1.64; color: var(--tx-claro-2);
}

/*
 * A entrega. É a linha mais importante do painel — o que a pessoa leva
 * embora da etapa — e por isso é a única em Cormorant aqui dentro.
 */
.jornada__entrega {
    margin-top: 1.4rem; padding-left: 1.1rem;
    border-left: 2px solid var(--azul-luz);
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.4;
    color: var(--tx-claro);
}

.jornada__lado h4 {
    font-family: var(--display); font-size: .66rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--acento-inv);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--linha-clara);
}
.jornada__lado--voce h4 { color: var(--tx-claro-2); }
.jornada__lado ul { list-style: none; display: grid; margin: 0; padding: 0; }
.jornada__lado li {
    position: relative;
    padding: .72rem 0 .72rem 1.35rem;
    font-size: .93rem; line-height: 1.5; color: var(--tx-claro-2);
    border-bottom: 1px solid rgba(201, 214, 228, .1);
}
.jornada__lado li:last-child { border-bottom: 0; }
/* Marcador é um fio curto, não bolinha: é o traço da marca em escala mínima. */
.jornada__lado li::before {
    content: ""; position: absolute; left: 0; top: 1.45em;
    width: 8px; height: 1px; background: var(--azul-luz);
}
.jornada__lado--voce li::before { background: var(--tx-claro-3); }

/* No celular: as bolhas continuam em fila (quatro cabem em 360px), sem
   os nomes — o nome da etapa aberta já é o título do painel logo abaixo,
   e quatro nomes em colunas de 80px quebrariam em quatro linhas cada. */
@media (max-width: 759px) {
    .jornada__regua { --bolha: 2.85rem; }
    .jornada__passo { padding: 0; min-height: 48px; }
    .jornada__passo-nome {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .jornada__passo.is-ativo .jornada__bolha {
        box-shadow: 0 0 0 5px rgba(46, 111, 224, .22);
    }

    /* A navegação desce para o fim do painel: no celular as colunas
       empilham, e quem chega ao botão é quem terminou de ler. */
    .jornada.is-interativa .jornada__painel.is-ativo { display: flex; flex-direction: column; }
    .jornada__topo { display: contents; }
    .jornada__topo > .rotulo { margin-bottom: 1.1rem; }
    .jornada__corpo { order: 1; }
    .jornada.is-interativa .jornada__pe {
        order: 2; margin-top: 1.75rem; padding-top: 1.25rem;
        border-top: 1px solid var(--linha-clara);
    }
    .jornada__conta { margin-right: auto; }
}

/* ------------------------------------------------------------------
   O aparelho — a foto do aplicativo

   A arte já vem com o celular renderizado. O que o CSS acrescenta é o
   corte angular da marca e a legenda: sem isso a peça flutuaria como
   banner de campanha dentro de uma página que não usa banner.
   ------------------------------------------------------------------ */

.aparelho { position: relative; }
.aparelho img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    clip-path: polygon(
        var(--corte-x) 0, 100% 0,
        100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%,
        0 100%, 0 var(--corte-y)
    );
}
.aparelho figcaption {
    margin-top: 1.1rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase; color: var(--tx-escuro-3);
}

/* ------------------------------------------------------------------
   Blog — destaque e contagem por categoria (padrão da Sollievo)
   ------------------------------------------------------------------ */

/* O número ao lado do filtro informa antes do clique: "Financiamento 10"
   diz que o assunto existe E que vale abrir. Filtro sem número obriga a
   clicar para descobrir que ali só tem um artigo. */
.filtros a { display: inline-flex; align-items: baseline; gap: .5rem; }
.filtros__n {
    font-size: .62rem; letter-spacing: .1em;
    color: var(--acento); opacity: .8;
    font-variant-numeric: tabular-nums;
}

/* O artigo mais recente: foto grande à esquerda, texto à direita. É o
   ponto de entrada que uma grade uniforme não tem — numa grade em que
   tudo pesa igual, o olho não sabe por onde começar. */
.destaque {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    text-decoration: none; color: inherit;
    align-items: center;
}
@media (min-width: 860px) {
    .destaque { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.destaque img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    background: var(--concreto);
    transition: opacity var(--transicao);
}
.destaque:hover img { opacity: .9; }
.destaque h2 {
    font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -.028em;
    margin-top: 1rem; max-width: 22ch;
    transition: color var(--transicao);
}
.destaque:hover h2 { color: var(--acento); }
.destaque p {
    margin-top: 1rem; max-width: 52ch;
    color: var(--tx-escuro-2); font-size: .97rem; line-height: 1.62;
}

/* ------------------------------------------------------------------
   Atalho do WhatsApp no contato

   Adaptado da Sollievo. Muita gente não preenche formulário, e deixar o
   caminho mais rápido escondido atrás do botão flutuante custa contato.
   O bloco diz por que existe — "a resposta sai mais rápido por lá" —, o
   que é honesto e resolve a dúvida de qual canal usar.
   ------------------------------------------------------------------ */

.atalho-zap {
    display: flex; align-items: flex-start; gap: 1.1rem;
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    background:
        radial-gradient(130% 100% at 0% 0%, var(--marinho-claro) 0%, transparent 70%),
        var(--marinho);
    color: var(--tx-claro);
    text-decoration: none;
    transition: background-color var(--transicao);
    clip-path: polygon(
        var(--corte-x) 0, 100% 0,
        100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%,
        0 100%, 0 var(--corte-y)
    );
}
.atalho-zap:hover { background: var(--marinho-esc); }

.atalho-zap__icone {
    flex: 0 0 34px; width: 34px; height: 34px;
    display: grid; place-items: center;
    color: var(--acento-inv);
}
.atalho-zap__icone svg { width: 26px; height: 26px; }

.atalho-zap strong {
    display: block; margin-bottom: .45rem;
    font-family: var(--display); font-size: .95rem; font-weight: 500;
    letter-spacing: -.012em;
}
.atalho-zap span { font-size: .9rem; line-height: 1.55; color: var(--tx-claro-2); }
.atalho-zap strong { color: var(--tx-claro); }
.atalho-zap:focus-visible { outline-color: var(--acento-inv); }



/* ==================================================================
   A palavra que gira, na capa

   Voltou a pedido do dono: é a capa da marca dele há anos. O manual
   pede "uma informação forte por peça, não efeito" e por isso ela tinha
   saído — a divergência está anotada em `database/seed_capa.php`.

   A engenharia importa mais que o efeito: as palavras empilham no MESMO
   lugar dentro de um `inline-grid`, que assume a largura da MAIOR delas.
   Sem isso "com excelência" pularia de posição a cada troca, três vezes
   a cada oito segundos, e o título inteiro dançaria.
   ================================================================== */

/*
 * A palavra ocupa uma LINHA INTEIRA, não um pedaço dela.
 *
 * Como `inline-grid` ela herdava a largura da maior palavra e ficava
 * pendurada no fim da primeira linha, com um vão à direita: "Engenharia
 * que Realiza ␣␣␣ / com excelência". Em bloco, a quebra passa a ser
 * decidida pela estrutura e não pela sobra — três linhas, sempre iguais,
 * com qualquer das três palavras. É a composição do site atual.
 */
/*
 * `grid`, não `block` nem `inline-grid`.
 *
 * `inline-grid` empilhava certo, mas a palavra ficava pendurada no fim
 * da primeira linha, com o vão da maior palavra à direita. Troquei por
 * `block` e quebrei pior: sem grid, `grid-area` não vale nada e as três
 * palavras voltaram a ficar LADO A LADO — duas invisíveis, ocupando
 * espaço e estourando a linha para fora da tela no celular.
 *
 * `grid` resolve as duas coisas: é bloco (ocupa a linha inteira, então a
 * quebra do título é sempre a mesma) e empilha as palavras na mesma
 * célula. `justify-items: start` mantém tudo alinhado à esquerda.
 */
.hero__gira {
    display: grid;
    justify-items: start;
}
.hero__palavra {
    grid-area: 1 / 1;
    color: var(--azul-luz);
    opacity: 0;
    transform: translateY(.18em);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, .61, .36, 1);
}
.hero__palavra.is-ativa { opacity: 1; transform: none; }

/* Sem JavaScript a primeira fica, e as outras não ocupam lugar nenhum
   além da largura que já reservaram. O título nunca fica truncado. */
.sem-js .hero__palavra:not(.is-ativa) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .hero__palavra { transition: none; }
}

/* O número é o acento natural de uma seção clara — e é um dos três usos
   que o manual autoriza. Em azul ele dá cor a uma faixa que era cinza
   sobre cinza, sem acrescentar nenhum elemento novo à página. */
.secao--claro .dados dd,
.secao--concreto .dados dd { color: var(--acento); }
.secao--claro .dados dd small,
.secao--concreto .dados dd small { color: var(--tx-escuro-2); }

/* O mesmo vale para a ficha técnica de uma obra e para o índice. */
.secao--claro .ficha dd, .secao--concreto .ficha dd { color: var(--acento); }

/* ==================================================================
   Política da qualidade — o fecho institucional da home

   Ela é obrigatória e ficava mal em qualquer lugar que eu tentasse:
   repetida acima do rodapé em toda página virava aviso de sistema; no
   meio de Quem Somos, mais uma faixa igual às outras.

   Aqui ela é o PÉ DA PÁGINA. O fundo é o mesmo do rodapé de propósito
   — os dois leem como um bloco só, separados por um fio champagne —, e
   por isso ela não disputa atenção com o convite logo acima: encerra a
   leitura, que é exatamente o papel de uma política.

   É também o lugar do champagne. A seção fala de padrão, é a última
   coisa que o leitor vê e está sobre marinho, onde o ouro aparece sem
   precisar ser escurecido. Três toques, nenhum a mais: o traço, o fio
   que a separa do rodapé e a numeração dos compromissos.
   ================================================================== */

.qualidade {
    background: var(--marinho-esc);
    color: var(--tx-claro);
    padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}

.qualidade__abertura {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (min-width: 900px) {
    .qualidade__abertura {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.qualidade .traco { margin-bottom: 1.4rem; }
.qualidade .rotulo { color: var(--champagne); }
.qualidade h2 {
    margin-top: .9rem;
    font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.026em;
}
.qualidade__abertura > p {
    margin: 0; max-width: 46ch;
    color: var(--tx-claro-2); font-size: .97rem; line-height: 1.65;
}

/* O selo entra pequeno, sobre um retângulo claro — o logotipo é
   colorido e flutuaria no marinho. */
.qualidade__selo { display: grid; gap: .8rem; justify-items: start; }
.qualidade__selo img {
    height: 46px; width: auto;
    background: var(--offwhite); padding: .5rem .7rem;
}
.qualidade__selo p {
    margin: 0; max-width: 22ch;
    font-family: var(--display); font-size: .62rem; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tx-claro-3);
}

/*
 * Os quatro compromissos, numerados.
 *
 * Numeração aqui é legítima — são compromissos CONTADOS, e o documento
 * oficial os enumera. O número é o único lugar do site em que o
 * champagne encosta num dado, e é discreto por ser pequeno.
 */
.qualidade__lista {
    list-style: none; counter-reset: compromisso;
    display: grid; gap: 0;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--linha-clara);
}
@media (min-width: 820px) {
    .qualidade__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.qualidade__lista li {
    counter-increment: compromisso;
    padding: 1.5rem 1.75rem 1.5rem 0;
    font-size: .93rem; line-height: 1.55; color: var(--tx-claro-2);
    border-bottom: 1px solid var(--linha-clara);
}
@media (min-width: 820px) {
    .qualidade__lista li { border-bottom: 0; padding-bottom: 0; }
}
.qualidade__lista li::before {
    content: counter(compromisso, decimal-leading-zero);
    display: block; margin-bottom: .8rem;
    font-family: var(--display); font-size: .68rem; font-weight: 500;
    letter-spacing: .18em; color: var(--champagne);
    font-variant-numeric: tabular-nums;
}

/*
 * O fio champagne do rodapé.
 *
 * É o toque de alto padrão que fica em TODA página, e é discreto por
 * construção: 1px, largura inteira, ouro sobre marinho escuro. O gesto
 * é clássico — a linha fina dourada que separa o conteúdo do pé — e
 * custa um pixel de altura.
 *
 * Na home ele também é a costura entre a política da qualidade e o
 * rodapé: as duas têm o mesmo fundo e leem como um bloco só, com o fio
 * marcando onde uma termina e a outra começa.
 */
.rodape { border-top: 1px solid rgba(199, 191, 168, .42); }

/* ==================================================================
   Galeria de vídeos

   O iframe NÃO nasce na página. Cada vídeo é uma capa com botão de
   play, e o frame do YouTube ou do Instagram só é criado no clique.
   Três motivos: seis embeds custam mais que a página inteira; o frame
   conta a visita mesmo de quem não deu play; e `loading="lazy"` não
   ajuda aqui, porque o iframe reserva a caixa de qualquer jeito e
   sobram seis buracos 16/9 enquanto a rede não vem.
   ================================================================== */

.videos { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
@media (min-width: 720px)  { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.video { margin: 0; display: grid; gap: .9rem; align-content: start; min-width: 0; }

.video__capa {
    position: relative; display: block; overflow: hidden;
    background: var(--marinho-esc);
    aspect-ratio: 16 / 9;
}
/* Reels e Shorts são verticais: exibi-los em 16/9 põe duas tarjas
   pretas ocupando metade da caixa. */
.video--vertical .video__capa { aspect-ratio: 9 / 16; }
.video--quadrado .video__capa { aspect-ratio: 1 / 1; }

.video__capa img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.06);
    transition: transform 900ms cubic-bezier(.22, .61, .36, 1), opacity var(--transicao);
}
.video__capa:hover img { transform: scale(1.03); }

/* O iframe entra no lugar da capa, com a mesma caixa. */
.video__capa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__play {
    position: absolute; inset: 0; margin: auto;
    width: 62px; height: 62px;
    display: grid; place-items: center;
    background: var(--azul-acao); color: #FFF;
    border-radius: 50%;
    transition: transform var(--transicao), background-color var(--transicao);
}
.video__capa:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 24px; height: 24px; margin-left: 3px; }

.video figcaption {
    font-family: var(--display); font-size: .95rem; font-weight: 500;
    letter-spacing: -.014em; line-height: 1.3;
}
.secao--marinho .video figcaption, .secao--grafite .video figcaption { color: var(--tx-claro); }

/* ==================================================================
   Página de links da bio

   Autônoma: não usa o cabeçalho nem o rodapé do site. É o destino do
   tráfego do Instagram, abre sempre no celular, e a navegação inteira
   do site ali só atrapalha — quem vem do Instagram quer uma lista de
   coisas para tocar.

   Uma coluna, largura de leitura no celular, e cada item com 60px de
   altura mínima: é o dedo que opera esta página, não o mouse.

   Refeita em 17/09/2026 no nível da página da Sollievo em produção,
   com a identidade da Camax: marinho, azul de ação, Sora, e o champagne
   só no fio do rodapé — o mesmo gesto do site.
   ================================================================== */

.lk {
    background:
        radial-gradient(130% 55% at 50% 0%, var(--marinho-claro) 0%, transparent 62%),
        var(--marinho);
    color: var(--tx-claro);
    min-height: 100svh;
}

.lk__pagina {
    width: min(100% - 2.25rem, 34rem);
    margin-inline: auto;
    padding-block: clamp(2.25rem, 7vw, 3.5rem) clamp(5rem, 12vw, 6rem);
    display: grid;
    gap: 1rem;
}
.lk__blocos { display: grid; gap: .8rem; }

/* ------------------------------------------------------------- Topo */

.lk__topo { display: grid; justify-items: center; text-align: center; margin-bottom: .5rem; }

.lk__avatar {
    width: 96px; height: 96px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: var(--marinho-esc);
    box-shadow: 0 0 0 1px var(--linha-clara), 0 0 0 6px rgba(46, 111, 224, .14);
    transition: box-shadow var(--transicao);
}
.lk__avatar:hover { box-shadow: 0 0 0 1px var(--acento-inv), 0 0 0 6px rgba(46, 111, 224, .24); }
.lk__avatar img { width: 64%; height: auto; }
.lk__avatar span { font-family: var(--display); font-size: 2rem; font-weight: 600; }

.lk__nome {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: 1.1rem;
    font-family: var(--display); font-size: 1.4rem; font-weight: 600;
    letter-spacing: -.024em;
}
/* O selo de perfil oficial: o check no azul de ação, como o de rede
   social — é o sinal que quem vem do Instagram já sabe ler. */
.lk__selo {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--azul-acao); color: #FFF;
}
.lk__selo svg { stroke-width: 3; }

.lk__lugar {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: .5rem 0 0;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--acento-inv);
}
.lk__bio {
    margin: .85rem auto 0; max-width: 36ch;
    font-size: .93rem; line-height: 1.6; color: var(--tx-claro-2);
}

/* As quatro ações, em colunas iguais: quatro alvos do mesmo tamanho
   leem como um painel de controle, que é o que são.

   `flex: 1 1 0`, e não `repeat(auto-fit, minmax(0, 1fr))`: com mínimo
   zero o auto-fit cria colunas sem fim, e a quarta ação saía da tela. E
   flex acompanha sozinho quando uma delas não existe (sem telefone, sem
   suporte a compartilhar). */
.lk__acoes {
    width: 100%; margin-top: 1.4rem;
    display: flex; gap: .5rem;
}
.lk__acao {
    flex: 1 1 0; min-width: 0;
    display: grid; justify-items: center; gap: .45rem;
    padding: .8rem .25rem .7rem;
    background: rgba(230, 228, 223, .06);
    border: 1px solid var(--linha-clara);
    font-family: var(--display); font-size: .7rem; font-weight: 500;
    letter-spacing: .02em; color: var(--tx-claro);
    text-decoration: none; cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.lk__acao:hover { background: rgba(230, 228, 223, .11); border-color: var(--acento-inv); }
.lk__acao:active { transform: scale(.97); }
.lk__acao-icone {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(46, 111, 224, .16); color: var(--acento-inv);
}
.lk__acao:first-child .lk__acao-icone { background: rgba(37, 211, 102, .16); color: #4ADE80; }
.lk__acao[hidden] { display: none; }

/* -------------------------------------------------------- O item */

.lk-item {
    display: grid; align-items: center; gap: .9rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 62px; padding: .85rem 1.1rem;
    background: rgba(230, 228, 223, .06);
    border: 1px solid var(--linha-clara);
    text-decoration: none; color: inherit;
    transition: background-color var(--transicao), border-color var(--transicao),
                transform var(--transicao);
}
.lk-item:not(.tem-miniatura) { grid-template-columns: minmax(0, 1fr) auto; }
.lk-item:hover { background: rgba(230, 228, 223, .11); border-color: var(--acento-inv); }
.lk-item:active { transform: scale(.985); }

/* O destaque usa o azul de ação, o mesmo botão do site. Um por página:
   dois destaques não destacam nada. */
.lk-item.is-destaque {
    background: var(--azul-acao); border-color: var(--azul-acao); color: #FFF;
}
.lk-item.is-destaque:hover { background: var(--concreto); border-color: var(--concreto); color: var(--marinho); }

.lk-item__miniatura {
    width: 46px; height: 46px; display: grid; place-items: center;
    overflow: hidden; background: var(--marinho-esc);
}
.lk-item__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.lk-item__texto { display: grid; gap: .15rem; min-width: 0; }
.lk-item__titulo {
    font-family: var(--display); font-size: .96rem; font-weight: 500;
    letter-spacing: -.012em; line-height: 1.25;
}
.lk-item__sub { font-size: .8rem; color: var(--tx-claro-2); line-height: 1.4; }
.lk-item.is-destaque .lk-item__sub { color: rgba(255, 255, 255, .82); }

.lk-item__seta { color: var(--tx-claro-3); display: grid; place-items: center; transition: color var(--transicao), transform var(--transicao); }
.lk-item:hover .lk-item__seta { color: var(--acento-inv); transform: translateX(2px); }
.lk-item.is-destaque .lk-item__seta { color: rgba(255, 255, 255, .85); }

/* ----------------------------------------------- Cartão do WhatsApp */

/* O bloco mais clicado da página, e por isso o maior. O verde é o do
   WhatsApp, e é o único verde do site: cor de marca de terceiro que
   todo mundo reconhece de longe, usada só onde ela é a própria ação. */
.lk-zap {
    display: grid; align-items: center; gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.1rem 1.15rem;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(37, 211, 102, .16) 0%, transparent 60%),
        rgba(230, 228, 223, .06);
    border: 1px solid rgba(74, 222, 128, .42);
    text-decoration: none; color: var(--tx-claro);
    transition: border-color var(--transicao), transform var(--transicao), background-color var(--transicao);
}
.lk-zap:hover { border-color: #4ADE80; background-color: rgba(230, 228, 223, .1); }
.lk-zap:active { transform: scale(.985); }
.lk-zap__icone {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366; color: #FFF;
}
.lk-zap__texto { display: grid; gap: .2rem; min-width: 0; }
.lk-zap__titulo { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.016em; }
.lk-zap__sub { font-size: .84rem; line-height: 1.4; color: var(--tx-claro-2); }
.lk-zap__nota {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .15rem;
    font-size: .74rem; color: #86EFAC;
}
.lk-zap__seta { color: #86EFAC; display: grid; place-items: center; }

/* -------------------------------------------------- Cartão largo */

.lk-cartao {
    display: block; overflow: hidden; position: relative;
    text-decoration: none; color: var(--tx-claro);
    background: var(--marinho-esc);
    border: 1px solid var(--linha-clara);
    transition: border-color var(--transicao);
}
.lk-cartao:hover { border-color: var(--acento-inv); }
.lk-cartao__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lk-cartao__corpo { display: grid; gap: .35rem; padding: 1.1rem 1.25rem 1.25rem; }
.lk-cartao__titulo {
    font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em;
}
.lk-cartao__sub { font-size: .87rem; color: var(--tx-claro-2); line-height: 1.5; }
.lk-cartao__cta {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem;
    font-family: var(--display); font-size: .7rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--acento-inv);
}

/* ----------------------------------------------- Seção e texto */

/* Rótulo com um fio que corre até a margem: separa grupo de botões
   sem abrir espaço de seção inteira. */
.lk-secao {
    display: flex; align-items: center; gap: .9rem;
    margin: 1.4rem 0 .1rem;
    font-family: var(--display); font-size: .66rem; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase; color: var(--acento-inv);
}
.lk-secao::after { content: ""; flex: 1; height: 1px; background: var(--linha-clara); }
.lk-texto { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--tx-claro-2); }

/* ------------------------------------------------ Bloco com cabeça */

.lk-bloco {
    display: grid; gap: .9rem;
    padding: 1.15rem 1.1rem 1.1rem;
    background: rgba(230, 228, 223, .04);
    border: 1px solid var(--linha-clara);
    min-width: 0;
}
.lk-bloco__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lk-bloco__cabeca--coluna { display: grid; gap: .3rem; }
.lk-bloco__titulo {
    font-family: var(--display); font-size: 1.02rem; font-weight: 600;
    letter-spacing: -.018em; line-height: 1.25;
}
.lk-bloco__sub { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--tx-claro-2); }
.lk-bloco__mais {
    justify-self: start;
    display: inline-flex; align-items: center; gap: .45rem;
    padding-block: .5rem;
    font-family: var(--display); font-size: .7rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--acento-inv);
    text-decoration: none;
}
.lk-bloco__mais:hover { color: var(--tx-claro); }

.lk-setas { display: flex; gap: .4rem; }
.lk-seta {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; color: var(--tx-claro-2); cursor: pointer;
    border: 1px solid var(--linha-clara);
    transition: color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
.lk-seta:hover:not(:disabled) { color: var(--marinho); background: var(--concreto); border-color: var(--concreto); }
.lk-seta:disabled { opacity: .3; cursor: default; }
.sem-js .lk-setas { display: none; }

/* ------------------------------------------------------- Números */

.lk-numeros {
    padding: 1.15rem 1.1rem;
    background: rgba(230, 228, 223, .04);
    border: 1px solid var(--linha-clara);
}
.lk-numeros .lk-bloco__titulo {
    margin-bottom: .9rem;
    font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: var(--acento-inv);
}
.lk-numeros__lista {
    margin: 0; display: grid; gap: 0;
    grid-template-columns: repeat(var(--lk-colunas, 3), minmax(0, 1fr));
}
.lk-numeros__lista > div { padding: .1rem .6rem; text-align: center; }
.lk-numeros__lista > div + div { border-left: 1px solid var(--linha-clara); }
.lk-numeros__lista dt {
    font-family: var(--display); font-size: clamp(1.15rem, 5vw, 1.45rem); font-weight: 600;
    letter-spacing: -.03em; line-height: 1.1; color: #FFF;
}
.lk-numeros__lista dd {
    margin: .35rem 0 0;
    font-size: .74rem; line-height: 1.35; color: var(--tx-claro-2);
}

/* --------------------------------------------------------- Vídeo */

.lk-video { margin: 0; display: grid; gap: .7rem; }
.lk-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--marinho-esc); }
.lk-video--vertical iframe { aspect-ratio: 9 / 16; }
.lk-video--quadrado iframe { aspect-ratio: 1 / 1; }
.lk-video figcaption {
    font-family: var(--display); font-size: .85rem; font-weight: 500; color: var(--tx-claro-2);
}

/* -------------------------------------------------------- Trilho */

/* Rola por toque, e a barra some. O `scroll-snap` é o que faz o
   próximo item parar alinhado em vez de meio cortado. */
.lk-trilho {
    display: grid; grid-auto-flow: column; grid-auto-columns: 66%;
    gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: .15rem;
}
.lk-trilho::-webkit-scrollbar { display: none; }
.lk-trilho > * { scroll-snap-align: start; }
.lk-trilho--depo { grid-auto-columns: 86%; }

.lk-obra { display: grid; gap: .5rem; text-decoration: none; color: var(--tx-claro); min-width: 0; }
.lk-obra__foto {
    display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--marinho-esc);
}
.lk-obra__foto img {
    width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06);
    transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.lk-obra:hover .lk-obra__foto img { transform: scale(1.04); }
.lk-obra__nome { font-family: var(--display); font-size: .88rem; font-weight: 500; letter-spacing: -.01em; }
.lk-obra__ficha {
    margin-top: -.3rem;
    font-family: var(--display); font-size: .6rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx-claro-3);
}

.lk-depo {
    margin: 0; padding: 1.1rem 1.15rem 1rem;
    display: flex; flex-direction: column;
    background: rgba(230, 228, 223, .05);
    border-top: 2px solid var(--azul-luz);
}
/* As aspas da citação: um dos usos contados do champagne. */
.lk-depo::before {
    content: "\201C"; display: block; height: 1.5rem; margin-top: -.2rem;
    font-family: var(--serif); font-size: 3.4rem; line-height: 1;
    color: var(--champagne); opacity: .85;
}
.lk-depo blockquote {
    margin: .6rem 0 0; flex: 1;
    font-family: var(--serif); font-style: italic;
    font-size: 1.08rem; line-height: 1.45; color: var(--tx-claro);
}
.lk-depo figcaption { margin-top: .9rem; display: grid; gap: .1rem; }
.lk-depo figcaption b { font-family: var(--display); font-size: .82rem; font-weight: 500; }
.lk-depo figcaption span {
    font-family: var(--display); font-size: .6rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tx-claro-3);
}

/* ------------------------------------------------------- Artigos */

.lk-artigos { display: grid; }
.lk-artigo {
    display: grid; align-items: center; gap: .9rem;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    padding: .7rem 0;
    border-top: 1px solid var(--linha-clara);
    text-decoration: none; color: inherit;
}
.lk-artigo:first-child { border-top: 0; padding-top: 0; }
.lk-artigo__foto { width: 64px; height: 64px; overflow: hidden; background: var(--marinho-esc); }
.lk-artigo__foto img { width: 100%; height: 100%; object-fit: cover; }
.lk-artigo__texto { display: grid; gap: .2rem; min-width: 0; }
.lk-artigo__titulo { font-family: var(--display); font-size: .88rem; font-weight: 500; line-height: 1.3; }
.lk-artigo__data { font-size: .74rem; color: var(--tx-claro-3); }
.lk-artigo:hover .lk-artigo__titulo { color: var(--acento-inv); }
.lk-artigo:hover .lk-item__seta { color: var(--acento-inv); }

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

.lk-contato__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lk-contato__lista li {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: .8rem;
    padding: .7rem 0;
    border-top: 1px solid var(--linha-clara);
    font-size: .92rem; overflow-wrap: anywhere;
}
.lk-contato__lista li:first-child { border-top: 0; padding-top: .1rem; }
.lk-contato__lista svg { color: var(--acento-inv); }
/* Alvo de toque: padding por dentro e margem negativa por fora — a linha
   continua do mesmo tamanho e o dedo ganha 44px (regra do site). */
.lk-contato__lista a {
    display: block; padding-block: .7rem; margin-block: -.7rem;
    color: inherit; text-decoration: none;
}
.lk-contato__lista a:hover { color: var(--acento-inv); }
.lk-contato__botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.lk-botao-sec {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: 0 .9rem;
    border: 1px solid var(--linha-clara);
    font-family: var(--display); font-size: .74rem; font-weight: 500; color: var(--tx-claro);
    text-decoration: none;
    transition: border-color var(--transicao), background-color var(--transicao);
}
.lk-botao-sec:hover { border-color: var(--acento-inv); background: rgba(230, 228, 223, .07); }

/* ---------------------------------------------------- Formulário */

.lk-form { display: grid; gap: 1rem; }
.lk-form .campo__rotulo { color: var(--tx-claro-3); }
.lk-form input[type="text"], .lk-form input[type="tel"], .lk-form textarea {
    width: 100%; padding: .75rem .9rem;
    background: rgba(7, 21, 35, .45);
    border: 1px solid var(--linha-clara); border-radius: 0;
    font-family: var(--corpo); font-size: 1rem; color: var(--tx-claro);
}
.lk-form ::placeholder { color: var(--tx-claro-3); }
.lk-form input:focus, .lk-form textarea:focus {
    outline: none; border-color: var(--acento-inv);
}
.lk-form .campo--check span { color: var(--tx-claro-2); }
.lk-form .campo--check a { color: var(--acento-inv); }
.lk-form .btn { justify-content: center; width: 100%; }

/* ------------------------------------------------------------- Pé */

.lk__pe {
    margin-top: 1.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(199, 191, 168, .42);
    display: grid; gap: .6rem; justify-items: center;
}
.lk__redes { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; gap: .5rem; }
.lk__redes a {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--linha-clara);
    color: var(--tx-claro-2);
    transition: color var(--transicao), border-color var(--transicao);
}
.lk__redes a:hover { color: var(--acento-inv); border-color: var(--acento-inv); }
.lk__site {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--display); font-size: .66rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--tx-claro-3); text-decoration: none;
    padding: .5rem;
}
.lk__site:hover { color: var(--acento-inv); }
.lk__direitos { margin: 0; font-size: .74rem; color: var(--tx-claro-3); }

.lk .aviso--ok   { background: rgba(37, 211, 102, .12); border-color: #25D366; color: var(--tx-claro); }
.lk .aviso--erro { background: rgba(200, 80, 60, .14); border-color: #C8503C; color: var(--tx-claro); }

/* ------------------------------------------------ Barra do WhatsApp */

/* Centralizada por margem automática, e NÃO por `translateX(-50%)`: o
   `transform` fica livre para a entrada e a saída, e o banner de cookies
   sobe a barra mexendo em `bottom` (ver `medicao.css`). Somar dois
   `transform` jogaria a barra meia tela para o lado — foi o que
   aconteceu na Sollievo. */
.lk-fixo {
    position: fixed; z-index: 80;
    left: 0; right: 0; bottom: 1rem;
    width: max-content; margin-inline: auto;
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 50px; padding: 0 1.4rem;
    background: #25D366; color: #06270F;
    font-family: var(--display); font-size: .82rem; font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(7, 21, 35, .45);
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, bottom .3s ease;
}
.lk-fixo.is-visivel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s, bottom .3s ease;
}
.lk-fixo:hover { background: #4ADE80; }

/* ------------------------------------------------------------------
   Perguntas frequentes

   Lista de definição, sem acordeão e sem caixa. A resposta fica na
   tela porque é isso que o dado estruturado promete — e porque
   esconder a resposta de quem já rolou ate aqui nao faz sentido
   nenhum.

   O desenho e o mesmo da `.lista-fio`: um fio separando, a pergunta
   em Sora e a resposta em Inter. Nada de card — card ficou para o
   blog (ver "Nem tudo e card", no CLAUDE.md).
   ------------------------------------------------------------------ */

.faq {
    display: grid;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid var(--linha-escura);
}

.faq__item {
    padding-block: clamp(1.4rem, 3vw, 1.9rem);
    border-bottom: 1px solid var(--linha-escura);
}

.faq__pergunta {
    font-family: var(--display);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--tx-escuro);
}

.faq__resposta {
    margin: .7rem 0 0;
    max-width: 62ch;          /* linha longa demais cansa: 62 e o limite */
    font-size: .96rem;
    line-height: 1.75;
    color: var(--tx-escuro-2);
}

/* Em seção escura os dois tons trocam, como no resto do site. */
.secao--marinho .faq,
.secao--grafite .faq { border-top-color: var(--linha-clara); }

.secao--marinho .faq__item,
.secao--grafite .faq__item { border-bottom-color: var(--linha-clara); }

.secao--marinho .faq__pergunta,
.secao--grafite .faq__pergunta { color: var(--tx-claro); }

.secao--marinho .faq__resposta,
.secao--grafite .faq__resposta { color: var(--tx-claro-2); }

/* ------------------------------------------------------------------
   Consentimento de cookies

   A faixa em si mora em `assets/css/medicao.css`, carregada só quando
   há pixel configurado. Aqui fica apenas o que é do SITE: o botão do
   rodapé que reabre a escolha.
   ------------------------------------------------------------------ */

/* O link que reabre a escolha, na barra do rodape. E um <button>
   porque nao navega para lugar nenhum — mas se parece com os links ao
   lado, que e onde a pessoa vai procurar. */
.rodape__consent {
    background: none;
    border: 0;
    /* `padding-inline`, e NAO `padding`.

       Este bloco vem depois da secao de alvo de toque, que da
       `padding-block: .55rem` a este botao. Um `padding: 0` aqui
       zerava aquilo em silencio — mesma especificidade, e ganha quem
       vem por ultimo — e o alvo voltava para 18px de altura. */
    padding-inline: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.rodape__consent:hover { color: var(--acento-inv); text-decoration: underline; }

/* ==================================================================
   Recursos do aplicativo — ícone e texto, lidos de relance

   Eram rótulos miúdos com fio à esquerda (`.principio`), o tratamento
   de missão e visão em Quem Somos, e sumiam ao lado da foto do
   aparelho. O que o cliente GANHA com o aplicativo é argumento de
   venda: cada item virou uma linha com ícone no quadrado marinho.
   ================================================================== */

.recursos {
    list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
    display: grid; gap: .7rem;
    max-width: 34rem;
}
.recurso {
    display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center; gap: 1.15rem;
    padding: .9rem 1.25rem .9rem .9rem;
    background: var(--offwhite);
    border: 1px solid rgba(31, 41, 51, .07);
}
.recurso__icone {
    display: grid; place-items: center;
    width: 3.25rem; height: 3.25rem;
    background: var(--marinho); color: var(--acento-inv);
}
.recurso__icone svg { width: 24px; height: 24px; }
.recurso__texto b {
    display: block;
    font-family: var(--display); font-size: 1rem; font-weight: 600;
    letter-spacing: -.014em; color: var(--marinho);
}
.recurso__texto span {
    display: block; margin-top: .25rem;
    font-size: .93rem; line-height: 1.5; color: var(--tx-escuro-2);
}