/* Efeitos compartilhados (home e páginas internas). Antes vivia no fim do home.css. */
/* ══ EFEITOS DO SITE ═══════════════════════════════════════════════════════════════════
   Seis efeitos (borrão, linha dos passos, carimbo, blocos, risco, barra fixa), as quatro etapas visuais,
   o painel Mood/Method e o mapa da visão global. Tudo é melhoria: o estado natural é sempre o completo, e as
   animações só ligam com as classes fx-* que o script do <head> põe junto com html.anim (sem movimento
   reduzido e sem ?still=1). A barra fixa não é movimento e liga sempre. JS: assets/js/efeitos.js. */

/* ── 1 · TEXTO QUE SAI DO BORRÃO ────────────────────────────
   Título entra desfocado e nítido pousa: do chute para o número. O h1 do hero perde a entrada
   "sobe" (que só subia) e usa esta. */
html.fx-borrao .hero-inner h1.sobe{animation:none;opacity:1;transform:none}
html.fx-borrao main h2,html.fx-borrao .hero-inner h1,html.fx-borrao .hero-interna h1,html.fx-borrao .links-name{
  transition:opacity .8s cubic-bezier(.3,.7,.3,1),filter 1.2s cubic-bezier(.3,.7,.3,1),
    transform 1.2s cubic-bezier(.3,.7,.3,1)}
html.fx-borrao main h2:not(.fx-in-b),html.fx-borrao .hero-inner h1:not(.fx-in-b),
html.fx-borrao .hero-interna h1:not(.fx-in-b),html.fx-borrao .links-name:not(.fx-in-b){
  opacity:0;filter:blur(14px);transform:translateY(18px) scale(1.025);transform-origin:0 60%}

/* ── 2 · LINHA QUE CRESCE COM A ROLAGEM ─────────────────────
   Nas listas de passos (Como eu faço e A primeira conversa). A linha rosa desce junto com a
   leitura e cada passo acende quando ela chega. É uma sequência de verdade (01, 02, 03...). */
html.fx-linha :is(.metodo-passos,.trajeto){position:relative;--pad:clamp(26px,3.4vw,44px);padding-left:var(--pad);
  --ini:0px;--fim:0px;--prog:0px}
html.fx-linha :is(.metodo-passos,.trajeto)::before{content:'';position:absolute;left:4px;top:var(--ini);width:1px;
  height:calc(var(--fim) - var(--ini));background:var(--linha)}
html.fx-linha :is(.metodo-passos,.trajeto)::after{content:'';position:absolute;left:3.5px;top:var(--ini);width:2px;
  height:var(--prog);background:var(--rosa)}
html.fx-linha :is(.metodo-passos,.trajeto) li{position:relative}
html.fx-linha :is(.metodo-passos,.trajeto) li::before{content:'';position:absolute;z-index:1;left:calc(var(--pad) * -1);
  top:calc(clamp(22px,2.4vw,28px) + 9px);width:9px;height:9px;background:var(--preto);
  box-shadow:inset 0 0 0 1.5px var(--linha);
  transition:background .3s,box-shadow .3s,transform .55s var(--mola)}
html.fx-linha :is(.metodo-passos,.trajeto) li.on::before{background:var(--rosa);box-shadow:0 0 0 5px rgba(255,0,122,.16);
  transform:rotate(45deg) scale(1.08)}

/* o carimbo e os blocos inclinados passam da borda por um instante: sem isso o celular ganha rolagem lateral */
html.fx-carimbo main,html.fx-inclina main{overflow-x:clip}

/* ── 3 · CARIMBO QUE QUICA ──────────────────────────────────
   Os 3 selos da Formação caem um por vez, com um quique, e o check fecha cada um. */
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista):not(.fx-in-c) .selo{opacity:0}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo{animation:fx-carimbo .85s cubic-bezier(.2,.8,.3,1) backwards}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo:nth-child(2){animation-delay:.24s}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo:nth-child(3){animation-delay:.48s}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo__check{animation:fx-check .45s var(--mola) .5s backwards}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo:nth-child(2) .selo__check{animation-delay:.74s}
html.fx-carimbo :is(.formacao__lista,.links-page .selos__lista).fx-in-c .selo:nth-child(3) .selo__check{animation-delay:.98s}
@keyframes fx-carimbo{
  0%{opacity:0;transform:scale(1.9) rotate(-9deg)}
  45%{opacity:1;transform:scale(.92) rotate(1.5deg)}
  70%{transform:scale(1.04) rotate(-.6deg)}
  100%{opacity:1;transform:none}
}
@keyframes fx-check{from{opacity:0;transform:translateX(-50%) scale(.2)}}

