/* JurisAtende, versão B = A + passada Impeccable (craft floor), 22/08/2026.
   Mundo visual: luxo jurídico noturno. Petróleo profundo como dominante,
   marfim como voz, dourado só em fio, numeral e selo. Display serifada
   gigante (Instrument Serif), corpo Manrope. Camadas, grão, foto sangrando,
   uma entrada orquestrada no herói e revelação ao rolar. */

:root {
  --noite:       #081a2e;
  --petroleo:    #0f2a47;
  --petroleo-2:  #173a5e;
  --marfim:      #f4eee1;
  --marfim-2:    #eae2d0;
  --branco:      #fffaf0;
  --tinta:       #14202d;
  --tinta-suave: #5a6472;
  --marfim-suave: #b9b0a0;     /* texto de apoio sobre petróleo */
  --ouro:        #c9a449;
  --ouro-escuro: #8f7129;
  --ouro-claro:  #ead79a;
  --regua-escura: rgba(201, 164, 73, 0.28);
  --regua-clara:  #d6cdb8;

  --display: 'Instrument Serif', 'Times New Roman', serif;
  --sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-body: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --t-lead: clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
  --t-h2:   clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);
  --t-h1:   clamp(3.2rem, 1.8rem + 6vw, 7.2rem);

  --secao: clamp(4.5rem, 3rem + 5vw, 9rem);
  --bloco: clamp(1.5rem, 1.1rem + 1.4vw, 2.6rem);
  --calha: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
  --max:   1240px;

  --rapido: 180ms;
  --lento:  900ms;
  --suave:  cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--ouro-escuro) var(--noite); }
body {
  margin: 0; background: var(--noite); color: var(--marfim);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; caret-color: var(--ouro); overflow-x: clip;
}
/* Grão de papel fotográfico sobre tudo */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 0.98; margin: 0; letter-spacing: -0.015em; }
h1 em, h2 em, .italico { font-style: italic; color: var(--ouro); }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; }
::selection { background: var(--ouro); color: var(--noite); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.largura { max-width: var(--max); margin-inline: auto; padding-inline: var(--calha); }

/* Revelação ao rolar (só quando o JS marca .js) */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity var(--lento) var(--suave), transform var(--lento) var(--suave); }
.js .revela.visivel, .sem-movimento .revela { opacity: 1; transform: none; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.7rem; border-radius: 2px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--rapido) var(--suave), border-color var(--rapido) var(--suave), color var(--rapido) var(--suave), transform var(--rapido) var(--suave), box-shadow var(--rapido) var(--suave);
}
.botao-ouro { background: var(--ouro); color: var(--noite); }
.botao-ouro:hover { background: var(--ouro-claro); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(201, 164, 73, 0.7); }
.botao-contorno { border-color: var(--regua-escura); color: var(--marfim); }
.botao-contorno:hover { border-color: var(--ouro); color: var(--ouro-claro); }
.botao-petroleo { background: var(--petroleo); color: var(--marfim); }
.botao-petroleo:hover { background: var(--petroleo-2); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(15, 42, 71, 0.8); }

/* ---------- Topo: transparente sobre o herói, com fio dourado embaixo ---------- */
.topo { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--noite) 72%, transparent); border-bottom: 1px solid var(--regua-escura); }
.topo-barra { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding-block: 0.8rem; }
.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marca-logo { height: 2rem; width: auto; display: block; }
.marca-nome { font-family: var(--display); font-size: 1.9rem; color: var(--marfim); letter-spacing: -0.01em; }
.marca-nome::first-letter { color: var(--ouro); }
.marca-por { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marfim-suave); }
.topo-nav { margin-left: auto; display: flex; gap: 1.6rem; }
.topo-nav a { font-size: 0.9rem; text-decoration: none; color: var(--marfim-suave); transition: color var(--rapido) var(--suave); }
.topo-nav a:hover { color: var(--marfim); }
.topo-entrar { font-size: 0.88rem; color: var(--marfim); }
.topo-cta { padding: 0.6rem 1.1rem; font-size: 0.86rem; }

