/* Componentes. Celular primeiro: tudo é uma coluna até 48rem. Só usa tokens de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; font: var(--t-md)/1.55 var(--fonte); color: var(--cor-texto); background: var(--cor-fundo); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e-3); letter-spacing: -.01em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--e-3); }
a { color: var(--cor-marca); text-underline-offset: .15em; }
a:hover { color: var(--cor-marca-forte); }
img, svg { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }
main:focus { outline: none; }
small { font-size: var(--t-xs); }

.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--e-2); top: -4rem; background: var(--cor-texto); color: #fff; padding: var(--e-2) var(--e-4); border-radius: var(--raio-p); z-index: 10; }
.pular:focus { top: var(--e-2); }
.faixa-prototipo { background: var(--cor-atencao-suave); color: var(--cor-atencao); text-align: center; font-size: var(--t-xs); padding: var(--e-1) var(--e-3); font-weight: 600; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.mudo, .dica { color: var(--cor-texto-mudo); }
.dica { font-size: var(--t-sm); }
.nota { font-size: var(--t-xs); color: var(--cor-texto-mudo); margin-top: var(--e-3); }
.centro { text-align: center; }
.opcional { font-weight: 400; color: var(--cor-texto-mudo); font-size: var(--t-sm); }
.num { text-align: right; white-space: nowrap; }
.sobretitulo { font-size: var(--t-sm); color: var(--cor-texto-mudo); font-weight: 600; margin-bottom: var(--e-2); }
.sobretitulo a { color: inherit; }

/* Topo */
.topo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); position: sticky; top: 0; z-index: 5; }
.topo-in { max-width: var(--largura); margin: 0 auto; padding: var(--e-2) var(--e-4); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 56px; }
.logo { display: flex; align-items: center; gap: var(--e-2); font-weight: 800; font-size: var(--t-lg); color: var(--cor-texto); text-decoration: none; }
.logo-marca { width: 32px; height: 32px; }
.logo-marca rect { fill: var(--cor-marca); }
.logo-marca path { fill: none; stroke: var(--cor-sobre-marca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; align-items: center; gap: var(--e-1); }
.nav a { color: var(--cor-texto); text-decoration: none; font-weight: 600; padding: 0 var(--e-3); min-height: var(--toque); display: inline-flex; align-items: center; border-radius: var(--raio-p); position: relative; }
.nav a:hover { background: var(--cor-fundo); }
.nav a[aria-current="page"] { color: var(--cor-marca); }
.nav-icone { padding: 0 var(--e-2) !important; min-width: var(--toque); justify-content: center; }
.bolinha { position: absolute; top: 4px; right: 2px; background: var(--cor-marca); color: #fff; font-size: 11px; line-height: 16px; min-width: 16px; text-align: center; border-radius: var(--raio-pilula); }

/* Seções */
.secao { max-width: var(--largura); margin: 0 auto; padding: var(--e-6) var(--e-4); }
.secao-estreita { max-width: var(--largura-estreita); }
.cabeca-pagina { padding-bottom: var(--e-4); }
.bloco { margin-top: var(--e-6); }

/* Herói */
.heroi { background: linear-gradient(180deg, var(--cor-superficie), var(--cor-fundo)); border-bottom: 1px solid var(--cor-borda); }
.heroi-in { max-width: var(--largura); margin: 0 auto; padding: var(--e-6) var(--e-4) var(--e-6); }
.heroi h1 { max-width: 20ch; }
.heroi-texto { font-size: var(--t-lg); color: var(--cor-texto-mudo); max-width: 38rem; }
.duas-portas { display: grid; gap: var(--e-3); margin-top: var(--e-5); max-width: 44rem; }
@media (min-width: 40rem) { .duas-portas { grid-template-columns: 1fr 1fr; } }
.porta { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none; box-shadow: var(--sombra); min-height: 4.5rem; }
.porta:hover { border-color: var(--cor-marca); color: var(--cor-texto); }
.porta > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.porta > span:nth-child(2) span { color: var(--cor-texto-mudo); font-size: var(--t-sm); }
.porta-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-p); background: var(--cor-marca-suave); color: var(--cor-marca); }

