/* Vitor Otero Advocacia: estilo do site (home prancha B).
   Cores amostradas de _maquete/home-v3/prancha-B-*.png. Celular primeiro. */

/* Fontes locais: subconjunto latin do Google Fonts (licença e origem em /assets/fonts/OFL.txt).
   Newsreader variável com eixo opsz completo e peso 400-500 (preload no <head>: é a do título da abertura);
   Figtree variável, sem preload (pré-carregar as duas atrasava o 1º paint em ~100 ms no 4G lento). */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Reservas com as medidas da fonte final: enquanto a fonte baixa, o texto já ocupa o mesmo espaço
   e a troca não empurra a página (CLS). size-adjust medido com o texto da home; ascent/descent são os
   da fonte final divididos pelo size-adjust. */
@font-face {
  font-family: "Newsreader Reserva";
  src: local("Georgia");
  size-adjust: 93.2%;
  ascent-override: 78.86%;
  descent-override: 28.43%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Reserva";
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.5%;
  ascent-override: 95.48%;
  descent-override: 25.13%;
  line-gap-override: 0%;
}
/* Android não tem Georgia nem Arial: as mesmas reservas, medidas para as fontes do sistema dele
   (Noto Serif e Roboto). Onde o nome local não existir, o navegador só pula a regra. */
@font-face {
  font-family: "Newsreader Reserva Android";
  src: local("Noto Serif"), local("Noto Serif Regular"), local("NotoSerif-Regular"), local("NotoSerif");
  size-adjust: 85.5%;
  ascent-override: 85.96%;
  descent-override: 30.99%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Reserva Android";
  src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 100.5%;
  ascent-override: 94.53%;
  descent-override: 24.88%;
  line-gap-override: 0%;
}

:root {
  /* Fundos */
  --marinho-topo: #031121;      /* topo da abertura */
  --marinho-fundo: #01060e;     /* base da abertura */
  --marinho-atuacao: #030f1f;   /* Onde eu atuo */
  --marinho-duvidas: #021124;   /* Dúvidas (mais azulado) */
  --preto: #080807;             /* Onde o risco costuma estar (preto quente) */
  --preto-rodape: #050506;
  --marfim: #f3ece1;
  --marfim-luz: #f8f4ec;
  --foto: #c5bdb1;

  /* Dourados */
  --ouro: #d6ad66;              /* ícones e filetes no escuro */
  --ouro-claro: #f2d9a1;        /* título da abertura */
  --ouro-titulo: #e0c17d;       /* títulos de item no escuro */
  --ouro-texto: #8a6422;        /* etiqueta e links no claro (contraste AA) */
  --ouro-filete: #bd8f45;       /* filetes e ícones no claro */
  --gradiente-ouro: linear-gradient(180deg, #f6dc92 0%, #e7c473 46%, #cc9d4b 76%, #b5883a 100%);

  /* Texto */
  --creme: #f1e6cf;             /* títulos no escuro */
  --texto-escuro: #9ca5b0;      /* corpo no escuro */
  --texto-faq: #c8d0d8;
  --marinho-texto: #0b1022;     /* títulos no claro */
  --texto-corpo: #57544f;       /* corpo no claro */

  /* Linhas */
  --linha-escura: rgba(214, 173, 102, 0.26);
  --linha-clara: rgba(189, 143, 69, 0.34);
  --linha-faq: rgba(200, 212, 226, 0.15);

  /* Tipografia */
  --serif: "Newsreader", "Newsreader Reserva", "Newsreader Reserva Android", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", "Figtree Reserva", "Figtree Reserva Android", "Segoe UI", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 1.25rem + 2.2vw, 3.1rem);
  --fs-h3: clamp(1.18rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-corpo: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --fs-pequeno: clamp(.9375rem, .9rem + .15vw, 1rem);

  /* Espaço */
  --largura: 1240px;
  --gutter: clamp(1.5rem, 0.9rem + 3.2vw, 3rem);
  --faixa: clamp(80px, 3.5rem + 3.6vw, 112px);               /* degradê entre seções */
  --mascara-faixa: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .94) 15%, rgb(0 0 0 / .76) 32%, rgb(0 0 0 / .53) 48%, rgb(0 0 0 / .3) 64%, rgb(0 0 0 / .1) 80%, rgb(0 0 0 / .02) 92%, transparent 100%);
  --respiro-topo: calc(var(--faixa) + clamp(2.25rem, 1rem + 2.8vw, 3.5rem));
  --respiro-base: clamp(4rem, 2.5rem + 3.2vw, 6rem);

  /* Textura (grão sutil em SVG, sem foto) */
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 0 0 0 .093 -.034'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .21 -.077'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-corpo);
  line-height: 1.65;
  color: var(--texto-corpo);
  background: var(--marinho-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* iOS 15 e anteriores não conhecem clip */
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }
/* no marfim o ouro some (1,8:1); o marinho passa de 3:1 no marfim e no botão dourado */
.secao--clara :focus-visible { outline-color: var(--marinho-texto); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 50;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--marfim); color: var(--marinho-texto); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 1rem; }

