/* ============================================================
   Dra. Daniela Londe · psiquiatria · Goiânia
   Base do sistema visual (ver 02-conceito/sistema.md)
   ============================================================ */
:root{
  /* cor */
  --s-papel:#f6f1ea;
  --s-papel-2:#efe6d6;
  --s-creme:#efe6d6;
  --s-cinza:#d3d3ce;
  --s-linho:#c39f87;
  --s-linho-claro:#e6d2c4;
  --s-ceu:#85baf2;
  --s-tinta:#2e1e18;
  --s-tinta-2:#6a5246;
  --s-tinta-3:#8a7268;
  --s-ouro:#c9a15a;
  --s-ouro-fundo:#8a6627;
  --s-ouro-claro:#e7c98a;
  --s-noite:#2e1e18;
  --s-filete:color-mix(in oklab, var(--s-tinta) 16%, transparent);
  --s-filete-2:color-mix(in oklab, var(--s-tinta) 8%, transparent);
  /* tipografia */
  --s-serif:"Inria Serif", Georgia, "Times New Roman", serif;
  --s-sans:"Inria Sans", "Helvetica Neue", Arial, sans-serif;
  --s-mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --s-titulo:clamp(1.95rem, 3.6vw, 3rem);
  --s-titulo-2:clamp(1.5rem, 2.6vw, 2.2rem);
  --s-h3:clamp(1.14rem, 1.6vw, 1.34rem);
  --s-corpo:clamp(1rem, 1.15vw, 1.125rem);
  --s-mini:.76rem;
  /* espaço */
  --s-margem:clamp(1.25rem, 5.4vw, 5.25rem);
  --s-nav:clamp(4rem, 9svh, 5.25rem);
  --s-respiro:clamp(3rem, 8svh, 5.5rem);
  --s-ease:cubic-bezier(.2,.7,.1,1);
  --s-ease-2:cubic-bezier(.25,.6,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--s-papel);color:var(--s-tinta);font-family:var(--s-sans);font-size:var(--s-corpo);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--s-ouro);outline-offset:3px;border-radius:2px}
::selection{background:var(--s-linho-claro);color:var(--s-tinta)}

/* ---------- utilitários ---------- */
.s-salta{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.s-registro{position:relative;max-width:74rem;margin:0 auto;padding-left:var(--s-margem);padding-right:var(--s-margem)}
.s-olho{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 clamp(.9rem,2.2svh,1.4rem);font-size:var(--s-mini);letter-spacing:.18em;text-transform:uppercase;color:var(--s-tinta-2)}
.s-olho::before{content:"";width:2rem;height:1px;background:var(--s-ouro)}
.s-olho b{font-weight:700;color:var(--s-tinta)}
.s-titulo{margin:0;font-family:var(--s-serif);font-weight:300;font-size:var(--s-titulo);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
.s-titulo em{font-style:italic;font-weight:400;color:var(--s-ouro-fundo)}
.s-titulo--media{color:var(--s-tinta-3)}
.s-titulo--cheio{color:var(--s-tinta)}
.s-entra{opacity:0;transform:translateY(16px)}
.s-entra.s-no{opacity:1;transform:none}
.s-apoio{max-width:36em;color:var(--s-tinta-2);line-height:1.62}
.s-apoio strong{font-weight:700;color:var(--s-tinta)}
.s-num{font-family:var(--s-serif);font-variant-numeric:lining-nums tabular-nums}

/* ---------- malha de gradiente (fundos de seção) ---------- */
.s-malha{position:absolute;inset:-12%;pointer-events:none;overflow:hidden}
.s-malha i{position:absolute;border-radius:50%;will-change:transform;animation:s-respira 32s ease-in-out infinite alternate}
@keyframes s-respira{from{transform:translate3d(-2%,1.5%,0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.08)}}
@keyframes s-respira-b{from{transform:translate3d(3%,-1%,0) scale(1.06)}to{transform:translate3d(-3%,2%,0) scale(1)}}
.s-grao{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .12 0 0 0 0 .09 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.s-pausado .s-malha i{animation-play-state:paused}

/* ---------- botões ---------- */
.s-botao{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-weight:700;font-size:.98rem;letter-spacing:.005em;text-decoration:none;color:var(--s-papel);background:var(--s-tinta);padding:1.02rem 1.6rem;border-radius:999px;box-shadow:0 14px 30px -16px rgba(46,30,24,.7);transition:transform .35s var(--s-ease), box-shadow .35s}
.s-botao::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--s-ouro);box-shadow:0 0 0 .28rem rgba(201,161,90,.28);transition:box-shadow .35s}
.s-botao:hover,.s-botao:focus-visible{transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(46,30,24,.75)}
.s-botao:hover::before{box-shadow:0 0 0 .42rem rgba(201,161,90,.32)}
.s-link{display:inline-block;font-size:.94rem;text-decoration:none;color:var(--s-tinta);padding:.5rem 0;border-bottom:1px solid var(--s-ouro);transition:color .3s}
.s-link:hover,.s-link:focus-visible{color:var(--s-ouro-fundo)}

/* ---------- cartão de prova (citação de paciente) ---------- */
.s-prova{border-left:2px solid var(--s-ouro);padding:.2rem 0 .2rem 1.1rem}
.s-prova q{font-family:var(--s-serif);font-style:italic;font-weight:300;font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.45;quotes:"“" "”";color:var(--s-tinta);text-wrap:pretty}
.s-prova footer{margin-top:.45rem;font-size:var(--s-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--s-tinta-3)}
.s-prova footer b{color:var(--s-tinta-2);font-weight:700}

/* ---------- entrada ---------- */
@keyframes s-sobe{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes s-surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- reveal ao rolar (uma classe por elemento) ---------- */
.s-revela{opacity:0;transform:translateY(18px);transition:opacity .8s var(--s-ease-2), transform .8s var(--s-ease-2)}
.s-revela.s-no{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .s-revela{opacity:1;transform:none}
}