/* =========================================================================
   MB ESCRITÓRIOS INTELIGENTES — DESIGN SYSTEM DO SITE
   -------------------------------------------------------------------------
   Direção de arte: "arquitetura editorial".
   Massas pretas cheias, fios de 1px, títulos grandes com tracking negativo,
   vermelho usado como sinalização (nunca como decoração), fotografia em
   full-bleed e respiro generoso nas áreas claras.

   Sumário
   1. Tokens
   2. Reset e base
   3. Tipografia e utilitários
   4. Botões e links
   5. Cabeçalho e navegação
   6. Hero
   7. Seções (soluções, método, projetos, clientes, marcas, revista…)
   8. Cards e sliders
   9. Formulários
  10. Rodapé, WhatsApp e cookies
  11. Páginas internas e Revista
  12. Movimento e acessibilidade
  13. Responsivo
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Cores */
    --ink: #0a0a0b;
    --ink-2: #121214;
    --ink-3: #1c1c20;
    --grafite: #2a2a2f;
    --cinza-700: #4b4b52;
    --cinza-500: #7a7a83;
    --cinza-400: #a1a1aa;
    --cinza-300: #d4d4d8;
    --cinza-200: #e5e5e7;
    --cinza-100: #f2f2f3;
    --papel: #fafafa;
    --branco: #ffffff;
    --vermelho: #e30613;
    --vermelho-escuro: #b30510;
    --vermelho-claro: #ff2b38;

    /* Superfícies */
    --fundo: var(--branco);
    --texto: var(--ink);
    --texto-suave: var(--cinza-700);
    --borda: rgba(10, 10, 11, 0.12);
    --borda-clara: rgba(255, 255, 255, 0.16);

    /* Tipografia */
    --fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --fonte-editorial: "Instrument Serif", Georgia, "Times New Roman", serif;

    --t-xs: 0.75rem;
    --t-sm: 0.8125rem;
    --t-base: 1rem;
    --t-md: 1.0625rem;
    --t-lg: clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
    --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --t-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
    --t-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
    --t-hero: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);

    /* Espaçamento */
    --gap-1: 0.25rem;
    --gap-2: 0.5rem;
    --gap-3: 0.75rem;
    --gap-4: 1rem;
    --gap-5: 1.5rem;
    --gap-6: 2rem;
    --gap-7: 3rem;
    --gap-8: 4rem;
    --gap-9: 6rem;

    --secao-y: clamp(4rem, 2.5rem + 6vw, 8rem);
    --largura: 1320px;
    --margem: clamp(1.25rem, 4vw, 4rem);

    /* Formas */
    --raio: 2px;
    --raio-md: 4px;
    --sombra: 0 24px 60px -30px rgba(10, 10, 11, 0.45);
    --sombra-forte: 0 40px 90px -40px rgba(10, 10, 11, 0.65);

    /* Movimento */
    --transicao: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    --transicao-lenta: 720ms cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Patterns padrão; podem ser substituídos por PNG em Identidade visual. */
    --padrao-claro: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='118' viewBox='0 0 86 118'%3E%3Cpath d='M11 114V43a32 32 0 0 1 64 0v71' fill='none' stroke='%230a0a0b' stroke-opacity='0.05' stroke-width='1.4'/%3E%3C/svg%3E");
    --padrao-escuro: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='118' viewBox='0 0 86 118'%3E%3Cpath d='M11 114V43a32 32 0 0 1 64 0v71' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 2. Reset/base */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrumentserif-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrumentserif-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Impede rolagem horizontal causada por elementos posicionados fora da tela. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--t-md);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.menu-aberto {
    overflow: hidden;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: var(--gap-6) 0;
}

::selection {
    background: var(--vermelho);
    color: #fff;
}

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

.pular-para-conteudo {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateY(-200%);
    z-index: 200;
    background: var(--vermelho);
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}

.pular-para-conteudo:focus {
    transform: none;
}

/* ------------------------------------------------- 3. Tipografia/utilitários */
.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--margem);
}

.container-largo {
    max-width: 1600px;
}

.secao {
    position: relative;
    padding-block: var(--secao-y);
}

.secao--clara {
    background: var(--branco);
    color: var(--ink);
}

.secao--papel {
    background: var(--papel);
    color: var(--ink);
}

