/* Cores tiradas da logo. */
:root {
  --verde: #06b256;
  --amarelo: #ffce30;
  --rosa: #ee488e;
  --laranja: #f5733f;
  --azul: #00b4ca;
  --texto: #2b2b2b;
  --suave: #6b6b6b;
  --fundo: #ffffff;
  --superficie: #f6f5f3;
  --borda: #ebe7e2;
  --raio: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* "hidden" precisa ganhar de display:grid/flex das classes abaixo (o JS
   esconde o formulario depois do pedido usando o atributo). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}
a { color: inherit; }
img { display: block; max-width: 100%; }
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }

/* --- cabecalho */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
  padding: 8px 16px 10px;
}
.topo::before { /* faixa com as cores da marca */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--verde) 0 20%, var(--amarelo) 20% 40%, var(--rosa) 40% 60%, var(--laranja) 60% 80%, var(--azul) 80%);
}
/* Celular: logo e links na 1a linha, busca embaixo. Computador: tudo numa
   linha so (logo | busca | Meus pedidos + carrinho), como no layout da home. */
.topo-linha {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "marca links" "busca busca";
  align-items: center; column-gap: 24px;
}
.marca { grid-area: marca; }
.topo-links { grid-area: links; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.topo-linha .busca { grid-area: busca; width: 100%; }
@media (min-width: 820px) {
  .topo { padding: 12px 16px; }
  .topo-linha { grid-template-columns: auto minmax(0, 640px) 1fr; grid-template-areas: "marca busca links"; }
  .topo-linha .busca { margin: 0; }
}
.marca img { height: 54px; width: auto; }
.carrinho-link { position: relative; color: var(--texto); padding: 8px; }
.contador {
  position: absolute; top: 0; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--rosa); color: #fff; font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.busca { max-width: 1180px; margin: 6px auto 0; display: flex; }
.busca input {
  flex: 1; min-width: 0; font: inherit; padding: 10px 14px;
  border: 1.5px solid var(--borda); border-right: 0; border-radius: 999px 0 0 999px; background: var(--superficie);
}
.busca input:focus { outline: none; border-color: var(--azul); background: #fff; }
.busca button { border: 0; padding: 0 16px; border-radius: 0 999px 999px 0; background: var(--azul); color: #fff; cursor: pointer; }

/* --- home (layout aprovado em 07/10/2026) */
main.cheio { max-width: none; padding: 0 0 40px; }
.hero { position: relative; overflow: hidden; color: #fff; background: #3a3836; }
.hero-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* escurece a esquerda, onde fica o texto, e deixa a foto aparecer a direita */
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 38, 36, .88) 0%, rgba(40, 38, 36, .62) 42%, rgba(40, 38, 36, 0) 75%); }
/* celular: o texto ocupa a largura toda, entao a foto escurece por igual */
@media (max-width: 819px) { .hero::after { background: linear-gradient(180deg, rgba(40, 38, 36, .78), rgba(40, 38, 36, .66)); } .hero-conteudo { padding: 48px 16px 52px; } }
.hero-conteudo { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 72px 16px 80px; }
.hero-conteudo > * { max-width: 520px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; margin: 0 0 18px; }
.eyebrow::before { content: ''; width: 24px; height: 3px; border-radius: 2px; background: var(--amarelo); }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--amarelo); }
.hero-texto { font-size: 16px; line-height: 1.6; margin: 0 0 30px; color: rgba(255, 255, 255, .9); }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.botao-hero { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--azul); color: #fff; }
.botao-hero:hover { filter: brightness(.95); }
.botao-hero-sec { background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); }
.botao-hero-sec:hover { background: rgba(255, 255, 255, .1); }

