.apoie-page{background:#eef0f4}
.apoie-page .apoie-nav{position:relative}
.apoie-nav .botao-secundario{border-color:rgba(255,255,255,.46);color:var(--branco)}

.apoie-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,8vw,112px) var(--margem) clamp(52px,7vw,88px);
  background:
    radial-gradient(circle at 86% 18%,rgba(180,220,30,.23),transparent 31%),
    linear-gradient(135deg,var(--azul-900),var(--azul-600));
  color:var(--branco);
}
.apoie-hero::after{
  content:"20.18";
  position:absolute;
  right:-.03em;
  bottom:-.18em;
  font:900 clamp(112px,24vw,340px)/1 var(--fonte-display);
  letter-spacing:-.08em;
  color:rgba(255,255,255,.045);
  pointer-events:none;
}
.apoie-hero-grade{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(36px,6vw,88px);align-items:end}
.apoie-hero h1{max-width:15ch;margin:0;font:italic 900 clamp(42px,6vw,86px)/.93 var(--fonte-display);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.apoie-hero h1 span{color:var(--verde-400);white-space:nowrap}
.apoie-lead{max-width:48ch;margin:var(--esp-6) 0 0;color:rgba(255,255,255,.83);font-size:var(--t-lead);line-height:1.5}
.privacidade-local{padding:var(--esp-6);border:1px solid rgba(255,255,255,.25);border-left:5px solid var(--verde-400);background:rgba(0,16,48,.44);box-shadow:var(--sombra-card-escuro)}
.privacidade-local strong,.privacidade-local span{display:block}
.privacidade-local strong{font:800 18px/1.2 var(--fonte-display);text-transform:uppercase;color:var(--verde-300)}
.privacidade-local span{margin-top:8px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.78)}

.apoie-etapas{padding:0 var(--margem);background:var(--azul-900);color:var(--branco)}
.apoie-etapas ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.apoie-etapas li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;padding:22px clamp(16px,3vw,36px);border-left:1px solid rgba(255,255,255,.14)}
.apoie-etapas li:last-child{border-right:1px solid rgba(255,255,255,.14)}
.apoie-etapas li>span{grid-row:1/3;align-self:center;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--verde-400);color:var(--azul-900);font-weight:900}
.apoie-etapas strong{font:800 16px/1.2 var(--fonte-display);text-transform:uppercase}
.apoie-etapas small{margin-top:2px;color:rgba(255,255,255,.68)}

