/* Base do site — sistema visual derivado do hero E (ver 02-conceito/sistema.md) */
:root{
  --papel:#f4f1ec;
  --folha:#faf8f5;
  --greige-1:#e9e4de;
  --greige-2:#d6cfc7;
  --greige-3:#bfb6ad;
  --greige-4:#a79d95;
  --lilas:#e4d9df;
  --pele:#d9b8a2;
  --ameixa:#945a7a;
  --ameixa-escura:#5f3450;
  --ameixa-clara:#c9a3b8;
  --petroleo:#0d3246;
  --petroleo-2:#1f4a5e;
  --tinta:#1b2a33;
  --tinta-suave:#4e5a62;
  --tinta-leve:#6f7b83;
  --caramelo:#a8652a;
  --ameixa-texto:#7a4663;
  --noite:#0d2432;
  --noite-2:#071d2b;
  --perola:#f4f1ec;
  --perola-suave:#c9d1d6;
  --liquido:linear-gradient(180deg, var(--ameixa-clara), var(--ameixa) 40%, color-mix(in oklch, var(--ameixa) 60%, var(--caramelo)) 100%);
  --vidro:linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,.18) 30%, rgba(13,50,70,.07) 62%, rgba(255,255,255,.45));
  --vidro-borda:inset 0 0 0 1px rgba(13,50,70,.22), inset 0 2px 0 rgba(255,255,255,.8), 0 24px 44px -26px rgba(13,50,70,.55);
  --serifa:"Literata", Georgia, serif;
  --sans:"Schibsted Grotesk", system-ui, sans-serif;
  --mono:"Sometype Mono", ui-monospace, monospace;
  --gutter:clamp(20px, 5vw, 72px);
  --largura:1240px;
  --respiro:clamp(72px, 10vh, 128px);
  --nav-h:72px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --nivel:22%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--tinta);background:var(--papel);
  min-height:100svh;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ameixa);outline-offset:3px;border-radius:4px}
.wf-visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* malha de fundo (fixa, atrás de tudo) */
.e-malha{position:fixed;inset:0;z-index:-2;background:var(--papel);overflow:hidden}
.e-malha i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;animation:e-respira 32s ease-in-out infinite alternate}
.e-malha i:nth-child(1){width:70vw;height:70vw;left:-20vw;top:-30vw;background:radial-gradient(circle, var(--greige-2), transparent 70%)}
.e-malha i:nth-child(2){width:60vw;height:60vw;right:-15vw;top:-10vw;background:radial-gradient(circle, var(--lilas), transparent 68%);animation-delay:-8s}
.e-malha i:nth-child(3){width:55vw;height:55vw;right:5vw;bottom:-25vw;background:radial-gradient(circle, color-mix(in oklab, var(--pele) 55%, var(--papel)), transparent 70%);animation-delay:-16s}
.e-malha i:nth-child(4){width:40vw;height:40vw;left:30vw;bottom:-18vw;background:radial-gradient(circle, color-mix(in oklab, var(--greige-3) 70%, var(--papel)), transparent 70%);animation-delay:-24s}
.e-malha i:nth-child(5){width:30vw;height:30vw;left:42vw;top:10vh;background:radial-gradient(circle, color-mix(in oklch, var(--ameixa-clara) 35%, var(--papel)), transparent 70%);animation-delay:-4s}
@keyframes e-respira{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vh,0) scale(1.08)}}
/* granulado único, fixo, por cima de tudo */
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* navegação */
.e-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;height:var(--nav-h);padding:0 var(--gutter);transition:background .4s, box-shadow .4s}
.e-nav.e-nav--solida{background:color-mix(in oklab, var(--papel) 86%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(13,50,70,.08)}
.e-logo{display:inline-flex;align-items:baseline;gap:2px;color:var(--petroleo);position:relative;padding-bottom:14px}
.e-logo-t{font-family:var(--sans);font-weight:400;letter-spacing:.12em;font-size:19px;line-height:1}
.e-logo-s{width:17px;height:25px;color:var(--ameixa);fill:var(--ameixa);transform:translateY(5px);margin:0 1px}
.e-logo-sub{position:absolute;right:0;bottom:0;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.e-links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--tinta-suave)}
.e-links a{position:relative;padding:4px 0}
.e-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ameixa);transition:right .35s}
.e-links a:hover::after,.e-links a[aria-current]::after{right:0}
.e-nav-zap{font-size:13px;font-weight:600;letter-spacing:.02em;padding:9px 16px;border:1px solid color-mix(in oklab, var(--petroleo) 35%, transparent);border-radius:999px;color:var(--petroleo);white-space:nowrap}
.e-nav-zap:hover{background:var(--petroleo);color:var(--papel)}
.e-nav-menu{display:none}