.faixa { max-width: 1180px; margin: 0 auto; padding: 56px 16px 0; scroll-margin-top: 90px; }
.faixa-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.faixa h2 { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.faixa-cab p { margin: 6px 0 0; color: var(--suave); font-size: 14px; }
.setas { display: flex; gap: 10px; }
.setas button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--texto); }
.setas button:hover { border-color: var(--texto); }
.ver-todos { font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 22px) / 6); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carrossel::-webkit-scrollbar { display: none; }
@media (max-width: 819px) { .carrossel { grid-auto-columns: 40%; gap: 14px; } .setas { display: none; } }
.tile { scroll-snap-align: start; text-decoration: none; display: grid; gap: 12px; justify-items: center; }
.tile-img { width: 100%; aspect-ratio: 1; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #f7f6f4; display: block; transition: transform .15s, box-shadow .15s; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-produto img { object-fit: contain; padding: 12px; background: #fff; }
.tile:hover .tile-img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.tile-nome { font-size: 14px; font-weight: 500; text-align: center; }
@media (min-width: 820px) { .grade.grade-destaque { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
@media (prefers-reduced-motion: reduce) { .carrossel { scroll-behavior: auto; } .tile-img { transition: none; } }

/* --- admin dos destaques */
.adm { max-width: 760px; margin: 0 auto; }
.adm h1 { font-size: 22px; margin: 20px 0 4px; }
.adm h2 { font-size: 17px; margin: 24px 0 8px; }
.adm-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.adm-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.adm-item img, .adm-sem-foto { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; }
.adm-nome { font-size: 14px; min-width: 0; }
.adm-nome small { display: block; color: var(--suave); }
.adm-botoes { display: flex; gap: 6px; }
.adm-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff; cursor: pointer; }
.adm-btn:not(.adm-seta):not(.adm-tirar) { background: var(--azul); border-color: var(--azul); color: #fff; }
.adm-tirar { color: #c62828; }
.adm-ja { font-size: 12.5px; color: var(--suave); }
.adm-busca { display: flex; gap: 8px; }
.adm-busca input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border: 1.5px solid var(--borda); border-radius: 999px; }
.adm-busca .botao { width: auto; padding: 10px 20px; }

/* --- categorias */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; text-decoration: none; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--borda); font-size: 14px; white-space: nowrap;
}
.chips a.ativo { background: var(--texto); border-color: var(--texto); color: #fff; }
.menu-cat { position: relative; flex: none; display: flex; }
.submenu { display: none; }
/* Computador (tem mouse e espaco): categorias quebram em linhas, porque a
   faixa que rola some para a lateral sem ter como rolar com o mouse; e cada
   categoria abre um painel com as subcategorias no hover ou no foco. */
@media (hover: hover) and (min-width: 820px) {
  .chips:not(.chips-sub) { flex-wrap: wrap; overflow: visible; }
  .menu-cat:hover .submenu, .menu-cat:focus-within .submenu { display: grid; }
  .submenu {
    position: absolute; top: 100%; left: 0; z-index: 20; min-width: 250px;
    margin-top: 6px; padding: 8px; gap: 2px;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  }
  /* ponte invisivel: o mouse atravessa o vao ate o painel sem fecha-lo */
  .submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
  .menu-cat:nth-last-child(-n+2) .submenu { left: auto; right: 0; }
  .chips .submenu a {
    border: 0; border-radius: 8px; padding: 8px 10px; font-size: 14px;
    display: flex; justify-content: space-between; gap: 16px;
  }
  .chips .submenu a:hover, .chips .submenu a:focus-visible { background: var(--superficie); outline: none; }
  .submenu small { color: var(--suave); font-variant-numeric: tabular-nums; }
  .chips .submenu .sub-tudo { font-weight: 600; border-bottom: 1px solid var(--borda); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
}

.migalhas { font-size: 13px; color: var(--suave); margin-top: 10px; }
.migalhas a { color: var(--suave); }
.chips-sub { padding-top: 6px; }
.chips-sub a { font-size: 13px; padding: 4px 12px; background: var(--superficie); border-color: transparent; }
.chips-sub small { color: var(--suave); margin-left: 4px; }
.titulo-lista { font-size: 20px; margin: 18px 0 4px; }
.titulo-lista small { font-size: 14px; font-weight: 400; color: var(--suave); }

/* --- grade de produtos */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; margin-top: 12px; }
.card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-2px); }
/* height:auto: sem isso o atributo height="400" da tag vence o aspect-ratio
   e cada foto ganhava um quadro de 400px de altura, cheio de branco. */
