/* Prometheus Elétrica — paginas.css
   Páginas internas: linhas, serviços, Urgência, Sobre, Contato, Blog, Privacidade e 404.
   Vem depois de estilos.css e site.css. Grade de 8 (e 4 para ajuste fino). */

/* ---------- Topo da página ---------- */
.pagina-topo {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--esp-8) 0 var(--esp-12);
  border-bottom: 1px solid var(--cor-borda);
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 106, 19, .10), transparent 60%), var(--cor-fundo);
}
/* mesma margem das seções com o fio vertical, para o texto do topo alinhar com o resto da página */
.pagina-topo .container { padding-left: calc(var(--margem-lateral) + 32px); }
@media (max-width: 640px) { .pagina-topo .container { padding-left: calc(var(--margem-lateral) + 8px); } }
.pagina-topo__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-8); align-items: center; }
.pagina-topo--sem-foto .pagina-topo__grade { grid-template-columns: minmax(0, 1fr); }
.pagina-topo__texto { max-width: 720px; }
.trilha { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--esp-4); font-size: var(--t-sm); color: var(--cor-texto-suave); }
.trilha a { color: var(--cor-texto-suave); text-decoration: none; }
.trilha a:hover { color: var(--cor-texto); opacity: 1; }
.trilha li + li::before { content: "/"; margin-right: 8px; color: var(--cor-borda-forte); }
.trilha ol { display: contents; }
.pagina-topo .rotulo { display: block; margin-bottom: var(--esp-2); color: var(--cor-primaria-texto); }
.pagina-topo h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.015em; margin-bottom: var(--esp-3); }
.pagina-topo__apoio { font-size: var(--t-lg); color: var(--cor-texto); opacity: .86; max-width: 48ch; margin-bottom: var(--esp-4); }
.pagina-topo__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.pagina-topo__foto { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .pagina-topo { padding: var(--esp-6) 0 var(--esp-8); }
  .pagina-topo__grade { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
  .pagina-topo__foto { order: -1; }   /* foto primeiro: o fio atravessa a foto antes do texto (28/10/2026) */
}

/* ---------- Abertura de seção ---------- */
.abertura { max-width: 760px; margin-bottom: var(--esp-8); }
.abertura p { font-size: var(--t-lg); line-height: 1.7; color: var(--cor-texto-suave); }

/* ---------- Itens do serviço (o que fazemos) ---------- */
.itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-8); }
.item { padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); }
.item > .icone { color: var(--cor-texto-suave); margin-bottom: var(--esp-3); }
.item h3 { font-size: var(--t-lg); margin-bottom: var(--esp-2); }
.item p { color: var(--cor-texto-suave); line-height: 1.75; margin: 0; }
.item p + p { margin-top: var(--esp-1); }
.item__lista { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); max-width: 72ch; }
.item__lista li { padding-left: var(--esp-4); position: relative; line-height: 1.75; color: var(--cor-texto-suave); }
.item__lista li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: var(--linha); background: var(--cor-primaria); }
.item__lista strong { color: var(--cor-texto); }
.item--largo { grid-column: 1 / -1; }
@media (max-width: 760px) { .itens { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } }

/* ---------- Lista com ícone (sinais, quando chamar) ---------- */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-8); }
.checklist li { display: flex; gap: var(--esp-2); padding: var(--esp-3) 0; line-height: 1.7; border-bottom: 1px solid var(--cor-borda); }
.checklist .icone { color: var(--cor-primaria); margin-top: 2px; }
@media (max-width: 760px) { .checklist { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Não está incluso ---------- */
.fora { margin-top: var(--esp-8); padding: var(--esp-4); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); }
.fora h3 { font-size: var(--t-base); margin-bottom: var(--esp-1); }
.fora p { margin: 0; color: var(--cor-texto-suave); }

/* ---------- Passos (como funciona) ---------- */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-6); counter-reset: passo; }
.passo { padding-top: var(--esp-2); border-top: 2px solid var(--cor-borda); counter-increment: passo; }
.passo:first-child { border-top-color: var(--cor-primaria); }
.passo::before {
  content: counter(passo, decimal-leading-zero); display: block; margin-bottom: var(--esp-2);
  font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte);
  color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums;
}
.passo h3 { font-size: var(--t-lg); margin-bottom: var(--esp-1); }
.passo p { margin: 0; color: var(--cor-texto-suave); }
@media (max-width: 900px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-4); } }
@media (max-width: 520px) { .passos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Garantia (faixa curta) ---------- */
.garantia-faixa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-6); align-items: center; }
.garantia-faixa__numero {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); line-height: .9; color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums;
}
.garantia-faixa__numero small { font-size: var(--t-h3); color: var(--cor-texto); font-weight: var(--peso-medio); }
.garantia-faixa p:not(.garantia-faixa__numero) { color: var(--cor-texto-suave); margin: 0; }
.garantia-faixa h2 { margin-bottom: var(--esp-1); }
@media (max-width: 640px) { .garantia-faixa { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); } }