.studio{padding:clamp(64px,8vw,120px) var(--margem)}
.studio-grade{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(360px,1.2fr);gap:clamp(40px,7vw,96px);align-items:start}
.studio-controles{display:grid;gap:var(--esp-6)}
.studio-controles h2{margin:0;font:italic 900 var(--t-display)/.95 var(--fonte-display);letter-spacing:-.03em;text-transform:uppercase;color:var(--azul-800)}
.studio-intro{margin:var(--esp-4) 0 0;max-width:52ch;line-height:1.55;color:var(--azul-700)}
.controle-bloco{margin:0;padding:var(--esp-5);border:1px solid var(--cinza-300);border-radius:var(--raio-md);background:var(--branco);box-shadow:0 5px 16px rgba(0,16,48,.07)}
.arquivo-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arquivo-botao{display:flex;flex-direction:column;gap:5px;padding:18px;border:2px dashed var(--azul-400);border-radius:var(--raio-sm);cursor:pointer;background:#f5f8ff;color:var(--azul-800);transition:.2s ease}
.arquivo-botao:hover,.arquivo-input:focus+.arquivo-botao{border-color:var(--verde-600);background:#f8ffe2}
.arquivo-botao span{font:800 17px/1.2 var(--fonte-display);text-transform:uppercase}
.arquivo-botao small{color:var(--azul-700);line-height:1.4}
.arquivo-nome{margin:12px 2px 0;font-size:14px;color:var(--azul-700);overflow-wrap:anywhere}
.formatos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formatos legend{grid-column:1/-1;margin-bottom:12px;font-weight:800;color:var(--azul-800)}
.formatos label{position:relative;display:block;cursor:pointer}
.formatos input{position:absolute;inset:0;opacity:0;cursor:pointer}
.formatos label span{display:flex;min-height:84px;flex-direction:column;justify-content:center;padding:14px;border:2px solid var(--cinza-100);border-radius:var(--raio-sm);background:var(--branco-quase);transition:.2s ease}
.formatos label strong{font:800 15px/1.2 var(--fonte-display);text-transform:uppercase}
.formatos label small{margin-top:5px;line-height:1.3;color:var(--cinza-500)}
.formatos input:checked+span{border-color:var(--verde-600);background:#f6ffdc;box-shadow:inset 0 0 0 1px var(--verde-600)}
.formatos input:focus-visible+span{outline:3px solid var(--verde-500);outline-offset:3px}
.controle-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:16px}
.controle-cabecalho label{font-weight:800}
.botao-texto{padding:4px;border:0;background:transparent;color:var(--azul-500);font:700 14px var(--fonte-texto);text-decoration:underline;cursor:pointer}
.botao-texto:disabled{opacity:.45;cursor:not-allowed}
.ajustes input[type="range"]{width:100%;margin:20px 0 8px;accent-color:var(--verde-600)}
.ajuda{margin:0;color:var(--cinza-500);font-size:14px;line-height:1.45}
.studio-acoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.studio-acoes .botao{width:100%;justify-content:center}
.studio-acoes .botao:disabled{opacity:.45;cursor:not-allowed;transform:none}
.exportacao{padding:16px;border-radius:var(--raio-sm);background:#dfe8ff}
.exportacao label{display:block;margin-bottom:8px;font-weight:800}
.exportacao progress{width:100%;height:14px;accent-color:var(--verde-600)}
.studio-status{margin:0;padding:14px 16px;border-left:4px solid var(--verde-600);background:#f6ffdc;color:var(--azul-800);line-height:1.45}
.studio-erro{margin:0;padding:14px 16px;border-left:4px solid #a61b1b;background:#fff0f0;color:#711010;font-weight:700;line-height:1.45}
.studio-erro:empty{display:none}

.studio-visual{position:sticky;top:28px;text-align:center}
.preview-moldura{position:relative;width:min(100%,560px);margin:0 auto;overflow:hidden;border:10px solid var(--azul-900);border-radius:22px;background:var(--azul-900);box-shadow:0 28px 60px rgba(0,16,48,.28);transition:aspect-ratio .25s ease}
.preview-moldura.feed{aspect-ratio:4/5}
.preview-moldura.story{width:min(100%,430px);aspect-ratio:9/16}
.preview-moldura canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;background:var(--azul-900)}
.preview-moldura canvas:active{cursor:grabbing}
.studio-visual>p{max-width:52ch;margin:18px auto 0;color:var(--cinza-500);font-size:14px;line-height:1.45}
.midia-fonte{position:fixed;left:-9999px;width:2px;height:2px;opacity:.001;pointer-events:none}

.apoie-final{padding:clamp(60px,8vw,104px) var(--margem);background:var(--verde-400);color:var(--azul-900)}
.apoie-final-grade{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;width:100%;min-width:0}
.apoie-final-grade>*{min-width:0;max-width:100%}
.apoie-final h2{max-width:20ch;margin:0;font:italic 900 var(--t-display)/.96 var(--fonte-display);letter-spacing:-.03em;text-transform:uppercase}
.apoie-final .rotulo{color:var(--azul-700)}
.apoie-final .botao-claro{background:var(--branco);color:var(--azul-900);white-space:nowrap}
.apoie-rodape{padding-top:var(--esp-8)}
.apoie-rodape .rodape-legal{border-top:0}

@media(max-width:920px){
  .apoie-hero-grade,.studio-grade{grid-template-columns:1fr}
  .privacidade-local{max-width:540px}
  .studio-visual{position:relative;top:auto;grid-row:1;margin-top:0}
  .studio-controles{grid-row:2}
  .preview-moldura{width:min(100%,520px)}
  .apoie-final-grade{grid-template-columns:1fr;align-items:start}
}

@media(max-width:640px){
  .apoie-nav .lockup{font-size:20px}
  .apoie-nav .botao{padding:10px 13px;font-size:12px}
  .apoie-hero{padding-top:52px}
  .apoie-hero-grade{gap:28px}
  .apoie-etapas{padding:0}
  .apoie-etapas ol{grid-template-columns:1fr}
  .apoie-etapas li,.apoie-etapas li:last-child{border-right:0;border-left:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .formatos,.studio-acoes{grid-template-columns:1fr}
  .preview-moldura{border-width:7px;border-radius:16px}
  .studio{padding-left:16px;padding-right:16px}
}

@media(prefers-reduced-motion:reduce){
  .preview-moldura,.arquivo-botao,.formatos label span{transition:none}
}