.secao--escura {
    background: var(--ink);
    color: #fff;
    --texto-suave: rgba(255, 255, 255, 0.68);
    --borda: rgba(255, 255, 255, 0.14);
}

.secao--arcos::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--padrao-claro);
    background-repeat: repeat;
    opacity: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(100deg, #000 0 22%, transparent 46%, transparent 60%, #000 82% 100%);
    mask-image: linear-gradient(100deg, #000 0 22%, transparent 46%, transparent 60%, #000 82% 100%);
}

.secao--escura.secao--arcos::before,
.faixa-clientes.secao--arcos::before,
.diferenciais.secao--arcos::before,
.hero.secao--arcos::before {
    background-image: var(--padrao-escuro);
}

.hero.secao--arcos::before {
    z-index: 1;
}

.faixa-clientes.secao--arcos,
.parceria.secao--arcos {
    position: relative;
}

.faixa-clientes.secao--arcos > .container,
.parceria.secao--arcos > * {
    position: relative;
    z-index: 1;
}

.secao > .container {
    position: relative;
    z-index: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vermelho);
    margin-bottom: var(--gap-4);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
}

.titulo-secao {
    font-size: var(--t-2xl);
    max-width: 18ch;
}

.titulo-secao--largo {
    max-width: 24ch;
}

.titulo-secao .ponto,
.titulo-secao .destaque-final {
    color: var(--vermelho);
}

.titulo-secao .titulo-final {
    white-space: nowrap;
}

/* Conteúdo editável usado como chamada principal na página de contato. */
.contato__chamada {
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.contato__chamada p {
    margin: 0;
}

.subtitulo {
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: 48ch;
    margin-top: var(--gap-4);
}

.texto-editorial {
    font-family: var(--fonte-editorial);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.rotulo-lateral {
    font-size: var(--t-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cinza-500);
}

.grade {
    display: grid;
    gap: var(--gap-6);
}

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

/* --------------------------------------------------------- 4. Botões/links */
.btn {
    --btn-fundo: var(--vermelho);
    --btn-texto: #fff;
    --btn-borda: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.5rem;
    background: var(--btn-fundo);
    color: var(--btn-texto);
    border: 1px solid var(--btn-borda);
    border-radius: var(--raio);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
    text-align: left;
}

.btn:hover {
    --btn-fundo: var(--vermelho-escuro);
    transform: translateY(-1px);
}

.btn .seta {
    transition: transform var(--transicao);
}

.btn:hover .seta {
    transform: translateX(4px);
}

.btn--contorno {
    --btn-fundo: transparent;
    --btn-texto: var(--ink);
    --btn-borda: var(--borda);
}

.btn--contorno:hover {
    --btn-fundo: var(--ink);
    --btn-texto: #fff;
    --btn-borda: var(--ink);
}

.btn--claro {
    --btn-fundo: transparent;
    --btn-texto: #fff;
    --btn-borda: rgba(255, 255, 255, 0.32);
}

.btn--claro:hover {
    --btn-fundo: #fff;
    --btn-texto: var(--ink);
    --btn-borda: #fff;
}

.btn--bloco {
    width: 100%;
    justify-content: center;
}

.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid currentColor;
    transition: color var(--transicao), gap var(--transicao);
}

.link-seta .seta {
    color: var(--vermelho);
    transition: transform var(--transicao);
}

.link-seta:hover {
    color: var(--vermelho);
}

.link-seta:hover .seta {
    transform: translateX(5px);
}

.seta {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
}

/* ------------------------------------------------------ 5. Cabeçalho e menu */
.cabecalho {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-5);
    padding-block: 1.1rem;
}

.cabecalho--solido {
    background: rgba(10, 10, 11, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cabecalho--oculto {
    transform: translateY(-104%);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.marca__logo {
    height: 46px;
    width: auto;
}

.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.marca__nome {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.06em;
}

.marca__nome span {
    color: var(--vermelho);
}

.marca__descricao {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    margin-top: 0.25rem;
}

.menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.25rem);
}

.menu__link {
    position: relative;
    font-size: var(--t-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
    padding-block: 0.35rem;
    transition: color var(--transicao);
}

.menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--vermelho);
    transition: width var(--transicao);
}

.menu__link:hover,
.menu__link[aria-current="page"] {
    color: #fff;
}

.menu__link:hover::after,
.menu__link[aria-current="page"]::after {
    width: 100%;
}

