/* Fontes servidas do próprio domínio (ADR-005). São VARIÁVEIS: um arquivo
   cobre todos os pesos — o Google Fonts entrega o mesmo woff2 para
   wght@400..700, então baixar um por peso seria o mesmo arquivo 4 vezes. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/archivo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fontes/inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Araruama Tintas — visual
   Paleta tirada da própria marca: o marinho é o fundo da logo
   (#041B41), o azul de ação é o da capa (#005CE2), e os acentos
   são as pás do cata-vento.
   ========================================================= */
:root{
  /* marca */
  --marinho:#041B41;  --marinho-2:#0A2A5E;  --marinho-3:#123670;
  --azul:#005CE2;     --azul-claro:#41ACFF; --azul-fundo:#DCECFF;
  /* cata-vento */
  --rosa:#FD1186; --verde:#00E6AA; --roxo:#450BBC; --amarelo:#FEC202; --laranja:#F98307;
  /* neutros */
  --texto:#12203A; --texto-2:#5A6884; --linha:#E2E8F2;
  --gelo:#F5F8FC;  --gelo-2:#EAF0F8; --branco:#fff;
  --ok:#0A7A4B;
  --raio:14px; --raio-g:20px;
  --sombra:0 1px 2px rgba(4,27,65,.06), 0 8px 24px rgba(4,27,65,.07);
  --sombra-alta:0 12px 40px rgba(4,27,65,.16);
  --topo:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--branco); color:var(--texto);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.55; overflow-x:hidden;
}
img{max-width:100%; display:block}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 18px}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-radius:6px}

/* display: Archivo, o mesmo espírito das artes */
.display{
  font-family:'Archivo','Inter',system-ui,sans-serif;
  font-weight:800; line-height:1.02; letter-spacing:-.024em;
  margin:0;
}
.display em{display:block; font-style:normal; color:var(--azul)}
h2.display{font-size:clamp(1.8rem,4.4vw,2.9rem)}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:60; background:var(--marinho);
  height:var(--topo); display:flex; align-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.topo .wrap{display:flex; align-items:center; gap:14px; width:100%}
