/* La Parmigiana · base: fontes, tokens, reset e componentes comuns */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-soft-normal.woff2) format('woff2-variations');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-ext-soft-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-soft-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --vermelho: #e2091c;
  --vermelho-escuro: #b10716;
  --vermelho-suave: #fde4e1;
  --creme: #fff7ec;
  --creme-2: #fbead4;
  --papel: #fffdf9;
  --tinta: #1f1410;
  --tinta-2: #4a3b33;
  --tinta-3: #6f5f55;
  --borda: #ead8bf;
  --manjericao: #2e7d32;
  --queijo: #ffc93c;
  --forno: #f28b2b;
  --sombra: 0 22px 44px -22px rgba(70, 30, 10, 0.42);
  --sombra-leve: 0 10px 24px -14px rgba(70, 30, 10, 0.35);
  --raio: 20px;
  --raio-g: 28px;
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --caixa: 1180px;
  --margem: clamp(18px, 4.6vw, 40px);
  --topo: 68px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-variation-settings: 'SOFT' 100;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.55rem, 8.2vw, 4.9rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(2.05rem, 5.4vw, 3.35rem);
}
h3 {
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
a {
  color: inherit;
}
address {
  font-style: normal;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus {
  top: 12px;
}

.caixa {
  width: 100%;
  max-width: calc(var(--caixa) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.caixa-estreita {
  max-width: calc(780px + var(--margem) * 2);
}

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.7em 1.3em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: 750 1rem/1.15 var(--fonte);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.botao:active {
  transform: scale(0.97);
}
.botao[disabled],
.botao[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}
.botao-vermelho {
  background: var(--vermelho);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(226, 9, 28, 0.9);
}
.botao-vermelho:hover {
  background: var(--vermelho-escuro);
}
.botao-contorno {
  border-color: var(--tinta);
  color: var(--tinta);
}
.botao-contorno:hover {
  background: var(--tinta);
  color: var(--creme);
}
.botao-amarelo {
  background: var(--queijo);
  color: var(--tinta);
}
.botao-amarelo:hover {
  background: #ffd866;
}
.botao-contorno-claro {
  border-color: rgba(255, 247, 236, 0.5);
  color: var(--creme);
}
.botao-contorno-claro:hover {
  background: var(--creme);
  color: var(--tinta);
}
.botao-branco {
  background: #fff;
  color: var(--tinta);
  box-shadow: var(--sombra-leve);
}
.botao-texto {
  background: none;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
}
.botao-grande {
  min-height: 56px;
  padding: 0.85em 1.5em;
  font-size: 1.06rem;
}
.botao-pequeno {
  min-height: 40px;
  padding: 0.45em 0.95em;
  font-size: 0.92rem;
}
.botao-largo {
  width: 100%;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.acoes > .botao {
  flex: 1 1 auto;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 0.9em;
  color: var(--vermelho);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.selo .icone {
  width: 1.2em;
  height: 1.2em;
}

.nota {
  color: var(--tinta-3);
  font-size: 0.92rem;
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-weight: 750;
  color: var(--vermelho);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  line-height: 1.2;
  min-height: auto;
  padding-block: 0.3em;
}
.link-seta .icone {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.2s;
}
.link-seta:hover .icone {
  transform: translate(2px, -2px);
}
.link-claro {
  color: var(--queijo);
}

.lista-check {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  display: grid;
  gap: 0.65em;
}
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  font-weight: 600;
}
.lista-check .icone {
  width: 1.6em;
  height: 1.6em;
  padding: 0.25em;
  border-radius: 50%;
  background: var(--queijo);
  color: var(--tinta);
  stroke-width: 2.6;
}

/* Status aberto/fechado */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 1.1em;
  padding: 0.45em 0.95em 0.45em 0.8em;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sombra-leve);
  font-size: 0.92rem;
  font-weight: 700;
}
.status-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--forno);
  flex: none;
}
[data-aberto='true'] .status-ponto,
.status-ponto.ok {
  background: #23a447;
  box-shadow: 0 0 0 0 rgba(35, 164, 71, 0.55);
  animation: pulso 2s infinite;
}
.ponto-vivo {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vermelho);
  box-shadow: 0 0 0 0 rgba(226, 9, 28, 0.6);
  animation: pulso-vermelho 1.8s infinite;
  flex: none;
}
@keyframes pulso {
  70% {
    box-shadow: 0 0 0 9px rgba(35, 164, 71, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(35, 164, 71, 0);
  }
}
@keyframes pulso-vermelho {
  70% {
    box-shadow: 0 0 0 8px rgba(226, 9, 28, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 9, 28, 0);
  }
}

/* Formulários */
.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  min-width: 0;
}
.campo > span {
  font-weight: 750;
  font-size: 0.95rem;
}
.campo em {
  font-style: normal;
  font-weight: 500;
  color: var(--tinta-3);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.7em 0.9em;
  border: 2px solid var(--borda);
  border-radius: 14px;
  background: #fff;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1410' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 1.2em;
  padding-right: 2.4em;
}
.campo textarea {
  min-height: 84px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--tinta);
  outline: none;
}
.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.contador {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--borda);
  border-radius: 999px;
  background: #fff;
  width: max-content;
}
.contador button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--creme-2);
}
.contador button:hover {
  background: var(--borda);
}
.contador output {
  min-width: 2.4ch;
  text-align: center;
  font: 700 1.25rem/1 var(--fonte-titulo);
}
.aviso {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--vermelho-suave);
  color: var(--vermelho-escuro);
  font-weight: 650;
  font-size: 0.95rem;
}

/* Xadrez de toalha de cantina */
.xadrez {
  height: 26px;
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(226, 9, 28, 0.55) 50%, transparent 50%),
    linear-gradient(rgba(226, 9, 28, 0.55) 50%, transparent 50%);
  background-size: 26px 26px;
}

/* Aviso flutuante */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--tinta);
  color: var(--creme);
  font-weight: 650;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, 160%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.25s;
  pointer-events: none;
}
.toast.visivel {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.toast .botao {
  min-height: 36px;
  padding: 0.35em 0.9em;
  font-size: 0.9rem;
}

/* Feed (usado na home e no app) */
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.feed li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px -12px rgba(70, 30, 10, 0.5);
}
.feed img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
  flex: none;
}
.feed-nome {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
}
.feed-tempo {
  display: block;
  color: var(--tinta-3);
  font-size: 0.82rem;
  font-weight: 600;
}
.feed li.novo {
  animation: entrar 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2), brilho 2.4s ease-out;
}
.feed-vazio {
  color: var(--tinta-3);
  font-size: 0.92rem;
  font-weight: 600;
}
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
@keyframes brilho {
  0%,
  30% {
    background: #fff2c6;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}