/* ===========================================================================
   ESM — página interna "Economia GLP × Elétrica + Telemetria"
   Carrega DEPOIS de esm.css: aproveita as variáveis, os botões, o menu
   lateral e o botão flutuante de WhatsApp que já estão lá.

   Único acréscimo de cor: --verde, um verde escuro dessaturado usado só na
   barra lateral dos cenários favoráveis (a paleta da marca não tem verde e o
   comparativo precisa separar cenário bom de cenário ruim sem gritar).
   =========================================================================== */

:root{
  --verde:#3F5B45;
  --wrap-eco:1280px;
}

.eco-wrap{max-width:var(--wrap-eco);margin:0 auto;padding:0 24px}

/* =========================================================
   CABEÇALHO FIXO
   ========================================================= */
.topo{
  position:sticky;top:0;z-index:40;
  background:var(--claro);border-bottom:1px solid var(--cinza);
  height:72px;display:flex;align-items:center;
}
.topo-grid{
  max-width:var(--wrap-eco);margin:0 auto;width:100%;padding:0 24px;
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;
}
.topo-menu{
  width:44px;height:44px;display:grid;place-items:center;gap:5px;
  background:transparent;border:0;cursor:pointer;
}
.topo-menu span{display:block;width:26px;height:2px;background:var(--tinta);transition:.2s}
.topo-menu:hover span{background:var(--verm)}
.topo-logo{justify-self:center;display:block}
.topo-logo img{height:40px;width:auto}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px);text-align:center}
.hero-in{max-width:900px;margin:0 auto;padding:0 24px}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin:0}
.hero .hero-sub{
  font-family:var(--f-sub);font-weight:400;
  font-size:clamp(1.1rem,2.6vw,1.6rem);letter-spacing:.02em;line-height:1.35;
  margin:1.1rem 0 0;color:var(--tinta);
}
.hero-risco{width:80px;height:4px;background:var(--verm);margin:1.6rem auto 0}
.hero-seta{
  display:block;margin:2rem auto 0;width:26px;height:26px;fill:none;
  stroke:var(--verm);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  animation:eco-bounce 1.9s ease-in-out infinite;
}
@keyframes eco-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* =========================================================
   PARTE 1 E PARTE 2 LADO A LADO
   ========================================================= */
.partes{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;
  padding-bottom:clamp(40px,5vw,64px);
}
.parte{display:flex;flex-direction:column;gap:16px}
.selo{
  align-self:flex-start;
  font-family:var(--f-texto);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--verm);color:var(--claro);
  padding:.4rem 1rem;border-radius:999px;
}
.parte h2{font-size:clamp(1.5rem,2.8vw,2.1rem);text-align:left;margin:0}
.parte-intro{color:var(--tinta-2);font-size:16px;line-height:1.7;margin:0}
.parte-intro strong{color:var(--tinta);font-weight:700}
.parte-fecha{
  background:var(--bege);border:1px solid var(--cinza);border-left:5px solid var(--verm);
  padding:20px 22px;font-size:15px;line-height:1.7;color:var(--tinta-2);margin:4px 0 0;
}
.parte-fecha strong{color:var(--tinta);font-weight:700}

/* ---- cartões de dados ---- */
.card{
  position:relative;overflow:hidden;
  background:var(--claro);border:1px solid var(--cinza);border-radius:14px;
  box-shadow:0 2px 10px rgba(8,7,7,.06);
}
.card-cab{
  background:var(--bege);border-bottom:1px solid var(--cinza);
  padding:14px 18px;
}
.card-cab h3{
  font-family:var(--f-sub);font-weight:400;font-size:1.05rem;letter-spacing:.03em;
  line-height:1.3;text-transform:uppercase;margin:0;
}
.card-cab .card-sub{
  display:block;font-family:var(--f-texto);font-size:.78rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--tinta-2);margin-top:.2rem;
}
/* barra lateral: cenário favorável em verde discreto, desfavorável em rosa */
.card--bom{border-left:6px solid var(--verde)}
.card--ruim{border-left:6px solid var(--rosa)}
.card--heroi{border:2px solid var(--verm)}
.card--heroi .card-cab{background:var(--verm)}
.card--heroi .card-cab h3,.card--heroi .card-cab .card-sub{color:var(--claro)}

