/* Satori Psicologia — seções */

/* Estrutura comum: margem (col 1–3) + corpo (col 4–12) -------------- */
.sec__margem{grid-column:1 / span 3;align-self:start}
.sec__corpo{grid-column:4 / -1;min-width:0}

@media (min-width:62rem){
  .sec__margem{position:sticky;top:calc(var(--header-h) + 2rem);padding-right:var(--sp-5)}
}
@media (max-width:61.99rem){
  .sec__margem,.sec__corpo{grid-column:1 / -1}
  .sec__margem{margin-bottom:var(--sp-5)}
}

.sec h2{font-size:var(--t-3xl);max-width:17em}
.sec p{max-width:var(--measure)}

/* O girassol: duas camadas (pétalas + miolo) que giram em sentidos opostos --- */
.flor{position:absolute;aspect-ratio:1;pointer-events:none;user-select:none}
.flor img{position:absolute;inset:0;width:100%;height:100%;will-change:transform}

/* 1 · Abertura — imersiva, verde profundo, o girassol nascendo ------- */
.abertura{
  position:relative;overflow:clip;
  min-height:min(100svh,60rem);
  padding-top:calc(var(--header-h) + clamp(1.5rem,5vh,4rem));
  padding-bottom:clamp(3rem,7vh,5.5rem);
  display:flex;align-items:center;
  background:
    radial-gradient(52rem 52rem at 82% 78%,rgba(240,168,24,.2),transparent 62%),
    radial-gradient(40rem 30rem at 8% 0%,rgba(110,177,102,.14),transparent 70%),
    var(--verde-profundo);
}
.abertura > .wrap{position:relative;z-index:2}
.abertura .flor{
  z-index:1;
  width:clamp(40rem,66vw,62rem);
  right:clamp(-20rem,-15vw,-11rem);
  bottom:clamp(-28rem,-21vw,-15rem);
}
.anim .abertura .flor{opacity:0;transform:scale(.82) rotate(-24deg);transition:opacity 1.4s var(--ease-out),transform 2.2s var(--ease-out)}
.anim .abertura .flor.vis{opacity:1;transform:none}

.abertura__quem{display:contents}
.abertura__ident{
  grid-column:1 / span 8;grid-row:1;
  font-size:1rem;line-height:1.4;font-weight:500;letter-spacing:.01em;
  color:var(--fg-muted);
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:clamp(1.25rem,3vh,2.25rem);
  max-width:none;
}
.abertura__ident::before{content:"";width:2.5rem;height:2px;background:var(--mark);flex:none}
.abertura__ident b{font-weight:600;color:var(--fg)}

.abertura__detalhe{
  grid-column:10 / -1;grid-row:1 / span 3;
  justify-self:end;align-self:start;
  width:min(100%,15.5rem);
  padding:.75rem .75rem 2.25rem;
  background:var(--ink-050);
  box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.45);
  transform:rotate(2.2deg);
  margin-top:clamp(0rem,4vh,3rem);
}

.abertura__titulo{
  grid-column:1 / span 9;grid-row:2;
  font-size:var(--t-hero);line-height:var(--lh-tight);letter-spacing:-.022em;
  text-wrap:initial;
}
.abertura__titulo .l{display:block}

.abertura__acao{
  grid-column:1 / span 6;grid-row:3;
  margin-top:clamp(1.75rem,4.5vh,3.25rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);
}
.abertura__onde{
  font-size:var(--t-lg);line-height:1.4;font-weight:500;color:var(--fg);
  margin-bottom:var(--sp-3);
  max-width:none;
}
.abertura__botoes{
  display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;
  gap:var(--sp-3) var(--sp-6);
}
.abertura__botoes .btn{grid-column:1;grid-row:1}
.abertura__botoes .canal{grid-column:1 / -1;grid-row:2}
.abertura__botoes .link-seta{grid-column:2;grid-row:1}

.abertura__apoio{
  grid-column:1 / span 5;grid-row:4;
  margin-top:clamp(1.5rem,4vh,2.75rem);
  padding-left:var(--sp-5);
  border-left:1px solid var(--line-strong);
  font-size:var(--t-base);line-height:1.6;
  color:var(--fg-muted);
}

