:root{
  /* sistema: ver 02-conceito/sistema.md */
  --e-papel:#f4f4f7; --e-frio:#dde2f3; --e-morno:#f8ecd2; --e-tinta:#0c1562; --e-azul:#101c7f; --e-noite:#080d47;
  --e-ouro:#b97c12; --e-ouro-claro:#f2b544; --e-texto:#2b3157; --e-suave:#666c92; --e-fio:rgba(12,21,98,.16);
  --e-serif:"Source Serif 4",Georgia,serif; --e-sans:"Epilogue",system-ui,sans-serif;
  --e-margem:clamp(20px,5vw,76px); --e-coluna:clamp(380px,35vw,560px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--e-sans);color:var(--e-texto);background:var(--e-papel);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--e-ouro-claro);outline-offset:3px;border-radius:4px}
.k-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* peças comuns a todas as seções */
.k-secao{position:relative;padding:clamp(72px,11vh,140px) var(--e-margem)}
.k-rotulo{font-family:var(--e-sans);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--e-suave);line-height:1.55}
.k-rotulo b,.k-rotulo span{color:var(--e-ouro);font-weight:500;font-variant-numeric:tabular-nums}
.k-azul .k-rotulo{color:rgba(255,255,255,.62)}.k-azul .k-rotulo b,.k-azul .k-rotulo span{color:var(--e-ouro-claro)}
.k-titulo{font-family:var(--e-serif);font-weight:300;color:var(--e-tinta);letter-spacing:-.022em;line-height:1.04;font-size:clamp(34px,4.6vw,68px)}
.k-titulo em{font-style:italic;font-weight:300;color:var(--e-ouro)}
.k-azul .k-titulo{color:#fff}.k-azul .k-titulo em{color:var(--e-ouro-claro)}
.k-ponto{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--e-ouro-claro);box-shadow:0 0 0 .1em rgba(242,181,68,.22);margin-left:.07em}
.k-fio{border:0;border-top:1px solid var(--e-fio)}
.k-azul{color:#fff;background:radial-gradient(60% 50% at 78% 30% in oklab, #2a3aa8, transparent 75%),radial-gradient(70% 50% at 10% 0% in oklab, #16238f, transparent 70%),linear-gradient(180deg in oklab, var(--e-azul), var(--e-noite))}
.k-azul .k-fio{border-top-color:rgba(255,255,255,.18)}
.k-botao{display:inline-flex;align-items:center;gap:10px;background:var(--e-azul);color:#fff;padding:16px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15.5px;box-shadow:0 14px 30px -14px rgba(16,28,127,.7);transition:transform .25s,box-shadow .25s}
.k-botao:hover{transform:translateY(-2px)}
.k-botao svg{width:19px;height:19px;fill:currentColor;flex:none}
.k-azul .k-botao{background:var(--e-ouro-claro);color:var(--e-noite);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.k-cita{font-family:var(--e-serif);font-style:italic;font-weight:400}
.k-fonte{font-family:var(--e-sans);font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--e-suave)}
.k-azul .k-fonte{color:rgba(255,255,255,.6)}
/* entrada na rolagem: o JS põe .k-visivel quando o elemento entra na tela */
.k-entra{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.12s)}
.k-entra.k-visivel{opacity:1;transform:none}
/* granulado único e fixo */
.k-grao{position:fixed;inset:0;z-index:50;opacity:.05;pointer-events:none;mix-blend-mode:multiply;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.e-grao{display:none}
/* botão que acompanha a rolagem no celular */
.k-zap{position:fixed;right:16px;bottom:16px;z-index:40;display:none;align-items:center;gap:8px;background:var(--e-ouro-claro);color:var(--e-noite);padding:13px 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14.5px;box-shadow:0 12px 28px -10px rgba(8,13,71,.6);opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s;pointer-events:none}
.k-zap svg{width:18px;height:18px;fill:currentColor}
.k-zap.k-visivel{opacity:1;transform:none;pointer-events:auto}
@media (max-width:980px){.k-zap{display:inline-flex}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.k-entra{opacity:1;transform:none}}