/* ═══════════════════════════════════════════════════
   PPCELL 2244 — Deputado Federal / CE
   Villa Propaganda — 2026
   Paleta extraída da IDV oficial (Logotipo PPCELL 2244)
   ═══════════════════════════════════════════════════ */

:root{
  /* ── Marca — amostrado do material gráfico oficial da campanha ──
     (Adesivo Bola PPCELL 45x45, FINALIZAÇÃO/PP)
     Verde é a cor dominante; amarelo carrega o número.          */
  --vd:      #007035;   /* verde campanha — DOMINANTE */
  --vd-cl:   #129D39;   /* verde claro (selo CONFIRMA) */
  --vd-esc:  #005528;   /* verde profundo (rodapé) */
  --am:      #F8B811;   /* amarelo — número e destaques */
  --am-cl:   #FFC93A;   /* amarelo hover */

  /* Azul vive dentro do logotipo — usado só como apoio pontual */
  --az:      #1B65A6;
  --az-seta: #1D81C4;

  /* Neutros */
  --tinta:   #14261B;
  --tinta-2: #4C5C52;
  --linha:   #DDE5DF;
  --cinza:   #F2F6F3;
  --branco:  #FFFFFF;

  --wrap: 1180px;
  --r: 14px;
  --r-g: 24px;


  /* ── Tipografia ──────────────────────────────────────────────
     Escala de passos fixos. Antes havia 15 tamanhos avulsos entre
     .7rem e 1.05rem, sem relação entre si.                       */
  --t-xs:  .75rem;    /* 12px — fonte de citação, base do rodapé   */
  --t-sm:  .875rem;   /* 14px — rótulos, legendas, botões miúdos   */
  --t-md:  1rem;      /* 16px — corpo                              */
  --t-lg:  1.125rem;  /* 18px — corpo destacado, lead              */

  /* Pesos: três, não cinco. Batem com os cortes da Montserrat
     usados no material impresso (Medium, Bold, Black).            */
  --p-texto:  500;
  --p-forte:  700;
  --p-numero: 900;

  /* Tracking por função, não por chute */
  --tr-alta:   .14em;   /* caixa alta pequena precisa de respiro   */
  --tr-titulo: .015em;  /* caixa alta grande                       */
  --tr-num:   -.02em;   /* números grandes fecham melhor           */

  --t: 200ms cubic-bezier(.2,.7,.3,1);

  /* Montserrat é a fonte oficial da campanha (confirmada nos PDFs de finalização:
     Montserrat Medium / Bold / Black). Os arquivos AINDA NÃO estão no projeto —
     ver o bloco @font-face logo abaixo e o README, seção "Fonte".
     Até lá o site cai na stack de sistema, que é próxima o bastante. */
  --fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   FONTE OFICIAL — ativar quando os .woff2 estiverem em assets/fonts/
   Pesos usados: 500 (Medium), 700 (Bold), 900 (Black).
   Montserrat é SIL OFL: self-host permitido.

@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/montserrat-medium.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/montserrat-bold.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/montserrat-black.woff2") format("woff2");
}
───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* o atributo hidden precisa vencer qualquer display declarado */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:var(--t-md);
  font-weight:var(--p-texto);
  line-height:1.65;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* Caixa alta em Bold com tracking aberto — é assim no material impresso
   (a assinatura do adesivo e do santinho é Montserrat Bold, não Black).
   Black + tracking negativo fechava demais e pesava a leitura. */
h1,h2,h3{
  margin:0;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:var(--tr-titulo);
  font-weight:var(--p-forte);
  text-wrap:balance;
}
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--am); color:var(--tinta);
  padding:14px 22px; font-weight:var(--p-forte); border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

:where(a,button):focus-visible{
  outline:3px solid var(--am);
  outline-offset:3px;
  border-radius:6px;
}

/* ═══════ BOTÕES ═══════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px;
  font-size:var(--t-md); font-weight:var(--p-forte); letter-spacing:0;
  text-decoration:none; border-radius:999px; border:2px solid transparent;
  transition:background var(--t), color var(--t), border-color var(--t);
  will-change:transform;
}
.btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }

.btn--am{ background:var(--am); color:var(--vd); }
.btn--am:hover{ background:var(--am-cl); }

.btn--linha{ background:transparent; color:var(--branco); border-color:rgba(255,255,255,.5); }
.btn--linha:hover{ background:var(--branco); color:var(--vd); border-color:var(--branco); }

.btn--zap{ background:var(--vd-cl); color:var(--branco); }
.btn--zap:hover{ background:#16B342; }

/* ═══════ TOPO ═══════ */
.topo{
  position:sticky; top:0; z-index:100;
  background:var(--branco);
  border-bottom:1px solid var(--linha);
}
.topo__in{
  display:flex; align-items:center; gap:clamp(14px,3vw,32px);
  min-height:76px;
}
.topo__marca{ flex:none; }
.topo__marca img{ width:clamp(120px,17vw,164px); }

.nav{
  display:flex; gap:clamp(14px,2.2vw,30px);
  margin-inline-start:auto;
  font-size:var(--t-sm); font-weight:var(--p-forte);
}
.nav a{
  text-decoration:none; color:var(--tinta-2);
  padding:6px 0; position:relative;
  transition:color var(--t);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  background:var(--vd); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav a:hover{ color:var(--vd); }
.nav a:hover::after{ transform:scaleX(1); }

.topo__cta{ padding:11px 20px; font-size:var(--t-sm); flex:none; }

.burger{
  display:none;
  width:46px; height:46px; padding:0;
  background:transparent; border:1.5px solid var(--linha); border-radius:12px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:20px; height:2.2px; border-radius:2px; background:var(--tinta);
  transition:transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.2px) rotate(-45deg); }

/* ═══════ HERO ═══════ */
.hero{
  position:relative;
  color:var(--branco);
  background:var(--vd);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:var(--vd);
}

.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:end;
  gap:clamp(24px,4vw,52px);
  padding-block:clamp(56px,8vw,96px) 0;
}

/* FOTO DO HERO — retrato, ancorado na base.
   A foto (900x1138) já traz as duas placas e o selo CONFIRMA, então o hero
   não precisa de nenhum PNG de número por cima: o layout volta a ser o
   clássico de coluna, texto à esquerda e ele à direita. */
.hero__foto{ align-self:end; }
.hero__foto img{ display:block; width:100%; height:auto; }

.eyebrow{
  margin:0 0 18px;
  font-size:var(--t-xs); font-weight:var(--p-forte);
  letter-spacing:var(--tr-alta); text-transform:uppercase;
  color:var(--am);
}
.eyebrow--az{ color:var(--vd); }
.eyebrow--vd{ color:var(--vd); }
.eyebrow--am{ color:#B07C00; }

.hero__h1{
  font-size:clamp(2.05rem, 4.4vw, 3.5rem);
  line-height:1.04;
  letter-spacing:-.01em;
}
.hero__h1 span{ display:block; }
.hero__h1 .am{ color:var(--am); }

.hero__lead{
  margin-top:22px;
  max-width:42ch;
  font-size:var(--t-lg);
  color:rgba(255,255,255,.9);
}

.hero__acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; padding-bottom:clamp(40px,6vw,72px); }
.hero__texto{ align-self:center; }


/* ═══════ FAIXA DE NÚMEROS ═══════ */
.faixa{ background:var(--am); color:var(--tinta); }
.faixa__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,36px);
  padding-block:clamp(26px,4vw,40px);
}
.faixa__it{ display:flex; flex-direction:column; gap:4px; }
.faixa__it b{
  font-size:clamp(1.9rem,4.4vw,3rem); font-weight:var(--p-forte);
  letter-spacing:var(--tr-num); line-height:1;
}
.faixa__it span{ font-size:var(--t-sm); font-weight:var(--p-texto); line-height:1.4; opacity:.9; }

/* ═══════ SEÇÕES ═══════ */
.sec{ padding-block:clamp(64px,10vw,124px); }
.sec--cinza{ background:var(--cinza); }
.sec--az{ background:var(--vd); color:var(--branco); }      /* bloco verde */
.sec--vd{ background:var(--vd-esc); color:var(--branco); }  /* bloco verde profundo */

.sec__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.sec__cab h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); }
.sec__cab--centro{
  text-align:center; max-width:44rem; margin-inline:auto;
  margin-bottom:clamp(40px,6vw,64px);
}
.sec__sub{
  margin-top:22px;
  font-size:var(--t-lg);
  opacity:.88;
}

.prosa{ font-size:var(--t-md); color:var(--tinta-2); max-width:60ch; }
.prosa__abre{ font-size:var(--t-lg); color:var(--tinta); font-weight:var(--p-forte); }
.prosa__destaque{
  margin-block:1.6em;
  padding-inline-start:22px;
  border-inline-start:4px solid var(--am);
  font-size:var(--t-lg); font-weight:var(--p-forte); color:var(--tinta);
  line-height:1.45;
}
.sec--vd .prosa,
.sec--az .prosa{ color:rgba(255,255,255,.86); }

/* ═══════ CARDS DE PROPOSTA ═══════ */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,2vw,22px);
  /* Explícito, não auto-fit: com quatro eixos e parágrafo desse tamanho, o
     auto-fit dava três colunas e deixava o quarto card sozinho na linha.
     2×2 emparelha e ainda dá largura de leitura confortável. */
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}
.card{
  position:relative;
  padding:clamp(26px,3vw,34px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-g);
  transition:background var(--t), transform var(--t), border-color var(--t);
}
.card:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(251,183,44,.55);
}
.card__n{
  display:block; margin-bottom:14px;
  font-size:var(--t-xs); font-weight:var(--p-numero); letter-spacing:var(--tr-alta);
  color:var(--am);
}
.card h3{
  font-size:var(--t-sm);
  line-height:1.3; letter-spacing:var(--tr-titulo);   /* caixa alta pequena pede respiro */
  margin-bottom:12px;
}
.card p{ font-size:var(--t-sm); line-height:1.6; color:rgba(255,255,255,.8); margin:0; }

