/* Vitrine TechImports.
   Dois temas: escuro (padrão) e claro, escolhidos pelo sistema ou pelo botão do
   cabeçalho (data-tema no <html>). Cabeçalho e rodapé são sempre escuros (a logo e a
   identidade da marca são feitas para fundo preto).
   Paleta contida: preto/branco, superfícies neutras e cinzas. Dourado (da logo) só no
   preço e na linha sob o cabeçalho; verde do WhatsApp só nos botões que abrem o
   WhatsApp. Sem degradês, sombras ou animações.
   Escala de espaço única (4px): 4 8 12 16 24 32 48 64 96. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("fontes/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("fontes/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("fontes/inter-latin-600.woff2") format("woff2"); }

:root {
  --preto: #000;        /* texto sobre o verde do WhatsApp (os dois temas) */
  --fundo: #000;
  --superficie: #0c0c0c;
  --superficie-2: #141414;
  --linha: #1f1f1f;
  --linha-forte: #303030;
  --linha-hover: #4a4a4a;
  --texto: #fff;
  --texto-2: #a3a3a3;   /* 8,3:1 sobre preto */
  --texto-3: #8c8c8c;   /* 6,2:1 sobre preto */
  --dourado: #9e7d2d;   /* 5,4:1 sobre preto */
  --destaque-fundo: #fff; /* botão principal e filtro ativo */
  --destaque-texto: #000;
  --destaque-hover: #e6e6e6;
  --vidro: rgba(0, 0, 0, .92);
  --whatsapp: #25d366;  /* verde oficial; texto preto por cima (11:1) */
  --whatsapp-escuro: #1fb855;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --raio-p: 8px;
  --raio: 12px;
  --largura: 1240px;
  color-scheme: dark;
}

/* Tema claro: pelo sistema (sem escolha salva) ou pelo botão. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: #f5f5f3; --superficie: #fff; --superficie-2: #ececea;
    --linha: #e2e2de; --linha-forte: #cfcfca; --linha-hover: #a8a8a3;
    --texto: #111; --texto-2: #555; --texto-3: #666;   /* 6,8:1 e 5,3:1 sobre o fundo */
    --dourado: #7d6222;                                  /* 5,3:1 sobre o fundo */
    --destaque-fundo: #111; --destaque-texto: #fff; --destaque-hover: #333;
    --vidro: rgba(245, 245, 243, .92);
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo: #f5f5f3; --superficie: #fff; --superficie-2: #ececea;
  --linha: #e2e2de; --linha-forte: #cfcfca; --linha-hover: #a8a8a3;
  --texto: #111; --texto-2: #555; --texto-3: #666;
  --dourado: #7d6222;
  --destaque-fundo: #111; --destaque-texto: #fff; --destaque-hover: #333;
  --vidro: rgba(245, 245, 243, .92);
  color-scheme: light;
}

/* Cabeçalho e rodapé: sempre escuros, nos dois temas. */
.cabecalho, .rodape {
  --fundo: #000; --superficie: #0c0c0c; --linha: #1f1f1f; --linha-forte: #303030;
  --texto: #fff; --texto-2: #a3a3a3; --texto-3: #8c8c8c; --dourado: #9e7d2d;
  color-scheme: dark; color: var(--texto);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 18px; height: 18px; flex: none; fill: currentColor; }

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4); }
@media (min-width: 768px) { .conteudo { padding: 0 var(--e6); } }

