/* ==========================================================================
   MOLDE "VITRINE" — estilo
   Para outro tema: troque só o bloco TEMA (cores, fonte e raio).
   ========================================================================== */

@font-face {
  font-family: 'Google Sans Flex';
  src: url('../fonts/gsf-latin.woff2') format('woff2');
  font-weight: 300 700; 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: 'Google Sans Flex';
  src: url('../fonts/gsf-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- TEMA -------------------------------------------------------- */
:root {
  --fonte: 'Google Sans Flex', 'Product Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --preto: #0c0904;
  --preto-2: #1a150b;
  --azul: #d7ac57;
  --azul-forte: #c08f2d;
  --azul-claro: #e6cc97;
  --azul-gelo: #f6f0e5;
  --branco: #ffffff;
  --papel: #fbf9f5;
  --texto: #1a150b;
  --texto-suave: #786e5b;
  --texto-claro: rgba(255, 255, 255, 0.72);
  --linha-escura: rgba(255, 255, 255, 0.12);
  --raio: 28px;
  --raio-g: 40px;
  --larg: 1180px;
  --margem: clamp(16px, 5vw, 48px);
  --sombra-azul: 0 30px 80px -30px rgba(215, 172, 87, 0.55);
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
html.menu-aberto { overflow: hidden; }
body {
  margin: 0; background: var(--branco); color: var(--texto);
  font-family: var(--fonte); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--branco); padding: 10px 16px; border-radius: 999px; }
.pular:focus { top: 16px; }

.conteiner { width: min(100% - 2 * var(--margem), var(--larg)); margin-inline: auto; }
.realce { color: var(--azul); }
.escuro .realce { color: var(--azul-claro); }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(26, 21, 11, 0.12); color: var(--texto-suave);
}
.escuro .etiqueta { border-color: var(--linha-escura); color: var(--texto-claro); }
.titulo-g { font-size: clamp(30px, 6.2vw, 64px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 400; margin: 0; }
.titulo-m { font-size: clamp(26px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; margin: 0; }
.texto-m { font-size: clamp(15px, 1.6vw, 18px); color: var(--texto-suave); max-width: 56ch; }
.escuro .texto-m { color: var(--texto-claro); }
.centro { text-align: center; margin-inline: auto; }
.escuro { background: var(--preto); color: var(--branco); }

/* ---------- Botões (pílula com seta em círculo) -------------------------- */
.botao {
  --b-fundo: var(--branco); --b-cor: var(--texto); --b-circ: var(--azul);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 22px; border-radius: 999px; min-height: 52px;
  background: var(--b-fundo); color: var(--b-cor); font-size: 15px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 10px 30px -12px rgba(215, 172, 87, 0.5);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
}
.botao .seta {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--b-circ); color: var(--branco); overflow: hidden; position: relative;
  box-shadow: 0 0 0 3px rgba(215, 172, 87, 0.18);
}
.botao .seta svg { width: 16px; height: 16px; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.botao:hover { transform: translateY(-2px); }
.botao:hover .seta svg { transform: rotate(45deg); }
.botao:active { transform: scale(0.97); }
.botao.escuro-b { --b-fundo: var(--preto-2); --b-cor: var(--branco); }
.botao.contorno {
  --b-fundo: transparent; --b-cor: var(--branco); padding: 7px 22px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

/* ---------- Topo / menu -------------------------------------------------- */
.topo {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--margem);
}
.marca-topo { display: flex; align-items: center; gap: 10px; color: var(--branco); }
.simbolo {
  display: block; flex: none;
  width: 34px; height: 30px; background: currentColor;
  -webkit-mask: url('../img/rr.svg') center / contain no-repeat; mask: url('../img/rr.svg') center / contain no-repeat;
}
.marca-topo span { font-size: 14px; letter-spacing: 0.02em; opacity: 0.85; }
.menu-botao {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--branco);
  background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; position: relative; z-index: 60;
}
.menu-botao i { position: absolute; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.4s, top 0.4s; }
.menu-botao i:first-child { transform: translateY(-4px); }
.menu-botao i:last-child { transform: translateY(4px); }
.menu-botao[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
.menu-painel {
  position: fixed; inset: 0; z-index: 50; background: rgba(12, 9, 4, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--margem);
  opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0.45s;
}
.menu-painel.aberto { opacity: 1; visibility: visible; }
.menu-painel a { color: var(--branco); font-size: clamp(30px, 8vw, 56px); line-height: 1.25; letter-spacing: -0.02em; width: fit-content; }
.menu-painel a:hover { color: var(--azul-claro); }
.menu-painel small { color: var(--texto-claro); margin-top: 32px; font-size: 14px; }

/* ---------- 1. Capa ------------------------------------------------------ */
.capa { position: relative; height: 100svh; min-height: 620px; background: var(--branco); }
.capa-cartao {
  position: relative; height: 100%; overflow: hidden; background: var(--preto);
  transform-origin: 50% 0; will-change: transform; color: var(--branco);
}
.capa-foto { position: absolute; inset: 0; }
.capa-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  filter: saturate(0.8) contrast(1.15) brightness(0.74); will-change: transform;
}
.capa-foto::before { /* tom azul de cinema */
  content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light;
  background: radial-gradient(70% 55% at 50% 30%, rgba(215, 172, 87, 0.85), rgba(12, 9, 4, 0.85) 75%);
}
.capa-foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 40% at 50% 8%, rgba(215, 172, 87, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(12, 9, 4, 0.35) 0%, rgba(12, 9, 4, 0) 26%, rgba(12, 9, 4, 0.15) 46%, rgba(12, 9, 4, 0.92) 78%, var(--preto) 100%);
}
.capa-conteudo {
  position: absolute; inset: auto 0 0; z-index: 2; text-align: center;
  padding: 0 var(--margem) clamp(36px, 7vh, 72px);
  display: flex; flex-direction: column; align-items: center;
}
.capa h1 {
  margin: 0; font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 8.4vw, 76px); line-height: 0.98; letter-spacing: -0.02em;
  font-stretch: 88%; max-width: 15ch;
}
.capa h1 .linha { padding-bottom: 0.04em; }
.capa h1 .linha-mask { padding-top: 0.14em; margin-top: -0.14em; }
.capa-sub { margin: 18px 0 26px; font-size: 14px; color: var(--texto-claro); max-width: 36ch; }
.capa-botoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.capa-aviso { margin-top: 18px; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }

@media (min-width: 900px) {
  .capa-foto { left: auto; width: 62%; }
  .capa-foto img { object-position: 50% 18%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
  .capa-conteudo { inset: 0 auto 0 0; width: 56%; text-align: left; align-items: flex-start; justify-content: flex-end; padding-left: max(var(--margem), calc((100vw - var(--larg)) / 2)); }
  .capa-botoes { justify-content: flex-start; }
  .capa h1 { max-width: 17ch; font-size: clamp(44px, 5.4vw, 84px); }
}

/* ---------- 2. Pense nisso ---------------------------------------------- */
.pense { padding: clamp(80px, 14vh, 150px) 0 clamp(70px, 12vh, 130px); }
.pense .titulo-g { margin: 22px 0 28px; max-width: 18ch; }
.pense-assinatura { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pense-assinatura img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px var(--branco), 0 0 0 4px var(--azul-gelo); }
.pense-assinatura strong { display: block; font-weight: 500; font-size: 15px; }
.pense-assinatura span { font-size: 13px; color: var(--texto-suave); }
.pense .texto-m { margin: 0 0 30px; }
@media (min-width: 900px) {
  .pense .conteiner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; }
}

/* ---------- 3. Seção fixa com objeto ------------------------------------ */
.fixa {
  position: relative; height: 100svh; overflow: hidden; color: var(--branco);
  background: radial-gradient(90% 60% at 50% 100%, #6d511a 0%, #29200f 45%, var(--preto) 80%);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
.fixa-titulo {
  position: absolute; inset: 14vh var(--margem) auto; z-index: 3; text-align: center;
  text-transform: uppercase; font-weight: 400; font-stretch: 88%;
  font-size: clamp(28px, 7.4vw, 72px); line-height: 1; letter-spacing: -0.02em; margin: 0;
}
.palco { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; z-index: 2; }
.objeto { position: relative; width: min(52vw, 300px); aspect-ratio: 3 / 4; transform-style: preserve-3d; margin-top: 4vh; }
.objeto-foto { width: min(84vw, 470px); }
.objeto-foto img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 52%, #000 55%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 52%, #000 55%, transparent 100%); }
.folha {
  position: absolute; inset: 0; border-radius: 18px; padding: 22px 20px;
  background: linear-gradient(160deg, #ffffff 0%, #faf6ee 60%, #f3ebdb 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  color: var(--texto); transform-style: preserve-3d; overflow: hidden;
}
.folha::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.7), transparent 40%); pointer-events: none; }
.folha b { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-forte); margin-bottom: 4px; }
.folha strong { display: block; font-weight: 500; font-size: 18px; margin-bottom: 16px; }
.folha i { display: block; height: 7px; border-radius: 4px; background: #f0e6d3; margin: 9px 0; }
.folha i:nth-child(odd) { width: 82%; } .folha i:nth-child(3n) { width: 60%; }
.folha .selo { position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--azul); display: grid; place-items: center; color: var(--azul); }
.folha .selo .simbolo { width: 26px; height: 22px; }
.pedestal {
  position: absolute; left: 50%; bottom: 6vh; width: min(120vw, 900px); height: 220px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(215, 172, 87, 0.55), rgba(215, 172, 87, 0) 70%);
  filter: blur(10px); z-index: 1;
}
.fixa-final { position: absolute; inset: auto var(--margem) clamp(96px, 13vh, 140px); z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fixa-final p { margin: 0; color: var(--texto-claro); max-width: 34ch; font-size: 15px; }

/* ---------- 4. Contadores ----------------------------------------------- */
.numeros { padding: clamp(60px, 10vh, 110px) 0 clamp(40px, 6vh, 70px); background: var(--preto); color: var(--branco); }
.numeros-grade { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--linha-escura); }
.numero { padding: 34px 10px; text-align: center; }
.numero:nth-child(odd) { border-right: 1px solid var(--linha-escura); }
.numero:nth-child(-n+2) { border-bottom: 1px solid var(--linha-escura); }
.numero strong { display: block; font-weight: 300; font-size: clamp(40px, 9vw, 76px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: 10px; font-size: 13px; color: var(--texto-claro); max-width: 22ch; margin-inline: auto; }
.numeros-fonte { margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, 0.45); text-align: center; }
@media (min-width: 900px) {
  .numeros-grade { grid-template-columns: repeat(4, 1fr); }
  .numero { border: 0 !important; border-right: 1px solid var(--linha-escura) !important; }
  .numero:last-child { border-right: 0 !important; }
}

