/* ===========================================================================
/relatorio-summit — landing de captação do Relatório Energy Hub Summit.
Carrega DEPOIS de /blog/_style.css, que é a base compartilhada das páginas
internas (tokens, header, footer, hero escuro, tipografia). Aqui entra só o
que esta página tem e as outras não:
· capa simulada do relatório (até existir a capa real em imagem)
· faixa de números do Summit
· cartão de formulário e o estado liberado (visualizador + download)
Não duplicar nada que já exista em _style.css.
Paleta e fontes seguem o guia de marca: teal + Montserrat/Open Sans, laranja
#E56517 EXCLUSIVO do "by SDP" no logotipo (que aqui é PNG, não CSS).
=========================================================================== */
/* O atributo hidden esconde por display:none, que é só a regra padrão do
navegador: qualquer display declarado aqui (grid/flex no cartão liberado e no
visualizador) a venceria e o estado liberado apareceria junto do formulário.
Esta linha devolve a palavra final ao hidden. */
[hidden]{display:none !important}
/* Logotipo real no cabeçalho e no rodapé, como em /news. */
.site-header .logo img{height:32px;width:auto;display:block}
.site-footer .logo img{height:34px;width:auto;display:block}
@media (max-width:520px){ .site-header .logo img{height:26px} }
/* ---------- Botões ---------- */
/* Mesmo botão da home (teal 500, raio 8, Montserrat 600). O shell das páginas
internas não tinha botão nenhum — só chips e links. */
.btn{
display:inline-block;background:var(--teal-500);color:var(--white);
font-family:"Montserrat",sans-serif;font-weight:600;font-size:16px;
padding:15px 30px;border-radius:8px;text-decoration:none;border:none;
cursor:pointer;transition:background .2s ease,box-shadow .2s ease;text-align:center;
}
.btn:hover{background:var(--teal-700);color:var(--white)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.full{display:block;width:100%}
.btn.ghost{
background:transparent;border:2px solid var(--teal-700);color:var(--teal-800);
padding:13px 26px;
}
.btn.ghost:hover{background:rgba(10,110,125,.07);color:var(--teal-800)}
/* ---------- HERO em duas colunas (texto + capa) ---------- */
/* O .hero do shell centraliza um bloco de 820px; aqui a largura é a do site e
a capa ocupa a segunda coluna. */
.hero.lp-hero .wrap{max-width:var(--maxw);padding:64px 20px 60px}
.lp-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:900px){
.lp-hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}
}
.lp-hero .selo{
display:inline-flex;align-items:center;gap:8px;margin-top:22px;
font-family:"Montserrat",sans-serif;font-weight:600;font-size:13px;
color:#EAF7F9;background:rgba(255,255,255,.1);border:1px solid rgba(130,210,222,.45);
border-radius:999px;padding:8px 16px;
}
.lp-hero .selo svg{flex:none;stroke:var(--teal-200)}
.lp-cta-curto{display:block;margin-top:22px;max-width:320px}
@media (min-width:940px){ .lp-cta-curto{display:none} }
/* Capa simulada: até existir a capa real do relatório, a "capa" é desenhada
com os elementos da marca — símbolo, teal e Montserrat. Para trocar por uma
imagem, substituir o conteúdo de .lp-capa por
(a moldura 1/1.414 e a sombra continuam valendo). */
.lp-capa{
aspect-ratio:1/1.414;max-width:360px;margin:0 auto;border-radius:10px;
background:linear-gradient(160deg,#FFFFFF 0%,#EAF7F9 100%);
box-shadow:0 18px 50px rgba(4,4,7,.35),0 2px 0 rgba(255,255,255,.4) inset;
padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;
}
.lp-capa::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
background:linear-gradient(90deg,var(--teal-700),var(--teal-200));
}
.lp-capa img{height:30px;width:auto}
.lp-capa .capa-tit{
font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);
line-height:1.2;color:var(--teal-900);
}
.lp-capa .capa-sub{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--teal-700);margin-bottom:10px;display:block;
}
.lp-capa .capa-pe{font-size:12.5px;color:var(--ink-muted);line-height:1.45}
.lp-capa .capa-pe b{display:block;font-family:"Montserrat",sans-serif;color:var(--teal-800);font-size:13px}
/* ---------- Faixa de números ---------- */
.lp-stats{background:var(--white);border-bottom:1px solid rgba(10,110,125,.12)}
.lp-stats .wrap{padding:30px 20px}
.lp-stats .lbl{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-muted);display:flex;align-items:center;gap:10px;margin:0 0 18px;
}
.lp-stats .lbl::before{content:"";width:22px;height:3px;background:var(--teal-500);border-radius:2px}
.lp-stats ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .lp-stats ul{grid-template-columns:repeat(4,1fr)} }
.lp-stats li{display:flex;flex-direction:column;gap:2px}
.lp-stats b{font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px);color:var(--teal-800);line-height:1.1}
.lp-stats span{font-size:13.5px;color:var(--ink-soft)}
/* ---------- Corpo: conteúdo + formulário ---------- */
.lp-body{padding:56px 0 64px}
.lp-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media (min-width:940px){
.lp-grid{grid-template-columns:1.08fr .92fr;gap:52px}
/* O cartão acompanha a leitura: em telas altas o formulário não sai de vista.
top = header (64px) + folga. */
.lp-aside{position:sticky;top:88px}
}
.lp-intro h2{font-weight:700;font-size:clamp(23px,3.2vw,30px);color:var(--ink);margin-bottom:16px}
.lp-intro p{font-size:16.5px;color:var(--ink-soft);margin:0 0 18px}
.lp-intro p strong{color:var(--ink)}
.lp-check{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.lp-check li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:15.5px;color:var(--ink-soft)}
.lp-check li strong{display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:16px;color:var(--ink);margin-bottom:2px}
.lp-check .mk{
width:26px;height:26px;border-radius:50%;background:var(--white);border:1.5px solid var(--teal-200);
display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.lp-check .mk svg{width:14px;height:14px;stroke:var(--teal-700);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Cartão do formulário ---------- */
.form-card{
background:var(--white);border:1px solid rgba(10,110,125,.16);border-radius:var(--radius);
box-shadow:var(--shadow);padding:28px 26px 26px;
}
.form-card .eyebrow{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--teal-800);display:flex;align-items:center;gap:9px;margin-bottom:12px;
}
.form-card .eyebrow::before{content:"";width:16px;height:3px;background:var(--teal-500);border-radius:2px}
.form-card h2{font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.form-card .sub{font-size:14.5px;color:var(--ink-muted);margin:0 0 22px}
.form{display:grid;gap:14px}
.fld{display:block}
.fld span{
display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:13px;
color:var(--ink-soft);margin-bottom:6px;
}
.fld span i{font-style:normal;font-weight:400;color:var(--ink-muted)}
.fld input,.fld select{
width:100%;font-family:"Open Sans",sans-serif;font-size:15px;color:var(--ink);
background:var(--white);border:1.5px solid rgba(10,110,125,.26);border-radius:8px;
padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease;
}
.fld select{
appearance:none;
/* Seta em SVG embutido: evita um request e o select nativo cinza do Windows. */
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:42px;
}
.fld input:focus,.fld select:focus{
outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(26,157,177,.18);
}
.fld input:disabled,.fld select:disabled{background:#F6FAFB;color:var(--ink-muted)}
/* Campo-isca: fora do fluxo visual e do tabindex. Robô preenche, gente não vê. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-nota{font-size:12.5px;color:var(--ink-muted);margin:4px 0 0;line-height:1.5}
.form-nota a{color:var(--teal-800);font-weight:600}
.form-erro{
margin:0;background:#FDECEC;border:1px solid #F3BDBD;color:#8E2525;border-radius:8px;
padding:11px 14px;font-size:14px;
}
.form-aviso{
background:var(--bg-light);border:1px solid rgba(10,110,125,.2);border-radius:8px;
padding:14px 16px;font-size:14px;color:var(--ink-soft);
}
.form-aviso p{margin:0 0 10px}
/* ---------- Estado liberado: visualizador + download ---------- */
.gate{display:grid;gap:18px}
.gate-ok{display:flex;gap:12px;align-items:flex-start}
.gate-ok svg{flex:none;width:30px;height:30px;stroke:var(--teal-700);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gate-ok h2{font-weight:700;font-size:20px;color:var(--ink);margin-bottom:4px}
/* O script move o foco para este título ao liberar o relatório, para o leitor
de tela anunciar a mudança. O contorno padrão do navegador em volta de um
título não-interativo só confunde quem está de mouse — o foco continua lá. */
.gate-ok h2:focus{outline:none}
.gate-ok p{margin:0;font-size:14.5px;color:var(--ink-muted)}
.gate-acoes{display:flex;flex-wrap:wrap;gap:12px}
.gate-acoes .btn{flex:1 1 auto}
/* O visualizador embutido só aparece onde ele realmente funciona: no celular o
PDF em
(a moldura 1/1.414 e a sombra continuam valendo). */
.lp-capa{
aspect-ratio:1/1.414;max-width:360px;margin:0 auto;border-radius:10px;
background:linear-gradient(160deg,#FFFFFF 0%,#EAF7F9 100%);
box-shadow:0 18px 50px rgba(4,4,7,.35),0 2px 0 rgba(255,255,255,.4) inset;
padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;
}
.lp-capa::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
background:linear-gradient(90deg,var(--teal-700),var(--teal-200));
}
.lp-capa img{height:30px;width:auto}
.lp-capa .capa-tit{
font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);
line-height:1.2;color:var(--teal-900);
}
.lp-capa .capa-sub{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--teal-700);margin-bottom:10px;display:block;
}
.lp-capa .capa-pe{font-size:12.5px;color:var(--ink-muted);line-height:1.45}
.lp-capa .capa-pe b{display:block;font-family:"Montserrat",sans-serif;color:var(--teal-800);font-size:13px}
/* ---------- Faixa de números ---------- */
.lp-stats{background:var(--white);border-bottom:1px solid rgba(10,110,125,.12)}
.lp-stats .wrap{padding:30px 20px}
.lp-stats .lbl{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-muted);display:flex;align-items:center;gap:10px;margin:0 0 18px;
}
.lp-stats .lbl::before{content:"";width:22px;height:3px;background:var(--teal-500);border-radius:2px}
.lp-stats ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .lp-stats ul{grid-template-columns:repeat(4,1fr)} }
.lp-stats li{display:flex;flex-direction:column;gap:2px}
.lp-stats b{font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px);color:var(--teal-800);line-height:1.1}
.lp-stats span{font-size:13.5px;color:var(--ink-soft)}
/* ---------- Corpo: conteúdo + formulário ---------- */
.lp-body{padding:56px 0 64px}
.lp-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media (min-width:940px){
.lp-grid{grid-template-columns:1.08fr .92fr;gap:52px}
/* O cartão acompanha a leitura: em telas altas o formulário não sai de vista.
top = header (64px) + folga. */
.lp-aside{position:sticky;top:88px}
}
.lp-intro h2{font-weight:700;font-size:clamp(23px,3.2vw,30px);color:var(--ink);margin-bottom:16px}
.lp-intro p{font-size:16.5px;color:var(--ink-soft);margin:0 0 18px}
.lp-intro p strong{color:var(--ink)}
.lp-check{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.lp-check li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:15.5px;color:var(--ink-soft)}
.lp-check li strong{display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:16px;color:var(--ink);margin-bottom:2px}
.lp-check .mk{
width:26px;height:26px;border-radius:50%;background:var(--white);border:1.5px solid var(--teal-200);
display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.lp-check .mk svg{width:14px;height:14px;stroke:var(--teal-700);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Cartão do formulário ---------- */
.form-card{
background:var(--white);border:1px solid rgba(10,110,125,.16);border-radius:var(--radius);
box-shadow:var(--shadow);padding:28px 26px 26px;
}
.form-card .eyebrow{
font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--teal-800);display:flex;align-items:center;gap:9px;margin-bottom:12px;
}
.form-card .eyebrow::before{content:"";width:16px;height:3px;background:var(--teal-500);border-radius:2px}
.form-card h2{font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.form-card .sub{font-size:14.5px;color:var(--ink-muted);margin:0 0 22px}
.form{display:grid;gap:14px}
.fld{display:block}
.fld span{
display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:13px;
color:var(--ink-soft);margin-bottom:6px;
}
.fld span i{font-style:normal;font-weight:400;color:var(--ink-muted)}
.fld input,.fld select{
width:100%;font-family:"Open Sans",sans-serif;font-size:15px;color:var(--ink);
background:var(--white);border:1.5px solid rgba(10,110,125,.26);border-radius:8px;
padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease;
}
.fld select{
appearance:none;
/* Seta em SVG embutido: evita um request e o select nativo cinza do Windows. */
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:42px;
}
.fld input:focus,.fld select:focus{
outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(26,157,177,.18);
}
.fld input:disabled,.fld select:disabled{background:#F6FAFB;color:var(--ink-muted)}
/* Campo-isca: fora do fluxo visual e do tabindex. Robô preenche, gente não vê. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-nota{font-size:12.5px;color:var(--ink-muted);margin:4px 0 0;line-height:1.5}
.form-nota a{color:var(--teal-800);font-weight:600}
.form-erro{
margin:0;background:#FDECEC;border:1px solid #F3BDBD;color:#8E2525;border-radius:8px;
padding:11px 14px;font-size:14px;
}
.form-aviso{
background:var(--bg-light);border:1px solid rgba(10,110,125,.2);border-radius:8px;
padding:14px 16px;font-size:14px;color:var(--ink-soft);
}
.form-aviso p{margin:0 0 10px}
/* ---------- Estado liberado: visualizador + download ---------- */
.gate{display:grid;gap:18px}
.gate-ok{display:flex;gap:12px;align-items:flex-start}
.gate-ok svg{flex:none;width:30px;height:30px;stroke:var(--teal-700);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gate-ok h2{font-weight:700;font-size:20px;color:var(--ink);margin-bottom:4px}
/* O script move o foco para este título ao liberar o relatório, para o leitor
de tela anunciar a mudança. O contorno padrão do navegador em volta de um
título não-interativo só confunde quem está de mouse — o foco continua lá. */
.gate-ok h2:focus{outline:none}
.gate-ok p{margin:0;font-size:14.5px;color:var(--ink-muted)}
.gate-acoes{display:flex;flex-wrap:wrap;gap:12px}
.gate-acoes .btn{flex:1 1 auto}
/* O visualizador embutido só aparece onde ele realmente funciona: no celular o
PDF em