/* P1 · V1 (16/10): what the owner's first review changed, on top of pagina.css, v6.css and, for the simulation's
   screens, p2.css. Larger, darker, bolder text; sources set as proof, not as footnotes; safety and the free model as
   main sections, animated; a simulation that plays by itself. Mobile first (375 px); one easing curve; under .rm
   nothing moves and every state shows still. */

/* ---------------------------------------------------------------- the headline test: one headline per visitor */
[data-titulo="a"] [data-so="b"], [data-titulo="b"] [data-so="a"] { display: none !important; }

/* ---------------------------------------------------------------- text: larger, ink, real bold */
.p1 { font-size: 18px; line-height: 1.55; }
.p1 b, .p1 strong { font-weight: 700; }
.p1 .h2 { font-size: 32px; line-height: 1.08; letter-spacing: -.028em; font-weight: 500; margin: 0 0 18px; }
.p1 .h2 b { font-weight: 700; }
.p1 .lead-p1 { margin: 0; max-width: 32em; font-size: 19px; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
@media (min-width: 768px) {
  .p1 { font-size: 20px; }
  .p1 .h2 { font-size: 46px; line-height: 1.04; }
  .p1 .lead-p1 { font-size: 22px; }
}
@media (min-width: 1100px) { .p1 .h2 { font-size: 52px; } }
.p1 .sec { padding: 72px 0; }
@media (min-width: 960px) { .p1 .sec { padding: 112px 0; } }

/* ---------------------------------------------------------------- 1 · the first screen */
.hero--p1 { padding: 72px 0 52px; }
.para-quem { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.86);
  font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--tinta); box-shadow: var(--vidro-borda), 0 0 0 1px rgba(30,43,60,.07), 0 10px 22px -16px rgba(30,60,100,.5); }
.para-quem::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pessego); box-shadow: 0 0 8px 1px rgba(245,160,134,.75); animation: pisca-quente 1.8s ease-in-out infinite; }
@keyframes pisca-quente { 0%, 100% { opacity: 1; box-shadow: 0 0 10px 2px rgba(245,160,134,.8); } 50% { opacity: .35; box-shadow: 0 0 2px 0 rgba(245,160,134,.3); } }
.nome-prod { margin: 0 0 10px; font-size: 21px; line-height: 1.15; font-weight: 700; letter-spacing: -.012em; color: var(--pervinca-funda); }
.nome-prod span { font-weight: 500; color: var(--tinta-suave); }
.h1-p1 { margin: 0 0 14px; font-size: 36px; line-height: 1.04; letter-spacing: -.032em; font-weight: 500; text-wrap: balance; }
.h1-p1 b { display: block; font-weight: 700; }
.sub-p1 { margin: 0 0 20px; max-width: 30em; font-size: 19px; line-height: 1.45; color: var(--tinta); text-wrap: pretty; }
@media (min-width: 768px) {
  .nome-prod { font-size: 26px; }
  .h1-p1 { font-size: 54px; }
  .sub-p1 { font-size: 22px; }
}
@media (min-width: 1100px) { .h1-p1 { font-size: 62px; } }
@media (min-width: 960px) { .hero--p1 { padding: 100px 0 72px; } }

/* the proof beside the promise: a number you can read, and its source in full */
.prova { display: flex; align-items: center; gap: 14px; max-width: 30em; margin: 0; padding: 12px 18px 12px 12px; border-radius: 26px; background: rgba(255,255,255,.9);
  box-shadow: var(--vidro-borda), 0 0 0 1px rgba(30,43,60,.07), 0 18px 34px -24px rgba(30,60,100,.5); }
