/* Alvorada · site de divulgação.
   Ideia única: o amanhecer atrás da colunata. O resto da página fica quieto. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/Archivo-latin.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("fonts/SourceSerif4-variable.woff2") format("woff2")}

:root{
  --ceu:#17458a; --ceu-fundo:#0f3166; --sol:#f5b400;
  --concreto:#f3f4f1; --pedra:#c9ced4; --agua:#dfe8f4;
  --tinta:#0d1b2e; --suave:#47566b;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --texto:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --gutter:clamp(20px,5vw,40px);
  --max:1080px;
}
@media (prefers-color-scheme:dark){
  :root{--concreto:#0d1b2e; --pedra:#2a3a50; --agua:#14263d; --tinta:#eef1f4; --suave:#9fb0c4}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--concreto);color:var(--tinta);font:19px/1.65 var(--texto);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.pulo{position:absolute;left:-999px;top:8px;background:var(--sol);color:#0d1b2e;padding:8px 14px;border-radius:6px;z-index:30;font:700 15px var(--display)}
.pulo:focus{left:8px}
p{margin:0}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance}
h2{font-weight:800;font-stretch:112%;font-size:clamp(28px,4.4vw,44px);line-height:1.05;letter-spacing:-.015em}

/* ---------- botão ---------- */
.loja{display:inline-flex;align-items:center;gap:14px;background:var(--sol);color:#0d1b2e;padding:14px 24px 14px 20px;border-radius:12px;text-decoration:none;font-family:var(--display);min-height:56px}
.loja svg{flex:none}
.loja small{display:block;font:500 13px/1.2 var(--display);opacity:.8}
.loja strong{display:block;font:800 20px/1.15 var(--display);font-stretch:110%}
a.loja:hover{background:#ffc41f}
.loja[aria-disabled="true"]{cursor:default}

/* ---------- herói ---------- */
.heroi{position:relative;background:var(--ceu);color:#fff;overflow:hidden;isolation:isolate}
.topo{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.marca{font:800 20px/1 var(--display);font-stretch:115%;letter-spacing:-.01em;text-decoration:none}
.topo nav{display:flex;gap:24px;font:500 16px var(--display)}
.topo nav a{text-decoration:none;opacity:.9}
.topo nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}

.heroi-corpo{display:grid;gap:8px;padding-top:clamp(20px,4vw,48px)}
@media (min-width:900px){.heroi-corpo{grid-template-columns:1.1fr .9fr;align-items:end;min-height:640px}}
.heroi-texto{padding-bottom:clamp(40px,6vw,96px)}
.heroi h1{font-weight:900;font-stretch:125%;font-size:clamp(48px,9.4vw,100px);line-height:.92;letter-spacing:-.035em;margin-left:-.04em}
.heroi .sub{font:500 clamp(20px,3vw,28px)/1.2 var(--display);margin-top:10px;color:#cfe0f7}
.heroi .lede{font-size:clamp(20px,2.4vw,23px);line-height:1.5;max-width:31ch;margin-top:28px;color:#eaf1fb}
.heroi .acao{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.heroi .nota{font:400 16px/1.45 var(--display);color:#cfe0f7;max-width:34ch}

.heroi-cena{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:420px}
.sol{position:absolute;left:50%;bottom:-8%;width:clamp(280px,40vw,500px);aspect-ratio:1;margin-left:calc(clamp(280px,40vw,500px)/-2);border-radius:50%;background:var(--sol);z-index:0;animation:nascer 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes nascer{from{transform:translateY(38%)}to{transform:none}}
.heroi .celular{position:relative;z-index:1;width:min(290px,66vw);margin-bottom:-64px}

.colunata{display:block;width:100%;height:max(64px,9.03vw);position:relative;z-index:2;margin-top:-1px}
.colunata .f{fill:var(--concreto)}

/* ---------- celular ---------- */
.celular{border:7px solid #0a1220;border-radius:34px;background:#0a1220;overflow:hidden;aspect-ratio:720/1558;box-shadow:0 24px 50px -22px rgba(7,20,45,.55)}
.celular img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- linhas ---------- */
.linha{padding-block:clamp(44px,6vw,76px)}
.linha .wrap{display:grid;gap:40px;align-items:center}
@media (min-width:860px){
  .linha .wrap{grid-template-columns:1fr 1fr;gap:80px}
  .linha--inversa .texto{order:2}
}
.texto h2{max-width:14ch}
.texto p{margin-top:20px;max-width:34em;color:var(--suave)}
.texto p+p{margin-top:14px}
.palco{position:relative;display:flex;justify-content:center;align-items:center;padding:24px 0}
.palco::before{content:"";position:absolute;width:min(420px,88%);aspect-ratio:1;border-radius:50%;background:var(--agua)}
.palco .celular{position:relative;width:min(230px,60vw)}
.palco--dupla .celular:first-child{transform:translateX(18%) rotate(-3deg);z-index:2}
.palco--dupla .celular:last-child{transform:translateX(-18%) translateY(26px) rotate(3deg)}
@media (max-width:420px){.palco--dupla .celular{width:44vw}}

/* ---------- manchetes ---------- */
.manchetes{background:var(--tinta);color:var(--concreto);padding-block:clamp(64px,9vw,112px)}
@media (prefers-color-scheme:dark){.manchetes{background:#07101c;color:#eef1f4}}
.manchetes h2{max-width:16ch}
.manchetes .intro{margin-top:18px;max-width:34em;color:#b8c5d6}
.lista{display:grid;gap:40px;margin:clamp(40px,6vw,64px) 0 0;padding:0;list-style:none}
@media (min-width:860px){.lista{grid-template-columns:repeat(3,1fr);gap:48px}}
.lista blockquote{margin:0;font:800 clamp(22px,2.4vw,27px)/1.12 var(--display);font-stretch:108%;letter-spacing:-.01em}
.lista figcaption,.lista cite{display:block;margin-top:14px;font:400 16px/1.45 var(--display);font-style:normal;color:#9fb0c4}
.lista li{border-top:4px solid var(--sol);padding-top:22px}

/* ---------- privacidade ---------- */
.privacidade{padding-block:clamp(56px,8vw,96px)}
.privacidade .wrap{display:grid;gap:18px}
.privacidade p{max-width:34em;color:var(--suave)}
.privacidade a{font:700 17px var(--display);text-underline-offset:5px;width:fit-content}

/* ---------- final ---------- */
.final{background:var(--ceu);color:#fff;padding-block:clamp(64px,9vw,112px);position:relative;overflow:hidden}
.final .wrap{position:relative;z-index:1;display:grid;gap:28px;justify-items:start}
.final h2{max-width:13ch;font-size:clamp(32px,6vw,60px)}
.final .sol-fim{position:absolute;right:-6%;bottom:-62%;width:clamp(260px,40vw,480px);aspect-ratio:1;border-radius:50%;background:var(--sol)}

/* ---------- rodapé ---------- */
.rodape{background:var(--ceu-fundo);color:#b8cbe6;font:400 15px/1.55 var(--display);padding:36px 0 44px}
.rodape .wrap{display:grid;gap:16px}
.rodape nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.rodape a{color:#fff}
.rodape .ficcao{max-width:64ch}