/* ---------- 5. Nuvens --------------------------------------------------- */
.ceu {
  position: relative; height: clamp(420px, 80vh, 760px); overflow: hidden;
  background: linear-gradient(180deg, var(--preto) 0%, #433519 22%, #c7942f 50%, #e9d2a3 74%, var(--branco) 100%);
}
.ceu .camada { position: absolute; left: 50%; width: max(130%, 1400px); margin-left: calc(max(130%, 1400px) / -2); bottom: -2px; pointer-events: none; }
.ceu .camada img { width: 100%; height: auto; }
.ceu .c-fundo { bottom: 26%; opacity: 0.8; filter: blur(1px); -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
.ceu .c-frente { bottom: -4%; }
.ceu::after { content: ''; position: absolute; inset: auto 0 0; height: 14%; background: linear-gradient(transparent, var(--branco)); }

/* ---------- 6. Cartões de serviço (vitrine) ----------------------------- */
.vitrine { padding: 10px 0 clamp(80px, 12vh, 130px); background: var(--branco); }
.vitrine-cabeca { text-align: center; margin-bottom: 44px; }
.vitrine-cabeca .titulo-m { max-width: 20ch; margin: 0 auto 16px; }
.vitrine-cabeca .texto-m { margin-inline: auto; }
.vitrine-grade { display: grid; gap: 18px; }
@media (min-width: 760px) { .vitrine-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vitrine-grade { grid-template-columns: repeat(3, 1fr); } }
.servico {
  background: var(--papel); border-radius: var(--raio); padding: 10px; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(26, 21, 11, 0.05) inset; transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s;
}
.servico:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(215, 172, 87, 0.25) inset, var(--sombra-azul); }
.servico-img { border-radius: calc(var(--raio) - 8px); overflow: hidden; aspect-ratio: 16 / 11; background: var(--preto); position: relative; }
.servico-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.servico:hover .servico-img img { transform: scale(1.05); }
.servico-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 9, 4, 0.55)); }
.servico-img em { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: var(--branco); font-style: normal; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.servico-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 10px 8px; }
.servico h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.25; }
.servico small { color: var(--texto-suave); font-size: 12.5px; }
.servico-acao { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.servico-acao .seta { width: 34px; height: 34px; border-radius: 50%; background: var(--preto-2); color: var(--branco); display: grid; place-items: center; }
.servico-acao .seta svg { width: 14px; height: 14px; transition: transform 0.4s; }
.servico-acao[aria-expanded="true"] .seta svg { transform: rotate(135deg); }
.servico .resposta { padding: 0 10px; overflow: hidden; }
.servico .resposta p { margin: 4px 0 12px; color: var(--texto-suave); font-size: 14.5px; }
.servico .resposta a { color: var(--azul-forte); font-weight: 500; font-size: 14px; display: inline-block; margin-bottom: 10px; }

/* ---------- 7. Processo + mosaico de pixels ----------------------------- */
.processo { position: relative; padding: clamp(70px, 12vh, 130px) 0; background: var(--branco); --cor-pixel: #f3ebdb; overflow: hidden; }
.pixels-tela { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.processo .conteiner { position: relative; z-index: 1; }
.processo .titulo-m { max-width: 18ch; margin-bottom: 48px; }
.processo-lista { position: relative; max-width: 640px; }
.processo-passos { list-style: none; margin: 0; padding: 0; }
.processo-linha, .processo-linha-cheia { position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; }
.processo-linha { background: #f1ebdf; }
.processo-linha-cheia { background: linear-gradient(var(--azul-claro), var(--azul)); transform-origin: top; box-shadow: 0 0 14px rgba(215, 172, 87, 0.6); }
.passo { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding-bottom: 44px; }
.passo:last-child { padding-bottom: 0; }
.passo-num {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--branco); color: #bfb39a; font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 2px #f1ebdf inset; transition: all 0.5s cubic-bezier(.2,.8,.2,1);
}
.passo h3 { margin: 4px 0 6px; font-weight: 500; font-size: 18px; transition: color 0.5s; color: #bfb39a; }
.passo p { margin: 0; font-size: 14.5px; color: #cdc4b3; transition: color 0.5s; max-width: 46ch; }
.passo .papeis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.passo .papeis span { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px #f2ede3 inset; color: #cdc4b3; transition: color 0.5s; }
.passo.ativo .passo-num { background: var(--azul); color: var(--branco); box-shadow: 0 0 0 5px rgba(215, 172, 87, 0.18); }
.passo.ativo h3 { color: var(--texto); }
.passo.ativo p, .passo.ativo .papeis span { color: var(--texto-suave); }
.sem-movimento .passo .passo-num { background: var(--azul); color: var(--branco); }
.sem-movimento .passo h3 { color: var(--texto); }
.sem-movimento .passo p { color: var(--texto-suave); }

/* ---------- 8. Por que (cartões altos 3D) ------------------------------- */
.porque { padding: clamp(80px, 13vh, 140px) 0; border-radius: var(--raio-g); margin: 0 clamp(0px, 1.2vw, 16px); }
.porque .titulo-m { text-align: center; max-width: 16ch; margin: 0 auto 48px; }
.porque-grade { display: grid; gap: 18px; perspective: 1200px; }
@media (min-width: 900px) { .porque-grade { grid-template-columns: repeat(3, 1fr); } }
.cartao-alto {
  position: relative; min-height: 520px; border-radius: var(--raio); overflow: hidden; padding: 32px 26px;
  background: linear-gradient(180deg, #1f190c, #0d0a05); text-align: center;
  box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.28) inset, 0 0 40px -10px rgba(215, 172, 87, 0.35);
}
.cartao-alto h3 { position: relative; z-index: 2; margin: 0 0 12px; font-weight: 400; font-size: 21px; }
.cartao-alto p { position: relative; z-index: 2; margin: 0 auto; color: var(--texto-claro); font-size: 14.5px; max-width: 30ch; }
.cartao-visual { position: absolute; inset: auto 0 -6%; height: 62%; z-index: 1; }
/* horizonte de planeta feito só com CSS */
.horizonte::before {
  content: ''; position: absolute; left: -40%; right: -40%; top: 30%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 8%, rgba(246, 240, 229, 0.95), rgba(229, 201, 146, 0.55) 14%, #6c5019 34%, #241d0e 60%, #0e0b05 80%);
  box-shadow: 0 -10px 40px 6px rgba(229, 201, 146, 0.55), 0 -2px 0 1px rgba(245, 233, 210, 0.85);
}
.horizonte::after {
  content: ''; position: absolute; inset: 20% -10% auto; height: 60%;
  background: radial-gradient(50% 40% at 50% 60%, rgba(215, 172, 87, 0.45), transparent 70%); filter: blur(20px);
}
.horizonte.v2::before { top: 22%; background: radial-gradient(circle at 30% 6%, rgba(246, 240, 229, 0.95), rgba(229, 201, 146, 0.5) 12%, #7e5e1e 30%, #241d0e 58%, #0e0b05 80%); }
.foto-duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.15) brightness(0.9); }
.foto-duo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0d0a05 0%, transparent 30%), rgba(215, 172, 87, 0.45); mix-blend-mode: normal; }
.foto-duo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #d7ac57; mix-blend-mode: color; }

/* ---------- 9. Pilha de cartões ----------------------------------------- */
.saiba {
  position: relative; padding: clamp(80px, 13vh, 140px) 0 clamp(60px, 10vh, 120px); color: var(--branco); overflow: clip;
  background: linear-gradient(180deg, var(--preto) 0%, #4a3b1c 20%, #c08f2d 55%, #4a3b1c 85%, var(--preto) 100%);
}
.saiba .luzes { position: absolute; inset: 0; pointer-events: none; }
.saiba .luzes i { position: absolute; width: 22vw; max-width: 260px; height: 90vh; top: 10%; border-radius: 50%; background: linear-gradient(90deg, transparent, #e0bf7c, #f5ead3, #e0bf7c, transparent); filter: blur(30px); opacity: 0.5; }
.saiba .luzes i:nth-child(1) { right: -6vw; }
.saiba .luzes i:nth-child(2) { right: 12vw; opacity: 0.25; height: 70vh; top: 30%; }
.saiba .luzes i:nth-child(3) { left: -12vw; top: 45%; opacity: 0.3; }
.saiba-cabeca { position: relative; margin-bottom: 40px; max-width: 520px; }
.saiba-cabeca .titulo-m { margin: 16px 0 14px; }
.pilha-lista { position: relative; display: grid; gap: 22px; max-width: 720px; margin-inline: auto; }
.pilha-cartao {
  position: sticky; top: calc(14vh + var(--i, 0) * 16px);
  border-radius: var(--raio); padding: 34px 28px; text-align: center; color: var(--texto);
  background: linear-gradient(140deg, #ffffff 0%, #fbf8f2 55%, #f1e1c2 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 30px 60px -30px rgba(22, 17, 8, 0.6);
  transform-origin: 50% 0; will-change: transform;
}
.pilha-cartao h3 { margin: 0 0 10px; font-weight: 500; font-size: 20px; }
.pilha-cartao p { margin: 0 auto; color: var(--texto-suave); font-size: 15px; max-width: 46ch; }
.pilha-cartao a { color: var(--azul-forte); font-weight: 500; }

/* ---------- 10. Objetivo + tecla de vidro ------------------------------- */
.objetivo { position: relative; padding: clamp(90px, 14vh, 160px) 0 0; overflow: hidden; text-align: center; }
.objetivo .titulo-g { max-width: 17ch; margin: 0 auto 18px; }
.objetivo .texto-m { margin: 0 auto; }
.objetivo-cena { position: relative; margin-top: 40px; height: clamp(440px, 70vh, 680px); perspective: 900px; }
.objetivo-cena > img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  filter: saturate(0.95) contrast(1.05);
}
.objetivo-cena::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--preto), transparent 22%, transparent 78%, var(--preto)); pointer-events: none; }
.cena-foto { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 3 / 4; transform: translateX(-50%); }
.cena-foto img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%); }
/* símbolo real por cima da tecla gerada por IA (posição medida na foto) */
.logo-na-tecla { position: absolute; left: 64.3%; top: 53.6%; width: 6.2%; aspect-ratio: 1.15; translate: -50% -50%; rotate: -3deg;
  color: #fcfaf5; filter: drop-shadow(0 0 6px rgba(229, 201, 146, 0.95)) drop-shadow(0 0 14px rgba(215, 172, 87, 0.8)); mix-blend-mode: screen; }
.logo-na-tecla .simbolo { width: 100%; height: 100%; }
.tecla {
  position: absolute; z-index: 3; left: 50%; top: 52%; width: clamp(104px, 24vw, 180px); aspect-ratio: 1;
  margin-left: clamp(52px, 15vw, 200px); transform-style: preserve-3d;
}
.tecla-corpo {
  position: absolute; inset: 0; border-radius: 30%; display: grid; place-items: center; color: var(--branco);
  transform-style: preserve-3d;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(145deg, #ddb86f 0%, #cd9930 45%, #866420 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.7), inset 0 -10px 24px rgba(44, 35, 16, 0.5), inset 0 0 0 1.5px rgba(245, 233, 210, 0.55),
    0 30px 60px -10px rgba(215, 172, 87, 0.75), 0 0 90px rgba(215, 172, 87, 0.55);
}
.tecla-corpo .simbolo { width: 54%; height: 46%; filter: drop-shadow(0 4px 10px rgba(65, 52, 25, 0.6)); }
.tecla-corpo::after { content: ''; position: absolute; inset: 7%; border-radius: 26%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); pointer-events: none; }

/* ---------- 11. Perguntas ----------------------------------------------- */
.perguntas { padding: clamp(80px, 12vh, 130px) 0 clamp(90px, 14vh, 150px); border-radius: 0 0 var(--raio-g) var(--raio-g); position: relative; z-index: 2; }
.perguntas .titulo-m { text-align: center; margin-bottom: 40px; }
.perguntas-lista { max-width: 760px; margin-inline: auto; display: grid; gap: 10px; }
.pergunta { border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px var(--linha-escura) inset; transition: background 0.4s; }
.pergunta.aberta { background: rgba(215, 172, 87, 0.1); }
.pergunta button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; text-align: left; font-size: 15.5px; }
.pergunta .mais { flex: none; width: 28px; height: 28px; position: relative; }
.pergunta .mais::before, .pergunta .mais::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.pergunta .mais::after { transform: rotate(90deg); }
.pergunta.aberta .mais::after { transform: rotate(0deg); }
.pergunta .resposta { overflow: hidden; }
.pergunta .resposta p { margin: 0; padding: 0 22px 14px; color: var(--texto-claro); font-size: 14.5px; }
.pergunta .resposta p:last-child { padding-bottom: 22px; }
.chamada-final { text-align: center; margin-top: 70px; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- 12. Rodapé -------------------------------------------------- */
.rodape { position: relative; background: var(--branco); margin-top: calc(-1 * var(--raio-g)); padding-top: var(--raio-g); overflow: hidden; }
.rodape-interno { padding: 64px 0 120px; }
.rodape .simbolo { width: 46px; height: 40px; color: var(--azul-forte); }
.rodape-frase { color: var(--texto-suave); font-size: 14px; margin: 14px 0 34px; }
.rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; list-style: none; padding: 0; margin: 0 0 30px; max-width: 420px; }
.rodape-links a { font-size: 15px; }
.rodape-links a:hover { color: var(--azul); }
.rodape-legal { border-top: 1px solid #f2eee6; padding-top: 22px; font-size: 12.5px; color: var(--texto-suave); max-width: 70ch; }
.rodape-base { display: flex; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.rodape-base small { flex-basis: 100%; color: var(--texto-suave); font-size: 12.5px; margin-bottom: 4px; }
.pilula { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--papel); box-shadow: 0 0 0 1px #f2ede3 inset; font-size: 14px; }
.pilula svg { width: 20px; height: 20px; }
.redondo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); box-shadow: 0 0 0 1px #f2ede3 inset; }
.redondo svg { width: 18px; height: 18px; }
.rodape-gigante { font-size: clamp(64px, 19vw, 260px); line-height: 0.8; letter-spacing: -0.05em; font-weight: 500; color: #faf6ee; margin: 50px 0 -0.12em; white-space: nowrap; user-select: none; }

/* ---------- Barra flutuante -------------------------------------------- */
.barra-flutuante {
  position: fixed; z-index: 40; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px;
  background: rgba(44, 39, 30, 0.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 20px 40px -12px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 140%); transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.barra-flutuante.mostrar { transform: translate(-50%, 0); }
.barra-flutuante .simbolo-botao { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--branco); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset; }
.barra-flutuante .simbolo { width: 26px; height: 22px; }
.barra-flutuante .botao { min-height: 52px; white-space: nowrap; }

/* ---------- Sem movimento (acessibilidade) ------------------------------ */
.sem-movimento .barra-flutuante { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .pilha-cartao { position: relative; top: 0; }
}

/* ---------- Figurinhas 3D (pacote Sticker Boss) ------------------------- */
.figurinha {
  position: absolute; z-index: 5; width: var(--t, 88px); pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(29, 23, 11, 0.28));
}
.figurinha img { width: 100%; height: auto; }
@media (min-width: 900px) { .figurinha { width: calc(var(--t, 88px) * 1.35); } }
.pense .conteiner, .vitrine-cabeca, .chamada-final, .passo { position: relative; }
.sem-movimento .figurinha { transform: rotate(var(--giro, 0deg)); }

/* ==========================================================================
   TEMA ESCURO — ativado com <html data-tema="escuro">.
   Sem o atributo, o molde volta ao tema claro original.
   ========================================================================== */
:root[data-tema="escuro"] {
  --fundo: #0d0a05;
  --fundo-2: #1a150b;
  --papel: #201a0d;
  --texto: #faf6ef;
  --texto-suave: rgba(246, 240, 228, 0.62);
  --azul-gelo: #46371a;
  color-scheme: dark;
}
[data-tema="escuro"] body,
[data-tema="escuro"] .capa,
[data-tema="escuro"] .pense,
[data-tema="escuro"] .vitrine,
[data-tema="escuro"] .processo,
[data-tema="escuro"] .rodape { background: var(--fundo); color: var(--texto); }
[data-tema="escuro"] .etiqueta { border-color: rgba(255, 255, 255, 0.14); color: var(--texto-suave); }
[data-tema="escuro"] .realce { color: var(--azul-claro); }
[data-tema="escuro"] .botao { --b-cor: #1a150b; }
[data-tema="escuro"] .botao.contorno { --b-cor: var(--branco); }
[data-tema="escuro"] .botao.escuro-b { --b-cor: var(--branco); --b-fundo: #302714; box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.28) inset, 0 10px 30px -12px rgba(215, 172, 87, 0.6); }
[data-tema="escuro"] .pense-assinatura img { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 4px #785e2a; }

/* céu: de noite, com nuvens de tempestade cinza */
[data-tema="escuro"] .ceu { background: linear-gradient(180deg, var(--fundo) 0%, #2a2110 30%, #322813 55%, #362d1b 72%, var(--fundo) 100%); }
[data-tema="escuro"] .ceu::after { background: linear-gradient(transparent, var(--fundo)); }
[data-tema="escuro"] .ceu .c-fundo { opacity: 0.9; filter: blur(1.5px); }
[data-tema="escuro"] .ceu::before { /* relâmpago fraco atrás das nuvens */
  content: ''; position: absolute; inset: 10% 20% 40%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 60% 60%, rgba(229, 201, 146, 0.35), transparent 70%);
  animation: relampago 9s infinite;
}
@keyframes relampago { 0%, 86%, 100% { opacity: 0.15; } 88% { opacity: 0.9; } 90% { opacity: 0.25; } 92% { opacity: 0.7; } }

/* cartões de serviço */
[data-tema="escuro"] .servico { background: var(--papel); box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.14) inset; }
[data-tema="escuro"] .servico:hover { box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.4) inset, var(--sombra-azul); }
[data-tema="escuro"] .servico-acao .seta { background: var(--azul); }
[data-tema="escuro"] .servico .resposta a { color: var(--azul-claro); }
[data-tema="escuro"] .servico-img img { filter: brightness(0.85) saturate(0.9); }

/* processo */
[data-tema="escuro"] .processo { --cor-pixel: #936e23; }
[data-tema="escuro"] .processo-linha { background: #362d1c; }
[data-tema="escuro"] .passo-num { background: var(--fundo); color: #72664f; box-shadow: 0 0 0 2px #40351f inset; }
[data-tema="escuro"] .passo h3 { color: #72664f; }
[data-tema="escuro"] .passo p, [data-tema="escuro"] .passo .papeis span { color: #59503d; }
[data-tema="escuro"] .passo .papeis span { background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 1px #362d1c inset; }
[data-tema="escuro"] .passo.ativo h3 { color: var(--texto); }
[data-tema="escuro"] .passo.ativo p, [data-tema="escuro"] .passo.ativo .papeis span { color: var(--texto-suave); }

/* "Por que" e "Perguntas": sem margem branca em volta */
[data-tema="escuro"] .porque { box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.1) inset; }

/* pilha: vidro escuro em vez de branco */
[data-tema="escuro"] .pilha-cartao {
  color: var(--texto);
  background: linear-gradient(140deg, #332916 0%, #241d0e 55%, #6b501a 100%);
  box-shadow: 0 0 0 1px rgba(230, 204, 151, 0.25) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
[data-tema="escuro"] .pilha-cartao p { color: var(--texto-suave); }
[data-tema="escuro"] .pilha-cartao a { color: var(--azul-claro); }
[data-tema="escuro"] .saiba { background: linear-gradient(180deg, var(--fundo) 0%, #342914 25%, #7a5b1d 55%, #342914 85%, var(--fundo) 100%); }

/* rodapé */
[data-tema="escuro"] .perguntas { box-shadow: 0 1px 0 rgba(230, 204, 151, 0.15); }
[data-tema="escuro"] .rodape .simbolo { color: var(--azul-claro); }
[data-tema="escuro"] .rodape-legal { border-top-color: #332b1a; }
[data-tema="escuro"] .pilula, [data-tema="escuro"] .redondo { background: var(--papel); box-shadow: 0 0 0 1px #40351f inset; color: var(--texto); }
[data-tema="escuro"] .rodape-gigante { color: #221b0d; }

/* EFEITO DARK: grão de filme + vinheta por cima de tudo */
[data-tema="escuro"] body::before {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grao 1.2s steps(6) infinite;
}
[data-tema="escuro"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
[data-tema="escuro"] .capa-foto img { filter: saturate(0.75) contrast(1.2) brightness(0.62); }
@media (prefers-reduced-motion: reduce) { [data-tema="escuro"] body::before, [data-tema="escuro"] .ceu::before { animation: none; } }

/* ---------- Paleta preto + dourado (referência de site jurídico premium) --- */
[data-tema="escuro"] {
  --ouro-metal: linear-gradient(135deg, #f1dca6 0%, #d7ac57 38%, #a87b32 70%, #e6c98a 100%);
}
[data-tema="escuro"] .botao { --b-fundo: var(--ouro-metal); --b-cor: #140e05; --b-circ: #140e05;
  box-shadow: 0 0 0 1px rgba(255, 236, 190, 0.45) inset, 0 12px 34px -12px rgba(215, 172, 87, 0.65); }
[data-tema="escuro"] .botao .seta { color: #e6c98a; box-shadow: 0 0 0 3px rgba(20, 14, 5, 0.18); }
[data-tema="escuro"] .botao.contorno { --b-fundo: transparent; --b-cor: #f1dca6; box-shadow: 0 0 0 1px rgba(230, 201, 138, 0.5) inset; }
[data-tema="escuro"] .botao.escuro-b { --b-fundo: #17120a; --b-cor: #f1dca6; --b-circ: var(--ouro-metal);
  box-shadow: 0 0 0 1px rgba(230, 201, 138, 0.35) inset; }
[data-tema="escuro"] .botao.escuro-b .seta { background: var(--ouro-metal); color: #140e05; }
[data-tema="escuro"] .realce {
  background: var(--ouro-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-tema="escuro"] .servico-acao .seta, [data-tema="escuro"] .passo.ativo .passo-num { background: var(--ouro-metal); color: #140e05; }
[data-tema="escuro"] .processo-linha-cheia { background: var(--ouro-metal); }
[data-tema="escuro"] .etiqueta { border-color: rgba(230, 201, 138, 0.35); color: #e6c98a; }
/* fio dourado entre a capa e o resto, como na referência */
[data-tema="escuro"] .capa-cartao::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, #d7ac57 30%, #f1dca6 50%, #d7ac57 70%, transparent); }

/* ---------- Cartões de benefício como link direto para o WhatsApp ------- */
a.servico { color: inherit; cursor: pointer; }
.servico-desc { margin: 6px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.45; }
.servico-zap {
  display: flex; align-items: center; gap: 10px; margin: 4px 10px 10px; padding: 8px 8px 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; background: var(--ouro-metal, var(--azul)); color: #140e05;
}
.servico-zap > svg { width: 18px; height: 18px; flex: none; }
.servico-zap .seta { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #140e05; color: #e6c98a; }
.servico-zap .seta svg { width: 14px; height: 14px; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
a.servico:hover .servico-zap .seta svg { transform: rotate(45deg); }
a.servico:active { transform: scale(0.98); }

/* ---------- Seção fixa: foto da equipe ---------------------------------- */
.objeto-equipe { width: min(76vw, 420px); aspect-ratio: 4 / 5; margin: 2vh 0 0; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(241, 220, 166, 0.55), 0 0 0 6px rgba(215, 172, 87, 0.12), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 80px -10px rgba(215, 172, 87, 0.35); }
.objeto-equipe img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.05) brightness(0.92); }
.objeto-equipe::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 9, 4, 0.55)), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(12, 9, 4, 0.45)); }
.objeto-equipe .varre { position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: 2; pointer-events: none; transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, 0.45), transparent); mix-blend-mode: soft-light; }
@media (min-width: 900px) { .objeto-equipe { width: min(34vw, 440px); } }

/* ---------- Capa: foto nítida, sem luz amarela (07/11) ------------------ */
.capa-foto::before { display: none; }
.capa-foto::after {
  background: linear-gradient(180deg, rgba(12, 9, 4, 0.35) 0%, rgba(12, 9, 4, 0) 18%, rgba(12, 9, 4, 0) 52%, rgba(12, 9, 4, 0.88) 80%, var(--preto) 100%);
}
.capa-foto img, [data-tema="escuro"] .capa-foto img { filter: brightness(1) blur(0px); image-rendering: auto; }
/* grão de filme mais leve para não tirar a nitidez das fotos */
[data-tema="escuro"] body::before { opacity: 0.04; }
.capa-foto::after {
  background: linear-gradient(180deg, rgba(12, 9, 4, 0.35) 0%, rgba(12, 9, 4, 0) 18%, rgba(12, 9, 4, 0) 38%, rgba(12, 9, 4, 0.55) 52%, rgba(12, 9, 4, 0.9) 70%, var(--preto) 100%);
}
.capa h1, .capa-sub { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }