/* ==========================================================================
   b.elzark — Catálogo digital: páginas de linha
   Complementa home.css (reaproveita .passos, .incluso-grade, .faq-lista,
   .contato/.cta-whats). Aqui só o que é específico de página de produto.

   Primeiro uso do azul de apoio do manual (tokens.css documentava a dupla
   sem aplicação — decisão de Igor para diferenciar o catálogo do resto do
   site, que é preto e branco puros). Regra do manual: tom + sobretom da
   MESMA dupla, nunca sobre fotografia.
   ========================================================================== */

:root {
  --azul: #024d66;
  --azul-sobretom: #0099c0;
}

/* --- Breadcrumb ------------------------------------------------------------
   Vive dentro do .hero (que já traz padding-top:7rem do home.css para
   limpar o header fixo) — aqui só o respiro até o conteúdo abaixo. */
.trilha { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  gap: var(--e-2);
  font-size: var(--t-peq);
  color: var(--branco-64);
}
.trilha li { display: flex; align-items: center; gap: var(--e-2); }
.trilha li:not(:last-child)::after {
  content: "›";
  color: var(--branco-40);
}
.trilha a {
  text-decoration: none;
  color: var(--branco-64);
  transition: color var(--tempo) var(--curva);
}
.trilha a:hover { color: var(--branco); }
.trilha [aria-current="page"] { color: var(--branco); font-weight: var(--peso-medium); }

/* --- Hero de produto: texto + composição ------------------------------------
   O <section> carrega a classe .hero (herda padding-top:7rem, min-height e o
   [data-entrada] do home.css — a barra CTA do main.js também procura .hero).
   Aqui só o miolo: .trilha em cima, depois o grid texto+figura. */
.hero.hero-produto { align-content: center; }
.hero-produto-grade {
  display: grid;
  gap: var(--e-8);
}
.hero-produto .lede { margin-top: var(--e-6); }
.hero-produto .hero-ctas { margin-top: var(--e-8); }
.hero-produto .hero-legenda {
  margin-top: var(--e-4);
  font-size: var(--t-micro);
  color: var(--branco-64);
  max-width: 40ch;
}
.hero-produto .micro {
  margin-top: var(--e-3);
  font-size: var(--t-peq);
  color: var(--branco-64);
}
@media (min-width: 64rem) {
  .hero-produto-grade { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* --- Figura de produto: moldura + selo de imagem ilustrativa ---------------- */
.figura-produto {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--branco-16);
}
.figura-produto img { width: 100%; height: 100%; object-fit: cover; }
.aspecto-16-9 { aspect-ratio: 16 / 9; }
.aspecto-4-3  { aspect-ratio: 4 / 3; }
.aspecto-1-1  { aspect-ratio: 1 / 1; }

.selo-ilustrativa {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  z-index: 1;
  padding: 0.35em 0.7em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--preto);
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: 0.02em;
  border-radius: var(--raio-pill);
  line-height: 1.2;
}

/* --- Parágrafo-resposta: alvo de snippet ------------------------------------ */
.paragrafo-resposta {
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.paragrafo-resposta p {
  font-size: var(--t-corpo-g);
  font-weight: var(--peso-light);
  max-width: 62ch;
  border-left: 3px solid var(--azul);
  padding-left: var(--e-6);
}
.paragrafo-resposta strong {
  color: var(--azul);
  font-weight: var(--peso-bold);
}

/* --- A linha em N intensidades: cards de variação --------------------------- */
.variacoes-grade {
  display: grid;
  gap: var(--e-6);
}
.variacao-card {
  display: grid;
  gap: var(--e-4);
  padding-bottom: var(--e-2);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.variacao-card .figura-produto { border: 0; border-radius: 0; }
.variacao-corpo { padding: 0 clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.25rem, 3.5vw, 1.75rem); }
.variacao-card .indice {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--azul);
  margin-top: var(--e-4);
}
.variacao-card h3 {
  font-size: var(--t-h4);
  margin-top: var(--e-2);
}
.variacao-card .subtitulo {
  color: var(--texto-suave);
  font-size: var(--t-peq);
  margin-top: var(--e-1);
}
.variacao-card .lede-curta {
  margin-top: var(--e-4);
  font-weight: var(--peso-medium);
  max-width: none;
}
.variacao-card .descricao {
  margin-top: var(--e-3);
  color: var(--texto-suave);
  font-size: var(--t-peq);
}
.variacao-card .rotulo-mini {
  display: block;
  margin-top: var(--e-4);
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.variacao-card .beneficios {
  margin-top: var(--e-2);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-1);
  font-size: var(--t-peq);
}
.variacao-card .beneficios li { padding-left: var(--e-4); position: relative; }
.variacao-card .beneficios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--azul-sobretom);
  border-radius: 50%;
}
@media (min-width: 40rem) { .variacoes-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 74rem) { .variacoes-grade { grid-template-columns: repeat(4, 1fr); } }

