/*
 * landing.css — as páginas comuns do site (index, como-funciona, recursos, para-quem, perguntas, contato e os
 * documentos legais): HTML de verdade, uma página por assunto, separadas da ferramenta (app.html).
 * Carrega depois de tokens, base e components; nada daqui vale dentro da ferramenta.
 * Simetria: cabeçalhos de seção centralizados e grades que fecham cheias (4, 3x3, 3, 3 e 6+6).
 */

/* âncoras dentro da página (voltar ao topo, sumário dos documentos): rolagem suave e o título não some atrás do cabeçalho fixo */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.vitrine__corpo:focus { outline: none; }
.vitrine__link, .vitrine__topo-link { text-decoration: none; }
.vitrine__tags { color: var(--cor-destaque); overflow-wrap: anywhere; }
.vitrine__sem-script { color: var(--cor-texto-suave); font-size: var(--tam-sm); text-align: center; }

.vitrine { --largura-vitrine: 72rem; display: flex; flex-direction: column; min-height: 100vh; }
.vitrine h1:focus, .vitrine h2:focus { outline: none; }
.vitrine__topo {
  position: sticky; top: 0; z-index: var(--z-topbar); padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--cor-fundo) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.vitrine__barra { display: flex; align-items: center; gap: var(--esp-4); max-width: var(--largura-vitrine); height: 4rem; margin: 0 auto; padding: 0 var(--esp-4); }
.vitrine__logo { padding: 0; color: var(--cor-texto); text-decoration: none; }
.vitrine__logo:hover { color: var(--cor-texto); }
.vitrine__nav { display: none; flex: 1; justify-content: center; gap: var(--esp-1); }
.vitrine__acoes { display: flex; align-items: center; gap: var(--esp-2); margin-left: auto; }
.vitrine__link {
  padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--raio-md); background: none;
  color: var(--cor-texto-suave); font-size: var(--tam-sm); font-weight: var(--peso-medio);
}
.vitrine__link:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.vitrine__link[aria-current="page"] { background: var(--cor-destaque-suave); color: var(--cor-destaque); }
@media (min-width: 56rem) {
  /* três colunas iguais: o menu fica no centro exato da página, com logo e botões equilibrados nas pontas */
  .vitrine__barra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .vitrine__nav { display: flex; }
  .vitrine__acoes { justify-self: end; margin-left: 0; }
  .vitrine__menu { display: none; }
}
/* menu do celular: <details> nativo; o painel desce do cabeçalho, com os links em botões da largura toda */
.vitrine__menu > summary { list-style: none; cursor: pointer; }
.vitrine__menu > summary::-webkit-details-marker { display: none; }
.vitrine__menu-abrir, .vitrine__menu-fechar { display: grid; place-items: center; }
.vitrine__menu-abrir svg, .vitrine__menu-fechar svg { width: 1.35rem; height: 1.35rem; }
.vitrine__menu-fechar, .vitrine__menu[open] .vitrine__menu-abrir { display: none; }
.vitrine__menu[open] .vitrine__menu-fechar { display: grid; }
.vitrine__menu[open] > summary { background: var(--cor-superficie-2); color: var(--cor-texto); }
.vitrine__menu-painel {
  position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-4) var(--esp-4); background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra-md);
}
.vitrine__menu-painel > .vitrine__link {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; font-size: var(--tam-md);
  border: 1px solid var(--cor-borda); background: var(--cor-superficie);
}
@media (min-width: 36rem) {
  /* tablet: os cinco links em duas colunas iguais, o último (Contato) ocupa a linha toda */
  .vitrine__menu-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrine__menu-painel > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.vitrine__corpo {
  display: flex; flex-direction: column; gap: var(--esp-8); width: 100%; max-width: var(--largura-vitrine);
  margin: 0 auto; padding: 0 var(--esp-4) var(--esp-8);
}
@media (min-width: 48rem) { .vitrine__corpo { gap: calc(var(--esp-8) * 1.5); padding: 0 var(--esp-6) var(--esp-8); } }

/* topo: centralizado no celular, duas colunas equilibradas no computador */
.vitrine__hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--esp-6); padding-top: var(--esp-6); text-align: center; }
.vitrine__hero-texto { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); }
.vitrine__hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -0.02em; }
.vitrine__lead { max-width: 40rem; color: var(--cor-texto-suave); font-size: var(--tam-lg); }
/* botões de chamada sempre com a mesma largura: um embaixo do outro no celular, lado a lado depois */
.vitrine__ctas { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; gap: var(--esp-2); width: min(100%, 20rem); margin: 0 auto; }
@media (min-width: 36rem) { .vitrine__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 28rem); } }
.vitrine__ctas > .btn { white-space: normal; text-align: center; }
/* selos de confiança: três colunas iguais, ícone em cima no celular; numa linha só depois */
.vitrine__confianca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); width: min(100%, 28rem); font-size: var(--tam-xs); color: var(--cor-texto-suave); }
.vitrine__confianca li { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); text-align: center; }
.vitrine__confianca svg { width: 1.15rem; height: 1.15rem; color: var(--cor-ok); }
@media (min-width: 36rem) {
  .vitrine__confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2) var(--esp-5); width: auto; font-size: var(--tam-sm); }
  .vitrine__confianca li { flex-direction: row; }
}
@media (min-width: 62rem) {
  .vitrine__hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-7); padding-top: var(--esp-7); text-align: left; }
  .vitrine__hero-texto { align-items: flex-start; }
  .vitrine__hero .vitrine__ctas { margin: 0; }
  .vitrine__hero .vitrine__confianca { justify-content: flex-start; }
}