.menu__link--destaque {
    background: var(--vermelho);
    color: #fff;
    padding: 0.7rem 1.15rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--raio);
}

.menu__link--destaque::after {
    display: none;
}

.menu__link--destaque:hover {
    background: var(--vermelho-escuro);
}

.menu-botao {
    display: none;
    width: 46px;
    height: 46px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--raio);
    cursor: pointer;
    position: relative;
}

.menu-botao span,
.menu-botao span::before,
.menu-botao span::after {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 1.5px;
    background: #fff;
    transform: translateX(-50%);
    transition: transform var(--transicao), opacity var(--transicao);
}

.menu-botao span {
    top: 50%;
    margin-top: -0.75px;
}

.menu-botao span::before {
    content: "";
    top: -6px;
    left: 0;
    transform: none;
}

.menu-botao span::after {
    content: "";
    top: 6px;
    left: 0;
    transform: none;
}

.menu-botao[aria-expanded="true"] span {
    background: transparent;
}

.menu-botao[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);
}

.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--ink);
    padding: 6.5rem var(--margem) 3rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--transicao-lenta), visibility var(--transicao-lenta);
    overflow-y: auto;
}

.menu-mobile[data-aberto="true"] {
    transform: translateY(0);
    visibility: visible;
}

.menu-mobile a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-block: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-mobile a:last-of-type {
    border-bottom: 0;
}

.menu-mobile__rodape {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--t-sm);
}

/* -------------------------------------------------------------- 6. Hero */
.hero {
    position: relative;
    min-height: min(100svh, 860px);
    display: grid;
    background: var(--ink);
    color: #fff;
    isolation: isolate;
}

.hero__slides {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    /* O conteúdo do slide fica centralizado na altura, independentemente do
       tamanho do título; os paddings dão folga do cabeçalho e dos controles. */
    display: grid;
    align-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 900ms ease;
}

.hero__slide[data-ativo="true"] {
    opacity: 1;
    visibility: visible;
}

.hero__midia {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 9s linear;
}

.hero__slide[data-ativo="true"] .hero__midia img {
    transform: scale(1);
}

