/* ==========================================================================
   paginas.css — estilos específicos de cada página
   ========================================================================== */

/* ---------- HOME: herói ---------- */
.heroi__interno {
  position: relative; z-index: 2;
  min-height: min(92svh, 820px);
  display: grid; align-items: center;
  padding-block: var(--e-9) var(--e-8);
}
.heroi__conteudo { max-width: 660px; }
.heroi__selo {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: .2rem var(--e-2); max-width: 100%;
  padding: .45rem 1rem; border-radius: var(--raio-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; margin-bottom: var(--e-4);
  line-height: 1.5;
}
.heroi__selo b { color: var(--marca-400); white-space: nowrap; }
.heroi h1 { color: #fff; margin-bottom: var(--e-4); }
.heroi h1 em { font-style: normal; color: var(--marca-500); }
.heroi__texto { font-size: var(--t-md); color: #C8CFDA; max-width: 54ch; margin-bottom: var(--e-6); }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-7); }
.heroi__indicadores { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-6); }
.heroi__indicadores .indicador { text-align: left; }
.heroi__indicadores .indicador__rotulo { color: #9AA3B2; }

/* Cartões flutuantes 3D sobre o herói */
.heroi__flutuantes { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
@media (min-width: 1100px) { .heroi__flutuantes { display: block; } }
.flutuante {
  position: absolute; pointer-events: auto;
  display: flex; gap: var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4); border-radius: var(--raio);
  background: rgba(20,24,31,.72); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); box-shadow: var(--sombra-3); font-size: var(--t-sm);
}
.flutuante strong { display: block; font-size: var(--t-xs); color: var(--marca-400); letter-spacing: .1em; text-transform: uppercase; }
.flutuante--1 { top: 22%; right: 6%; animation: flutuar 7s ease-in-out infinite; }
.flutuante--2 { bottom: 26%; right: 16%; animation: flutuar 9s ease-in-out 1s infinite; }

/* ---------- HOME: blocos ---------- */
.destaque-visual { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--e-7); align-items: center; }
.destaque-visual__midia { border-radius: var(--raio-lg); overflow: hidden; box-shadow: var(--sombra-2); }
.lista-checada { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.lista-checada li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-checada b { display: block; }
.lista-checada span { font-size: var(--t-sm); color: var(--texto-suave); }
.lista-checada .marcador { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--marca-500) 20%, transparent); color: var(--marca-600); font-weight: 800; font-size: 13px; }

.passos { counter-reset: passo; display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.passo { position: relative; padding: var(--e-5); border-radius: var(--raio-lg); border: 1px dashed var(--borda-forte); }
.passo::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-titulo); font-size: var(--t-xl); font-weight: 700;
  color: color-mix(in srgb, var(--marca-500) 70%, transparent); display: block; margin-bottom: var(--e-3);
}
.passo h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.passo p { font-size: var(--t-sm); color: var(--texto-suave); }

.faixa-cta {
  border-radius: var(--raio-lg); padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  background: linear-gradient(120deg, var(--marca-600), var(--marca-500) 55%, var(--marca-400));
  color: var(--grafite-900); display: grid; gap: var(--e-5);
  grid-template-columns: 1fr auto; align-items: center;
}
.faixa-cta h2 { font-size: var(--t-xl); }
@media (max-width: 760px) { .faixa-cta { grid-template-columns: 1fr; } }

/* ---------- Topo interno das páginas ---------- */
.topo-pagina { padding-block: var(--e-7) var(--e-6); background: var(--fundo-elevado); border-bottom: 1px solid var(--borda); }
.topo-pagina h1 { font-size: var(--t-2xl); margin-block: var(--e-3) var(--e-3); }
.topo-pagina p { color: var(--texto-suave); max-width: var(--largura-texto); }

/* ---------- CATÁLOGO ---------- */
.catalogo { display: grid; grid-template-columns: 268px 1fr; gap: var(--e-6); align-items: start; }
.filtros { position: sticky; top: calc(var(--altura-header) + 20px); display: grid; gap: var(--e-5);
  padding: var(--e-5); border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--fundo-elevado); }
.filtros h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em; }
.filtros__grupo { display: grid; gap: var(--e-2); }
.filtros__opcao { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); cursor: pointer; }
.catalogo__barra { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; margin-bottom: var(--e-5); }
.catalogo__barra > * { min-width: 0; }
.catalogo__contador { font-size: var(--t-sm); color: var(--texto-suave); }
.busca { position: relative; flex: 1 1 min(260px, 100%); min-width: 0; }
.busca input { padding-left: 2.6rem; }
.busca svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }
.vazio { padding: var(--e-8) var(--e-5); text-align: center; border: 1px dashed var(--borda-forte); border-radius: var(--raio-lg); color: var(--texto-suave); }
@media (max-width: 900px) { .catalogo { grid-template-columns: 1fr; } .filtros { position: static; } }

