/* Retrato · landing page
   Estilo editorial: tipografia grande, um acento (champanhe) em formas geométricas,
   blocos escuros e claros alternados. Fontes locais (site/fontes). Manutenção: docs/SITE.md */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/cormorant-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url(fontes/cormorant-600-italico.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fontes/manrope.woff2) format("woff2"); }

:root {
  --tinta: #15171C;
  --tinta-2: #1D2027;
  --linha-escura: #2E323B;
  --champ: #CDB27A;
  --champ-claro: #E2CD9C;
  --champ-escuro: #7A6230;
  --creme: #F4EDE0;
  --creme-2: #EBE3D3;
  --linha-clara: #D9D0BE;
  --texto: #22252A;
  --sutil: #5F5B55;
  --neblina: #CFC6B5;
  --serifa: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --faixa: 1320px;
  --margem: clamp(20px, 4vw, 64px);
  --tempo: .7s;
  --circ: clamp(360px, 46vw, 760px);
  --tela: clamp(340px, 42vw, 700px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tinta); color: var(--creme); font: 400 17px/1.6 var(--sans); overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--champ); outline-offset: 4px; }
.claro a:focus-visible { outline-color: var(--tinta); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

.faixa { width: min(100% - 2 * var(--margem), var(--faixa)); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 12px; z-index: 50; background: var(--champ); color: var(--tinta); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.pular:focus { left: 12px; }

/* tipografia recorrente */
.olho { font: 700 11px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--champ); }
.claro .olho { color: var(--champ-escuro); }
.mono { font: 600 12px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.titulo { font: 600 clamp(40px, 5.6vw, 86px)/.98 var(--serifa); letter-spacing: -.01em; text-wrap: balance; }
.titulo em { font-style: italic; color: var(--champ); }
.claro .titulo em { color: var(--champ-escuro); }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--neblina); max-width: 46ch; }
.claro .lede { color: var(--sutil); }

/* botões com seta */
.botao { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; font: 700 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--creme); padding: 6px 0; }
.botao .seta { flex: none; width: 56px; height: 56px; border: 1px solid var(--champ); border-radius: 50%; display: grid; place-items: center; color: var(--champ); transition: background var(--tempo), color var(--tempo), transform var(--tempo); }
.botao .seta svg { width: 18px; height: 18px; transition: transform var(--tempo); }
.botao:hover .seta, .botao:focus-visible .seta { background: var(--champ); color: var(--tinta); }
.botao:hover .seta svg { transform: translate(2px, -2px); }
.botao.cheio .seta { background: var(--champ); color: var(--tinta); }
.botao.cheio:hover .seta { background: var(--champ-claro); }
.claro .botao { color: var(--tinta); }
.claro .botao .seta { border-color: var(--tinta); color: var(--tinta); }
.claro .botao:hover .seta { background: var(--tinta); color: var(--champ); }

/* ===== cabeçalho ===== */
.topo { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--creme); }
.marca svg { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.marca .nome { font: 600 30px/1 var(--serifa); }
.topo nav { display: flex; gap: 34px; }
.topo nav a { text-decoration: none; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--neblina); padding: 6px 0; border-bottom: 1px solid transparent; transition: color var(--tempo), border-color var(--tempo); }
.topo nav a:hover { color: var(--creme); border-color: var(--champ); }
.topo-baixar { text-decoration: none; font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--champ); display: inline-flex; align-items: center; gap: 8px; }
.topo-baixar svg { width: 12px; height: 12px; transition: transform var(--tempo); }
.topo-baixar:hover svg { transform: translate(2px, -2px); }

/* ===== herói ===== */
.heroi { position: relative; overflow: clip; background: var(--tinta); min-height: 100svh; display: flex; flex-direction: column; }
.heroi .faixa { display: flex; flex-direction: column; flex: 1; }
.heroi-corpo { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 56px 0 40px; }
.heroi-texto { position: relative; z-index: 3; max-width: 760px; }
.heroi h1 { font: 600 clamp(54px, 10.4vw, 164px)/.9 var(--serifa); text-transform: uppercase; letter-spacing: -.015em; margin: 22px 0 30px; }
.heroi h1 span { display: block; }
.heroi h1 em { font-style: italic; text-transform: none; color: var(--champ); letter-spacing: -.01em; }
.heroi .lede { max-width: 42ch; }
.heroi .cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.versao { margin-top: 22px; font-size: 13px; letter-spacing: .06em; color: var(--neblina); }
.versao .beta { display: inline-block; vertical-align: 1px; margin-right: 6px; padding: 3px 8px; border: 1px solid var(--champ); color: var(--champ); font-weight: 700; font-size: 10px; letter-spacing: .24em; }
.versao a { color: var(--neblina); }