/* ── 4 · BLOCOS QUE ASSENTAM ────────────────────────────────
   Cards entram inclinados ±1,2° e assentam com uma pequena mola. Regra da marca: nada fica reto. */
html.fx-inclina .fx-i{transition:opacity .7s ease var(--atraso,0s),transform .95s var(--mola) var(--atraso,0s)}
html.fx-inclina .fx-i:not(.fx-in-i){opacity:0;transform:translateY(26px) rotate(var(--giro,1.2deg));transform-origin:0 0}

/* ── 5 · RISCO EM "FAZER MAIS" ──────────────────────────────
   O título do Método fala de cortar: o risco rosa corta "fazer mais" e o trecho esmaece. */
html.fx-risca .risca{background:linear-gradient(var(--rosa),var(--rosa)) no-repeat left 52% / 100% .085em;
  color:var(--texto-fraco);
  transition:background-size .8s cubic-bezier(.45,0,.25,1) .55s,color .7s ease .75s}
html.fx-risca .risca:not(.fx-in-r){background-size:0% .085em;color:var(--texto)}

/* ── 6 · BARRA FIXA DE WHATSAPP ─────────────────────────────
   Só no celular e no tablet (onde o cabeçalho não tem o botão). Aparece depois do hero e some quando já há botão
   de WhatsApp na tela, no rodapé, com o menu aberto ou com o banner de cookies. */
.barra-fixa{display:none}
@media (max-width:900px){
  html.fx-barra .barra-fixa{display:block;position:fixed;z-index:80;left:0;right:0;bottom:0;
    padding:10px var(--margem) calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,8,10,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--linha);transform:translateY(105%);visibility:hidden;
    transition:transform .55s cubic-bezier(.45,0,.25,1),visibility 0s linear .55s}
  html.fx-barra .barra-fixa.on{transform:none;visibility:visible;transition-delay:0s}
  html.fx-barra .barra-fixa .btn{display:flex;width:100%;max-width:520px;margin:0 auto}
  html.fx-barra .barra-fixa .btn > span:first-child{flex:1;justify-content:center}
}
@media print{.barra-fixa{display:none!important}}

/* ── AS 4 ETAPAS, VISUAIS ── */
.fluxo{--gap:clamp(18px,2.4vw,36px);--p:clamp(22px,2.4vw,28px);margin-top:clamp(28px,3.4vw,48px)}
.fluxo__lista{list-style:none;margin:0;padding:0}

/* ── lista (celular e versão enxuta) ── */
.etapa{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-content:start;
  padding:var(--p) 0}
.etapa__trilha{display:none}
.etapa__icone{grid-column:1;grid-row:1 / span 4;width:64px;height:64px;overflow:visible;color:var(--creme)}
.etapa > :not(.etapa__icone):not(.etapa__trilha){grid-column:2}
.etapa__num{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:var(--track-micro);
  color:var(--rosa)}
.etapa h3{margin-top:6px}
.etapa p{margin-top:8px;color:var(--texto-medio);font-size:16.5px;line-height:1.5;max-width:44ch}
.etapa .etapa__sai{margin-top:16px;padding-top:12px;border-top:1px solid var(--linha-fina);max-width:none;
  color:var(--texto);font-size:16px}
.etapa__sai span{display:block;margin-bottom:4px;font-family:var(--mono);font-size:12px;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--texto-fraco)}
/* conector vertical entre os desenhos */
.etapa:not(:last-child)::before,.etapa:not(:last-child)::after{content:'';position:absolute;left:31.5px;width:1px;
  top:calc(var(--p) + 72px);bottom:calc(var(--p) * -1 + 8px)}
.etapa:not(:last-child)::before{background:var(--linha)}
.etapa:not(:last-child)::after{background:var(--rosa);transform-origin:top;width:2px;margin-left:-.5px}

/* desenhos */
.ic .tr{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}
.ic .tr.rosa{stroke:var(--rosa)}
.ic .tr.grosso{stroke-width:6;stroke-linecap:butt}
.ic .fl{fill:var(--rosa);stroke:var(--rosa);stroke-width:2.5}

