/* estilo.css — visual da prévia da Backup Informática.
   Cores tiradas do logo (ciano #00a8e8 e azul #0078a8) e do azul profundo das artes do Instagram.
   Um motivo gráfico só: o chevron ">>>" que fica sob o nome no logo. Ele vira o fundo da capa,
   o marcador das listas, o número dos passos e a seta das perguntas.
   Uma fonte só, Saira variável: estreita e pesada nos títulos, normal no texto. */
:root {
  --azul: #0d3b8f;            /* fundo da capa e da chamada final; parente do azul das artes */
  --azul-escuro: #082a6b;
  --marinho: #061a4a;         /* títulos em fundo claro, bloco de empresas e rodapé */
  --ciano: #00a8e8;           /* "up" e chevrons do logo: detalhes e texto grande em fundo escuro */
  --teal: #006d99;            /* "Back" do logo (#0078a8), um tom mais escuro para dar 5:1 também sobre o gelo */
  --teal-escuro: #005f85;
  --gelo: #eef4fb;
  --gelo-2: #d9e4f2;
  --tinta: #0f1a2e;
  --cinza: #4a5872;
  --claro-no-azul: #d6e4fb;   /* texto secundário em fundo azul, tingido do próprio azul */
  --zap: #1a7f45;
  --zap-escuro: #146a39;
  --foco: #00a8e8;
  --altura-topo: 128px;      /* faixa de prévia em duas linhas no celular, mais o topo */
  --fonte: "Saira", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3l9 9-9 9' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html { color: var(--tinta); background: #fff; }
body { font: 400 17px/1.55 var(--fonte); }
::selection { background: var(--ciano); color: var(--marinho); }
a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
strong { font-weight: 700; }
@media (min-width: 900px) { :root { --altura-topo: 104px; } }

/* ---------- títulos ---------- */
.titulo { font-weight: 800; font-stretch: 82%; font-size: clamp(30px, 4.6vw, 44px); line-height: 1; letter-spacing: -.01em; color: var(--marinho); text-wrap: balance; }
.titulo--claro { color: #fff; }
.bloco__intro { max-width: 62ch; margin-top: 14px; font-size: 18px; color: var(--cinza); }
h3, h4 { font-weight: 800; font-stretch: 86%; line-height: 1.12; }

/* ---------- botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 8px; text-decoration: none; font-weight: 700; font-stretch: 92%; font-size: 17px; line-height: 1.1; cursor: pointer; transition: background-color .15s, border-color .15s; }
.botao svg { width: 24px; height: 24px; flex: none; }
.botao--zap { background: var(--zap); color: #fff; }
.botao--zap:hover { background: var(--zap-escuro); }
.botao--marca { background: var(--azul); color: #fff; }
.botao--marca:hover { background: var(--azul-escuro); }
.botao--claro { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.botao--claro:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.botao--claro-cheio { background: #fff; color: var(--azul); }
.botao--claro-cheio:hover { background: var(--gelo); }
.botao--largo { width: 100%; padding: 10px 16px; line-height: 1.2; text-align: center; }

/* ---------- faixa de prévia e topo ---------- */
.fixo { position: sticky; top: 0; z-index: 50; }
.faixa-previa { margin: 0; padding: 8px 16px; background: var(--marinho); color: #fff; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.4; }
.topo { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--gelo-2); }
.topo__marca { display: inline-flex; align-items: center; }
.topo__marca img { width: auto; height: 38px; }
.topo nav { display: none; gap: 20px; margin-left: 14px; }
.topo nav a { text-decoration: none; font-weight: 600; font-stretch: 94%; font-size: 15.5px; color: var(--marinho); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .15s; }
.topo nav a:hover { border-bottom-color: var(--ciano); }
.topo__zap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; background: var(--zap); color: #fff; text-decoration: none; font-weight: 700; font-stretch: 92%; font-size: 15.5px; white-space: nowrap; }
.topo__zap:hover { background: var(--zap-escuro); }
.topo__zap svg { width: 22px; height: 22px; }
@media (max-width: 380px) { .topo__zap span { display: none; } .topo__zap { padding: 0 12px; } }
@media (min-width: 900px) { .topo { padding: 12px 40px; } .topo nav { display: flex; } .topo__marca img { height: 42px; } }

/* ---------- capa: azul profundo com os chevrons do logo ao fundo e o formulário de sintoma ---------- */
.capa { position: relative; isolation: isolate; padding: 40px 16px 48px; background: var(--azul); color: #fff; overflow: hidden; }
.capa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cpath d='M8 6l18 22L8 50M36 6l18 22-18 22' fill='none' stroke='%232a63c9' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 64px 56px; background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%), linear-gradient(90deg, transparent 10%, #000 80%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%), linear-gradient(90deg, transparent 10%, #000 80%); mask-composite: intersect;
  opacity: .42;
}
.capa__grade { max-width: 1180px; margin: 0 auto; display: grid; gap: 36px; }
.capa__grade > * { min-width: 0; }
.capa h1 { font-weight: 800; font-stretch: 80%; font-size: clamp(36px, 7.4vw, 64px); line-height: .98; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.capa__lead { margin-top: 20px; max-width: 56ch; font-size: 18px; color: var(--claro-no-azul); }
.capa__fone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 22px; font-size: 16px; color: var(--claro-no-azul); }
.capa__fone a { color: #fff; font-weight: 700; margin-left: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration-color: rgba(255, 255, 255, .45); }
.capa__fone .capa__onde { display: inline-flex; align-items: center; gap: 8px; margin-left: 0; white-space: normal; }
.capa__fone .capa__onde::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--ciano); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.capa__sep { display: none; }

/* o formulário: equipamento e sintoma em chips, que viram a mensagem do WhatsApp */
.triagem { color: var(--tinta); background: #fff; border-radius: 12px; padding: 22px 18px 20px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5); }
.triagem h2 { font-weight: 800; font-stretch: 84%; font-size: 25px; line-height: 1.05; color: var(--marinho); }
.triagem__intro { margin-top: 8px; font-size: 15.5px; color: var(--cinza); }
.chips { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-stretch: 92%; font-size: 15px; color: var(--marinho); }
.chips__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--gelo-2); border-radius: 999px; background: #fff; font-weight: 600; font-stretch: 94%; font-size: 15px; color: var(--marinho); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.chip span:hover { border-color: var(--teal); }
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--ciano); outline-offset: 2px; }
.triagem__detalhe { display: block; margin-top: 18px; }
.triagem__detalhe span { display: block; margin-bottom: 6px; font-weight: 700; font-stretch: 92%; font-size: 15px; color: var(--marinho); }
.triagem__detalhe input { width: 100%; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--gelo-2); border-radius: 8px; background: #fff; font-size: 16px; color: var(--tinta); caret-color: var(--teal); }
.triagem__detalhe input::placeholder { color: #5b6a85; }
.triagem__detalhe input:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 168, 232, .25); }
.triagem .botao--largo { margin-top: 18px; }
.triagem__nota { margin-top: 10px; font-size: 13.5px; color: var(--cinza); text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .capa { padding: 64px 40px 72px; }
  .capa__grade { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 56px; }
  .triagem { padding: 28px 26px 24px; }
}

