/* =====================================================================
   v2 · 18/10/2026 · cores sólidas e motion evidente
   Camada carregada depois de styles.css: só sobrescreve.
   Para voltar à v1, remova o <link> de styles-v2.css no index.html.
   ===================================================================== */
:root{--blue:#1356f4;--blue-dark:#0b45d6;--blue-bright:#5b92ff;--ink:#152438;--mint:#c5f0de;--muted:#4f5f78;--line:#d6e0ee;--paper:#eef3fb}
body{background:var(--paper);background-image:none}
.soft{color:var(--blue);background:linear-gradient(var(--mint),var(--mint)) 0 92%/100% 30% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-description{color:var(--muted)}
.reading-progress{height:4px}
.secondary-links svg{color:var(--blue)}

/* Piso de legibilidade para rótulos que estavam com 5 a 8 px */
html body .eyebrow{font-size:10px!important;letter-spacing:.12em}
html body .pill{font-size:9px!important}
html body .tags>span{font-size:10px!important}
html body .video-badge{font-size:9px!important}
html body .hero-bottom{font-size:9px!important}
html body .journey-heading{font-size:9px!important}
html body .replay>span{font-size:10px!important}
html body .stories-hint{font-size:9px!important}
html body .mini-pipeline{font-size:10px!important}
html body .leak-label{font-size:11px!important}
html body .flow-node small{font-size:10px!important}
html body .flow-node strong{font-size:12px!important}
html body #flow-description{font-size:12px!important}
html body .hero-note{font-size:11px!important}
html body .guide-copy>small{font-size:10px!important}
html body .answer-note{font-size:10px!important}
html body .choice small{font-size:11px!important}
html body footer>p,html body .footer-note,html body .footer-bottom,html body .footer-bottom>button{font-size:10px!important}
html body .free-sticker{font-size:7px!important}
html body .free-sticker strong{font-size:8px!important}

/* Hero: bloco sólido azul-marinho */
.hero{background:var(--ink);color:#fff;border-radius:28px;padding:34px 30px 24px;overflow:hidden;isolation:isolate}
.hero-orb{position:absolute;z-index:-1;width:340px;height:340px;right:-150px;top:-130px;border-radius:50%;background:var(--blue);pointer-events:none}
.hero-orb-mint{width:130px;height:130px;right:-45px;top:auto;bottom:-55px;background:var(--mint)}
.hero>.eyebrow{color:#c9d4e6}
.hero .dot{background:var(--mint);box-shadow:0 0 0 4px #c5f0de26}
.hero h1{color:#fff}
.hero h1>span:not(.headline-star){color:var(--mint)}
.hero h1>span>svg{stroke:var(--blue-bright)}
.headline-star{color:var(--mint)}
.hero-description{color:#c9d4e6}
.hero-description>strong{color:#fff}
.hero>.button-primary{box-shadow:0 10px 30px #1356f470}
.hero .button small{border-color:#ffffff66;color:#fff}
.hero-note{color:#aebbd0}
.hero-note svg{color:var(--mint)}
.journey:before{background-image:radial-gradient(#ffffff24 .8px,transparent .8px)}
.journey-heading{color:#aebbd0}
.replay{color:#fff}
.flow-track{stroke:#ffffff38}
.flow-line{stroke:var(--blue-bright);stroke-width:2.5}
.flow-node{z-index:1}
.node-icon{position:relative;background:#1f3350;border-color:#33496a;color:#c9d4e6;box-shadow:none}
.flow-node strong{color:#fff}
.flow-node small{color:#aebbd0}
.flow-node.active .node-icon{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 20px #1356f470}
.node-sale.active .node-icon{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.flow-node.active strong{color:var(--mint)}
.node-ring{position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--mint);opacity:0;pointer-events:none}
.flow-dot{position:absolute;z-index:0;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px #c5f0de33,0 0 22px #c5f0de;opacity:0;pointer-events:none}
#flow-description{color:#dfe7f3}
.hero-bottom{border-top-color:#ffffff1f;color:#aebbd0}
.hero-bottom>a{border-color:#ffffff40;color:#fff}

/* Botões: brilho periódico no principal */
.button-primary{position:relative;overflow:hidden}
.button-primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,#fff0,#ffffff5c,#fff0);transform:skewX(-20deg);animation:btnShine 4.2s ease-in-out 2.2s infinite;pointer-events:none}
@keyframes btnShine{0%{left:-60%}38%,100%{left:130%}}

/* Desafio: escolhas que viram blocos azuis */
.panel{border:0;box-shadow:0 1px 0 #d6e0ee,0 18px 40px -26px #15243840}
.panel-kicker>.eyebrow{color:var(--blue)}
.pill{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.choice{position:relative;overflow:hidden;background:#fff;border:2px solid var(--line);transition:background .25s,border-color .25s,color .25s}
.choice-icon{background:var(--blue);color:#fff}
.choice small{color:var(--muted)}
.choice-arrow{color:var(--blue)}
.choice:hover{border-color:var(--blue);background:#fff}
.choice[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.choice[aria-pressed=true] small{color:#dbe6ff}
.choice[aria-pressed=true] .choice-icon{background:#fff;color:var(--blue)}
.choice[aria-pressed=true] .choice-arrow{color:#fff}
.ripple{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--blue);opacity:0;pointer-events:none}
.answer{background:var(--ink);border:0;color:#fff}
.answer .eyebrow{color:var(--mint)}
.answer .dot{background:var(--mint)}
.answer h3{color:#fff}
.answer #answer-copy{color:#c9d4e6}
.leak-label{background:var(--mint);color:var(--ink);padding:5px 10px;border-radius:99px}
.answer .button-ink{background:var(--blue)}
.answer .button-ink:hover{background:var(--blue-dark)}
.answer-note{color:#aebbd0}

/* Guia: bloco azul sólido */
.guide-card{background:var(--blue);border:0;color:#fff}
.guide-copy .eyebrow{color:#dbe6ff}
.guide-copy h2{color:#fff}
.guide-copy h2 span{color:var(--mint)}
.guide-copy>p:not(.eyebrow){color:#e1eaff}
.guide-copy>.text-link{background:#fff;color:var(--blue);padding:10px 16px;border-radius:10px;margin-top:16px}
.guide-copy>.text-link:hover{color:var(--blue-dark)}
.guide-copy>small{color:#cfdcff;margin-top:8px}
.book-front{background:var(--ink)}
.book-shadow{background:#0b1d4a8c}
.free-sticker{border-color:var(--blue);background:var(--mint);color:var(--ink)}

/* Clientes: faixa marinho com logos em movimento */
.clients{background:var(--ink);border-radius:20px;padding:22px 0 24px;overflow:hidden}
.clients .eyebrow{color:#aebbd0;justify-content:center}
.logos{filter:none;opacity:1;display:flex;justify-content:center;gap:0}
.logo-set{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px 34px;padding:0 20px}
html body .logos img{filter:brightness(0) invert(1);opacity:.92}
.onew{color:#fff}
.logo-set[aria-hidden]{display:none}
.clients.is-marquee .logos-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.clients.is-marquee .logos{width:max-content;justify-content:flex-start;flex-wrap:nowrap}
.clients.is-marquee .logo-set{flex-wrap:nowrap;gap:46px;padding:0 46px 0 0}
.clients.is-marquee .logo-set[aria-hidden]{display:flex}

/* Serviços: ícones sólidos e pipeline que se preenche */
.services>.eyebrow,.service .eyebrow{color:var(--blue)}
.service{border-top-color:var(--line)}
.service-icon{background:var(--blue);border-color:var(--blue);color:#fff}
.service p:not(.eyebrow){color:var(--muted)}
.tags>span{background:#e3ecff;color:#1846b8;font-weight:700}
.mini-pipeline{position:relative;overflow:hidden;background:var(--ink);color:#c9d4e6}
.mini-pipeline>span{padding:5px 9px;border-radius:99px;background:#ffffff1f;color:#fff;transition:background .3s,color .3s}
.mini-pipeline .won{background:var(--mint);color:var(--ink)}
.mini-pipeline>span.is-off{background:transparent;color:#7f8fa8}
.mini-pipeline>svg{color:#5f7393}
.mini-pipeline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--mint);transform:scaleX(var(--pipe-p,1));transform-origin:left}
.mini-pipeline{padding-bottom:62px!important}
.mini-pipeline:before{content:"";position:absolute;left:24px;right:24px;bottom:28px;height:2px;background:#ffffff2e}
.pipeline-lead{position:absolute;left:0;bottom:12px;width:34px;height:34px;margin-left:-17px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--ink);box-shadow:0 0 0 5px #c5f0de18;opacity:0;pointer-events:none}
.pipeline-lead svg{width:23px;height:23px}
.mini-pipeline>span.is-current{background:var(--blue);color:#fff;box-shadow:0 0 0 3px #1356f433}
.mini-pipeline>span.won.is-current{background:var(--mint);color:var(--ink);box-shadow:0 0 0 3px #c5f0de33}
html[data-motion=reduced] .pipeline-lead{display:none}
html[data-motion=reduced] .mini-pipeline{padding-bottom:16px!important}
html[data-motion=reduced] .mini-pipeline:before{display:none}

/* Relatos */
.stories-hint{color:var(--blue)}
.video-badge{background:var(--blue);color:#fff;padding:4px 8px;border-radius:99px;letter-spacing:.1em}
.play{background:var(--blue);color:#fff;animation:playPulse 2.4s ease-out infinite}
@keyframes playPulse{0%{box-shadow:0 0 0 0 #ffffff99}100%{box-shadow:0 0 0 18px #ffffff00}}
.story-text p{color:var(--muted)}

/* Primeira conversa: bloco menta com linha que avança */
.conversation{background:var(--mint);box-shadow:none}
.conversation>.eyebrow{color:#1f5a43}
.conversation .soft{background-image:linear-gradient(#fff,#fff)}
.conversation>.section-description,.steps p{color:#2d4a40}
.steps:before{background:#9fd6bd;width:2px}
.steps:after{content:"";position:absolute;left:17px;top:15px;bottom:60px;width:2px;background:var(--ink);transform:scaleY(var(--steps-p,1));transform-origin:top}
.step-number{position:relative;z-index:1;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;transition:background .3s,color .3s,border-color .3s}
.step-number.is-off{background:#fff;color:var(--ink);border-color:#9fd6bd}
.conversation .text-link{background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.conversation .text-link:hover{background:#24395a;color:#fff}

/* FAQ */
.faq summary>span{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:20px}
.faq details[open] summary>span{background:var(--ink);color:#fff}
.faq details p{color:var(--muted)}

/* Chamada final */
.final-cta .eyebrow{color:#fff}
.final-cta .dot{background:var(--mint)}
.final-cta h2>span{color:var(--mint)}
.final-cta>p:not(.eyebrow){color:#e1eaff}
.final-arrow{color:#ffffff24}

@media(max-width:900px){
  .hero{padding:38px 34px 26px}
  .sticky-cta{background:linear-gradient(to top,var(--paper) 66%,#eef3fb00)}
}
@media(max-width:600px){
  .hero{padding:28px 20px 18px;border-radius:24px}
  .hero h1{font-size:clamp(54px,16.4vw,80px)}
  .headline-star{right:4px;top:50px;font-size:34px}
  .hero-orb:not(.hero-orb-mint){width:260px;height:260px;right:-130px;top:-110px}
  .hero-orb-mint{width:110px;height:110px;right:-40px;bottom:-45px}
  .steps:after{left:15px}
  .mini-pipeline>span{padding:4px 7px}
}
@media(max-width:359px){
  .hero{padding:24px 16px 16px}
  .hero h1{font-size:48px}
}

/* Movimento reduzido: tira o que é contínuo */
html[data-motion=reduced] .button-primary:after{display:none;animation:none}
html[data-motion=reduced] .play{animation:none}
@media(prefers-reduced-motion:reduce){.button-primary:after{display:none}.play{animation:none}}