/* laço do fim (a lista usa o ícone pequeno; as colunas, o U) */
.fluxo__ciclo{display:flex;align-items:center;gap:14px;margin-top:6px;padding:18px 0;
  border-top:1px solid var(--linha-fina)}
.ciclo__laco{flex:none;width:28px;height:28px;color:var(--rosa)}
.ciclo__laco path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:square}
.ciclo__rotulo{font-family:var(--mono);font-size:12px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--rosa)}
.ciclo__u,.ciclo__seta{display:none}

/* ── colunas (computador) ── */
@media (min-width:761px){
  .fluxo[data-modo="colunas"] .fluxo__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:var(--gap)}
  .fluxo[data-modo="colunas"] .etapa{display:flex;flex-direction:column;padding:0}
  .fluxo[data-modo="colunas"] .etapa::before,.fluxo[data-modo="colunas"] .etapa::after{display:none}
  .fluxo[data-modo="colunas"] .etapa > :not(.etapa__icone):not(.etapa__trilha){grid-column:auto}
  .fluxo[data-modo="colunas"] .etapa__trilha{display:flex;align-items:center;height:12px;margin-bottom:28px}
  .fluxo[data-modo="colunas"] .etapa__no{flex:none;width:9px;height:9px;background:var(--rosa);
    box-shadow:0 0 0 5px rgba(255,0,122,.16);transform:rotate(45deg) scale(1.08)}
  .fluxo[data-modo="colunas"] .etapa__fio{position:relative;flex:1;height:1px;background:var(--linha);
    margin-left:14px}
  .fluxo[data-modo="colunas"] .etapa:not(:last-child) .etapa__fio{margin-right:calc(var(--gap) * -1 + 2px)}
  .fluxo[data-modo="colunas"] .etapa:last-child .etapa__fio{display:none}
  .fluxo[data-modo="colunas"] .etapa__fio::after{content:'';position:absolute;left:0;right:0;top:-.5px;height:2px;
    background:var(--rosa);transform-origin:left}
  .fluxo[data-modo="colunas"] .etapa__icone{width:96px;height:96px;margin-bottom:24px}
  .fluxo[data-modo="colunas"] .etapa h3{margin-top:8px}
  .fluxo[data-modo="colunas"] .etapa .etapa__sai{margin-top:auto;padding-top:14px}
  .fluxo[data-modo="colunas"] .etapa p:not(.etapa__sai){margin-bottom:22px}
  .fluxo[data-modo="colunas"] .fluxo__ciclo{position:relative;display:block;height:58px;margin-top:34px;
    padding:0;border-top:0}
  .fluxo[data-modo="colunas"] .ciclo__laco{display:none}
  .fluxo[data-modo="colunas"] .ciclo__u{display:block;position:absolute;inset:0;width:100%;height:100%;
    overflow:visible}
  .fluxo[data-modo="colunas"] .ciclo__u path{fill:none;stroke:var(--rosa);stroke-width:1.5;
    vector-effect:non-scaling-stroke;stroke-linejoin:miter}
  .fluxo[data-modo="colunas"] .ciclo__seta{display:block;position:absolute;left:calc(1% - 6px);top:-3px;
    width:12px;height:12px;color:var(--rosa)}
  .fluxo[data-modo="colunas"] .ciclo__seta path{fill:none;stroke:currentColor;stroke-width:1.5}
  .fluxo[data-modo="colunas"] .ciclo__rotulo{position:absolute;left:50%;top:calc(52 / 58 * 100%);
    transform:translate(-50%,-50%);background:var(--preto);padding:0 16px;white-space:nowrap}
}

/* ── animação (só com html.fx-etapas) ── */
html.fx-etapas .fluxo .tr{stroke-dasharray:1;
  transition:stroke-dashoffset 1s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * .55s + var(--j,0) * .14s)}
html.fx-etapas .fluxo:not(.visto) .tr{stroke-dashoffset:1}
html.fx-etapas .fluxo .fl{transition:opacity .5s ease calc(var(--i,0) * .55s + .5s)}
html.fx-etapas .fluxo:not(.visto) .fl{opacity:0}
html.fx-etapas .fluxo .etapa > :not(.etapa__icone):not(.etapa__trilha){
  transition:opacity .7s ease calc(var(--i,0) * .55s + .25s),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * .55s + .25s)}
