/* =========================================================
   EDER BORGES 30038 — Deputado Estadual · Paraná
   Folha única. Editável em qualquer editor de texto.
   Ao alterar este arquivo, suba o ?v=N no <link> do index.html
   E TAMBÉM no de apoio/index.html — são duas páginas.
   ========================================================= */

:root{
  --amarelo: #FCBB01;
  --amarelo-escuro: #D89E00;   /* só para o estado :hover do botão */
  --preto: #000000;
  --quase-preto: #0d0d0d;      /* separa blocos do fundo */
  --grafite: #1a1a1a;          /* fundo do palco da moldura */
  --branco: #ffffff;
  --cinza: #9a9a9a;            /* letra miúda do rodapé */
  --display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --largura: 1120px;
  --respiro: clamp(20px, 5vw, 48px);
}

*, *::before, *::after{ box-sizing: border-box; }

/* O atributo hidden vem do navegador como display:none, mas QUALQUER classe
   nossa que declare display o derruba — foi o que aconteceu com o botão de
   WhatsApp da moldura, que é .botao{display:inline-flex} e nascia à mostra
   antes de a pessoa montar a imagem. O !important aqui é o certo: hidden é
   uma afirmação sobre existência, não uma sugestão de layout. */
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;               /* trava rolagem lateral */
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: var(--amarelo); text-underline-offset: 0.18em; }

/* ---------- Superfícies que o navegador desenha ----------
   Seleção, cursor de texto e barra de rolagem vêm com padrão que não
   pertence a design system nenhum. Num site preto e amarelo, a barra
   cinza do Windows é a peça que denuncia que a página foi montada. */
::selection{ background: var(--amarelo); color: var(--preto); }
:root{ caret-color: var(--amarelo); scrollbar-color: var(--amarelo) var(--quase-preto); }
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--quase-preto); }
::-webkit-scrollbar-thumb{ background: var(--amarelo); border: 3px solid var(--quase-preto); }
::-webkit-scrollbar-thumb:hover{ background: var(--amarelo-escuro); }

/* ---------- A TARJA: o recurso que define a marca ----------
   ATENÇÃO ao mexer: o Anton tem caixa de conteúdo de ~1,3em (ascender e
   descender enormes). O retângulo do <mark> mede essa caixa + padding, ou
   seja ~1,45em. Se o line-height da linha for menor que isso, o bloco
   amarelo sobe por cima da linha anterior e come o texto branco.
   Regra: line-height do texto SEMPRE maior que 1,45 quando houver tarja
   em fluxo. Onde a linha é curta e controlada (o mote, a chamada da ação),
   uso inline-block com line-height próprio, que aperta a caixa. */
mark{
  background: var(--amarelo);
  color: var(--preto);
  padding: 0.07em 0.20em;
  -webkit-box-decoration-break: clone;   /* mantém o bloco em cada linha quebrada */
  box-decoration-break: clone;
}

/* Tarja em bloco: abraça as maiúsculas em vez de toda a caixa da fonte.
   Só serve em linha curta e controlada — não quebra bem em texto corrido. */
.tarja-bloco mark{
  display: inline-block;
  line-height: 0.86;
  padding: 0.17em 0.18em 0.13em;
}

/* ---------- Listras diagonais de advertência ---------- */
.listras{
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--amarelo) 0 14px,
    var(--preto) 14px 28px
  );
}

/* ---------- Marca-d'água de seção (SVG) ---------- */
.marca-dagua{
  position: absolute;
  color: var(--amarelo);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.marca-araucaria{ width: 210px; top: -10px; right: -30px; }
.marca-estufa{ width: 400px; bottom: -20px; right: -60px; }

/* =========================================================
   1. TOPO
   ========================================================= */
.topo{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 56px) var(--respiro) 0;
  background: var(--preto);
}

.topo-conteudo{
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* A logo é o topo inteiro: traz nome, cargo, mote e número. Nada de texto
   repetindo o que ela já diz. Por isso ela é o <h1> e pode ocupar espaço. */
.logo-titulo{ margin: 0; }
.logo{
  width: min(100%, 420px);
  margin-bottom: clamp(20px, 4vw, 30px);
}

.numero{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 clamp(24px, 5vw, 8px);
}
.numero-rotulo{
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--amarelo);
}
.numero strong{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1;
  background: var(--amarelo);
  color: var(--preto);
  padding: 0.06em 0.20em 0.12em;
  letter-spacing: 0.02em;
}
.logo-novo{
  width: 96px;
  height: auto;
  opacity: 0.9;
}