/* Botões ------------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 0 var(--e5); border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.botao-pequeno { min-height: 40px; padding: 0 var(--e4); font-size: 14px; }
.botao-largo { width: 100%; min-height: 52px; font-size: 16px; }
.botao-whatsapp { background: var(--whatsapp); color: var(--preto); }
.botao-whatsapp:hover { background: var(--whatsapp-escuro); }
.botao-whatsapp:focus-visible { outline-color: var(--whatsapp); outline-offset: 3px; }
.botao-claro { background: var(--destaque-fundo); color: var(--destaque-texto); }
.botao-claro:hover { background: var(--destaque-hover); }
.botao-contorno { border-color: var(--linha-forte); color: var(--texto); }
.botao-contorno:hover { border-color: var(--texto); }
.link { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Cabeçalho (fixo no topo ao rolar) ------------------------------------------ */
.cabecalho {
  position: sticky; top: 0; z-index: 10;
  background: rgba(0, 0, 0, .96); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--dourado);
}
.cabecalho .conteudo { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: var(--e4); }
.marca { display: flex; align-items: center; }
.marca img { height: 36px; width: auto; }
.cabecalho .acoes { display: flex; align-items: center; gap: var(--e2); }
.menu { display: none; gap: var(--e5); margin-right: auto; margin-left: var(--e7); }
.menu a { color: var(--texto-2); font-size: 14px; font-weight: 500; }
.menu a:hover { color: var(--texto); }
@media (min-width: 900px) { .menu { display: flex; } }
.tema {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: none;
  color: var(--texto-2); cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.tema:hover { color: var(--texto); border-color: var(--texto-2); }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* Mostra o ícone do tema para o qual o botão leva. */
.tema .lua { display: none; }
:root[data-tema="claro"] .tema .lua { display: block; }
:root[data-tema="claro"] .tema .sol { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .tema .lua { display: block; }
  :root:not([data-tema="escuro"]) .tema .sol { display: none; }
}
@media (max-width: 360px) { .cabecalho .botao span { display: none; } .cabecalho .botao { padding: 0 var(--e3); } }

/* Abertura e filtros ------------------------------------------------------- */
.intro { padding: var(--e7) 0 var(--e5); display: grid; gap: var(--e2); }
.intro h1 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 768px) { .intro { padding-top: var(--e8); } .intro h1 { font-size: 36px; } }
.intro p { color: var(--texto-2); font-size: 15px; max-width: 64ch; }

/* Celular: busca, condição e ordenação em linhas próprias, na largura toda. */
.filtros { display: grid; gap: var(--e3); align-items: center; grid-template-columns: minmax(0, 1fr); }
.filtros .segmentos { display: flex; justify-self: stretch; }
.filtros .segmentos a { flex: 1; justify-content: center; }
.filtros .ordenar select { width: 100%; }
@media (min-width: 768px) {
  .filtros { grid-template-columns: minmax(240px, 340px) auto 1fr auto; gap: var(--e4); }
  .filtros .segmentos { display: inline-flex; justify-self: start; }
  .filtros .segmentos a { flex: none; }
  .filtros .ordenar { grid-column: 4; }
  .filtros .ordenar select { width: auto; }
}
.busca { position: relative; }
.busca .icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; color: var(--texto-3); pointer-events: none; }
.busca input, .ordenar select, .aplicar {
  font: inherit; font-size: 14px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p); height: 42px; width: 100%;
  transition: border-color .15s ease;
}
.busca input { padding: 0 var(--e3) 0 40px; }
.busca input::placeholder { color: var(--texto-3); }
.busca input:hover, .ordenar select:hover { border-color: var(--linha-hover); }
.busca input:focus { outline: none; border-color: var(--texto-2); }
.ordenar select {
  -webkit-appearance: none; appearance: none; cursor: pointer; width: auto; max-width: 100%;
  padding: 0 36px 0 var(--e3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a3a3a3' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
@media (min-width: 768px) { .ordenar select { min-width: 170px; } }
.aplicar { width: auto; padding: 0 var(--e4); }

/* Controle segmentado Todos / Novos / Usados */
.segmentos {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 42px;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie);
  justify-self: start; min-width: 0;
}
.segmentos a {
  display: inline-flex; align-items: center; height: 100%; padding: 0 var(--e4);
  border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--texto-2);
  transition: color .15s ease, background-color .15s ease;
}
.segmentos a:hover { color: var(--texto); }
.segmentos a[aria-current="true"] { background: var(--destaque-fundo); color: var(--destaque-texto); }
@media (max-width: 360px) { .segmentos a { padding: 0 var(--e3); } }

.contagem { color: var(--texto-3); font-size: 13px; padding: var(--e5) 0 var(--e4); }