/* Números */
.faixa-numeros { padding-top: var(--e-5); padding-bottom: 0; }
.numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 48rem) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numeros li { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--e-3) var(--e-4); }
.numeros strong { display: block; font-size: var(--t-xl); }
.numeros span { color: var(--cor-texto-mudo); font-size: var(--t-sm); }

/* Passos */
.passos { list-style: none; padding: 0; margin: 0 0 var(--e-5); display: grid; gap: var(--e-4); }
@media (min-width: 48rem) { .passos { grid-template-columns: repeat(4, 1fr); } .passos-compactos { grid-template-columns: repeat(2, 1fr); } }
.passos li { display: flex; gap: var(--e-3); }
.passos h3 { font-size: var(--t-md); margin-bottom: var(--e-1); }
.passos p { color: var(--cor-texto-mudo); font-size: var(--t-sm); }
.passo-n { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cor-marca); color: #fff; display: grid; place-items: center; font-weight: 700; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-5); border-radius: var(--raio-p); border: 1px solid transparent; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; margin: 0 var(--e-2) var(--e-2) 0; }
.botao-primario { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.botao-primario:hover { background: var(--cor-marca-forte); color: var(--cor-sobre-marca); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-marca); border-color: var(--cor-borda-forte); }
.botao-secundario:hover { border-color: var(--cor-marca); }
.botao-fantasma { background: transparent; color: var(--cor-marca); }
.botao-fantasma:hover { background: var(--cor-marca-suave); }
.botao-perigo { background: var(--cor-superficie); color: var(--cor-perigo); border-color: var(--cor-perigo); }
.botao-bloco { display: flex; width: 100%; margin-right: 0; }
.botao-icone { display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); border-radius: 50%; border: 0; background: transparent; color: var(--cor-texto-mudo); cursor: pointer; flex: none; }
.botao-icone:hover { background: var(--cor-fundo); color: var(--cor-marca); }
.botao-enviar { background: var(--cor-marca); color: #fff; }
.botao-enviar:hover { background: var(--cor-marca-forte); color: #fff; }
.acoes-empilhadas { display: grid; gap: var(--e-2); margin: var(--e-4) 0 var(--e-3); }
.acoes-empilhadas .botao { margin: 0; }
.acoes-linha { display: flex; flex-wrap: wrap; }

/* Cartões e listas */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--e-5) var(--e-4); margin-bottom: var(--e-4); }
.cartao h2 { font-size: var(--t-lg); display: flex; align-items: center; gap: var(--e-2); }
.cartao-destaque { border: 2px solid var(--cor-marca); box-shadow: var(--sombra); }
.lista-ic { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); }
.lista-ic li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-ic .ic { color: var(--cor-marca); margin-top: .15em; }
.lista-grande li { font-size: var(--t-md); }
.lista-compacta { gap: var(--e-2); font-size: var(--t-sm); margin-top: var(--e-4); }
.lista-itens { list-style: none; padding: 0; margin: 0 0 var(--e-3); }
.lista-itens li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--cor-borda); }
.lista-itens li > div { display: flex; flex-direction: column; }
.lista-itens .botao { margin: 0; }