.hero__midia--vazia {
    background:
        radial-gradient(120% 80% at 20% 10%, #26262c 0%, transparent 60%),
        linear-gradient(140deg, #131316 0%, #0a0a0b 60%, #17171b 100%);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 8, 9, var(--overlay, 0.62)) 0%, rgba(8, 8, 9, calc(var(--overlay, 0.62) * 0.7)) 45%, rgba(8, 8, 9, 0.18) 100%),
        linear-gradient(0deg, rgba(8, 8, 9, 0.62) 0%, transparent 42%);
}

/*
 * O conteúdo do hero usa a mesma grade do cabeçalho (.container), então o
 * eyebrow, o título, o texto e o CTA nascem exatamente na coluna do logo.
 * A medida de leitura fica nos filhos (max-width em ch), não no container —
 * é isso que mantém o alinhamento à esquerda em vez de centralizar o bloco.
 */
.hero__conteudo {
    position: relative;
    z-index: 2;
    padding-block: clamp(6rem, 12vh, 8rem) clamp(5rem, 10vh, 7rem);
}

/*
 * A tipografia fica na classe, não no elemento: só o primeiro slide usa <h1>
 * (um H1 por página) e os demais usam <h2>, mas todos precisam ter exatamente
 * a mesma aparência.
 */
.hero__titulo {
    margin: 0;
    font-size: var(--t-hero);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
    text-wrap: balance;
    max-width: 20ch;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

.hero__texto {
    margin-top: var(--gap-5);
    font-size: var(--t-lg);
    color: rgba(255, 255, 255, 0.86);
    max-width: 46ch;
    font-weight: 400;
}

.hero__acoes {
    margin-top: var(--gap-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
}

/* A mensagem de cada slide entra na mesma cadência vertical dos reveals da página. */
.hero__slide[data-ativo="true"] .hero__conteudo > .eyebrow {
    animation: hero-revelar 700ms 80ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__slide[data-ativo="true"] .hero__titulo {
    animation: hero-revelar 700ms 180ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__slide[data-ativo="true"] .hero__texto {
    animation: hero-revelar 700ms 390ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__slide[data-ativo="true"] .hero__acoes {
    animation: hero-revelar 700ms 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes hero-revelar {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Alinhamentos escolhidos slide a slide no painel. */
.hero--centro .hero__conteudo {
    text-align: center;
}

.hero--centro .hero__titulo,
.hero--centro .hero__texto {
    margin-inline: auto;
}

/* O eyebrow é inline-flex, então acompanha o text-align do container. */
.hero--centro .hero__acoes {
    justify-content: center;
}

.hero--direita .hero__conteudo {
    text-align: right;
}

.hero--direita .hero__titulo,
.hero--direita .hero__texto {
    margin-left: auto;
}

.hero--direita .hero__acoes {
    justify-content: flex-end;
}

.hero__controles {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4);
    padding: 0 var(--margem) 2.25rem;
}

.hero__pontos {
    display: flex;
    gap: 0.5rem;
}

.hero__ponto {
    width: 34px;
    height: 2px;
    background: rgba(255, 255, 255, 0.32);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--transicao);
}

.hero__ponto[aria-selected="true"] {
    background: var(--vermelho);
}

.hero__navegacao {
    display: flex;
    gap: 0.5rem;
}

.seta-circular {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(10, 10, 11, 0.25);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.seta-circular:hover {
    background: var(--vermelho);
    border-color: var(--vermelho);
}

.seta-circular[disabled] {
    opacity: 0.35;
    cursor: default;
}

.seta-circular--escura {
    border-color: var(--borda);
    background: transparent;
    color: var(--ink);
}

.seta-circular--escura:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ------------------------------------------------------------- 7. Seções */
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* Itens de grid podem herdar uma largura mínima baseada no conteúdo e
   alargar toda a página; zero mantém sliders e textos dentro da coluna. */
.split > *,
.faixa-clientes__interno > *,
.parceria > * {
    min-width: 0;
}

.split--simetrico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split__aside {
    position: sticky;
    top: 7rem;
}

/* Soluções */
.solucoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    border-top: 1px solid var(--borda);
    border-left: 1px solid var(--borda);
    background: var(--branco);
}

.solucao {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding: var(--gap-5) var(--gap-3) var(--gap-6);
    position: relative;
    background: var(--branco);
    transition: background var(--transicao), transform var(--transicao);
}

/* Na grade, os fios de 1px são compartilhados entre as células. */
.solucoes .solucao {
    border-right: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}

/* No carrossel (mais de três soluções), cada card tem o próprio contorno. */
.solucoes-slider .solucao {
    border: 1px solid var(--borda);
    padding-inline: var(--gap-4);
    height: 100%;
}

.solucao::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--vermelho);
    transition: width var(--transicao);
}

.solucao:hover {
    background: var(--papel);
}

.solucao:hover::after {
    width: 100%;
}

.solucao__icone {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    color: var(--ink);
}

.solucao__icone svg {
    width: 100%;
    height: 100%;
}

.solucao__nome {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.solucao__resumo {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--texto-suave);
}

/* Método MB */
.secao-metodo {
    overflow: hidden;
}

.secao-metodo__fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.secao-metodo__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.secao-metodo.secao--arcos::before {
    z-index: 2;
}

.secao-metodo > .container {
    z-index: 3;
}

.split--metodo {
    align-items: center;
}

.metodo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--gap-4);
    counter-reset: etapa;
}

.metodo::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28) 12%, rgba(255, 255, 255, 0.28) 88%, transparent);
}

.etapa {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-3);
}

.etapa__icone {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: border-color var(--transicao), background var(--transicao);
}

.etapa__icone svg {
    width: 22px;
    height: 22px;
}

.etapa:hover .etapa__icone {
    border-color: var(--vermelho);
    background: var(--vermelho);
}