.topo__marca{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.topo__marca img{height:34px; width:auto}
.topo__zap{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:.92rem;
}
.topo__zap:hover{background:rgba(255,255,255,.18)}
.topo__zap svg{width:17px; height:17px; flex:none}
.topo__insta{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:12px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none;
}
.topo__insta:hover{background:rgba(255,255,255,.18)}
.topo__insta svg{width:19px; height:19px}
.icone-btn{
  position:relative; display:grid; place-items:center; width:42px; height:42px;
  border:0; border-radius:12px; background:var(--azul); color:#fff;
}
.icone-btn:hover{background:#0050C6}
.icone-btn svg{width:20px; height:20px}
.carrinho-badge{
  position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; padding:0 5px;
  border-radius:999px; background:var(--rosa); color:#fff;
  font-size:.72rem; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--marinho);
}

/* ---------- artes ----------
   Arte nunca é recortada (docs/ARQUITETURA-TELAS.md §1): mesma imagem,
   dimensões originais, igual nas duas telas. */
/* aspect-ratio explícito: os atributos width/height do HTML reservam o
   espaço, mas a arte do catálogo sobrescreve a largura em CSS para sangrar
   até a borda, e o PageSpeed passou a contar 0,075 de CLS quando ela
   carregava. As três artes têm a mesma proporção (1912×823). */
.arte{display:block; width:100%; height:auto; aspect-ratio:1912/823; background:var(--marinho)}
.capa a{display:block}
/* a arte que abre o catálogo sangra até a borda da seção */
.secao--comArte{padding-top:0}
.arte--catalogo{
  margin:0 -18px 26px; width:calc(100% + 36px); max-width:none;
  border-radius:0 0 var(--raio-g) var(--raio-g);
}
@media (min-width:1237px){
  .arte--catalogo{
    margin-left:calc((100vw - 1200px) / -2 - 18px);
    width:100vw; border-radius:0;
  }
}
.capa{background:var(--marinho)}

/* ---------- faixa de vantagens ---------- */
.selos{background:var(--marinho); color:#fff; padding:14px 0}
.selos__lista{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  list-style:none; margin:0; padding:0;
}
.selos li{display:flex; align-items:center; gap:10px; font-size:.92rem; line-height:1.25}
.selos b{display:block; font-weight:700}
.selos small{color:#A9C2E8; font-size:.8rem}
.selos .bolha{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:grid; place-items:center; background:rgba(255,255,255,.12);
}
.selos .bolha svg{width:18px; height:18px}

/* ---------- seções ---------- */
.secao{padding:56px 0}
.secao--gelo{background:var(--gelo)}
.secao__cabeca{margin-bottom:26px; max-width:640px}
.secao__cabeca p{color:var(--texto-2); margin:10px 0 0}
.olho{
  display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); margin-bottom:10px;
}

/* ---------- setores ---------- */
.setores{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.setor{
  border:1px solid var(--linha); background:var(--branco); border-radius:var(--raio);
  padding:16px 14px; text-align:left; transition:.16s; display:block;
}
.setor:hover{border-color:var(--azul); transform:translateY(-2px); box-shadow:var(--sombra)}
.setor__pino{display:block; width:30px; height:6px; border-radius:999px; margin-bottom:12px}
.setor b{display:block; font-weight:700; font-size:1rem}
.setor small{color:var(--texto-2); font-size:.82rem; line-height:1.35; display:block; margin-top:3px}

/* ---------- busca e filtros ---------- */
.barra-busca{position:relative; margin-bottom:14px}
.barra-busca svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--texto-2); pointer-events:none;
}
.barra-busca input{
  width:100%; padding:14px 16px 14px 46px; border:1px solid var(--linha);
  border-radius:999px; background:var(--branco); font-size:1rem;
}
.barra-busca input:focus{border-color:var(--azul); outline:none; box-shadow:0 0 0 3px rgba(0,92,226,.14)}
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.chip{
  border:1px solid var(--linha); background:var(--branco); color:var(--texto-2);
  padding:8px 15px; border-radius:999px; font-size:.9rem; font-weight:600; white-space:nowrap;
}
.chip:hover{border-color:var(--azul); color:var(--azul)}
.chip[aria-pressed="true"]{background:var(--marinho); border-color:var(--marinho); color:#fff}

/* ---------- grade de produtos ---------- */
.grade{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{
  border:1px solid var(--linha); border-radius:var(--raio-g); background:var(--branco);
  overflow:hidden; display:flex; flex-direction:column; transition:.16s; position:relative;
}
.card:hover{box-shadow:var(--sombra); border-color:#CBD7E8; transform:translateY(-2px)}
.card__foto{
  border:0; padding:0; background:var(--branco); width:100%;
  aspect-ratio:1/1; display:block; position:relative;
}
.card__foto img{width:100%; height:100%; object-fit:contain; padding:12px}
.card__marca{
  position:absolute; top:10px; left:10px; z-index:1; background:var(--gelo-2); color:var(--marinho);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
}
.card__corpo{padding:0 15px 15px; display:flex; flex-direction:column; flex:1; gap:9px}
.card__nome{
  font-weight:600; font-size:.95rem; line-height:1.32; margin:0; text-align:left;
  background:none; border:0; padding:0; color:var(--texto);
}
.card__nome:hover{color:var(--azul)}
.card__precos{margin-top:auto}
.card__avista{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.card__avista b{font-family:'Archivo',sans-serif; font-size:1.42rem; font-weight:800; letter-spacing:-.02em}
.card__avista span{font-size:.78rem; color:var(--ok); font-weight:700}
.card__normal{font-size:.8rem; color:var(--texto-2); margin-top:2px}
.card__normal s{color:var(--texto-2)}

/* ---------- botões ---------- */
.btn{
  border:0; border-radius:11px; padding:12px 18px; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; transition:.15s;
}
.btn--azul{background:var(--azul); color:#fff}
.btn--azul:hover{background:#0050C6}
.btn--marinho{background:var(--marinho); color:#fff}
.btn--marinho:hover{background:var(--marinho-2)}
.btn--zap{background:#107C3A; color:#fff}
.btn--zap:hover{background:#0D6E33}
.btn--linha{background:transparent; color:var(--texto); border:1px solid var(--linha)}
.btn--linha:hover{border-color:var(--azul); color:var(--azul)}
.btn--bloco{width:100%}
.btn svg{width:18px; height:18px; flex:none}

/* ---------- marcas ---------- */
.marcas__trilho{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.marca{
  border:1px solid var(--linha); background:var(--branco); border-radius:var(--raio);
  min-height:118px; display:grid; place-items:center; padding:18px 22px;
  transition:.16s;
}
.marca:hover{border-color:#CBD7E8; box-shadow:var(--sombra)}
.marca img{max-height:60px; max-width:80%; width:auto; height:auto; object-fit:contain}
/* Coral e Qualyvinil vieram com o próprio fundo escuro na arte, então elas
   já trazem margem interna e pedem mais altura para pesar igual às outras
   duas, que são transparentes e ficam direto sobre o card branco. */
.marca--proprio img{max-height:78px; max-width:88%; border-radius:10px}
.marca--texto{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:1.02rem; color:var(--marinho); letter-spacing:-.01em;
}

/* ---------- como comprar ---------- */
.passos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
.passo{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:20px;
}
.passo__n{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:.95rem;
  color:var(--azul); display:block; margin-bottom:6px;
}
.passo b{display:block; font-size:1.06rem; margin-bottom:6px}
.passo p{margin:0; color:var(--texto-2); font-size:.93rem}

/* ---------- a loja ---------- */
/* As duas colunas terminam juntas: com `align-items:start` o mapa descia 85px
   além do fim dos dados e sobrava um vazio embaixo da coluna esquerda. */
.loja{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch}
.loja__dados{display:flex; flex-direction:column; gap:14px}
.loja__zap{margin-top:auto}
.dado{display:flex; gap:12px; align-items:flex-start}
.dado .bolha{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--azul-fundo); color:var(--azul);
}
.dado .bolha svg{width:19px; height:19px}
.dado b{display:block; font-size:.95rem}
.dado span, .dado a{color:var(--texto-2); font-size:.93rem; text-decoration:none}
.dado a:hover{color:var(--azul); text-decoration:underline}
.mapa{
  border:0; width:100%; height:100%; min-height:340px;
  border-radius:var(--raio-g); background:var(--gelo-2);
}

/* ---------- rodapé ---------- */
.rodape{background:var(--marinho); color:#fff; padding:44px 0 26px; margin-top:10px}
.rodape__grade{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px}
.rodape img{height:52px; width:auto; margin-bottom:12px}
.rodape p, .rodape li, .rodape a{color:#B9CBE8; font-size:.9rem; text-decoration:none}
.rodape a:hover{color:#fff}
.rodape h3{font-family:'Archivo',sans-serif; font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; margin:0 0 12px}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rodape__fim{
  border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:#8FA8CC; font-size:.82rem;
}

/* ---------- barra do pedido (celular) ---------- */
.barra-pedido{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
  background:var(--marinho); color:#fff; border:0; border-radius:15px;
  padding:13px 18px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--sombra-alta); gap:12px;
}
.barra-pedido b{display:block; font-size:.95rem}
.barra-pedido small{color:#A9C2E8; font-size:.8rem}
.barra-pedido span{background:var(--azul); padding:9px 16px; border-radius:10px; font-weight:700; font-size:.92rem}

/* ---------- gaveta e modal ---------- */
.veu{
  position:fixed; inset:0; background:rgba(4,27,65,.55); z-index:80;
  opacity:0; pointer-events:none; transition:.2s;
}
.veu.aberto{opacity:1; pointer-events:auto}
.gaveta{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); z-index:90;
  background:var(--branco); transform:translateX(100%); transition:transform .24s ease;
  display:flex; flex-direction:column;
}
.gaveta.aberta{transform:none}
.gaveta__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--linha);
}
.gaveta__topo h2{font-family:'Archivo',sans-serif; font-size:1.15rem; margin:0}
.gaveta__corpo{flex:1; overflow-y:auto; padding:18px}
.gaveta__pe{border-top:1px solid var(--linha); padding:16px 18px; background:var(--gelo)}
.total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.total b{font-family:'Archivo',sans-serif; font-size:1.5rem; font-weight:800}
.total small{display:block; color:var(--ok); font-weight:700; font-size:.8rem}

.item{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--linha)}
.item:last-child{border-bottom:0}
.item img{width:60px; height:60px; object-fit:contain; border:1px solid var(--linha); border-radius:10px; flex:none}
.item__nome{font-weight:600; font-size:.9rem; line-height:1.3}
.item__marca{font-size:.75rem; color:var(--texto-2)}
.item__linha{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px}
.qtd{display:flex; align-items:center; border:1px solid var(--linha); border-radius:9px; overflow:hidden}
.qtd button{border:0; background:var(--gelo); width:30px; height:30px; font-weight:700; color:var(--texto)}
.qtd button:hover{background:var(--gelo-2); color:var(--azul)}
.qtd span{width:34px; text-align:center; font-weight:600; font-size:.9rem}
.item__preco{font-weight:700; font-size:.95rem}

.modal{
  position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center; padding:18px;
}
.modal.aberto{display:flex}
.modal__caixa{
  background:var(--branco); border-radius:var(--raio-g); width:min(560px,100%);
  max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--sombra-alta);
}
.modal__topo{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--linha)}
.modal__topo h3{font-family:'Archivo',sans-serif; font-size:1.2rem; margin:0}
.modal__corpo{padding:20px; overflow-y:auto}

/* detalhe do produto */
.det{display:grid; grid-template-columns:200px 1fr; gap:20px}
.det__foto{border:1px solid var(--linha); border-radius:var(--raio); aspect-ratio:1/1; object-fit:contain; padding:10px; width:100%}
.det h4{font-family:'Archivo',sans-serif; font-size:1.25rem; margin:6px 0 4px; line-height:1.2}
.det__marca{font-size:.78rem; color:var(--texto-2); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.det__preco{margin:16px 0}
.det__preco b{font-family:'Archivo',sans-serif; font-size:2rem; font-weight:800; display:block; line-height:1}
.det__preco em{font-style:normal; color:var(--ok); font-weight:700; font-size:.88rem}
.det__preco small{display:block; color:var(--texto-2); margin-top:6px; font-size:.86rem}
.aviso{
  background:var(--gelo); border:1px solid var(--linha); border-left:3px solid var(--azul-claro);
  border-radius:10px; padding:11px 13px; font-size:.86rem; color:var(--texto-2); margin:14px 0;
}

/* checkout */
.passo-topo{display:flex; gap:6px; margin-bottom:18px}
.passo-topo div{flex:1; height:4px; border-radius:999px; background:var(--linha)}
.passo-topo div.on{background:var(--azul)}
.campo{margin-bottom:14px}
.campo label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px}
.campo input{
  width:100%; padding:12px 14px; border:1px solid var(--linha); border-radius:11px; font-size:1rem;
}
.campo input:focus{border-color:var(--azul); outline:none; box-shadow:0 0 0 3px rgba(0,92,226,.14)}
.opcoes{display:grid; gap:9px}
.opcao{
  display:flex; align-items:flex-start; gap:11px; border:1px solid var(--linha);
  border-radius:12px; padding:13px 15px; cursor:pointer; transition:.14s;
}
.opcao:hover{border-color:var(--azul)}
.opcao input{margin-top:3px; accent-color:var(--azul); flex:none}
.opcao b{display:block; font-size:.95rem}
.opcao small{color:var(--texto-2); font-size:.84rem}
.resumo{background:var(--gelo); border-radius:12px; padding:14px 16px; margin-bottom:16px; font-size:.9rem}
.resumo div{display:flex; justify-content:space-between; padding:3px 0}
.resumo div:last-child{border-top:1px solid var(--linha); margin-top:7px; padding-top:9px; font-weight:700}

.vazio{text-align:center; padding:50px 20px; color:var(--texto-2)}
.vazio b{display:block; font-family:'Archivo',sans-serif; font-size:1.15rem; color:var(--texto); margin-bottom:6px}

/* ---------- reserva de espaço para o que o JS preenche ----------
   Todo container dinâmico nasce vazio no HTML. Com CPU fraca e 4G o
   navegador pinta ANTES do app.js rodar, e quando o conteúdo entra tudo
   abaixo desce: o PageSpeed contou 0,075 de CLS na seção do catálogo, que
   é o que fica logo abaixo dos setores. `:empty` casa só enquanto não há
   filho e se desliga sozinho quando o JS escreve — sem classe, sem estado.
   Alturas medidas no site real em 18/09/2026 (desktop / tablet / celular). */
#setores-grid:empty{min-height:115px}
#filtros:empty{min-height:89px}
#grade:empty{min-height:3301px}
#trilhoMarcas:empty{min-height:118px}
#lojaDados:empty{min-height:340px}
@media (max-width:960px){
  #setores-grid:empty{min-height:207px}
  #grade:empty{min-height:3873px}
  #trilhoMarcas:empty{min-height:250px}
  #lojaDados:empty{min-height:336px}
}
@media (max-width:620px){
  #setores-grid:empty{min-height:325px}
  #filtros:empty{min-height:234px}
  #grade:empty{min-height:5876px}
  #lojaDados:empty{min-height:359px}
}

/* ---------- celular ---------- */
@media (max-width:960px){
  .grade{grid-template-columns:repeat(3,1fr)}
  .setores{grid-template-columns:repeat(3,1fr)}
  .loja{grid-template-columns:1fr}
  .mapa{height:auto; aspect-ratio:4/3; min-height:0}
  .loja__zap{margin-top:0}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .marcas__trilho{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr}
  .selos__lista{grid-template-columns:repeat(2,1fr); gap:12px 18px}
  .selos li > span:last-child{min-width:0}
}
@media (max-width:620px){
  .secao{padding:38px 0}
  .grade{grid-template-columns:repeat(2,1fr); gap:12px}

  /* Os setores eram um trilho horizontal, e no celular o segundo card ficava
     cortado na borda — na primeira olhada parece defeito, não "role para o
     lado". Grade de 2 elimina a dúvida. */
  .setores{grid-template-columns:repeat(2,1fr); gap:10px}
  .setor{padding:13px 12px}
  .setor b{font-size:.93rem}
  .setor small{font-size:.78rem}
  .setor__pino{width:24px; height:5px; margin-bottom:9px}

  /* A faixa de vantagens comia 227px — quase um terço da tela — antes de o
     cliente chegar no catálogo. No celular ela vira uma tira de três colunas,
     ícone em cima e texto curto embaixo: ~80px, e o argumento continua lá.
     O quarto selo (as marcas) sai só aqui — ele repete a seção de marcas
     logo abaixo, que mostra as quatro logos. Ver ARQUITETURA-TELAS §4. */
  .selos{padding:8px 0}
  .selos__lista{grid-template-columns:1fr; gap:0}
  .selos li{
    gap:10px; padding:7px 0; align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .selos li:nth-child(3){border-bottom:0}
  .selos li:nth-child(4){display:none}
  .selos li > span:last-child{
    display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0;
  }
  .selos b{font-size:.88rem}
  .selos small{font-size:.79rem}
  .selos .bolha{width:26px; height:26px; border-radius:8px}
  .selos .bolha svg{width:14px; height:14px}
  .rodape__grade{grid-template-columns:1fr; gap:22px}
  .det{grid-template-columns:1fr}
  .det__foto{max-width:190px; margin:0 auto}
  .topo__zap span{display:none}
  .topo__zap{padding:9px}
  .card__avista b{font-size:1.25rem}
  body{padding-bottom:78px}
}