html.fx-etapas .fluxo:not(.visto) .etapa > :not(.etapa__icone):not(.etapa__trilha){opacity:0;transform:translateY(12px)}
/* trilha das colunas */
@media (min-width:761px){
  html.fx-etapas .fluxo[data-modo="colunas"] .etapa__no{
    transition:background .3s ease calc(var(--i,0) * .55s),box-shadow .3s ease calc(var(--i,0) * .55s),
      transform .55s var(--mola) calc(var(--i,0) * .55s)}
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .etapa__no{background:var(--preto);
    box-shadow:inset 0 0 0 1.5px var(--linha);transform:none}
  html.fx-etapas .fluxo[data-modo="colunas"] .etapa__fio::after{
    transition:transform .55s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * .55s + .3s)}
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .etapa__fio::after{transform:scaleX(0)}
  html.fx-etapas .fluxo[data-modo="colunas"] .ciclo__u{
    transition:clip-path 1.5s cubic-bezier(.45,0,.25,1) 2.3s;clip-path:inset(-10px 0 -10px 0)}
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .ciclo__u{clip-path:inset(-10px 0 -10px 100%)}
  html.fx-etapas .fluxo[data-modo="colunas"] .ciclo__seta,
  html.fx-etapas .fluxo[data-modo="colunas"] .ciclo__rotulo{transition:opacity .5s ease 3.5s}
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .ciclo__seta,
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .ciclo__rotulo{opacity:0}
}
/* conector vertical da lista */
html.fx-etapas .fluxo .etapa:not(:last-child)::after{
  transition:transform .6s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * .55s + .7s)}
html.fx-etapas .fluxo:not(.visto) .etapa:not(:last-child)::after{transform:scaleY(0)}
html.fx-etapas .fluxo .fluxo__ciclo{transition:opacity .6s ease 2.4s}
html.fx-etapas .fluxo:not(.visto) .fluxo__ciclo{opacity:0}
@media (min-width:761px){
  html.fx-etapas .fluxo[data-modo="colunas"] .fluxo__ciclo{transition:none}
  html.fx-etapas .fluxo[data-modo="colunas"]:not(.visto) .fluxo__ciclo{opacity:1}
}
html.fx-etapas .fluxo.zera,html.fx-etapas .fluxo.zera *,html.fx-etapas .fluxo.zera *::before,
html.fx-etapas .fluxo.zera *::after{transition:none!important}

/* ── PAINEL MOOD / METHOD ── */
.depois{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(36px,4.4vw,60px);
  background:var(--carvao,#121216);border-radius:6px;box-shadow:inset 0 0 0 1px var(--linha);
  padding:clamp(18px,2.6vw,34px)}
/* luz rosa que acende no topo quando o painel liga */
.depois::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:70%;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% -10%,rgba(255,0,122,.17),transparent 72%);
  opacity:0;transition:opacity 1s ease}
.depois[data-estado="depois"]::before{opacity:1}