/* ---------- Herói: foto da balança sangrando à direita, título gigante por cima ---------- */
.heroi { position: relative; overflow: hidden; min-height: 92vh; display: grid; align-items: end; isolation: isolate; }
.heroi-foto {
  position: absolute; top: -6%; right: -4%; width: min(58vw, 760px); height: 112%; object-fit: cover; object-position: 50% 35%;
  z-index: -2; filter: saturate(0.9) brightness(0.95);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: foto-entra 1.6s var(--suave) both;
}
.heroi-veu { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 20% 60%, color-mix(in srgb, var(--noite) 92%, transparent), transparent 70%), linear-gradient(to top, var(--noite) 0%, transparent 40%); }
.heroi-conteudo { padding-block: clamp(6rem, 8vw, 9rem) clamp(3rem, 5vw, 5rem); position: relative; }
.heroi-fio { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--ouro); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.6rem; }
.heroi-fio::before { content: ""; width: 3rem; height: 1px; background: var(--ouro); }
.heroi h1 { font-size: var(--t-h1); max-width: 12ch; text-wrap: balance; }
.heroi-apoio { font-size: var(--t-lead); color: var(--marfim-suave); max-width: 46ch; margin-top: 1.6rem; }
.heroi-apoio strong { color: var(--marfim); font-weight: 600; }
.heroi-form { display: flex; gap: 0.5rem; max-width: 36rem; margin-top: 2rem; padding: 0.45rem; background: color-mix(in srgb, var(--marfim) 8%, transparent); border: 1px solid var(--regua-escura); border-radius: 3px; backdrop-filter: blur(8px); }
.heroi-form input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 0.85rem 1rem; background: transparent; border: 0; color: var(--marfim); }
.heroi-form input::placeholder { color: var(--marfim-suave); }
.heroi-form input:focus { outline: none; }
.heroi-nota { margin-top: 1rem; font-size: 0.88rem; color: var(--marfim-suave); }
.heroi-nota a { color: var(--marfim); }
/* Entrada orquestrada: cada peça chega com atraso próprio */
.entra { animation: sobe 1s var(--suave) both; }
.entra:nth-child(1) { animation-delay: 0.1s; }
.entra:nth-child(2) { animation-delay: 0.25s; }
.entra:nth-child(3) { animation-delay: 0.4s; }
.entra:nth-child(4) { animation-delay: 0.55s; }
.entra:nth-child(5) { animation-delay: 0.7s; }
@keyframes sobe { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes foto-entra { from { opacity: 0; transform: scale(1.04) translateX(2%); } to { opacity: 1; transform: none; } }

/* Fita de capacidades: fio dourado com os itens correndo */
.fita { border-block: 1px solid var(--regua-escura); overflow: hidden; background: color-mix(in srgb, var(--petroleo) 50%, var(--noite)); }
.fita-trilho { display: flex; width: max-content; animation: fita-corre 34s linear infinite; }
.fita ul { list-style: none; margin: 0; padding: 0.85rem 0; display: flex; gap: 3rem; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marfim-suave); white-space: nowrap; }
.fita li { display: inline-flex; align-items: center; gap: 3rem; }
.fita li::after { content: ""; width: 0.3rem; height: 0.3rem; background: var(--ouro); transform: rotate(45deg); }
@keyframes fita-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Origem: marfim, declaração enorme e três fatos ---------- */
.origem { background: var(--marfim); color: var(--tinta); padding-block: var(--secao); }
.origem-grade { display: grid; gap: var(--bloco); align-items: start; }
@media (min-width: 900px) { .origem-grade { grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 6vw, 7rem); } }
.origem h2 { font-size: var(--t-h2); color: var(--petroleo); text-wrap: balance; }
.origem h2 em { color: var(--ouro-escuro); }
.origem-apoio { margin-top: 1.4rem; font-size: var(--t-lead); color: var(--tinta-suave); max-width: 52ch; }
.fatos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regua-clara); }
.fatos li { padding: 1.2rem 0; border-bottom: 1px solid var(--regua-clara); display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.8rem; align-items: baseline; }
.fatos .num { font-family: var(--display); font-size: 1.6rem; color: var(--ouro-escuro); }
.fatos strong { display: block; font-weight: 600; color: var(--petroleo); }
.fatos span.det { color: var(--tinta-suave); font-size: 0.95rem; }