/* ---------- GALERIA ---------- */
.video-loja { position: relative; border-radius: var(--raio-lg); overflow: hidden; box-shadow: var(--sombra-3); background: #000; }
.video-loja video, .video-loja img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video-loja__aviso { position: absolute; inset: auto var(--e-4) var(--e-4) var(--e-4); background: rgba(18,21,26,.82);
  color: #fff; padding: var(--e-3) var(--e-4); border-radius: var(--raio); font-size: var(--t-xs); }
.mosaico { columns: 3 clamp(180px, 42vw, 280px); column-gap: var(--e-4); }
.mosaico figure { break-inside: avoid; margin-bottom: var(--e-4); border-radius: var(--raio); overflow: hidden;
  position: relative; cursor: zoom-in; border: 1px solid var(--borda); background: var(--fundo-elevado); }
.mosaico img { width: 100%; transition: transform var(--transicao-lenta); }
.mosaico figure:hover img { transform: scale(1.05); }
.mosaico figcaption { position: absolute; inset: auto 0 0 0; padding: var(--e-4) var(--e-3) var(--e-3);
  background: linear-gradient(transparent, rgba(10,12,16,.85)); color: #fff; font-size: var(--t-sm); font-weight: 600; }

/* ---------- SOBRE ---------- */
.linha-tempo { display: grid; gap: var(--e-5); border-left: 2px solid var(--borda-forte); padding-left: var(--e-5); min-width: 0; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: calc(-1 * var(--e-5) - 7px); top: 8px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--marca-500); box-shadow: 0 0 0 4px var(--fundo); }
.linha-tempo b { font-family: var(--fonte-titulo); color: var(--marca-600); }
.valores { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.valor { padding: var(--e-5); border-radius: var(--raio); background: var(--fundo-elevado); border: 1px solid var(--borda); }

/* ---------- CONTATO ---------- */
.contato { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--e-7); align-items: start; }
.contato__dados { display: grid; gap: var(--e-4); }
.dado { display: flex; gap: var(--e-3); padding: var(--e-4); border-radius: var(--raio); border: 1px solid var(--borda); background: var(--fundo-elevado); }
.dado strong { display: block; font-size: var(--t-sm); }
.dado span, .dado a { font-size: var(--t-sm); color: var(--texto-suave); }
.mapa { border: 0; width: 100%; aspect-ratio: 16/10; border-radius: var(--raio-lg); filter: grayscale(.25); }
.horarios { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.horarios td { padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.horarios td:last-child { text-align: right; font-weight: 600; }
@media (max-width: 900px) { .contato, .destaque-visual { grid-template-columns: 1fr; } }

/* ---------- ORÇAMENTO ---------- */
.orcamento { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--e-7); align-items: start; }
.resumo-lista { border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--fundo-elevado); padding: var(--e-5); position: sticky; top: calc(var(--altura-header) + 20px); }
.resumo-lista__itens { display: grid; gap: var(--e-3); margin-block: var(--e-4); max-height: 46vh; overflow-y: auto; }
@media (max-width: 900px) { .orcamento { grid-template-columns: 1fr; } .resumo-lista { position: static; } }

/* ---------- BLOG ---------- */
.post-cartao__midia { aspect-ratio: 16/9; overflow: hidden; }
.post-cartao__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.cartao:hover .post-cartao__midia img { transform: scale(1.035); }
.post-cartao__corpo { padding: var(--e-4); display: grid; gap: var(--e-2); }
.post-meta { font-size: var(--t-xs); color: var(--texto-suave); letter-spacing: .06em; text-transform: uppercase; }
.artigo { max-width: 72ch; margin-inline: auto; }
.artigo h2 { font-size: var(--t-xl); margin-top: var(--e-6); margin-bottom: var(--e-3); }
.artigo h3 { margin-top: var(--e-5); margin-bottom: var(--e-2); }
.artigo p, .artigo li { margin-bottom: var(--e-3); color: var(--texto-suave); }
.artigo ul { list-style: disc; padding-left: 1.3rem; }
.artigo ol { list-style: decimal; padding-left: 1.3rem; }
.artigo strong { color: var(--texto); }
.artigo__capa { border-radius: var(--raio-lg); overflow: hidden; margin-bottom: var(--e-6); }
.caixa-destaque { padding: var(--e-5); border-left: 4px solid var(--marca-500); background: var(--fundo-elevado);
  border-radius: 0 var(--raio) var(--raio) 0; margin-block: var(--e-5); }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-block: var(--e-4); }
.tabela-simples th, .tabela-simples td { padding: .7rem; border: 1px solid var(--borda); text-align: left; }
.tabela-simples th { background: var(--fundo-elevado); font-weight: 700; }

/* ---------- 404 ---------- */
.erro-404 { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.erro-404 .codigo { font-family: var(--fonte-titulo); font-size: clamp(5rem, 18vw, 11rem); font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, var(--marca-500), var(--marca-700)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Impressão ---------- */
/* ---------- Ajustes de tela pequena ---------- */
@media (max-width: 720px) {
  /* O herói ocupa menos altura: o conteúdo seguinte aparece sem tanto rolar. */
  .heroi__interno { min-height: auto; padding-block: var(--e-8) var(--e-7); }
  .heroi__acoes { gap: var(--e-3); }
  .heroi__acoes .botao { flex: 1 1 100%; }
  .heroi__indicadores { gap: var(--e-4) var(--e-5); }
  .heroi__indicadores .indicador { flex: 1 1 30%; min-width: 0; }
  .rolar-indicador { display: none; }
  .destaque-visual { gap: var(--e-6); }
  .video-loja__aviso { position: static; margin-top: var(--e-2); border-radius: var(--raio-sm); }
}
@media (max-width: 480px) {
  .faixa-cta { padding: var(--e-5) var(--e-4); }
  .filtros { padding: var(--e-4); }
  .resumo-lista { padding: var(--e-4); }
  .linha-tempo { padding-left: var(--e-4); }
}

@media print {
  .cabecalho, .rodape, .whats-flutuante, .heroi__canvas, .painel, .cortina { display: none !important; }
  body { background: #fff; color: #000; }
}
