/*
  Base comum de rafa.etc.br.

  Carrega depois de tokens.css e antes do styles.css de cada página. Reúne o
  que toda página compartilha: fontes, apelidos dos tokens da marca, cores da
  campanha do momento, reset, foco, cabeçalho com menu, rodapé, botões, aviso
  de degustação, WhatsApp flutuante e o bloco Onde retirar.

  Regras da casa: nenhum hexadecimal da marca é escrito aqui, só via var();
  as cores do evento são do site, não da marca, e por isso vivem aqui e não
  em tokens.css. Sem JavaScript tudo continua funcionando; o script só
  melhora (menu recolhido no celular, memória do aviso, flutuante que recolhe).
*/

/*
  As fontes e o favicon carregam ?rev= porque /assets/* é servido com cache
  imutável de um ano: sem a versão no endereço, trocar um arquivo desses ficaria
  invisível por um ano, mesmo com recarregamento forçado.
*/
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2?rev=e4c036e7") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2?rev=02cfbcb7") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans.woff2?rev=5f6b7e5b") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papel: var(--pr-cor-papel);
  --creme: var(--pr-cor-etiqueta-fundo);
  --tinta: var(--pr-cor-tinta);
  --traco: var(--pr-cor-traco);
  /*
    O terracota e o oliva da marca chegam à tela três por cento claros demais:
    sobre o papel eles medem 4,38:1 e 4,39:1, e o mínimo legível é 4,5:1. Isso
    reprovava o rótulo do botão, os itálicos da abertura, o nome da cidade e a
    assinatura do rodapé de uma vez só. Escurecer seis por cento leva os dois a
    4,85:1 e 4,86:1 sem que o olho perceba a diferença lado a lado.

    O ajuste é de tela e vive aqui, não em tokens.css: `--pr-cor-marca-casa`
    está impresso em oito rótulos e não muda. Por isso a conta parte do token,
    em vez de repetir um hexadecimal à mão.
  */
  --verde: color-mix(in srgb, var(--pr-cor-numero) 94%, black);
  --terracota: color-mix(in srgb, var(--pr-cor-marca-casa) 94%, black);

  /*
    O aviso de degustação senta no creme, que é mais escuro que o papel, e ali
    o terracota já escurecido ficaria em 4,28:1. O link "Como chegar" precisa de
    mais seis por cento para chegar a 4,73:1.
  */
  --terracota-no-creme: color-mix(in srgb, var(--pr-cor-marca-casa) 88%, black);
  --serif: var(--pr-fonte-serif);
  --sans: var(--pr-fonte-sans);
  --linha: color-mix(in srgb, var(--traco) 22%, transparent);
  --largura-pagina: 68rem;

  /*
    Os dois flutuantes do pé da página, o aviso à esquerda e o WhatsApp à
    direita, dividem a mesma linha de centro. Como a pílula é mais baixa que o
    botão redondo, ela sobe metade da diferença: alinhar as bases deixaria uma
    delas visivelmente afundada.
  */
  --flutuante-base: 1rem;
  --flutuante-altura: 3.4rem;
  --pilula-altura: 2.75rem;
  --pilula-base: calc(var(--flutuante-base) + (var(--flutuante-altura) - var(--pilula-altura)) / 2);

  /*
    Cores do festival HackTown, medidas em hacktown.com.br em 01/09/2026.
    Não são cor da casa nem de linha: valem só para a campanha e saem com ela.
    O degradê pesa o roxo, onde o texto claro mede 9,15:1; sobre o rosa puro
    ele cairia a 3,76:1, abaixo do mínimo legível.

    Por isso a última parada fica em 130%, fora da caixa: o rosa continua
    puxando a cor, mas a borda visível para em 5,32:1 e nenhum glifo alcança
    a faixa reprovada. Com a parada em 100% o texto entrava nela a partir de
    89,6% do eixo, e tanto o selo quanto o botão são largos o bastante para
    ter letra ali.
  */
  --evento-roxo: #6706A5;
  --evento-rosa: #F8105F;
  --evento-degrade: linear-gradient(100deg, var(--evento-roxo) 0 45%, var(--evento-rosa) 130%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-variation-settings: "WONK" 0;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--terracota);
  outline-offset: 4px;
  border-radius: .2rem;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.faixa {
  width: min(100% - 2rem, var(--largura-pagina));
  margin-inline: auto;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: fixed;
  z-index: 40;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--sans);
  font-weight: 700;
  transform: translateY(-180%);
}

.pular:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------------ cabeçalho --- */

.cabecalho {
  border-bottom: 1px solid var(--linha);
  font-family: var(--sans);
}

.cabecalho-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  padding-block: .8rem;
}

.marca {
  display: block;
  width: 6.4rem;
  flex: none;
}

.marca img {
  display: block;
  width: 100%;
  height: auto;
}