/* ---------- blocos ---------- */
.bloco { padding: 56px 16px; }
.bloco > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .bloco { padding: 84px 40px; } }

/* ---------- a loja: foto real e a apresentação deles ---------- */
.loja { background: #fff; }
.loja__grade { display: grid; gap: 28px; }
.loja__foto img { width: 100%; height: auto; border-radius: 10px; }
.loja__foto figcaption { margin-top: 8px; font-size: 14px; color: var(--cinza); }
.loja__texto p { margin-top: 14px; max-width: 60ch; color: var(--cinza); }
.loja__texto .titulo + p { margin-top: 18px; }
.citacao { margin-top: 26px; padding-left: 30px; position: relative; }
.citacao::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; background: var(--ciano); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.citacao p { margin: 0; max-width: 46ch; font-weight: 600; font-stretch: 90%; font-size: 20px; line-height: 1.3; color: var(--marinho); text-wrap: balance; }
.citacao footer { margin-top: 8px; font-size: 14.5px; color: var(--cinza); }
@media (min-width: 900px) {
  .loja__grade { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
}

/* ---------- o que a Backup conserta: folha de serviços em linhas ---------- */
.conserta { background: var(--gelo); }
.folha { margin-top: 30px; border-top: 1px solid var(--gelo-2); }
.folha__linha { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--gelo-2); }
.folha__icone { width: 40px; height: 40px; background: var(--teal); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.folha__nome { font-size: 22px; color: var(--marinho); }
.folha__servicos { grid-column: 2; color: var(--cinza); max-width: 70ch; }
[data-icone="desktop"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='12.5' rx='2'/%3E%3Cpath d='M8.5 20.5h7M12 16.5v4'/%3E%3C/svg%3E"); }
[data-icone="notebook"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4.5' width='16' height='11' rx='1.8'/%3E%3Cpath d='M2 19h20M10 19h4'/%3E%3C/svg%3E"); }
[data-icone="celular"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
[data-icone="impressora"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5V3h10v5.5'/%3E%3Crect x='2.5' y='8.5' width='19' height='8.5' rx='2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E"); }
[data-icone="nobreak"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M13 7l-3.5 5.5h5L11 18'/%3E%3C/svg%3E"); }
[data-icone="gamer"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a5 5 0 0 1 5 5v2.5a3 3 0 0 1-5.4 1.8L15.5 15h-7l-1.1 1.3A3 3 0 0 1 2 14.5V12a5 5 0 0 1 5-5z'/%3E%3Cpath d='M8 10.5v3M6.5 12h3M16.5 11.5h.01M18.5 13h.01'/%3E%3C/svg%3E"); }
.conserta__mais { margin-top: 22px; color: var(--cinza); }
.conserta__mais a { color: var(--teal); font-weight: 700; }
@media (min-width: 900px) {
  .folha__linha { grid-template-columns: 48px 300px 1fr; gap: 0 24px; padding: 22px 0; }
  .folha__icone { width: 44px; height: 44px; }
  .folha__servicos { grid-column: 3; }
  .folha__nome { font-size: 24px; }
}

/* ---------- como funciona o orçamento: quatro passos com o número em chevron ---------- */
.orcamento { background: #fff; }
.passos { display: grid; gap: 14px; margin-top: 30px; }
.passo { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; align-items: start; padding: 20px 20px 20px 18px; background: var(--gelo); border-radius: 10px; }
.passo__numero { grid-row: 1 / 3; display: grid; place-items: center; width: 50px; height: 50px; padding-right: 10px; background: var(--azul); color: #fff; font-weight: 800; font-stretch: 80%; font-size: 24px; line-height: 1; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.passo h3 { font-size: 21px; color: var(--marinho); }
.passo p { color: var(--cinza); }
.orcamento__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.orcamento__link { color: var(--teal); font-weight: 600; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .passo { grid-template-columns: 1fr; gap: 10px; padding: 24px 22px 26px; }
  .passo__numero { grid-row: auto; margin-bottom: 6px; }
}

/* ---------- peças e produtos ---------- */
.produtos { padding: 56px 0 32px; background: var(--gelo); }
.produtos__cabeca, .categorias, .produtos__pe { max-width: 1212px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.produtos__aviso { max-width: 64ch; margin-top: 16px; padding: 14px 16px 14px 44px; position: relative; border-radius: 8px; font-size: 15px; color: var(--marinho); background: #fff; }
.produtos__aviso::before { content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; background: var(--ciano); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.categorias-nav { margin-top: 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.categorias-nav::-webkit-scrollbar { display: none; }
.categorias-nav ul { display: flex; gap: 8px; width: max-content; min-width: 100%; margin: 0; padding: 2px 16px; list-style: none; }
.categorias-nav a { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--gelo-2); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; font-stretch: 94%; font-size: 15px; color: var(--marinho); white-space: nowrap; transition: border-color .15s; }
.categorias-nav a:hover { border-color: var(--teal); }
.categoria { margin-top: 36px; }
.categoria__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.categoria__nome { font-size: 26px; color: var(--marinho); }
.categoria__nota { color: var(--cinza); font-size: 16px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: grid; grid-template-rows: auto 1fr; border: 1.5px solid var(--gelo-2); border-radius: 10px; overflow: hidden; background: #fff; }
.card[data-largo] { grid-column: 1 / -1; }
/* item sem foto: ocupa a linha inteira, em formato de linha de lista, para não parecer um card vazio */
.card:not(:has(.card__foto, .card__mini)) { grid-column: 1 / -1; align-self: start; }
.card:not(:has(.card__foto, .card__mini)) .card__texto { display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
.card:not(:has(.card__foto, .card__mini)) .card__preco { margin: 2px 0 4px; }
@media (min-width: 600px) {
  .card:not(:has(.card__foto, .card__mini)) .card__texto { grid-template-columns: 1fr auto; align-items: center; }
  .card:not(:has(.card__foto, .card__mini)) .card__nome, .card:not(:has(.card__foto, .card__mini)) .card__desc, .card:not(:has(.card__foto, .card__mini)) .card__preco { grid-column: 1; }
  .card:not(:has(.card__foto, .card__mini)) .card__botao { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
}
.card__foto { display: block; background: var(--gelo); }
.card__foto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.card[data-largo] .card__foto img { aspect-ratio: 2.3 / 1; }
.card__mini { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; background: var(--gelo); }
.card__mini img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; flex: none; }
.card__mini span { font-size: 13.5px; line-height: 1.35; color: var(--cinza); }
.card__texto { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.card__nome { font-size: 19px; color: var(--marinho); }
.card__desc { color: var(--cinza); font-size: 15px; }
.card__preco { margin: 4px 0 6px; font-weight: 600; font-stretch: 92%; font-size: 13.5px; color: var(--teal); }
.card__botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: auto; padding: 0 12px; border-radius: 8px; background: var(--teal); color: #fff; text-decoration: none; font-weight: 700; font-stretch: 92%; font-size: 16px; transition: background-color .15s; }
.card__botao:hover { background: var(--teal-escuro); }
.card__botao svg { width: 20px; height: 20px; }
.produtos__pe { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--gelo-2); color: var(--cinza); }
.produtos__pe p + p { margin-top: 8px; }
.produtos__pe a { color: var(--teal); font-weight: 700; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
  .card[data-largo] { grid-column: span 2; }
  .card__texto { padding: 16px 18px 18px; }
  .card__nome { font-size: 20px; }
}
@media (min-width: 900px) {
  .produtos { padding: 84px 0 48px; }
  .produtos__cabeca, .categorias, .produtos__pe { max-width: 1260px; padding-left: 40px; padding-right: 40px; }
  .categorias-nav ul { padding: 2px 40px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
  .categoria__cabeca { display: grid; gap: 4px; }
}

/* ---------- para empresas: bloco marinho ---------- */
.empresas { background: var(--marinho); color: #fff; }
.empresas__grade { display: grid; gap: 30px; }
.empresas__texto p { margin-top: 16px; max-width: 52ch; color: var(--claro-no-azul); }
.empresas__texto .botao { margin-top: 24px; }
.empresas__lista { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.empresas__lista li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 500; }
.empresas__lista li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 16px; height: 16px; background: var(--ciano); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
@media (min-width: 900px) {
  .empresas__grade { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
}

/* ---------- perguntas: sanfona com a seta em chevron ---------- */
.perguntas { background: #fff; }
.faq { max-width: 860px; margin-top: 26px; border-top: 1px solid var(--gelo-2); }
.faq__item { border-bottom: 1px solid var(--gelo-2); }
.faq__item summary { position: relative; display: block; padding: 16px 44px 16px 0; cursor: pointer; list-style: none; font-weight: 700; font-stretch: 90%; font-size: 18px; line-height: 1.3; color: var(--marinho); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--teal); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(-90deg); }
.faq__item summary:hover { color: var(--teal); }
.faq__item p { padding: 0 44px 18px 0; max-width: 68ch; color: var(--cinza); }

/* ---------- onde fica ---------- */
.onde { background: var(--gelo); }
.onde__grade { display: grid; gap: 28px; }
.onde__endereco { margin-top: 18px; font-size: 20px; line-height: 1.35; color: var(--marinho); }
.onde__endereco a { color: var(--marinho); font-weight: 800; font-stretch: 88%; font-size: 24px; }
.horario { margin-top: 20px; max-width: 420px; border-top: 1px solid var(--gelo-2); }
.horario > div { border-bottom: 1px solid var(--gelo-2); padding: 10px 0; }
.horario dt { font-weight: 600; color: var(--marinho); }
.horario dd { color: var(--cinza); }
.horario .hoje dd { color: var(--marinho); }
.horario .fechado dd { color: #7a8599; }
.onde__nota { margin-top: 10px; max-width: 48ch; font-size: 14.5px; color: var(--cinza); }
.contatos { display: grid; gap: 0; margin-top: 24px; max-width: 420px; border-top: 1px solid var(--gelo-2); }
.contatos li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gelo-2); }
.contatos span { font-size: 14.5px; color: var(--cinza); }
.contatos a { font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* sem min-height: com aspect-ratio, um mínimo de altura empurraria a largura além da coluna */
.onde__mapa { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .onde__grade { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
  .onde__mapa { aspect-ratio: 4 / 3.3; }
}

/* ---------- chamada final: leva na loja ou manda mensagem ---------- */
.chamada { padding: 56px 16px; background: var(--azul); color: #fff; }
.chamada__grade { max-width: 1180px; margin: 0 auto; display: grid; gap: 16px; }
.chamada__caixa { padding: 26px 22px 24px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.chamada__caixa h3 { font-size: 26px; color: #fff; }
.chamada__caixa p { margin-top: 10px; max-width: 46ch; color: var(--claro-no-azul); }
.chamada__link { display: inline-block; margin-top: 14px; color: #fff; font-weight: 700; }
.chamada__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (min-width: 900px) {
  .chamada { padding: 72px 40px; }
  .chamada__grade { grid-template-columns: 1fr 1fr; gap: 24px; }
  .chamada__caixa { padding: 32px 30px 30px; }
}

/* ---------- rodapé ---------- */
.rodape { padding: 36px 16px 110px; background: var(--marinho); color: #b9cbe8; font-size: 15px; line-height: 1.6; }
.rodape > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.rodape img { width: 150px; height: auto; margin-bottom: 14px; }
.rodape p + p { margin-top: 6px; }
.rodape a { color: #fff; }
.rodape__previa { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); color: #93a9cc; }
@media (min-width: 900px) { .rodape { padding: 44px 40px 100px; } }

/* ---------- botão flutuante some na capa ---------- */
.na-capa .wa-flutuante { opacity: 0; pointer-events: none; }
.wa-flutuante { transition: opacity .2s; }

/* ---------- foto ampliada ---------- */
.foto-ampliada img { background: #fff; }