/* Objetivos e produtos */
.grade-objetivos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 48rem) { .grade-objetivos { grid-template-columns: repeat(3, 1fr); } }
.objetivo { display: flex; flex-direction: column; gap: var(--e-1); height: 100%; padding: var(--e-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); text-decoration: none; color: var(--cor-texto); }
.objetivo:hover { border-color: var(--cor-marca); color: var(--cor-texto); }
.objetivo .mudo { font-size: var(--t-sm); }
.objetivo-ic { color: var(--cor-marca); }
.objetivo-ic .ic { width: 28px; height: 28px; }
.objetivo-preco { margin-top: auto; padding-top: var(--e-2); font-size: var(--t-sm); font-weight: 650; }
.grade-produtos { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .grade-produtos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grade-produtos { grid-template-columns: repeat(3, 1fr); } }
.produto-cartao { padding: 0; overflow: hidden; position: relative; margin: 0; }
.produto-cartao:hover { border-color: var(--cor-marca); }
.produto-cartao-corpo { padding: var(--e-4); }
.produto-cartao h3 { font-size: var(--t-md); margin: var(--e-2) 0 var(--e-1); }
.link-cartao { color: var(--cor-texto); text-decoration: none; }
.link-cartao::after { content: ""; position: absolute; inset: 0; }
.foto-ficticia { display: grid; place-items: center; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--cor-fundo) 0 12px, #eef1f5 12px 24px); color: var(--cor-borda-forte); border: 0; width: 100%; }
.foto-ficticia .ic { width: 40px; height: 40px; }
.foto-mini { width: 56px; aspect-ratio: 1; border-radius: var(--raio-p); }
.foto-mini .ic { width: 24px; height: 24px; }
.preco { display: flex; flex-direction: column; margin: var(--e-2) 0 0; }
.preco-pix { font-weight: 800; font-size: var(--t-lg); color: var(--cor-texto); }
.preco-pix small { font-weight: 600; color: var(--cor-pix); font-size: var(--t-sm); }
.preco .mudo, .preco span:last-child { font-size: var(--t-sm); color: var(--cor-texto-mudo); }
.preco-grande .preco-pix { font-size: var(--t-xl); display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.preco-grande .preco-pix .ic { color: var(--cor-pix); }

/* Selos */
.selo { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: 2px var(--e-2); border-radius: var(--raio-pilula); background: var(--cor-fundo); color: var(--cor-texto-mudo); border: 1px solid var(--cor-borda); vertical-align: middle; }
.selo-novo { background: var(--cor-marca-suave); color: var(--cor-marca-forte); border-color: transparent; }
.selo-a, .selo-ok { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); border-color: transparent; }
.selo-b { background: var(--cor-marca-suave); color: var(--cor-marca-forte); border-color: transparent; }
.selo-c { background: var(--cor-atencao-suave); color: var(--cor-atencao); border-color: transparent; }
.selo-atual { background: var(--cor-marca); color: #fff; border-color: transparent; }
.selo-equipe { background: var(--cor-texto); color: #fff; border-color: transparent; }
.graduacao { display: grid; gap: var(--e-2); margin: 0; }
.graduacao div { display: flex; gap: var(--e-3); align-items: baseline; }
.graduacao dt { flex: none; width: 6rem; }
.graduacao dd { margin: 0; }

/* Avisos e vazio */
.aviso { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--raio-p); background: var(--cor-marca-suave); margin: var(--e-4) 0; }
.aviso p { margin: 0; }
.aviso .ic { color: var(--cor-marca); margin-top: .15em; }
.aviso-atencao { background: var(--cor-atencao-suave); }
.aviso-atencao .ic { color: var(--cor-atencao); }
.aviso-sucesso { background: var(--cor-sucesso-suave); }
.aviso-sucesso .ic { color: var(--cor-sucesso); }
.vazio { display: flex; gap: var(--e-3); padding: var(--e-5) var(--e-4); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); color: var(--cor-texto-mudo); }
.vazio p { margin: 0; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; background: var(--cor-superficie); font-size: var(--t-sm); }
.tabela th, .tabela td { text-align: left; padding: var(--e-3); border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-mudo); }
.tabela tbody th { font-weight: 600; }
.tabela tfoot th, .tabela tfoot td { border-bottom: 0; font-size: var(--t-md); }
.tabela .num { text-align: right; }