/* o sujeito: círculo + tela em perspectiva */
.sujeito { position: absolute; inset: 0; pointer-events: none; }
.circulo { position: absolute; right: -6vw; top: 50%; width: var(--circ); aspect-ratio: 1; border-radius: 50%; background: var(--champ); transform: translateY(-56%); will-change: transform; }
.aro { position: absolute; right: -6vw; top: 50%; width: var(--circ); aspect-ratio: 1; transform: translateY(-56%) scale(1.14); color: var(--champ); opacity: .28; }
.aro svg { width: 100%; height: 100%; display: block; animation: girar 160s linear infinite; }
.tela3d { position: absolute; right: 1vw; top: 50%; width: var(--tela); transform: translateY(-40%) perspective(1800px) rotateY(-16deg) rotateX(4deg); transform-origin: 50% 50%; z-index: 4; border-radius: 10px; overflow: hidden; box-shadow: 0 60px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(205, 178, 122, .45); background: var(--tinta-2); }
.tela3d img { width: 100%; }
.selo { position: absolute; right: calc(1vw + var(--tela) - 64px); top: calc(50% + .44 * var(--circ) - 96px); width: 140px; height: 140px; z-index: 5; }
.selo svg { width: 100%; height: 100%; animation: girar 40s linear infinite; }
.selo text { font: 700 11.5px var(--sans); letter-spacing: .28em; text-transform: uppercase; fill: var(--tinta); }
.selo circle { fill: var(--creme); }
.selo path.coracao { fill: var(--tinta); }
@keyframes girar { to { transform: rotate(360deg); } }

.heroi-rodape { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 32px; color: var(--neblina); }
.paginacao { display: inline-flex; align-items: center; gap: 14px; font: 600 12px/1 var(--sans); letter-spacing: .2em; }
.paginacao i { display: block; width: 120px; height: 1px; background: var(--linha-escura); position: relative; }
.paginacao i::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--progresso, 0%); background: var(--champ); transition: width .3s; }
.heroi-rodape .mono { color: var(--neblina); }

/* ===== seções ===== */
.secao { padding: clamp(80px, 10vw, 150px) 0; position: relative; }
.escuro { background: var(--tinta); color: var(--creme); }
.escuro + .escuro { border-top: 1px solid var(--linha-escura); }
.claro { background: var(--creme); color: var(--texto); }
.claro + .claro { border-top: 1px solid var(--linha-clara); }

.passo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.passo.invertido > .passo-texto { order: 2; }
.numero { font: 600 clamp(72px, 9vw, 140px)/.8 var(--serifa); color: var(--champ); letter-spacing: -.03em; margin-bottom: 26px; }
.claro .numero { color: var(--champ-escuro); }
.passo-texto .titulo { margin: 14px 0 28px; }
.lista { border-top: 1px solid var(--linha-escura); }
.claro .lista { border-top-color: var(--linha-clara); }
.lista li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linha-escura); font-size: 16.5px; line-height: 1.55; color: var(--neblina); }
.claro .lista li { border-bottom-color: var(--linha-clara); color: var(--texto); }
.lista li b { font: 700 11px/2.4 var(--sans); letter-spacing: .2em; color: var(--champ); }
.claro .lista li b { color: var(--champ-escuro); }

.mosaico { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico figure { margin: 0; }
.mosaico figure.largo { grid-column: 1 / -1; }
.mosaico figure.celular { max-width: 300px; }
.mosaico figure.celular img { border-radius: 26px; border: 8px solid var(--tinta-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.mosaico figure.baixo { margin-top: clamp(24px, 5vw, 80px); }
.mosaico img { border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); outline: 1px solid rgba(205, 178, 122, .35); }
.claro .mosaico img { box-shadow: 0 24px 50px rgba(21, 23, 28, .18); outline-color: rgba(21, 23, 28, .12); }
.mosaico figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--neblina); }
.claro .mosaico figcaption { color: var(--sutil); }
.mosaico figcaption::before { content: "↗"; color: var(--champ); }
.claro .mosaico figcaption::before { color: var(--champ-escuro); }
.mosaico > .lado-a-lado { grid-column: 1 / -1; }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: end; }

/* faixa de números */
.numeros { background: var(--champ); color: var(--tinta); padding: clamp(40px, 5vw, 72px) 0; }
.numeros ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numeros li { padding: 10px clamp(16px, 2.5vw, 40px); border-left: 1px solid rgba(21, 23, 28, .35); }
.numeros li:first-child { border-left: 0; padding-left: 0; }
.numeros strong { display: block; font: 600 clamp(48px, 6.4vw, 104px)/.9 var(--serifa); letter-spacing: -.02em; }
.numeros span { display: block; margin-top: 12px; font: 700 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; }

