:root{
  --c-lilas:#f3f2f7;
  --c-linho:#d5e1fb;
  --c-creme:#faf6f0;
  --c-papel:#fffdf9;
  --c-tinta:#051c32;
  --c-tinta-2:#34485c;
  --c-ouro:#c49e5b;
  --c-ouro-texto:#8a6a2f;
  --c-titulo:"Syne",system-ui,sans-serif;
  --c-texto:"Atkinson Hyperlegible",system-ui,sans-serif;
  --c-margem:clamp(1.25rem,5vw,4.5rem);
  --c-figh:min(88svh,60vw);
  --c-cx:68.5%;
}
*{box-sizing:border-box}
html,body{margin:0}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
body{background:var(--c-lilas);color:var(--c-tinta);font-family:var(--c-texto);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

.c-hero{position:relative;min-height:100svh;overflow:hidden;overflow:clip;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto auto auto 1.15fr;
  padding:0 var(--c-margem)}
.c-nav,.c-top,.c-lede,.c-actions,.c-foot{grid-column:1}

/* fundo em malha */
.c-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(in oklab 160deg,#f3f2f7 0%,#eef1fa 55%,#faf6f0 100%);overflow:hidden}
.c-blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.c-blob-1{width:62vmax;height:62vmax;right:-14vmax;top:-22vmax;background:radial-gradient(circle at 50% 50% in oklab,#d5e1fb 0%,rgba(213,225,251,0) 68%);animation:c-resp1 26s ease-in-out infinite alternate}
.c-blob-2{width:54vmax;height:54vmax;left:-18vmax;bottom:-24vmax;background:radial-gradient(circle at 50% 50% in oklab,#faf6f0 0%,rgba(250,246,240,0) 70%);animation:c-resp2 32s ease-in-out infinite alternate}
.c-blob-3{width:44vmax;height:44vmax;left:22vw;top:-10vmax;background:radial-gradient(circle at 50% 50% in oklab,#ffffff 0%,rgba(255,255,255,0) 70%);animation:c-resp3 22s ease-in-out infinite alternate}
.c-blob-4{width:46vmax;height:46vmax;right:-6vmax;bottom:-18vmax;background:radial-gradient(circle at 50% 50% in oklab,#e3e8f8 0%,rgba(227,232,248,0) 70%);animation:c-resp2 36s ease-in-out infinite alternate-reverse}
.c-blob-5{width:30vmax;height:30vmax;left:-6vmax;top:18vh;background:radial-gradient(circle at 50% 50% in oklab,#f4ecdd 0%,rgba(244,236,221,0) 70%);animation:c-resp1 30s ease-in-out infinite alternate-reverse}
@keyframes c-resp1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vw,4vh,0) scale(1.12)}}
@keyframes c-resp2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(6vw,-5vh,0) scale(.94)}}
@keyframes c-resp3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(4vw,5vh,0) scale(1.1)}}

/* navegação */
.c-nav{grid-row:1;position:relative;z-index:6;display:flex;align-items:center;gap:2rem;padding:1.35rem 0}
.c-logo{font-family:var(--c-titulo);font-weight:700;font-size:1.2rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.c-logo b{color:var(--c-ouro-texto);font-weight:700}
.c-links{display:flex;gap:1.9rem;margin-left:auto;font-size:1rem}
.c-links a{text-decoration:none;padding:.4rem 0;border-bottom:1px solid transparent}
.c-links a:hover,.c-links a:focus-visible{border-bottom-color:var(--c-ouro)}
.c-nav-zap{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.98rem;
  padding:.62rem 1.05rem;border-radius:999px;border:1.5px solid var(--c-tinta);background:rgba(255,255,255,.55)}
.c-nav-zap svg{width:18px;height:18px}
.c-nav-zap:hover{background:var(--c-tinta);color:var(--c-creme)}

/* texto */
.c-top,.c-lede,.c-actions,.c-foot{position:relative;z-index:5;max-width:min(30rem,35vw)}
.c-top{grid-row:3;max-width:min(35rem,38vw)}
.c-over{margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;font-family:var(--c-titulo);font-weight:600;
  font-size:clamp(1rem,1.35vw,1.25rem);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ouro-texto)}
.c-over svg{width:1.9em;height:1.9em;flex:none}
.c-over span b{font-weight:800;letter-spacing:.04em;color:var(--c-tinta)}
.c-title{margin:0;font-family:var(--c-titulo);font-weight:600;font-size:clamp(2rem,4.05vw,4.3rem);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.c-title em{font-style:normal;position:relative;white-space:nowrap}
.c-title em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:1em;background:var(--c-ouro);transform-origin:left;animation:c-risco .7s cubic-bezier(.2,.7,.2,1) 1.25s both}
.c-lede{grid-row:4;margin:1.5rem 0 0;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.5;color:var(--c-tinta-2)}
.c-lede strong{color:var(--c-tinta)}
.c-actions{grid-row:5;margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.c-btn{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;background:var(--c-tinta);color:var(--c-creme);
  font-weight:700;font-size:1.1rem;line-height:1.2;padding:1rem 1.5rem 1rem 1.2rem;border-radius:999px;
  box-shadow:0 14px 30px -14px rgba(5,28,50,.6);transition:transform .25s,box-shadow .25s}
.c-btn svg{width:26px;height:26px;flex:none;color:#e9d3a6}
.c-btn:hover,.c-btn:focus-visible{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(5,28,50,.65)}
.c-btn:focus-visible,.c-nav-zap:focus-visible,.c-links a:focus-visible{outline:3px solid var(--c-ouro);outline-offset:3px}
.c-via{font-size:.98rem;color:var(--c-tinta-2)}
.c-foot{grid-row:6;align-self:start;margin-top:1.75rem;padding-bottom:1.5rem}
.c-proof{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;font-size:1rem}
.c-proof b{font-family:var(--c-titulo);font-weight:700;font-size:1.15rem}
.c-quote{margin:.45rem 0 0;font-size:1rem;color:var(--c-tinta-2)}
.c-quote cite{font-style:normal;color:var(--c-tinta)}
.c-id{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid rgba(5,28,50,.16);font-size:.98rem;line-height:1.4}
.c-id b{font-family:var(--c-titulo);font-weight:700;font-size:1.05rem}

/* palco */
.c-stage{position:absolute;z-index:2;bottom:0;left:var(--c-cx);height:var(--c-figh);width:calc(var(--c-figh)*.4654);
  transform:translateX(-47%);pointer-events:none}
.c-disc{position:absolute;left:47%;bottom:-9%;width:230%;aspect-ratio:3.1/1;transform:translateX(-50%);z-index:0;border-radius:50%;
  background:radial-gradient(closest-side in oklab,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 100%)}
.c-layer{position:absolute;left:47%;top:65%;width:0;height:0}
.c-back{z-index:1}
.c-fig{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;
  filter:drop-shadow(0 18px 26px rgba(5,28,50,.14))}
.c-front{z-index:3}
.c-layer svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.c-ring{fill:none;stroke:var(--c-ouro);stroke-width:1.3}
.c-ring-in{fill:none;stroke:rgba(5,28,50,.13);stroke-width:1;stroke-dasharray:2 7}
.c-ticks{fill:none;stroke:var(--c-ouro);stroke-width:1.1}
.c-deg{position:absolute;left:0;top:0;font-family:var(--c-titulo);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--c-ouro-texto);white-space:nowrap}

.c-card{position:absolute;left:0;top:0;width:148px;height:188px;padding:13px 13px 12px;border-radius:7px;background:var(--c-papel);
  border:1px solid rgba(5,28,50,.1);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 26px -12px rgba(5,28,50,.32),0 2px 5px rgba(5,28,50,.07);
  display:flex;flex-direction:column;opacity:0;backface-visibility:hidden}
.c-card::after{content:"";position:absolute;left:8%;right:8%;top:calc(100% + 22px);height:14px;border-radius:50%;background:rgba(5,28,50,.2);filter:blur(7px)}
.c-card-n{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;color:var(--c-ouro-texto);font-weight:700}
.c-card-n::after{content:"";width:34px;height:5px;border-radius:3px;background:var(--c-linho)}
.c-card strong{display:block;margin:9px 0 auto;font-family:var(--c-titulo);font-weight:700;font-size:17px;line-height:1.08;letter-spacing:-.01em;color:var(--c-tinta)}
.c-card.c-curto strong{font-size:27px}
.c-card i{display:block;height:5px;border-radius:3px;margin-top:9px;background:#dfe6f6}
.c-card i:nth-of-type(1){width:92%}
.c-card i:nth-of-type(2){width:64%}
.c-card i:nth-of-type(3){width:80%}
.c-card i.c-gap{background:linear-gradient(90deg,#dfe6f6 0 38%,transparent 38% 42%,var(--c-ouro) 42% 66%,transparent 66% 70%,#dfe6f6 70%)}
.c-card:nth-child(odd) i:nth-of-type(1){width:74%}
.c-card:nth-child(odd) i:nth-of-type(2){width:90%}
.c-card:nth-child(odd) i:nth-of-type(3){width:52%}

.c-note{position:absolute;right:var(--c-margem);bottom:1rem;z-index:5;margin:0;font-size:.82rem;letter-spacing:.04em;color:var(--c-tinta-2)}

/* entrada */
.c-in{animation:c-sobe .8s cubic-bezier(.2,.7,.2,1) both}
.c-nav.c-in{animation-name:c-some;animation-delay:.05s}
.c-top .c-over{animation:c-sobe .7s cubic-bezier(.2,.7,.2,1) .15s both}
.c-top .c-title{animation:c-sobe .9s cubic-bezier(.2,.7,.2,1) .3s both}
.c-lede.c-in{animation-delay:.6s}
.c-actions.c-in{animation-delay:.8s}
.c-foot.c-in{animation-delay:1s}
.c-fig{animation:c-figura 1.2s cubic-bezier(.2,.7,.2,1) .1s both}
.c-note{animation:c-some 1s ease 1.6s both}
@keyframes c-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes c-some{from{opacity:0}to{opacity:1}}
@keyframes c-figura{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes c-risco{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:1280px){
  :root{--c-cx:70%;--c-figh:min(88svh,78vw)}
  .c-lede,.c-actions,.c-foot{max-width:31vw}
}

/* celular e tablet */
@media (max-width:900px){
  :root{--c-figh:min(150vw,640px)}
  body{font-size:17px}
  .c-hero{grid-template-rows:auto auto auto auto auto auto;padding:0}
  .c-stage,.c-note{grid-column:1}
  .c-nav{padding:.9rem var(--c-margem);gap:.75rem}
  .c-logo{font-size:1rem}
  .c-links{display:none}
  .c-nav-zap{margin-left:auto;padding:.45rem .75rem;font-size:.92rem;gap:.4rem}
  .c-top,.c-lede,.c-actions,.c-foot{max-width:none}
  .c-top{grid-row:2;padding:.5rem var(--c-margem) 0}
  .c-over{margin-bottom:.6rem;font-size:1.05rem}
  .c-title{font-size:clamp(1.9rem,8.6vw,3.2rem)}
  .c-actions{grid-row:3;margin-top:1.1rem;padding:0 var(--c-margem)}
  .c-btn{font-size:1.05rem;padding:.95rem 1.3rem .95rem 1.05rem}
  .c-stage{grid-row:4;position:relative;left:auto;bottom:auto;justify-self:center;transform:translateX(3%);margin-top:-.25rem}
  .c-lede{grid-row:5;margin:0;padding:1.6rem var(--c-margem) 0;background:var(--c-creme);border-top:1px solid rgba(196,158,91,.55);font-size:1.08rem}
  .c-foot{grid-row:6;margin:0;padding:1.3rem var(--c-margem) 2.2rem;background:var(--c-creme)}
  .c-note{position:relative;right:auto;bottom:auto;grid-row:4;align-self:end;justify-self:end;margin:0 .75rem .5rem 0;font-size:.78rem}
  .c-card:not([data-m]){display:none}
  .c-card strong{font-size:20px}
  .c-card.c-curto strong{font-size:30px}
  .c-card-n{font-size:13px}
  .c-deg{font-size:11px}
}

/* ============ base do site (prefixo wf-) ============ */
:root{
  --wf-lilas:#f3f2f7; --wf-linho:#d5e1fb; --wf-linho-claro:#e9eefb; --wf-creme:#faf6f0; --wf-papel:#fffdf9;
  --wf-tinta:#051c32; --wf-tinta-2:#34485c; --wf-ouro:#c49e5b; --wf-ouro-texto:#7d5f27; --wf-ouro-claro:#e9d3a6;
  --wf-noite:#051c32; --wf-noite-2:#0b2a4a; --wf-noite-texto:#f3efe7; --wf-noite-texto-2:#b9c6d8;
  --wf-titulo:"Syne",system-ui,sans-serif; --wf-texto:"Atkinson Hyperlegible",system-ui,sans-serif;
  --wf-margem:clamp(1.25rem,5vw,4.5rem); --wf-largura:76rem;
  --wf-respiro:clamp(4.5rem,10vw,9rem);
  --wf-raio:7px; --wf-curva:cubic-bezier(.2,.7,.2,1);
  --wf-sombra-folha:0 1px 0 rgba(255,255,255,.9) inset,0 18px 34px -16px rgba(5,28,50,.3),0 2px 5px rgba(5,28,50,.07);
}
html{scroll-behavior:smooth;scroll-padding-top:1rem}
img{max-width:100%;height:auto}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.wf-pular{position:absolute;left:-999px;top:0;background:var(--wf-tinta);color:var(--wf-creme);padding:.7rem 1rem;z-index:100}
.wf-pular:focus{left:0}
:focus-visible{outline:3px solid var(--wf-ouro);outline-offset:3px}

/* seção */
.wf-sec{position:relative;padding:var(--wf-respiro) var(--wf-margem);background:var(--wf-lilas);color:var(--wf-tinta);overflow:clip;isolation:isolate}
.wf-sec--creme{background:var(--wf-creme)}
.wf-sec--linho{background:var(--wf-linho-claro)}
.wf-sec--noite{background:var(--wf-noite);color:var(--wf-noite-texto)}
.wf-dentro{max-width:var(--wf-largura);margin:0 auto}

/* marca de grau: abre cada seção. O JS desenha o mostrador dentro de .wf-grau */
.wf-grau{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;font-family:var(--wf-titulo);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-ouro-texto)}
.wf-grau svg{width:2.6rem;height:2.6rem;flex:none;overflow:visible}
.wf-grau b{font-weight:800;letter-spacing:.04em;color:var(--wf-tinta);font-size:1.05rem}
.wf-sec--noite .wf-grau{color:var(--wf-ouro-claro)}
.wf-sec--noite .wf-grau b{color:var(--wf-noite-texto)}
.wf-grau .wf-g-aro{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1.2}
.wf-grau .wf-g-arco{fill:none;stroke:var(--wf-ouro);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--wf-curva) .15s}
.wf-grau.wf-on .wf-g-arco{stroke-dashoffset:0}
.wf-grau .wf-g-ponto{fill:var(--wf-ouro)}

/* tipografia */
.wf-h2{margin:0;font-family:var(--wf-titulo);font-weight:600;font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
.wf-h3{margin:0;font-family:var(--wf-titulo);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.01em}
.wf-lede{margin:1.2rem 0 0;font-size:clamp(1.08rem,1.3vw,1.22rem);line-height:1.55;color:var(--wf-tinta-2);max-width:38rem}
.wf-sec--noite .wf-lede{color:var(--wf-noite-texto-2)}
.wf-p{font-size:1.06rem;line-height:1.6;color:var(--wf-tinta-2)}
.wf-grifo{background:linear-gradient(var(--wf-ouro),var(--wf-ouro)) 0 92%/100% .09em no-repeat}
.wf-rotulo{font-family:var(--wf-titulo);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wf-ouro-texto)}
.wf-sec--noite .wf-rotulo{color:var(--wf-ouro-claro)}

/* a folha: o documento do hero, usado como superfície */
.wf-folha{position:relative;background:var(--wf-papel);border:1px solid rgba(5,28,50,.1);border-radius:var(--wf-raio);box-shadow:var(--wf-sombra-folha);color:var(--wf-tinta)}
.wf-folha-n{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;letter-spacing:.1em;color:var(--wf-ouro-texto);font-weight:700}
.wf-folha-n::after{content:"";width:34px;height:5px;border-radius:3px;background:var(--wf-linho)}
.wf-linha{display:block;height:5px;border-radius:3px;background:#dfe6f6}
.wf-linha--falta{background:linear-gradient(90deg,#dfe6f6 0 38%,transparent 38% 42%,var(--wf-ouro) 42% 66%,transparent 66% 70%,#dfe6f6 70%)}

/* botões */
.wf-btn{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;background:var(--wf-tinta);color:var(--wf-creme);font-weight:700;font-size:1.08rem;line-height:1.2;padding:1rem 1.5rem 1rem 1.2rem;border-radius:999px;box-shadow:0 14px 30px -14px rgba(5,28,50,.6);transition:transform .25s,box-shadow .25s}
.wf-btn svg{width:26px;height:26px;flex:none;color:var(--wf-ouro-claro)}
.wf-btn:hover,.wf-btn:focus-visible{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(5,28,50,.65)}
.wf-btn--claro{background:var(--wf-creme);color:var(--wf-tinta)}
.wf-btn--claro svg{color:var(--wf-ouro-texto)}
.wf-link{color:inherit;text-decoration:underline;text-decoration-color:var(--wf-ouro);text-decoration-thickness:2px;text-underline-offset:.2em}
.wf-link:hover{text-decoration-thickness:3px}

/* entrada na rolagem: um gesto por seção */
.wf-rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--wf-curva),transform .8s var(--wf-curva);transition-delay:var(--wf-atraso,0s)}
.wf-rev.wf-on{opacity:1;transform:none}
.sem-js .wf-rev{opacity:1;transform:none}

/* WhatsApp fixo no celular */
.wf-zap-fixo{position:fixed;right:14px;bottom:14px;z-index:80;display:none;align-items:center;gap:.5rem;background:var(--wf-tinta);color:var(--wf-creme);text-decoration:none;font-weight:700;font-size:1rem;padding:.8rem 1.1rem .8rem .9rem;border-radius:999px;box-shadow:0 12px 26px -10px rgba(5,28,50,.7);opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s;pointer-events:none}
.wf-zap-fixo svg{width:22px;height:22px;color:var(--wf-ouro-claro)}
.wf-zap-fixo.wf-on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:900px){.wf-zap-fixo{display:inline-flex}}