/* ---------- O que faz: petróleo, foto presa à esquerda, lista com numerais ---------- */
.faz { background: var(--petroleo); padding-block: var(--secao); position: relative; }
.faz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50rem 30rem at 100% 0%, color-mix(in srgb, var(--ouro) 9%, transparent), transparent 60%); pointer-events: none; }
.faz-grade { display: grid; gap: var(--bloco); align-items: start; position: relative; }
@media (min-width: 940px) { .faz-grade { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 7rem); } }
.faz-cabeca h2 { font-size: var(--t-h2); text-wrap: balance; }
.faz-cabeca p { margin-top: 1.2rem; color: var(--marfim-suave); font-size: var(--t-lead); max-width: 36ch; }
.faz-figura { margin: 2rem 0 0; position: sticky; top: 6rem; }
.faz-figura img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.8); }
.faz-figura::after { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1px solid var(--regua-escura); border-radius: 2px; z-index: -1; }
.faz-lista { list-style: none; margin: 0; padding: 0; counter-reset: faz; }
.faz-lista li { counter-increment: faz; position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--regua-escura); transition: padding-left var(--rapido) var(--suave); }
.faz-lista li:last-child { border-bottom: 1px solid var(--regua-escura); }
.faz-lista li::before { content: counter(faz, decimal-leading-zero); font-family: var(--display); font-size: 2.6rem; line-height: 0.9; color: var(--ouro); font-variant-numeric: tabular-nums; }
.faz-lista li:hover { padding-left: 0.5rem; }
.faz-lista h3 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.faz-lista p { color: var(--marfim-suave); font-size: 0.97rem; max-width: 52ch; }

/* ---------- Como funciona: marfim, degraus em diagonal ---------- */
.como { background: var(--marfim); color: var(--tinta); padding-block: var(--secao); }
.como-cabeca { display: grid; gap: 1rem; margin-bottom: var(--bloco); }
@media (min-width: 800px) { .como-cabeca { grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; } }
.como h2 { font-size: var(--t-h2); color: var(--petroleo); text-wrap: balance; }
.como h2 em { color: var(--ouro-escuro); }
.como-cabeca p { color: var(--tinta-suave); font-size: var(--t-lead); max-width: 40ch; }
.degraus { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .degraus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .degraus { grid-template-columns: repeat(4, 1fr); gap: 0; } .degrau:nth-child(2) { margin-top: 2.5rem; } .degrau:nth-child(3) { margin-top: 5rem; } .degrau:nth-child(4) { margin-top: 7.5rem; } }
.degrau { position: relative; padding: 1.6rem 1.4rem 1.8rem 0; border-top: 1px solid var(--petroleo); }
@media (min-width: 1000px) { .degrau { padding-right: 2rem; } }
.degrau-num { font-family: var(--display); font-size: 3.4rem; line-height: 0.9; color: var(--ouro-escuro); display: block; margin-bottom: 0.9rem; }
.degrau h3 { font-size: 1.55rem; color: var(--petroleo); margin-bottom: 0.45rem; }
.degrau p { color: var(--tinta-suave); font-size: 0.97rem; }

/* ---------- Exemplo: petróleo, citação enorme e telefone inclinado ---------- */
.exemplo { background: var(--noite); padding-block: var(--secao); position: relative; overflow: hidden; }
.exemplo::before { content: ""; position: absolute; left: -10rem; top: -10rem; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ouro) 10%, transparent), transparent); pointer-events: none; }
.exemplo-grade { display: grid; gap: var(--bloco); align-items: center; }
@media (min-width: 900px) { .exemplo-grade { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 7rem); } }
.exemplo h2 { font-size: var(--t-h2); text-wrap: balance; }
.exemplo-apoio { margin-top: 1.2rem; color: var(--marfim-suave); font-size: var(--t-lead); max-width: 40ch; }
.exemplo .botao { margin-top: 1.8rem; }
.telefone { background: var(--branco); color: var(--tinta); border-radius: 18px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--regua-escura); max-width: 26rem; margin-inline: auto; transition: transform var(--lento) var(--suave); }
.telefone:hover { transform: rotate(0deg); }
.telefone-topo { display: flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--regua-clara); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; }
.ponto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ouro); }
.telefone-corpo { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--marfim); }
.balao { max-width: 86%; padding: 0.65rem 0.9rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; }
.balao-in { align-self: flex-start; background: var(--branco); border: 1px solid var(--regua-clara); border-bottom-left-radius: 3px; }
.balao-out { align-self: flex-end; background: var(--petroleo); color: var(--marfim); border-bottom-right-radius: 3px; }
.telefone-nota { padding: 0.8rem 1.1rem; font-size: 0.8rem; color: var(--tinta-suave); border-top: 1px solid var(--regua-clara); }

