/* Layout do catálogo. Mobile-first: a coluna única é o caso normal e o desktop só
   ganha respiro nas laterais. Nenhum valor de marca aqui — só tokens. */
*, *::before, *::after { box-sizing: border-box; }

/* Regra de autor com `display` (ex.: `.filtros { display: flex }`) vence a
   regra de origem-UA `[hidden] { display: none }` — sem isto, um elemento
   `hidden` continua no fluxo e exposto a leitor de tela sempre que também
   tiver `display` declarado em outro lugar do arquivo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.topo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 1.5rem 1rem 0.5rem;
  text-align: center;
}

.topo__logo {
  display: block;
  margin: 0 auto;
  width: min(100%, 22rem);
  height: auto;
}

/* O lockup traz o nome e a assinatura em tipo legível, então repeti-los abaixo
   seria dizer tudo duas vezes. Somem da tela, ficam para leitor de tela e para
   o buscador — a página continua tendo um h1 de verdade. */
.topo__nome,
.topo__frase {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.topo__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  margin: 0 0 0.25rem;
}

.topo__frase { margin: 0; opacity: .8; }

.catalogo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 1rem 1rem 6rem;
  display: grid;
  gap: 1.5rem;
}

.card {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.card__corpo { padding: 1rem 1.1rem 0.25rem; }

.card__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

/* Texto do card é texto puro com \n separando parágrafos (§5.5 da spec). */
.card__texto { margin: 0; white-space: pre-line; }

.carrossel__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__slide { flex: 0 0 100%; scroll-snap-align: start; }

.carrossel__slide img { width: 100%; height: auto; aspect-ratio: 1 / 1; }

.rodape {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 1rem 1rem 5rem;
  text-align: center;
  font-size: .85rem;
  opacity: .75;
}

.rodape__credito { margin: .25rem 0 0; }

.wpp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: var(--sombra);
  text-decoration: none;
}

:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 2px; }

.carrossel__dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 0 .1rem;
}

.dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Fallback para navegador sem color-mix() (Chrome < 111 / Safari < 16.2,
     fim de 2022): sem ele a declaração inteira cai e o dot fica sem
     background nenhum — some no celular antigo. */
  background: rgba(0, 0, 0, .25);
  background: color-mix(in srgb, var(--cor-texto) 25%, transparent);
  cursor: pointer;
}

.dot[aria-current="true"] { background: var(--cor-marca); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

.filtros {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: .5rem 1rem 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filtros::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: .35rem .9rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 20%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--cor-marca);
  color: var(--cor-marca-contraste);
  border-color: var(--cor-marca);
}

.card { position: relative; transition: box-shadow .2s ease; }

.card--destaque {
  box-shadow: 0 0 0 3px var(--cor-marca), var(--sombra);
}

/* Até três ações no rodapé do card: Compartilhar, o botão da cliente e o
   WhatsApp. O WhatsApp é ícone sem rótulo justamente para o conjunto caber em
   tela de celular — se virar botão com texto, a linha quebra. */
.card__acoes {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .25rem 1.1rem 1rem;
}

.card__compartilhar,
.card__botao {
  padding: .35rem .8rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 20%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .85rem;
  text-decoration: none;
  cursor: pointer;
}

.card__whatsapp {
  margin-inline-start: auto;
  display: inline-flex;
  color: var(--cor-texto);
  opacity: .75;
}

.card__whatsapp:hover { color: var(--cor-marca); opacity: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .6rem 1rem;
  border-radius: 999px;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: .9rem;
  box-shadow: var(--sombra);
}

.aviso {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  text-align: center;
  opacity: .85;
}

.botao {
  margin-top: .5rem;
  padding: .5rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--cor-marca);
  color: var(--cor-marca-contraste);
  font: inherit;
  cursor: pointer;
}