.topo-foto{ align-self: end; }
.topo-foto img{
  width: min(100%, 420px);
  margin: 0 auto;
}

@media (min-width: 860px){
  .topo{ padding-top: 34px; padding-bottom: 0; }
  .topo-conteudo{
    grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
    align-items: end;
    gap: 24px;
  }
  .topo-texto{ padding-bottom: 48px; }
  .logo{ width: 100%; max-width: 520px; }
  .topo-foto img{ width: 100%; max-width: 430px; margin-right: 0; }
}

/* =========================================================
   2. FIZ POR CURITIBA — o que já está entregue

   Única seção de fundo amarelo do site, como no material impresso. Não é
   enfeite: a página inteira é preta, e o bloco de realizações é o que
   precisa parar o dedo. Inverter a chapa é mais forte do que qualquer
   caixa ou sombra, e não custa um byte de imagem.
   ========================================================= */
.feito{
  padding: clamp(44px, 8vw, 78px) var(--respiro);
  background: var(--amarelo);
  color: var(--preto);
}
.feito-interno{ max-width: var(--largura); margin-inline: auto; }

/* No amarelo a tarja inverte: bloco preto, letra branca. */
.feito mark{ background: var(--preto); color: var(--branco); }

.chamada-dupla{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(30px, 6vw, 48px);
  display: grid;
  gap: 0.12em;
  justify-items: start;
}
.chamada-dupla-segunda{ color: var(--preto); }

.lista-feito{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 5vw, 40px);
}
@media (min-width: 880px){
  .lista-feito{ grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
}

.lista-feito li{
  position: relative;
  padding-top: clamp(38px, 7vw, 46px);
}

/* O número fica ACIMA do texto, não ao lado: em três colunas estreitas o
   recuo lateral comeria metade da medida da linha. */
.lista-feito .ordem{
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 5.4vw, 1.75rem);
  line-height: 1;
  background: var(--preto);
  color: var(--amarelo);
  padding: 0.16em 0.3em 0.12em;
  letter-spacing: 0.03em;
}

.lista-feito h3{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.lista-feito p{
  margin: 0;
  font-size: clamp(1rem, 3.7vw, 1.08rem);
  line-height: 1.5;
  max-width: 38ch;
}

/* =========================================================
   3. PROPOSTAS — o que é promessa

   Lista tipográfica separada por fios, como no impresso. O marcador é um
   pedaço das próprias listras de obra: o mesmo gradiente do topo da página,
   em 16px. Amarra a identidade sem inventar um jogo de ícones que não
   existe em nenhuma outra peça da campanha.
   ========================================================= */
.propostas{
  padding: clamp(46px, 8vw, 80px) var(--respiro);
  background: var(--preto);
}
.propostas-interno{ max-width: var(--largura); margin-inline: auto; }

.propostas-titulo{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(26px, 5vw, 40px);
  color: var(--branco);
}
.propostas-titulo-eco{ display: block; color: var(--amarelo); }

.lista-propostas{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(252,187,1,0.28);
}
.lista-propostas li{
  position: relative;
  border-bottom: 1px solid rgba(252,187,1,0.28);
  padding: clamp(15px, 3.2vw, 19px) 0 clamp(15px, 3.2vw, 19px) clamp(34px, 6vw, 44px);
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 4.1vw, 1.32rem);
  line-height: 1.32;
  letter-spacing: 0.012em;
  text-wrap: pretty;
}
.lista-propostas li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(15px, 3.2vw, 19px) + 0.2em);
  width: clamp(18px, 3.4vw, 22px);
  height: clamp(11px, 2vw, 13px);
  background: repeating-linear-gradient(
    -45deg,
    var(--amarelo) 0 5px,
    transparent 5px 10px
  );
}

@media (min-width: 900px){
  .lista-propostas{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    border-top: 0;
  }
  /* Em duas colunas o fio de cima precisa voltar item a item, senão as
     duas primeiras linhas ficam sem topo e a grade parece torta. */
  .lista-propostas li:nth-child(1),
  .lista-propostas li:nth-child(2){ border-top: 1px solid rgba(252,187,1,0.28); }
}

/* =========================================================
   4. QUEM É
   ========================================================= */
.quem{
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 8vw, 80px) var(--respiro);
  background: var(--quase-preto);
}
.quem-interno{
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin-inline: auto;
}

.secao-titulo{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  letter-spacing: 0.24em;
  color: var(--amarelo);
  margin: 0 0 clamp(24px, 5vw, 40px);
}

/* No celular tudo empilha e a foto fica EM CIMA do texto, em largura
   cheia. No computador vira duas colunas: o texto na primeira, a foto na
   segunda. O posicionamento é explícito por grid-column — não uso `order`,
   que embaralharia a ordem de leitura e a de tabulação. */
@media (min-width: 900px){
  .quem-interno{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,0.82fr);
    column-gap: 52px;
    align-items: start;
  }
  .quem-interno .secao-titulo{ grid-column: 1 / -1; }
  .quem-foto { grid-column: 2; grid-row: 2; margin: 6px 0 0; }
  .quem-texto{ grid-column: 1; grid-row: 2; }
  .marco     { grid-column: 1 / -1; grid-row: 3; }
}

/* A foto é prova, não enfeite: ela mostra a multidão que o texto ao lado
   afirma. Por isso ganha o contorno da marca em vez de sombra — sombra
   sobre fundo preto não aparece, e o fio amarelo é o mesmo recurso das
   outras seções. */
.quem-foto{
  margin: 0 0 clamp(26px, 5vw, 34px);
  border: 3px solid var(--amarelo);
}
.quem-foto img{ width: 100%; }

.quem-texto p{
  margin: 0 0 18px;
  font-size: clamp(1.05rem, 4vw, 1.22rem);
  line-height: 1.6;
  max-width: 62ch;
}
.quem-texto p:last-child{ margin-bottom: 0; }
.quem-texto strong{ color: var(--amarelo); font-weight: 700; }

/* O marco de trabalho. Um número só, e ele fecha a biografia em vez de
   abrir um painel de estatísticas — a frase acima é que dá sentido a ele. */
.marco{
  margin: clamp(34px, 6vw, 48px) 0 0;
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 2px solid var(--amarelo);
  max-width: 62ch;
}
.marco-rotulo{
  margin: 0 0 0.5em;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  letter-spacing: 0.2em;
  color: var(--amarelo);
}
.marco-numero{
  margin: 0 0 0.24em;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 7.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.marco-numero strong{ font-weight: 400; color: var(--amarelo); }
.marco figcaption{
  font-size: clamp(0.98rem, 3.6vw, 1.08rem);
  line-height: 1.45;
  color: #d2d2d2;
}

/* =========================================================
   5. CONVITE PARA A MOLDURA
   ========================================================= */
.convite{
  padding: clamp(44px, 8vw, 76px) var(--respiro);
  background: var(--preto);
}
.convite-interno{
  max-width: var(--largura);
  margin-inline: auto;
  display: grid;
  gap: clamp(28px, 5vw, 44px);
  align-items: center;
}
@media (min-width: 820px){
  .convite-interno{ grid-template-columns: minmax(0,1fr) minmax(0,0.78fr); gap: 56px; }
}

.convite-titulo{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 7.6vw, 2.8rem);
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.convite-texto p{
  margin: 0 0 clamp(22px, 4vw, 28px);
  font-size: clamp(1rem, 3.7vw, 1.1rem);
  line-height: 1.55;
  color: #d2d2d2;
  max-width: 46ch;
}

/* A moldura tem o miolo transparente. Sobre o preto do site ela sumiria
   pela metade, então o palco cinza faz o papel da foto que ainda não
   existe — e já mostra à pessoa exatamente onde o rosto dela vai entrar. */
.convite-arte{
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  margin-inline: auto;
  background: var(--grafite);
  overflow: hidden;
}
.convite-arte::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.035) 0 12px,
      transparent 12px 24px);
}
.convite-moldura{ position: relative; width: 100%; }

/* =========================================================
   6. AÇÃO
   ========================================================= */
.acao{
  padding: clamp(44px, 8vw, 72px) var(--respiro);
  background: var(--quase-preto);
  text-align: center;
}

.acao-chamada{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 1.2;
  margin: 0 0 14px;
}

.acao-linha{
  margin: 0 0 26px;
  font-size: clamp(1rem, 3.6vw, 1.12rem);
  color: #dcdcdc;
}

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--amarelo);
  color: var(--preto);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 4.6vw, 1.45rem);
  letter-spacing: 0.04em;
  padding: 16px clamp(22px, 6vw, 40px);
  border: 3px solid var(--amarelo);
  max-width: 100%;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.botao:hover, .botao:focus-visible{
  background: var(--amarelo-escuro);
  border-color: var(--amarelo-escuro);
}
.botao:active{ transform: translateY(2px); }
.botao svg{ flex: none; }

/* Variante vazada: o segundo botão de um par, para não competir com o
   primeiro. Usada só na página da moldura. */
.botao--vazado{
  background: transparent;
  color: var(--amarelo);
}
.botao--vazado:hover, .botao--vazado:focus-visible{
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--preto);
}
.botao--largo{ width: 100%; }
.botao[disabled], .botao[aria-disabled="true"]{
  opacity: 0.45;
  pointer-events: none;
}

.acao-nota{
  margin: 22px 0 0;
  font-size: 0.98rem;
  color: var(--cinza);
}
.acao-nota a{ color: var(--amarelo); text-decoration: none; font-weight: 700; }
.acao-nota a:hover{ text-decoration: underline; }

/* =========================================================
   7. RODAPÉ
   ========================================================= */
.rodape{
  padding: clamp(30px, 6vw, 46px) var(--respiro) clamp(34px, 7vw, 52px);
  text-align: center;
}
.rodape p{ margin: 0 0 10px; }

.rodape-marca{
  width: min(100%, 220px);
  margin: 0 auto clamp(20px, 4vw, 28px);
}

.rodape-numero{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
}
.rodape-numero strong{ color: var(--amarelo); font-weight: 400; }

.rodape-redes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  font-size: 0.95rem;
}
.rodape-redes a{ color: var(--branco); text-decoration: none; }
.rodape-redes a:hover{ color: var(--amarelo); text-decoration: underline; }
.rodape-redes span{ color: var(--cinza); }

.rodape-legal{
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--cinza);
}
.rodape-voltar{
  margin-bottom: 18px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rodape-voltar a{ color: var(--amarelo); text-decoration: none; }
.rodape-voltar a:hover{ text-decoration: underline; }

/* =========================================================
   8. MOLDURA DE APOIO (apoio/index.html)
   ========================================================= */
.apoio-topo{
  padding: clamp(20px, 4vw, 28px) var(--respiro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--largura);
  margin-inline: auto;
}
.apoio-topo img{ width: min(46vw, 180px); }
.apoio-topo a{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--amarelo);
  text-decoration: none;
}
.apoio-topo a:hover{ text-decoration: underline; }

.apoio{ padding: clamp(24px, 5vw, 44px) var(--respiro) clamp(44px, 8vw, 72px); }
.apoio-interno{ max-width: var(--largura); margin-inline: auto; }

.apoio-titulo{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.85rem, 8vw, 3.1rem);
  line-height: 1.1;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
.apoio-linha{
  margin: 0 0 clamp(30px, 5vw, 44px);
  font-size: clamp(1.02rem, 3.8vw, 1.15rem);
  color: #d2d2d2;
  max-width: 52ch;
}

.moldura{
  display: grid;
  gap: clamp(26px, 5vw, 44px);
  align-items: start;
}
@media (min-width: 900px){
  .moldura{ grid-template-columns: minmax(0,1fr) minmax(0,0.82fr); gap: 56px; }
}

/* ----- o palco: canvas + área de escolha ----- */
.moldura-palco{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin-inline: auto;
  background: var(--grafite);
  overflow: hidden;
}
.moldura-palco canvas{
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;      /* o arraste é nosso, não do navegador */
}

/* A área de escolha cobre o palco inteiro enquanto não há foto. Assim que
   a foto entra, o JS liga .moldura--pronta e ela sai da frente para o
   dedo poder arrastar a imagem. */