.menu-botao {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .4rem .8rem;
  border: 1px solid var(--linha);
  border-radius: .5rem;
  background: transparent;
  color: var(--traco);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-botao svg {
  width: 1.1rem;
  height: 1.1rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .15rem;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .3rem .7rem;
  border-radius: .4rem;
  color: var(--traco);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible {
  background: color-mix(in srgb, var(--traco) 10%, transparent);
}

.menu a[aria-current="page"] {
  color: var(--tinta);
  box-shadow: inset 0 -.15rem 0 var(--terracota);
}

/*
  No celular, com script, o menu recolhe atrás do botão. Sem script o botão
  nem aparece e a lista quebra em linhas abaixo da marca, sempre acessível.

  O gate é `html.menu-pronto`, escrito pelo próprio app.js depois de ligar o
  botão, e não o `html.js` do estado.js: aquele entra antes da primeira
  pintura, então uma falha no app.js escondia a lista com um botão morto ao
  lado, e a página ficava sem navegação nenhuma no celular.
*/
@media (max-width: 47.99rem) {
  .menu {
    width: 100%;
    justify-content: center;
  }

  html.menu-pronto .menu-botao {
    display: inline-flex;
  }

  html.menu-pronto .menu {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding-block: .4rem .8rem;
  }

  html.menu-pronto .menu.aberto {
    display: grid;
  }

  html.menu-pronto .menu a {
    justify-content: center;
    min-height: 2.9rem;
    border: 1px solid var(--linha);
    background: var(--papel);
  }
}

/* ---------------------------------------------------- aviso de degustação --- */

/*
  A degustação é o que traz gente à Lojinha, e no cabeçalho ela saía da tela
  na primeira rolagem. O aviso agora acompanha a página no canto de baixo à
  esquerda, como par do WhatsApp: recolhido é uma pílula, aberto é um cartão
  estreito ancorado no mesmo canto.

  Ele nasce recolhido em toda página. Aberto, o cartão cobria o botão
  principal da abertura em tela de celular baixa, e a pílula já diz o que
  precisa ser dito para quem só passa os olhos.
*/
.aviso {
  position: fixed;
  z-index: 31;
  transition: transform 220ms ease, visibility 0s;
  inset-inline-start: max(var(--flutuante-base), env(safe-area-inset-left));
  inset-block-end: max(var(--pilula-base), env(safe-area-inset-bottom));
  width: auto;
  font-family: var(--sans);
}

.aviso summary {
  list-style: none;
  cursor: pointer;
}

.aviso summary::-webkit-details-marker {
  display: none;
}

/* Fechado: uma pílula pequena, que lembra e reabre. */
.aviso:not([open]) summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--pilula-altura);
  margin: 0;
  padding: .4rem 1rem .4rem .8rem;
  user-select: none;
  border: 1px solid color-mix(in srgb, var(--traco) 28%, transparent);
  border-radius: 999px;
  background: var(--creme);
  color: var(--traco);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tinta) 70%, transparent);
}

.aviso:not([open]) .aviso-aberto,
.aviso[open] .aviso-fechado {
  display: none;
}

.aviso-pino {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--terracota);
}

/* Aberto: um cartão creme sobre o conteúdo, com o fechar no canto. */
.aviso[open] {
  width: min(23rem, calc(100vw - 2rem));
  padding: .8rem 2.9rem .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--traco) 28%, transparent);
  border-radius: .8rem;
  background: var(--creme);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--tinta) 75%, transparent);
}

.aviso[open] summary {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--traco);
  font-size: 1.3rem;
  line-height: 1;
  user-select: none;
}

.aviso[open] summary:hover,
.aviso[open] summary:focus-visible {
  background: color-mix(in srgb, var(--traco) 12%, transparent);
}