/* ---------- Provas (trabalhos e depoimento) ---------- */
.provas__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.provas__foto { aspect-ratio: 4 / 3; }
.provas__foto.foto--vaga { background-size: auto 20%, auto, auto; }
.provas .depoimento { margin-top: var(--esp-6); max-width: 760px; padding-top: var(--esp-3); border-top: 2px solid var(--cor-primaria); }
.provas .depoimento blockquote { margin: 0 0 var(--esp-2); font-size: var(--t-lg); line-height: 1.45; }
.provas .depoimento figcaption { color: var(--cor-texto-suave); font-size: var(--t-sm); }
@media (max-width: 640px) { .provas__grade { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Perguntas frequentes ---------- */
.perguntas { max-width: 860px; border-top: 1px solid var(--cor-borda); }
.pergunta { border-bottom: 1px solid var(--cor-borda); }
.pergunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2);
  min-height: 64px; padding: var(--esp-2) 0; cursor: pointer; list-style: none;
  font-weight: var(--peso-medio); font-size: 1.0625rem;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; flex: none; font-size: var(--t-lg); color: var(--cor-primaria-texto); transition: transform var(--duracao-rapida) var(--curva-padrao); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { margin: 0 0 var(--esp-3); color: var(--cor-texto-suave); }

/* ---------- Chamada final ---------- */
.chamada__bloco { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-4); align-items: end; }
.chamada h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.441rem); max-width: 22ch; margin-bottom: var(--esp-2); }
.chamada__bloco p { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-lg); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.outra-linha { max-width: none; margin: var(--esp-8) 0 0; padding-top: var(--esp-3); border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); }
.outra-linha a { font-weight: var(--peso-medio); text-decoration: none; }
@media (max-width: 900px) { .chamada__bloco { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Página de linha: filtro e cartões dos serviços ---------- */
.filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--esp-4); }
.filtro button {
  min-height: 48px; padding: 0 var(--esp-3); font: inherit; font-weight: var(--peso-medio); cursor: pointer;
  color: var(--cor-texto-suave); background: transparent; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
  transition: color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.filtro button:hover { color: var(--cor-texto); }
.filtro button[aria-pressed="true"] { color: var(--cor-primaria-texto); border-color: var(--cor-primaria); }
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.servico-cartao {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-4); align-content: start;
  padding: var(--esp-6) var(--esp-6); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  color: var(--cor-texto); text-decoration: none; transition: border-color var(--duracao-media) var(--curva-padrao);
}
.servico-cartao:hover { border-color: var(--cor-borda-forte); opacity: 1; }
.servico-cartao .icone { grid-row: 1 / span 3; color: var(--cor-texto-suave); transition: color var(--duracao-media) var(--curva-padrao); }
.servico-cartao:hover .icone { color: var(--cor-primaria-texto); }
.servico-cartao h3 { font-size: var(--t-lg); margin: 0 0 var(--esp-1); }
.servico-cartao p { margin: 0; line-height: 1.75; color: var(--cor-texto-suave); }
.servico-cartao__ir { margin-top: var(--esp-3); color: var(--cor-primaria-texto); font-weight: var(--peso-medio); font-size: var(--t-sm); }
.fio-vertical > section:nth-of-type(even) .servico-cartao { background: var(--cor-fundo); }
@media (max-width: 760px) { .servicos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {     /* celular: ícone em cima, texto na largura toda */
  .servico-cartao { grid-template-columns: minmax(0, 1fr); padding: var(--esp-4) var(--esp-3); }
  .servico-cartao .icone { grid-row: auto; margin-bottom: var(--esp-1); }
}

/* ---------- Urgência ---------- */
.pagina-topo--urgencia { background: radial-gradient(70% 120% at 100% 0%, rgba(255, 106, 19, .18), transparent 62%), var(--cor-fundo); }
.pagina-topo--urgencia .pagina-topo__acoes .botao { min-height: 56px; padding: 0 var(--esp-4); font-size: var(--t-lg); }
.enquanto { counter-reset: enquanto; display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--cor-borda); }
.enquanto li { counter-increment: enquanto; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--esp-2); padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); }
.enquanto li::before {
  content: counter(enquanto); display: grid; place-items: center; width: 40px; height: 40px;
  border: var(--linha) solid var(--cor-primaria); border-radius: var(--raio);
  font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); color: var(--cor-primaria-texto);
}
.enquanto strong { display: block; margin-bottom: 4px; }
.enquanto span { color: var(--cor-texto-suave); }