/* vídeo */
.video-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.video-cab .titulo { font-size: clamp(56px, 9vw, 150px); text-transform: uppercase; line-height: .9; }
.video-cab .lede { max-width: 34ch; text-align: right; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--tinta-2); overflow: hidden; outline: 1px solid rgba(205, 178, 122, .35); }
.video video { width: 100%; height: 100%; }
.video-sumiu { display: none; }

/* aviso do Windows */
.aviso { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.aviso .titulo { margin: 14px 0 22px; }
.aviso .lede { margin-bottom: 30px; }
.passos { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.passos li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linha-clara); font-size: 18px; }
.passos li strong { font-weight: 800; }
.passos li b { font: 600 56px/1 var(--serifa); color: var(--champ-escuro); }
.aviso .nota { margin-top: 24px; font-size: 15px; color: var(--sutil); }

.janela { background: #fff; color: #1a1a1a; border: 1px solid #c9c9c9; box-shadow: 0 30px 70px rgba(21, 23, 28, .25); border-radius: 8px; font: 14px/1.45 "Segoe UI", var(--sans); max-width: 420px; margin-inline: auto; }
.janela .barra { height: 30px; background: #f3f3f3; border-bottom: 1px solid #e3e3e3; border-radius: 8px 8px 0 0; }
.janela .corpo { padding: 22px 24px 18px; }
.janela .t { font-size: 19px; font-weight: 600; color: #003e92; margin-bottom: 10px; }
.janela p { margin-bottom: 6px; font-size: 13.5px; }
.janela .mais { color: #0067c0; text-decoration: underline; }
.janela .pub { color: #555; font-size: 13px; margin-top: 10px; }
.janela .botoes { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.janela .btn { padding: 7px 16px; border: 1px solid #bbb; background: #fbfbfb; border-radius: 4px; font-size: 13.5px; }
.janela .btn.ok { background: #e6e6e6; border-color: #999; font-weight: 600; outline: 2px solid var(--champ-escuro); outline-offset: 2px; }
.janela .marcador { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tinta); color: var(--champ); font: 700 11px/1 var(--sans); margin-right: 8px; vertical-align: -3px; }

/* requisitos */
.req { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--linha-escura); }
.req li { padding-top: 22px; }
.req h3 { font: 600 32px/1 var(--serifa); margin: 10px 0 12px; }
.req p { font-size: 15.5px; line-height: 1.55; color: var(--neblina); }
.req .mono { color: var(--champ); }

/* chamada final */
.final { padding: clamp(100px, 14vw, 200px) 0; text-align: left; }
.final .titulo { font-size: clamp(56px, 10vw, 170px); text-transform: uppercase; line-height: .88; margin: 18px 0 40px; }
.final .cta { display: flex; flex-wrap: wrap; gap: 22px 48px; align-items: center; }
.final .botao.secundario .seta { border-color: var(--linha-escura); color: var(--neblina); }

/* rodapé */
footer { background: var(--tinta); border-top: 1px solid var(--linha-escura); padding: 48px 0 36px; color: var(--neblina); font-size: 14.5px; }
.rodape { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.rodape h3 { font: 700 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--champ); margin-bottom: 14px; }
.rodape a { color: var(--creme); text-decoration: none; border-bottom: 1px solid var(--linha-escura); }
.rodape a:hover { border-color: var(--champ); }
.rodape li { margin: 6px 0; }
.rodape-fim a { color: var(--neblina); text-decoration: none; border-bottom: 1px solid var(--linha-escura); }
.rodape-fim a:hover { border-color: var(--champ); }
.rodape-fim { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linha-escura); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: .06em; }

/* ===== movimento ===== */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.revelar.visto { opacity: 1; transform: none; }
.heroi-texto > * { animation: subir 1s cubic-bezier(.2, .7, .2, 1) both; }
.heroi-texto > :nth-child(2) { animation-delay: .08s; }
.heroi-texto > :nth-child(3) { animation-delay: .16s; }
.heroi-texto > :nth-child(4) { animation-delay: .24s; }
.heroi-texto > :nth-child(5) { animation-delay: .32s; }
.tela3d { animation: entrar 1.3s cubic-bezier(.2, .7, .2, 1) both .2s; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(-34%) perspective(1800px) rotateY(-26deg) rotateX(4deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .heroi-texto > *, .tela3d, .aro svg, .selo svg { animation: none; }
  .circulo { transform: translateY(-56%) !important; }
  * { transition-duration: 0s !important; }
}

/* ===== responsivo ===== */
@media (max-width: 1100px) {
  .heroi h1 { font-size: clamp(54px, 9.6vw, 120px); }
  :root { --tela: clamp(320px, 40vw, 520px); }
}
@media (max-width: 900px) {
  .topo nav { display: none; }
  .heroi { min-height: 0; }
  .heroi-corpo { padding: 32px 0 24px; grid-template-columns: 1fr; }
  .heroi h1 { font-size: clamp(50px, 14.5vw, 110px); }
  .heroi-texto { max-width: none; }
  .sujeito { position: relative; inset: auto; margin: 40px auto 8px; width: min(100%, 560px); aspect-ratio: 1 / .78; }
  .circulo, .aro { right: 50%; top: 46%; width: 78%; transform: translate(50%, -50%) !important; }
  .aro { transform: translate(50%, -50%) scale(1.12) !important; }
  .tela3d { right: auto; left: 50%; top: 50%; width: 92%; transform: translate(-50%, -50%) perspective(1400px) rotateY(-10deg) rotateX(3deg); }
  .selo { right: -6px; top: -14px; width: 110px; height: 110px; }
  .selo text { font-size: 12.5px; }
  @keyframes entrar { from { opacity: 0; transform: translate(-50%, -46%) perspective(1400px) rotateY(-18deg) rotateX(3deg); } }
  .passo, .passo.invertido { grid-template-columns: 1fr; }
  .passo.invertido > .passo-texto { order: 0; }
  .numeros ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .numeros li:nth-child(3) { border-left: 0; padding-left: 0; }
  .video-cab { grid-template-columns: 1fr; align-items: start; }
  .video-cab .lede { text-align: left; }
  .aviso { grid-template-columns: 1fr; }
  .req { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape { grid-template-columns: 1fr 1fr; }
  .rodape > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .marca .nome { font-size: 26px; }
  .heroi h1 { font-size: clamp(46px, 15.5vw, 72px); margin: 16px 0 22px; }
  .heroi .cta { gap: 18px; }
  .botao { font-size: 12px; letter-spacing: .16em; gap: 12px; }
  .botao .seta { width: 48px; height: 48px; }
  .paginacao i { width: 64px; }
  .mosaico { grid-template-columns: 1fr; }
  .mosaico figure.baixo { margin-top: 0; }
  .mosaico figure.celular { max-width: 220px; }
  .lado-a-lado { grid-template-columns: 1fr; }
  .numeros ul { grid-template-columns: 1fr; }
  .numeros li { border-left: 0; padding-left: 0; border-top: 1px solid rgba(21, 23, 28, .35); padding-top: 22px; }
  .numeros li:first-child { border-top: 0; padding-top: 0; }
  .passos li { grid-template-columns: 52px 1fr; font-size: 16px; }
  .passos li b { font-size: 44px; }
  .req, .rodape { grid-template-columns: 1fr; }
  .final .cta { flex-direction: column; align-items: flex-start; }
}

/* ===== páginas de texto (política de privacidade) ===== */
.cab-texto { padding: 26px 0 clamp(48px, 7vw, 100px); }
.cab-texto .titulo { margin: 14px 0 16px; }
.cab-texto .lede { max-width: 60ch; }
.artigo { max-width: 780px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); font-size: 17px; line-height: 1.7; }
.artigo p { margin: 0 0 16px; }
.artigo h2 { font: 600 clamp(30px, 3.6vw, 40px)/1.1 var(--serifa); margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--linha-clara); color: var(--tinta); }
.artigo h2::before { content: counter(secao, decimal-leading-zero); counter-increment: secao; display: block; font: 700 11px/1 var(--sans); letter-spacing: .24em; color: var(--champ-escuro); margin-bottom: 10px; }
.artigo { counter-reset: secao; }
.artigo h3 { font: 600 24px/1.2 var(--serifa); margin: 24px 0 6px; }
.artigo ul { list-style: none; padding: 0; margin: 0 0 16px; }
.artigo li { position: relative; padding-left: 22px; margin: 6px 0; }
.artigo li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--champ-escuro); }
.artigo table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15.5px; }
.artigo th, .artigo td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--linha-clara); }
.artigo th { font: 700 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--champ-escuro); }
.artigo .nota { border-left: 2px solid var(--champ-escuro); padding: 4px 0 4px 18px; margin: 18px 0; color: var(--sutil); }
.artigo a { color: var(--champ-escuro); }
@media (max-width: 600px) { .artigo table, .artigo thead, .artigo tbody, .artigo tr, .artigo th, .artigo td { display: block; } .artigo thead { display: none; } .artigo td { border: 0; padding: 3px 0; } .artigo tr { border-bottom: 1px solid var(--linha-clara); padding: 10px 0; } }