/* base do site: sistema derivado do hero A. As seções só usam estas variáveis e as do :root do hero. */
:root{
  /* o hero B define --papel, --papel-claro, --parede, --areia, --organza, --pele, --tinta, --tinta-media, --tinta-leve, --fio, --vermelho, --didone, --sans, --manuscrita, --margem */
  --serifa:var(--didone);
  --versal:var(--sans);
  --tinta-suave:var(--tinta-media);
  --papel-2:color-mix(in oklab,var(--papel) 78%,var(--areia));
  --papel-fio:var(--fio);
  /* o vermelho dela, em profundidade: página da capa vermelha e contracapa */
  --vermelho-aceso:#a8011f;
  --carmim:#86001a;
  --sangue:#74000d;
  --vinho:#58000d;
  --vinho-fundo:#3a0109;
  --noite:#1f0005;
  --castanho:#2b0f0b;
  --marfim:#f4ead9;
  --marfim-suave:#e6d3bd;
  --marfim-fio:rgba(244,234,217,.38);
  --tinta-barras:#1c0306;
  --vela:#f1c68a;
  --ease:cubic-bezier(.16,.84,.3,1);
  --lomb:22px;
  --wf-gut:var(--margem);
  --wf-sec-y:clamp(4.5rem,9vw,8.5rem);
  --wf-max:86rem;
  --t-titulo:clamp(2.6rem,5.8vw,5.4rem);
  --t-sub:clamp(1.35rem,2.2vw,2rem);
  --t-texto:clamp(1rem,1.1vw,1.125rem);
  --t-mini:.8125rem;
}
html{scroll-behavior:smooth;overflow-x:clip}
h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* seção */
.wf-sec{position:relative;isolation:isolate;padding:var(--wf-sec-y) var(--wf-gut);font-family:var(--versal);font-size:var(--t-texto);line-height:1.6;overflow:clip}
.wf-sec--papel{background:var(--papel);color:var(--tinta)}
.wf-sec--noite{background:var(--noite);color:var(--marfim)}
.wf-dentro{max-width:var(--wf-max);margin-inline:auto}

/* cabeço de página: abre toda seção, como numa revista (ÁDAMA · editoria · fólio) */
.wf-cabeco{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;max-width:var(--wf-max);margin:0 auto clamp(2rem,5vw,4rem);padding-bottom:.8rem;border-bottom:1px solid currentColor;font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase}
.wf-cabeco b{font-family:var(--serifa);font-weight:400;font-size:1.2em;letter-spacing:.16em}
.wf-cabeco i{font-style:normal;font-family:var(--serifa);font-size:1.25em;letter-spacing:.04em}
.wf-sec--papel .wf-cabeco{border-color:var(--papel-fio)}
.wf-sec--noite .wf-cabeco{border-color:var(--marfim-fio)}

/* tipografia comum */
.wf-olho{font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase}
.wf-titulo{font-family:var(--serifa);font-weight:400;font-size:var(--t-titulo);line-height:1;letter-spacing:-.012em}
.wf-titulo em{font-style:normal;color:var(--vermelho)}
.wf-titulo .wf-mao,.wf-mao{font-family:var(--manuscrita);font-weight:400;font-style:normal;letter-spacing:0;color:var(--vermelho)}
.wf-fala{font-family:var(--serifa);font-style:normal;font-weight:400}
.wf-assina{font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.18em;text-transform:uppercase;font-style:normal}

/* botão: o mesmo do hero */
.wf-botao{display:inline-flex;align-items:center;gap:.9rem;min-height:3.4rem;padding:.6rem 1.6rem;background:var(--tinta);color:var(--papel);text-decoration:none;font-family:var(--versal);font-weight:500;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;border:0;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.wf-botao svg{width:1.3rem;height:1.3rem;flex:none}
.wf-botao:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.wf-botao--marfim{background:var(--marfim);color:var(--tinta-barras)}
.wf-botao--carmim{background:var(--carmim);color:var(--marfim)}
.wf-link{color:inherit;text-underline-offset:.3em;text-decoration-thickness:1px;min-height:3rem;display:inline-flex;align-items:center}

/* entrada por rolagem: um gesto por seção */
[data-wf-entra]{opacity:0;transform:translateY(1.4rem);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
[data-wf-entra].wf-visto{opacity:1;transform:none}
.sem-js [data-wf-entra]{opacity:1;transform:none}

/* barra que aparece depois da capa */
.wf-barra{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem var(--wf-gut);background:color-mix(in oklab,var(--papel) 90%,transparent);backdrop-filter:blur(10px);color:var(--tinta);font-family:var(--versal);font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;transform:translateY(-110%);transition:transform .5s var(--ease);border-bottom:1px solid var(--fio)}
.wf-barra.wf-ativa{transform:none}
.wf-barra a{text-decoration:none;color:inherit;min-height:2.75rem;display:inline-flex;align-items:center}
.wf-barra-nome{font-family:var(--serifa);font-weight:400;font-size:1.35rem;letter-spacing:.14em}
.wf-barra-nome span{font-family:var(--manuscrita);letter-spacing:0;font-size:1.25em;color:var(--vermelho);margin-left:.35em;text-transform:none}
.wf-barra nav{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.wf-barra-zap{background:var(--tinta);color:var(--papel)!important;padding:0 1.1rem}
@media (max-width:860px){.wf-barra nav{display:none}.wf-barra{font-size:.8125rem;letter-spacing:.14em}}

/* rodapé: a contracapa */
.wf-rodape{position:relative;isolation:isolate;background:radial-gradient(120% 120% at 50% 0% in oklch,var(--sangue),var(--vinho-fundo) 70%,var(--noite));color:var(--marfim);padding:clamp(4rem,8vw,7rem) var(--wf-gut) 1.5rem;font-family:var(--versal);overflow:clip}