.etapa__titulo {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.etapa__texto {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    max-width: 24ch;
}

.marca-dagua {
    position: absolute;
    right: -2%;
    bottom: -8%;
    font-size: clamp(9rem, 22vw, 22rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.03);
    line-height: 0.8;
    pointer-events: none;
    user-select: none;
}

/* Clientes */
.faixa-clientes {
    background: var(--ink);
    color: #fff;
    padding-block: clamp(2.5rem, 4vw, 4rem);
    /* Herda o contraste das seções escuras (texto de apoio legível no preto). */
    --texto-suave: rgba(255, 255, 255, 0.68);
    --borda: rgba(255, 255, 255, 0.14);
}

.faixa-clientes__interno {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.logo-cliente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    opacity: 1;
    transition: opacity var(--transicao);
}

.logo-cliente:hover {
    opacity: 1;
}

.logo-cliente img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

.logo-cliente__texto {
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

/* Parceria (bloco split com foto) */
.parceria {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--cinza-100);
}

.parceria__midia {
    position: relative;
    min-height: 420px;
    background:
        radial-gradient(90% 70% at 30% 20%, #2b2b31 0%, transparent 60%),
        linear-gradient(150deg, #17171a, #050506);
    overflow: hidden;
}

.parceria__midia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parceria__conteudo {
    padding: clamp(2.5rem, 5vw, 5rem);
    display: grid;
    gap: var(--gap-6);
    align-content: center;
}

.lista-servicos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-4);
}

.lista-servicos li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lista-servicos svg {
    width: 20px;
    height: 20px;
    color: var(--vermelho);
    flex: none;
    margin-top: 1px;
}

/* Diferenciais sobre foto */
.diferenciais {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.diferenciais__fundo {
    position: absolute;
    inset: 0;
}

.diferenciais__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.diferenciais__fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 9, 0.96) 0%, rgba(8, 8, 9, 0.82) 45%, rgba(8, 8, 9, 0.35) 100%);
}

.diferenciais__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.diferencial__titulo {
    color: var(--vermelho);
    font-size: var(--t-lg);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.diferencial__texto {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.55;
}

/* ------------------------------------------------------ 8. Cards e sliders */
.slider {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.slider__trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: var(--gap-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    width: 100%;
    min-width: 0;
}

.slider__trilho::-webkit-scrollbar {
    display: none;
}

.slider__trilho > * {
    scroll-snap-align: start;
    min-width: 0;
}

/*
 * As colunas usam um tamanho fixo (não minmax) de propósito: com minmax(0, …)
 * o grid encolhe as colunas para caber na largura visível e o carrossel deixa
 * de rolar quando há mais itens do que o número exibido por vez.
 */
.slider--2 .slider__trilho {
    grid-auto-columns: calc((100% - var(--gap-5)) / 2);
}

.slider--3 .slider__trilho {
    grid-auto-columns: calc((100% - 2 * var(--gap-5)) / 3);
}

.slider--4 .slider__trilho {
    grid-auto-columns: calc((100% - 3 * var(--gap-5)) / 4);
}

.slider--projetos-home .card-projeto {
    aspect-ratio: 4 / 5;
}

.projetos-solucao__titulo {
    max-width: none;
    margin-bottom: 2.5rem;
}

.projetos-solucao .card-projeto {
    aspect-ratio: 4 / 5;
}

.projetos-relacionados .card-projeto {
    aspect-ratio: 4 / 5;
}

.slider__controles {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--gap-5);
}

.card-projeto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink-2);
    color: #fff;
    border-radius: var(--raio);
}

.card-projeto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicao-lenta), filter var(--transicao);
}

.card-projeto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 6, 7, 0.9) 0%, rgba(6, 6, 7, 0.15) 55%, rgba(6, 6, 7, 0.05) 100%);
    transition: opacity var(--transicao);
}

.card-projeto:hover img {
    transform: scale(1.05);
}

.card-projeto__conteudo {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: var(--gap-5);
    display: grid;
    gap: 0.5rem;
}

.card-projeto__titulo {
    font-size: var(--t-lg);
    letter-spacing: -0.02em;
}

.card-projeto__meta {
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.card-projeto__acao {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.card-projeto__acao .seta {
    color: var(--vermelho);
    transition: transform var(--transicao);
}

.card-projeto:hover .card-projeto__acao .seta {
    transform: translateX(5px);
}

.card-artigo {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    color: var(--ink);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.secao--escura .card-artigo {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.card-artigo:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
}

.card-artigo__midia {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, #1d1d21, #0b0b0c);
    overflow: hidden;
}

.card-artigo__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicao-lenta);
}

.card-artigo:hover .card-artigo__midia img {
    transform: scale(1.04);
}

.card-artigo__conteudo {
    padding: var(--gap-5);
    display: grid;
    gap: 0.65rem;
    align-content: start;
    flex: 1;
}

.card-artigo__categoria {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vermelho);
}