/* Formulários */
.formulario { margin-top: var(--e-4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; font-size: var(--t-lg); margin-bottom: var(--e-3); }
legend h2 { margin: 0; font-size: var(--t-lg); }
.legenda-n { display: block; font-size: var(--t-xs); color: var(--cor-texto-mudo); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sub legend { font-size: var(--t-md); margin-top: var(--e-4); }
.campo { display: grid; gap: var(--e-1); margin: var(--e-4) 0; }
.campo label, .frete label { font-weight: 650; }
input:not([type=radio]):not([type=checkbox]):not([type=file]), select, textarea { width: 100%; min-height: var(--toque); padding: var(--e-2) var(--e-3); font: inherit; color: var(--cor-texto); background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-p); }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--cor-marca); }
input[type=radio], input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--cor-marca); flex: none; margin: 2px 0 0; }
.campo-linha { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2); }
.campo-linha .botao { margin: 0; }
.linha-campo { display: flex; gap: var(--e-2); margin-top: var(--e-1); }
.linha-campo .botao { margin: 0; }
.checagem, .radio { display: flex; gap: var(--e-3); align-items: flex-start; margin: var(--e-3) 0; min-height: var(--toque); }
.opcoes-cartao { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
.opcoes-largas { grid-template-columns: 1fr; }
.opcao-cartao { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3); min-height: var(--toque); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-p); background: var(--cor-superficie); cursor: pointer; }
.opcao-cartao > span { display: flex; flex-direction: column; }
.opcao-cartao:has(input:checked) { border-color: var(--cor-marca); background: var(--cor-marca-suave); box-shadow: inset 0 0 0 1px var(--cor-marca); }
.opcao-linha { margin-bottom: var(--e-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-4); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); background: var(--cor-superficie); cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { background: var(--cor-marca); color: #fff; border-color: var(--cor-marca); }
.chip:has(input:focus-visible) { box-shadow: var(--foco); }
.chip-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); text-decoration: none; color: var(--cor-texto); font-size: var(--t-sm); background: var(--cor-superficie); }
.chip-link-ativo { background: var(--cor-texto); color: #fff; border-color: var(--cor-texto); }
.filtros { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-2); margin-bottom: var(--e-3); }
.busca { display: flex; gap: var(--e-2); margin-top: var(--e-4); max-width: 36rem; }
.busca .botao { margin: 0; }
.upload { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-5) var(--e-4); border: 2px dashed var(--cor-borda-forte); border-radius: var(--raio); background: var(--cor-superficie); cursor: pointer; position: relative; }
.upload > span { display: flex; flex-direction: column; }
.upload .ic { width: 32px; height: 32px; color: var(--cor-marca); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload:has(input:focus-visible) { box-shadow: var(--foco); }
.previas { list-style: none; padding: 0; margin: var(--e-3) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.previas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-p); display: block; }
.estimativa { background: var(--cor-marca-suave); border-radius: var(--raio); padding: var(--e-4); margin-top: var(--e-4); }
.estimativa-rotulo { font-size: var(--t-sm); font-weight: 600; margin: 0; }
.estimativa-valor { font-size: var(--t-xl); font-weight: 800; margin: var(--e-1) 0; }
.separador { display: flex; align-items: center; gap: var(--e-3); color: var(--cor-texto-mudo); font-size: var(--t-sm); margin: var(--e-5) 0 0; }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--cor-borda); }
.interruptor { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) 0; border-bottom: 1px solid var(--cor-borda); cursor: pointer; }
.interruptor:last-child { border-bottom: 0; }
.interruptor > span { display: flex; flex-direction: column; }

/* Passo a passo */
.progresso { list-style: none; counter-reset: p; display: flex; gap: var(--e-1); padding: 0; margin: var(--e-5) 0 var(--e-2); font-size: var(--t-xs); color: var(--cor-texto-mudo); }
.progresso li { flex: 1; padding-top: var(--e-2); border-top: 4px solid var(--cor-borda); text-align: center; }
.progresso li.feito, .progresso li[aria-current="step"] { border-color: var(--cor-marca); color: var(--cor-texto); font-weight: 650; }
.passo { padding: var(--e-4) 0; border-bottom: 1px solid var(--cor-borda); }
.js .passo { border: 0; }
.js .passo[hidden] { display: none; }
.acoes-passos { display: flex; justify-content: space-between; gap: var(--e-2); padding: var(--e-4) 0; }
.acoes-passos .botao { margin: 0; flex: 1; }
.acoes-passos [hidden] { display: none; }