/* Grade -------------------------------------------------------------------- */
.grade {
  list-style: none; margin: 0 0 var(--e9); padding: 0;
  display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade > li { display: flex; }

.cartao {
  display: flex; flex-direction: column; width: 100%;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; transition: border-color .15s ease;
}
.cartao:hover { border-color: var(--linha-forte); }
.cartao .foto { aspect-ratio: 4 / 5; flex: none; overflow: hidden; background: var(--superficie-2); border-bottom: 1px solid var(--linha); }
.cartao .foto > img { width: 100%; height: 100%; object-fit: cover; }
.cartao-corpo { display: flex; flex-direction: column; gap: 6px; padding: var(--e3) var(--e3) var(--e4); flex: 1; }
@media (min-width: 768px) { .cartao-corpo { padding: var(--e4) var(--e4) var(--e5); } }
.cartao .selos { margin-bottom: 2px; }
.cartao .modelo { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
@media (min-width: 768px) { .cartao .modelo { font-size: 16px; } }
.cartao .especificacao { color: var(--texto-2); font-size: 13px; }
.cartao .preco, .cartao .sem-preco { margin-top: auto; padding-top: var(--e3); }
.cartao .preco { font-size: 17px; }
.cartao:hover .modelo { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.preco { color: var(--dourado); font-weight: 600; white-space: nowrap; letter-spacing: -.01em; }
.sem-preco { color: var(--texto-2); font-weight: 500; font-size: 14px; }

/* Selos: condição e bateria */
.selos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.selo {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--e2);
  border: 1px solid var(--linha-forte); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2);
}
.bateria { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--texto-2); font-size: 13px; font-weight: 500; }
.bateria svg { width: 20px; height: 11px; flex: none; }
.bateria .corpo { fill: none; stroke: currentColor; stroke-width: 1; }
.bateria .polo, .bateria .nivel { fill: currentColor; }
.ficha .bateria { color: var(--texto); font-size: 14px; }

/* Aparelho sem foto */
.sem-foto { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--e3); }
.sem-foto img { width: 28%; height: auto; opacity: .85; }
.sem-foto.larga img { width: 56%; }
.sem-foto span { color: var(--texto-3); font-size: 12px; letter-spacing: .02em; }

