:root{
--papel:#f1ebe4;
--parede:#cfc6c0;
--lilas:#d2c9cb;
--linho:#ebe1d4;
--blazer:#d8c1a5;
--mel:#a9724f;
--tulipa:#b35a5e;
--folha:#fbf8f3;
--tinta:#2d2624;
--tinta-2:#5b4f4a;
--serif:"Lora", Georgia, serif;
--sans:"Public Sans", system-ui, sans-serif;
--assina:"Ms Madi", cursive;
--pad:clamp(20px,4vw,64px);
--sombra:0 1px 1px rgba(60,40,30,.06),0 6px 14px -6px rgba(60,40,30,.18),0 30px 60px -30px rgba(60,40,30,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:28px;padding:22px var(--pad)}
.marca{font-family:var(--serif);font-size:18px;text-decoration:none;letter-spacing:.01em;color:var(--tinta)}
.marca span{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);margin-left:8px}
.links{display:flex;gap:26px;margin-left:auto;font-size:14px}
.links a{text-decoration:none;color:var(--tinta-2)}
.links a:hover{color:var(--tinta)}
.nav-zap{font-size:14px;text-decoration:none;padding:10px 18px;border:1px solid color-mix(in oklab,var(--tinta) 28%,transparent);border-radius:999px;background:color-mix(in oklab,var(--folha) 55%,transparent);backdrop-filter:blur(6px)}
.hero{position:relative;min-height:max(100svh,720px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;isolation:isolate}
/* malha: parede lilás-acinzentada, linho, bege do blazer, um sopro de tulipa */
.malha{position:absolute;inset:0;z-index:-2;background:var(--papel)}
.malha i{position:absolute;border-radius:50%;filter:blur(60px)}
.malha i:nth-child(1){width:44vw;height:44vw;right:-16vw;top:-22vw;background:radial-gradient(circle in oklab,var(--lilas),transparent 66%);animation:m1 34s ease-in-out infinite alternate}
.malha i:nth-child(2){width:48vw;height:48vw;right:18vw;top:22vh;background:radial-gradient(circle in oklab,var(--linho),transparent 66%);animation:m2 28s ease-in-out infinite alternate}
.malha i:nth-child(3){width:56vw;height:56vw;right:-18vw;bottom:-30vw;background:radial-gradient(circle in oklab,color-mix(in oklab,var(--blazer) 85%,var(--papel)),transparent 66%);animation:m3 38s ease-in-out infinite alternate}
.malha i:nth-child(4){width:26vw;height:26vw;right:4vw;top:46vh;background:radial-gradient(circle in oklch,color-mix(in oklab,var(--tulipa) 22%,var(--papel)),transparent 66%);animation:m1 24s ease-in-out infinite alternate-reverse}
.malha i:nth-child(5){width:56vw;height:56vw;left:38vw;top:-14vw;background:radial-gradient(circle in oklab,#fbf3e8,transparent 66%);animation:m2 30s ease-in-out infinite alternate-reverse}
@keyframes m1{to{transform:translate(-6vw,5vh) scale(1.08)}}
@keyframes m2{to{transform:translate(5vw,-4vh) scale(.92)}}
@keyframes m3{to{transform:translate(-5vw,-6vh) scale(1.1)}}
/* luz atrás da cabeça, separando cabelo e fundo */
.halo{position:absolute;z-index:1;pointer-events:none;left:30vw;top:2vh;width:26vw;height:26vw;border-radius:50%;
background:radial-gradient(circle in oklab,rgba(255,249,238,.55),transparent 62%);mix-blend-mode:screen;filter:blur(20px);opacity:0;animation:tinta 2.4s .6s forwards}
/* luz da janela continuando pela página */
.luz{position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
background:linear-gradient(112deg,transparent 38%,rgba(255,250,238,.0) 42%,rgba(255,250,238,.85) 47%,rgba(255,250,238,.55) 51%,transparent 58%);
animation:luz 36s ease-in-out infinite alternate}
@keyframes luz{from{transform:translateX(-12%)}to{transform:translateX(14%)}}
.retrato{position:relative;margin:0;min-height:100%;z-index:0}
.retrato img{will-change:transform}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 22%;
-webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 97%);mask-image:linear-gradient(90deg,#000 58%,transparent 97%);
opacity:0;transform:scale(1.05);animation:entra 1.8s .1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes entra{to{opacity:1;transform:none}}
.carta{position:relative;z-index:2;align-self:center;padding:96px var(--pad) 64px 0;max-width:680px;display:flex;flex-direction:column}
.sobre{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:22px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.9vw,76px);line-height:1.02;letter-spacing:-.015em}
h1 .l{display:block;opacity:0;transform:translateY(.25em);filter:blur(6px);animation:tinta 1.1s cubic-bezier(.2,.7,.2,1) forwards}
h1 .l:nth-child(1){animation-delay:.35s}h1 .l:nth-child(2){animation-delay:.6s}h1 .l:nth-child(3){animation-delay:.85s}
h1 em{font-style:italic;color:var(--mel)}
@keyframes tinta{to{opacity:1;transform:none;filter:none}}
/* a folha: papel de linho com vinco, apoiada na parede e avançando sobre o blazer */
.folha{position:relative;margin:28px 0 0 clamp(-120px,-7vw,-40px);padding:26px 36px 24px 40px;max-width:560px;isolation:isolate;opacity:0;transform:translateY(16px);
animation:pousa 1.3s 1s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform}
.papel{position:absolute;inset:0;z-index:-1;transform:rotate(-.8deg);box-shadow:var(--sombra);
background:
linear-gradient(180deg,transparent 46.6%,rgba(120,95,80,.07) 47%,rgba(255,255,255,.75) 47.5%,transparent 48.6%),
repeating-linear-gradient(90deg,rgba(150,130,110,.022) 0 1px,transparent 1px 3px),
repeating-linear-gradient(0deg,rgba(150,130,110,.018) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 0% 0%,#fffdf9,transparent 60%),
linear-gradient(160deg,#fcfaf6,var(--folha) 55%,#f2ebe1)}
.papel-2{z-index:-2;transform:rotate(1.6deg) translate(10px,8px);background:linear-gradient(160deg,#f6f1e9,#ece4d8);box-shadow:0 10px 30px -18px rgba(60,40,30,.35)}
.cabeca{text-align:right;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mel);margin-bottom:14px;letter-spacing:.01em}
@keyframes pousa{to{opacity:1;transform:none}}
.texto{font-family:var(--serif);font-size:clamp(16.5px,1.25vw,19px);line-height:1.62;color:var(--tinta-2)}
.texto p+p{margin-top:.7em}
.texto p{opacity:0;animation:tinta 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.texto p:nth-child(1){animation-delay:1.5s}.texto p:nth-child(2){animation-delay:1.8s}
.assina{position:relative;display:flex;align-items:flex-end;margin-top:10px;height:78px}
.nome{font-family:var(--assina);font-size:clamp(46px,3.8vw,60px);line-height:1;color:var(--tinta);clip-path:inset(-20% 100% -20% 0);animation:escreve 1.5s 2.3s ease-out forwards;padding-bottom:6px}
@keyframes escreve{to{clip-path:inset(-20% -10% -20% 0)}}
.tulipa{width:92px;height:84px;margin-left:-6px;fill:none;stroke:var(--tulipa);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tulipa path{stroke-dasharray:1;stroke-dashoffset:1;animation:traco 1.3s ease-in-out forwards}
.tulipa .haste{animation-delay:3.4s}.tulipa .folha-t{animation-delay:4.1s}.tulipa .flor{animation-delay:4.3s;animation-duration:1.6s}
.tulipa .flor{fill:color-mix(in oklab,var(--tulipa) 0%,transparent);transition:fill 1.4s}
.pronto .tulipa .flor{fill:color-mix(in oklab,var(--tulipa) 16%,transparent)}
@keyframes traco{to{stroke-dashoffset:0}}
.registro{margin-top:12px;padding-top:12px;border-top:1px solid rgba(90,70,60,.14);font-size:11.5px;letter-spacing:.09em;color:var(--tinta-2);opacity:0;animation:tinta .8s 2.9s forwards}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px;opacity:0;animation:tinta .9s 2.4s forwards}
.zap{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:var(--folha);text-decoration:none;font-weight:500;font-size:15px;padding:16px 26px;border-radius:999px;transition:background .3s,transform .3s}
.zap:hover{background:#463b37;transform:translateY(-1px)}
.sec{font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:color-mix(in oklab,var(--tinta) 35%,transparent)}
.prova{margin-top:20px;font-size:13.5px;color:var(--tinta-2);opacity:0;animation:tinta .9s 2.7s forwards}
.prova b{color:var(--tinta);font-weight:600}
.est{color:var(--mel);letter-spacing:2px;margin:0 6px}
@media (max-width:1100px) and (min-width:901px){
.folha{margin-left:-40px}
}
@media (min-width:901px) and (max-height:860px){
.carta{padding-top:84px}
h1{font-size:clamp(40px,4.4vw,64px)}
.acoes{order:2;margin-top:22px}
.prova{order:3;margin-top:12px}
.folha{order:4;margin-top:24px;padding:20px 32px 18px 36px}
.texto{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.55}
.assina{height:64px}
.nome{font-size:clamp(40px,3.2vw,50px)}
.tulipa{width:76px;height:70px}
}
@media (max-width:900px){
.nav{padding:16px 18px}
.links{display:none}
.marca{font-size:16px}
.marca span{display:block;margin:2px 0 0}
.nav-zap{margin-left:auto;padding:8px 14px;font-size:13px}
.hero{grid-template-columns:1fr;min-height:auto}
.retrato{height:54svh;min-height:360px}
.retrato img{object-position:42% 18%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%)}
.carta{padding:0 20px 48px;margin-top:-56px}
.sobre{font-size:10.5px;letter-spacing:.16em;margin-bottom:12px}
.sobre .cid{display:none}
h1{font-size:clamp(39px,11.4vw,52px)}
.halo{display:none}
.acoes{order:2;margin-top:22px}
.prova{order:3;margin-top:14px}
.folha{order:4;margin:26px 4px 0;padding:22px 22px 20px 24px}
.cabeca{font-size:13px}
.assina{height:66px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* =====================================================================
BASE DO SITE — componentes compartilhados (prefixo wf-)
===================================================================== */
:root{
--entardecer-1:#c9c3d3;
--entardecer-2:#efd2bf;
--curva:cubic-bezier(.2,.7,.2,1);
--respiro:clamp(96px,12vw,180px);
--largura:1240px;
--filete:rgba(90,70,60,.14);
}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--mel);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.wf-sec{position:relative;padding:var(--respiro) var(--pad);isolation:isolate}
.wf-in{max-width:var(--largura);margin:0 auto;position:relative}
.wf-rotulo{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
.wf-h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,60px);line-height:1.05;letter-spacing:-.015em;color:var(--tinta)}
.wf-h2 em{font-style:italic;color:var(--mel)}
.wf-corpo{font-size:16px;line-height:1.6;color:var(--tinta-2);max-width:36em}
.wf-carta-texto{font-family:var(--serif);font-size:clamp(16.5px,1.25vw,19px);line-height:1.62;color:var(--tinta-2)}
.wf-carta-texto p+p{margin-top:.7em}
/* malha de fundo por seção:
como 1º filho da .wf-sec */
.wf-malha{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.wf-malha i{position:absolute;border-radius:50%;opacity:.85}
.wf-malha i:nth-child(1){width:50vw;height:50vw;left:-14vw;top:-10%;background:radial-gradient(circle closest-side in oklab,var(--m1,var(--linho)),color-mix(in oklab,var(--m1,var(--linho)) 50%,transparent) 45%,transparent);animation:m1 34s ease-in-out infinite alternate}
.wf-malha i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:30%;background:radial-gradient(circle closest-side in oklab,var(--m2,var(--parede)),color-mix(in oklab,var(--m2,var(--parede)) 50%,transparent) 45%,transparent);animation:m2 30s ease-in-out infinite alternate}
.wf-malha i:nth-child(3){width:40vw;height:40vw;left:30vw;bottom:-14%;background:radial-gradient(circle closest-side in oklab,var(--m3,var(--blazer)),color-mix(in oklab,var(--m3,var(--blazer)) 50%,transparent) 45%,transparent);animation:m3 38s ease-in-out infinite alternate}
.wf-sec[data-luz="manha"]{--m1:var(--linho);--m2:#ddd5cf;--m3:color-mix(in oklab,var(--blazer) 55%,var(--papel))}
.wf-sec[data-luz="tarde"]{--m1:color-mix(in oklab,var(--blazer) 80%,var(--papel));--m2:var(--linho);--m3:color-mix(in oklab,var(--mel) 28%,var(--papel))}
.wf-sec[data-luz="fim"]{--m1:var(--entardecer-1);--m2:var(--entardecer-2);--m3:color-mix(in oklab,var(--blazer) 70%,var(--papel))}
/* folha de papel: …conteúdo…
; .wf-papel-2 opcional por baixo */
.wf-folha{position:relative;isolation:isolate;padding:30px 36px 26px 40px}
.wf-papel{position:absolute;inset:0;z-index:-1;transform:rotate(var(--giro,-.8deg));box-shadow:var(--sombra);
background:
linear-gradient(180deg,transparent 46.6%,rgba(120,95,80,.06) 47%,rgba(255,255,255,.7) 47.5%,transparent 48.6%),
repeating-linear-gradient(90deg,rgba(150,130,110,.022) 0 1px,transparent 1px 3px),
repeating-linear-gradient(0deg,rgba(150,130,110,.018) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 0% 0%,#fffdf9,transparent 60%),
linear-gradient(160deg,#fcfaf6,var(--folha) 55%,#f2ebe1)}
.wf-papel.sem-vinco{background:
repeating-linear-gradient(90deg,rgba(150,130,110,.022) 0 1px,transparent 1px 3px),
repeating-linear-gradient(0deg,rgba(150,130,110,.018) 0 1px,transparent 1px 4px),
radial-gradient(120% 90% at 0% 0%,#fffdf9,transparent 60%),
linear-gradient(160deg,#fcfaf6,var(--folha) 55%,#f2ebe1)}
.wf-papel-2{z-index:-2;transform:rotate(var(--giro-2,1.6deg)) translate(10px,8px);background:linear-gradient(160deg,#f6f1e9,#ece4d8);box-shadow:0 10px 30px -18px rgba(60,40,30,.35)}
.wf-cabeca{text-align:right;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mel);margin-bottom:14px}
.wf-assina{font-family:var(--assina);font-size:clamp(44px,3.6vw,58px);line-height:1;color:var(--tinta)}
/* tulipa em traço (path inline, nunca