/* ---------- Sobre ---------- */
.historia-sobre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-8); align-items: start; }
.historia-sobre__foto { aspect-ratio: 4 / 5; }
.historia-sobre__texto p { font-size: 1.0625rem; }
.historia-sobre__assinatura { margin-top: var(--esp-3); color: var(--cor-texto-suave); font-size: var(--t-sm); }
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.time { padding: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-fundo); }
.time .icone { color: var(--cor-texto-suave); margin-bottom: var(--esp-2); }
.time h3 { font-size: var(--t-lg); margin-bottom: var(--esp-1); }
.time p { margin: 0; color: var(--cor-texto-suave); }
.equipe__foto { aspect-ratio: 16 / 9; margin-bottom: var(--esp-4); }
.equipe__pessoas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); }
.pessoa__foto { aspect-ratio: 4 / 5; margin-bottom: var(--esp-2); }
.pessoa__foto.foto--vaga { background-size: auto 22%, auto, auto; }
.pessoa h3 { font-size: var(--t-lg); margin-bottom: 4px; }
.pessoa p { margin: 0; color: var(--cor-texto-suave); }
.pessoa__funcao { color: var(--cor-primaria-texto) !important; font-weight: var(--peso-medio); }
.normas-curtas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); margin-top: var(--esp-4); }
.normas-curtas div { padding-top: var(--esp-2); border-top: 2px solid var(--cor-borda); }
.normas-curtas dt { font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); font-size: var(--t-lg); }
.normas-curtas dd { margin: 4px 0 0; color: var(--cor-texto-suave); }
@media (max-width: 900px) {
  .historia-sobre { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
  .times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipe__pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .times, .normas-curtas { grid-template-columns: minmax(0, 1fr); }
  .equipe__pessoas { gap: var(--esp-3) var(--esp-2); }
}

/* ---------- Contato ---------- */
.canais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.canal {
  display: grid; gap: 4px; padding: var(--esp-4) var(--esp-3); min-width: 0;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  color: var(--cor-texto); text-decoration: none; transition: border-color var(--duracao-media) var(--curva-padrao);
}
.canal:hover { border-color: var(--cor-primaria); opacity: 1; }
.canal__nome { font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); font-size: var(--t-lg); }
.canal__dado { color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.escolha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
.escolha h3 { font-size: var(--t-lg); margin-bottom: var(--esp-2); }
.escolha ul { display: grid; gap: 8px; }
.escolha a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); min-height: 48px; padding: 8px var(--esp-2);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none;
}
.escolha a::after { content: "→"; color: var(--cor-primaria-texto); }
.escolha a:hover { border-color: var(--cor-primaria); opacity: 1; }
.dados-empresa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); margin: 0; }
.dados-empresa dt { color: var(--cor-texto-suave); font-size: var(--t-sm); margin-bottom: 4px; }
.dados-empresa dd { margin: 0; }
@media (max-width: 900px) { .canais, .escolha, .dados-empresa { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Texto longo (Privacidade) ---------- */
.texto-longo { max-width: 760px; }
.texto-longo h2 { font-size: var(--t-h3); margin-top: var(--esp-6); }
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo ul { display: grid; gap: 8px; margin: 0 0 var(--esp-2); }
.texto-longo li { padding-left: var(--esp-3); position: relative; color: var(--cor-texto-suave); }
.texto-longo li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: var(--linha); background: var(--cor-primaria); }
.texto-longo p { color: var(--cor-texto-suave); }

/* ---------- Blog vazio e 404 ---------- */
.vazio { padding: var(--esp-6) var(--esp-4); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); text-align: center; }
.vazio p { margin-left: auto; margin-right: auto; }
.vazio__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-3); }

/* ---------- Página de venda v2 (30/10/2026): Atenção → Interesse → Problema → Agitação → Solução → Prova → Desejo → Ação ---------- */
.pagina-topo__confianca { margin: var(--esp-3) 0 0; font-size: var(--t-sm); color: var(--cor-texto-suave); letter-spacing: .01em; }
.dor__bloco { max-width: 760px; }
.dor__causa { font-size: var(--t-lg); line-height: 1.7; color: var(--cor-texto-suave); }
.dor__custo { margin: var(--esp-4) 0 0; padding-left: var(--esp-4); border-left: 2px solid var(--cor-primaria); font-size: var(--t-lg); line-height: 1.7; color: var(--cor-texto); }
.acoes-meio { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-8); }
.provas__numero { max-width: 760px; margin: 0 0 var(--esp-6); font-size: var(--t-lg); line-height: 1.6; color: var(--cor-texto); }
.desejo .abertura { margin-bottom: var(--esp-6); }
.garantia-faixa h3 { margin-bottom: var(--esp-1); }