.conteudo { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Seções: fundo próprio + grão + degradê de entrada.
   O degradê repete a cor E o grão da seção de cima e some numa curva suave: a emenda não aparece.
   A seção de cima é declarada no HTML, não pela ordem da página: .secao--apos-<cor>, onde <cor> é o token
   da base da seção de cima (ver a lista logo abaixo). Sem modificador, sem degradê (ex.: a abertura). */
.secao {
  position: relative;
  isolation: isolate;
  padding-block: var(--respiro-topo) var(--respiro-base);
  --grao: var(--grao-claro);
}
.secao::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: var(--faixa);
  z-index: -1; pointer-events: none;
  background: var(--grao-anterior) 0 0 / 220px 220px, var(--anterior);
  -webkit-mask-image: var(--mascara-faixa);
  mask-image: var(--mascara-faixa);
}
.secao::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -2; pointer-events: none;
  background-image: var(--grao);
  background-size: 220px 220px;
}
.secao--clara { --grao: var(--grao-escuro); color: var(--texto-corpo); }
/* Passagens: cor da base da seção de cima + o grão dela (claro sobre fundo escuro, escuro sobre marfim) */
.secao--apos-marinho-fundo   { --anterior: var(--marinho-fundo);   --grao-anterior: var(--grao-claro); }  /* abertura */
.secao--apos-marinho-atuacao { --anterior: var(--marinho-atuacao); --grao-anterior: var(--grao-claro); }
.secao--apos-marinho-duvidas { --anterior: var(--marinho-duvidas); --grao-anterior: var(--grao-claro); }
.secao--apos-preto           { --anterior: var(--preto);           --grao-anterior: var(--grao-claro); }
.secao--apos-marfim          { --anterior: var(--marfim);          --grao-anterior: var(--grao-escuro); }

/* Etiqueta de seção: filete + texto (nunca pílula) */
.etiqueta {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro);
}
.etiqueta::before { content: ""; flex: none; width: 2rem; height: 1px; background: currentColor; }
.etiqueta--simples::before { display: none; }
.secao--clara .etiqueta { color: var(--ouro-texto); }
.secao--clara .etiqueta::before { background: var(--ouro-filete); }

.filete { display: block; width: 2rem; height: 1px; background: var(--ouro); }
.secao--clara .filete { background: var(--ouro-filete); }

.titulo {
  margin-top: 1.25rem;
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2);
  line-height: 1.1; letter-spacing: -.01em;
  color: var(--creme);
}
.secao--clara .titulo { color: var(--marinho-texto); }
.so-desktop { display: none; }