.abertura__role{
  position:absolute;z-index:2;left:50%;bottom:1.25rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);text-decoration:none;
}
.abertura__role::after{content:"";width:1px;height:2.25rem;background:linear-gradient(var(--fg-muted),transparent)}
.anim .abertura__role::after{animation:role 2.4s var(--ease-out) infinite}
@keyframes role{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:61.99rem){
  .abertura{min-height:0;display:block;padding-top:calc(var(--header-h) + 1rem);padding-bottom:14.5rem}
  .abertura .flor{width:30rem;right:-11.5rem;bottom:-15rem}
  .abertura__quem{display:flex;align-items:center;gap:var(--sp-4);grid-column:1 / -1;margin-bottom:var(--sp-5)}
  .abertura__ident{display:block;margin:0;font-size:1rem}
  .abertura__ident::before{content:none}
  .abertura__ident b{display:block;font-size:1.0625rem}
  .abertura__detalhe{width:4rem;padding:.1875rem;box-shadow:none;transform:none;margin:0;flex:none}
  .abertura__titulo,.abertura__acao,.abertura__apoio{grid-column:1 / -1;grid-row:auto}
  .abertura__acao{margin-top:var(--sp-5)}
  .abertura__botoes{display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .abertura__acao .btn{width:100%;max-width:24rem}
  .abertura__apoio{margin-top:var(--sp-6);padding-left:var(--sp-4)}
  .abertura__role{display:none}
}
@media (max-width:61.99rem) and (max-height:40rem){
  .abertura__quem{margin-bottom:var(--sp-4)}
  .abertura__detalhe{width:3rem}
  .abertura__acao{margin-top:var(--sp-4)}
}
@media (min-width:62rem) and (max-height:46rem){
  .abertura__apoio{display:none}
}

/* Faixa tipográfica — desliza com a rolagem ---------------------------- */
.faixa{
  background:var(--ink-100);color:var(--verde-profundo);
  overflow:clip;
  padding:clamp(2rem,5vw,4.5rem) 0 clamp(.5rem,2vw,1.5rem);
}
.faixa__trilho{
  display:flex;align-items:center;gap:clamp(1.5rem,3.5vw,3.5rem);
  width:max-content;
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 60;
  font-size:var(--t-faixa);line-height:1.1;letter-spacing:-.02em;white-space:nowrap;
  transform:translate3d(-6%,0,0);
  will-change:transform;
}
.faixa__trilho .o{
  color:var(--ink-100);                      /* preenche com o fundo: esconde os contornos internos da fonte variável */
  -webkit-text-stroke:2.5px var(--verde-profundo);
  paint-order:stroke fill;
  font-style:normal;
}
.faixa__trilho i{
  flex:none;width:.34em;height:.34em;border-radius:50%;
  background:radial-gradient(circle,var(--satori-miolo) 0 34%,var(--satori-girassol) 36% 100%);
}

/* Girassóis — o texto que ela escolheu, com o campo se virando ---------
   O campo nasce virado para dentro (é o que o texto diz). Com movimento
   permitido, o JS parte do estado aberto e converge para esse. */
.girassois{
  position:relative;overflow:clip;isolation:isolate;
  padding-bottom:clamp(15rem,25vw,27rem);
}
.girassois__ceu{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48rem 30rem at 50% 104%,rgba(255,204,27,.30),transparent 64%),
    radial-gradient(34rem 24rem at 78% 8%,rgba(240,168,24,.14),transparent 70%);
  opacity:calc(1 - var(--nublado,.5) * .62);
}
.girassois > .wrap{position:relative;z-index:2}
.girassois .rotulo{color:var(--satori-girassol)}
.girassois h2{
  font-size:var(--t-xl);font-weight:400;letter-spacing:-.005em;
  color:var(--fg-muted);max-width:20em;
}

.manifesto{margin:clamp(1.75rem,4vw,3rem) 0 0;padding:0;border:0}
.manifesto p{
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"opsz" 44;
  font-size:clamp(1.4rem,.95rem + 1.5vw,2.375rem);
  line-height:1.3;letter-spacing:-.014em;
  color:var(--fg-title);
  max-width:30ch;
}
.sec .manifesto p{max-width:30ch}
.manifesto p + p{margin-top:.9em}
.manifesto b{font-weight:400;color:var(--satori-girassol)}
.manifesto__fim{
  display:block;margin-top:.34em;
  font-size:clamp(2.25rem,1rem + 5.4vw,5.5rem);
  line-height:1;letter-spacing:-.03em;
  color:var(--satori-girassol);
}

