/* Site público da Vila Rica Calçados.
   Identidade: azul royal #004AAD + branco, Montserrat (títulos) e Poppins (corpo),
   coroa como selo. Sem cor quente competindo com o azul — regra do design-guide.
   O VERDE só existe para AÇÃO (falar no WhatsApp). Se ele virar cor de enfeite,
   deixa de significar "clique aqui" e o site perde o único sinal de conversão que tem.

   Fontes: servidas DESTE domínio (nada de CDN) — a página tem que abrir rápido no 3G
   da porta da loja e não depender de terceiro pra renderizar. Só o subset `latin`
   (52 KB no total): os acentos do português cabem nele, latin-ext é para o leste europeu.
   Montserrat é fonte variável, então um arquivo cobre 700 e 800. */

@font-face {
  font-family: Montserrat;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  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: Poppins;
  src: url("/fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("/fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #004AAD;
  --azul-vivo: #0065F1;
  --azul-claro: #438AFE;
  --navy: #002E6C;
  --navy-2: #003B8B;
  --cinza: #5B6B82;
  --cinza-claro: #EEF2F8;
  /* Neutro com viés de azul: cinza puro ao lado do royal parece sujo. */
  --papel: #F6F8FC;
  --borda: #DFE7F3;
  --branco: #FFFFFF;
  --zap: #25D366;
  --zap-escuro: #1EAE52;

  --raio: 14px;
  --raio-g: 20px;
  --sombra: 0 2px 12px rgba(0, 46, 108, .07);
  --sombra-forte: 0 10px 30px -8px rgba(0, 46, 108, .22);

  /* Escala vertical única — seções que respiram igual parecem projetadas. */
  --secao: clamp(52px, 8vw, 88px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--branco);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Padrão de escrita do site (19/08/26): Letra Maiúscula Em Cada Palavra.
     Feito pelo CSS pra valer em TUDO de uma vez (inclusive texto montado pelo JS)
     sem reescrever o HTML — e sem tocar no que o cliente recebe no WhatsApp,
     que continua escrito normal. Exceções logo abaixo. */
  text-transform: capitalize;
}
/* O que fica como está escrito: a PRÉVIA do pedido (ela mostra exatamente a
   mensagem que vai chegar no WhatsApp) e os endereços do site no rodapé. */
.previa, .rodape-pilha a, .bio-rodape a { text-transform: none; }

h1, h2, h3, .fonte-titulo {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--navy);
  text-wrap: balance;
}

a { color: var(--azul); }
img { max-width: 100%; height: auto; display: block; }

.container { width: min(1080px, 92vw); margin-inline: auto; }
.centro { text-align: center; }
.sub { color: var(--cinza); max-width: 60ch; margin-inline: auto; }

/* Sobrelinha: diz de que assunto é o bloco antes do título dizer o quê. */
.eyebrow {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azul-vivo);
  margin: 0 0 12px;
}
.hero .eyebrow, .bio .eyebrow { color: #9FC4FF; }

/* ---------- cabeçalho ---------- */
.topo { background: var(--azul); padding: 14px 0; }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo img { height: 38px; width: auto; }
.topo nav { display: flex; gap: 20px; flex-wrap: wrap; }
.topo nav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; opacity: .92;
}
.topo nav a:hover { opacity: 1; text-decoration: underline; }
.topo nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- hero ----------
   A coroa entra como marca d'água atrás do texto: é o selo da casa, e usar o
   símbolo grande e apagado vale mais que repetir o logo pequeno. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul) 0%, var(--navy) 100%);
  color: #fff;
  padding: var(--secao) 0;
  text-align: center;
}
.hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -70px;
  width: 320px; height: 320px;
  background: url("/img/logo-coroa.png") no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(30px, 5.4vw, 50px); }
.hero p { font-size: clamp(16px, 2.2vw, 19px); opacity: .95; max-width: 46ch; margin: 0 auto 30px; }
.hero .apoio-hero { font-size: 14px; opacity: .8; margin-top: 18px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-branco { background: #fff; color: var(--azul); box-shadow: var(--sombra); }
.btn-zap { background: var(--zap); color: #fff; box-shadow: 0 4px 16px rgba(37, 211, 102, .3); }
.btn-zap:hover { background: var(--zap-escuro); }
.btn-linha { background: transparent; color: var(--azul); border-color: var(--azul); }
.btn-linha-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-linha-claro:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.btn-mini { padding: 10px 20px; font-size: 14.5px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- seções ---------- */
section { padding: var(--secao) 0; }
section.alt { background: var(--papel); }
section h2 { font-size: clamp(23px, 3.4vw, 33px); }

.grade { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: #fff; border-radius: var(--raio); padding: 26px;
  box-shadow: var(--sombra); border: 1px solid var(--borda);
}
.card h3 { font-size: 19px; }
.card p { color: var(--cinza); margin: 0 0 14px; }

.selo {
  display: inline-block; background: var(--cinza-claro); color: var(--navy-2);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600;
  margin-bottom: 10px;
}

/* ---------- catálogo por faixa de preço ----------
   Cada card leva a uma VITRINE do App de Fotos: catálogo ao vivo, com o estoque e o
   preço daquela loja no momento do clique — produto que esgota some sozinho. Por isso
   o card promete faixa de preço, e nunca um produto específico: prometer o par que
   pode ter acabado é a forma mais rápida de queimar a ida à loja. */
.faixas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.faixa {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 28px 26px 24px; text-decoration: none; color: var(--navy);
  box-shadow: var(--sombra);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
}
.faixa:hover, .faixa:focus-visible {
  transform: translateY(-3px); box-shadow: var(--sombra-forte); border-color: var(--azul-claro);
}
.faixa .ate { font-size: 13px; font-weight: 600; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; }
.faixa .valor {
  font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: clamp(32px, 5vw, 42px); color: var(--azul); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.faixa .quem { color: var(--cinza); font-size: 14.5px; margin: 8px 0 16px; }
.faixa .abrir {
  margin-top: auto; font-family: Montserrat, sans-serif; font-weight: 700;
  font-size: 14.5px; color: var(--azul-vivo);
}
.faixa .abrir::after { content: " →"; }

/* ---------- seletor de loja ----------
   O site atende duas lojas com estoques diferentes. Perguntar ANTES do WhatsApp evita
   a conversa que começa com "qual loja?" e evita mandar quem é de Curitiba pra Colombo. */
.lojas-escolha {
  display: inline-flex; gap: 6px; padding: 6px;
  background: var(--cinza-claro); border-radius: 999px; margin: 0 auto 22px;
}
.lojas-escolha button {
  border: 0; background: transparent; cursor: pointer;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14.5px;
  color: var(--navy-2); padding: 10px 20px; border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.lojas-escolha button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.lojas-escolha button:hover:not([aria-pressed="true"]) { background: #E1E9F6; }
.hero .lojas-escolha { background: rgba(255,255,255,.14); }
.hero .lojas-escolha button { color: #E6EFFF; }
.hero .lojas-escolha button[aria-pressed="true"] { background: #fff; color: var(--azul); }
.hero .lojas-escolha button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.12); }

/* ---------- barra fixa de conversão (celular) ----------
   Quem lê no celular termina a página longe do botão. A barra devolve a ação ao
   alcance do polegar sem roubar espaço da leitura. */
.barra-zap {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: none; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--borda);
}
.barra-zap .txt { font-size: 13px; color: var(--cinza); line-height: 1.35; flex: 1; }
.barra-zap .txt b { display: block; color: var(--navy); font-size: 14.5px; }
.barra-zap .btn { flex: 0 0 auto; padding: 12px 22px; font-size: 15px; }
@media (max-width: 760px) {
  .barra-zap { display: flex; }
  body.tem-barra { padding-bottom: 84px; }
}

/* ---------- destaque de mecânica (a oferta em uma linha) ---------- */
.mecanica {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding: 22px 26px; margin-top: 8px;
  background: rgba(255, 255, 255, .12); border-radius: var(--raio);
}
.mecanica div { font-size: 15px; }
.mecanica b { font-family: Montserrat, sans-serif; }

/* ---------- página /links (link da bio) ----------
   Coluna estreita, botões grandes, um por linha: quem chega aqui vem do celular,
   do link do Instagram, e decide em 3 segundos. */
.bio {
  min-height: 100vh;
  background: linear-gradient(170deg, var(--azul) 0%, var(--navy) 100%);
  padding: 44px 0 60px;
}
.bio-wrap { width: min(460px, 90vw); margin-inline: auto; text-align: center; }
.bio-logo { height: 60px; margin: 0 auto 14px; }
.bio h1 { color: #fff; font-size: 23px; margin-bottom: 4px; }
.bio .arroba { color: #C9DDFF; font-size: 14px; margin: 0 0 26px; }

.link {
  display: block; background: #fff; color: var(--navy);
  border-radius: var(--raio); padding: 16px 20px; margin-bottom: 13px;
  text-decoration: none; text-align: left;
  box-shadow: var(--sombra); transition: transform .12s ease, box-shadow .12s ease;
}
.link:hover, .link:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.link b { display: block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; }
.link span { display: block; color: var(--cinza); font-size: 13.5px; line-height: 1.4; }
.link.destaque { border: 2px solid var(--azul-claro); }
.link.zap { background: var(--zap); color: #fff; }
.link.zap b { color: #fff; }
.link.zap span { color: rgba(255, 255, 255, .92); }

.bio-rodape { color: #B9D2FF; font-size: 12.5px; margin-top: 26px; line-height: 1.7; }
.bio-rodape a { color: #fff; }

/* ---------- rodapé ---------- */
.rodape { background: var(--navy); color: #C9DDFF; padding: 40px 0; font-size: 14px; }
.rodape a { color: #fff; }
.rodape .grade { gap: 28px; }
.rodape h4 { color: #fff; font-family: Montserrat, sans-serif; margin: 0 0 8px; font-size: 15px; }

/* ============================================================================
   HOME EM PILHA (estilo link-da-bio) — desenho do Armando, 31/07/26.
   Enquanto não existe balanço de estoque confiável, o site NÃO promete produto:
   ele leva pra uma vitrine ao vivo (App de Fotos) ou pro WhatsApp. Prometer par
   que já acabou é o jeito mais rápido de queimar a ida à loja.
   Acabamento emprestado do Studio Z: faixa de aviso fina no topo, banner com foto
   e tipografia grande, título de seção em caixa alta entre filetes, card sem borda
   pesada, muito respiro. A paleta continua sendo a nossa (azul royal + coroa).
   ============================================================================ */

/* Regra da casa (19/08/26): preto não entra — onde pedia preto, usa o navy; pra
   chamar atenção, azul claro. */
.aviso-topo {
  background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-align: center; padding: 9px 14px;
}
.aviso-topo b { color: #9FC4FF; }

.marca { text-align: center; padding: 30px 0 6px; }
.marca img { height: 54px; margin: 0 auto 10px; }
.marca p { color: var(--cinza); font-size: 14px; margin: 0; }

.pilha { width: min(680px, 92vw); margin-inline: auto; padding-bottom: 60px; }

/* título de seção entre filetes */
.tit-secao {
  display: flex; align-items: center; gap: 16px;
  margin: 42px 0 20px;
  font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy);
}
.tit-secao::before, .tit-secao::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}

/* ---------- CAPA: o banner sangra a tela inteira ----------
   Estilo Linktree / Ciro Calçados: a foto da promoção é o FUNDO do topo, de ponta a
   ponta, com o logo e a navegação por cima dela. Card de banner dentro da coluna
   parecia um anúncio no meio da página; capa sangrando é a primeira coisa que a
   pessoa vê e diz na hora do que é a loja esta semana.
   A altura é em `svh` (não `vh`) porque no celular a barra do navegador aparece e
   some — com `vh` o corte pula quando a barra recolhe. */
/* A CAPA sangrando a tela inteira foi testada em 01/08/26 e REMOVIDA: no celular a
   foto cortava mal, o cabeçalho por cima dela ficava ilegível e os catálogos (que são
   o que vende) caíam pra baixo da dobra. O banner voltou a ser card dentro da coluna,
   que é o formato abaixo. Se um dia voltar a ideia de capa, começar de novo em vez de
   ressuscitar aquele CSS. */

/* ---------- banner em card (usado nas páginas internas) ---------- */
.banner {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--raio-g); text-decoration: none;
  background: var(--navy);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-forte);
}
@media (min-width: 620px) { .banner { aspect-ratio: 16 / 10; } }
.banner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* O véu precisa ser FORTE porque a foto do kit é cheia de placa azul escrita: sem
   ele o título branco cai em cima de um "10X SEM JUROS" impresso e some. */
.banner .veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,22,56,.95) 0%, rgba(0,22,56,.80) 34%, rgba(0,22,56,.42) 62%, rgba(0,22,56,.10) 100%);
}
.banner .texto {
  position: absolute; inset: auto 0 0 0; padding: 26px 24px 24px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}

/* ⚠️ Estas quatro regras já foram apagadas uma vez (01/08/26) por um regex de
   limpeza que casou `.capa .kicker, .banner .kicker` inteiro e levou a parte do
   banner junto. Sem elas o título herda o `h2` global (navy) e fica invisível em
   cima da foto, e o botão vira texto solto. Regra do brand book: sobre azul ou
   sobre foto, texto SEMPRE branco. */
.banner .kicker {
  font-family: Montserrat, sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #9FC4FF; margin: 0;
}
.banner h2 {
  color: #fff; margin: 0;
  font-size: clamp(26px, 6vw, 40px); line-height: 1.04;
  text-shadow: 0 2px 12px rgba(0, 20, 52, .5);
}
.banner .linha {
  font-size: clamp(14.5px, 3.4vw, 16.5px); color: #EAF1FF; margin: 0; max-width: 34ch;
}
.banner .pseudo-btn {
  display: inline-block; background: #fff; color: var(--azul);
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .04em; padding: 13px 26px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 20, 52, .3);
}
.banner:hover .pseudo-btn { background: #EAF1FF; }

/* ---------- catálogos empilhados ---------- */
.cat {
  display: grid; grid-template-columns: 108px 1fr; align-items: center;
  column-gap: 16px; row-gap: 10px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; margin-bottom: 12px; text-decoration: none; color: var(--navy);
  box-shadow: var(--sombra);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
@media (min-width: 620px) { .cat { grid-template-columns: 148px 1fr; column-gap: 20px; padding: 16px; } }
.cat:hover, .cat:focus-visible {
  transform: translateY(-2px); box-shadow: var(--sombra-forte); border-color: var(--azul-claro);
}
/* ⚠️ 19/08/26: um comentário aberto aqui e nunca fechado engolia TODAS as regras até
   o comentário do card de pedido — thumb, tag, título e "ver" dos catálogos ficaram
   meses sem estilo nenhum. Se for editar esta região, confira o par que abre/fecha. */
.cat .thumb {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: calc(var(--raio) - 4px); background: var(--papel);
}
.cat .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A tag da oferta atravessa o card inteiro (uma linha SÓ, nunca duas) e é navy —
   preto não entra no design system. */
.cat .tag {
  grid-column: 1 / -1; justify-self: start; max-width: 100%;
  display: inline-block; background: var(--navy); color: #fff;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 10.5px;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat h3 { font-size: clamp(16px, 3.6vw, 19px); margin: 0 0 4px; }
.cat p { color: var(--cinza); font-size: 13.5px; margin: 0 0 8px; line-height: 1.45; }
.cat .ver {
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .06em; color: var(--azul-vivo);
}
.cat .ver::after { content: " →"; }

/* ---------- card "me diz o que você procura" ----------
   O cliente não sabe que pode simplesmente pedir. Este card ensina o combinado em
   três passos e já monta a mensagem: ele toca no que procura e o WhatsApp abre com
   o pedido escrito. Quem atende recebe "tênis masculino nº 41" em vez de "oi" — o
   que corta a ida e volta que faz a conversa morrer.
   Nada aqui é obrigatório: sem tocar em nada, o botão manda uma mensagem genérica. */
.pedido {
  background: linear-gradient(165deg, var(--azul) 0%, var(--navy) 100%);
  color: #fff; border-radius: var(--raio-g); padding: 24px 20px 22px;
  box-shadow: var(--sombra-forte);
}
@media (min-width: 620px) { .pedido { padding: 30px 28px 26px; } }
.pedido h3 { color: #fff; font-size: clamp(19px, 4.6vw, 24px); margin: 0 0 6px; }
.pedido .intro { color: #CFE0FF; font-size: 14.5px; margin: 0 0 18px; }

.passos { display: grid; gap: 8px; margin: 0 0 20px; }
@media (min-width: 620px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.passos div {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: #E4EEFF; line-height: 1.35;
}
.passos .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 12px;
  display: grid; place-items: center;
}

.pedido fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.pedido legend {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #9FC4FF;
  padding: 0; margin-bottom: 9px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid rgba(255,255,255,.32); background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px;
  /* 44px de altura: é o mínimo confortável pro polegar, e este card é tocado na rua. */
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { background: rgba(255,255,255,.16); }
.chip[aria-pressed="true"] { background: #fff; color: var(--azul); border-color: #fff; }

.pedido .previa {
  background: rgba(0,0,0,.22); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 16px;
  font-size: 13.5px; color: #E9F1FF; line-height: 1.45;
}
.pedido .previa b { color: #fff; }
.pedido .btn { width: 100%; }
.pedido .obs { display: block; text-align: center; color: #9FC4FF; font-size: 12.5px; margin-top: 10px; }

/* ---------- trios (lojas, whatsapps) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 620px) { .trio { gap: 14px; } }

.trio a {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 16px 8px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  text-decoration: none; color: var(--navy); box-shadow: var(--sombra);
  transition: transform .13s ease, box-shadow .13s ease;
}
.trio a:hover, .trio a:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.trio .nome {
  font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: clamp(12.5px, 3vw, 15px); line-height: 1.15;
}
.trio .cidade { color: var(--cinza); font-size: clamp(10.5px, 2.4vw, 12.5px); }
.trio .icone { font-size: 19px; line-height: 1; }

.trio.zaps a { background: var(--zap); border-color: var(--zap); color: #fff; }
.trio.zaps a:hover { background: var(--zap-escuro); }
.trio.zaps .cidade { color: rgba(255,255,255,.9); }

/* ---------- links largos (atacado, trabalhe com a gente) ---------- */
.link-largo {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px 18px; margin-bottom: 10px; text-decoration: none; color: var(--navy);
  box-shadow: var(--sombra);
  transition: transform .13s ease, box-shadow .13s ease;
}
.link-largo:hover, .link-largo:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-forte); }

/* CTA que abre o WhatsApp é VERDE, sempre. O verde é o único sinal de ação que o
   site tem: se ele aparecer em link interno também, deixa de significar "aqui você
   fala com a gente" e a pessoa para de reconhecer onde clicar pra comprar.
   Link interno (ver a campanha, ver as lojas) continua no card branco. */
.link-largo.zap {
  background: var(--zap); border-color: var(--zap); color: #fff;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .3);
}
.link-largo.zap:hover { background: var(--zap-escuro); }
.link-largo.zap b { color: #fff; }
.link-largo.zap span span,
.link-largo.zap > span > span { color: rgba(255, 255, 255, .92); }
.link-largo.zap .ic { color: #fff !important; }
.link-largo.zap .seta { color: rgba(255, 255, 255, .85); }
.link-largo .icone { font-size: 22px; line-height: 1; }
.link-largo b { display: block; font-family: Montserrat, sans-serif; font-size: 15.5px; }
.link-largo span { display: block; color: var(--cinza); font-size: 13px; line-height: 1.4; }
.link-largo .seta { margin-left: auto; color: var(--azul-claro); font-weight: 700; }

/* ---------- horários ---------- */
.horarios {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px 20px; box-shadow: var(--sombra);
}
.horarios .linha {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cinza-claro); font-size: 14px;
}
.horarios .linha:last-child { border-bottom: 0; }
.horarios .linha .dia { color: var(--cinza); }
.horarios .linha .hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.horarios .nota { margin: 12px 0 0; font-size: 12.5px; color: var(--cinza); }
.horarios .destaque-dom { color: var(--azul-vivo); font-weight: 700; }

/* ---------- canais oficiais ---------- */
.canais { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.canais a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra);
  text-decoration: none; color: var(--navy);
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13.5px;
}
.canais a:hover { border-color: var(--azul-claro); }
.rodape-pilha {
  text-align: center; color: var(--cinza); font-size: 12.5px;
  margin-top: 34px; line-height: 1.7;
}

/* ---------- ícones ----------
   Um traço só no site inteiro. Emoji foi retirado de propósito: muda de desenho em
   cada sistema, não aceita a cor da marca e entrega cara de coisa montada às pressas.
   O sprite é EMBUTIDO em cada página (e não referenciado de /img/icones.svg) porque
   o Safari do iPhone não carrega sprite externo por <use> — e o site é feito pra
   celular antes de tudo. */
.ic { width: 20px; height: 20px; flex: none; display: block; }
.ic-g { width: 26px; height: 26px; }
/* O sprite sai de cena SEM `display:none`: em parte dos navegadores o <use> deixa de
   resolver quando o container está em display:none. Tirar da tela por posição é o
   jeito que funciona em todos.
   E cada <svg class="ic"> também carrega width/height como ATRIBUTO: se o CSS
   demorar (ou vier velho do cache), o ícone nasce pequeno em vez de explodir no
   tamanho padrão do SVG, 300x150 — que foi exatamente o que quebrou a tela em
   31/07/26. Atributo é rede de segurança; o CSS continua mandando. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- rotas / como chegar ----------
   Botão que abre a navegação já traçada a partir de onde a pessoa está. Alvo grande
   (56px de altura) porque isso é tocado com o polegar, na rua, muitas vezes com o
   celular numa mão só. */
.rota-card {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; margin-bottom: 12px; box-shadow: var(--sombra);
  overflow: hidden;                 /* a foto encosta na borda arredondada */
}

/* Foto da fachada: quem nunca foi reconhece a loja de longe, e quem já foi
   confirma que é aquela mesma. Vale mais que qualquer descrição escrita. */
.rota-card .foto {
  display: block; margin: -18px -18px 16px; aspect-ratio: 3 / 2;
  background: var(--cinza-claro);
}
.rota-card .foto img { width: 100%; height: 100%; object-fit: cover; }

/* O enquadramento é POR LOJA, e não um corte no arquivo: na aérea de Colombo a
   fachada azul está na parte de baixo da foto, e no Jardim Paulista o letreiro está
   no alto. Um corte único servia mal às duas e cortava justamente o nome da loja.
   Aqui o arquivo continua inteiro e só a janela muda. */
.rota-card .foto.enq-baixo img  { object-position: center 88%; }
.rota-card .foto.enq-alto img   { object-position: center 22%; }
.rota-card .foto.enq-centro img { object-position: center 50%; }
.rota-card .topo-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.rota-card .topo-card .ic { color: var(--azul); margin-top: 2px; }
.rota-card h3 { font-size: 18px; margin: 0 0 2px; }
.rota-card .cidade { color: var(--cinza); font-size: 13.5px; }
.rota-card .desc { color: var(--cinza); font-size: 13.5px; margin: 10px 0 14px; line-height: 1.5; }

.rota-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rota-botoes a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 14px; border-radius: 10px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px;
  text-decoration: none; text-align: center; line-height: 1.2;
}
.rota-botoes .ir { background: var(--azul); color: #fff; }
.rota-botoes .ir:hover { background: var(--navy-2); }
.rota-botoes .falar { background: var(--zap); color: #fff; }
.rota-botoes .falar:hover { background: var(--zap-escuro); }
.rota-card .so-loja {
  display: block; margin-top: 10px; font-size: 12.5px; color: var(--cinza); text-align: center;
}

/* ---------- cabeçalho e navegação únicos ----------
   Todas as telas usam ESTE cabeçalho. Antes o site tinha três: barra azul com menu,
   coluna de link-da-bio e a home em pilha — cada página parecia de um site diferente. */
.nav-simples {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 0 0 6px;
}
.nav-simples a {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cinza); text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
}
.nav-simples a:hover { color: var(--azul); background: var(--cinza-claro); }
.nav-simples a[aria-current="page"] { color: var(--azul); background: var(--cinza-claro); }

.voltar {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--cinza); text-decoration: none; margin-bottom: 6px;
}
.voltar:hover { color: var(--azul); }
.voltar .ic { width: 16px; height: 16px; transform: rotate(180deg); }

/* Título de página (interna) — mesma família do .tit-secao, um degrau acima. */
.tit-pagina { font-size: clamp(24px, 5.6vw, 34px); margin: 14px 0 6px; }
.tit-pagina + .sub { margin: 0 0 6px; text-align: left; }

/* ---------- carrossel de campanhas (home) ----------
   Slides desenhados em CSS de propósito (gradiente da marca, sem arte): a campanha
   troca editando TEXTO, não esperando um JPG ficar pronto. Rolagem por scroll-snap —
   sem JS o carrossel continua funcionando no dedo; o vr.js só põe autoplay e bolinhas. */
.carrossel { position: relative; }
.carrossel .trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--raio-g); box-shadow: var(--sombra-forte);
}
.carrossel .trilho::-webkit-scrollbar { display: none; }
.carrossel .slide {
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 10px;
  min-height: 330px; padding: 26px 24px 24px;
  text-decoration: none; color: #fff;
  background: linear-gradient(165deg, var(--azul-vivo) 0%, var(--azul) 42%, var(--navy) 100%);
}
@media (min-width: 620px) { .carrossel .slide { min-height: 310px; padding: 30px 32px 28px; } }
/* mesmo contrato do .banner: sobre azul, texto SEMPRE branco */
.carrossel .slide h2 {
  color: #fff; margin: 0;
  font-size: clamp(24px, 5.6vw, 36px); line-height: 1.08;
}
.carrossel .slide .linha {
  font-size: clamp(14px, 3.4vw, 16px); color: #EAF1FF; margin: 0; max-width: 38ch;
}
.carrossel .slide .pseudo-btn {
  display: inline-block; background: #fff; color: var(--azul);
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .04em; padding: 13px 26px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 20, 52, .3); margin-top: 4px;
}
.carrossel .slide:hover .pseudo-btn { background: #EAF1FF; }
.carrossel .pontos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.carrossel .pontos button {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  background: var(--borda); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.carrossel .pontos button[aria-current="true"] { background: var(--azul); transform: scale(1.3); }

/* ---------- fileiras "os mais procurados" ----------
   Cards no desenho da Loja Vila Rica (o e-commerce): a foto sobre o palco --papel É o
   card — sem sombra em repouso, borda que acende no hover. Fileira rola no dedo. */
.tit-bloco {
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  margin: 26px 0 12px;
}
.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 44%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
/* CARROSSEL nos dois mundos (pedido de 19/08): no computador a fileira continua
   rolando na horizontal, com 4 cards visíveis e uma espiada no 5º — quem diz que
   tem mais são as SETAS que o vr.js injeta (.fseta), pulsando até o primeiro toque. */
@media (min-width: 620px) { .fileira { grid-auto-columns: 22.9%; } }
.fileira::-webkit-scrollbar { display: none; }
.fileira-wrap { position: relative; }
.fseta {
  position: absolute; z-index: 2; top: calc(50% - 40px);
  width: 36px; height: 36px; border-radius: 999px; padding: 0;
  border: 1px solid var(--borda); background: #fff; color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sombra);
}
.fseta:hover { border-color: var(--azul-claro); color: var(--azul-vivo); }
.fseta.prev { left: -10px; }
.fseta.next { right: -10px; }
.fseta.prev svg { transform: rotate(180deg); }
.fseta[hidden] { display: none; }
@keyframes pulsa-seta {
  0%, 100% { transform: scale(1); box-shadow: var(--sombra); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(0, 74, 173, .14); }
}
.fseta.pulsa { animation: pulsa-seta 1.6s ease-in-out infinite; }
.fileira .mini { scroll-snap-align: start; display: block; text-decoration: none; color: var(--navy); }
.fileira .mini .quadro {
  display: block; aspect-ratio: 1; overflow: hidden; padding: 6%;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* `contain`, não `cover`: capa cortando o sapato ao meio vende menos que sapato
   inteiro — a foto deitada aparece completa sobre o palco --papel. */
.fileira .mini img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply; transition: transform .3s ease;
}
.fileira .mini:hover .quadro { border-color: var(--azul-claro); box-shadow: var(--sombra); }
.fileira .mini:hover img { transform: scale(1.04); }
.fileira .mini b {
  display: block; margin: 9px 2px 0;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 13.5px;
}
.fileira .mini:hover b { color: var(--azul); }
.fileira .mini .ver {
  display: block; margin: 2px 2px 0;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 11.5px;
  letter-spacing: .06em; color: var(--azul-vivo);
}
.fileira .mini .ver::after { content: " →"; }

/* ---------- acessibilidade e movimento ---------- */
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .faixa:hover, .link:hover { transform: none; }
  .fileira .mini:hover img { transform: none; }
  .fseta.pulsa { animation: none; }
}