/* ═══ LP DE LINHA — a página de lançamento sobre a ficha (22/09/2026) ═════
   Carregado só na rota /familia/{slug}/lp, pelo partial da LP. Nada aqui muda
   a ficha pública: toda regra começa em `.lp-`, e o resto da página continua
   com o usina.css. Os tokens são os do núcleo — cor, tipo, espaço e curva —,
   então o tema claro do botão da barra funciona sem regra própria.

   Mesma gramática do núcleo: raio zero, sombra nenhuma, profundidade por
   filete. A brasa aparece em UM botão cheio por tela e no destaque da coluna
   Direct do comparativo. */

/* ── marca de pendência: só existe na prévia ────────────────────────────── */
.lp-pend{
  display:inline-flex;align-items:center;gap:var(--e2);
  font:500 var(--t-xs)/1.3 var(--corpo);letter-spacing:.08em;text-transform:uppercase;
  color:var(--brasa-tinta);
  border:1px dashed var(--brasa);padding:.3rem .55rem;
  background:var(--brasa-veu);
}
.lp-pend::before{content:'';width:.4rem;height:.4rem;background:var(--brasa);flex:none}
.lp-pend--mini{font-size:.625rem;padding:.2rem .45rem;letter-spacing:.06em;text-transform:none}

.lp-previa{
  border-bottom:1px solid var(--risco);background:var(--fundo-0);
  font-size:var(--t-sm);color:var(--tinta-2);
}
.lp-previa .env{padding-block:var(--e3)}
.lp-previa b{color:var(--brasa-tinta);font-weight:500}

.lp-texto{max-width:62ch;margin-top:var(--e5)}
.lp-nota{margin-top:var(--e4);font-size:var(--t-xs);color:var(--tinta-3);max-width:66ch}
.lp-ancora{scroll-margin-top:var(--e16)}

/* ── quadro de foto: o branco do estúdio, como no carrossel da ficha ───── */
.lp-quadro{margin:0;background:#fff;border:1px solid var(--risco);overflow:hidden}
.lp-quadro picture,.lp-quadro img{display:block;width:100%;height:auto}
.lp-quadro figcaption{
  background:var(--fundo-1);border-top:1px solid var(--risco);
  padding:var(--e3) var(--e4);font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.02em;
}

/* espaço reservado para material que ainda não chegou: tracejado, nunca vazio */
.lp-espera{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--e3);
  border:1px dashed var(--risco-forte);
  background:color-mix(in oklch,var(--fundo-2) 60%,transparent);
  padding:var(--e6);color:var(--tinta-3);font-size:var(--t-sm);line-height:1.55;
}
.lp-espera p{max-width:44ch}
/* quadrado só onde há grade de quatro: empilhado no celular, dois quadrados
   vazios seguidos viravam uma tela inteira de nada */
.lp-espera--quadro{aspect-ratio:16/9;justify-content:flex-end}
@media(min-width:40rem){.lp-espera--quadro{aspect-ratio:1}}
.lp-espera--video{aspect-ratio:16/9;align-items:center;text-align:center}
.lp-espera--video svg{color:var(--tinta-2)}

/* ═══ 1 · ABERTURA ═══════════════════════════════════════════════════════ */
.lp-abre{
  display:grid;gap:var(--e10);align-items:center;
  padding-block:var(--e12) var(--e16);
}
/* respiro por ALTURA de tela, não por largura: a 1366 × 768 o topo de 4rem
   empurrava os botões para baixo da dobra */
@media(min-width:56rem){
  .lp-abre{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--e16);padding-block:clamp(2rem,6vh,4rem) var(--e20)}
  /* 4:3 no desktop: o quadrado da foto era o que dava a altura da abertura; o
     perfil atravessa o miolo da foto e o corte só tira branco */
  .lp-quadro--grande{aspect-ratio:4/3}
  .lp-quadro--grande img{height:100%;object-fit:cover}
}
/* --t-2xl e não 3xl: a 1920 px o 3xl quebrava o título em quatro linhas na
   coluna de 600 px e empurrava os botões para fora da primeira tela */