.aviso-texto {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.aviso-texto strong {
  font-weight: 700;
}

.aviso-texto a {
  margin-left: .35rem;
  color: var(--terracota-no-creme);
  font-weight: 700;
  text-underline-offset: .2em;
  white-space: nowrap;
}

/* --------------------------------------------------------------- botões --- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .6rem 1.15rem;
  border: 1px solid var(--terracota);
  border-radius: .6rem;
  background: var(--terracota);
  color: var(--papel);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.botao:hover,
.botao:focus-visible {
  background: var(--tinta);
  border-color: var(--tinta);
}

.botao-leve {
  background: transparent;
  border-color: var(--traco);
  color: var(--traco);
}

.botao-leve:hover,
.botao-leve:focus-visible {
  background: color-mix(in srgb, var(--traco) 10%, transparent);
  border-color: var(--traco);
  color: var(--tinta);
}

/*
  Campanha: o rótulo senta na metade roxa do degradê, onde o contraste passa.
  A cor de fundo vem declarada junto porque o hover troca a imagem pelo roxo
  sólido; sem ela o shorthand zerava o fundo e, nos 160ms da transição, o
  rótulo claro ficava sobre o papel claro, a 1,00:1, inclusive ao receber foco.
*/
.botao-evento {
  background-color: var(--evento-roxo);
  background-image: var(--evento-degrade);
  border-color: transparent;
  color: var(--papel);
}

.botao-evento:hover,
.botao-evento:focus-visible {
  background-image: none;
  border-color: var(--evento-roxo);
}

/*
  A segunda linha do botão distingue-se pelo corpo e pelo peso. A opacidade que
  fazia esse trabalho antes derrubava o contraste para 3,86:1, abaixo do mínimo.
*/
.botao small {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --------------------------------------------------- WhatsApp flutuante --- */

.flutuante {
  position: fixed;
  z-index: 30;
  inset-inline-end: max(var(--flutuante-base), env(safe-area-inset-right));
  inset-block-end: max(var(--flutuante-base), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: var(--flutuante-altura);
  min-height: var(--flutuante-altura);
  padding: .7rem;
  border-radius: 999px;
  background: var(--traco);
  color: var(--papel);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--tinta) 60%, transparent);
  transition: transform 220ms ease, background-color 160ms ease, visibility 0s;
}

.flutuante svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.flutuante span {
  display: none;
}

.flutuante:hover,
.flutuante:focus-visible {
  background: var(--tinta);
}

/*
  Com o cartão do aviso aberto, o WhatsApp sai da frente na mesma hora: se ele
  descesse animado, os 220ms da saída passavam por cima do canto do cartão.
*/
html.aviso-aberto .flutuante {
  transform: translateY(150%);
  visibility: hidden;
  transition: none;
}

/*
  Recolhido sai do alcance do teclado; senão o foco pousava fora da tela. O
  atraso da visibilidade fica só aqui: escondendo, ela espera o elemento
  terminar de descer; voltando, vale a transição de repouso, sem atraso, para
  ele não subir invisível.
*/
.flutuante--recolhido {
  transform: translateY(150%);
  visibility: hidden;
  transition: transform 220ms ease, background-color 160ms ease, visibility 0s linear 220ms;
}

/*
  A pílula recolhe do mesmo jeito, para não sentar sobre um bloco de ação. O
  deslocamento é do <details>, e não do <summary>: mover só o rótulo deixava a
  caixa do elemento parada em cima do botão, invisível e ainda clicável.
*/
.aviso--recolhido {
  transform: translateY(150%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}

@media (max-width: 61.99rem) {
  /* Reserva o pé da página para o flutuante não cobrir o último bloco. */
  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

}

/* O cartão do aviso é mais alto que o botão e pede mais pé, em toda largura. */
html.aviso-aberto body {
  padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 62rem) {
  :root {
    --flutuante-base: 1.5rem;
  }

  /*
    Aqui o flutuante ganha o rótulo e sobe, então ocupa mais pé de página. E o
    pé fica acima do limiar de volta do recolhimento: com 5,4rem a folga entre
    o rodapé e o botão dava exatamente os 8px da conta, e o estado no fim da
    página passava a depender de a pessoa ter rolado ou ter fechado o cartão.
  */
  body {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
  }

  .flutuante {
    padding: .7rem 1.1rem .7rem .8rem;
  }

  .flutuante span {
    display: inline;
  }
}

/* ---------------------------------------------------------- onde retirar --- */

.retirada {
  display: grid;
  gap: .6rem 2rem;
  margin-block: 2.5rem 0;
  padding-block: 1.8rem;
  border-top: 1px solid var(--linha);
}

.retirada h2 {
  margin-bottom: .2rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.15;
}

.retirada p {
  margin: 0;
  font-family: var(--sans);
  font-size: .98rem;
  line-height: 1.5;
}

.retirada-endereco {
  font-weight: 600;
}

.retirada-nota {
  color: color-mix(in srgb, var(--tinta) 80%, var(--papel));
}

.retirada-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .6rem;
}

@media (min-width: 46rem) {
  .retirada {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }

  .retirada h2 {
    grid-column: 1 / -1;
  }

  .retirada-acoes {
    justify-content: flex-end;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------- rodapé --- */

.rodape-site {
  margin-top: 2rem;
  padding-block: 2rem 2.6rem;
  border-top: 1px solid var(--linha);
  font-family: var(--sans);
  text-align: center;
}

.rodape-site nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.3rem;
}

.rodape-site a {
  color: var(--traco);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.rodape-site a:hover,
.rodape-site a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .3em;
}

.rodape-canais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.3rem;
  margin: 1rem 0 0;
}

.rodape-assinatura {
  margin: 1.2rem 0 0;
  color: var(--verde);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ movimento --- */

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(1.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}