/* Página do aparelho ------------------------------------------------------- */
.trilha { display: flex; align-items: center; gap: var(--e2); padding: var(--e5) 0; font-size: 13px; color: var(--texto-3); min-width: 0; }
.trilha a { color: var(--texto-2); }
.trilha a:hover { color: var(--texto); }
.trilha [aria-current] { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aparelho { display: grid; gap: var(--e6); padding-bottom: var(--e8); }
@media (min-width: 900px) {
  .aparelho { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e7); padding-bottom: var(--e9); align-items: start; }
}
/* Moldura 4:5 (foto de celular em pé). Foto inteira, sem corte. */
.galeria .principal, .slide {
  aspect-ratio: 4 / 5; background: var(--superficie-2); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden;
}
.galeria .principal > img, .slide > img { width: 100%; height: 100%; object-fit: contain; }
.carrossel {
  display: flex; gap: var(--e2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: var(--raio);
}
.carrossel::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; scroll-margin-top: 96px; }
.slide .posicao {
  position: absolute; right: var(--e3); bottom: var(--e3); font-size: 12px; font-weight: 500;
  color: var(--texto); background: rgba(0, 0, 0, .72); padding: 3px 10px; border-radius: 999px;
}
.miniaturas { display: flex; gap: var(--e2); margin-top: var(--e3); overflow-x: auto; }
.miniaturas a {
  display: block; flex: 0 0 64px; aspect-ratio: 4 / 5; border: 1px solid var(--linha);
  border-radius: var(--raio-p); overflow: hidden; opacity: .7; transition: opacity .15s ease, border-color .15s ease;
}
.miniaturas a:hover { opacity: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.galeria:not(:has(.slide:target)) .miniaturas a:first-child,
.galeria:has(#foto-1:target) .miniaturas a:nth-child(1),
.galeria:has(#foto-2:target) .miniaturas a:nth-child(2),
.galeria:has(#foto-3:target) .miniaturas a:nth-child(3),
.galeria:has(#foto-4:target) .miniaturas a:nth-child(4),
.galeria:has(#foto-5:target) .miniaturas a:nth-child(5),
.galeria:has(#foto-6:target) .miniaturas a:nth-child(6),
.galeria:has(#foto-7:target) .miniaturas a:nth-child(7),
.galeria:has(#foto-8:target) .miniaturas a:nth-child(8) { border-color: var(--texto); opacity: 1; }
@media (min-width: 900px) { .galeria { position: sticky; top: 96px; } }

.info { display: grid; gap: var(--e5); align-content: start; }
.info .cabeca { display: grid; gap: var(--e2); }
.info .cabeca .selos { margin-bottom: var(--e1); }
.info h1 { font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 900px) { .info h1 { font-size: 36px; } }
.info .especificacao { color: var(--texto-2); font-size: 16px; }
.compra { display: grid; gap: var(--e4); padding: var(--e5) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.compra .preco { font-size: 30px; line-height: 1.1; }
.compra .sem-preco { font-size: 20px; color: var(--texto); }
.nota { color: var(--texto-3); font-size: 13px; }

.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e4) var(--e5); }
.secao { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--e2); }
.ficha { margin: 0; }
.ficha div { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.ficha div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha dt { color: var(--texto-2); font-size: 14px; }
.ficha dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; }
.descricao { max-width: 60ch; line-height: 1.6; }

/* Celular: botão fixo no rodapé da tela */
.barra-interesse {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  padding: var(--e3) var(--e4); padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: var(--vidro); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
}
@media (min-width: 900px) {
  .barra-interesse { position: static; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 899px) { body.com-barra { padding-bottom: 84px; } }

/* Estados ------------------------------------------------------------------ */
.aviso { padding: var(--e8) 0 var(--e9); max-width: 46ch; }
.aviso h1, .aviso h2 { font-size: 24px; line-height: 1.25; font-weight: 600; margin-bottom: var(--e3); letter-spacing: -.015em; }
.aviso p { color: var(--texto-2); margin-bottom: var(--e5); }
.vazio-acoes { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e5); align-items: center; }

/* Chips de categoria (catálogo) */
.chips { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e4); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 var(--e4);
  border: 1px solid var(--linha-forte); border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--texto-2); transition: border-color .15s ease, color .15s ease;
}
.chips a:hover { color: var(--texto); border-color: var(--linha-hover); }
.chips a[aria-current="true"] { background: var(--destaque-fundo); color: var(--destaque-texto); border-color: var(--destaque-fundo); }

/* Página inicial ----------------------------------------------------------- */
body { overflow-x: clip; } /* faixas de largura total não criam rolagem lateral */

.hero { display: grid; gap: var(--e7); align-items: center; padding: var(--e8) 0 var(--e7); }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e8); padding: var(--e9) 0; } }
.sobretitulo { color: var(--texto-2); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--e5); }
.hero h1 { font-size: 38px; line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.hero h1 .tom { color: var(--texto-3); }
@media (min-width: 768px) { .hero h1 { font-size: 48px; } }
@media (min-width: 1100px) { .hero h1 { font-size: 48px; } .hero h1 span { display: block; } }
.hero-sub { color: var(--texto-2); font-size: 17px; line-height: 1.6; max-width: 44ch; margin-top: var(--e5); }
@media (min-width: 768px) { .hero-sub { font-size: 18px; } }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.confianca { list-style: none; padding: 0; margin: var(--e6) 0 0; display: flex; flex-wrap: wrap; gap: var(--e2); color: var(--texto-2); font-size: 13px; }
.confianca li { display: inline-flex; align-items: center; gap: var(--e1); padding: 6px var(--e3); border: 1px solid var(--linha-forte); border-radius: 999px; }
.confianca strong { color: var(--texto); font-weight: 600; }

/* Mosaico: uma foto grande e até duas ao lado, com modelo e preço por cima. */
.mosaico { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico a { position: relative; display: block; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--superficie-2); aspect-ratio: 4 / 5; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mosaico a:hover img { transform: scale(1.03); }
.mosaico .etiqueta {
  position: absolute; left: var(--e3); bottom: var(--e3); right: var(--e3); width: fit-content; max-width: calc(100% - 24px);
  padding: 6px var(--e3); border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mosaico.n3 { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.mosaico.n3 a { aspect-ratio: auto; }
.mosaico.n3 a:first-child { grid-row: span 2; aspect-ratio: 3 / 5; }
.mosaico.n2 a:last-child { margin-top: var(--e7); }
.mosaico.n1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }

/* Faixa de marcas */
.marcas {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--e3) var(--e7);
  padding: var(--e6) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.marcas span { color: var(--texto-3); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.marcas .outras { font-size: 15px; font-weight: 500; letter-spacing: 0; }
@media (min-width: 768px) { .marcas span { font-size: 30px; } }

.bloco { padding: var(--e8) 0; }
.bloco + .bloco { border-top: 1px solid var(--linha); }
.bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e6); }
.bloco-topo h2, .chamada h2 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
@media (min-width: 768px) { .bloco-topo h2, .chamada h2 { font-size: 36px; } }
.bloco .grade { margin-bottom: 0; }

/* Faixa de largura total com fundo próprio (ritmo entre as seções). */
.faixa {
  margin-inline: calc(50% - 50vw); padding: var(--e8) calc(50vw - 50%);
  background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}

.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.categorias a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e4);
  padding: var(--e3); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color .15s ease;
}
.categorias a:hover { border-color: var(--linha-hover); }
.categorias .ilustracao { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--raio-p); background: var(--superficie-2); }
.categorias img { max-width: 52px; max-height: 52px; width: auto; height: auto; }
:root:not([data-tema="claro"]) .categorias img { filter: invert(.75); }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .categorias img { filter: none; } }
.rotulo-categoria { display: grid; gap: 2px; }
.categorias .nome { font-weight: 600; font-size: 16px; }
.categorias .quantidade { color: var(--texto-2); font-size: 13px; }
.categorias .seta { color: var(--texto-3); font-size: 18px; padding-right: var(--e2); transition: transform .15s ease, color .15s ease; }
.categorias a:hover .seta { color: var(--texto); transform: translateX(3px); }