.lp-abre__titulo{font-size:var(--t-2xl);margin-top:var(--e5);max-width:18ch;line-height:1}
.lp-abre__lead{
  margin-top:var(--e6);color:var(--tinta-2);
  font-size:clamp(1.0625rem,.98rem + .35vw,1.3rem);line-height:1.55;max-width:44ch;
}
.lp-abre__acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e8)}
.lp-abre__imagens{display:grid;gap:var(--e4);grid-template-columns:minmax(0,1fr)}
/* o material que falta vai EMBAIXO da foto, em faixa baixa: sobreposto ao
   quadro ele parecia defeito de layout, não espaço reservado */
.lp-espera--canto{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--e3) var(--e4);padding:var(--e4) var(--e5)}

/* ═══ 2 · NÚMEROS — a faixa da home, com grade própria ══════════════════ */
.lp-numeros__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-numeros__grade>div{
  padding:var(--e8) var(--e3);
  display:grid;gap:var(--e2);align-content:start;justify-items:center;text-align:center;
}
.lp-numeros__grade>div:nth-child(even){border-left:1px solid var(--risco)}
.lp-numeros__grade>div:nth-child(n+3){border-top:1px solid var(--risco)}
@media(min-width:56rem){
  .lp-numeros__grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-numeros__grade>div{padding:var(--e10) var(--e5)}
  .lp-numeros__grade>div+div{border-left:1px solid var(--risco)}
  .lp-numeros__grade>div:nth-child(n+3){border-top:0}
}

/* ═══ 3–4 · PROBLEMA E BENEFÍCIOS ════════════════════════════════════════ */
.lp-problema__grade{display:grid;gap:var(--e10);align-items:center}
@media(min-width:56rem){
  .lp-problema__grade{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--e16)}
}
.lp-problema .titulo-secao{font-size:var(--t-2xl)}

.lp-beneficios{
  list-style:none;margin:var(--e16) 0 0;padding:0;
  display:grid;gap:0;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--risco-forte);
}
.lp-beneficios li{padding:var(--e8) 0;border-bottom:1px solid var(--risco)}
@media(min-width:56rem){
  .lp-beneficios{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-beneficios li{padding:var(--e10) var(--e8) var(--e8) 0;border-bottom:0}
  .lp-beneficios li+li{border-left:1px solid var(--risco);padding-left:var(--e8)}
}
.lp-beneficios__n{font-size:var(--t-xs);color:var(--brasa-tinta);letter-spacing:.12em}
.lp-beneficios h3{font-size:var(--t-lg);margin-top:var(--e4);line-height:1.12}
.lp-beneficios p{margin-top:var(--e4);color:var(--tinta-2);font-size:var(--t-base);line-height:1.62}

.lp-afirma{
  margin-top:var(--e12);padding:var(--e6) 0 var(--e6) var(--e6);
  border-left:2px solid var(--brasa);
  display:grid;gap:var(--e4);justify-items:start;
}
.lp-afirma p{font-family:var(--display);font-size:var(--t-lg);line-height:1.25;max-width:40ch}

/* ═══ 5 · INSTALAÇÃO ═════════════════════════════════════════════════════ */
.lp-instala__grade{display:grid;gap:var(--e10);margin-top:var(--e10);align-items:center}
@media(min-width:56rem){
  .lp-instala__grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--e16)}
}
.lp-passos{list-style:none;margin:0;padding:0;display:grid}
.lp-passos li{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:var(--e4);
  padding:var(--e6) 0;border-top:1px solid var(--risco);
}
.lp-passos li:last-child{border-bottom:1px solid var(--risco)}
.lp-passos__n{font-family:var(--display);font-size:var(--t-xl);line-height:.9;color:var(--brasa-tinta)}
.lp-passos h3{font-size:var(--t-md);font-family:var(--corpo);font-weight:500;letter-spacing:0;line-height:1.3}
.lp-passos p{margin-top:var(--e2);color:var(--tinta-2);font-size:var(--t-sm);line-height:1.6}