.inicio-vitrine { display: flex; justify-content: center; align-items: flex-end; gap: var(--esp-3); padding: var(--esp-6) var(--esp-3); border-radius: var(--raio-lg); background: linear-gradient(160deg, var(--cor-destaque-suave), var(--cor-superficie-2)); }
.inicio-vitrine__item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: var(--esp-2); min-width: 0; max-width: 13.75rem; }
/* as artes já nascem na proporção final (4:5, 1:1): a página não pula enquanto elas são desenhadas */
.inicio-vitrine__item canvas { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: var(--raio-md); box-shadow: var(--sombra-lg); }
.inicio-vitrine__item figcaption { font-size: var(--tam-xs); color: var(--cor-texto-suave); font-weight: var(--peso-medio); text-align: center; }
.inicio-vitrine__item--1 { transform: rotate(-4deg) translateY(var(--esp-3)); }
.inicio-vitrine__item--2 { z-index: 1; }
.inicio-vitrine__item--3 { transform: rotate(4deg) translateY(var(--esp-3)); }

/* seções: cabeçalho sempre centralizado (selo, título, texto de apoio) */
.vitrine__secao { display: flex; flex-direction: column; gap: var(--esp-6); } /* o recuo do cabeçalho fixo vem do scroll-padding-top do html */
.vitrine__cabecalho { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); max-width: 44rem; margin: 0 auto; text-align: center; }
.vitrine__cabecalho h2 { font-size: clamp(var(--tam-xl), 4vw, 2.25rem); letter-spacing: -0.01em; }
/* primeira seção das páginas internas: o título dela é o h1 da página e os cartões descem para h2 */
.vitrine__secao--abertura { padding-top: var(--esp-7); }
.vitrine__cabecalho h1 { font-size: clamp(var(--tam-2xl), 5vw, 2.5rem); letter-spacing: -0.02em; }
.vitrine__secao--abertura .vitrine__cartao h2 { font-size: var(--tam-lg); }

/* grades que fecham cheias: 4 passos (1, 2x2, 4) e grupos de 3 (1 ou 3 colunas) */
.vitrine__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
@media (min-width: 40rem) { .vitrine__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .vitrine__grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .vitrine__grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitrine__cartao { display: flex; flex-direction: column; gap: var(--esp-3); height: 100%; }
.vitrine__cartao h3 { font-size: var(--tam-lg); }
.vitrine__cartao p { color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.vitrine__ir { margin-top: auto; color: var(--cor-destaque); font-size: var(--tam-sm); font-weight: var(--peso-medio); } /* "Ver …" no pé do cartão: alinhado entre cartões da mesma linha */
.vitrine__icone { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--raio-md); background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.vitrine__icone svg { width: 1.4rem; height: 1.4rem; }
.vitrine__passo { position: relative; }
.vitrine__num { position: absolute; top: var(--esp-4); right: var(--esp-5); font-size: var(--tam-2xl); font-weight: var(--peso-forte); color: var(--cor-borda-forte); font-variant-numeric: tabular-nums; }

/* exemplo real: arte e texto lado a lado */
.vitrine__anatomia { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--esp-5); }
@media (min-width: 56rem) { .vitrine__anatomia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); } }
.vitrine__anatomia-arte { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
.vitrine__anatomia-arte canvas { width: 100% !important; max-width: 26rem; height: auto !important; aspect-ratio: 1; border-radius: var(--raio-lg); box-shadow: var(--sombra-lg); }
.vitrine__anatomia-arte figcaption, .vitrine__pagina figcaption { font-size: var(--tam-xs); color: var(--cor-texto-suave); }
.vitrine__partes { display: flex; flex-direction: column; gap: var(--esp-4); }
.vitrine__partes dt { font-size: var(--tam-xs); font-weight: var(--peso-forte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-destaque); }
.vitrine__partes dd { margin: var(--esp-1) 0 0; font-size: var(--tam-sm); overflow-wrap: anywhere; }
.vitrine__legenda { white-space: pre-line; }

/* carrossel de exemplo: faixa que rola de lado no celular, centralizada quando cabe */
.vitrine__faixa { display: flex; justify-content: safe center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-1) var(--esp-4); overflow-x: auto; scroll-snap-type: x mandatory; }
.vitrine__pagina { display: flex; flex: 0 0 min(12.5rem, 62vw); flex-direction: column; align-items: center; gap: var(--esp-2); scroll-snap-align: center; }
.vitrine__pagina canvas { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: var(--raio-md); box-shadow: var(--sombra-md); }