.prova__n { flex: none; display: flex; align-items: center; justify-content: center; min-width: 76px; height: 64px; padding: 0 10px; border-radius: 20px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums;
  background: radial-gradient(90% 90% at 20% 10%, rgba(245,160,134,.32), transparent 70%), radial-gradient(90% 90% at 90% 90%, rgba(104,144,234,.3), transparent 70%), linear-gradient(160deg, #F2FAFC, #E4F2F7); }
.prova__t { font-size: 16px; line-height: 1.35; color: var(--tinta); }
.prova__t b { font-weight: 700; }
.prova__f { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--pervinca-funda); }
@media (min-width: 768px) { .prova__t { font-size: 17px; } .prova__n { min-width: 88px; height: 72px; font-size: 34px; } }

/* the video: the play button at the middle, where the first screen of a phone still shows it */
.hero--p1 .player--foto .player__play { justify-content: center; padding: 0; }
.hero--p1 .player__sob { font-size: 16px; font-weight: 700; }

/* the headline arrives word by word (as on the Assiny page), then the light runs under the desire */
.js .hero--p1 .h1-p1[data-palavras] .w { transition-duration: .7s; transition-delay: calc(var(--wi) * 60ms + .1s); }
.h1-p1 .luz { position: relative; z-index: 0; white-space: nowrap; }
.h1-p1 .luz::before { content: ""; position: absolute; z-index: -1; left: -2px; right: -2px; bottom: .04em; height: .34em; border-radius: 999px; background: linear-gradient(90deg, #F5A086, #6FD6DF 55%, #6890EA); opacity: .5;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 1.3s; }
.h1-p1.on .luz::before, .rm .h1-p1 .luz::before, .no-js .h1-p1 .luz::before { transform: none; }
.h1-p1 .luz .w { white-space: nowrap; }

/* two proofs under the promise: the 5,4× and the shorter visit */
.provas-topo { display: grid; gap: 10px; max-width: 34em; }
.provas-topo .prova { max-width: none; }
.prova__n--rel svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.rel__t { fill: none; stroke: rgba(30,43,60,.1); stroke-width: 3.5; }
.rel__l { fill: none; stroke: var(--pervinca-funda); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) 1.8s; }
.rel__p { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 20px 20px; }
.provas-topo.on .rel__l { stroke-dashoffset: 28; }
.rm .rel__l { stroke-dashoffset: 28; transition: none; }
@media (min-width: 768px) { .provas-topo { grid-template-columns: 1fr 1fr; } .provas-topo .prova__t { font-size: 15.5px; } .provas-topo .prova__n { min-width: 74px; height: 64px; font-size: 28px; } }

/* ---------------------------------------------------------------- 2 · how it works */
.p1 .etapa-v6__texto .h3 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.p1 .etapa-v6__texto p { font-size: 18px; line-height: 1.5; color: var(--tinta); }
.p1 .passo__n { font-weight: 700; }
@media (min-width: 900px) { .p1 .etapa-v6__texto .h3 { font-size: 30px; } .p1 .etapa-v6__texto p { font-size: 20px; } }

/* ---------------------------------------------------------------- 3 · the result and the two studies */
.estudos-p1 { display: grid; gap: 18px; margin-top: 32px; }
.est { padding: 26px 22px 22px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(30,43,60,.06), 0 28px 54px -36px rgba(30,60,100,.5); }
.est__n { margin: 0 0 6px; font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.est__n small { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--tinta-suave); }
.est__o { margin: 0 0 20px; font-size: 19px; line-height: 1.4; }
.est__fonte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 15px; line-height: 1.35; color: var(--tinta); }
.est__fonte b { font-size: 16px; color: var(--pervinca-funda); }
/* the bars grow when the card comes into view */
.barras { display: grid; gap: 12px; }
.barra-l { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.25; }
.barra-l__t b { font-weight: 700; }
.barra-l__trilho { position: relative; height: 30px; border-radius: 999px; background: var(--superficie); overflow: hidden; }
.barra-l__luz { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #D7E3EE; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--i, 0) * .18s + .2s); }
.barra-l--forte .barra-l__luz { background: linear-gradient(90deg, #F5A086, #6FD6DF 55%, #6890EA); }
.barra-l__v { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.est.on .barra-l__luz, .rm .barra-l__luz, .no-js .barra-l__luz { transform: none; }
@media (min-width: 900px) {
  .estudos-p1 { grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
  .est { padding: 34px 32px 28px; }
  .est__n { font-size: 68px; }
  .est__o { font-size: 21px; }
}

/* ---------------------------------------------------------------- 3 · on the big page's colour field */
.sec--provas .h2, .sec--provas .lead-p1 { color: var(--tinta); }
.sec--provas .est { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.86)); box-shadow: var(--vidro-borda), 0 40px 80px -40px rgba(30,60,100,.55); }

/* ---------------------------------------------------------------- 4 · the patient's data: a path of light, and the seals */
.seguro__agua { opacity: .55; }
.sec--seguro { background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FB 100%); }
/* the seals: each mark with what it means for him, in words */
.selos-p1 { display: grid; gap: 12px; margin: 44px 0 0; }
.selo-p1 { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 16px 18px 16px 14px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(30,43,60,.06), 0 20px 40px -30px rgba(30,60,100,.5); }
.selo__marca { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta);
  background: radial-gradient(70% 70% at 30% 20%, #FFFFFF, #EAF3F8); box-shadow: inset 0 0 0 1px rgba(30,43,60,.08), inset 0 -6px 10px -6px rgba(92,124,156,.2); }
.selo__marca svg { width: 30px; height: 30px; }
.selo__t { margin: 0 0 2px; font-size: 18px; line-height: 1.25; font-weight: 700; }
.selo__d { margin: 0; font-size: 16px; line-height: 1.4; }
.js .selo-p1 { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .12s); }
.selos-p1.on .selo-p1, .rm .selo-p1 { opacity: 1; transform: none; }
.selos-p1.on .selo__marca { animation: flutua 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.rm .selo__marca { animation: none !important; }
@media (min-width: 720px) { .selos-p1 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .selos-p1 { grid-template-columns: repeat(4, 1fr); } .selo-p1 { grid-template-columns: 1fr; padding: 22px 20px; } }

.firme { max-width: 34em; margin: 40px 0 0; font-size: 21px; line-height: 1.4; letter-spacing: -.01em; }
.firme b { font-weight: 700; }
@media (min-width: 768px) { .firme { font-size: 26px; } }

/* ---------------------------------------------------------------- 5 · why it is free: who pays, step by step */
.sec--gratis { background: #fff; }
/* ---------------------------------------------------------------- 6 · nothing changes in your routine */
.sec--nada { background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FC 100%); }
/* ---------------------------------------------------------------- 7 · the simulation: it plays by itself */
.p1 .sim-sec { padding: 72px 0 80px; }
.sim-intro { max-width: 34em; margin: 0 0 28px; }
/* the stage: the guide on top (on a wide screen, at the left), the screen, then the controls */
.p1-sim .sim__palco { position: relative; padding: 18px 14px 16px; border-radius: 32px; background: rgba(255,255,255,.82);
  box-shadow: var(--vidro-borda), 0 0 0 1px rgba(30,43,60,.06), 0 40px 80px -50px rgba(30,60,100,.55); }
.guia { margin: 0 0 16px; padding: 0 4px; }
.guia__passo { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--pervinca-funda); font-variant-numeric: tabular-nums; }
.guia__t { margin: 0 0 8px; font-size: 25px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.guia__agora { min-height: 3.1em; margin: 0; font-size: 18px; line-height: 1.4; color: var(--tinta); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.guia__agora b { font-weight: 700; }
.guia__agora.troca { opacity: 0; transform: translateY(6px); }
.p1-sim .sim__prog { margin: 14px 0 0; }
.p1-sim .sim__prog i { height: 5px; }
/* the screens are shown, not used: nothing inside them is a target */
.p1-sim .sp__cena { pointer-events: none; }
.p1-sim .sp__t, .p1-sim .sp__depois, .p1-sim .dica, .p1-sim [data-acao="continuar"] { display: none !important; }
.p1-sim .pc__baixo { min-height: 0; }
.p2-js .p1-sim .sp:not(.sp--fim) { display: block; }
.p1-sim .sp__fala { margin: 0 0 14px; }
/* the auto tap: a ring of light opens where the finger would land */
.tocado { position: relative; }
.tocado::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(69,139,201,.85), 0 0 18px 6px rgba(111,214,223,.7); animation: tocado .9s var(--ease) both; }
@keyframes tocado { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.25); } }
.rm .tocado::before { display: none; }
/* the controls live inside the stage */
.ctrl { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; }
.ctrl__prox { position: relative; flex: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 16.5px/1.2 var(--font); color: var(--tinta); background: #fff;
  box-shadow: inset 0 1.5px 0 #FFFFFF, 0 0 0 1px rgba(30,43,64,0.08), inset 0 -6.5px 10px -6.5px rgba(92,124,156,0.13), 0 8px 13px -8px rgba(28,58,90,0.18); }
.ctrl__prox span { position: relative; z-index: 1; }
/* when the step is done, the button fills with light and moves on by itself */
.ctrl__prox::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(245,160,134,.35), rgba(111,214,223,.4) 50%, rgba(104,144,234,.4)); transform: scaleX(0); transform-origin: left; }
.ctrl__prox.conta::before { animation: conta var(--espera, 3.2s) linear forwards; }
@keyframes conta { to { transform: none; } }
.ctrl__prox:active { transform: translateY(1px); }
.ctrl__prox:focus-visible, .ctrl .sim-ico:focus-visible { outline: none; box-shadow: var(--foco); }
.ctrl .sim-ico { width: 48px; height: 48px; box-shadow: 0 0 0 1px rgba(30,43,64,0.09), 0 6px 12px -8px rgba(28,58,90,0.2); }
.p1-sim:not(.sim--rodando) .ctrl { visibility: hidden; }
.p1-sim.no-fim .ctrl { display: none; }
/* before it plays: the first screen waits behind one big button */
.sim-play { position: absolute; z-index: 5; left: 50%; top: 52%; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 26px 0 12px; border: 0; border-radius: 999px; cursor: pointer; transform: translate(-50%, -50%);
  font: 700 18px/1.2 var(--font); color: var(--tinta); background: #fff; white-space: nowrap;
  box-shadow: inset 0 1.5px 0 #FFFFFF, 0 0 0 1px rgba(30,43,64,0.08), 0 18px 34px -16px rgba(28,58,90,0.45); }
.sim-play__disco { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #F5A086, #6FD6DF 55%, #6890EA); }
.sim--rodando .sim-play { display: none; }
.p1-sim:not(.sim--rodando) .sim__passos { opacity: .45; filter: blur(1px); }
.p1-sim:not(.sim--rodando) .guia__agora, .p1-sim:not(.sim--rodando) .sim__prog { visibility: hidden; }
@media (min-width: 960px) {
  .p1 .sim-sec { padding: 112px 0 120px; }
  .p1-sim .sim__palco { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: "guia cena" "ctrl cena"; grid-template-rows: auto 1fr; column-gap: 56px; padding: 40px 44px; }
  .guia { grid-area: guia; margin: 24px 0 0; }
  .sim__passos { grid-area: cena; }
  .ctrl { grid-area: ctrl; align-self: end; margin: 24px 0 0; }
  .guia__t { font-size: 36px; }
  .guia__agora { font-size: 21px; min-height: 4.3em; }
  .sim-play { left: calc(380px + 56px + (100% - 380px - 56px) / 2); }
}
.p1-sim .fim2__t { font-weight: 700; letter-spacing: -.025em; }
.p1-sim .fim2__txt { font-size: 19px; }
.p1-sim.no-fim .sim__palco { grid-template-columns: 1fr; grid-template-areas: "cena"; }
.p1-sim.no-fim .guia { display: none; }

/* ---------------------------------------------------------------- 8 · the ask, with the big page's clock */
.p1 .sec--pedido .lead-p1 { margin-bottom: 26px; }
.p1 .pedido-curto__linha { font-size: 15px; font-weight: 700; color: var(--tinta); }

/* ================================================================ V1.2 (16/10): live scenes for the data, the free model and the routine */

/* section rhythm: one even gap between sections, and no hard seams between backgrounds */
.p1 .sec { padding: 64px 0; }
@media (min-width: 960px) { .p1 .sec { padding: 96px 0; } }
.sec--seguro { background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FB 55%, #FFFFFF 100%); }
.seguro__agua { opacity: .5; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%); }
.sec--gratis { background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 100%); }
.p1 .sim-sec { background: linear-gradient(180deg, #F6FAFD 0%, #F3F8FC 50%, #FFFFFF 100%); }
.sec--nada { background: #fff; }
.sec--gratis .h2, .sec--nada .h2 { margin-bottom: 14px; }

/* ---------------------------------------------------------------- 4 · the data's path: four live scenes on a line of light */
.rota2 { position: relative; display: grid; gap: 34px; margin: 36px 0 0; }
.r2 { position: relative; z-index: 1; }
.r2__cena { position: relative; display: grid; place-items: center; height: 132px; margin: 0 0 16px; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: inset 0 1.5px 0 #fff, 0 0 0 1px rgba(30,43,64,.06), 0 24px 44px -30px rgba(30,60,100,.55); }
.r2__t { margin: 0 0 4px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; }
.r2__d { margin: 0; font-size: 17.5px; line-height: 1.45; }
.js .r2 { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * .35s); }
.rota2.on .r2, .rm .r2 { opacity: 1; transform: none; }
/* the line between the scenes and the point of light that runs it */
.rota2::before { display: none; content: ""; position: absolute; left: 50%; top: 40px; bottom: 120px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, #F5A086, #6FD6DF 50%, #6890EA); opacity: .45; transform: scaleY(0); transform-origin: top; transition: transform 2.2s var(--ease) .3s; }
.rota2.on::before, .rm .rota2::before { transform: none; }
.r2__ponto { display: none; position: absolute; left: 50%; top: 40px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(111,214,223,.9), 0 0 16px 4px rgba(72,194,214,.7); opacity: 0; }
.rota2.on .r2__ponto { animation: corre-y 4.5s var(--ease) 2.4s infinite; }
@keyframes corre-y { 0% { opacity: 0; transform: translateY(0); } 10%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--h, 600px)); } }
.rm .r2__ponto { display: none; }
@media (min-width: 960px) {
  .rota2 { grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 52px; }
  .r2__cena { height: 156px; }
  .rota2::before { display: block; left: 12%; right: 12%; top: 77px; bottom: auto; width: auto; height: 3px; margin: 0; background: linear-gradient(90deg, #F5A086, #6FD6DF 50%, #6890EA); transform: scaleX(0); transform-origin: left; }
  .rota2.on::before, .rm .rota2::before { transform: none; }
  .r2__cena { z-index: 1; }
  .r2__ponto { display: block; left: 12%; top: 71px; margin: 0; z-index: 0; }
  .rota2.on .r2__ponto { animation-name: corre-x; }
  @keyframes corre-x { 0% { opacity: 0; transform: translateX(0); } 10%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--w, 900px)); } }
}
/* 1 · his phone: his words are typed, in his voice */
.r2__cena--fone { background: linear-gradient(160deg, #FBEFEA, #EEF7FB); }
.r2__fone { width: 78%; max-width: 250px; padding: 12px 14px 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(30,43,64,.07), 0 14px 26px -18px rgba(30,60,100,.6); }
.r2__fone-topo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--tinta-suave); }
.r2__fala { display: block; min-height: 1.4em; font-size: 18px; line-height: 1.35; color: var(--tinta); }
.r2__cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--pervinca-funda); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.rm .r2__cursor { display: none; }
/* 2 · the same words, ciphered */
.r2__cena--cifra { gap: 8px; align-content: center; background: linear-gradient(160deg, #EEF7FB, #E6EEFB); }
.r2__cadeado { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--tinta); background: #fff; box-shadow: 0 8px 16px -10px rgba(30,60,100,.6); }
.r2__cadeado svg { width: 22px; height: 22px; }
.r2__arco { transition: transform .5s var(--ease); transform-origin: 16px 10px; }
.r2__cena--cifra.aberto .r2__arco { transform: translateY(-2.5px); }
.r2__cifra { max-width: 88%; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--tinta); text-align: center; word-break: break-all; font-variant-numeric: tabular-nums; }
.r2__tag { font-size: 12.5px; font-weight: 700; color: var(--pervinca-funda); }
/* 3 · the cloud in São Paulo */
.r2__cena--nuvem { gap: 8px; align-content: center; background: linear-gradient(160deg, #FFFFFF, #F2F6FA); }
.r2__aws { width: 74px; height: auto; }
.r2__lugar { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.r2__pino { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); }
.r2__pino::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(72,194,214,.55); animation: onda 2.4s var(--ease) infinite; }
@keyframes onda { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
.rm .r2__pino::after { animation: none; opacity: .5; }
.r2__racks { display: flex; gap: 6px; }
.r2__racks i { width: 34px; height: 8px; border-radius: 4px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); position: relative; overflow: hidden; }
.r2__racks i::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--aqua); animation: respira 3s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1s); }
.r2__racks i:nth-child(2)::after { --k: 1; } .r2__racks i:nth-child(3)::after { --k: 2; }
@keyframes respira { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* 4 · your account: the summary arrives, line by line */
.r2__cena--conta { background: linear-gradient(160deg, #EEF7FB, #F7F1FB); }
.r2__ficha { display: grid; gap: 7px; width: 78%; max-width: 250px; padding: 12px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(30,43,64,.07), 0 14px 26px -18px rgba(30,60,100,.6); font-size: 15px; }
.r2__flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--tinta-suave); }
.r2__linha { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #DDE9F2, #EEF4F8); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); transition-delay: calc(var(--l) * .35s + 1.6s); }
.r2__linha--curta { width: 60%; }
.rota2.on .r2__linha, .rm .r2__linha { transform: none; }

/* the seals with the official marks */
.selo__marca--lgpd { position: relative; color: var(--pervinca-funda); }
.selo__marca--lgpd svg { position: absolute; width: 50px; height: 50px; opacity: .9; }
.selo__marca--lgpd b { position: relative; font-size: 13px; font-weight: 700; color: var(--tinta); letter-spacing: .01em; }
.selo__marca--img { overflow: hidden; border-radius: 20px; background: #3E80C4; }
.selo__marca--img img { width: 100%; height: 100%; object-fit: cover; }
.selo__marca--aws { background: #fff; }
.selo__marca--aws img { width: 46px; height: auto; }

/* ---------------------------------------------------------------- 5 · free: R$ 0, then the money's path */
.zeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 30px 0 0; }
.zero { display: grid; gap: 2px; margin: 0; padding: 18px 20px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(30,43,64,.06), 0 20px 40px -30px rgba(30,60,100,.55); }
.zero__n { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.035em; background: linear-gradient(90deg, #E8876B, #3FB3C8 55%, #4F7FE0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zero__k { font-size: 16px; font-weight: 700; }
.js .zero { opacity: 0; transform: scale(.9); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .2s); }
.zeros.on .zero, .rm .zero { opacity: 1; transform: none; }
@media (min-width: 768px) { .zero__n { font-size: 58px; } }

.fluxo2 { position: relative; display: grid; gap: 30px; margin: 34px 0 0; }
.f2 { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; padding: 20px 20px 20px 16px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(30,43,64,.06), 0 22px 44px -32px rgba(30,60,100,.55); }
.f2 > p { grid-column: 2; }
.f2__ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--tinta); background: var(--superficie); }
.f2__ic svg { width: 26px; height: 26px; }
.f2__ic--doc { background: radial-gradient(70% 70% at 30% 20%, #fff, #EAF3F8); }
.f2__ic--doc img { width: 40px; height: 40px; filter: drop-shadow(0 6px 8px rgba(69,139,201,.35)); }
.f2__t { margin: 4px 0 4px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; }
.f2__d { margin: 0; font-size: 17.5px; line-height: 1.45; }
.f2--paga { background: linear-gradient(120deg, rgba(245,160,134,.16), rgba(111,214,223,.2) 55%, rgba(104,144,234,.2)), #fff; }
/* between the steps, an arrow of light draws itself */
.f2:not(:last-child)::after { content: ""; position: absolute; left: 43px; bottom: -26px; width: 3px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #6FD6DF, #6890EA); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); transition-delay: calc(var(--i) * .55s + .45s); }
.fluxo2.on .f2::after, .rm .f2::after { transform: none; }
.js .f2 { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .55s); }
.fluxo2.on .f2, .rm .f2 { opacity: 1; transform: none; }
/* the commission, as a capsule of light that lands on the Doctorine */
.f2__moeda { position: absolute; right: 16px; top: -14px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--tinta); background: #fff;
  box-shadow: 0 0 0 1px rgba(30,43,64,.07), 0 0 16px 2px rgba(111,214,223,.55); opacity: 0; transform: translateY(-26px); }
.fluxo2.on .f2__moeda { animation: pousa 4s var(--ease) 1.9s infinite; }
@keyframes pousa { 0% { opacity: 0; transform: translateY(-30px); } 18% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } }
.rm .f2__moeda { opacity: 1; transform: none; }
@media (min-width: 960px) {
  .fluxo2 { grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 44px; }
  .f2 { grid-template-columns: 1fr; padding: 26px 24px 26px; }
  .f2 > p { grid-column: 1; }
  .f2__ic { grid-row: auto; margin: 0 0 14px; }
  .f2:not(:last-child)::after { left: auto; right: -26px; top: 50%; bottom: auto; width: 20px; height: 3px; background: linear-gradient(90deg, #6FD6DF, #6890EA); transform: scaleX(0); transform-origin: left; }
  .fluxo2.on .f2::after, .rm .f2::after { transform: none; }
  .f2__t { font-size: 23px; }
}
/* the three guarantees: each check draws itself */
.garantias2 { display: grid; gap: 14px; margin: 30px 0 0; }
.garantias2 li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 18.5px; line-height: 1.4; }
.garantias2 svg { width: 28px; height: 28px; }
.garantias2 circle { fill: var(--aqua); opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--i) * .5s + .2s); }
.garantias2 path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s var(--ease); transition-delay: calc(var(--i) * .5s + .45s); }
.garantias2.on circle, .rm .garantias2 circle { opacity: 1; }
.garantias2.on path, .rm .garantias2 path { stroke-dashoffset: 0; }
@media (min-width: 768px) { .garantias2 li { font-size: 20px; } }

/* ---------------------------------------------------------------- 7 · nothing changes: three small live scenes */
.nada2 { display: grid; gap: 34px; margin: 30px 0 0; }
.n2__cena { position: relative; height: 150px; margin: 0 0 16px; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #F3F8FC, #EAF4F9);
  box-shadow: inset 0 0 0 1px rgba(30,43,64,.05); }
.js .nd { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * .3s); }
.nada2.on .nd, .rm .nd { opacity: 1; transform: none; }
.nada__t { margin: 0 0 6px; font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.nada__d { margin: 0; font-size: 18px; line-height: 1.45; max-width: 34em; }
@media (min-width: 960px) { .nada2 { grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; } .nada__t { font-size: 25px; } }
/* 1 · your systems stay; the Pré-Consulta settles on top of them */
.n2__cena--camadas { display: grid; align-content: center; justify-items: center; gap: 6px; }
.cam { display: block; width: 70%; max-width: 240px; padding: 7px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--tinta-suave); background: #fff; box-shadow: 0 0 0 1px rgba(30,43,64,.06); }
.cam--topo { display: flex; align-items: center; gap: 7px; color: var(--tinta); background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1.5px rgba(111,214,223,.8), 0 10px 22px -10px rgba(69,139,201,.6); transform: translateY(-46px); opacity: 0; }
.nada2.on .cam--topo { animation: pousa-camada 5s var(--ease) .6s infinite; }
@keyframes pousa-camada { 0% { opacity: 0; transform: translateY(-46px); } 22%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-12px); } }
.rm .cam--topo { opacity: 1; transform: none; }
/* 2 · two paths: he answered, or he didn't; both end well */
.n2__cena--ramo svg { position: absolute; left: 6%; top: 50%; width: 62%; height: auto; transform: translateY(-50%); overflow: visible; }
.ramo__l { fill: none; stroke: #6FD6DF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.ramo__l--2 { stroke: #C2D2E2; transition-delay: .9s; }
.ramo__p { fill: #fff; stroke: var(--pervinca-funda); stroke-width: 3; }
.nada2.on .ramo__l, .rm .ramo__l { stroke-dashoffset: 0; }
.ramo__k { position: absolute; right: 6%; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff; box-shadow: 0 0 0 1px rgba(30,43,64,.07); opacity: 0; transition: opacity .6s var(--ease) 1.7s; }
.ramo__k--a { top: 22%; box-shadow: 0 0 0 1.5px rgba(111,214,223,.85), 0 0 14px 2px rgba(111,214,223,.4); }
.ramo__k--b { bottom: 22%; color: var(--tinta-suave); transition-delay: 2s; }
.nada2.on .ramo__k, .rm .ramo__k { opacity: 1; }
/* 3 · a switch you can turn off any day */
.n2__cena--chave { display: grid; align-content: center; justify-items: center; gap: 10px; }
.chave__k { font-size: 16px; font-weight: 700; }
.chave { position: relative; width: 64px; height: 36px; border-radius: 999px; background: linear-gradient(90deg, #6FD6DF, #6890EA); box-shadow: inset 0 1px 3px rgba(30,43,64,.2); }
.chave i { position: absolute; top: 4px; left: 32px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(30,43,64,.3); }
.nada2.on .chave { animation: chave-fundo 6s var(--ease) 1s infinite; }
.nada2.on .chave i { animation: chave-bola 6s var(--ease) 1s infinite; }
@keyframes chave-fundo { 0%, 40% { background: linear-gradient(90deg, #6FD6DF, #6890EA); } 50%, 85% { background: #D6E0EA; } 100% { background: linear-gradient(90deg, #6FD6DF, #6890EA); } }
@keyframes chave-bola { 0%, 40% { left: 32px; } 50%, 85% { left: 4px; } 95%, 100% { left: 32px; } }
.chave__s { font-size: 13.5px; font-weight: 500; color: var(--tinta-suave); }

/* the bubbles rise behind the text, never over it */
.sec--gratis > .bolhas, .sec--como > .bolhas { z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------- headline B (the video): no line below, a clear play button, smaller proofs */
.ver-video { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--tinta); text-decoration: none; }
.ver-video svg { flex: none; color: var(--pervinca-funda); animation: desce 1.8s var(--ease) infinite; }
@keyframes desce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.rm .ver-video svg { animation: none; }
@media (min-width: 768px) { .ver-video { font-size: 32px; } }
.p1 .provas-topo { grid-template-columns: 1fr 1fr; gap: 8px; max-width: 26em; }
.p1 .provas-topo .prova { gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; align-items: center; }
.p1 .provas-topo .prova__n { min-width: 46px; height: 38px; padding: 0 6px; border-radius: 12px; font-size: 17px; }
.p1 .provas-topo .prova__n--rel svg { width: 24px; height: 24px; }
.p1 .provas-topo .prova__t { font-size: 13px; line-height: 1.25; }
.p1 .provas-topo .prova__f { margin-top: 1px; font-size: 11.5px; font-weight: 500; }
/* on B, the video's own play button glows too */

/* Phones: the controls sit above the phone screen, so "Próximo" stays in view while each step plays */
@media (max-width: 959px) {
  .p1-sim .sim__palco { display: flex; flex-direction: column; }
  .p1-sim .guia { order: 1; margin-bottom: 12px; }
  .p1-sim .ctrl { order: 2; margin: 0 0 14px; }
  .p1-sim .sim__passos { order: 3; }
  .p1-sim:not(.sim--rodando) .ctrl { display: none; }
}

/* Phones: tighter space between sections, so the page never feels empty between blocks */
@media (max-width: 767px) {
  .p1 .sec, .p1 .sim-sec { padding: 40px 0; }
}

/* The studies, as DESIGN.md asks: no cards — white ground, hairlines and white space; the brand colours only as light */
.p1 .sec--provas { background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FC 100%); }
.p1 .sec--provas .est { position: relative; isolation: isolate; padding: 30px 0 26px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--linha); }
.p1 .sec--provas .est:first-of-type { border-top: 0; padding-top: 6px; }
.p1 .est__n { position: relative; display: inline-block; font-weight: 300; }
.p1 .est__n::before { content: ""; position: absolute; z-index: -1; left: -14px; top: 6%; width: calc(100% + 40px); height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,160,134,.42), rgba(245,160,134,0)); filter: blur(10px); }
.p1 .est + .est .est__n::before { background: radial-gradient(closest-side, rgba(111,214,223,.45), rgba(111,214,223,0)); }
.p1 .est__n small { font-weight: 300; }
.p1 .est__fonte { color: var(--tinta-suave); }
.p1 .est__fonte b { color: var(--tinta); font-weight: 600; }
.p1 .barra-l__trilho { height: 22px; }

/* the two proofs under the promise: lines, not boxes */
.p1 .provas-topo { gap: 0; column-gap: 32px; border-bottom: 1px solid var(--linha); }
.p1 .prova { padding: 14px 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--linha); }
.p1 .prova__n { position: relative; isolation: isolate; min-width: 64px; height: auto; padding: 0; border-radius: 0; background: none; font-weight: 300; }
.p1 .prova__n::before { content: ""; position: absolute; z-index: -1; inset: -6px -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,160,134,.4), rgba(245,160,134,0)); filter: blur(6px); }
.p1 .prova + .prova .prova__n::before { background: radial-gradient(closest-side, rgba(111,214,223,.45), rgba(111,214,223,0)); }
.p1 .prova__f { color: var(--tinta-suave); font-weight: 600; }
/* no video for now (owner, 17/10): the first screen is one column */
@media (min-width: 960px) { .hero--p1 .hero__grade { grid-template-columns: minmax(0, 760px); } }
/* the headline animates from the first paint (a script right after it splits the words; see p1-direta.html) */
.h1-p1.cedo .w { display: inline-block; opacity: 0; transform: translateY(.28em); filter: blur(7px); transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); transition-delay: calc(var(--wi) * 30ms); }
.h1-p1.cedo.on .w { opacity: 1; transform: none; filter: none; }