/* OS */
.status { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; padding: var(--e-2) var(--e-3); border-radius: var(--raio-pilula); }
.status-aprovacao { background: var(--cor-atencao-suave); color: var(--cor-atencao); }
.resumo-os { display: grid; gap: var(--e-2); margin: var(--e-4) 0; }
.resumo-os div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--e-3); font-size: var(--t-sm); }
.resumo-os dt { color: var(--cor-texto-mudo); }
.resumo-os dd { margin: 0; }
.abas { display: flex; gap: var(--e-1); overflow-x: auto; border-bottom: 1px solid var(--cor-borda); margin-top: var(--e-4); }
.abas a { padding: var(--e-3); white-space: nowrap; text-decoration: none; font-weight: 600; font-size: var(--t-sm); min-height: var(--toque); display: inline-flex; align-items: center; }
.os-cabeca { padding-bottom: 0; }
.detalhe-tecnico, .ficha-grupo, .afirmacoes details { margin: var(--e-3) 0; }
summary { cursor: pointer; font-weight: 650; color: var(--cor-marca); min-height: var(--toque); display: flex; align-items: center; }
.linha-tempo { list-style: none; padding: 0; margin: 0 0 var(--e-4); }
.evento { display: flex; gap: var(--e-3); position: relative; padding-bottom: var(--e-5); }
.evento::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--cor-borda); }
.evento:last-child::before { display: none; }
.evento-ponto { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-sucesso); color: #fff; z-index: 1; }
.evento-ponto .ic { width: 16px; height: 16px; }
.evento-atual .evento-ponto { background: var(--cor-marca); box-shadow: 0 0 0 4px var(--cor-marca-suave); }
.evento-futuro .evento-ponto { background: var(--cor-superficie); border: 2px dashed var(--cor-borda-forte); }
.evento-futuro h3 { color: var(--cor-texto-mudo); }
.evento-corpo h3 { font-size: var(--t-md); margin-bottom: var(--e-1); }
.evento-corpo p { margin-bottom: var(--e-2); }
.midias { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.midia { width: 64px; height: 64px; border-radius: var(--raio-p); border: 1px solid var(--cor-borda); background: repeating-linear-gradient(135deg, var(--cor-fundo) 0 8px, #eef1f5 8px 16px); color: var(--cor-texto-mudo); display: grid; place-items: center; cursor: pointer; }
.midia-video { width: auto; padding: 0 var(--e-3); display: inline-flex; gap: var(--e-1); font: inherit; font-size: var(--t-xs); font-weight: 600; }
.chat { list-style: none; padding: 0; margin: 0 0 var(--e-3); display: flex; flex-direction: column; gap: var(--e-3); }
.msg { max-width: 85%; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio) var(--raio) var(--raio) 4px; padding: var(--e-2) var(--e-3); }
.msg-minha { align-self: flex-end; background: var(--cor-marca-suave); border-color: transparent; border-radius: var(--raio) var(--raio) 4px var(--raio); }
.msg-autor { font-size: var(--t-xs); font-weight: 700; margin-bottom: var(--e-1); }
.msg-texto { margin-bottom: var(--e-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-hora { font-size: var(--t-xs); color: var(--cor-texto-mudo); margin: 0; text-align: right; }
.midia-chat { margin-bottom: var(--e-1); }
.chat-envio { display: flex; align-items: flex-end; gap: var(--e-2); background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); padding: var(--e-1); position: sticky; bottom: var(--e-2); }
.chat-envio textarea { border: 0; min-height: var(--toque); resize: none; }
.chat-envio textarea:focus-visible { box-shadow: none; }
.chat-envio:focus-within { border-color: var(--cor-marca); box-shadow: 0 0 0 1px var(--cor-marca); }
.dialogo { border: 0; border-radius: var(--raio); padding: var(--e-5); max-width: 24rem; width: calc(100% - 2rem); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgb(18 24 38 / .5); }
.dialogo .botao { margin: 0 0 var(--e-2); }

/* Produto */
.produto-topo { display: grid; gap: var(--e-5); }
@media (min-width: 56rem) { .produto-topo { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.galeria .foto-grande { border-radius: var(--raio); }
.miniaturas { list-style: none; padding: 0; margin: var(--e-2) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.miniaturas .foto-ficticia { border-radius: var(--raio-p); cursor: pointer; }
.miniaturas .ic { width: 20px; height: 20px; }
.compra h1 { margin-top: var(--e-2); font-size: var(--t-xl); }
.estoque { display: flex; align-items: center; gap: var(--e-2); color: var(--cor-sucesso); font-weight: 600; font-size: var(--t-sm); margin-top: var(--e-3); }
.frete { margin-top: var(--e-4); }
.afirmacoes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .afirmacoes { grid-template-columns: 1fr 1fr; } }
.afirmacoes li { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--e-4); }
.afirmacoes li > p { font-weight: 650; margin: 0; }
.afirmacoes details p { font-size: var(--t-sm); color: var(--cor-texto-mudo); }
.ficha-grupo { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-p); padding: 0 var(--e-4); margin: var(--e-2) 0; }
.ficha-grupo summary { color: var(--cor-texto); }
.ficha-grupo dl { margin: 0 0 var(--e-3); }
.ficha-grupo dl div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--cor-borda); font-size: var(--t-sm); }
.ficha-grupo dt { color: var(--cor-texto-mudo); }
.ficha-grupo dd { margin: 0; }

/* Loja: faixas */
.faixas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .faixas { grid-template-columns: repeat(3, 1fr); } }
.faixa h3 { margin-bottom: var(--e-1); }
.faixa-preco { font-weight: 800; color: var(--cor-marca); }