/* ---------- Sigilo: marfim, selo giratório e cláusulas ---------- */
.sigilo { background: var(--marfim-2); color: var(--tinta); padding-block: var(--secao); }
.sigilo-grade { display: grid; gap: var(--bloco); align-items: start; }
@media (min-width: 900px) { .sigilo-grade { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); } }
.sigilo h2 { font-size: var(--t-h2); color: var(--petroleo); text-wrap: balance; }
.sigilo h2 em { color: var(--ouro-escuro); }
.sigilo-apoio { margin-top: 1.2rem; color: var(--tinta-suave); font-size: var(--t-lead); max-width: 34ch; }
/* Selo: texto em círculo que gira devagar; a marca da seção */
.selo { position: relative; width: 11rem; height: 11rem; margin-top: 2rem; }
.selo svg { width: 100%; height: 100%; animation: gira 28s linear infinite; }
.selo text { font-family: var(--sans); font-size: 9.2px; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--ouro-escuro); font-weight: 700; }
.selo-centro { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; color: var(--petroleo); }
@keyframes gira { to { transform: rotate(360deg); } }
.clausulas { display: grid; border-top: 1px solid var(--petroleo); }
@media (min-width: 760px) { .clausulas { grid-template-columns: 1fr 1fr; } }
.clausula { padding: 1.5rem 1.5rem 1.6rem 0; border-bottom: 1px solid var(--regua-clara); display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.8rem; }
@media (min-width: 760px) { .clausula:nth-child(odd) { border-right: 1px solid var(--regua-clara); } .clausula:nth-child(even) { padding-left: 1.5rem; } }
.clausula-num { font-family: var(--display); font-size: 1.3rem; color: var(--ouro-escuro); padding-top: 0.15rem; }
.clausula h3 { font-size: 1.45rem; color: var(--petroleo); margin-bottom: 0.3rem; }
.clausula p { color: var(--tinta-suave); font-size: 0.97rem; }

/* ---------- Perguntas: petróleo ---------- */
.perguntas { background: var(--petroleo); padding-block: var(--secao); }
.perguntas-grade { display: grid; gap: var(--bloco); }
@media (min-width: 900px) { .perguntas-grade { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); } }
.perguntas h2 { font-size: var(--t-h2); text-wrap: balance; }
.faq-lista details { border-top: 1px solid var(--regua-escura); padding: 1.2rem 0; }
.faq-lista details:last-child { border-bottom: 1px solid var(--regua-escura); }
.faq-lista summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-family: var(--display); font-size: 1.55rem; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: ""; flex: 0 0 auto; width: 0.9rem; height: 0.9rem; background: linear-gradient(var(--ouro), var(--ouro)) center / 100% 1.5px no-repeat, linear-gradient(var(--ouro), var(--ouro)) center / 1.5px 100% no-repeat; transition: transform var(--rapido) var(--suave); }
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details p { color: var(--marfim-suave); margin-top: 0.7rem; max-width: 60ch; }