.card-corpo{padding:6px 18px 16px}
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dados{width:100%;border-collapse:collapse;font-size:15px}
table.dados caption{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
table.dados th,table.dados td{
  text-align:left;padding:.62rem .2rem;border-bottom:1px dashed var(--cinza);
  vertical-align:middle;
}
table.dados th{font-weight:400;color:var(--tinta-2)}
table.dados td{text-align:right;font-weight:700;white-space:nowrap}
table.dados tr:last-child th,table.dados tr:last-child td{border-bottom:0}
table.dados tr.total th{font-weight:700;color:var(--tinta)}
table.dados tr.total td{
  font-family:var(--f-sub);font-size:1.35rem;letter-spacing:.02em;color:var(--verm);
}
.card-nota{
  background:var(--creme);border-top:1px solid var(--cinza);
  padding:12px 18px;font-size:13.5px;line-height:1.6;color:var(--tinta-2);margin:0;
}
.card-nota strong{color:var(--tinta)}

/* número herói do card 1.8 */
.heroi-num{
  font-family:var(--f-sub);font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:.02em;
  line-height:1;color:var(--verm);margin:.4rem 0 .2rem;text-align:center;
}
.heroi-sub{text-align:center;font-size:14px;color:var(--tinta-2);margin:0 0 .3rem}

/* ---- seta de ligação entre dois cartões ---- */
.liga{display:flex;align-items:center;gap:14px;padding:2px 10px}
.liga svg{width:54px;height:60px;flex:0 0 auto;overflow:visible}
.liga path{
  fill:none;stroke:var(--verm);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200;
}
.liga.is-on path{transition:stroke-dashoffset .9s ease;stroke-dashoffset:0}
.liga-txt{
  font-family:var(--f-sub);font-size:1.15rem;letter-spacing:.03em;color:var(--verm);
  line-height:1.2;
}
.liga-txt small{display:block;font-family:var(--f-texto);font-size:.78rem;color:var(--tinta-2);letter-spacing:0}

/* ---- tabela comparativa do card 2.8 ---- */
table.confronto{width:100%;border-collapse:collapse;font-size:15px}
table.confronto caption{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
table.confronto th,table.confronto td{padding:.8rem .6rem;border-bottom:1px solid var(--cinza);text-align:right}
table.confronto thead th{
  background:var(--bege);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
table.confronto thead th:first-child,table.confronto tbody th{text-align:left}
table.confronto tbody th{font-weight:700}
table.confronto .col-eletrica{
  background:rgba(63,91,69,.07);
  font-family:var(--f-sub);font-size:1.2rem;letter-spacing:.02em;color:var(--verde);
}
table.confronto .col-glp{
  font-family:var(--f-sub);font-size:1.2rem;letter-spacing:.02em;color:var(--tinta-2);
}
table.confronto thead .col-eletrica{color:var(--verde);background:rgba(63,91,69,.12)}

/* =========================================================
   FAIXA DE RESULTADO
   ========================================================= */
.faixa{background:var(--verm);color:var(--claro);padding:clamp(38px,5vw,60px) 0}
.faixa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
.faixa-num{
  font-family:var(--f-sub);font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:.02em;
  line-height:1;margin:0;
}
.faixa-rot{font-size:14px;line-height:1.5;margin:.6rem 0 0;color:rgba(253,251,248,.92)}
.faixa-pe{
  font-size:13px;line-height:1.6;color:var(--creme);text-align:center;
  max-width:900px;margin:28px auto 0;
}
.nota-metodo{
  font-size:12px;line-height:1.6;color:var(--tinta-2);
  max-width:900px;margin:20px auto 0;text-align:center;
}

/* =========================================================
   TRANSIÇÃO
   ========================================================= */
.transicao{padding:96px 0;text-align:center}
.transicao-in{max-width:820px;margin:0 auto;padding:0 24px}
.transicao h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
.transicao p{font-size:1.05rem;color:var(--tinta-2);margin:1.2rem 0 0}
.transicao .risco-c{width:80px;height:4px;background:var(--verm);margin:1.8rem auto 0}

/* =========================================================
   TELEMETRIA
   ========================================================= */
.tele{background:var(--bege);padding:clamp(52px,7vw,88px) 0;border-top:1px solid var(--cinza)}
.tele h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:0}
.tele-sub{
  font-family:var(--f-sub);font-weight:400;font-size:clamp(1.05rem,2.2vw,1.45rem);
  letter-spacing:.02em;margin:.6rem 0 0;
}
.tele-texto{max-width:80ch;margin-top:1.6rem}
.tele-texto h3{font-size:1.4rem;margin:1.6rem 0 .5rem}
.tele-texto p{color:var(--tinta-2);font-size:16px;margin:0 0 1rem}
.tele-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.tele-card{
  background:var(--claro);border:1px solid var(--cinza);border-radius:14px;
  padding:26px 24px;box-shadow:0 2px 10px rgba(8,7,7,.06);
}
.tele-card svg{width:48px;height:48px;fill:none;stroke:var(--verm);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.tele-card h4{font-family:var(--f-titulo);font-weight:400;font-size:1.3rem;letter-spacing:.02em;margin:0 0 .5rem}
.tele-card p{color:var(--tinta-2);font-size:14.5px;margin:0}
.gancho{
  grid-column:1/-1;background:var(--creme);border:1px dashed var(--verm);
  padding:18px 22px;font-size:15px;color:var(--tinta-2);border-radius:14px;
}
.gancho strong{color:var(--tinta)}
.tele-baixar{display:flex;justify-content:center;margin-top:36px}
.btn-baixar{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--verm);color:var(--claro);
  font-family:var(--f-texto);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.08em;
  padding:18px 36px;border-radius:8px;border:0;cursor:pointer;transition:.2s;
  text-align:center;line-height:1.3;
}
.btn-baixar:hover{background:var(--tinta);transform:translateY(-2px)}
.btn-baixar svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{padding:clamp(56px,7vw,96px) 0;text-align:center}
.cta h2{font-size:clamp(1.8rem,3.8vw,2.8rem);margin:0;max-width:20ch;margin-inline:auto}
.cta-apoio{font-size:18px;color:var(--tinta-2);margin:1.1rem 0 0}
.cta-botoes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:760px;margin:36px auto 0;
}
.cta-zap{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  min-height:60px;padding:.9rem 1.4rem;border-radius:8px;
  background:var(--verm);color:var(--claro);transition:.2s;text-align:left;
}
.cta-zap:hover{background:var(--tinta);transform:translateY(-2px)}
.cta-zap svg{width:26px;height:26px;fill:currentColor;flex:0 0 auto}
.cta-zap b{display:block;font-weight:700;font-size:1rem;line-height:1.2}
.cta-zap small{display:block;font-weight:400;font-size:.86rem;opacity:.92}

/* =========================================================
   RODAPÉ SIMPLES
   ========================================================= */
.rodape{background:var(--cinza);padding:36px 0;text-align:center}
.rodape img{height:40px;width:auto;margin:0 auto 16px}
.rodape p{font-size:14px;color:var(--tinta-2);margin:.25rem 0}
.rodape a{color:var(--tinta);font-weight:500}
.rodape a:hover{text-decoration:underline}
.rodape-fim{font-size:12.5px;color:var(--tinta-3);margin-top:1rem}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1279px){
  .partes{gap:24px}
}
@media (max-width:1023px){
  .partes{grid-template-columns:1fr}
  .liga{display:none}        /* sem espaço para a seta de ligação */
  .tele-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .topo{height:60px}
  .topo-logo img{height:32px}
  .topo-grid{grid-template-columns:44px 1fr 44px}
  .faixa-grid{grid-template-columns:1fr;gap:32px}
  .cta-botoes{grid-template-columns:1fr}
  .transicao{padding:64px 0}
  table.dados{font-size:14px}
  table.confronto{font-size:13.5px}
  table.confronto th,table.confronto td{padding:.7rem .4rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-seta{animation:none}
  .liga path{stroke-dashoffset:0;transition:none}
}

@media print{
  .topo,.side,.side-backdrop,.wa-float,.tele-baixar,.cta-botoes{display:none !important}
  .partes{grid-template-columns:1fr 1fr}
  .card{page-break-inside:avoid}
}