/* Vivo v2.2 · a camada visual compartilhada por todas as páginas.
   Esquadro da marca, cartão de visual, revelação ao rolar e um visual próprio por ferramenta.
   Mola da marca: smooth 0,5 s, sem quique. Com movimento reduzido, tudo aparece pronto. */

/* ---------- Esquadro: a geometria da logo marca o que importa ---------- */
.esquadro{position:relative}
.esquadro::before,.esquadro::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none}
.esquadro::before{top:-12px;left:-12px;border-top:9px solid var(--petrol);border-left:9px solid var(--petrol);border-top-left-radius:26px}
.esquadro::after{bottom:-12px;right:-12px;border-bottom:9px solid var(--tensao);border-right:9px solid var(--tensao);border-bottom-right-radius:26px}

/* ---------- Abertura das ferramentas: título grande à esquerda, visual vivo à direita ---------- */
main.tem-vis{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,5vw,80px);align-items:start}
main.tem-vis>*{grid-column:1/-1;min-width:0}
main.tem-vis>.tool-head{grid-column:1;grid-row:1;grid-template-columns:1fr;align-self:center}
main.tem-vis>.th-vis{grid-column:2;grid-row:1;align-self:center;margin-block:clamp(28px,5vw,64px)}
.tem-vis .tool-head{padding-block:clamp(32px,5vw,80px) clamp(28px,4vw,56px)}
.tem-vis .tool-head h1{font-size:clamp(2.3rem,1.2rem + 3.2vw,4.1rem);line-height:1;letter-spacing:-.03em;max-width:14ch}
.tem-vis .tool-head .lead{font-size:clamp(1.08rem,1rem + .35vw,1.28rem);max-width:44ch}

.th-vis{margin:0;background:#FFFFFF;border-radius:30px;padding:clamp(18px,2.6vw,30px);box-shadow:0 16px 44px rgba(15,76,117,.10);display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.th-vis figcaption{display:flex;flex-direction:column;gap:.3rem}
.th-vis figcaption b{font-size:1.02rem;line-height:1.4;color:var(--paper)}
.th-vis figcaption small{font-size:.8125rem;color:var(--muted)}
.v-topo{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.v-chip{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--ink);border-radius:999px;padding:.3rem .7rem}
.v-st{font-size:.92rem;font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums;transition:opacity .3s var(--ease-out)}
.v-st.espera::before,.h-status.espera::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tensao);margin-right:.5rem;vertical-align:middle;animation:pulso 1s var(--ease-out) infinite}
@keyframes pulso{50%{opacity:.25}}

/* ---------- Revelação ao rolar (só com JS; sem JS tudo aparece) ---------- */
.js [data-revela]{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-revela].on{opacity:1;transform:none}

/* ---------- "Como funciona": três passos ligados por uma linha ---------- */
.steps-how{position:relative;gap:1.4rem}
.steps-how li{border-top:0;padding-top:0;position:relative}
.steps-how li::before{content:counter(passo);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--petrol);color:#F8F8F8;font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin-bottom:.5rem;position:relative;z-index:1}
.steps-how li:not(:last-child)::after{content:"";position:absolute;top:21px;left:52px;right:-1.4rem;height:2px;border-radius:2px;background:var(--line-strong);transform-origin:left}
.steps-how li:last-child::before{background:#FFFFFF;color:var(--petrol);box-shadow:inset 0 0 0 2.5px var(--petrol)}
.js .steps-how li{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(var(--i,0) * 160ms)}
.js .steps-how li::after{transform:scaleX(0);transition:transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 160ms + 200ms)}
.js .steps-how.on li{opacity:1;transform:none}
.js .steps-how.on li::after{transform:none}