/* ═══ 6 · COMPARATIVO ════════════════════════════════════════════════════
   A tabela rola DENTRO da própria caixa no celular — a página nunca rola na
   horizontal. A primeira coluna fica presa para a linha não perder o nome. */
.lp-tabela{margin-top:var(--e10);overflow-x:auto;border-top:1px solid var(--risco-forte)}
/* aviso de rolagem só onde a tabela não cabe (min-width 40rem da <table>) */
.lp-tabela__dica{display:none;margin-top:var(--e8);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
@media(max-width:47.99rem){.lp-tabela__dica{display:block}.lp-tabela__dica + .lp-tabela{margin-top:var(--e3)}}
.lp-tabela:focus-visible{outline:2px solid var(--brasa-tinta);outline-offset:3px}
.lp-tabela table{width:100%;min-width:40rem;border-collapse:collapse;font-size:var(--t-sm)}
.lp-tabela th,.lp-tabela td{
  text-align:left;vertical-align:top;padding:var(--e4) var(--e4) var(--e4) 0;
  border-bottom:1px solid var(--risco);
}
.lp-tabela thead th{
  font-weight:500;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
}
.lp-tabela tbody th{font-weight:400;color:var(--tinta-1);width:24%}
.lp-tabela td{color:var(--tinta-2)}
.lp-tabela tbody th{position:sticky;left:0;background:var(--fundo-1)}
.lp-tabela .lp-tabela__direct{
  color:var(--tinta-1);background:var(--brasa-veu);
  padding-inline:var(--e4);border-inline:1px solid var(--brasa);
}
.lp-tabela thead .lp-tabela__direct{color:var(--brasa-tinta)}
/* a coluna que vem depois do destaque ganha respiro: o texto encostava no fundo
   da coluna Direct (apontamento do Herasmo, 22/09) */
.lp-tabela .lp-tabela__direct + td,.lp-tabela .lp-tabela__direct + th{padding-left:var(--e6)}

/* ═══ 7 · VERSÕES ════════════════════════════════════════════════════════ */
.lp-versoes__grade{
  display:grid;gap:var(--e8) var(--e5);margin-top:var(--e10);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
}
@media(min-width:64rem){.lp-versoes__grade{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-versao h3{font-size:var(--t-lg);margin-top:var(--e5);line-height:1.15}
.lp-versao h3 .num{
  display:block;margin-top:var(--e2);
  font:400 var(--t-xs)/1.3 var(--corpo);letter-spacing:.1em;color:var(--tinta-3);
}
.lp-versao p{margin-top:var(--e3);color:var(--tinta-2);font-size:var(--t-sm);line-height:1.6}
.lp-versao .lp-quadro{aspect-ratio:1}
.lp-versao .lp-quadro img{height:100%;object-fit:cover}
.lp-versoes__segue{margin-top:var(--e12);color:var(--tinta-3);font-size:var(--t-sm)}

/* ═══ 8–10 · ARQUIVOS, PERGUNTAS E FECHAMENTO ════════════════════════════ */
.lp-arquivos__pend{margin-top:var(--e5)}
.lp-perguntas__lista{margin-top:var(--e10);border-top:1px solid var(--risco-forte);max-width:52rem}
.lp-perguntas .faq__item > p{font-size:var(--t-base)}
.lp-perguntas .lp-pend{margin-left:var(--e2);vertical-align:middle}
/* o fechamento empilha: com o botão na coluna `auto` da .chamada-usina o
   título ficava espremido em cinco linhas */
.lp-fecha .chamada-usina{grid-template-columns:minmax(0,1fr);align-items:start}
.lp-fecha .titulo-secao{font-size:var(--t-2xl);max-width:20ch}
.lp-fecha__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3)}


/* ═══ 25/09/2026 · LP publicada na ficha, com o retorno da Usina ═════════ */
/* 1 · abertura em carrossel: o campo.js dá setas, guias, arraste e zoom. O
   quadro é o da ficha, quadrado; a foto de produto já é quadrada e a ambientada
   cede a borda (o teto com a luz fica no quadro) */
.lp-carrossel__quadro{margin:0;display:grid;grid-template-rows:1fr auto;background:#fff}
.lp-carrossel__quadro picture{display:block;overflow:hidden}
.lp-carrossel__quadro img{display:block;width:100%;height:100%;object-fit:cover}
.lp-carrossel__quadro[data-quadro="1"] img{object-position:center 30%}
.lp-carrossel__quadro figcaption{
  background:var(--fundo-1);border-top:1px solid var(--risco);
  padding:var(--e3) var(--e4);font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.02em;
}
/* 2 · foto no corte da Usina: sem moldura, sem respiro, sem fundo de quadro */
.lp-corte{margin:0}
.lp-corte img{display:block;width:100%;height:auto}
.lp-corte figcaption{margin-top:var(--e3);font-size:var(--t-xs);color:var(--tinta-3)}
/* 3 · os três títulos dos benefícios com a mesma altura: o texto de baixo
   começa na mesma linha nas três colunas */
@media(min-width:56rem){.lp-beneficios h3{min-height:calc(3 * 1.12em)}}
/* 4 · instalação: rótulo, título e passos à esquerda; o vídeo vertical ocupa a
   altura da seção à direita, com o topo na linha do rótulo */
.lp-instala__grade{margin-top:0}
.lp-instala__texto .lp-passos{margin-top:var(--e10)}
@media(min-width:56rem){
  /* o topo do vídeo na linha do rótulo; os passos no meio da altura que sobra */
  .lp-instala__grade{align-items:stretch}
  .lp-instala__texto{display:flex;flex-direction:column}
  .lp-instala__texto .lp-passos{margin-block:auto}
  .lp-video{align-self:start}
}
.lp-video{margin:0;justify-self:center;width:100%;max-width:24rem}
@media(min-width:56rem){.lp-video{justify-self:end}}
.lp-video video{display:block;width:100%;height:auto;aspect-ratio:720/1212;background:var(--fundo-2);border:1px solid var(--risco)}
.lp-video figcaption{margin-top:var(--e3);font-size:var(--t-xs);color:var(--tinta-3)}
.lp-versao p strong{color:var(--tinta-1);font-weight:500}
/* 6 · aviso do pendente na largura inteira do miolo, botão na coluna da direita */
.lp-aviso{
  margin-top:var(--e10);padding:var(--e6);
  border:1px solid var(--risco-forte);border-left:3px solid var(--brasa);background:var(--fundo-1);
  display:grid;gap:var(--e4);align-items:center;
}
@media(min-width:48rem){.lp-aviso{grid-template-columns:minmax(0,1fr) auto;gap:var(--e8)}}
.lp-aviso__texto{display:grid;gap:var(--e3)}
.lp-aviso__titulo{font-family:var(--display);font-size:var(--t-lg);line-height:1.2;color:var(--tinta-1)}
.lp-aviso p{color:var(--tinta-2);font-size:var(--t-base);line-height:1.6;max-width:62ch}
.lp-aviso strong{color:var(--tinta-1);font-weight:500}
.lp-aviso__acoes{margin:0}
/* o laudo na página: as duas medições lado a lado */
.lp-laudo{display:grid;gap:var(--e6);margin-top:var(--e10)}
@media(min-width:48rem){.lp-laudo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-laudo figure{margin:0;border:1px solid var(--risco);background:var(--fundo-1)}
.lp-laudo img{display:block;width:100%;height:auto}
.lp-laudo figcaption{padding:var(--e3) var(--e4);font-size:var(--t-sm);color:var(--tinta-2);border-top:1px solid var(--risco)}
.lp-laudo figcaption b{display:block;color:var(--tinta-1);font-weight:500}