/* Satori Psicologia — base */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;               /* clip, não hidden: hidden cria contêiner de rolagem */
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"opsz" 40;   /* trava o eixo óptico: as hastes não afinam em corpo grande */
  line-height:var(--lh-title);
  letter-spacing:-.012em;
  color:var(--fg-title);
  text-wrap:balance;
}

p{text-wrap:pretty}

img,svg{display:block;max-width:100%}
img{height:auto}

a{
  color:var(--link);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
a:hover{text-decoration-thickness:2px}

:focus{outline:none}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-1);
}

::selection{background:var(--satori-girassol);color:var(--ink-1000)}

/* Seção: pinta o próprio fundo a partir dos papéis */
.sec{
  background:var(--bg);
  color:var(--fg);
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}

/* Contêiner + grade de 12 colunas.
   Colunas 1–3 são a MARGEM (a pergunta do visitante); o conteúdo vive em 4–12. */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + 2 * var(--gutter));
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.grade{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap);
}
.grade > *{grid-column:1 / -1}

.sr-only{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.pular{
  position:absolute;left:var(--sp-4);top:-6rem;z-index:100;
  padding:var(--sp-3) var(--sp-4);
  background:var(--verde-profundo);color:var(--ink-050);
  border-radius:var(--radius-2);
  font-weight:600;text-decoration:none;
}
.pular:focus{top:var(--sp-3);outline-color:var(--satori-girassol)}

/* ------------------------------------------------------------------
   Movimento — tudo sob .anim, que só existe com JS e sem reduced-motion.
   Sem .anim a página nasce pronta. A fotografia nunca é animada.
------------------------------------------------------------------- */
.anim [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.anim [data-reveal].vis{opacity:1;transform:none}

/* título que sobe por LINHA: cada palavra numa máscara */
.anim [data-split]:not(.pronto),
.anim [data-linhas]:not(.pronto){visibility:hidden}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word__inner{display:inline-block}
.anim .word__inner{
  transform:translateY(112%);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--linha,0) * 95ms);
}
.anim .vis .word__inner{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],.word__inner{opacity:1 !important;transform:none !important}
  .escada li{opacity:1 !important}
  .escada li::before{transform:none !important}
}