/* Base do site — Grazi Affiune · "a página é um dia dela" (ver 02-conceito/sistema.md) */
:root{
  --porcelana:#f8f5f2; --blusa:#fdfcfb; --estudio:#e9e7e6; --blush:#ecd3c8; --rosa-cha:#f3e1dc;
  --cereja:#b5142b; --cereja-noite:#f28a99; --cacau:#3a2420; --cafe:#1e1412; --noite:#2f2b36;
  --serifa:"Lustria","Iowan Old Style",Georgia,serif;
  --sans:"Spline Sans",system-ui,sans-serif;
  --t-sec:clamp(2.2rem, 1.2rem + 3.2vw, 4.4rem);
  --t-gigante:clamp(3rem, 1rem + 7vw, 8rem);
  --t-voz:clamp(1.7rem, 1.1rem + 2vw, 3rem);
  --t-corpo:clamp(1.06rem, 1rem + .25vw, 1.2rem);
  --t-rot:.8rem;
  --margem:clamp(20px, 4.4vw, 72px);
  --larg:1280px;
  --pad-s:clamp(96px, 14vh, 180px);
  --ease:cubic-bezier(.22,.7,.2,1);
}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
.nav{color:rgb(var(--ink-rgb))}

/* ---------- céus (cada seção é um momento do dia) ---------- */
.wf-s{
  --c0:#f6ece8;--c1:#f2dcd5;--c2:#fdf8f5;--c3:#efd5cd;--c4:#f8e9e3;--luz:#fff7f2;
  --tinta-rgb:58 36 32; --suave-rgb:92 66 60; --acento:var(--cereja); --sobre-acento:#fff;
  position:relative;isolation:isolate;overflow:clip;
  background:var(--c0);color:rgb(var(--tinta-rgb));
  padding-block:var(--pad-s);
  font-family:var(--sans);font-size:var(--t-corpo);line-height:1.6;
}
.wf-s[data-ceu="manha"]{}
.wf-s[data-ceu="meiodia"]{--c0:#faf9f7;--c1:#f2f0ed;--c2:#ffffff;--c3:#ecebe9;--c4:#f7f5f2;--luz:#ffffff}
.wf-s[data-ceu="tarde"]{--c0:#f5e3dc;--c1:#eecdc2;--c2:#faeee9;--c3:#e9c4ba;--c4:#f3dad1;--luz:#fff1ea}
.wf-s[data-ceu="fimtarde"]{--c0:#e6cdc8;--c1:#d9b4ae;--c2:#f1dfd9;--c3:#c9aaae;--c4:#ebd5cf;--luz:#ffeae0;--suave-rgb:74 46 41}
.wf-s[data-ceu="doce"]{--c0:#3a0d16;--c1:#6e0f1e;--c2:#8f1a2c;--c3:#24070d;--c4:#5a0b18;--luz:#e0566a;
  --tinta-rgb:251 239 233;--suave-rgb:240 210 205;--acento:var(--cereja-noite);--sobre-acento:#3a0d16}
.wf-s[data-ceu="crepusculo"]{--c0:#ebe3e6;--c1:#d9cdd6;--c2:#f4eef0;--c3:#cfc3cf;--c4:#e8dde0;--luz:#fbf6f7;--tinta-rgb:47 43 54;--suave-rgb:78 70 84}
.wf-s[data-ceu="noite"]{--c0:#2e2a34;--c1:#3b3038;--c2:#474257;--c3:#272839;--c4:#3a2f35;--luz:#efe6e1;
  --tinta-rgb:246 239 234;--suave-rgb:214 204 206;--acento:var(--cereja-noite);--sobre-acento:#2e2a34}
.wf-escuro{color-scheme:dark}

/* malha do céu (inserida pelo base.js como primeiro filho) */
.wf-ceu{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(in oklab ellipse 60% 55% at 12% 18%, var(--c1), transparent 72%),
    radial-gradient(in oklab ellipse 55% 65% at 92% 30%, var(--c3), transparent 70%),
    radial-gradient(in oklab ellipse 80% 55% at 48% 104%, var(--c4), transparent 72%),
    radial-gradient(in oklab ellipse 45% 45% at 70% 60%, var(--c2), transparent 75%),
    var(--c0)}
.wf-ceu::after{content:"";position:absolute;inset:-15%;
  background:
    radial-gradient(in oklab closest-side, color-mix(in oklab, var(--luz) 55%, transparent), transparent) 18% 22% / 55% 60% no-repeat,
    radial-gradient(in oklab closest-side, color-mix(in oklab, var(--c2) 60%, transparent), transparent) 80% 75% / 50% 55% no-repeat;
  animation:wf-respira 36s ease-in-out infinite alternate}
@keyframes wf-respira{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0) scale(1.05)}}
/* emenda: o céu da seção anterior desce suave sobre o topo desta */
.wf-s::before{content:"";position:absolute;left:0;right:0;top:0;height:min(26vh,240px);z-index:-1;pointer-events:none;
  background:linear-gradient(var(--c-ant,transparent), transparent)}

/* ---------- miolo ---------- */
.wf-miolo{width:min(100% - 2*var(--margem), var(--larg));margin-inline:auto;position:relative}
.wf-estreito{width:min(100% - 2*var(--margem), 760px);margin-inline:auto}

/* cabeçalho de seção: o marco do dia */
.wf-cab{display:flex;align-items:center;gap:14px;margin:0 0 clamp(22px,3vh,36px);
  font-size:var(--t-rot);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  font-variant-numeric:tabular-nums;color:rgb(var(--tinta-rgb) / .78)}
.wf-cab::before{content:"";width:clamp(36px,6vw,84px);height:1px;flex:none;
  background:repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);opacity:.7}
.wf-cab .wf-ponto{margin-left:-14px}
.wf-ponto{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  border:1px solid currentColor;background:transparent;vertical-align:middle}
.wf-ponto.cheio{background:currentColor}
.wf-ponto.doce{border-color:var(--acento);background:var(--acento)}

.wf-titulo{font-family:var(--serifa);font-weight:400;font-size:var(--t-sec);line-height:1.06;letter-spacing:-.012em;
  margin:0 0 clamp(18px,2.4vh,28px);text-wrap:balance;color:rgb(var(--tinta-rgb))}
.wf-titulo em{font-style:normal;color:var(--acento)}
.wf-gigante{font-family:var(--serifa);font-weight:400;font-size:var(--t-gigante);line-height:.98;letter-spacing:-.02em;margin:0}
.wf-voz{font-family:var(--serifa);font-weight:400;font-size:var(--t-voz);line-height:1.18;letter-spacing:-.008em;margin:0;text-wrap:balance}
.wf-voz cite,.wf-quem{display:block;font-family:var(--sans);font-style:normal;font-size:var(--t-rot);letter-spacing:.16em;text-transform:uppercase;
  margin-top:1.1em;color:rgb(var(--suave-rgb))}
.wf-corpo{max-width:38em;margin:0 0 1em;color:rgb(var(--tinta-rgb) / .92)}
.wf-corpo + .wf-corpo{margin-top:-.2em}
.wf-apoio{color:rgb(var(--suave-rgb))}
.wf-rot{font-size:var(--t-rot);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgb(var(--suave-rgb))}
.wf-num{font-variant-numeric:tabular-nums}

/* o fio do dia como separador */
.wf-fio{position:relative;height:9px;margin:clamp(28px,4vh,48px) 0;color:rgb(var(--tinta-rgb) / .5)}
.wf-fio::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;
  background:repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.45,.05,.25,1)}
.wf-fio.wf-visto::before,.no-js .wf-fio::before{clip-path:inset(0 0 0 0)}

/* foto em arco (o arco do dia vira moldura) */
.wf-arco-foto{position:relative;margin:0;border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--c2)}
.wf-arco-foto img{width:100%;height:100%;object-fit:cover}
.wf-arco-borda{position:relative}
.wf-arco-borda::after{content:"";position:absolute;inset:-12px;border:1px dashed rgb(var(--tinta-rgb) / .35);border-bottom:0;
  border-radius:999px 999px 0 0;pointer-events:none;
  -webkit-mask:linear-gradient(#000 60%, transparent 92%);mask:linear-gradient(#000 60%, transparent 92%)}
.wf-legenda{font-size:.86rem;letter-spacing:.02em;color:rgb(var(--suave-rgb));margin-top:.8em}

/* botões */
.wf-botao{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.55em;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.01em;min-height:48px;
  background:rgb(var(--tinta-rgb));color:var(--c0);transition:transform .3s var(--ease), background .3s}
.wf-botao:hover{transform:translateY(-2px)}
.wf-botao svg{width:1.15em;height:1.15em;flex:none}
.wf-botao.acento{background:var(--acento);color:var(--sobre-acento)}
.wf-link{color:inherit;text-decoration:none;border-bottom:1px solid rgb(var(--tinta-rgb) / .4);padding-bottom:2px;
  display:inline-flex;align-items:center;min-height:48px;gap:.4em}
.wf-link:hover{border-color:currentColor}
.wf-s a:focus-visible,.wf-s button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* entrada por rolagem */
.js [data-rev]{opacity:0;translate:0 12px;transition:opacity 1s var(--ease) var(--atraso,0s), translate 1.1s var(--ease) var(--atraso,0s)}
.js [data-rev].wf-visto{opacity:1;translate:none}

/* ---------- régua do dia (fixa) ---------- */
.wf-regua{position:fixed;z-index:40;right:18px;top:50%;height:min(56vh,460px);width:28px;translate:0 -50%;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease);color:var(--regua-cor,#3a2420)}
.wf-regua.on{opacity:1}
.wf-regua-fio{position:absolute;left:13px;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 9px);opacity:.35}
.wf-regua-feito{position:absolute;left:13px;top:0;width:1px;background:currentColor;opacity:.75;height:var(--feito,0%)}
.wf-regua i{position:absolute;left:10px;width:7px;height:7px;border-radius:50%;border:1px solid currentColor;background:transparent;translate:0 -50%;opacity:.6}
.wf-regua i.cheio{background:currentColor;opacity:.9}
.wf-regua i.doce{border-color:#b5142b}
.wf-regua i.doce.cheio{background:#b5142b}
.wf-regua-sol{position:absolute;left:8px;width:11px;height:11px;border-radius:50%;background:#fffdfb;border:1px solid currentColor;
  top:var(--feito,0%);translate:0 -50%;box-shadow:0 0 0 6px color-mix(in oklab, #fffdfb 35%, transparent)}
.wf-regua-rot{position:absolute;right:30px;top:var(--feito,0%);translate:0 -50%;white-space:nowrap;
  font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  padding:.5em .8em;border-radius:99px;background:color-mix(in oklab, var(--regua-fundo,#f8f5f2) 82%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .6s var(--ease)}
.wf-regua.fala .wf-regua-rot{opacity:1}
@media (max-width:899px){
  .wf-regua{right:auto;left:0;top:0;translate:none;width:100%;height:3px}
  .wf-regua-fio,.wf-regua i,.wf-regua-rot{display:none}
  .wf-regua-feito{left:0;top:0;height:2px;width:var(--feito,0%);opacity:.7}
  .wf-regua-sol{display:none}
}

/* botão flutuante do WhatsApp (celular) */
.wf-zap{position:fixed;z-index:45;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#3a2420;color:#f8f5f2;box-shadow:0 12px 30px -10px #1e141299;
  opacity:0;translate:0 20px;pointer-events:none;transition:opacity .5s var(--ease), translate .5s var(--ease)}
.wf-zap svg{width:26px;height:26px}
.wf-zap.on{opacity:1;translate:none;pointer-events:auto}
@media (min-width:900px){.wf-zap{display:none}}

/* ---------- rodapé ---------- */
.wf-pe a{color:inherit}