.depois__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--linha-fina)}
.depois__titulo{font-family:var(--mono);font-size:12px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--texto-fraco);transition:color .4s ease}
.depois[data-estado="depois"] .depois__titulo{color:var(--rosa)}
.depois__chaves{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

/* chave liga/desliga */
.chave-liga{display:inline-flex;align-items:center;gap:14px;padding:8px 10px 8px 20px;background:var(--preto);
  border:1px solid var(--linha);border-radius:999px;cursor:pointer;color:var(--creme);
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 0 0 rgba(255,0,122,0);transition:border-color .35s,box-shadow .5s}
.chave-liga__txt{display:grid;min-width:84px;text-align:left;color:var(--texto-fraco);transition:color .3s}
.chave-liga__txt > span{grid-area:1 / 1;transition:opacity .25s ease}
.chave-liga__txt .lig{opacity:0}
.chave-liga__trilho{position:relative;flex:none;width:64px;height:34px;border-radius:999px;background:#2b2b31;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .35s}
.chave-liga__bola{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  background:var(--creme);box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.chave-liga[aria-checked="true"]{border-color:var(--rosa);
  box-shadow:0 0 0 1px rgba(255,0,122,.25),0 0 32px rgba(255,0,122,.3)}
.chave-liga[aria-checked="true"] .chave-liga__txt{color:var(--rosa)}
.chave-liga[aria-checked="true"] .chave-liga__txt .des{opacity:0}
.chave-liga[aria-checked="true"] .chave-liga__txt .lig{opacity:1}
.chave-liga[aria-checked="true"] .chave-liga__trilho{background:var(--rosa)}
.chave-liga[aria-checked="true"] .chave-liga__bola{transform:translateX(30px)}
.chave-liga:focus-visible{outline:2px solid var(--rosa);outline-offset:4px}
@media (hover:hover){.chave-liga:hover .chave-liga__bola{box-shadow:0 2px 10px rgba(0,0,0,.6)}}

/* empresa ou clínica: troca só as palavras */
.chave{display:inline-flex;gap:4px;padding:4px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--linha)}
.chave button{font-family:var(--mono);font-size:12px;letter-spacing:var(--track-micro);text-transform:uppercase;
  color:var(--texto-medio);background:transparent;border:0;border-radius:4px;min-height:40px;padding:0 16px;
  cursor:pointer;transition:background .25s,color .25s}
.chave button[aria-pressed="true"]{background:var(--rosa);color:var(--preto)}
.chave button:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
@media (hover:hover){.chave button[aria-pressed="false"]:hover{color:var(--creme)}}
.depois[data-cenario="empresa"] [data-cli],.depois[data-cenario="clinica"] [data-emp]{display:none}

/* barra lateral e tarja (a tarja cobre o conteúdo apagado e escorrega para a direita ao ligar) */
.tile__barra{position:absolute;left:0;width:3px;background:var(--rosa);transform-origin:50% 0;transform:scaleY(0);
  transition:transform .45s cubic-bezier(.6,0,.2,1) calc(var(--t) * .14s + .1s)}
.tile__corpo{position:relative}
.tarja{position:absolute;left:0;right:-2px;top:-2px;bottom:-2px;display:flex;align-items:center;padding-left:20px;
  background:#1b1b21;transform-origin:100% 50%;transform:scaleX(1);
  transition:transform .6s cubic-bezier(.7,0,.2,1) calc(var(--t) * .14s + .15s)}
.tarja i{font-style:normal;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;
  color:var(--texto-fraco);transition:opacity .2s ease}
.depois figcaption{margin-top:18px;padding-left:20px;font-size:14px;line-height:1.5;color:var(--texto-fraco)}

.decide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
.decide__col{--t:0;position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,2.6vw,34px) 0 clamp(24px,2.8vw,36px) 20px;border-bottom:1px solid var(--linha-fina)}
.decide__rot{font-family:var(--display);font-weight:700;font-size:clamp(38px,5vw,68px);letter-spacing:var(--track-display);
  line-height:1;color:var(--creme);transition:color .5s ease}
.decide__def{font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--texto-medio);max-width:36ch;
  transition:color .5s ease}
.decide__lista{list-style:none;margin:6px 0 0;padding:0}
.decide__lista li{position:relative;padding:15px 0;border-top:1px solid var(--linha-fina);
  font-size:clamp(17px,1.35vw,20px);line-height:1.4;color:var(--creme);transition:color .5s ease}
.decide__lista li > span{position:relative;display:inline}

/* Mood: apaga e se risca quando liga (o risco acompanha a largura de cada frase) */
.decide__col--mood li > span{background:linear-gradient(var(--rosa),var(--rosa)) no-repeat left 56% / 0% 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * .18s + .1s)}
.decide__col--mood li:nth-child(1){--i:0}.decide__col--mood li:nth-child(2){--i:1}.decide__col--mood li:nth-child(3){--i:2}
.depois[data-risco="1"] .decide__col--mood .decide__rot,
.depois[data-risco="1"] .decide__col--mood .decide__def,
.depois[data-risco="1"] .decide__col--mood li{color:var(--texto-fraco)}
.depois[data-risco="1"] .decide__col--mood li > span{background-size:100% 2px}