/* --- Callout: objeção respondida no meio do argumento ------------------------ */
.callout {
  margin-top: var(--e-8);
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  background: rgba(2, 77, 102, 0.05);
}
.inverso .callout { background: rgba(0, 153, 192, 0.08); }
.callout p:first-child {
  font-weight: var(--peso-bold);
  margin-bottom: var(--e-2);
}
.callout p { max-width: 64ch; }

/* --- Aviso de imagem ilustrativa: bloco explicativo em destaque -------------- */
.aviso-ilustrativa {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--raio);
  background: var(--preto);
  color: var(--branco);
}
.aviso-ilustrativa p:first-child {
  font-size: var(--t-h4);
  font-weight: var(--peso-bold);
  margin-bottom: var(--e-3);
}
.aviso-ilustrativa p { max-width: 68ch; color: var(--branco-88); }
.aviso-ilustrativa strong { color: var(--branco); }
.aviso-ilustrativa p + p { margin-top: var(--e-3); }

/* --- Tabelas: comparativa e ficha técnica ------------------------------------ */
.tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.tabela {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--t-peq);
}
.tabela caption { text-align: left; padding: var(--e-4); font-weight: var(--peso-bold); }
.tabela th, .tabela td {
  padding: var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela thead th {
  background: var(--preto);
  color: var(--branco);
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody th {
  font-weight: var(--peso-bold);
  background: var(--preto-08);
}
.tabela .sob-consulta { color: var(--texto-suave); font-style: italic; }

.tabela-nota {
  margin-top: var(--e-4);
  color: var(--texto-suave);
  font-size: var(--t-peq);
  max-width: 68ch;
}
.tabela-nota + .tabela-nota { margin-top: var(--e-2); }

/* --- Seção ficha técnica: espaço extra antes da tabela ----------------------- */
.ficha-tecnica .tabela-scroll { margin-top: var(--e-2); }

/* --- CTA final: composição de família acima do formulário -------------------- */
.cta-figura {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e-4);
}

/* --- Produtos da linha: cards simples (2 a 5 SKUs, sem escada de variação) --- */
.produtos-grade {
  display: grid;
  gap: var(--e-6);
}
.produto-card {
  display: grid;
  gap: var(--e-4);
  padding-bottom: clamp(1.5rem, 4vw, 2rem);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.produto-card .figura-produto { border: 0; border-radius: 0; }
.produto-corpo { padding: 0 clamp(1.5rem, 4vw, 2rem); }
.produto-card h3 {
  font-size: var(--t-h4);
  margin-top: var(--e-4);
}
.produto-card .subtitulo {
  color: var(--azul);
  font-size: var(--t-peq);
  font-weight: var(--peso-bold);
  margin-top: var(--e-1);
}
.produto-card p {
  margin-top: var(--e-3);
  color: var(--texto-suave);
}
.produto-card p:first-of-type { margin-top: var(--e-4); }
@media (min-width: 40rem) { .produtos-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 74rem) { .produtos-grade.colunas-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 74rem) { .produtos-grade.colunas-5 { grid-template-columns: repeat(5, 1fr); } }

/* --- Selo de passo: numeração de produto sequencial (linhas tipo "sistema")
   Deliberadamente distinto do .codigo do bloco "Como funciona" (numeral
   grande e fino em lista) para que os dois conjuntos de "4 passos" de uma
   mesma página (produtos x etapas de produção) nunca se confundam. --- */
.selo-passo {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-peq);
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
}

/* --- Razões (bloco "por que andam juntos"): 3 cards curtos ------------------- */
.razoes-grade {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-8);
}
.razao-card h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--e-2);
}
.razao-card p { color: var(--texto-suave); font-size: var(--t-peq); }
@media (min-width: 48rem) { .razoes-grade { grid-template-columns: repeat(3, 1fr); } }