.card-artigo__titulo {
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.card-artigo__resumo {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    line-height: 1.6;
}

.card-artigo__rodape {
    margin-top: auto;
    padding-top: var(--gap-4);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza-500);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.card-marca {
    display: grid;
    gap: var(--gap-3);
    padding: var(--gap-5);
    overflow: hidden;
    border: 1px solid var(--borda);
    background: var(--branco);
    border-radius: var(--raio);
    transition: border-color var(--transicao), transform var(--transicao);
}

.card-marca:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
}

.grade-cards--marcas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-marca__capa {
    display: block;
    aspect-ratio: 16 / 9;
    margin: calc(var(--gap-5) * -1) calc(var(--gap-5) * -1) var(--gap-2);
    overflow: hidden;
    background: var(--cinza-100);
}

.card-marca__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicao-lenta);
}

.card-marca:hover .card-marca__capa img {
    transform: scale(1.025);
}

.card-marca__logo {
    height: 42px;
    display: flex;
    align-items: center;
}

.card-marca__logo img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

.card-marca__nome {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.card-marca__texto {
    font-size: var(--t-sm);
    color: var(--texto-suave);
    line-height: 1.55;
}

.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--borda);
    border: 1px solid var(--borda);
}

.mosaico > * {
    background: var(--branco);
}

.mosaico__imagem {
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, #202024, #0d0d0f);
    overflow: hidden;
}

.mosaico__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------ 9. Formulários */
.formulario {
    display: grid;
    gap: var(--gap-4);
}

.campo {
    display: grid;
    gap: 0.4rem;
}

.campo__rotulo {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cinza-700);
}

.campo__obrigatorio {
    color: var(--vermelho);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--branco);
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio);
    font-size: var(--t-base);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.08);
}

.campo textarea {
    min-height: 150px;
    resize: vertical;
}

.campo--erro input,
.campo--erro select,
.campo--erro textarea {
    border-color: var(--vermelho);
}

.campo__erro {
    font-size: var(--t-sm);
    color: var(--vermelho);
}

.campo__ajuda {
    font-size: var(--t-sm);
    color: var(--cinza-500);
}

.linha-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap-4);
}

.honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.alerta {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--vermelho);
    background: var(--cinza-100);
    font-size: var(--t-sm);
}

.alerta--sucesso {
    border-color: #12805c;
    background: rgba(18, 128, 92, 0.08);
}

.alerta--erro {
    border-color: var(--vermelho);
    background: rgba(227, 6, 19, 0.07);
}

/* ------------------------------------------ 10. Rodapé, WhatsApp e cookies */
.rodape {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.72);
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.rodape__topo {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
    gap: var(--gap-6);
    align-items: start;
    padding-bottom: var(--gap-6);
}

.rodape__texto {
    font-size: var(--t-sm);
    max-width: 34ch;
}

.rodape__titulo {
    color: #fff;
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--gap-4);
}

.rodape__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    font-size: var(--t-sm);
}

.rodape__links a:hover {
    color: #fff;
}

.redes {
    display: flex;
    gap: 0.6rem;
    margin-top: var(--gap-4);
}

.rede {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    transition: background var(--transicao), border-color var(--transicao);
}

.rede:hover {
    background: var(--vermelho);
    border-color: var(--vermelho);
}

.rede svg {
    width: 18px;
    height: 18px;
}

.rodape__base {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--gap-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
    justify-content: space-between;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.rodape__creditos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rodape__logo-namaste {
    display: inline-block;
    width: auto;
    height: 22px;
    vertical-align: middle;
    opacity: 0.85;
    transition: opacity var(--transicao);
}

.rodape__creditos a:hover .rodape__logo-namaste {
    opacity: 1;
}

.whatsapp-flutuante {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: #1faa53;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 30px -12px rgba(31, 170, 83, 0.9);
    transition: transform var(--transicao);
}

.whatsapp-flutuante:hover {
    transform: scale(1.06);
}

.whatsapp-flutuante svg {
    width: 28px;
    height: 28px;
}

.voltar-topo {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(5.75rem, 8vw, 6.5rem);
    z-index: 89;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 12px 30px -14px rgba(10, 10, 11, 0.8);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao), background var(--transicao);
}

.voltar-topo[data-visivel="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.voltar-topo:hover,
.voltar-topo:focus-visible {
    background: var(--vermelho);
}

.voltar-topo:focus-visible {
    outline: 3px solid rgba(227, 6, 19, 0.3);
    outline-offset: 3px;
}

.voltar-topo svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cookies {
    position: fixed;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 95;
    max-width: 420px;
    background: var(--ink);
    color: rgba(255, 255, 255, 0.82);
    padding: var(--gap-5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--t-sm);
    display: grid;
    gap: var(--gap-4);
    transform: translateY(140%);
    transition: transform var(--transicao-lenta);
}

.cookies[data-visivel="true"] {
    transform: translateY(0);
}

.cookies__acoes {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cookies .btn {
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
}

/* -------------------------------------------- 11. Páginas internas/Revista */
.pagina-topo {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: clamp(8rem, 16vh, 12rem) clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}

.pagina-topo__fundo {
    position: absolute;
    inset: 0;
}

.pagina-topo__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}

.pagina-topo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 9, 0.9), rgba(8, 8, 9, 0.55));
}

.pagina-topo > .container {
    position: relative;
    z-index: 2;
}

.pagina-topo__titulo {
    font-size: clamp(2.25rem, 2.75vw, 3rem);
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
}

.pagina-topo__resumo {
    margin-top: var(--gap-4);
    max-width: none;
    color: rgba(255, 255, 255, 0.78);
}

.pagina-topo--artigo .pagina-topo__titulo,
.pagina-topo--artigo .pagina-topo__resumo {
    max-width: none;
    white-space: normal;
    text-wrap: wrap;
}

.migalhas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--gap-5);
    list-style: none;
    padding: 0;
}

.migalhas li + li::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--vermelho);
}

.migalhas a:hover {
    color: #fff;
}

.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-5);
}

.grade-cards--2 {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--gap-6);
}

.filtro {
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.filtro:hover,
.filtro[aria-current="true"] {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.paginacao {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: var(--gap-7);
    flex-wrap: wrap;
}

.paginacao a,
.paginacao span {
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--borda);
    font-size: var(--t-sm);
    font-weight: 600;
}

.paginacao [aria-current="page"] {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.artigo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.artigo__corpo {
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 72ch;
}

.artigo__corpo h2 {
    font-size: var(--t-xl);
    margin: 2.25em 0 0.6em;
    letter-spacing: -0.03em;
}

.artigo__corpo h3 {
    font-size: var(--t-lg);
    margin: 1.8em 0 0.5em;
}

.artigo__corpo h4 {
    font-size: 1.05rem;
    margin: 1.6em 0 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.artigo__corpo ul,
.artigo__corpo ol {
    padding-left: 1.25rem;
    margin: 0 0 1.4em;
    display: grid;
    gap: 0.5rem;
}

.artigo__corpo a:not(.btn) {
    color: var(--vermelho);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.artigo__corpo blockquote {
    margin: 2em 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--vermelho);
    font-family: var(--fonte-editorial);
    font-size: 1.5rem;
    line-height: 1.35;
}

.artigo__corpo figure {
    margin: 2em 0;
}

.artigo__corpo figcaption {
    font-size: var(--t-sm);
    color: var(--cinza-500);
    margin-top: 0.6rem;
}

.artigo__corpo table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    margin: 2em 0;
}

.artigo__corpo th,
.artigo__corpo td {
    border: 1px solid var(--borda);
    padding: 0.75rem 1rem;
    text-align: left;
}

.artigo__corpo th {
    background: var(--cinza-100);
    font-weight: 600;
}

.bloco-destaque {
    margin: 2.5em 0;
    padding: var(--gap-5);
    background: var(--cinza-100);
    border-left: 3px solid var(--vermelho);
}

.bloco-destaque h3 {
    font-size: var(--t-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vermelho);
    margin-bottom: 0.75rem;
}

.bloco-destaque ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
    font-size: var(--t-base);
}

.faq {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--borda);
    margin-top: var(--gap-7);
}

.faq__item {
    border-bottom: 1px solid var(--borda);
}

.faq__pergunta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: var(--t-base);
    font-weight: 600;
    cursor: pointer;
}

.faq__pergunta::after {
    content: "+";
    font-size: 1.35rem;
    color: var(--vermelho);
    transition: transform var(--transicao);
}