/* Method: apagado atrás da tarja, acende com barra rosa e número */
.decide__col--method .decide__rot{color:var(--texto-fraco)}
.depois[data-method="1"] .decide__col--method .decide__rot{color:var(--rosa)}
.decide__col--method .tile__barra{top:clamp(22px,2.6vw,34px);bottom:clamp(24px,2.8vw,36px)}
.depois[data-method="1"] .decide__col--method .tile__barra{transform:none}
.depois[data-method="1"] .decide__col--method .tarja{transform:scaleX(0)}
.depois[data-method="1"] .decide__col--method .tarja i{opacity:0}
.decide__col--method .tile__corpo{display:flex;flex-direction:column;gap:14px;min-height:240px}
.decide__lista--m li{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.decide__num{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:var(--track-display);
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.decide__fecho{margin-top:auto;font-family:var(--display);font-weight:700;font-size:clamp(20px,1.8vw,26px);
  letter-spacing:var(--track-display);line-height:1.15;color:var(--rosa)}
.decide__col--method .tarja{top:0;bottom:0}
.depois[data-method="1"] .decide__col--method .decide__fecho{animation:fx-surge .6s ease 1.5s backwards}
@keyframes fx-surge{from{opacity:0;transform:translateY(8px)}}
@media (max-width:760px){.decide{grid-template-columns:1fr}.decide__col--method .tile__corpo{min-height:0}}

/* "Quanto entrou": mini-barras (não há número publicado para "entrou", então só a forma) */
.moeda-peq{display:inline-block;margin-right:10px;vertical-align:middle;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2vw,26px);letter-spacing:var(--track-display)}
.mini-barras{display:inline-block;width:clamp(84px,8vw,108px);height:auto;vertical-align:middle;overflow:visible}
.mini-barras rect{fill:var(--creme);transform-box:fill-box;transform-origin:50% 100%}
.mini-barras rect.u{fill:var(--rosa)}
.depois[data-method="1"] .mini-barras rect{animation:fx-sobe-barra .55s cubic-bezier(.34,1.3,.64,1) backwards}
.depois[data-method="1"] .mini-barras rect:nth-child(1){animation-delay:1s}
.depois[data-method="1"] .mini-barras rect:nth-child(2){animation-delay:1.1s}
.depois[data-method="1"] .mini-barras rect:nth-child(3){animation-delay:1.2s}
.depois[data-method="1"] .mini-barras rect:nth-child(4){animation-delay:1.3s}
.depois[data-method="1"] .mini-barras rect:nth-child(5){animation-delay:1.45s}
@keyframes fx-sobe-barra{from{transform:scaleY(0)}}

/* câmera: no computador o painel dá um zoom suave e passeia do Mood para o Method; no celular quem passeia é a rolagem */
@media (min-width:761px){
  .decide{transition:transform 1.1s cubic-bezier(.45,0,.25,1),transform-origin 1.1s cubic-bezier(.45,0,.25,1);
    transform-origin:50% 40%}
  .depois[data-camera="mood"] .decide{transform:scale(1.035);transform-origin:22% 38%}
  .depois[data-camera="method"] .decide{transform:scale(1.035);transform-origin:78% 38%}
}
@media (max-width:760px){.depois__topo{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  .depois *,.depois *::before,.depois *::after{animation:none!important;transition:none!important}
}

/* ── VISÃO GLOBAL ── */
.global{margin-bottom:clamp(40px,5vw,72px)}
.global__tese{max-width:22ch;margin-bottom:clamp(22px,2.6vw,34px);font-size:clamp(26px,3vw,42px);line-height:1.08}
.global__mapa{--d:clamp(78px,9vw,120px);position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.global__bloco{position:relative;display:flex;flex-direction:column;min-height:clamp(132px,17vw,230px);
  padding:clamp(16px,2vw,26px);background:var(--carvao,#121216);box-shadow:inset 0 0 0 1px var(--linha);
  transition:box-shadow .3s ease}
.global__nome{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,32px);
  letter-spacing:var(--track-display);line-height:1.08;max-width:12ch}
/* os nomes ficam nos cantos de fora; o centro é do encontro */
.global__bloco--tl{justify-content:flex-start;align-items:flex-start}
.global__bloco--tr{justify-content:flex-start;align-items:flex-end;text-align:right}
.global__bloco--bl{justify-content:flex-end;align-items:flex-start}
.global__bloco--br{justify-content:flex-end;align-items:flex-end;text-align:right}
.global__chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;align-self:flex-start;
  padding:6px 10px;font-family:var(--mono);font-size:12px;letter-spacing:var(--track-micro);text-transform:uppercase;
  color:var(--texto-medio);box-shadow:inset 0 0 0 1px var(--linha);border-radius:3px}
.global__chip::before{content:'';width:6px;height:6px;background:var(--rosa);flex:none}
/* edicao em ingles, celular: o bloco tem ~140px de miolo e "AD PLATFORMS" nao cabe em uma linha;
   o chip encolhe um passo pra nao quebrar nem encostar no losango do centro. */
@media (max-width:480px){html[lang="en"] .global__chip{white-space:nowrap;font-size:10.5px;letter-spacing:.06em;padding:5px 8px;gap:6px}}
@media (max-width:340px){html[lang="en"] .global__chip{font-size:9.5px;letter-spacing:.03em;padding:4px 6px;gap:5px}}
/* edicao em portugues, celular: "Gerenciador de anuncios" quebrava em duas linhas largas e um canto do chip
   entrava no losango. Mesmo passo de fonte do ingles e largura maxima, pra quebrar em "Gerenciador / de anuncios". */
@media (max-width:480px){html[lang="pt-BR"] .global__chip{font-size:10.5px;letter-spacing:.06em;padding:5px 8px;gap:6px;max-width:112px}}
@media (max-width:380px){html[lang="pt-BR"] .global__chip{font-size:10px;letter-spacing:.04em;padding:4px 6px;gap:5px;max-width:96px}}
@media (max-width:340px){html[lang="pt-BR"] .global__chip{font-size:9.5px;letter-spacing:.03em;max-width:92px}}
.global__bloco--bl .global__nome{order:2}
.global__centro{position:absolute;left:50%;top:50%;z-index:2;width:var(--d);height:var(--d);
  transform:translate(-50%,-50%) rotate(45deg);display:grid;place-items:center;background:var(--rosa);
  box-shadow:0 0 0 6px var(--preto),0 0 48px rgba(255,0,122,.28)}
.global__centro span{transform:rotate(-45deg);font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.7vw,22px);letter-spacing:var(--track-display);color:var(--preto)}
.global__legenda{margin-top:clamp(18px,2vw,26px);font-size:clamp(17px,1.3vw,20px);line-height:1.45;font-weight:600;
  color:var(--texto)}
@media (hover:hover){.global__bloco:hover{box-shadow:inset 0 0 0 1px var(--rosa)}}

/* ── animação (só com html.fx-global) ── */
html.fx-global .global__bloco{transition:clip-path .8s cubic-bezier(.45,0,.25,1) calc(var(--i,0) * .16s),box-shadow .3s ease}
html.fx-global .global__bloco--tl{--i:0}html.fx-global .global__bloco--tr{--i:1}
html.fx-global .global__bloco--br{--i:2}html.fx-global .global__bloco--bl{--i:3}
html.fx-global .global:not(.visto) .global__bloco--tl{clip-path:inset(100% 0 0 100%)}
html.fx-global .global:not(.visto) .global__bloco--tr{clip-path:inset(100% 100% 0 0)}
html.fx-global .global:not(.visto) .global__bloco--br{clip-path:inset(0 100% 100% 0)}
html.fx-global .global:not(.visto) .global__bloco--bl{clip-path:inset(0 0 100% 100%)}
html.fx-global .global__bloco > *{transition:opacity .6s ease calc(var(--i,0) * .16s + .55s),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * .16s + .55s)}
html.fx-global .global:not(.visto) .global__bloco > *{opacity:0;transform:translateY(8px)}
html.fx-global .global__centro{transition:transform .7s var(--mola) 1.15s,opacity .3s ease 1.15s}
html.fx-global .global:not(.visto) .global__centro{transform:translate(-50%,-50%) rotate(45deg) scale(0);opacity:0}
html.fx-global .global__bloco--bl .global__chip{transition:opacity .6s ease 1.7s,transform .7s cubic-bezier(.16,1,.3,1) 1.7s}
html.fx-global .global__legenda,html.fx-global .global__tese{transition:opacity .7s ease 2s,transform .8s cubic-bezier(.16,1,.3,1) 2s}
html.fx-global .global:not(.visto) .global__legenda{opacity:0;transform:translateY(8px)}
html.fx-global .global.zera,html.fx-global .global.zera *{transition:none!important}

