/* ---------- A escala: uma dobra por tela (no computador) ---------- */
/* O pedido dele (13/10): tudo o que é de uma dobra cabe nela, e nenhuma dobra vaza para a outra.
   No computador (a partir de 1001 px de largura e 600 de altura) cada dobra ocupa a tela inteira e o conteúdo se centra nela;
   os tamanhos acompanham a ALTURA da tela (vh), não só a largura, e o desenho do fluxo do topo e as cenas da dobra 3 encolhem pela
   escala --k (calculada no <head>: 1 quando a altura sobra, até .6 nas telas baixas).
   As dobras que vêm antes de uma curva (2, 4 e 8) guardam embaixo o espaço da curva que entra por cima delas. */
@media (min-width:1001px) and (min-height:600px){
  :root{--livre-topo:clamp(96px,12.5vh,124px);--livre-pe:clamp(32px,5.5vh,72px);--curva:64px}
  /* sem o encaixe da rolagem: ele puxava de volta quem rolava pouco (13/10); o empilhamento das dobras (o motion.css) dá o dobra a dobra */

  .sec{min-height:100svh;padding-top:var(--livre-topo);padding-bottom:var(--livre-pe)}
  .como,.clientes,.fecho{margin-top:calc(var(--curva) * -1);border-radius:50% 50% 0 0 / var(--curva) var(--curva) 0 0}
  .sec h2{font-size:clamp(30px,min(4.4vw,6.4vh),64px)}

  /* 1 · o topo */
  .dobra{min-height:100svh;padding-top:var(--livre-topo);padding-bottom:clamp(14px,2.6vh,28px)}
  h1{margin-top:0;font-size:clamp(40px,min(6vw,9.2vh),96px)}
  h1 .l2{font-size:clamp(17px,min(1.9vw,2.9vh),28px)}
  .sub{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(15px,1.95vh,18px)}
  .fluxo{zoom:var(--k,1);margin-top:0}
  .medidor{margin-top:clamp(12px,2.2vh,26px);padding-top:clamp(12px,2vh,20px);row-gap:clamp(6px,1.3vh,16px)}
  .leitura b{font-size:clamp(26px,min(2.8vw,4.6vh),42px)}
  .economia p b{font-size:clamp(22px,3.2vh,30px)}
  .medidor .botao{min-height:clamp(44px,5.6vh,52px)}
  /* as 2 últimas linhas do simulador deixam o canto livre para o WhatsApp flutuante */
  .medidor__pe,.medidor__rodape{padding-right:clamp(56px,4.6vw,72px)}

  /* 2 · os estados */
  .estados{padding-bottom:calc(var(--livre-pe) + var(--curva));align-content:center}
  .estados__nota{margin-top:clamp(8px,1.6vh,16px)}
  .numeros{margin-top:clamp(14px,2.8vh,34px)}
  .numeros div{padding:clamp(10px,1.6vh,18px) 16px}
  .numeros dd{font-size:clamp(24px,min(2.6vw,4vh),38px)}
  .painel-uf{margin-top:clamp(10px,2vh,22px);padding:clamp(12px,2vh,22px) 22px}
  .mapa{max-height:calc(100svh - var(--livre-topo) - var(--livre-pe) - var(--curva) - clamp(176px,24vh,224px))}
  .faixas{margin-top:clamp(8px,1.4vh,18px);gap:6px}
  .faixa{padding:clamp(4px,.8vh,10px) 14px}
  .faixa__ufs button{min-height:clamp(30px,4vh,36px)}

  /* 3 · como funciona: as cenas encolhem pela mesma escala, e o fio dos passos acompanha */
  .como{display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--livre-topo) + 8px)}
  .cena{zoom:var(--k,1)}
  .passos{margin-top:clamp(18px,3.4vh,64px)}
  .passos::before,.passos::after{top:calc(var(--cena-h) * var(--k,1) + 2px)}
  .passo{padding-bottom:clamp(14px,2.4vh,26px)}
  .passo h3{margin-top:clamp(8px,1.4vh,16px)}
  .como__cab h2 span{font-size:clamp(16px,2.2vh,22px)}
  .como__pe{margin-top:clamp(14px,2.8vh,48px)}

  /* 4 · a conta */
  .conta-sec{padding-bottom:calc(var(--livre-pe) + var(--curva))}
  .conta-sec__texto p{margin-top:clamp(8px,1.6vh,16px)}
  .tira{padding:clamp(14px,2.2vh,22px) 24px}
  .fatura{margin-top:clamp(12px,2.2vh,22px)}
  .fatura__total{padding:clamp(14px,2vh,20px) 24px}
  .fatura__total b{font-size:clamp(34px,5vh,54px)}

  /* 5 · os clientes: nas telas largas, os 4 numa fileira só, com o desencontro em degraus */
  .clientes{display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--livre-topo) + 8px)}
  .citacoes{margin-top:clamp(18px,3.4vh,64px)}
  .citacao{padding:clamp(18px,2.6vh,36px);gap:clamp(14px,2.4vh,26px)}
  .citacao blockquote{font-size:clamp(18px,min(1.9vw,2.7vh),28px)}
  .clientes__pe{margin-top:clamp(16px,3vh,48px)}
}
@media (min-width:1200px) and (min-height:600px){
  .citacoes{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:28px}
  .citacao:nth-child(even){top:28px}
  .citacao blockquote{font-size:clamp(17px,min(1.45vw,2.5vh),24px)}
}
@media (min-width:1001px) and (min-height:600px){
  /* 6 · o grupo */
  .grupo{display:flex;flex-direction:column;justify-content:center}
  .grupo__cab,.grupo .arvore{width:100%}
  .fecho__corpo{width:100%}
  .grupo__apoio{margin-top:clamp(8px,1.4vh,16px)}
  .arvore{margin-top:clamp(12px,2.6vh,80px)}
  .arvore__mae{width:clamp(170px,min(24vw,27vh),320px);padding:clamp(8px,1.6vh,26px) 0}
  .arvore__ramos{height:clamp(40px,7vh,130px)}
  .empresa{min-height:clamp(110px,16vh,210px);padding:clamp(16px,2.6vh,30px) 24px}
  .empresa img{height:clamp(60px,10.5vh,124px)}

  /* 7 · seja parceiro: a placa ocupa a tela; embaixo, o espaço do arco */
  .parceiros__placa{min-height:100svh;padding-bottom:calc(var(--livre-pe) + var(--curva))}
  .parceiros h2{font-size:clamp(34px,min(4.8vw,7vh),72px)}
  .ganho{padding:clamp(12px,2.2vh,30px) 4px}
  .parceiros__texto .botao{margin-top:clamp(18px,3vh,32px)}

  /* 8 · perguntas: o título e o "ainda tem dúvidas?" numa faixa em cima, e as 8 perguntas em 2 colunas de 4 */
  .faq{grid-template-columns:1fr;row-gap:clamp(16px,3.2vh,44px);align-content:center;padding-bottom:calc(var(--livre-pe) + var(--curva))}
  .faq__lado{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
  .faq__lado > .sobre,.faq__lado > h2,.faq__apoio{grid-column:1}
  .faq__lado > .sobre{justify-self:start}
  .faq h2 br{display:none}
  .faq__apoio{margin-top:clamp(6px,1.2vh,16px)}
  .duvida{grid-column:2;grid-row:1 / span 3;margin-top:0;grid-template-columns:auto auto;column-gap:28px;row-gap:4px;align-items:center;padding:clamp(14px,2.2vh,24px) clamp(18px,2vw,26px)}
  .duvida b{grid-column:1;font-size:clamp(18px,2.4vh,22px)}
  .duvida p{grid-column:1}
  .duvida__mail{grid-column:1}
  .duvida .botao{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .perguntas{grid-template-columns:1fr 1fr;column-gap:clamp(12px,1.6vw,24px);align-items:start}
  .perguntas__col{gap:clamp(5px,.8vh,10px)}
  .pergunta summary{padding:clamp(10px,1.55vh,22px) 20px clamp(10px,1.55vh,22px) 22px}
  .pergunta h3{font-size:clamp(16px,min(1.4vw,2.2vh),20px)}
  .pergunta summary > i{width:clamp(30px,4.2vh,38px);height:clamp(30px,4.2vh,38px)}
  .pergunta__r{padding-bottom:clamp(14px,2.2vh,24px)}

  /* 9 · o fecho: o título no meio da tela, o horizonte no chão dela */
  /* o fecho e o rodapé dividem a última tela: o título no meio, o sol no horizonte e o chão (o rodapé) embaixo */
  .fecho{display:flex;flex-direction:column;min-height:calc(100svh - var(--rodape-altura,140px));padding-top:calc(var(--livre-topo) + var(--curva) * .5)}
  .fecho__corpo{margin-block:auto}
  .horizonte{margin-top:clamp(40px,8vh,120px)}
}

/* as telas baixas (um notebook de 1366x768 deixa cerca de 650 px para a página): menos ar em cima e embaixo, curvas mais rasas e títulos menores */
@media (min-width:1001px) and (min-height:600px) and (max-height:720px){
  :root{--livre-topo:86px;--livre-pe:22px;--curva:40px}
  .sec h2{font-size:clamp(28px,min(4.4vw,5.8vh),64px)}
  .numeros dd{font-size:24px}
  .painel-uf__nome{font-size:24px}
  .estados__nota,.conta-sec__texto p{font-size:15px}
  .tira{padding:10px 20px;gap:6px}
  .conta-sec__nota{margin-top:8px}
  .alterna button{min-height:40px}
  .fatura__total b{font-size:32px}
  .fatura__total{padding:12px 22px}
}