/* Checkout */
.itens { list-style: none; padding: 0; margin: 0 0 var(--e-3); }
.itens li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--cor-borda); }
.itens select { width: auto; min-height: 36px; padding: 0 var(--e-2); }
.total dl { margin: 0 0 var(--e-4); }
.total dl div { display: flex; justify-content: space-between; padding: var(--e-1) 0; }
.total dd { margin: 0; }
.total-final { border-top: 1px solid var(--cor-borda); margin-top: var(--e-2); padding-top: var(--e-3) !important; font-size: var(--t-lg); font-weight: 800; }

/* Conta */
.historico { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.historico .dica { display: inline-block; min-width: 7rem; }
.entrar h1 { text-align: center; }

/* Rodapé */
.rodape { background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); margin-top: var(--e-7); }
.rodape-in { max-width: var(--largura); margin: 0 auto; padding: var(--e-6) var(--e-4); display: grid; gap: var(--e-5); }
@media (min-width: 56rem) { .rodape-in { grid-template-columns: 1fr 1fr; } .rodape-links, .rodape-legal { grid-column: 1 / -1; } }
.rodape h2 { font-size: var(--t-md); }
.rodape p { font-size: var(--t-sm); color: var(--cor-texto-mudo); }
.mapa-ficticio { display: flex; align-items: center; justify-content: center; gap: var(--e-2); height: 120px; border-radius: var(--raio); background: repeating-linear-gradient(45deg, var(--cor-fundo) 0 10px, #eef1f5 10px 20px); color: var(--cor-texto-mudo); margin-bottom: var(--e-3); font-size: var(--t-sm); }
.rodape-links { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-sm); }
.rodape-links a { min-height: var(--toque); display: inline-flex; align-items: center; }
.rodape-legal { font-size: var(--t-xs) !important; }