/* Camada do celular — carregada por ultimo em todas as paginas.
---------------------------------------------------------------------------
O desktop nao muda. Aqui so se encurta o que no telefone ocupa a tela inteira
sem necessidade: cards de 3 colunas viram 2 + 1 (ou 2x2), fotos e blocos de
texto encolhem, e o respiro entre as secoes cai de ~90px para ~45px.
A regra que guia cada escolha: no celular a pagina deve caber em menos
rolagem sem deixar de parecer a mesma pagina do desktop. Por isso o que muda
e a ocupacao de espaco — nunca a ordem de leitura, nunca o conteudo, nunca as
cores. Os pares de campo dos formularios, os botoes do hero e as grades de
card ja foram tratados nos arquivos de cada secao (cf7.css, styles.css,
audiences.css, intelligence.css, howto.css, franchise.css, editorial.css);
aqui ficam os blocos que ainda ocupavam a tela inteira.
Dois seletores usam !important de proposito: .modelo-card e .solar-compare
trazem padding, tamanho de fonte e altura de foto em style="" no proprio
HTML — sem o !important nenhuma regra daqui alcança esses cards. */
/* =========================================================================
1. Ritmo geral — o respiro entre as secoes
========================================================================= */
@media(max-width:720px){
/* Desktop usa 76px..120px de padding vertical por secao. No telefone isso
vira meia tela de rolagem sem conteudo; 45px ja separa bem. */
.intro{padding-block:40px 44px}
.knowledge{padding-block:44px}
.network{padding-block:44px 50px;gap:22px}
.charging{padding-block:0 44px;gap:10px}
.closing{padding:44px 0}
.station-section{padding-block:0 40px}
.about{padding-block:38px 44px}
.section-heading{margin-bottom:24px}
.section-heading>p{margin-top:16px;font-size:15px}
.section-heading h2{font-size:26px}
}
/* =========================================================================
2. Home — journeys (recarga / franquia)
========================================================================= */
@media(max-width:720px){
.journeys{gap:14px}
.driver-content,.business{padding:22px 20px}
.driver .icon,.business>.icon{
width:24px;height:24px;padding:9px;border-radius:12px;margin-bottom:15px;
}
.journeys .eyebrow{font-size:10px;letter-spacing:1.6px}
.journeys h3{font-size:22px;line-height:1.18;margin:9px 0 11px}
.driver p:not(.eyebrow),.business>p:not(.eyebrow){
font-size:14px;line-height:1.5;margin-bottom:16px;
}
.business>p:not(.eyebrow){margin-bottom:14px}
.business .button{font-size:13.5px;padding:12px 18px;min-height:44px}
}
/* =========================================================================
3. Home — rede: foto menor e etapas mais compactas
========================================================================= */
@media(max-width:720px){
.network-visual{padding:10px 10px 10px 0}
.network-visual>img{height:290px;border-radius:16% 6% 20% 6%}
.network-stamp{left:14px;bottom:22px;font-size:18px}
.network-copy h2{font-size:26px;margin:12px 0 14px}
.network-copy>p:not(.eyebrow){font-size:14.5px}
.project-sequence{gap:8px;margin:18px 0}
.sequence-step{padding:12px 11px;gap:11px;border-radius:13px}
.sequence-number{flex-basis:28px;height:28px;font-size:13px}
.sequence-copy strong{font-size:16px;margin-bottom:3px}
.sequence-copy>span{font-size:13px;line-height:1.45}
.sequence-progress{left:50px}
}
/* =========================================================================
4. Home — suporte (as 3 frentes)
========================================================================= */
@media(max-width:720px){
/* Continua em uma coluna: os paragrafos tem ~110 caracteres e em meia
largura passariam de seis linhas, ficando mais altos que em coluna cheia.
O que encolhe e o miolo — icone, titulo e entrelinha. */
.benefits{gap:0;margin-top:24px}
.benefits article{padding:16px!important;border-radius:15px}
.benefits article+article{border-top:0;margin-top:10px;padding:16px!important}
.benefits .icon{
width:32px;height:32px;padding:11px;border-radius:13px;margin-bottom:13px;
}
.benefits h3{font-size:17px;margin-bottom:7px}
.benefits p{font-size:13.5px;line-height:1.5}
}
/* =========================================================================
5. Home — mapa
========================================================================= */
@media(max-width:720px){
/* Os tres pontos viram uma grade de dois. A coluna e estreita demais para a
linha inteira, mas cabe cidade + bairro + horario em tres linhas curtas —
e a lista deixa de ocupar um terco da secao. */
.station-layout{margin-top:18px}
.station-sidebar{padding:16px 14px}
.station-sidebar label{font-size:12px;margin-bottom:7px}
.station-sidebar input{padding:11px;margin-bottom:12px}
.station-sidebar #station-list{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.station-item{
width:100%;padding:10px 9px;gap:8px;align-items:flex-start;
display:grid;grid-template-columns:20px 1fr;
}
.station-item .icon{width:18px;height:18px;margin-top:1px}
.station-item strong{font-size:13.5px;line-height:1.2}
.station-item small{font-size:10.5px;line-height:1.35;display:block}
.station-item em{font-size:9.5px;letter-spacing:.2px;margin-top:3px}
.map-reset{margin:12px 8px 0;font-size:11.5px}
#station-map{height:290px}
.station-info{min-height:0;padding:14px 2px}
.station-layout .map-badge{font-size:10.5px;padding:7px 11px;right:8px;top:8px}
}
/* =========================================================================
6. Home — encerramento
========================================================================= */
@media(max-width:720px){
.charge-sculpture{height:150px;margin-bottom:14px}
.closing .icon{margin-bottom:12px}
.closing h2{margin:12px auto 18px}
}
/* =========================================================================
7. Artigos — a lista da home ja vira linha com miniatura (editorial.css).
Aqui so o respiro entre os cartoes.
========================================================================= */
@media(max-width:720px){
.journal{gap:16px}
.journal .section-heading{margin-bottom:20px}
}
/* =========================================================================
8. /franquia/ — ritmo das secoes
========================================================================= */
@media(max-width:720px){
.oportunidade{padding-block:44px 50px}
.oportunidade .wrap{gap:32px}
.oportunidade-head{gap:11px}
.oportunidade-head p{font-size:15px}
.modelo-detalhes{padding:40px 0}
.modelo-detalhes .wrap{gap:32px}
.modelo-detalhes-head h2{font-size:22px}
.modelo-detalhes-head p{font-size:15px}
.problema{padding-block:46px 52px}
.produto-head h2,.numeros-head h2{font-size:23px}
.etapas-head{margin-bottom:22px}
.form-section{padding:46px 0 16px}
.form-section .wrap{gap:28px}
.form-intro h2{font-size:23px}
.form-intro p{font-size:14.5px}
.modelo-oferta-card{padding:24px 18px 22px}
.modelo-oferta-value{font-size:30px}
.modelo-stats{gap:9px}
.modelo-stat{padding:15px 14px}
.modelo-stat strong{font-size:19px}
}
/* =========================================================================
9. /franquia/ — os tres modelos
========================================================================= */
@media(max-width:720px){
/* Ficam empilhados de proposito: cada card traz foto, quatro especificacoes
e o investimento. Em meia largura a ficha nao caberia sem partir o preco
em duas linhas. O que encolhe e a moldura — foto e texto menores. */
.modelos-grid{gap:13px!important;margin-top:18px!important}
/* o style="" no article traz border-radius:24px inline, que o CSS nao alcança */
.modelo-card{border-radius:18px!important}
.modelo-card .modelo-img{height:128px!important}
.modelo-card>div:last-child{padding:15px 16px 17px!important;gap:10px!important}
.modelo-card .eyebrow{font-size:10px!important;letter-spacing:2.2px!important}
.modelo-card h3{font-size:19px!important}
.modelo-card .modelo-spec{gap:7px!important}
.modelo-chip{font-size:11.5px!important;padding:5px 8px!important}
.modelo-chip .icon,.modelo-chip svg.icon{width:13px!important;height:13px!important}
.modelo-card p{font-size:13px!important;line-height:1.45!important}
.modelo-card hr{margin:12px 0 0!important}
/* O preco e o que o visitante procura: continua em destaque, so que menor. */
.modelo-card strong[style*="clamp"]{font-size:24px!important}
.modelo-card span[style*="letter-spacing:2px"]{font-size:10px!important;letter-spacing:1.8px!important}
}
/* =========================================================================
10. /franquia/ — comparativo de energia
========================================================================= */
@media(max-width:720px){
.solar-compare{gap:12px!important;margin-top:22px!important}
.solar-compare>div{padding:20px 17px!important}
.solar-compare>div>span{font-size:10px!important;letter-spacing:1.8px!important}
.solar-compare>div>p[style*="36px"]{font-size:24px!important;margin:10px 0 0!important}
.solar-compare h3{font-size:18px!important;margin:4px 0 10px!important}
.solar-compare>div>p[style*="15px"]{font-size:13.5px!important;line-height:1.5!important}
.solar-compare hr{margin:14px 0!important}
}
/* =========================================================================
11. Telas muito estreitas (ate 380px)
========================================================================= */
@media(max-width:380px){
.journeys h3{font-size:21px}
.station-item{padding:9px 7px;gap:6px}
.station-item small{font-size:10px}
.modelo-chip{font-size:11px!important;padding:4px 6px!important}
}
/* =========================================================================
12. Home e /franquia/ — a foto de "sobre"
========================================================================= */
@media(max-width:720px){
/* A colagem e uma foto grande e duas menores; em 340px de altura ela ja
ocupa uma tela inteira. Os dois blocos encolhem, o arranjo nao. */
.about-collage{grid-template-rows:140px 124px;gap:10px}
.about-brand{width:96px;height:96px;border-width:5px}
.about-brand img{width:74px}
.about-heading h2{font-size:25px}
/* O franchise.css usa .about-heading p.about-lead, que e mais especifico que
um .about-lead solto aqui — sem repetir o caminho, esta regra nao valia. */
.about-heading p.about-lead{font-size:15px;line-height:1.5}
.about-heading>p:not(.about-lead){font-size:14.5px;line-height:1.55}
.about .button.dark{padding:12px 20px;font-size:14px;min-height:44px}
}
/* =========================================================================
13. /franquia/ — diferenciais, produto e numeros
========================================================================= */
@media(max-width:720px){
/* O numero do card deixa de ser um algarismo solto no alto e vira uma linha
antes do icone: e a mesma informacao, sem 38px de recuo em cada linha da
grade. */
.dif-card{padding:12px 12px 13px;gap:6px}
.dif-no{position:static;display:block;margin-bottom:6px;font-size:20px;letter-spacing:1px}
.dif-card-body{margin-top:0}
.dif-icon{width:36px;height:36px;border-radius:11px}
.dif-icon .icon{width:18px;height:18px}
.dif-card h3{font-size:15px;line-height:1.25;margin-bottom:5px}
.dif-card p{font-size:12.5px;line-height:1.45}
.dif-list{gap:9px}
.produto-card{padding:14px 12px 13px}
.produto-card .icon{width:22px;height:22px;margin-bottom:9px}
.produto-card h3{font-size:14.5px;margin-bottom:5px;line-height:1.25}
.produto-card p{font-size:12px;line-height:1.45}
.produto-grid{gap:9px}
.num-card{padding:12px 8px 13px;gap:4px}
.num-card .dif-icon{width:30px!important;height:30px!important;border-radius:10px!important}
.num-card .dif-icon .icon{width:16px;height:16px}
.num-card strong{font-size:16px}
.num-card>span{font-size:12px;line-height:1.4}
.num-card:last-child{grid-column:1/-1;padding:12px 14px}
.numeros-grid{gap:9px}
}
/* =========================================================================
14. /franquia/ — cabecalhos de secao
========================================================================= */
@media(max-width:720px){
.diferenciais-head,.etapas-head,.numeros-head,.produto-head,.form-intro{gap:9px}
.diferenciais-head .eyebrow,.etapas-head .eyebrow,.numeros-head .eyebrow,
.form-intro .eyebrow{font-size:10px;letter-spacing:2.2px}
.diferenciais-head h2{font-size:23px}
.diferenciais-head p{font-size:14px;line-height:1.5}
.etapas-head h2{font-size:23px}
.etapas-head p{font-size:14px;line-height:1.5}
.numeros-head h2{font-size:23px}
.numeros-head p{font-size:14px;line-height:1.5}
.produto-head h2{font-size:23px}
.produto-head p{font-size:14px;line-height:1.5}
.form-intro h2{font-size:22px}
.form-intro>p:not(.eyebrow){font-size:14px;line-height:1.5}
.form-intro>div{font-size:13px;line-height:1.5}
}
/* =========================================================================
15. Correcoes que so apareceram no site publicado
---------------------------------------------------------------------------
Tudo aqui foi achado medindo a pagina no ar, em 320 a 430px, e nao no
preview offline: especificidade perdida, marcas que vazavam da tela e
espacamento que so aparece no aparelho. */
/* --- Home: a linha divisoria virava 97px de vazio --------------------- */
@media(max-width:720px){
/* 48px acima e 48px abaixo de um
de 1px sao quase meia tela de rolagem
sem nada para ler. */
.section-divider{margin:24px auto;width:calc(100% - 40px)}
}
/* --- /franquia/ a barra branca na direita ------------------------------
O .about:before sangra 20px para fora (inset-inline:-20px) e, como nada
recorta, o documento fica 20px mais largo que a tela.
O corte fica no body, e nao na secao: e o gradiente que da a cor verde de
fundo e ele precisa poder pintar ate a borda da tela. Cortar dentro da
secao tirava a cor — foi o que aconteceu na 1.3.0. No body o desenho e o
de sempre, so que sem barra de rolagem. */
html{overflow-x:clip}
body{overflow-x:clip}
/* --- /franquia/ hero: 230px de nada embaixo dos botoes ----------------- */
@media(max-width:720px){
/* .hero{min-height:620px} e do desktop. Numa tela de 645px de altura isso
sobrava como paisagem vazia. */
.hero{min-height:auto}
/* min-width:0 impede que o texto longo do botao estoure a coluna de 50%. */
.hero .actions{grid-template-columns:1fr 1fr}
.hero .actions>*{min-width:0}
.hero .actions .button{padding:12px 8px;font-size:13px;gap:6px}
}
/* --- /franquia/ colagem do "Quem somos": a quarta celula ficava vazia --
O !important de .about-photo vencia o .photo-station e a foto da esquerda
so ocupava uma linha, sobrando um buraco no canto inferior direito. */
@media(max-width:720px){
.about-collage{grid-template-columns:1fr 1fr;grid-template-rows:132px 116px;gap:8px}
.about-photo{grid-row:auto;grid-column:auto}
.photo-station{grid-column:1;grid-row:1/3}
.photo-car{grid-column:2;grid-row:1}
.photo-charge{grid-column:2;grid-row:2}
.about-brand{width:84px;height:84px;border-width:5px}
.about-brand img{width:64px}
}
/* --- Titulos centralizados: balance evita a linha orfa -----------------
"Faltam eletropostos no Brasil. E a demanda so cresce." deixava o "E"
sozinho no fim da primeira linha. Com balance as duas linhas ficam do
mesmo tamanho, e um texto centralizado passa a parecer centralizado. */
@media(max-width:720px){
.charging h2,.problema h2,.oportunidade-head h2,.numeros-head h2,
.diferenciais-head h2,.etapas-head h2,.modelo-detalhes-head h2,
.form-intro h2,.closing h2,.howto-head h2,.ig-list h3,.audience h3,
.audiences h2,.intelligence h2,.testimonials h2,.journal h3{
text-wrap:balance;
}
}
/* --- Home: setas dos depoimentos --------------------------------------
Na grade de 28px + faixa + 28px as setas encostavam no cartao e em 320px a
faixa ficava com 208px. No celular elas vao para baixo do cartao, e o
cartao ganha a largura toda. */
@media(max-width:720px){
/* As setas ficam ABAIXO do cartao, mas juntas e centralizadas. Antes
ficavam nas pontas opostas, a 285px uma da outra, o que parecia quebrado.
A coluna do meio e a do cartao inteiro; as duas colunas da direita, com
largura do botao, guardam o par de setas no centro. */
.testimonials-carousel{grid-template-columns:1fr auto auto 1fr;gap:10px}
.testimonials-track{grid-column:1/-1;grid-row:1}
.testimonial-prev,.testimonial-next{grid-row:2;width:36px;height:36px;font-size:21px}
/* as duas colunas 1fr das pontas sao iguais, entao o par fica no meio */
.testimonial-prev{grid-column:2}
.testimonial-next{grid-column:3}
}
/* --- Home: o "Guia de recarga" solto acima do titulo ------------------ */
@media(max-width:720px){
/* O bloco ficava encostado na esquerda enquanto o titulo em volta
(depoimentos, inteligencia, etapas da franquia) e centralizado. Centraliza
o conjunto inteiro, chip e botao incluidos. */
.charging .faq-intro{text-align:center}
.charging .faq-intro .button{margin-inline:auto}
/* Sem esta margem o chip encosta no topo do cartao escuro: no desktop sao
55px, no celular tinham ficado 0. */
.charging{padding-block:44px 44px}
.faq-signal{display:inline-flex}
.charging h2{margin-top:14px}
.faq-signal{font-size:11px;letter-spacing:1.3px}
.faq-signal .icon{width:22px;height:22px}
}
/* --- /franquia/ ritmo de texto no "Quem somos" ------------------------- */
@media(max-width:720px){
.about-inner{gap:26px}
.about-heading>p{margin-bottom:12px}
.about-heading>.button.dark{margin-top:4px}
}
/* --- Grade com 5 itens: 2 + 2 e o ultimo sozinho no meio ----------------
Sem isto o quinto cartao ocupa a coluna da esquerda e sobra um buraco na
direita. Aqui ele atravessa a linha e se centraliza, com a mesma largura
dos outros quatro. Vale para .problema-grid, .numeros-grid e .etapas-steps:
os tres tem cinco itens. */
@media(max-width:720px){
/* O !important e necessario: o franchise.css usa .problema-card:nth-child(5)
e .num-card:nth-child(5) para acomodar cinco cartoes em seis colunas no
desktop, e reseta com !important no celular. Sem repetir a forca aqui, o
quinto cartao volta para a coluna da esquerda. */
.problema-card:last-child,
.num-card:last-child,
.etapas-steps li:last-child{
grid-column:1/-1!important;justify-self:center;width:calc(50% - 5px);
}
/* o ultimo .num-card tinha padding maior por ocupar a linha inteira */
.num-card:last-child{padding:12px 8px 13px}
/* .problema-grid e um e nunca teve o padding de lista zerado, o que
empurrava a coluna da esquerda 40px para dentro e descentrava a grade
inteira. Mesma correcao ja aplicada no .dif-list. */
.problema-grid{padding:0}
}