/* ---------- Contato: painel marfim flutuando sobre a noite ---------- */
.contato { background: var(--noite); padding-block: 0 var(--secao); }
.contato-painel { background: var(--marfim); color: var(--tinta); border-radius: 4px; padding: clamp(1.75rem, 1rem + 3vw, 4rem); display: grid; gap: var(--bloco); transform: translateY(-3rem); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.9); position: relative; }
.contato-painel::before { content: ""; position: absolute; inset: 0.9rem; border: 1px solid var(--regua-clara); border-radius: 2px; pointer-events: none; }
@media (min-width: 900px) { .contato-painel { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } }
.contato-painel h2 { font-size: var(--t-h2); color: var(--petroleo); max-width: 14ch; }
.contato-painel h2 em { color: var(--ouro-escuro); }
.contato-apoio { color: var(--tinta-suave); font-size: var(--t-lead); margin: 1rem 0 1.6rem; max-width: 40ch; }
.selos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.selos li { border: 1px solid var(--regua-clara); border-radius: 999px; padding: 0.35rem 0.8rem; color: var(--tinta-suave); }
.form { display: grid; gap: 0.9rem; position: relative; }
.form-titulo { font-family: var(--display); font-size: 1.5rem; color: var(--petroleo); }
.form label { display: grid; gap: 0.3rem; }
.form label span { font-size: 0.85rem; font-weight: 600; }
.form input { font: inherit; font-size: 0.97rem; padding: 0.8rem 0.9rem; border: 1px solid var(--regua-clara); border-radius: 3px; background: var(--branco); color: var(--tinta); transition: border-color var(--rapido) var(--suave); }
.form input:focus { border-color: var(--petroleo); outline: none; }
.form button { justify-self: start; margin-top: 0.3rem; }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--regua-escura); color: var(--marfim-suave); font-size: 0.92rem; }
.rodape-grade { display: grid; gap: var(--bloco); padding-block: var(--bloco); }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr 0.8fr 1fr; gap: clamp(2rem, 5vw, 5rem); } }
.rodape-quem .marca-logo { height: 1.8rem; width: auto; display: block; }
.rodape-quem img { height: 1.6rem; width: auto; display: block; margin: 0.8rem 0 0.6rem; }
.rodape-quem p { max-width: 38ch; }
.rodape-bloco h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); margin: 0 0 0.8rem; }
.rodape-bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rodape-bloco a { text-decoration: none; transition: color var(--rapido) var(--suave); }
.rodape-bloco a:hover { color: var(--marfim); }
.rodape-base { border-top: 1px solid var(--regua-escura); font-size: 0.8rem; padding: 1rem var(--calha); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.rodape-base p { margin: 0; }
.rodape-base a { color: var(--ouro); text-decoration: none; }

@media (max-width: 760px) {
  .topo-nav, .topo-entrar { display: none; }
  .heroi { min-height: auto; }
  .heroi-foto { position: absolute; top: 0; right: -20%; width: 90vw; height: 60%; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
  .heroi-conteudo { padding-top: clamp(10rem, 45vw, 14rem); }
  .heroi-form { flex-direction: column; }
  .faz-figura { position: static; margin-bottom: 1.5rem; }
  .telefone { transform: none; }
  .contato-painel { transform: none; margin-top: var(--bloco); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .fita-trilho { animation: none; }
}


/* ===== Passada Impeccable ===== */
/* Sem eyebrow: o título abre o herói; a entrada escalonada começa nele */
.entra:nth-child(1) { animation-delay: 0.05s; }
/* Sombra com deslocamento, não halo: o painel de contato e o telefone */
.telefone { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.85); }
/* Numerais grandes só onde a ordem informa: nas etapas. Na lista do que faz, discretos */
.faz-lista li::before { font-size: 1.5rem; padding-top: 0.3rem; }
.faz-lista li { grid-template-columns: 3.2rem 1fr; }
/* Hover sem deslocar layout (padding mexe em fluxo) */
.faz-lista li:hover { padding-left: 0; }
.faz-lista li:hover h3 { color: var(--ouro-claro); }
.faz-lista h3 { transition: color var(--rapido) var(--suave); }
/* Selo gira só enquanto o visitante está sobre ele: decoração que responde, não ruído */
.selo svg { animation-play-state: paused; }
.selo:hover svg { animation-play-state: running; }

/* Mobile: cabeçalho enxuto e foto mais contida atrás do título */
@media (max-width: 760px) {
  .marca-por { display: none; }
  .topo-cta { white-space: nowrap; padding: 0.55rem 0.85rem; font-size: 0.8rem; }
  .heroi-foto { opacity: 0.38; }
  .heroi-fio { max-width: 18ch; }
}


/* Captura no herói como linha editorial, não caixa (22/08, pedido do Marcelo) */
.heroi-linha { max-width: 34rem; margin-top: 2rem; }
.heroi-linha label { display: block; font-size: 0.9rem; color: var(--marfim-suave); margin-bottom: 0.6rem; }
.heroi-linha-campo { display: flex; align-items: flex-end; gap: 1.2rem; border-bottom: 1px solid var(--ouro); padding-bottom: 0.6rem; }
.heroi-linha-campo input { flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; padding: 0.4rem 0; background: transparent; border: 0; color: var(--marfim); letter-spacing: 0.02em; }
.heroi-linha-campo input::placeholder { color: color-mix(in srgb, var(--marfim-suave) 70%, transparent); }
.heroi-linha-campo input:focus { outline: none; }
.heroi-linha-campo button { font-family: var(--display); font-size: 1.25rem; color: var(--ouro); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; white-space: nowrap; transition: color var(--rapido) var(--suave), transform var(--rapido) var(--suave); }
.heroi-linha-campo button:hover { color: var(--ouro-claro); transform: translateX(3px); }
.botao { font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 600px) { .heroi-linha-campo { flex-direction: column; align-items: stretch; gap: 0.6rem; } }

/* Topo com Montserrat: nada quebra linha */
.topo-nav a, .topo-entrar, .topo-cta { white-space: nowrap; }
.topo-nav { gap: 1.3rem; }
.topo-nav a { font-size: 0.86rem; }
.topo-cta { font-size: 0.82rem; padding: 0.6rem 1rem; }
@media (max-width: 1100px) { .marca-por { display: none; } .topo-nav { gap: 1rem; } }

/* Avisos do formulário e contraste no mobile */
.lead-confirmado { display: grid; gap: 0.6rem; padding: 1.4rem; border: 1px solid var(--regua-clara); border-radius: 4px; background: var(--branco); color: var(--tinta); }
.lead-confirmado a, .lead-fallback a { color: var(--ouro-escuro); font-weight: 600; }
.lead-fallback { font-size: 0.88rem; color: var(--marfim-suave); margin-top: 0.6rem; }