.faq__pergunta[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.faq__resposta {
    padding-bottom: 1.25rem;
    color: var(--texto-suave);
    max-width: 70ch;
}

.autor-card {
    display: flex;
    gap: var(--gap-4);
    padding: var(--gap-5);
    border: 1px solid var(--borda);
    background: var(--papel);
    align-items: flex-start;
}

.autor-card__foto {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cinza-200);
    flex: none;
}

.autor-card__nome {
    font-size: 1.1rem;
    font-weight: 700;
}

.autor-card__cargo {
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vermelho);
    margin-bottom: 0.5rem;
}

.autor-card__bio {
    font-size: var(--t-sm);
    color: var(--texto-suave);
}

.aside-artigo {
    position: sticky;
    top: 7rem;
    display: grid;
    gap: var(--gap-6);
    font-size: var(--t-sm);
}

.aside-bloco__titulo {
    font-size: var(--t-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cinza-500);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--borda);
    margin-bottom: var(--gap-4);
}

.lista-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.lista-links a {
    font-weight: 500;
    line-height: 1.35;
    transition: color var(--transicao);
}

.lista-links a:hover {
    color: var(--vermelho);
}

.meta-artigo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-3);
}

.galeria img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raio);
}

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gap-5);
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding-block: var(--gap-5);
}

.ficha__rotulo {
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cinza-500);
    margin-bottom: 0.35rem;
}

.ficha__valor {
    font-size: var(--t-base);
    font-weight: 600;
}

.vazio {
    padding: var(--gap-7) var(--gap-5);
    text-align: center;
    border: 1px dashed var(--borda);
    color: var(--cinza-500);
}

/* ------------------------------------------------- 12. Movimento/acessível */
[data-revelar] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--atraso, 0ms);
}

[data-revelar="visivel"] {
    opacity: 1;
    transform: none;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    [data-revelar] {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------ 13. Responsivo */
@media (max-width: 1180px) {
    .split {
        grid-template-columns: 1fr;
    }

    .split--metodo {
        align-items: start;
    }

    .split__aside {
        position: static;
    }

    .artigo {
        grid-template-columns: 1fr;
    }

    .aside-artigo {
        position: static;
    }

    .slider--4 .slider__trilho {
        grid-auto-columns: calc((100% - 2 * var(--gap-5)) / 3);
    }
}

@media (max-width: 900px) {
    .pagina-topo__titulo {
        font-size: var(--t-3xl);
        white-space: normal;
        text-wrap: balance;
    }

    .menu {
        display: none;
    }

    .menu-botao {
        display: block;
    }

    .faixa-clientes__interno,
    .parceria {
        grid-template-columns: 1fr;
    }

    .parceria__midia {
        min-height: 260px;
    }

    .rodape__topo {
        grid-template-columns: 1fr;
        gap: var(--gap-6);
    }

    .metodo::before {
        display: none;
    }

    .metodo {
        grid-template-columns: 1fr;
        gap: var(--gap-6);
        text-align: left;
    }

    .etapa {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: var(--gap-4);
    }

    .etapa__texto {
        max-width: none;
    }

    .slider--2 .slider__trilho,
    .slider--3 .slider__trilho,
    .slider--4 .slider__trilho {
        grid-auto-columns: 82%;
    }
}

@media (max-width: 640px) {
    .container {
        min-width: 0;
    }

    .titulo-secao,
    .subtitulo,
    .split__aside,
    .link-seta {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .titulo-secao {
        font-size: clamp(1.875rem, 8.5vw, 2.35rem);
        text-wrap: balance;
    }

    .slider__trilho {
        max-width: 100%;
    }

    .slider--2 .slider__trilho,
    .slider--3 .slider__trilho,
    .slider--4 .slider__trilho {
        grid-auto-columns: min(86%, calc(100vw - 2 * var(--margem)));
    }

    .solucao,
    .card-projeto,
    .card-artigo,
    .card-marca {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .hero {
        min-height: 92svh;
    }

    .hero__titulo,
    .hero__texto {
        max-width: none;
    }

    .hero__acoes .btn {
        width: 100%;
        justify-content: space-between;
    }

    .hero__controles {
        padding-bottom: 1.5rem;
    }

    .solucoes {
        grid-template-columns: repeat(2, 1fr);
    }

    .grade-cards,
    .grade-cards--2 {
        grid-template-columns: 1fr;
    }

    .logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gap-5);
    }

    .marca__logo {
        height: 38px;
    }

    .cookies {
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }
}