/* Como comprar: numeração editorial */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e6); }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e7); } }
.passos li { border-top: 1px solid var(--linha-forte); padding-top: var(--e5); }
.passos .numero { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--texto-3); margin-bottom: var(--e5); }
.passos h3, .diferenciais h3 { font-size: 18px; font-weight: 600; margin: 0 0 var(--e2); }
.passos p, .diferenciais p { color: var(--texto-2); margin: 0; line-height: 1.6; }

.diferenciais { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.diferenciais li { padding: var(--e5); border-left: 2px solid var(--linha-forte); }

.depoimentos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.depoimentos blockquote { margin: 0; height: 100%; display: flex; flex-direction: column; gap: var(--e4); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e5); }
.depoimentos p { margin: 0; line-height: 1.6; }
.depoimentos footer { margin-top: auto; display: flex; align-items: center; gap: var(--e3); font-size: 14px; }
.depoimentos .avatar {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--superficie-2); border: 1px solid var(--linha-forte); font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
.depoimentos .quem { display: grid; line-height: 1.35; }
.depoimentos .quem strong { font-weight: 600; }
.depoimentos .quem span { color: var(--texto-2); font-size: 13px; }
.faixa-exemplo {
  margin: 0 0 var(--e4); padding: var(--e2) var(--e3); border: 1px dashed var(--linha-hover); border-radius: var(--raio-p);
  color: var(--texto-2); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.clientes-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e5); padding: var(--e7) 0 var(--e9); }

.perguntas { display: grid; max-width: 760px; border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: var(--e4) var(--e6) var(--e4) 0; font-weight: 500; position: relative; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--texto-2); font-size: 20px; }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { margin: 0 0 var(--e4); color: var(--texto-2); line-height: 1.6; max-width: 65ch; }

.chamada {
  display: grid; gap: var(--e6); margin: var(--e8) 0 var(--e9); padding: var(--e7) var(--e5);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px;
}
@media (min-width: 768px) { .chamada { padding: var(--e8); } }
@media (min-width: 900px) { .chamada { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; } }
.chamada-texto p { color: var(--texto-2); font-size: 17px; line-height: 1.6; max-width: 46ch; margin-top: var(--e4); }
.contato-dados { margin: 0; display: grid; gap: var(--e4); }
.contato-dados dt { color: var(--texto-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--e1); }
.contato-dados dd { margin: 0; line-height: 1.6; }

/* Rodapé ------------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--linha); color: var(--texto-2); font-size: 14px; background: var(--superficie); }
.rodape-colunas { display: grid; gap: var(--e6); padding-top: var(--e7); padding-bottom: var(--e6); }
@media (min-width: 768px) { .rodape-colunas { grid-template-columns: 1fr auto; align-items: start; } }
.rodape-marca { display: grid; gap: var(--e3); }
.rodape-links { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e2); }
.rodape-links a { color: var(--texto-2); }
.rodape-links a:hover { color: var(--texto); }
.rodape-marca img { height: 30px; width: auto; }
.rodape-contato { display: grid; gap: var(--e2); }
.rodape-contato .secao { margin: 0; }
.rodape-contato a { display: inline-flex; align-items: center; gap: var(--e2); color: var(--texto); }
.rodape-contato a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-contato .icone { width: 16px; height: 16px; color: var(--whatsapp); }
.rodape-base { border-top: 1px solid var(--linha); padding-top: var(--e4); margin-top: 0; padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px)); color: var(--texto-3); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }