/* WebForge · Dr. Eduardo de Carvalho Martins — base do site (depois do hero)
   Tudo o que é comum às seções. Classes com prefixo wf-. Seções usam o próprio prefixo (at-, pp-, tr-, av-, lo-, fq-, fe-, ro-). */

:root{
  /* papel: as seções claras (as artes dele são marinho sobre branco) */
  --papel:#F4F5FA;
  --papel-2:#E9EDEA;          /* gelo puxado para a sálvia */
  --papel-salvia:#DCE4DE;     /* sálvia clara do fundo do retrato */
  --papel-fio:rgba(20,44,72,.22);
  --tinta-papel:#142C48;      /* marinho: 13,4:1 sobre o papel */
  --tinta-papel-suave:#3A5068;/* 7,6:1 sobre #F4F5FA; 6,6:1 sobre #DCE4DE */
  --tinta-papel-fina:#5A6E80; /* 4,9:1 sobre #F4F5FA (só mono pequeno ≥ .72rem) */
  --salvia-escura:#4E6A60;    /* sálvia legível sobre papel: 5,6:1 */
  --azul-bordado:#4F8796;     /* o azul do logo bordado na manga */
  --estrela:#C9A27A;
  --estrela-papel:#9A6F43;

  /* ritmo */
  --sec-pad:clamp(88px, 11vw, 168px);
  --largura:1280px;
  --coluna:680px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --curva-articula:cubic-bezier(.55,0,.15,1);   /* começa lento, acelera, assenta: o braço */
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--azul-bordado);outline-offset:3px;border-radius:4px}
.wf-noite :focus-visible,.hero :focus-visible{outline-color:var(--salvia)}

/* granulado: um só, fixo, por cima de tudo (o do hero continua só no hero) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- seções ---------- */
.wf-sec{position:relative;isolation:isolate;overflow:clip;padding:var(--sec-pad) var(--margem)}
.wf-papel{background:var(--papel);color:var(--tinta-papel)}
.wf-papel.wf-salvia{background:linear-gradient(in oklab 180deg, var(--papel-2), var(--papel-salvia))}
.wf-noite{background:var(--noite);color:var(--tinta)}
.wf-miolo{max-width:var(--largura);margin:0 auto;position:relative}

/* cabeçalho de seção: número de prancha + título + linha de apoio */
.wf-prancha-n{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--salvia-escura)}
.wf-noite .wf-prancha-n{color:var(--salvia)}
.wf-prancha-n::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.wf-prancha-n::after{content:"";height:1px;width:56px;background:currentColor;opacity:.5}
.wf-titulo{margin:0;font-family:var(--f-titulo);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(2.2rem, 1rem + 3.4vw, 4.2rem);line-height:.96;letter-spacing:-.005em;text-wrap:balance}
.wf-titulo em{font-style:normal;color:var(--salvia-escura)}
.wf-noite .wf-titulo em{color:var(--salvia)}
.wf-lead{margin:20px 0 0;font-size:clamp(1.02rem, .95rem + .3vw, 1.2rem);line-height:1.6;color:var(--tinta-papel-suave);max-width:36em;text-wrap:pretty}
.wf-noite .wf-lead{color:var(--tinta-suave)}
.wf-texto{font-size:1.02rem;line-height:1.66;color:var(--tinta-papel-suave);text-wrap:pretty}
.wf-noite .wf-texto{color:var(--tinta-suave)}
.wf-mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em}

/* rótulo de atlas: ponto + fio + texto em mono (o recurso dos rótulos do hero) */
.wf-rotulo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.07em;color:var(--salvia-escura);white-space:nowrap}
.wf-rotulo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.wf-rotulo::after{content:"";height:1px;width:36px;background:currentColor;opacity:.55;order:-1;display:none}
.wf-noite .wf-rotulo{color:var(--salvia)}

/* aro do logo: o círculo com duas falhas, em qualquer tamanho */
.wf-aro{position:absolute;pointer-events:none;border-radius:50%;
  background:conic-gradient(from 0deg, currentColor 0 113deg, transparent 113deg 122deg, currentColor 122deg 292deg, transparent 292deg 302deg, currentColor 302deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px))}

/* botões */
.wf-botao{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:9px 26px 9px 18px;border-radius:999px;background:var(--marinho);color:var(--gelo);text-decoration:none;font-weight:700;font-family:var(--f-titulo);
  box-shadow:0 14px 30px -16px rgba(4,33,65,.7);transition:transform .35s var(--curva), background .3s}
.wf-botao svg{width:24px;height:24px;fill:#5FD08F;flex:none}
.wf-botao:hover{transform:translateY(-2px);background:var(--noite)}
.wf-noite .wf-botao{background:var(--gelo);color:var(--noite)}
.wf-noite .wf-botao svg{fill:#1A8A4E}
.wf-noite .wf-botao:hover{background:#fff}
.wf-link{font-family:var(--f-mono);font-size:.84rem;letter-spacing:.03em;text-decoration:none;color:inherit;padding:12px 2px;border-bottom:1px solid currentColor}

/* revelação na rolagem: um gesto por seção; .wf-rv sobe e aparece; --d = atraso */
.js .wf-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--curva) var(--d,0s), transform 1s var(--curva) var(--d,0s)}
.js .wf-rv.wf-visto{opacity:1;transform:none}

/* WhatsApp flutuante (aparece depois do hero) */
.wf-zap{position:fixed;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));z-index:80;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px 0 16px;border-radius:999px;
  background:var(--gelo);color:var(--noite);text-decoration:none;font-family:var(--f-titulo);font-weight:700;font-size:.95rem;box-shadow:0 14px 34px -12px rgba(4,33,65,.55), 0 0 0 1px rgba(20,44,72,.08);
  transform:translateY(140%);transition:transform .6s var(--curva)}
.wf-zap svg{width:24px;height:24px;fill:#1A8A4E}
.wf-zap.wf-mostra{transform:none}
@media (max-width:520px){.wf-zap span{display:none}.wf-zap{padding:0;width:58px;justify-content:center}}

/* utilitário de acessibilidade */
.wf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}