/* ── 7 · X OVER Y ───────────────────────────────────────────
   Nos seis princípios do Método. Ao entrar na tela o X ganha o traço rosa: o lado escolhido. O Y continua inteiro
   e legível, nunca riscado nem apagado (a marca escolhe lado sem xingar, e o peso fica nos dois extremos). */
.principios__linha .lado{background:linear-gradient(var(--rosa),var(--rosa)) no-repeat 0 100% / 100% 3px;
  padding-bottom:.05em}
html.fx-lado .principios__linha .lado{transition:background-size .7s cubic-bezier(.45,0,.25,1) .3s}
html.fx-lado .principios__linha:not(.fx-in-l) .lado{background-size:0% 3px}

/* ── 8 · SINAIS QUE ACENDEM ─────────────────────────────────
   Cada sinal vira um botão (JS). Marcar acende o marcador; com 3 acesos a conclusão ganha a barra e o destaque.
   Sem JS é a lista de sempre. */
.sinais__conta{margin-top:clamp(22px,2.6vw,32px);font-family:var(--mono);font-size:12px;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--texto-fraco)}
.sinais__conta b{color:var(--rosa);font-weight:700;font-variant-numeric:tabular-nums}
.sinais__conta + .sinais{margin-top:14px}
.sinais.marcavel li{padding:0;transition:background .35s ease}
.sinais.marcavel li::before{transition:background .3s ease,box-shadow .3s ease,transform .55s var(--mola),border-radius .3s ease}
.sinal{display:flex;align-items:flex-start;width:100%;height:100%;margin:0;border:0;background:none;color:inherit;font:inherit;
  letter-spacing:inherit;text-align:left;cursor:pointer;
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px) 52px;transition:color .3s ease}
.sinal:focus-visible{outline:2px solid var(--rosa);outline-offset:-4px}
@media (hover:hover){.sinal:hover{color:var(--texto)}}
.sinais li.aceso{background:linear-gradient(rgba(255,0,122,.09),rgba(255,0,122,.09)),var(--preto)}
.sinais li.aceso::before{border-radius:0;background:var(--rosa);transform:rotate(45deg) scale(1.08);
  box-shadow:0 0 0 5px rgba(255,0,122,.16)}
.sinais li.aceso .sinal{color:var(--texto)}
.sinais.marcavel + [data-sinais-conclusao]{position:relative;padding-left:22px}
.sinais.marcavel + [data-sinais-conclusao]::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:3px;
  background:var(--rosa);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.sinais.marcavel + [data-sinais-conclusao].on::before{transform:none}
.sinais.marcavel + [data-sinais-conclusao] strong{transition:color .4s ease}
.sinais.marcavel + [data-sinais-conclusao].on strong{color:var(--rosa)}

/* etapas desenhadas com 3 colunas (Diagnóstico) */
@media (min-width:761px){
  .fluxo[data-modo="colunas"][data-n="3"] .fluxo__lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* impressão e PDF: nada fica escondido esperando animação (já saiu página em branco por causa disso) */
@media print{
  html[class*="fx-"] *,html[class*="fx-"] *::before,html[class*="fx-"] *::after{transition:none!important;animation:none!important}
  html[class*="fx-"] main h2,html[class*="fx-"] .hero-inner h1,html[class*="fx-"] .hero-interna h1,html[class*="fx-"] .links-name{opacity:1!important;filter:none!important;transform:none!important}
  html[class*="fx-"] .fx-i{opacity:1!important;transform:none!important}
  html[class*="fx-"] .selo{opacity:1!important;animation:none!important}
  html[class*="fx-"] .risca{background-size:100% .085em!important}
  html[class*="fx-"] .principios__linha .lado{background-size:100% 3px!important}
  html[class*="fx-"] .fluxo .tr{stroke-dashoffset:0!important}
  html[class*="fx-"] .fluxo .fl,html[class*="fx-"] .fluxo .etapa > *,html[class*="fx-"] .fluxo .fluxo__ciclo,
  html[class*="fx-"] .fluxo .ciclo__seta,html[class*="fx-"] .fluxo .ciclo__rotulo{opacity:1!important;transform:none!important}
  html[class*="fx-"] .fluxo .etapa__fio::after{transform:none!important}
  html[class*="fx-"] .fluxo .ciclo__u{clip-path:none!important}
  html[class*="fx-"] .global__bloco{clip-path:none!important}
  html[class*="fx-"] .global__bloco > *,html[class*="fx-"] .global__legenda{opacity:1!important;transform:none!important}
  html[class*="fx-"] .global__centro{opacity:1!important;transform:translate(-50%,-50%) rotate(45deg)!important}
}