/* --- Subtítulo em caixa alta, sob o H1 (linhas de SKU único) ----------------- */
.subtitulo-caps {
  margin-top: var(--e-3);
  font-size: var(--t-peq);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--branco-64);
}

/* --- Tecnologia + packshot: lista de recursos ao lado do produto (SKU único) - */
.tecnologia-grade {
  display: grid;
  gap: var(--e-8);
  align-items: start;
}
.tecnologia-lista {
  margin-top: var(--e-2);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-3);
  font-size: var(--t-corpo);
}
.tecnologia-lista li { padding-left: var(--e-6); position: relative; }
.tecnologia-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--azul);
  border-radius: 50%;
}
.tecnologia-grade .figura-produto { max-width: 24rem; margin-inline: auto; }
@media (min-width: 40rem) { .tecnologia-lista { grid-template-columns: 1fr 1fr; column-gap: var(--e-8); } }
@media (min-width: 64rem) {
  .tecnologia-grade { grid-template-columns: 1.2fr 1fr; }
  .tecnologia-grade .figura-produto { margin-inline: 0; }
}

/* --- Marcador de pendência: claim não confirmado, visível até validação ------
   Ver regra de execução em PAGINA-LEAVE-IN.md item 0.3 — não virar afirmação
   antes da confirmação do formulador/laboratório. */
.pendente {
  padding: 0.1em 0.5em;
  border-radius: var(--raio);
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.inverso .pendente { background: rgba(251, 191, 36, 0.22); color: #fbbf24; }

/* --- Popup de saída: 1ª tentativa de fechar/voltar por sessão, em
   qualquer página do catálogo (ver main.js). Reaproveita o padrão de
   overlay do .menu-mobile (home.css): oculto por padrão via CSS puro,
   sem produção de imagem nova. Some sozinho se o JS não rodar. --- */
.popup-saida {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--margem-x);
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--tempo) var(--curva), visibility 0s var(--tempo);
}
.popup-saida.visivel {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
body.popup-saida-aberto { overflow: hidden; }

.popup-saida-caixa {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  border-radius: var(--raio-g);
  background: var(--branco);
  color: var(--preto);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--tempo) var(--curva);
}
.popup-saida.visivel .popup-saida-caixa { transform: none; }

.popup-saida-caixa .eyebrow { justify-content: center; margin-bottom: var(--e-3); }
.popup-saida-caixa h3 { font-size: var(--t-h3); }
.popup-saida-caixa p:not(.eyebrow) { margin-top: var(--e-3); color: var(--preto-64); }

.popup-saida-fechar {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--preto-16);
  border-radius: 50%;
  background: none;
  color: var(--preto-64);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.popup-saida-fechar:hover { background: var(--preto-08); color: var(--preto); }

.popup-saida-whats {
  margin-top: var(--e-6);
  width: 100%;
  gap: var(--e-2);
  background: #25d366;
  border-color: #25d366;
  color: #06210f;
}
.popup-saida-whats:hover { background: #1fbd5a; border-color: #1fbd5a; }
.popup-saida-whats svg { flex: none; }

.popup-saida-continuar {
  display: block;
  margin: var(--e-4) auto 0;
  padding: var(--e-2);
  border: 0;
  background: none;
  color: var(--preto-64);
  font-size: var(--t-peq);
  font-weight: var(--peso-medium);
  text-decoration: underline;
  cursor: pointer;
}
.popup-saida-continuar:hover { color: var(--preto); }