/* ---------- Teia do Raio-X como momento: pontos chegam, a forma fecha, prioridades se marcam ---------- */
.demo .radar{max-width:540px}
.demo .r-ponto{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;transition:opacity .25s var(--ease-out),transform .5s var(--ease-out)}
.demo .r-ponto.on{opacity:1;transform:none}
.demo .radar .r-forma{animation:none;opacity:0;transform:scale(.94);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.demo.forma .radar .r-forma{opacity:1;transform:none}
.demo .radar .r-rot.r-dest{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color .4s var(--ease-out)}
.demo.final .radar .r-rot.r-dest{text-decoration-color:var(--tensao)}
.js .fluxo.vivo li{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
.js .fluxo.vivo li:nth-child(2){transition-delay:.08s}.js .fluxo.vivo li:nth-child(3){transition-delay:.16s}.js .fluxo.vivo li:nth-child(4){transition-delay:.24s}.js .fluxo.vivo li:nth-child(5){transition-delay:.32s}.js .fluxo.vivo li:nth-child(6){transition-delay:.4s}
.js .fluxo.vivo.on li{opacity:1;transform:none}

/* ---------- Plano: o caminho de 30 dias ---------- */
.caminho{display:block;width:100%;height:auto;overflow:visible}
.caminho .via{fill:none;stroke:var(--ink);stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.caminho .borda{fill:none;stroke:var(--line);stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.caminho .tracejado{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round}
.caminho .feito{fill:none;stroke:var(--petrol);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.caminho .marco circle{fill:#FFFFFF;stroke:var(--petrol);stroke-width:3.5;transition:fill .35s var(--ease-out)}
.caminho .marco path{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--ease-out)}
.caminho .marco.on circle{fill:var(--petrol)}
.caminho .marco.on path{opacity:1}
.caminho text{font-family:var(--font-body);font-size:19px;fill:var(--muted);font-weight:500}
.caminho text.t{font-family:var(--font-display);font-weight:600;fill:var(--paper);font-size:21px}
.caminho .lucro{transform-box:fill-box;transform-origin:center}
.caminho .lucro circle{fill:var(--ok)}
.caminho .lucro .halo{fill:none;stroke:var(--ok);stroke-width:2;opacity:.35}
.caminho .lucro text{font-family:var(--font-display);font-weight:600;font-size:19px;fill:#FFFFFF;text-anchor:middle}
.caminho text.lucro-t{font-family:var(--font-display);font-weight:600;font-size:22px;fill:var(--ok);text-anchor:middle}
.caminho .marco text{font-family:var(--font-display);font-weight:600;font-size:15px;fill:var(--petrol);text-anchor:middle}
.caminho .marco.on text{fill:#FFFFFF}
.caminho .marco.bloq circle{stroke:var(--tensao)}
.caminho .marco.and circle{fill:var(--accent-soft)}
.caminho .inicio{fill:var(--paper)}
.js [data-vivo="caminho"] .feito{stroke-dasharray:1;stroke-dashoffset:1}
.js [data-vivo="caminho"] .rotulo{opacity:0;transition:opacity .4s var(--ease-out)}
.js [data-vivo="caminho"] .rotulo.on{opacity:1}
.js [data-vivo="caminho"] .lucro{transform:scale(0);transition:transform .6s var(--ease-out)}
.js [data-vivo="caminho"] .lucro.on{transform:none}

/* ---------- Privacidade: o que é seu fica no seu navegador ---------- */
.cofre{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.6vw,16px)}
.janela{border-radius:20px;box-shadow:inset 0 0 0 2px var(--petrol);overflow:hidden;background:var(--accent-soft)}
.janela .barra{display:flex;align-items:center;gap:.35rem;padding:.55rem .8rem;background:var(--petrol);color:#F8F8F8;font-size:.78rem;font-weight:700}
.janela .barra i{width:8px;height:8px;border-radius:50%;background:rgba(248,248,248,.55)}
.janela .barra span{margin-left:.4rem}
.janela ul{list-style:none;margin:0;padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.janela li{background:#FFFFFF;border-radius:12px;padding:.55rem .75rem;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px rgba(15,76,117,.08)}
.janela li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--petrol);flex:none}
.trava{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:56px}
.trava .linha-t{width:100%;min-width:48px;height:0;border-top:2.5px dashed var(--line-strong)}
.trava svg{width:30px;height:30px}
.trava small{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;max-width:8ch}
.fora{border-radius:20px;border:2px dashed var(--line-strong);padding:.8rem;display:flex;flex-direction:column;gap:.45rem}
.fora b{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fora span{font-size:.9rem;font-weight:700;color:var(--muted)}
.js [data-vivo="cofre"] .janela li{opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i) * 220ms)}
.js [data-vivo="cofre"] .trava{opacity:0;transition:opacity .45s var(--ease-out) .85s}
.js [data-vivo="cofre"] .fora{opacity:0;transition:opacity .45s var(--ease-out) 1.1s}
.js [data-vivo="cofre"].on .janela li{opacity:1;transform:none}
.js [data-vivo="cofre"].on .trava,.js [data-vivo="cofre"].on .fora{opacity:1}

/* ---------- Entradas e saídas: o mesmo gráfico na abertura e no resultado da Calculadora ----------
   Azul entra, vermelho sai, verde é o que sobra (vermelho se faltar). */
.barras{gap:.75rem}
.barras li{grid-template-columns:minmax(7.5rem,10.5rem) minmax(0,1fr);gap:.9rem}
.barras .rot{font-size:.9rem;color:var(--muted)}
.barras .rot b{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--paper)}
.barras .trk{height:26px;background:transparent;border-radius:999px}
.barras .zero{top:-5px;bottom:-5px;border-left:1.5px dashed var(--line-strong)}
.barras .b{top:0;bottom:0;border-radius:999px;background:var(--petrol)}
.barras .entra .b{background:var(--petrol)}
.barras li.entra:nth-child(3) .b{background:#3B7EA8}
.barras .sai .b{background:#D9534F}
.barras li.sai:nth-child(2) .b{background:#E9918B}
.barras .sobra .b{background:var(--ok)}
.barras .falta .b{background:var(--danger)}
.barras li.total{border-top:1px solid var(--line);padding-top:.75rem}
.barras li.total{align-items:center}
.barras li.total .rot{font-size:.95rem;font-weight:700;color:var(--paper)}
.barras li.total .rot b{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
.barras li.total .trk{height:30px}
.barras li.sobra .rot b{color:var(--ok)}
.barras li.falta .rot b{color:var(--danger)}
.legenda-b{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.82rem;font-weight:700;color:var(--muted)}
.legenda-b li{display:flex;align-items:center;gap:.4rem}
.legenda-b li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--petrol)}
.legenda-b .sai::before{background:#D9534F}
.legenda-b .sobra::before{background:var(--ok)}
.js .barras.anima .b{transition:transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 220ms)}
.js .barras.anima:not(.on) .b.pos{transform:scaleX(0);transform-origin:left}
.js .barras.anima:not(.on) .b.neg{transform:scaleX(0);transform-origin:right}
.js .barras.anima .b.pos{transform-origin:left}.js .barras.anima .b.neg{transform-origin:right}
.js .barras.anima .rot b{transition:opacity .4s var(--ease-out);transition-delay:calc(var(--i,0) * 220ms + 300ms)}
.js .barras.anima:not(.on) .rot b{opacity:0}
.th-vis .barras li{grid-template-columns:minmax(6.8rem,9rem) minmax(0,1fr)}

/* ---------- Plano: o caminho do seu plano até o lucro ---------- */
.caminho-plano{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,3vw,40px);align-items:center}
.cp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.cp-lista li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.7rem;align-items:start;font-size:.95rem;line-height:1.4}
.cp-lista .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--petrol);box-shadow:inset 0 0 0 2.5px var(--petrol);background:#FFFFFF}
.cp-lista li[data-st="concluida"] .n{background:var(--petrol);color:#FFFFFF}
.cp-lista li[data-st="bloqueada"] .n{box-shadow:inset 0 0 0 2.5px var(--tensao)}
.cp-lista small{display:block;color:var(--muted);font-size:.82rem}
.cp-lista li.fim .n{background:var(--ok);box-shadow:none;color:#FFFFFF;font-size:.75rem}

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .caminho-plano{grid-template-columns:1fr}
  main.tem-vis{display:block}
  main.tem-vis>.th-vis{margin-block:1.6rem .4rem}
  .tem-vis .tool-head{padding-bottom:1.2rem}
  body[data-tela]:not([data-tela="intro"]) .th-vis{display:none}
}
@media (max-width:760px){
  .steps-how li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:.9rem;row-gap:.15rem}
  .steps-how li::before{grid-row:1/3;margin:0}
  .steps-how li:not(:last-child)::after{top:48px;bottom:-1.4rem;left:21px;right:auto;width:2px;height:auto;transform-origin:top}
  .js .steps-how li::after{transform:scaleY(0)}
  .js .steps-how.on li::after{transform:none}
}
@media (max-width:560px){
  .cofre{grid-template-columns:1fr;justify-items:stretch}
  .trava{flex-direction:row;justify-content:center}
  .trava .linha-t{width:2px;min-width:0;height:22px;border-top:0;border-left:2.5px dashed var(--line-strong)}
  .trava small{max-width:none}
  .esquadro::before,.esquadro::after{width:34px;height:34px}
  .th-vis{border-radius:24px}
  .barras li,.th-vis .barras li{grid-template-columns:1fr;gap:.3rem}
  .barras .rot{flex-direction:row;justify-content:space-between;align-items:baseline;gap:.6rem}
  .barras li.total .rot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .js [data-revela],.js .steps-how li,.js .fluxo.vivo li,.demo .r-ponto,.demo .radar .r-forma{opacity:1!important;transform:none!important;transition:none!important}
  .js .steps-how li::after{transform:none!important}
  .js .barras.anima .b,.js [data-vivo] .rotulo,.js [data-vivo] .lucro,.js [data-vivo] .janela li,.js [data-vivo] .trava,.js [data-vivo] .fora{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-vivo="caminho"] .feito{stroke-dashoffset:0!important}
}
@media print{
  .th-vis{display:none!important}
  .js [data-revela],.js .steps-how li{opacity:1!important;transform:none!important}
}

/* ---------- Modos da Calculadora: cartões arredondados ---------- */
.modos{gap:.8rem}
.modo{background:#FFFFFF;border:0;border-radius:22px;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(15,76,117,.06);padding:1.05rem 1.15rem;transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out)}
.modo .mono{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.modo[aria-selected="true"]{background:#FFFFFF;box-shadow:0 0 0 2.5px var(--petrol),0 12px 30px rgba(15,76,117,.12)}
@media (hover:hover) and (pointer:fine){.modo:not([aria-selected="true"]):hover{box-shadow:0 0 0 1.5px var(--line-strong),0 12px 30px rgba(15,76,117,.10)}}
[data-caminho] .feito{stroke-dasharray:1;stroke-dashoffset:1}

/* Cinza Apoio (#6B7280) em fundo tingido não chega a 4,5:1: nesses casos o texto pequeno usa um cinza um tom abaixo */
.opt small{color:#4B5563}