/* LP "Seja CFO as a Service" — visual da maquete v4 (md/28 §4). Sem barra colorida lateral/topo em cartões. */
:root {
  --branco:#FFFFFF; --azul:#064468; --marinho:#062B43; --papel:#F7F9FB; --linha:#E3E8EE; --suave:#4B6387;
  --a1:#A3C5F1; --a2:#83A2CD; --a3:#6582AA; --claro:#EAF2FF; --vivo:#418DFF; --fundo-ok:#1E53A3;
  --grad:linear-gradient(90deg,#1E53A3 0%,#418DFF 100%);
  --grad-claro:linear-gradient(90deg,#418DFF 0%,#A3C5F1 100%);
  --max:1240px; --raio:16px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--marinho); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1, h2, h3 { margin:0; letter-spacing:-.02em; }
p { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 32px; }
section { padding:104px 0; position:relative; }
.eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:600; color:var(--a3); margin-bottom:10px; }
h2 { font-size:clamp(28px,3vw,42px); line-height:1.12; font-weight:600; }
h3 { font-size:18px; font-weight:600; line-height:1.3; }
.lead { font-size:clamp(16px,1.25vw,19px); color:var(--suave); max-width:62ch; margin-top:14px; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-claro { background:var(--grad-claro); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cab-secao { margin-bottom:48px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:6px; border:0; background:var(--grad); color:#fff; font:600 15px/1.2 Inter,sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,83,163,.28); }
.btn:disabled { opacity:.7; cursor:wait; transform:none; box-shadow:none; }
.lnk { color:var(--azul); font-weight:600; font-size:15px; text-decoration:none; border-bottom:2px solid var(--a1); padding-bottom:2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid var(--vivo); outline-offset:3px; }
.ico { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--grad); flex:none; }
.ico svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Revelação ao rolar: só esconde quando o JS confirmou que consegue revelar */
.revelar-ativo [data-revelar] { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--atraso,0ms); }
.revelar-ativo [data-revelar].revelado { opacity:1; transform:none; }

/* Cabeçalho */
.cab { position:fixed; inset:0 0 auto; z-index:50; transition:background .3s, box-shadow .3s; }
.cab__in { display:flex; align-items:center; justify-content:space-between; height:76px; }
.cab__logo img { height:36px; width:auto; }
.cab__cta { font-size:14px; font-weight:600; padding:9px 16px; border-radius:6px; border:1.5px solid var(--linha); background:#fff; color:var(--marinho); text-decoration:none; }
.cab.solido { background:rgba(255,255,255,.96); box-shadow:0 6px 18px rgba(6,43,67,.08); }

/* 1. Topo */
.topo { min-height:max(640px, 88vh); display:flex; align-items:center; background:var(--papel); overflow:hidden; padding:120px 0 96px; }
.topo__foto { position:absolute; inset:0 0 0 auto; width:55%; background:url('../img/topo-cfo.webp') 70% center/cover; -webkit-mask-image:linear-gradient(to left,#000 60%,transparent); mask-image:linear-gradient(to left,#000 60%,transparent); }
.topo__foto::after { content:""; position:absolute; inset:0; background:linear-gradient(to left, rgba(6,68,104,.10), rgba(6,68,104,0) 60%); }
.topo__txt { position:relative; z-index:1; width:100%; }
.topo__txt > * { max-width:600px; }
.topo .topo__txt h1 { max-width:740px; }
.topo h1 { font-size:clamp(40px,5vw,64px); line-height:1.04; font-weight:600; letter-spacing:-.03em; }
.acoes { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:30px; }
.selos { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.selos li { font-size:13px; font-weight:500; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid var(--linha); }

/* 2. Vantagens */
.vant__grupos { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vant__grupo { background:var(--papel); border-radius:var(--raio); padding:28px; }
.vant__grupo h3 { margin:16px 0 8px; font-size:20px; }
.vant__grupo li { padding:11px 0; border-top:1px solid var(--linha); font-size:15px; color:var(--suave); }
.vant__grupo li strong { color:var(--marinho); font-weight:600; }
.vant__honesto { margin-top:28px; padding:16px 20px; border-radius:12px; background:var(--claro); color:var(--suave); font-size:15px; }

/* 3. O papel do CFO */
.papel { background:var(--marinho); color:#fff; }
.papel .eyebrow { color:var(--a1); } .papel .lead { color:#C9D6E3; }
.papel__semanas { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:none; }
.papel__semanas li { border-radius:var(--raio); padding:24px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.papel__semanas li.papel__voce { background:rgba(65,141,255,.14); box-shadow:inset 0 0 0 1px rgba(163,197,241,.5); }
.papel__quem { display:block; font-size:12px; font-weight:600; color:var(--a1); margin-bottom:10px; letter-spacing:.02em; }
.papel__semanas h3 { color:#fff; margin-bottom:8px; }
.papel__semanas p { color:#C9D6E3; font-size:15px; }

/* 4. Tecnologia (fundo branco com movimento em cinza) */
.tec { background:#fff; overflow:hidden; }
.tec__fundo { position:absolute; inset:0; pointer-events:none; }
.tec__fundo svg { position:absolute; inset:0; width:100%; height:100%; }
.tec__pontos { position:absolute; inset:0; background-image:radial-gradient(#DCE3EA 1.2px, transparent 1.3px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse at 30% 50%,#000 0%,transparent 70%); animation:deriva 30s linear infinite; }
.tec__onda { fill:none; stroke:#D5DDE6; stroke-width:1.2; stroke-dasharray:6 10; vector-effect:non-scaling-stroke; animation:corre 14s linear infinite; }
.tec__onda--b { stroke:#E3E8EE; stroke-width:1; animation-duration:22s; animation-direction:reverse; }
.tec__onda--azul { stroke:var(--vivo); stroke-width:1.6; opacity:.35; stroke-dasharray:1200; animation:desenha 6s ease-in-out infinite alternate; }
.tec__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.tec__cena { position:relative; height:440px; }
.tec__grafico { position:absolute; left:50%; top:50%; width:220px; height:140px; transform:translate(-50%,-50%); display:flex; align-items:flex-end; gap:16px; }
.tec__grafico i { flex:1; height:60%; border-radius:6px 6px 0 0; background:var(--linha); transform-origin:bottom; animation:sobe 3.2s ease-in-out infinite alternate; }
.tec__grafico i:nth-child(1){height:45%} .tec__grafico i:nth-child(2){height:62%;animation-delay:-.6s} .tec__grafico i:nth-child(3){height:52%;animation-delay:-1.2s}
.tec__grafico i:nth-child(4){height:80%;animation-delay:-1.8s} .tec__grafico i:nth-child(5){height:68%;animation-delay:-2.4s} .tec__grafico i:nth-child(6){height:95%;animation-delay:-.3s}
.tec__grafico i.az { background:linear-gradient(180deg,#418DFF,#1E53A3); }
.tec__card { position:absolute; display:flex; gap:12px; align-items:center; max-width:250px; padding:12px 16px 12px 12px; border-radius:16px; background:#fff; box-shadow:0 14px 32px rgba(6,43,67,.10), inset 0 0 0 1px var(--linha); animation:flutua 6s ease-in-out infinite; }
.tec__card strong { display:block; font-size:14.5px; } .tec__card small { display:block; font-size:12.5px; color:var(--suave); line-height:1.35; margin-top:2px; }
.ico--p { width:38px; height:38px; } .ico--p svg { width:19px; height:19px; }
.tec__card--1 { left:0; top:4%; } .tec__card--2 { right:0; top:16%; animation-delay:-1.5s; }
.tec__card--3 { left:2%; bottom:14%; animation-delay:-3s; } .tec__card--4 { right:4%; bottom:2%; animation-delay:-4.5s; }
.tec__passos { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 18px; }
.tec__passos li { font-size:14px; padding:9px 15px; border-radius:999px; background:var(--papel); border:1px solid var(--linha); }
.tec__passos b { color:var(--vivo); margin-right:6px; }
.tec__stack { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tec__stack li { font-size:12.5px; color:var(--a3); border:1px solid var(--linha); border-radius:6px; padding:4px 10px; background:#fff; }
@keyframes deriva { to { background-position:220px 110px; } }
@keyframes corre { to { stroke-dashoffset:-320; } }
@keyframes desenha { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }
@keyframes sobe { from { transform:scaleY(.6); } to { transform:scaleY(1); } }
@keyframes flutua { 50% { transform:translateY(-8px); } }

/* 5. Para quem é */
.quem__cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.quem__col { border-radius:var(--raio); padding:28px; }
.quem__col--sim { background:var(--claro); } .quem__col--nao { background:var(--papel); }
.quem__col h3 { margin-bottom:12px; }
.quem__col li { position:relative; padding:8px 0 8px 30px; color:#334663; }
.quem__col--sim li::before { content:"✓"; position:absolute; left:0; top:7px; width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; }
.quem__col--nao li::before { content:"–"; position:absolute; left:5px; color:var(--a2); font-weight:700; }

/* 6. Jornada */
.jorn { background:var(--papel); }
.jorn__linha { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.jorn__linha::before { content:""; position:absolute; top:19px; left:10%; right:10%; height:2px; background:var(--grad); opacity:.35; }
.jorn__linha li { position:relative; text-align:center; }
.jorn__ponto { width:40px; height:40px; margin:0 auto 14px; border-radius:50%; background:#fff; border:2px solid var(--vivo); box-shadow:0 0 0 8px rgba(65,141,255,.14); display:grid; place-items:center; font-weight:700; color:var(--fundo-ok); }
.jorn__linha h3 { font-size:16px; margin-bottom:4px; }
.jorn__linha p { font-size:14px; color:var(--suave); }

/* 7. Remuneração */
.rem__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rem__card { border:1px solid var(--linha); border-radius:var(--raio); padding:28px; }
.selo { display:inline-block; font-size:12px; font-weight:700; color:#fff; background:var(--grad); border-radius:999px; padding:4px 12px; margin-bottom:14px; }
.rem__card h3 { margin-bottom:8px; } .rem__card p { color:var(--suave); font-size:15px; }
.rem__nota { margin-top:24px; display:flex; gap:12px; align-items:flex-start; color:var(--suave); font-size:15px; }
.rem__ok { flex:none; width:26px; height:26px; border-radius:50%; background:var(--claro); color:var(--fundo-ok); font-weight:700; display:grid; place-items:center; }

/* 8. Sócios */
.soc { background:var(--papel); }
.soc__duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.soc__p { display:flex; gap:20px; align-items:flex-start; background:#fff; border-radius:var(--raio); padding:28px; }
.soc__p img { width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none; }
.soc__cargo { font-size:13px; color:var(--a3); margin:2px 0 10px; }
.soc__p p:last-child { color:var(--suave); font-size:15px; }

/* 9. FAQ */
.faq__in { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.faq__lista details { border-bottom:1px solid var(--linha); }
.faq__lista summary { list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative; font-weight:600; font-size:17px; }
.faq__lista summary::-webkit-details-marker { display:none; }
.faq__lista summary::after { content:"+"; position:absolute; right:4px; top:16px; font-size:24px; font-weight:400; color:var(--vivo); }
.faq__lista details[open] summary::after { content:"−"; }
.faq__lista details p { padding:0 0 20px; color:var(--suave); }

/* 10. Formulário */
.form { background:radial-gradient(1000px 460px at 85% 0%, #0F4A75 0%, var(--marinho) 60%); color:#fff; }
.form .eyebrow { color:var(--a1); } .form .lead { color:#C9D6E3; }
.form__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.form__passos { margin-top:18px; counter-reset:passo; }
.form__passos li { counter-increment:passo; position:relative; padding:6px 0 6px 38px; color:#E6EEF5; }
.form__passos li::before { content:counter(passo); position:absolute; left:0; top:5px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--a1); }
.bilhete { background:#fff; color:var(--marinho); border-radius:20px; padding:30px; display:grid; gap:14px;
  -webkit-mask:radial-gradient(circle 13px at 0 92px,#0000 12px,#000 13px) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 92px,#0000 12px,#000 13px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 92px,#0000 12px,#000 13px) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 92px,#0000 12px,#000 13px) right/51% 100% no-repeat; }
.bilhete__rot { text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; font-weight:600; color:var(--vivo); }
.bilhete__tit { font-size:20px; font-weight:600; margin-top:-8px; }
.bilhete__corte { border-top:1.5px dashed var(--linha); margin:2px -30px; }
.form-campos { display:grid; gap:14px; }
.campo { display:grid; gap:6px; font-size:14px; font-weight:500; }
.campo input { font:400 16px/1.4 Inter,sans-serif; color:var(--marinho); padding:12px 14px; border-radius:8px; border:1px solid var(--linha); background:var(--papel); }
.campo input:focus { border-color:var(--vivo); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(65,141,255,.18); }
.campo input[aria-invalid="true"] { border-color:#C0392B; }
.campo small { color:#C0392B; font-size:13px; min-height:0; }
.campo small:empty { display:none; }
.btn--cheio { justify-content:center; width:100%; padding:15px; font-size:16px; }
.bilhete__priv { font-size:12.5px; color:var(--suave); }
.bilhete__priv a, .aviso a { color:var(--azul); }
.isca { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-resultado { padding:18px; border-radius:12px; background:var(--claro); color:var(--marinho); }
.form-resultado--erro { background:#FDECEA; }
.form-resultado p { margin-bottom:12px; }
.form-resultado a { font-weight:600; color:var(--azul); }
/* Avisos do envio sem JS (ver regras no fim do arquivo) */
.aviso { display:none; padding:14px; border-radius:10px; font-size:14px; }
.aviso--ok { background:var(--claro); } .aviso--erro { background:#FDECEA; }

/* 11. Sobre */
.sobre__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.sobre__servicos { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.sobre__servicos li { font-size:13px; padding:7px 13px; border-radius:999px; background:var(--papel); border:1px solid var(--linha); }
.sobre__fatos { display:grid; gap:12px; }
.sobre__fatos li { display:flex; gap:18px; align-items:center; padding:18px 22px; border-radius:14px; background:var(--papel); }
.sobre__fatos strong { min-width:132px; font-size:22px; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sobre__fatos span { color:var(--suave); font-size:15px; }

/* Rodapé */
.rod { background:#041F31; color:var(--a2); font-size:13px; padding:28px 0; }
.rod__in { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
.rod a { color:#C9D6E3; text-decoration:none; } .rod a:hover { color:#fff; }

/* Tablet */
@media (max-width:1099px) {
  section { padding:80px 0; }
  .vant__grupos, .rem__cards { grid-template-columns:1fr; }
  .papel__semanas { grid-template-columns:1fr 1fr; }
  .tec__grid, .form__grid, .sobre__grid, .faq__in { grid-template-columns:1fr; gap:40px; }
  .tec__cena { height:400px; max-width:620px; width:100%; margin:0 auto; }
  .jorn__linha { grid-template-columns:1fr; gap:22px; }
  .jorn__linha::before { top:0; bottom:0; left:19px; right:auto; width:2px; height:auto; }
  .jorn__linha li { display:grid; grid-template-columns:40px 1fr; column-gap:18px; text-align:left; }
  .jorn__ponto { margin:0; grid-row:span 2; }
}
/* Celular */
@media (max-width:767px) {
  .wrap { padding:0 20px; }
  section { padding:64px 0; }
  .cab__in { height:64px; } .cab__logo img { height:30px; } .cab__cta { font-size:13px; padding:8px 12px; }
  .topo { display:block; min-height:auto; padding:64px 0 56px; }
  .topo__foto { position:relative; inset:auto; width:100%; height:300px; background-image:url('../img/topo-cfo-celular.webp'); background-position:60% 20%; -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent); }
  .topo__txt { margin-top:-48px; }
  .papel__semanas, .quem__cols, .soc__duo { grid-template-columns:1fr; }
  .soc__p { flex-direction:column; }
  .tec__cena { height:auto; display:grid; gap:12px; }
  .tec__grafico { display:none; }
  .tec__card { position:static; max-width:none; animation:none; }
  .bilhete { padding:24px 20px; }
  .bilhete__corte { margin:2px -20px; }
  .sobre__fatos strong { min-width:110px; font-size:19px; }
  .rod__in { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .tec__pontos, .tec__onda, .tec__grafico i, .tec__card { animation:none !important; }
  .revelar-ativo [data-revelar] { opacity:1; transform:none; transition:none; }
}

/* Sem JS: o PHP volta com #formulario-ok ou #formulario-erro e o aviso certo aparece pelo :target */
.ancora { position:absolute; top:0; }
html:not(.js) #formulario-ok:target ~ .wrap [data-sem-js-ok] { display:block; }
html:not(.js) #formulario-erro:target ~ .wrap [data-sem-js-erro] { display:block; }