/* Identidade do design system Semente de Girassol */
@font-face{font-family:"Delius";src:url(fonts/Delius-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito.woff) format("woff");font-weight:200 1000;font-display:swap}

:root{
  --amarelo:#fbd62f;        /* amarelo da arte da marca, usado no topo */
  --girassol-claro:#fffbbf; /* amarelo suave */
  --fundo:#fffeeb;
  --semente:#4a2500;
  --semente-media:#775c40;
  --borda:#dbd3cc;
  --folha:#001c00;
  --branco:#fff;
  --raio-m:16px;
  --titulo:"Delius","Nunito",ui-rounded,system-ui,sans-serif;
  --corpo:"Nunito",ui-rounded,system-ui,sans-serif;
  --margem:clamp(16px,3vw,44px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--semente);font-family:var(--corpo);font-size:clamp(18px,1.35vw,20px);line-height:1.5;overflow-x:hidden;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--titulo);font-weight:400}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--semente);outline-offset:2px}

.pular{position:absolute;left:-999px;top:8px;background:var(--semente);color:var(--branco);padding:10px 16px;z-index:9}
.pular:focus{left:16px}

.botao{display:inline-block;background:var(--semente);color:var(--amarelo);font-weight:700;text-decoration:none;padding:.7em 1.35em;border-radius:999px;transition:background .15s;white-space:nowrap}
.botao:hover{background:var(--semente-media)}

/* Primeira seção */
.topo{position:relative;min-height:100svh;background:var(--amarelo);padding:0 var(--margem) clamp(20px,3svh,36px);display:flex;flex-direction:column;overflow:hidden}
.nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(16px,3svh,32px) 0}
.nav ul{display:flex;gap:clamp(16px,2.4vw,36px);font-weight:700}
.nav a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-underline-offset:.2em}
.marca img{width:clamp(200px,15vw,240px)}

.titulo{position:relative;z-index:3;margin-top:auto;font-size:min(8.4vw,15.5svh);line-height:1.04}
.titulo span{display:block}

.palco{position:absolute;inset:0;z-index:2;pointer-events:none;--cx:78%;--cy:53%;--tam:min(27vw,46svh)}
.astro{position:absolute;left:var(--cx);top:var(--cy);z-index:2;width:var(--tam);max-width:none;height:auto;transform:translate(-50%,-50%);will-change:transform}
.item{position:absolute;left:0;top:0;z-index:1;display:none;max-width:none;height:auto;opacity:0;transition:opacity .7s;will-change:transform}
.com-orbita .item{display:block}
.pronta .item{opacity:1}

.rodape-topo{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(12px,2.4svh,28px)}
.rodape-topo p{font-family:var(--titulo);font-size:clamp(20px,1.9vw,28px);line-height:1.2;text-wrap:balance}

/* Segunda seção */
.manifesto{padding:clamp(64px,9vw,128px) var(--margem) 0}
.frase{font-family:var(--titulo);font-size:clamp(34px,5vw,72px);line-height:1.14;max-width:17em;text-wrap:balance}
.apoio{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:36em;margin-top:.9em}

/* Terceira seção */
.receitas{padding:clamp(56px,7vw,100px) var(--margem) clamp(64px,8vw,112px)}
.receitas h2,.ebook h2,.imprensa h2{font-size:clamp(28px,3.4vw,48px);line-height:1.18;text-wrap:balance}
.receitas h2{margin-bottom:clamp(24px,3vw,44px)}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.grade img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio-m)}
figcaption{padding-top:.6em}
figcaption strong{display:block;font-family:var(--titulo);font-weight:400;font-size:clamp(21px,1.8vw,26px);line-height:1.2}
figcaption span{display:block;font-size:clamp(16px,1.15vw,18px);line-height:1.35;color:var(--semente-media);margin-top:.2em}

/* Quarta seção */
.ebook{background:var(--girassol-claro);padding:clamp(64px,8vw,112px) var(--margem);display:grid;grid-template-columns:1fr minmax(240px,300px);grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,90px);row-gap:clamp(28px,3vw,44px);align-items:start}
.ebook-texto p{max-width:32em;margin-top:.9em;font-size:clamp(19px,1.6vw,23px);line-height:1.45}
.celular{grid-column:2;grid-row:1 / span 2;justify-self:end;width:100%;max-width:300px;aspect-ratio:9/19;background:var(--semente);border-radius:44px;padding:10px;transform:rotate(3deg)}
.tela{position:relative;height:100%;background:var(--girassol-claro);border-radius:34px;overflow:hidden;padding:28px 20px;display:flex;flex-direction:column}
.tela strong{font-family:var(--titulo);font-weight:400;font-size:38px;line-height:1.04}
.tela img{width:calc(100% + 26px);max-width:none;margin:auto -13px}
.lista li{font-family:var(--titulo);font-size:clamp(23px,2.5vw,34px);line-height:1.2;padding:.34em 0;border-top:1px solid var(--borda)}
.oferta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(24px,3vw,40px);scroll-margin-top:50svh}
.oferta .botao{font-size:clamp(19px,1.6vw,23px)}
.aviso{font-size:clamp(19px,1.6vw,23px);font-weight:700}

/* Matérias */
.imprensa{padding:clamp(64px,8vw,112px) var(--margem)}
.imprensa h2{margin-bottom:clamp(24px,3vw,44px)}
.materias{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,44px)}
.materias img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--raio-m)}
.credito{font-size:14px;line-height:1.4;color:var(--semente-media);margin-top:.4em}
.veiculo{font-weight:700;margin-top:.8em}
.materias h3{font-size:clamp(24px,2.3vw,32px);line-height:1.2;margin-top:.15em;text-wrap:balance}
.resumo{max-width:34em;margin-top:.5em}
.links{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:.7em}
.links a{text-underline-offset:.2em}
.links a:first-child{font-weight:700}

/* Rodapé */
.rodape{background:var(--semente);color:var(--branco);display:flex;justify-content:space-between;align-items:center;gap:8px 28px;flex-wrap:wrap;padding:22px var(--margem);font-size:clamp(16px,1.15vw,18px)}
.rodape ul{display:flex;gap:20px}
.rodape a{text-underline-offset:.2em}
.rodape :focus-visible{outline-color:var(--branco)}

.flutuante{position:fixed;right:16px;bottom:16px;z-index:5}

@media (max-width:980px){
  .grade{grid-template-columns:repeat(2,1fr)}
  .ebook{grid-template-columns:1fr;grid-template-rows:none}
  .celular{grid-column:1;grid-row:auto;justify-self:center;max-width:260px}
  .tela strong{font-size:33px}
  .materias{grid-template-columns:1fr}
}
@media (max-width:640px),(max-aspect-ratio:1/1){
  .titulo{font-size:min(15.4vw,10svh)}
  .rodape-topo{align-items:flex-start;flex-direction:column}
  .so-largo{display:none}
  .palco{--cx:50%;--cy:31%;--tam:min(66vw,31svh)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}