.preencher { color: #9a6b1f; }
.secao--escura .preencher, .secao--preta .preencher, .rodape .preencher { color: var(--ouro-titulo); }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.375rem; padding: .85rem 2.1rem;
  border-radius: 999px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.botao .icone { width: 1.3rem; height: 1.3rem; stroke-width: 1.7; }
.botao--ouro {
  color: #16120a;
  background: var(--gradiente-ouro);
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, .6), inset 0 -1px 0 rgba(120, 84, 26, .35), 0 12px 30px -14px rgba(214, 165, 82, .6);
}
.botao--ouro:hover { filter: brightness(1.05) saturate(1.05); }
.botao--contorno {
  min-height: 2.5rem; padding: .45rem 1rem; gap: .5rem;
  font-size: .75rem; font-weight: 500;
  color: #ecd9b0;
  border: 1px solid rgba(214, 173, 102, .78);
  background: rgba(2, 10, 20, .3);
}
.botao--contorno .icone { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }
.botao--contorno:hover { background: rgba(214, 173, 102, .12); }

/* Logo (placeholder até a marca original) */
.logo { flex: none; display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; white-space: nowrap; }
.logo__mono { display: flex; font-family: var(--serif); font-weight: 500; font-size: 2.15rem; line-height: .85; letter-spacing: -.1em; padding-right: .1em; }
.logo__v { color: var(--ouro); background: var(--gradiente-ouro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo__o { color: #f3e8d2; }
.logo__nome { margin-top: .35rem; font-family: var(--serif); font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ouro-titulo); }
.logo__tipo { margin-top: .3rem; padding-left: .4em; font-size: .4rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: #b5975f; }

/* Topo */
.topo { position: absolute; inset: 0 0 auto; z-index: 20; }
.topo__barra { position: relative; display: flex; align-items: center; gap: .75rem; padding-block: 1.1rem; }
.topo__cta { margin-left: auto; }
.menu-botao {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  padding: 0; border: 0; border-radius: 50%; background: none; color: #e9dcc2; cursor: pointer;
}
.menu-botao .icone { width: 1.45rem; height: 1.45rem; stroke-width: 1.4; }
.menu-botao .icone--fechar, .topo--aberto .menu-botao .icone--abrir { display: none; }
.topo--aberto .menu-botao .icone--fechar { display: block; }
.menu { display: none; }
@media (max-width: 959.98px) {
  /* só no celular: no computador o menu é a linha do topo (o JS também fecha ao virar 960px+) */
  .topo--aberto .menu {
    display: block;
    position: absolute; top: calc(100% - .35rem); left: var(--gutter); right: var(--gutter);
    padding: .4rem 1.25rem;
    background: #040b16;
    border: 1px solid rgba(214, 173, 102, .22); border-radius: 18px;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .8);
  }
}
.menu__lista li + li { border-top: 1px solid rgba(214, 173, 102, .14); }
.menu__lista a { display: block; padding: .95rem .2rem; font-family: var(--serif); font-size: 1.3rem; color: var(--creme); text-decoration: none; }

/* 1. Abertura */
.abertura {
  overflow: hidden; /* iOS 15 e anteriores: sem isto a coluna (right negativo) cria rolagem lateral */
  overflow: clip;
  padding-block: clamp(7.25rem, 4.5rem + 8vw, 12rem) clamp(4.5rem, 3.5rem + 2.2vw, 5.5rem);
  background:
    radial-gradient(40% 32% at 42% 0%, rgba(30, 64, 116, .42), transparent 72%),
    radial-gradient(24% 16% at 74% 50%, rgba(214, 164, 92, .1), transparent 70%),
    linear-gradient(180deg, var(--marinho-topo) 0%, #020a17 38%, var(--marinho-fundo) 82%);
}
.abertura::before {
  /* feixe de luz dourada, como na prancha */
  content: ""; inset: auto; left: 76%; top: 35%; width: min(80vw, 300px); height: 44px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 198, 122, .4), rgba(226, 176, 100, .13) 46%, transparent);
  -webkit-mask-image: none; mask-image: none;
  transform: translate(-50%, -50%) rotate(-36deg);
  filter: blur(4px);
}
.abertura__coluna {
  position: absolute; z-index: -2;
  top: 4rem; right: -5.9rem;
  width: auto; max-width: none; height: 25rem;
  filter: brightness(.7);
  -webkit-mask-image: linear-gradient(to right, transparent 36%, #000 62%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 36%, #000 62%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 97%);
  mask-composite: intersect;
}
.abertura__texto { position: relative; max-width: 40rem; }
.abertura__titulo {
  margin-top: 1.1rem; max-width: 8.95em;
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-h1);
  line-height: 1.06; letter-spacing: -.012em;
  color: var(--ouro-claro);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .abertura__titulo span {
    /* folga medida: a tinta de acento passa da caixa de 1em (gotcha de background-clip:text) */
    padding: .2em 0 .08em;
    background: linear-gradient(180deg, #f8e8bf 24%, #e2c07c 92%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}
.abertura__apoio { margin-top: 1.25rem; max-width: 30rem; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; color: #b3bac3; }
.abertura .filete { margin-top: 2rem; }
.abertura__nome { margin-top: 1.2rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.2; color: #f3ead8; }
.abertura__credencial { margin-top: .35rem; font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); line-height: 1.5; color: #98a2ad; }
.abertura__acoes { display: inline-flex; flex-direction: column; align-items: center; gap: 1.4rem; margin-top: 2.1rem; }
.abertura__mais {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .8125rem; color: #aab2bc; text-decoration: none;
}
.abertura__mais .icone { width: 1.25rem; height: 1.25rem; color: var(--ouro); }
.abertura__mais:hover span { color: var(--creme); }

/* 2. Quem sou */
.quem {
  background: radial-gradient(62% 40% at 50% 44%, var(--marfim-luz), transparent 72%), var(--marfim);
}
.quem__titulo { max-width: 9.6em; }
.quem__corpo { display: flow-root; margin-top: clamp(2rem, 1.6rem + 2vw, 3.25rem); }
.quem__foto {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  background: var(--foto);
}
.quem__corpo .quem__foto { float: left; width: 42%; margin: .35rem 1.25rem .75rem 0; }
.quem__texto p { line-height: 1.7; }
.quem__texto p + p { margin-top: 1rem; }
.quem__dados {
  padding-top: 1rem; border-top: 1px solid var(--linha-clara);
  font-size: .8125rem; line-height: 1.6; letter-spacing: .01em; color: #6f6a62;
}
.quem__texto .quem__dados { margin-top: 1.5rem; }

/* Listas de itens (princípios, áreas, riscos): em linha no celular (ícone à esquerda, divisória em cima).
   Em colunas (ícone em cima, texto centrado, divisória ao lado) o desenho é um só, em "Linha → colunas";
   .itens--2 vira 2 colunas a partir de 720px, .itens--3 vira 3 a partir de 900px, .itens--4 vira 4 a partir
   de 1080px e .itens--curtos (itens de uma frase) adianta a virada para 640px. Ajustes de cada lista nas
   variáveis abaixo. */
.itens {
  margin-top: clamp(2.5rem, 2rem + 2.4vw, 4.25rem);
  --linha-item: var(--linha-escura);
  --item-respiro: clamp(1.25rem, 2.6vw, 2.75rem); /* respiro lateral da coluna */
  --icone-linha: 3.5rem;                                 /* ícone à esquerda, itens em linha */
  --icone-coluna: clamp(4.5rem, 3.3rem + 2.4vw, 5.5rem); /* ícone em cima, itens em colunas */
  --icone-respiro: .8rem;
  --texto-coluna: 55ch;
}
.itens--2 { --colunas: 2; }
.itens--3 { --colunas: 3; }
.itens--4 { --colunas: 4; }
.secao--clara .itens { --linha-item: var(--linha-clara); }
.item { display: grid; grid-template-columns: var(--icone-linha) minmax(0, 1fr); column-gap: 1.1rem; padding-block: 1.6rem; }
.item + .item { border-top: 1px solid var(--linha-item); }
.item:first-child { padding-top: 0; }
.item:last-child { padding-bottom: 0; }
/* Ícones de conteúdo: objetos 3D (WebP com alfa, 256 px, laca preta e dourado; servem no marfim, no marinho
   e no preto). O objeto ocupa ~90% do quadro, então o topo dele já alinha com o do título. */
.item__icone { grid-row: 1 / span 3; width: var(--icone-linha); height: var(--icone-linha); }
.item__icone--3d { object-fit: contain; }
.item__titulo { grid-column: 2; font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; color: var(--ouro-titulo); }
/* 55ch ≈ 75 caracteres por linha na Figtree (o ch é a largura do zero, maior que a letra média);
   só pesa entre 640 e 899px, quando os itens ainda estão em linha e a linha passava de 100 caracteres */
.item__texto { grid-column: 2; max-width: 55ch; margin-top: .45rem; font-size: var(--fs-pequeno); line-height: 1.65; color: var(--texto-escuro); }
.secao--clara .item__titulo { color: var(--marinho-texto); }
.secao--clara .item__texto { color: var(--texto-corpo); }
.quem__principios {
  margin-top: clamp(3.25rem, 2.6rem + 3vw, 5.5rem);
  --item-respiro: clamp(1rem, 2.5vw, 2.5rem); --texto-coluna: 24ch;
}

.link-seta {
  grid-column: 2; justify-self: start;
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ouro); text-decoration: none;
}
.link-seta .icone { width: 1.05rem; height: 1.05rem; stroke-width: 1.7; }
.link-seta:hover { color: var(--ouro-claro); }

/* 3. Onde eu atuo */
.atuacao {
  background:
    radial-gradient(56% 34% at 50% 24%, rgba(38, 72, 128, .42), transparent 72%),
    var(--marinho-atuacao);
}
.atuacao__areas { --item-respiro: clamp(1.5rem, 4vw, 4rem); --texto-coluna: 40ch; }

/* 4. Onde o risco costuma estar */
.riscos {
  background:
    radial-gradient(40% 28% at 8% 70%, rgba(204, 152, 76, .26), transparent 72%),
    radial-gradient(32% 22% at 94% 30%, rgba(176, 134, 76, .14), transparent 70%),
    var(--preto);
}
.riscos__titulo { max-width: 12.5em; }
.riscos__fecho {
  display: flex; flex-direction: column; gap: 1.1rem;
  max-width: 30em; margin-top: clamp(3rem, 2.2rem + 3vw, 5rem);
  font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.35;
  color: var(--creme);
}

/* 5. Como atuo */
.como {
  background: radial-gradient(60% 40% at 40% 46%, var(--marfim-luz), transparent 72%), var(--marfim);
}
.como__titulo { max-width: 10.2em; }
.passos {
  --gap-passos: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  display: grid; gap: var(--gap-passos);
  max-width: 46rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}
.passo { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.passo:not(:last-child)::before {
  content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: calc(-1 * var(--gap-passos));
  width: 1px; transform: translateX(-.5px);
  background: rgba(189, 143, 69, .7);
}
.passo__numero {
  grid-row: 1 / span 2;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #f4d98e 0%, #dcb466 48%, #b3842f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 218, .65), 0 8px 18px -10px rgba(140, 98, 30, .7);
  font-size: 1.05rem; font-weight: 600; color: #15110a;
}
.passo__titulo { padding-top: .5rem; font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; color: var(--marinho-texto); }
.passo__texto { margin-top: .3rem; line-height: 1.6; color: var(--texto-corpo); }

/* 6. Dúvidas */
.duvidas {
  background: radial-gradient(46% 30% at 72% 22%, rgba(36, 74, 130, .34), transparent 72%), var(--marinho-duvidas);
}
.duvidas__titulo { max-width: 12em; }
.faq { margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); border-top: 1px solid var(--linha-faq); }
.faq__item { border-bottom: 1px solid var(--linha-faq); }
.faq__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem .15rem 1.3rem .75rem;
  list-style: none; cursor: pointer;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); font-weight: 500; line-height: 1.45;
  color: var(--texto-faq);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: #fff; }
.faq__icone { width: 1.35rem; height: 1.35rem; color: var(--ouro); }
.faq__item[open] .faq__icone { transform: rotate(45deg); }
.faq__resposta { max-width: 64ch; padding: 0 2.75rem 1.6rem .75rem; font-size: var(--fs-pequeno); line-height: 1.7; color: var(--texto-escuro); }

/* 7. Contato */
.contato {
  background: radial-gradient(60% 42% at 30% 46%, var(--marfim-luz), transparent 72%), var(--marfim);
}
.contato__grade { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4rem); }
.contato__chamada .titulo { max-width: 8.8em; }
.contato__apoio { max-width: 30rem; margin-top: 1.1rem; color: var(--texto-corpo); }
.contato__chamada .botao { margin-top: 2rem; }
.contato__canais { display: grid; gap: 1.6rem; align-content: center; }
.canal { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; }
.canal__icone { grid-row: 1 / span 2; width: 1.55rem; height: 1.55rem; margin-top: .15rem; color: var(--ouro-filete); stroke-width: 1.5; }
.canal__rotulo { font-size: var(--fs-pequeno); font-weight: 600; line-height: 1.4; color: var(--marinho-texto); }
.canal__valor { font-size: var(--fs-pequeno); line-height: 1.5; color: #4a4946; overflow-wrap: anywhere; }
.canal__valor a { text-decoration-color: rgba(189, 143, 69, .55); text-underline-offset: .22em; }
.canal__valor a:hover { color: var(--marinho-texto); }

/* 8. Rodapé */
.rodape {
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
  background:
    radial-gradient(30% 34% at 96% 34%, rgba(150, 118, 70, .1), transparent 70%),
    radial-gradient(28% 40% at 4% 92%, rgba(150, 118, 70, .08), transparent 70%),
    var(--preto-rodape);
}
.rodape__conteudo { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.logo--grande .logo__mono { font-size: 3.25rem; }
.logo--grande .logo__nome { font-size: 1rem; }
.logo--grande .logo__tipo { font-size: .55rem; }
.rodape__linha { font-size: .75rem; line-height: 1.8; letter-spacing: .16em; text-transform: uppercase; color: #8f8d88; }
.rodape__linha .preencher { text-transform: none; letter-spacing: .04em; }
.rodape__menu { margin-top: .6rem; }
.rodape__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.6rem; }
.rodape__menu li { display: flex; align-items: center; }
.rodape__menu a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #a19f9a; text-decoration: none; }
.rodape__menu a:hover { color: var(--ouro-titulo); }

/* ---------- Landings (/compliance/, /contratos/) ----------
   Mesmas classes da home (abertura, itens, como, duvidas, rodapé); aqui só o que a landing pede a mais.
   Fundos: abertura marinho → marfim → preto → marfim (como funciona) → marinho (dúvidas) → marfim (chamada)
   → rodapé preto. Cabeçalho de seção: filete + título (o título já nomeia a seção, sem etiqueta). */
.abertura--landing .filete { margin: 0 0 1.1rem; }
.abertura--landing .abertura__titulo { max-width: 10.5em; text-wrap: balance; }
.abertura--landing .abertura__apoio { max-width: 34rem; }
.abertura--landing .abertura__acoes { margin-top: 2.25rem; }
/* feixe dourado: na compliance à direita do fim do título (como na prancha); na contratos sobe para o
   canto onde a prancha tinha a folha do contrato */
.abertura--landing::before { top: 50%; left: 82%; }
.abertura--contratos::before { top: 36%; }

/* Itens só com frase, sem título (para quem é, o que inclui, sinais): o ícone acompanha o meio do texto
   e a frase tem a cor de texto principal, não a de apoio. */
.itens--frases { --texto-coluna: 26ch; }
.itens--frases .item { align-items: center; }
.itens--frases .item__icone { grid-row: auto; }
.itens--frases .item__texto { margin-top: 0; font-size: var(--fs-corpo); line-height: 1.55; color: var(--texto-faq); }
.secao--clara .itens--frases .item__texto { color: var(--marinho-texto); }

/* [PREENCHER] logo abaixo do título da seção */
.pendencia { margin-top: .9rem; font-size: .8125rem; line-height: 1.5; }

.publico, .sinais {
  background: radial-gradient(62% 40% at 50% 44%, var(--marfim-luz), transparent 72%), var(--marfim);
}
.sinais__titulo { max-width: 13em; }
.inclui, .recebe {
  background:
    radial-gradient(40% 28% at 8% 74%, rgba(204, 152, 76, .22), transparent 72%),
    radial-gradient(32% 22% at 94% 28%, rgba(176, 134, 76, .13), transparent 70%),
    var(--preto);
}
.chamada {
  background: radial-gradient(60% 42% at 40% 50%, var(--marfim-luz), transparent 72%), var(--marfim);
}
.chamada .titulo { max-width: 11em; text-wrap: balance; }
.chamada .botao { margin-top: 2rem; }

/* Celular estreito (360px): cabe logo + botão + menu na mesma linha */
@media (max-width: 379px) {
  .topo__barra { gap: .5rem; }
  .topo__cta { gap: .4rem; padding-inline: .8rem; }
  /* botão de texto longo ("Enviar meu contrato para análise"): menos respiro e, se ainda não couber
     (320px), o texto quebra em 2 linhas dentro do botão em vez de vazar da tela */
  .botao--longo { padding-inline: 1.25rem; white-space: normal; text-wrap: balance; text-align: center; }
}
/* 320px: o botão do topo vira só o ícone (o nome acessível continua no texto oculto) */
@media (max-width: 349px) {
  .topo__cta { width: 2.5rem; padding: 0; }
  .topo__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .abertura__coluna { right: -7.4rem; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .rodape__menu ul { gap: .6rem 0; }
  .rodape__menu li + li::before { content: ""; width: 1px; height: .9rem; margin-inline: 1.1rem; background: rgba(214, 173, 102, .55); }
}

/* Linha → colunas: o mesmo desenho em cada ponto de virada (CSS puro não divide um bloco entre media queries).
   Lista nova vira coluna só com as classes (.itens--2/.itens--3/.itens--4, .itens--curtos), sem CSS novo. */
@media (min-width: 640px) {
  .itens--curtos { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
  .itens--curtos > .item { display: flex; flex-direction: column; align-items: center; padding: .25rem var(--item-respiro); text-align: center; }
  .itens--curtos > .item + .item { border-top: 0; border-left: 1px solid var(--linha-item); }
  .itens--curtos .item__icone { margin: 0 0 var(--icone-respiro); width: var(--icone-coluna); height: var(--icone-coluna); }
  .itens--curtos .item__texto { max-width: var(--texto-coluna); }
}
@media (min-width: 720px) {
  .itens--2 { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
  .itens--2 > .item { display: flex; flex-direction: column; align-items: center; padding: .25rem var(--item-respiro); text-align: center; }
  .itens--2 > .item + .item { border-top: 0; border-left: 1px solid var(--linha-item); }
  .itens--2 .item__icone { margin: 0 0 var(--icone-respiro); width: var(--icone-coluna); height: var(--icone-coluna); }
  .itens--2 .item__texto { max-width: var(--texto-coluna); }
}
@media (min-width: 900px) {
  .itens--3 { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
  .itens--3 > .item { display: flex; flex-direction: column; align-items: center; padding: .25rem var(--item-respiro); text-align: center; }
  .itens--3 > .item + .item { border-top: 0; border-left: 1px solid var(--linha-item); }
  .itens--3 .item__icone { margin: 0 0 var(--icone-respiro); width: var(--icone-coluna); height: var(--icone-coluna); }
  .itens--3 .item__texto { max-width: var(--texto-coluna); }
}
@media (min-width: 1080px) {
  .itens--4 { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
  .itens--4 > .item { display: flex; flex-direction: column; align-items: center; padding: .25rem var(--item-respiro); text-align: center; }
  .itens--4 > .item + .item { border-top: 0; border-left: 1px solid var(--linha-item); }
  .itens--4 .item__icone { margin: 0 0 var(--icone-respiro); width: var(--icone-coluna); height: var(--icone-coluna); }
  .itens--4 .item__texto { max-width: var(--texto-coluna); }
}

@media (min-width: 720px) {
  .quem__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
  .quem__corpo { align-items: center; }
  .quem__corpo .quem__foto { float: none; width: 100%; max-width: 26rem; margin: 0; }
}

@media (min-width: 900px) {
  .riscos__fecho { align-items: center; margin-inline: auto; text-align: center; }
  .chamada__bloco { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .chamada .titulo { max-width: 15em; }
  .contato__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
  .contato__canais { padding-left: clamp(3rem, 8vw, 9rem); border-left: 1px solid var(--ouro-filete); }
}

@media (min-width: 960px) {
  .topo__barra { padding-block: 1.75rem; gap: 2rem; }
  .logo__mono { font-size: 2.6rem; }
  .logo__nome { font-size: .8rem; }
  .logo__tipo { font-size: .45rem; }
  .menu { display: block; flex: 1; }
  .menu__lista { display: flex; justify-content: center; gap: clamp(1.75rem, 3vw, 3rem); }
  .menu__lista li + li { border-top: 0; }
  .menu__lista a {
    position: relative; padding: .5rem 0;
    font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: #d3d8de;
  }
  .menu__lista a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--ouro); transform: scaleX(0); transform-origin: left;
  }
  .menu__lista a:hover { color: #fff; }
  .menu__lista a:hover::after, .menu__lista a:focus-visible::after { transform: scaleX(1); }
  .menu-botao { display: none; }
  .topo__cta { margin-left: 0; min-height: 3rem; padding: .7rem 1.6rem; font-size: .8125rem; font-weight: 600; color: #16120a; border: 0; background: var(--gradiente-ouro); box-shadow: inset 0 1px 0 rgba(255, 247, 224, .6), 0 10px 26px -14px rgba(214, 165, 82, .6); }
  .topo__cta:hover { background: var(--gradiente-ouro); filter: brightness(1.05); }

  .abertura__coluna { top: 4.5rem; right: 0; height: calc(100% - 4.5rem); filter: brightness(.62); }
  .abertura::before { left: 71%; top: 41%; width: 470px; height: 72px; }
  .abertura__texto { max-width: 54rem; }
  .abertura__titulo { max-width: none; }
  .riscos__titulo, .como__titulo { max-width: none; }
  .abertura__acoes { flex-direction: row; gap: 2.25rem; }
  .abertura__mais { flex-direction: row-reverse; gap: .5rem; font-size: .875rem; }

  .quem__titulo { max-width: 13.8em; }
  .so-desktop { display: inline; }

  /* 3 linhas no título longo da compliance (77 caracteres), 2 no da contratos */
  .abertura--landing .abertura__texto { max-width: 62rem; }
  .abertura--landing .abertura__titulo { max-width: 14.5em; }
  .abertura--landing::before { left: 80%; top: 52%; }
  .abertura--contratos::before { top: 30%; }
}

/* Movimento mínimo, só para quem não pediu redução */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .botao, .link-seta, .menu__lista a, .faq__pergunta, .rodape__menu a, .abertura__mais span { transition: color .2s ease, background-color .2s ease, filter .2s ease; }
  .menu__lista a::after { transition: transform .25s ease; }
  .faq__icone { transition: transform .3s ease; }
  @supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
    .faq__item[open]::details-content { block-size: auto; }
  }
}