.honesto{
  max-width:56ch; margin:clamp(40px,6vw,64px) auto 0;
  text-align:center;
  font-size:var(--t-lg);
  font-weight:var(--p-texto);
  color:rgba(255,255,255,.9);
  padding-top:clamp(30px,4vw,40px);
  border-top:1px solid rgba(255,255,255,.2);
}

/* ═══════ DUO ═══════ */
.duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,48px); }
.duo__c{
  background:var(--branco);
  padding:clamp(30px,3.5vw,42px);
  border-radius:var(--r-g);
  border:1px solid var(--linha);
}
.duo__c h3{
  font-size:var(--t-md);
  line-height:1.3; letter-spacing:var(--tr-titulo);
  margin-bottom:14px;
}
.duo__c p{ color:var(--tinta-2); margin:0; }

/* ═══════ MATERIAL PARA BAIXAR ═══════ */
.kits{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,2vw,20px);
  /* Teto de 320px na coluna: com os quatro cards no ar dá quatro colunas de
     ~280px, e com dois no ar eles ficam do mesmo tamanho e centrados, em vez
     de esticar meia tela cada um. */
  grid-template-columns:repeat(auto-fit,minmax(240px,320px));
  justify-content:center;
}
.kit{
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,32px);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--r-g);
}
.kit h3{
  font-size:var(--t-sm);
  line-height:1.3; letter-spacing:var(--tr-titulo);
  margin-bottom:12px;
}
.kit p{
  font-size:var(--t-sm); line-height:1.6;
  color:var(--tinta-2);
  margin:0 0 22px;
}
.kit__bt{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:var(--vd); color:var(--branco);
  border-radius:999px;
  text-decoration:none;
  font-size:var(--t-sm); font-weight:var(--p-forte);
  transition:background var(--t);
}
.kit__bt:hover{ background:var(--vd-cl); }
.kit__bt::after{ content:"↓"; font-weight:var(--p-forte); }

.honesto--claro{
  color:var(--tinta-2);
  border-top-color:var(--linha);
}

/* ═══════ DEPOIMENTOS ═══════ */
.depos{
  display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:960px; margin-inline:auto;
}
.depo{
  margin:0; position:relative;
  padding:clamp(30px,3.4vw,40px) clamp(26px,3vw,34px) clamp(24px,3vw,30px);
  background:var(--branco);
  border-radius:var(--r-g);
  border:1px solid var(--linha);
}
.depo::before{
  content:"\201C";
  position:absolute; top:.02em; left:.2em;
  font-size:5rem; line-height:1;
  color:var(--am);
}
.depo blockquote{ margin:0 0 20px; }
.depo blockquote p{
  margin:0;
  font-size:var(--t-md);
  font-weight:var(--p-texto); line-height:1.6;
  color:var(--tinta);
}
.depo figcaption{
  display:grid; gap:2px;
  padding-top:18px;
  border-top:1px solid var(--linha);
}
.depo figcaption b{
  font-size:var(--t-sm); font-weight:var(--p-forte);
  text-transform:uppercase; letter-spacing:var(--tr-titulo);
  color:var(--vd);
}
.depo figcaption span{ font-size:var(--t-sm); color:var(--tinta-2); }
.depo figcaption cite{
  font-size:var(--t-xs); font-style:normal; color:var(--tinta-2); opacity:.75;
}

/* ═══════ SIMULADOR DE URNA ═══════ */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* corpo off-white do equipamento (modelo UE2022), com a tela
   embutida numa moldura preta — conferido em foto do aparelho */
.urna{
  display:grid; grid-template-columns:1fr clamp(300px,26vw,340px);
  gap:clamp(18px,2.6vw,30px);
  max-width:880px; margin-inline:auto;
  padding:clamp(18px,2.6vw,28px);
  background:#EDEAE2;
  border-radius:var(--r-g);
}

/* ── tela ── */
.urna__tela{
  position:relative;
  /* Duas colunas: textos à esquerda, foto no alto à direita, como no
     equipamento real. A coluna da foto tem largura fixa e continua existindo
     com a foto escondida — se ela colapsasse, o texto mudaria de largura a
     cada voto. */
  display:grid;
  /* A foto encolhe no celular. Fixa em 104px ela comia 44% da largura útil e
     sobravam 131px para o texto — o cargo quebrava em duas linhas e a ajuda
     em quatro. Medido em 375px. */
  --foto:clamp(68px,20vw,104px);
  grid-template-columns:minmax(0,1fr) var(--foto);
  column-gap:clamp(12px,1.6vw,18px);
  align-content:start;
  background:#F7F7F2; color:#1A1A1A;
  border:clamp(10px,1.4vw,16px) solid #14161A;   /* moldura preta */
  border-radius:6px;
  padding:clamp(16px,2.2vw,24px);
  min-height:290px;
  font-size:clamp(.92rem,1.15vw,1.02rem);
  line-height:1.35;
}
/* Colocação explícita. Com auto-placement a foto disputaria linha com o
   cabeçalho e o resultado passaria a depender da ordem do DOM. */
.tela__prog { grid-column:1 / -1; grid-row:1; }
.tela__topo { grid-column:1; grid-row:2; }
.tela__cargo{ grid-column:1; grid-row:3; }
.tela__linha{ grid-column:1; grid-row:4; }
.tela__corpo{ grid-column:1; grid-row:5; }
.tela__ajuda{ grid-column:1; grid-row:6; }
/* Começa na linha do número (row 4), não no "SEU VOTO PARA": o topo da foto
   alinha com o topo dos quadradinhos do número. */
.tela__foto { grid-column:2; grid-row:4 / span 3; align-self:start; }

/* Tentei manter o espaço com visibility em vez de display, mas o reset da
   linha 83 usa `[hidden]{ display:none !important }` e ganha de qualquer
   regra sem !important. Em vez de brigar com isso, a altura fica reservada no
   container: .tela__corpo abaixo. A foto não precisa de reserva vertical
   porque a coluna de texto (número + dados + ajuda) é sempre mais alta que
   ela — conferido em 375px e em 1512px. */
/* barra de progresso — recurso novo da interface 2026 do TSE:
   fica fixa no topo e mostra quais cargos já foram votados */
.tela__prog{
  display:flex; gap:4px;
  margin:0 0 1.1em; padding:0;
  list-style:none;
}
.tela__prog li{
  flex:1;
  display:grid; gap:5px;
  font-size:.62em; font-weight:var(--p-forte); letter-spacing:.06em;
  text-transform:uppercase; text-align:center;
  color:#9A9A90;
}
.tela__prog li::before{
  content:"";
  display:block; height:5px;
  background:#DCDCD2;
  border-radius:2px;
}
.tela__prog li.feito{ color:var(--vd); }
.tela__prog li.feito::before{ background:var(--vd); }
.tela__prog li.agora{ color:#1A1A1A; }
.tela__prog li.agora::before{ background:var(--am); }

.tela__topo{ margin:0; font-size:.74em; letter-spacing:normal; font-weight:var(--p-forte); color:#5A5A50; }
/* Mesma ideia, outro gatilho: aqui o pulo é na TROCA de cargo, não no
   preenchimento. "DEPUTADO ESTADUAL" é o único que quebra em duas linhas no
   celular, e sozinho movia a tela 23px ao sair de Deputado Federal. */
.tela__cargo{
  margin:.15em 0 .9em;
  font-size:1.12em; font-weight:var(--p-forte); letter-spacing:var(--tr-num); line-height:1.2;
  text-transform:uppercase;
  min-height:2.5em;   /* duas linhas: é o que "DEPUTADO ESTADUAL" ocupa em 375px */
}
.tela__linha{ display:flex; align-items:center; gap:12px; }
.tela__rot{ font-weight:var(--p-forte); }
.tela__digitos{ display:flex; gap:7px; }
.tela__digitos i{
  display:grid; place-items:center;
  width:1.5em; height:1.9em;
  border:2px solid #1A1A1A; border-radius:3px;
  font-style:normal; font-size:1.25em; font-weight:var(--p-numero);
}
.tela__digitos i.vazio{ border-style:dashed; border-color:#B3B3A8; }
.tela__digitos i.cursor{ border-color:var(--vd); background:#E6F2EA; }

/* Reserva a altura dos dados. Não é a foto que manda aqui (ela foi para a
   coluna da direita): é o NOME, que vira duas linhas quando é longo —
   "ANTÔNIO HENRIQUE", "ALCIDES FERNANDES", "FLÁVIO BOLSONARO". Sem isto a
   tela cresce no instante em que o número fecha. */
.tela__corpo{ display:flex; gap:16px; align-items:flex-start; margin-top:1.1em; min-height:3.6em; }
.tela__dados{ margin:0; flex:1; }
.tela__dados div{ display:flex; gap:8px; margin-bottom:.35em; }
.tela__dados dt{ font-weight:var(--p-forte); color:#5A5A50; }
.tela__dados dd{ margin:0; font-weight:var(--p-forte); }
.tela__foto{
  width:var(--foto); height:var(--foto);
  object-fit:cover; border-radius:4px;
  border:2px solid #1A1A1A;
}
/* Reserva DUAS linhas desde o começo. A frase troca de "Digite o número do
   seu candidato." para "Aperte CONFIRMA para confirmar. CORRIGE para..." no
   instante em que o número fecha, e no celular a segunda quebra: medido, a
   tela pulava de 337 para 353px a cada um dos seis cargos. Em em para
   acompanhar o clamp do font-size da tela. */
.tela__ajuda{ margin:0; font-size:.82em; color:#5A5A50; min-height:2.7em; }
/* Em tela estreita a coluna de texto cai para ~160px e a mesma frase ocupa
   três linhas em vez de duas. Reservar 4,1em no desktop seria buraco à toa —
   lá ela nunca passa de duas. */
@media (max-width:520px){
  .tela__ajuda{ min-height:4.1em; }
  .tela__corpo{ min-height:4.8em; }   /* o nome quebra mais cedo aqui */

  /* Os quadradinhos não encolhem e vazavam por baixo da foto. Aqui eles
     descem para a própria linha — e descem SEMPRE (flex-basis:100%), não só
     quando são cinco. Se dependesse da quantidade, a altura mudaria entre
     Deputado Estadual (5) e Presidente (2), e o pulo voltava por outra porta. */
  .tela__linha{ flex-wrap:wrap; row-gap:6px; }
  .tela__digitos{ flex-basis:100%; }
}
.tela__fim{
  position:absolute; inset:0;
  display:grid; place-content:center; text-align:center;
  background:#F7F7F2; border-radius:10px;
  font-size:1.1em; line-height:1.5;
}
.tela__fim b{ font-size:2.4em; font-weight:var(--p-numero); letter-spacing:var(--tr-alta); color:#1A1A1A; }

/* ── teclado ── */
/* cores conferidas na foto do equipamento real (modelo UE2022):
   teclas numéricas pretas, BRANCO off-white, CORRIGE laranja, CONFIRMA verde */
.teclado{ display:grid; grid-template-columns:1fr 108px; gap:10px; align-items:start; }

.teclas{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.teclas button{
  aspect-ratio:1.25;
  background:#1B1D20; color:var(--branco);
  border:0; border-radius:7px;
  font-family:inherit; font-size:clamp(.95rem,1.7vw,1.25rem); font-weight:var(--p-numero);
  cursor:pointer;
  transition:background 90ms;
}
.teclas button:hover{ background:#33373C; }
.teclas button:active{ background:#4A4F55; }

.teclas__acoes{ display:grid; gap:7px; align-content:start; }
.tec{
  padding:13px 6px;
  border:2px solid transparent; border-radius:7px;
  font-family:inherit; font-size:var(--t-xs); font-weight:var(--p-forte); letter-spacing:.06em;
  cursor:pointer;
  transition:filter 90ms, background 90ms;
}
.tec:hover{ filter:brightness(1.08); }

/* BRANCO é branco sobre corpo off-white: sem contorno ele desaparece.
   A tecla real também tem borda escura. */
.tec--br{
  background:var(--branco); color:#1B1D20;
  border-color:#1B1D20;
}
.tec--br:hover{ background:#E4E4DE; }
.tec--cor{ background:#E8501E; color:var(--branco); }
.tec--cf{ background:#3FA34D; color:var(--branco); }
.tec[disabled]{ opacity:.4; cursor:not-allowed; }

.urna__pe{ display:grid; gap:7px; margin-top:14px; }
.urna__auto,.urna__reset,.urna__cheia{
  padding:9px 8px;
  background:transparent; color:#5C6157;
  border:1px solid #CFCBC1; border-radius:8px;
  font-family:inherit; font-size:var(--t-xs); font-weight:var(--p-forte);
  cursor:pointer; transition:background 120ms, color 120ms, border-color 120ms;
}
.urna__auto:hover,.urna__reset:hover,.urna__cheia:hover{
  background:#E0DCD2; color:#14161A; border-color:#B8B3A8;
}
/* ⚠️ O botão NÃO pode se chamar .urna__tela — essa classe já é a tela da
   urna, com min-height de 290px e moldura preta. Chamado assim, ele herdava
   tudo e virava uma caixa de 290px de altura. Daí .urna__cheia. */

/* ── TELA CHEIA ────────────────────────────────────────────────
   Dois caminhos, de propósito. A Fullscreen API some com a barra do
   navegador, mas o Safari do iPhone não a aceita em elemento comum — só em
   vídeo. Então quem manda no layout é esta classe, que funciona em todo
   lugar; a API entra por cima quando existe, como ganho e não como
   requisito. */
/* SEMPRE DEITADA (pedido do Lelo, 28/09/2026). Empilhar tela e teclado no
   celular em pé "quebrava" a urna: deixava de parecer o equipamento. Agora
   a tela cheia tem UM desenho só, em medida fixa (px, sem vw), e o JS
   escala esse desenho para caber no aparelho (--k). Com o celular em pé o
   JS liga .deitada e a urna gira 90°: a pessoa vira o aparelho e vê a urna
   inteira. No Android, onde dá, o JS ainda trava a orientação na horizontal
   e aí o giro nem é necessário. */
.urna.tela-cheia{
  position:fixed; left:50%; top:50%; z-index:900;
  width:1060px; max-width:none; margin:0;
  padding:30px;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:30px; align-items:center;
  transform:translate(-50%,-50%) scale(var(--k,1));
  transform-origin:center;
}
.urna.tela-cheia.deitada{
  transform:translate(-50%,-50%) rotate(90deg) scale(var(--k,1));
}
/* O fundo da tela inteira: a urna agora é só o equipamento, do tamanho
   dele, e o resto da tela precisa esconder a página. */
body.urna-aberta::before{
  content:""; position:fixed; inset:0; z-index:899;
  background:#DCD8CE;
}
/* trava o fundo: sem isso a página corre por baixo no toque do celular */
body.urna-aberta{ overflow:hidden; }
body.urna-aberta .zap-fixo{ display:none; }

/* Medidas fixas: anulam os clamps em vw e as regras de celular (≤980 e
   ≤520px), que empilhariam o teclado e quebrariam a linha do número. */
.urna.tela-cheia .urna__tela{
  font-size:19px;
  min-height:420px;
  --foto:140px;
  border-width:16px;
  padding:24px;
}
.urna.tela-cheia .urna__teclado{ max-width:none; margin:0; width:auto; }
.urna.tela-cheia .tela__linha{ flex-wrap:nowrap; }
.urna.tela-cheia .tela__digitos{ flex-basis:auto; }
.urna.tela-cheia .tela__ajuda{ min-height:2.7em; }
.urna.tela-cheia .tela__corpo{ min-height:3.6em; }
.urna.tela-cheia .teclado{ grid-template-columns:1fr 112px; }
.urna.tela-cheia .tec{ padding:18px 6px; font-size:13px; }
.urna.tela-cheia .teclas button{ font-size:24px; }
.urna.tela-cheia .urna__auto,
.urna.tela-cheia .urna__reset,
.urna.tela-cheia .urna__cheia{ padding:11px 8px; font-size:13px; }

/* Este aviso não é enfeite: separa a simulação da urna de verdade. Estava em
   branco a 60% de opacidade, no tamanho mínimo, e sumia. Agora tem moldura
   amarela, fundo próprio e um sinal à esquerda. */
/* Amarelo chapado. A tinta sobre ele dá 9:1 de contraste; o verde da marca
   daria 3,5:1 e reprovaria em corpo pequeno, por isso o texto não é verde.
   A largura curta é de propósito: o texto fecha em duas linhas cheias em vez
   de três com uma órfã de duas palavras. */
.aviso{
  max-width:46ch; margin:28px auto 0;
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 22px;
  background:var(--am);
  color:var(--tinta);
  border-radius:var(--r);
}
.aviso__ico{
  flex:none;
  width:26px; height:26px;
  margin-top:-1px;              /* alinha o peso óptico do triângulo com o olho */
  fill:var(--vd-esc);
}
.aviso__txt{ min-width:0; }
/* Hierarquia por escala, não por decoração: o rótulo vira olho pequeno em
   caixa alta, e o corpo fica sozinho no tamanho de leitura. Antes os dois
   tinham o mesmo corpo e disputavam a mesma linha. */
.aviso__olho{
  margin:0 0 3px;
  font-size:.68rem; font-weight:var(--p-forte);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--vd-esc);          /* 5:1 sobre o amarelo */
}
.aviso__txt p:last-child{
  margin:0;
  font-size:var(--t-xs); line-height:1.55;
  text-wrap:pretty;             /* evita a última linha com uma palavra só */
}

/* ═══════ JINGLE ═══════ */
.letra{
  margin:0; padding:clamp(26px,3vw,36px);
  background:var(--cinza);
  border-radius:var(--r-g);
  border-inline-start:5px solid var(--am);
  font-size:var(--t-lg);
  font-weight:var(--p-texto); line-height:1.6; color:var(--tinta);
}
.letra p{ margin-bottom:1.2em; }
.letra__ref{ color:var(--vd); font-weight:var(--p-forte); }

/* ═══════ REDES ═══════ */
/* mesmo desenho dos botões da página "em breve": pílula com contorno,
   WhatsApp em amarelo cheio */
.redes{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.rede{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px;
  text-decoration:none;
  font-weight:var(--p-forte); font-size:var(--t-md);
  color:var(--branco);
  background:transparent;
  border:2px solid rgba(255,255,255,.5);
  border-radius:999px;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.rede:hover{ background:var(--branco); color:var(--vd); border-color:var(--branco); }
.rede svg{ width:20px; height:20px; fill:currentColor; flex:none; }

.rede--zap{ background:var(--am); color:var(--vd); border-color:var(--am); }
.rede--zap:hover{ background:var(--am-cl); color:var(--vd); border-color:var(--am-cl); }

/* ═══════ RODAPÉ ═══════ */
.pe{ background:#00351A; color:rgba(255,255,255,.68); padding-top:clamp(48px,6vw,72px); }
.pe__in{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(30px,5vw,64px); align-items:start;
  padding-bottom:clamp(36px,5vw,52px);
}
/* versão oficial do lockup para fundo escuro — vai direto, sem caixa */
.pe__marca{ width:clamp(170px,23vw,235px); }
.pe__legal{ font-size:var(--t-sm); line-height:1.6; }
.pe__legal p{ margin-bottom:1em; }
.pe__slogan{
  font-size:var(--t-lg); font-weight:var(--p-forte); letter-spacing:var(--tr-titulo); text-transform:uppercase;
  color:var(--branco);
}
.pe__cnpj{ font-size:var(--t-xs); opacity:.72; }
.pe__nota{ font-size:var(--t-xs); opacity:.6; }

/* Aviso de IA. A resolução pede "explícito, destacado e acessível", então ele
   NÃO herda a opacidade baixa do resto do bloco legal: contraste próprio,
   fio amarelo à esquerda e o mesmo corpo do CNPJ. Sobre o verde profundo do
   rodapé, branco a 88% dá 11:1 — passa folgado em WCAG AA. */
.pe__ia{
  font-size:var(--t-xs); line-height:1.6;
  color:rgba(255,255,255,.88);
  border-left:3px solid var(--am);
  padding-left:14px;
}
.pe__ia b{ color:var(--am); }

.pe__base{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:space-between;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--t-xs); opacity:.6;
}

/* ═══════ WHATSAPP FIXO ═══════ */
.zap-fixo{
  position:fixed; z-index:90;
  right:clamp(16px,3vw,26px);
  bottom:clamp(16px,3vw,26px);
  width:58px; height:58px;
  display:grid; place-items:center;
  background:var(--vd-cl); border-radius:50%;
  transition:transform var(--t), background var(--t);
}
.zap-fixo:hover{ transform:scale(1.08); background:#16B342; }
.zap-fixo svg{ width:32px; height:32px; fill:var(--branco); }

/* ═══════ REVELAÇÃO NO SCROLL ═══════ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rv.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* Faixa intermediária: entre 981 e 1180px a headline cresce o bastante
   para encostar na pill. Sobe e recua o número o suficiente para limpar. */
/* ═══════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════ */
@media (max-width:980px){
  .hero__in{ grid-template-columns:1fr; padding-block:clamp(40px,7vw,72px) 0; }
  .hero__foto{ max-width:400px; margin-inline:auto; width:100%; }
  /* O respiro embaixo dos botões existia porque a foto ficava ao lado. Agora
     ela vem depois, e esse espaço empurrava o 2244 para fora da primeira
     tela — que é justamente o que o hero precisa entregar. */
  .hero__acoes{ padding-bottom:0; }
  .sec__grid{ grid-template-columns:1fr; }
  .urna{ grid-template-columns:1fr; }
  .urna__teclado{ max-width:420px; margin-inline:auto; width:100%; }
  .pe__in{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .topo__in{ min-height:66px; }
  .burger{ display:flex; margin-inline-start:auto; }
  .topo__cta{ display:none; }

  .nav{
    position:fixed; inset:66px 0 auto;
    flex-direction:column; gap:0;
    margin:0; padding:10px clamp(20px,5vw,40px) 24px;
    background:var(--branco);
    border-bottom:1px solid var(--linha);
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t), transform var(--t), visibility var(--t);
  }
  .nav.aberto{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav a{ padding:15px 0; font-size:var(--t-md); border-bottom:1px solid var(--linha); }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  .faixa__in{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .hero__acoes .btn{ width:100%; }
  .eyebrow{ letter-spacing:.1em; }
  .zap-fixo{ width:52px; height:52px; }
  .zap-fixo svg{ width:28px; height:28px; }
}

/* ═══════ GERADOR DE MOLDURA ═══════
   Coluna única, dentro de um cartão branco sobre o verde da seção. A moldura
   manda na tela; os controles ficam embaixo, na ordem em que se usa:
   enviar → ajustar → baixar. Flat: sem sombra, sem gradiente. */
.mold{
  width:min(100%, 520px);
  margin:clamp(24px,4vw,38px) auto 0;
  padding:clamp(14px,3vw,20px);
  display:grid;
  gap:clamp(12px,2.4vw,16px);
  background:var(--branco);
  /* a seção é cinza-claro: sem o fio de borda o cartão branco encosta no
     fundo e some. Mesmo tratamento dos cards de material. */
  border:1px solid var(--linha);
  border-radius:var(--r-g);
  color:var(--tinta);
}

/* ── PALCO ─────────────────────────────────────────────────────
   Xadrez claro por baixo: mostra que o miolo da moldura é vago e é
   ali que a foto entra. O canvas não tem canto arredondado de
   propósito — o PNG que sai é quadrado, e o palco mostra o que sai. */
.mold__palco{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r);
  overflow:hidden;
  background-color:#EDF2EE;
  background-image:
    linear-gradient(45deg, #DCE5DE 25%, transparent 25%, transparent 75%, #DCE5DE 75%),
    linear-gradient(45deg, #DCE5DE 25%, transparent 25%, transparent 75%, #DCE5DE 75%);
  background-size:28px 28px;
  background-position:0 0, 14px 14px;
}
.mold__palco canvas{
  display:block;
  width:100%; height:100%;
  touch-action:none;           /* o arrasto é nosso, não do scroll da página */
}
.mold__palco{ cursor:pointer; }                    /* vazio: clicar envia */
.mold__palco.tem-foto{ cursor:default; }
.mold__palco.tem-foto canvas{ cursor:grab; }
.mold__palco.is-arrastando canvas{ cursor:grabbing; }
.mold__palco.is-sobre{ outline:3px dashed var(--vd); outline-offset:-6px; }

/* ── SELETOR DE MOLDURA ────────────────────────────────────────
   Discreto de propósito: é escolha secundária, não a ação principal.
   Com uma única moldura declarada, o JS esconde a linha inteira. */
.mold__opcoes{ display:flex; gap:8px; }
.mold__op{
  flex:1;
  padding:10px 8px;
  background:transparent;
  border:2px solid var(--linha);
  border-radius:999px;
  font:inherit;
  font-size:var(--t-xs); font-weight:var(--p-forte);
  letter-spacing:var(--tr-alta); text-transform:uppercase;
  color:var(--tinta-2);
  cursor:pointer;
  transition:border-color var(--t), background var(--t), color var(--t);
}
.mold__op:hover{ border-color:var(--vd); color:var(--vd); }
.mold__op.is-on{ background:var(--vd); border-color:var(--vd); color:var(--branco); }

/* ── ZOOM ──────────────────────────────────────────────────────
   As lupas são só rótulo visual; quem opera é o range no meio. */
.mold__zoom{ display:flex; align-items:center; gap:12px; }
.mold__lupa{
  width:20px; height:20px; flex:none;
  fill:none; stroke:var(--tinta-2); stroke-width:1.8;
  stroke-linecap:round;
}
.mold__zoom input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:0; height:26px;
  background:transparent; cursor:pointer;
}
.mold__zoom input[type=range]:disabled{ cursor:not-allowed; opacity:.45; }
.mold__zoom input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px; background:var(--linha);
}
.mold__zoom input[type=range]::-moz-range-track{
  height:6px; border-radius:999px; background:var(--linha);
}
.mold__zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-8px;
  border:0; border-radius:50%; background:var(--vd);
}
.mold__zoom input[type=range]::-moz-range-thumb{
  width:22px; height:22px;
  border:0; border-radius:50%; background:var(--vd);
}
.mold__zoom input[type=range]:focus-visible{ outline:3px solid var(--vd); outline-offset:4px; }

/* ── AÇÕES ─────────────────────────────────────────────────────
   Enviar ocupa a linha; girar e centralizar viram ícone porque são
   ajuste fino, não a ação que a pessoa veio fazer. */
.mold__linha{ display:flex; gap:8px; }

.mold__arq{ flex:1; display:block; }
.mold__arq input{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mold__arq span{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 14px;
  white-space:nowrap;          /* "Enviar foto" não pode quebrar em duas linhas */
  background:var(--vd); border-radius:999px;
  font-size:var(--t-md); font-weight:var(--p-forte);
  color:var(--branco);
  cursor:pointer;
  transition:background var(--t);
}
.mold__arq:hover span{ background:var(--vd-cl); }
.mold__arq input:focus-visible + span{ outline:3px solid var(--vd); outline-offset:3px; }

.mold__icone{
  flex:none; width:56px;
  display:grid; place-items:center;
  background:var(--cinza);
  border:2px solid var(--linha);
  /* pill, como os dois botões de texto da coluna: eles esticam na altura da
     linha, então 999px vira uma cápsula e não um círculo — que é justamente
     o que emparelha com "Enviar foto" ao lado */
  border-radius:999px;
  color:var(--tinta-2);
  cursor:pointer;
  transition:border-color var(--t), color var(--t), background var(--t);
}
.mold__icone:hover:not(:disabled){ background:var(--branco); border-color:var(--vd); color:var(--vd); }
.mold__icone:disabled{ opacity:.4; cursor:not-allowed; }

.mold__arq svg,.mold__icone svg,.mold__baixar svg{
  width:21px; height:21px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

.mold__baixar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 14px;
  white-space:nowrap;
  background:var(--am); border:0; border-radius:999px;
  font:inherit;
  font-size:var(--t-md); font-weight:var(--p-forte);
  color:var(--vd);
  cursor:pointer;
  transition:background var(--t);
}
.mold__baixar:hover:not(:disabled){ background:var(--am-cl); }
.mold__baixar:disabled{ opacity:.45; cursor:not-allowed; }

.mold__nota{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:2px 0 0;
  font-size:var(--t-xs); line-height:1.5; text-align:center;
  color:var(--tinta-2);
}
.mold__nota svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:var(--vd); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ═══════ IMPRESSÃO ═══════ */
@media print{
  .topo,.zap-fixo,.hero__acoes,.burger{ display:none !important; }
  body{ color:#000; }
  .sec--az,.sec--vd,.hero{ background:#fff !important; color:#000 !important; }
}