.vitrine__chamada { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); padding: var(--esp-7) var(--esp-5); border-radius: var(--raio-lg); background: var(--cor-destaque-suave); text-align: center; }
.vitrine__chamada h2 { font-size: clamp(var(--tam-xl), 4vw, 2rem); }
.vitrine__chamada p { max-width: 36rem; color: var(--cor-texto-suave); }

/* Rodapé da página inicial: faixa escura com brilho violeta no alto, duas metades espelhadas (marca e
   selos | três colunas de quatro links) e a faixa de baixo com o crédito "SocialFlow criado por B20 Conteúdo Digital". */
.vitrine__rodape {
  --cor-foco: var(--cor-rodape-destaque); /* anel de foco visível sobre o fundo escuro */
  position: relative; overflow: hidden;
  padding: var(--esp-8) var(--esp-4) calc(var(--esp-8) + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(60rem 22rem at 50% -4rem, color-mix(in srgb, var(--cor-rodape-destaque) 24%, transparent), transparent 70%), var(--cor-rodape);
  color: var(--cor-sobre-rodape);
}
.vitrine__rodape::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cor-rodape-destaque), var(--cor-rodape-destaque-2), transparent);
}
.vitrine__rodape-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-7); max-width: var(--largura-vitrine); margin: 0 auto; }
.vitrine__rodape-marca { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); text-align: center; }
.vitrine__rodape-marca .logo-app { padding: 0; color: var(--cor-sobre-rodape); font-size: var(--tam-xl); }
.vitrine__rodape-marca .logo-app__selo { background: linear-gradient(135deg, var(--cor-rodape-destaque), var(--cor-rodape-destaque-2)); color: var(--cor-rodape); }
.vitrine__rodape-marca p { max-width: 26rem; color: var(--cor-sobre-rodape-suave); font-size: var(--tam-sm); }
.vitrine__rodape-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); }
.vitrine__rodape-selos li {
  display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-rodape-linha); border-radius: var(--raio-total); background: var(--cor-rodape-vidro);
  color: var(--cor-sobre-rodape); font-size: var(--tam-xs);
}
.vitrine__rodape-selos svg { width: 1rem; height: 1rem; color: var(--cor-rodape-destaque); }
@media (max-width: 35.99rem) {
  /* celular: três selos em colunas iguais, ícone sobre o texto (nada de 2 + 1) */
  .vitrine__rodape-selos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .vitrine__rodape-selos li { flex-direction: column; justify-content: center; padding: var(--esp-2); border-radius: var(--raio-md); text-align: center; }
}
.vitrine__rodape-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
.vitrine__coluna { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; }
.vitrine__coluna h2 { font-size: var(--tam-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-rodape-destaque); }
.vitrine__coluna ul { display: flex; flex-direction: column; gap: var(--esp-2); }
.vitrine__coluna a, .vitrine__coluna .vitrine__link {
  padding: 0; border-radius: var(--raio-sm); background: none; color: var(--cor-sobre-rodape-suave);
  font-size: var(--tam-sm); text-align: inherit; text-decoration: none; transition: color var(--dur-rapida) var(--ease);
}
.vitrine__coluna a:hover, .vitrine__coluna .vitrine__link:hover { background: none; color: var(--cor-sobre-rodape); text-decoration: underline; text-underline-offset: 0.2em; }
.vitrine__rodape-base {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--esp-3);
  max-width: var(--largura-vitrine); margin: var(--esp-7) auto 0; padding-top: var(--esp-5);
  border-top: 1px solid var(--cor-rodape-linha); color: var(--cor-sobre-rodape-suave); font-size: var(--tam-xs); text-align: center;
}
.vitrine__credito { color: var(--cor-sobre-rodape); font-size: var(--tam-sm); }
.vitrine__rodape-base p a { color: var(--cor-sobre-rodape-suave); text-decoration: none; }
.vitrine__rodape-base p a:hover, .vitrine__rodape-base p a[aria-current="page"] { color: var(--cor-sobre-rodape); text-decoration: underline; text-underline-offset: 0.2em; }
.vitrine__mais { color: var(--cor-texto-suave); font-size: var(--tam-sm); text-align: center; }
.vitrine__rodape .assinatura {
  font-weight: 800; letter-spacing: 0.03em;
  background: linear-gradient(90deg, var(--cor-rodape-destaque), var(--cor-rodape-destaque-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine__topo-link {
  display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-rodape-linha); border-radius: var(--raio-total); background: var(--cor-rodape-vidro);
  color: var(--cor-sobre-rodape); font-size: var(--tam-xs);
}
.vitrine__topo-link:hover { border-color: var(--cor-rodape-destaque); }
.vitrine__topo-link svg { width: 0.9rem; height: 0.9rem; }
@media (min-width: 48rem) {
  /* faixa de baixo em três terços iguais: ano à esquerda, crédito no centro exato, voltar ao topo à direita */
  .vitrine__rodape-base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vitrine__rodape-base > :first-child { justify-self: start; }
  .vitrine__rodape-base > :last-child { justify-self: end; }
}
@media (min-width: 56rem) {
  .vitrine__rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .vitrine__rodape-marca { align-items: flex-start; text-align: left; }
  .vitrine__rodape-selos { justify-content: flex-start; }
  .vitrine__coluna { align-items: flex-start; text-align: left; }
}
@media (min-width: 62rem) { .vitrine__rodape { padding-bottom: calc(var(--esp-6) + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Documentos legais (privacidade.html, termos.html) ---------- */
/* Coluna de leitura de 48rem; sumário em duas colunas iguais (8 + 8 cláusulas); cláusulas numeradas. */
.documento__artigo { display: flex; flex-direction: column; gap: var(--esp-6); width: 100%; max-width: 48rem; margin: 0 auto; padding-top: var(--esp-7); }
.documento__cabecalho { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; }
.documento__cabecalho h1 { font-size: clamp(var(--tam-2xl), 5vw, 2.5rem); letter-spacing: -0.02em; }
.documento__cabecalho h1:focus { outline: none; }
.documento__data { color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.documento__sumario h2 { margin-bottom: var(--esp-3); font-size: var(--tam-md); }
.documento__sumario-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2) var(--esp-6); }
@media (min-width: 40rem) { .documento__sumario-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.documento__sumario-coluna { display: flex; flex-direction: column; gap: var(--esp-2); }
.documento__sumario a { color: var(--cor-texto); font-size: var(--tam-sm); text-decoration: none; }
.documento__sumario a:hover { color: var(--cor-destaque); text-decoration: underline; text-underline-offset: 0.2em; }
.documento__num { color: var(--cor-destaque); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.documento__secao { display: flex; flex-direction: column; gap: var(--esp-3); }
.documento__secao h2 { padding-top: var(--esp-2); font-size: var(--tam-xl); }
.documento__secao p, .documento__itens li { line-height: 1.75; }
.documento__clausula { color: var(--cor-destaque); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.documento__itens { display: flex; flex-direction: column; gap: var(--esp-2); padding-left: var(--esp-6); }
@media (min-width: 40rem) { .documento__secao p, .documento__itens li { text-align: justify; hyphens: auto; } }
/* dado que a B20 precisa completar (CNPJ, endereço, e-mail): destacado para não passar despercebido */
.a-preencher { padding: 0 var(--esp-1); border: 1px dashed var(--cor-aviso); border-radius: var(--raio-sm); background: var(--cor-aviso-suave); color: var(--cor-aviso); font-weight: var(--peso-medio); white-space: nowrap; }
.documento__fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }

/* ---------- Contato (contato.html) ---------- */
/* Dois canais em cartões iguais (endereço e botão alinhados embaixo), mensagem em 2 colunas + largura toda,
   e três atalhos iguais. Tudo centralizado na mesma largura de 56rem. */
.contato { gap: var(--esp-7); }
.contato__cabecalho { max-width: 44rem; margin: 0 auto; padding-top: var(--esp-7); }
.contato__cabecalho h1:focus { outline: none; }
.contato__canais, .contato__mensagem, .contato > .vitrine__secao { width: 100%; max-width: 56rem; margin: 0 auto; }
@media (min-width: 40rem) { .contato__canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contato__canal { align-items: center; text-align: center; }
.contato__canal p { flex: 1; }
.contato__valor { color: var(--cor-destaque); font-size: var(--tam-xl); font-weight: var(--peso-forte); text-decoration: none; overflow-wrap: anywhere; }
.contato__valor:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contato__canal > .btn { width: min(100%, 16rem); }
.contato__mensagem { display: flex; flex-direction: column; gap: var(--esp-5); }
.contato__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
@media (min-width: 40rem) { .contato__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contato__largo { grid-column: 1 / -1; }
.contato__enviar { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); text-align: center; }
.contato__enviar > .btn { width: min(100%, 20rem); min-height: 2.75rem; white-space: normal; }