.campo{
  position:absolute;z-index:1;left:0;right:0;bottom:0;
  height:clamp(13rem,22vw,24rem);
  pointer-events:none;
}
.campo__flor{
  position:absolute;bottom:-7%;left:var(--x);
  width:calc(var(--esc,1) * clamp(7.5rem,12.5vw,14rem));
  transform-origin:bottom center;
  transform:rotate(var(--vira,0deg));
  opacity:var(--op,1);
}
.campo__flor img{display:block;width:100%;height:auto}
.campo__flor:nth-child(1){--x:2%;--esc:.66;--vira:24deg;--op:.92}
.campo__flor:nth-child(2){--x:17%;--esc:.94;--vira:16deg}
.campo__flor:nth-child(3){--x:34%;--esc:.6;--vira:7deg;--op:.9}
.campo__flor:nth-child(4){--x:51%;--esc:1;--vira:-6deg}
.campo__flor:nth-child(5){--x:69%;--esc:.7;--vira:-15deg;--op:.92}
.campo__flor:nth-child(6){--x:84%;--esc:.86;--vira:-23deg}

@media (max-width:61.99rem){
  .girassois{padding-bottom:13rem}
  .campo{height:11rem}
  .campo__flor{width:calc(var(--esc,1) * 6.5rem)}
  .campo__flor--extra{display:none}
  .campo__flor:nth-child(1){--x:-3%;--esc:.68;--vira:12deg}
  .campo__flor:nth-child(2){--x:18%;--esc:.9;--vira:9deg}
  .campo__flor:nth-child(4){--x:54%;--esc:.98;--vira:-7deg}
  .campo__flor:nth-child(6){--x:84%;--esc:.8;--vira:-12deg}
}

/* 2 · Identificação — frases em escada, que acendem ao passar ---------- */
.escada{
  --degrau:clamp(.75rem,3.4vw,3.25rem);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.escada li{
  position:relative;
  margin-left:calc(var(--n,0) * var(--degrau));
  padding:clamp(.9rem,1.6vw,1.35rem) 0 clamp(1rem,1.8vw,1.5rem);
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"opsz" 32;
  font-size:var(--t-2xl);line-height:1.2;letter-spacing:-.012em;
  color:var(--fg-title);
}
.escada li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line-strong);
  transform-origin:left center;
}
.anim .escada li{opacity:.22;transition:opacity .8s var(--ease-out)}
.anim .escada li.on{opacity:1}
.anim .escada li::before{transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.anim .escada li.on::before{transform:none}

.identificacao__fecho{
  margin-top:clamp(2.5rem,5vw,4.5rem);
  margin-left:auto;
  max-width:24rem;
  padding-top:var(--sp-4);
  position:relative;
  font-size:var(--t-lg);line-height:1.5;
}
.identificacao__fecho::before{
  content:"";position:absolute;left:0;top:0;width:2.5rem;height:3px;
  background:var(--satori-petala);
}
@media (max-width:61.99rem){
  .identificacao__fecho{margin-left:0}
}

/* 3 · O que levar para a terapia ------------------------------------ */
.trabalho__colunas{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:var(--sp-5);
  margin-top:clamp(2rem,4vw,3.5rem);
}
.trabalho__abre{
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"opsz" 32;
  font-size:var(--t-xl);line-height:1.3;color:var(--fg-title);
  max-width:20em;
}
.trabalho__texto p + p{margin-top:var(--sp-4)}
.trabalho__fecho{
  margin-top:clamp(2.5rem,5vw,4.5rem);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line-strong);
  font-family:var(--f-display);font-weight:500;
  font-variation-settings:"opsz" 40;
  font-size:var(--t-2xl);line-height:1.18;letter-spacing:-.012em;
  color:var(--fg-title);
  text-wrap:balance;
}
.sec p.trabalho__fecho{max-width:18em}
@media (max-width:47.99rem){
  .trabalho__colunas{grid-template-columns:minmax(0,1fr)}
}

/* 4 · Conheça a Francy ----------------------------------------------- */
.francy{position:relative;overflow:clip}
.francy__corpo{
  display:grid;
  grid-template-columns:minmax(0,calc(var(--retrato-w) + 2 * var(--passe))) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:clamp(2rem,4vw,3.5rem);
}
.francy__corpo h2{grid-column:1 / -1;position:relative;z-index:1}
.francy__quadro{grid-column:1;position:relative}
.francy__sol{
  position:absolute;z-index:0;
  width:clamp(14rem,26vw,24rem);aspect-ratio:1;border-radius:50%;
  background:var(--satori-girassol);
  right:clamp(-7rem,-8vw,-4rem);top:clamp(-5rem,-5vw,-3rem);
}
.francy__quadro .passe{position:relative;z-index:1}
.francy__texto{font-size:var(--t-lg);line-height:1.55;grid-column:2;align-self:end;padding-bottom:calc(var(--passe) + 3.25rem);position:relative;z-index:1}
.francy__texto p + p{margin-top:var(--sp-4)}
.francy__mais:empty{display:none}
.francy__mais{margin-top:var(--sp-5)}

@media (max-width:61.99rem){
  .francy__corpo{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-6)}
  .francy__corpo h2,.francy__quadro,.francy__texto{grid-column:1}
  .francy__quadro .passe{max-width:calc(21.25rem + 2 * var(--passe))}   /* 340 px no celular */
  .francy__quadro{max-width:calc(21.25rem + 2 * var(--passe))}
  .francy__sol{width:13rem;right:-4.5rem;top:-2.75rem}
  .francy__texto{padding-bottom:0}
}

/* 5 · Online ou presencial — página amarela, título em escala de cartaz */
.formatos{position:relative;overflow:clip}
.formatos h2{max-width:none;text-wrap:initial}
.formatos .ln{display:block}
.formatos .ln--cartaz{
  font-size:var(--t-cartaz);line-height:.98;letter-spacing:-.03em;
}
.formatos .ln--fio{
  margin-top:.16em;padding-top:.2em;
  border-top:2px solid var(--verde-profundo);
}
.formatos .ln--resto{
  margin-top:.55em;
  font-size:var(--t-2xl);line-height:1.15;letter-spacing:-.012em;
}
.formatos__texto{
  margin-top:clamp(2rem,4vw,3.5rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);
  font-size:var(--t-lg);line-height:1.55;
}
.formatos__mais:empty{display:none}

/* 6 · Livro — página marrom-miolo, escala contida ---------------------- */
.sec.livro h2{font-size:var(--t-xl);line-height:1.25;max-width:20em;letter-spacing:-.005em;font-weight:400}
.livro__titulo{
  display:block;
  margin-top:var(--sp-6);
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.75rem,1.3rem + 2vw,3rem);line-height:1.16;letter-spacing:-.01em;
  color:var(--satori-girassol);
  max-width:22em;
}
.livro__titulo small{display:block;font-size:.6em;line-height:1.3;margin-top:.35em;color:var(--fg-title)}
.livro__texto{margin-top:var(--sp-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}

/* 7 · Contato — virada final, o girassol de novo ----------------------- */
.contato{
  position:relative;overflow:clip;
  padding-top:clamp(5rem,4rem + 7vw,9rem);
  padding-bottom:clamp(5rem,4rem + 7vw,9rem);
  background:
    radial-gradient(46rem 46rem at 88% 100%,rgba(240,168,24,.22),transparent 62%),
    var(--verde-profundo);
}
.contato > .wrap{position:relative;z-index:2}
.contato .flor{
  z-index:1;
  width:clamp(30rem,50vw,48rem);
  right:clamp(-16rem,-14vw,-9rem);
  bottom:clamp(-22rem,-20vw,-13rem);
}
.contato__corpo{grid-column:1 / span 7}
.contato__corpo h2{font-size:var(--t-hero);line-height:var(--lh-tight);letter-spacing:-.022em;max-width:9em}
.contato__corpo > h2 + p{margin-top:var(--sp-5);font-size:var(--t-lg);line-height:1.5}
.contato__acao{
  margin-top:var(--sp-6);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);
}
.contato__acao .btn{min-height:3.75rem;padding-left:2rem;padding-right:2rem;font-size:1.125rem}
.contato__outros{margin-top:var(--sp-5)}
.contato__nota{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--t-sm);line-height:1.55;color:var(--fg-muted);
}
.sec p.contato__nota{max-width:30rem}

@media (max-width:61.99rem){
  .contato__corpo{grid-column:1 / -1}
  .contato{padding-bottom:16rem}                 /* o girassol fica DEPOIS da ação, nunca atrás do texto */
  .contato .flor{width:30rem;right:-11rem;bottom:-16rem}
  .contato__acao .btn{width:100%;max-width:24rem}
}

/* 404 ------------------------------------------------------------------ */
.perdido{min-height:calc(100svh - var(--header-h));display:flex;align-items:center}
.perdido h1{font-size:var(--t-3xl);max-width:14em}
.perdido p{margin-top:var(--sp-5);font-size:var(--t-lg)}
.perdido .btn{margin-top:var(--sp-6)}