/* botão fixo do WhatsApp */
.e-zap-fixo{position:fixed;right:22px;bottom:22px;z-index:30;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.e-zap-fixo svg{width:28px;height:28px}

/* peças comuns de seção */
.wf-secao{position:relative;padding:var(--respiro) var(--gutter)}
.wf-miolo{max-width:var(--largura);margin:0 auto}
.wf-olho{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ameixa-texto);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.wf-olho::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.wf-titulo{font-family:var(--serifa);font-weight:400;font-size:clamp(34px,3.6vw,56px);line-height:1.05;letter-spacing:-.015em;color:var(--petroleo);font-variation-settings:"opsz" 72}
.wf-titulo em{font-style:italic;font-weight:300;color:var(--ameixa)}
.wf-h3{font-family:var(--serifa);font-weight:400;font-size:clamp(20px,1.6vw,26px);line-height:1.2;color:var(--petroleo)}
.wf-texto{font-size:clamp(15.5px,1.2vw,18px);line-height:1.55;color:var(--tinta-suave);max-width:48ch}
.wf-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.wf-btn{display:inline-flex;align-items:center;gap:10px;background:var(--petroleo);color:var(--papel);font-weight:600;font-size:15px;padding:15px 24px;border-radius:999px;box-shadow:0 12px 30px -14px color-mix(in oklab, var(--petroleo) 70%, transparent);transition:transform .3s, box-shadow .3s}
.wf-btn svg{width:18px;height:18px}
.wf-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in oklab, var(--petroleo) 80%, transparent)}
.wf-link{font-size:14.5px;color:var(--petroleo);border-bottom:1px solid var(--ameixa-clara);padding-bottom:2px}
.wf-citacao{font-family:var(--serifa);font-style:italic;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--tinta)}
.wf-autor{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ameixa-texto);margin-top:8px}
/* régua de graduação entre seções (fio do motivo) */
.wf-regua-fio{height:14px;width:100%;background:
  repeating-linear-gradient(90deg, rgba(13,50,70,.28) 0 1px, transparent 1px 24px) 0 100%/100% 6px no-repeat,
  repeating-linear-gradient(90deg, rgba(13,50,70,.28) 0 1px, transparent 1px 120px) 0 100%/100% 14px no-repeat;
  opacity:.9}
/* seção escura */
.wf-noite{background:radial-gradient(120% 90% at 80% 10%, color-mix(in oklch, var(--ameixa-escura) 55%, var(--noite)) 0%, transparent 55%), radial-gradient(90% 70% at 10% 90%, var(--petroleo-2) 0%, transparent 60%), linear-gradient(180deg, var(--noite), var(--noite-2));color:var(--perola)}
.wf-noite .wf-titulo{color:var(--perola)}
.wf-noite .wf-titulo em{color:var(--ameixa-clara)}
.wf-noite .wf-texto,.wf-noite .wf-mono{color:var(--perola-suave)}
.wf-noite .wf-olho{color:var(--ameixa-clara)}
.wf-noite .wf-citacao{color:var(--perola)}
/* entrada ao rolar */
.wf-entra{opacity:0;translate:0 14px;transition:opacity .9s var(--curva), translate .9s var(--curva)}
.wf-entra.wf-visivel{opacity:1;translate:0 0}
.wf-entra[data-atraso="1"]{transition-delay:.15s}.wf-entra[data-atraso="2"]{transition-delay:.3s}.wf-entra[data-atraso="3"]{transition-delay:.45s}.wf-entra[data-atraso="4"]{transition-delay:.6s}

@media (max-width:760px){
  .e-links{display:none}
  .e-nav{gap:14px}
  .e-zap-fixo{display:none}
  .wf-secao{padding-left:var(--gutter);padding-right:var(--gutter)}
}