.card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.card-nome {
  font-size: 13.5px; margin: 8px 10px 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-preco { margin: auto 10px 10px; font-weight: 700; font-size: 16px; color: var(--rosa); }
.card-preco small { font-size: 11px; font-weight: 500; color: var(--suave); }
.vazio { grid-column: 1 / -1; color: var(--suave); padding: 30px 0; text-align: center; }

.paginacao { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 0; font-size: 14px; color: var(--suave); }
.paginacao a { color: var(--texto); font-weight: 600; text-decoration: none; padding: 8px 4px; }

/* --- pagina do produto */
.produto { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 820px) { .produto { grid-template-columns: 1.1fr 1fr; align-items: start; } .descricao { grid-column: 1 / -1; } }
.galeria-principal { width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; }
.galeria.sem-foto { aspect-ratio: 1; display: grid; place-items: center; background: var(--superficie); border-radius: var(--raio); color: var(--suave); }
.miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.miniaturas button { flex: none; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.miniaturas button.ativo { border-color: var(--azul); }
.miniaturas img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #fff; }
.produto-info h1 { font-size: 21px; line-height: 1.3; margin: 0 0 8px; }
.produto-preco { font-size: 28px; font-weight: 700; color: var(--rosa); margin: 0 0 16px; }
.variacoes { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.variacoes legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.variacoes label { cursor: pointer; }
.variacoes input { position: absolute; opacity: 0; }
.variacoes span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--borda); border-radius: 999px; font-size: 14px; }
.variacoes input:checked + span { border-color: var(--azul); background: #e6f8fa; font-weight: 600; }
.variacoes input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.variacoes .esgotada span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.qtd-linha { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qtd-linha input { width: 70px; font: inherit; padding: 8px; border: 1.5px solid var(--borda); border-radius: 8px; margin-left: 6px; }
.disp { font-size: 13px; color: var(--suave); }
.botao {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 16px; padding: 13px 18px;
  border: 0; border-radius: 999px; background: var(--rosa); color: #fff;
}
.botao:hover { filter: brightness(.95); }
.botao:disabled { opacity: .6; cursor: wait; }
.botao-whats { background: var(--verde); margin-top: 8px; }
.aviso-ok { margin: 10px 0 0; color: var(--verde); font-weight: 600; }
.esgotado { font-weight: 600; color: var(--suave); }
.entrega-info { font-size: 13.5px; color: var(--suave); margin-top: 16px; }
.descricao { border-top: 1px solid var(--borda); padding-top: 8px; }
.descricao h2 { font-size: 17px; }
.descricao p { margin: 0 0 8px; color: #444; }

/* --- carrinho */
.carrinho { max-width: 680px; margin: 0 auto; }
.carrinho h1 { font-size: 22px; margin: 20px 0 12px; }
.aviso { background: #fff7e0; border: 1px solid #ffe08a; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.item img, .item .sem-foto { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; border: 1px solid var(--borda); background: #fff; display: block; }
.item-nome { font-size: 14px; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-preco { display: block; font-size: 12.5px; color: var(--suave); }
.item-qtd { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.item-qtd button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; font-size: 16px; cursor: pointer; }
.item-qtd button:disabled { opacity: .35; }
.item-qtd .remover { width: auto; border: 0; border-radius: 0; font-size: 12.5px; color: var(--suave); text-decoration: underline; margin-left: 6px; }
.item-total { font-size: 15px; }
.finalizar { margin-top: 24px; display: grid; gap: 12px; }
.finalizar h2 { font-size: 18px; margin: 0; }
.finalizar label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.finalizar input:not([type=radio]), .finalizar textarea {
  font: inherit; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 10px; width: 100%;
}
.finalizar input:focus, .finalizar textarea:focus { outline: none; border-color: var(--azul); }
.modalidade { border: 1.5px solid var(--borda); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.modalidade legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.modalidade label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.modalidade small { color: var(--suave); margin-left: auto; }
.endereco { border: 1.5px solid var(--borda); border-radius: 10px; padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.endereco legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.endereco .cep { grid-column: 1; }
.endereco .cep-msg { grid-column: 1 / -1; margin: -4px 0 0; font-size: 13px; }
.endereco .cep-msg.ok { color: var(--verde); }
.endereco .cep-msg.erro { color: #c62828; font-weight: 600; }
.endereco .rua { grid-column: 1; }
.endereco .numero { grid-column: 2; }
.endereco .complemento, .endereco .bairro, .endereco .referencia { grid-column: 1 / -1; }
.pagamento .selo { background: var(--verde); color: #fff; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 11.5px; }
.pagamento .nota { margin: 2px 0 0 26px; }
.troco { display: grid; gap: 8px; margin: 2px 0 0 26px; }
.troco label { font-weight: 500; }
.troco .sem-troco { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.troco input[name=trocoPara] { max-width: 180px; }
.totais .desconto { color: var(--verde); font-weight: 600; }
.card-pix { margin: -8px 10px 10px; font-size: 12px; color: var(--verde); font-weight: 600; }
.produto-pix { margin: -10px 0 16px; color: var(--verde); font-size: 14px; }
.isca { position: absolute; left: -9999px; }
.totais { background: var(--superficie); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14px; }
.totais div { display: flex; justify-content: space-between; }
.totais .total { font-size: 17px; font-weight: 700; border-top: 1px solid var(--borda); padding-top: 6px; margin-top: 4px; }
.erro { color: #c62828; font-weight: 600; margin: 0; }
.nota { font-size: 13px; color: var(--suave); margin: 0; }
.concluido .total-final { font-size: 18px; }
.passos { padding-left: 20px; display: grid; gap: 22px; }
.passos li { display: grid; gap: 8px; }
.passos textarea { font: 12px/1.4 ui-monospace, monospace; padding: 8px; border: 1.5px dashed var(--borda); border-radius: 8px; width: 100%; resize: none; word-break: break-all; }

/* --- acompanhamento do pedido */
.meus-pedidos-link { margin-left: auto; margin-right: 6px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--suave); }
.acompanhar { max-width: 680px; margin: 0 auto; }
.acompanhar h1 { font-size: 22px; margin: 20px 0 4px; }
.acompanhar h2 { font-size: 17px; margin: 22px 0 6px; }
.status { display: inline-block; margin: 4px 0; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; background: #e6f8fa; color: #00788a; }
.status-fim { background: #e3f7ec; color: #047a3c; }
.status-cancelado { background: #fdecec; color: #c62828; }
.tempo { list-style: none; padding: 0; margin: 18px 0; }
.tempo li { position: relative; padding: 0 0 18px 30px; color: var(--suave); }
.tempo li::before { content: ''; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; }
.tempo li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 22px; bottom: 0; width: 2px; background: var(--borda); }
.tempo li.feito { color: var(--texto); }
.tempo li.feito::before { background: var(--verde); border-color: var(--verde); }
.tempo li.feito::after { background: var(--verde); }
.tempo li.atual { color: var(--texto); font-weight: 600; }
.tempo li.atual::before { border-color: var(--azul); background: var(--azul); box-shadow: 0 0 0 4px #c9f1f6; }
.cancelado { color: #c62828; font-weight: 600; }
.caixa { border: 1.5px solid var(--borda); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.caixa p { margin: 0; }
.caixa textarea { font: 12px/1.4 ui-monospace, monospace; padding: 8px; border: 1.5px dashed var(--borda); border-radius: 8px; width: 100%; resize: none; word-break: break-all; }
.itens-pedido { list-style: none; padding: 0; margin: 0 0 12px; }
.itens-pedido li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.botao-claro { background: #fff; color: var(--texto); border: 1.5px solid var(--borda); margin-top: 12px; }
/* Amarelo da logo; texto escuro porque branco sobre amarelo nao da leitura. */
.botao-amarelo { background: var(--amarelo); color: var(--texto); }
/* Mesmo recuo dos botoes que ficam dentro da lista numerada (.passos). */
.botao-alinhado { width: auto; margin: 4px 0 0 20px; }
.lista-pedidos { list-style: none; padding: 0; margin: 0; }
.lista-pedidos a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--borda); text-decoration: none; }
.lista-pedidos small { display: block; color: var(--suave); font-size: 12.5px; }
.lista-pedidos .lado { text-align: right; }
.lista-pedidos .st { color: #00788a; font-weight: 600; }

/* --- rodape */
.rodape { background: var(--superficie); border-top: 1px solid var(--borda); padding: 22px 16px 28px; text-align: center; font-size: 14px; color: var(--suave); }
.rodape p { margin: 4px 0; }
.rodape a { color: var(--verde); font-weight: 600; }
.rodape .cnpj { font-size: 12px; margin-top: 18px; }
/* Celular: tudo empilhado e centralizado. Computador: 3 colunas como no
   layout (frase | loja | Powered by). */
.rodape-grade { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; }
.rodape-marca { font-size: 16px; font-weight: 600; color: var(--texto); }
.rodape-centro p { font-size: 13px; }
.rodape-centro .rodape-marca { font-size: 16px; }
.rodape a.rodape-whats { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; text-decoration: none; color: #087a3e; }
.rodape-credito { display: grid; justify-items: center; gap: 4px; font-size: 11px; }
.rodape-credito img { width: 80px; height: 80px; }
@media (min-width: 820px) {
  .rodape-grade { grid-template-columns: 1fr auto 1fr; align-items: start; }
  .rodape-lado { justify-self: start; text-align: left; padding-top: 22px; }
  .rodape-credito { justify-self: end; }
}