.moldura-area{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: var(--respiro);
  cursor: pointer;
  color: var(--branco);
  /* Opaco, não translúcido. Com 0,55 de preto a marca desenhada no canvas
     atrás aparecia por baixo do texto e a linha "ou arraste a imagem para
     cá" ficava ilegível justamente na hora em que a pessoa precisa lê-la.
     Enquanto não há foto, o canvas atrás não tem nada que valha a pena
     mostrar — a moldura sozinha não é a promessa, a foto dela é. */
  background: var(--grafite);
  border: 3px dashed rgba(252,187,1,0.55);
  transition: background .15s ease, border-color .15s ease;
}
.moldura-area:hover,
.moldura-area--sobre{
  background: #232323;
  border-color: var(--amarelo);
}
.moldura-area strong{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 4.8vw, 1.4rem);
  letter-spacing: 0.03em;
  color: var(--amarelo);
}
.moldura-area span{ font-size: 0.95rem; color: #cfcfcf; }
.moldura-area svg{ color: var(--amarelo); }
.moldura--pronta .moldura-area{ display: none; }

/* ----- controles ----- */
.moldura-rotulo{
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.88rem;
  color: var(--amarelo);
  margin-bottom: 10px;
}

/* O range também é superfície do navegador: sem isto ele chega azul do
   sistema no meio de uma página preta e amarela. */
.moldura-zoom{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #333;
  margin: 0 0 clamp(20px, 4vw, 26px);
  cursor: pointer;
}
.moldura-zoom::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: var(--amarelo);
  border: 3px solid var(--preto);
  cursor: grab;
}
.moldura-zoom::-moz-range-thumb{
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: var(--amarelo);
  border: 3px solid var(--preto);
  cursor: grab;
}
.moldura-zoom:active::-webkit-slider-thumb{ cursor: grabbing; }

.moldura-botoes{ display: grid; gap: 12px; }

.moldura-aviso{
  margin: 18px 0 0;
  font-size: 0.96rem;
  line-height: 1.45;
  color: #d2d2d2;
  min-height: 1.45em;       /* segura a altura: sem isto o bloco pula */
}
.moldura-aviso--erro{ color: #ff8f6b; font-weight: 700; }

.moldura-zap{ margin-top: 14px; }

.moldura-salvar{
  margin-top: 22px;
  padding: 16px;
  background: var(--quase-preto);
  border: 2px solid var(--amarelo);
}
.moldura-salvar p{ margin: 0 0 12px; font-size: 0.95rem; }
.moldura-salvar strong{ color: var(--amarelo); }

.moldura-privacidade{
  margin: clamp(22px, 4vw, 30px) 0 0;
  padding-top: 18px;
  border-top: 1px solid #2a2a2a;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cinza);
}
.moldura-privacidade strong{ color: var(--branco); }

.moldura-convite{ margin-top: clamp(22px, 4vw, 30px); }
.moldura-convite p{ margin: 0 0 10px; font-size: 0.92rem; color: var(--cinza); }
.moldura-copiar{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 2px solid #333;
  color: var(--branco);
  font-family: var(--texto);
  font-size: 0.92rem;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.moldura-copiar:hover{ border-color: var(--amarelo); }
.moldura-copiar-acao{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--preto);
  background: var(--amarelo);
  padding: 3px 8px 2px;
}
.moldura-copiar--feito .moldura-copiar-acao{ background: #4ade80; }

/* Plano B do webview do Instagram: nasce escondido, só aparece se a fuga
   automática não pegar. */
.escapar{ margin: 0 0 clamp(24px, 4vw, 32px); }

/* =========================================================
   PÁGINA DE ERRO (404.html)
   ========================================================= */
.erro{
  padding: clamp(48px, 10vw, 90px) var(--respiro);
  text-align: center;
}
.erro-logo{
  width: min(100%, 380px);
  margin: 0 auto clamp(26px, 5vw, 40px);
}

/* ---------- Acessibilidade ---------- */
:focus-visible{ outline: 3px solid var(--amarelo); outline-offset: 3px; }
.feito :focus-visible{ outline-color: var(--preto); }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}