@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@500;600;700&family=Shrikhand&display=swap');

/* Âncoras (#sobre, #ingressos...) param abaixo do cabeçalho fixo (76px, ver nav-auth.js). */
html {
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}

/* Títulos: Shrikhand (cartaz de carnaval). Rótulos e números usam Baloo 2
   via a classe font-display; texto corrido, Fredoka. */
h1, h2 {
  font-family: "Shrikhand", "Baloo 2", cursive;
  font-weight: 400;
  letter-spacing: 0.005em;
}
h3, h4 {
  font-family: "Baloo 2", cursive;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #C1440E;
  outline-offset: 2px;
}

/* Botão pílula com sombra sólida "elevada" (sem blur). Combinar com classes
   Tailwind de cor/espaçamento; não usar junto das classes shadow e rounded do Tailwind. */
.btn-brand {
  border-radius: 999px;
  box-shadow: 0 4px 0 #7A2000;
  transition: transform .05s ease, box-shadow .05s ease, background-color .15s ease;
}
.btn-brand:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7A2000;
}

/* Card com borda grossa "desenhada à mão", característica da identidade do bloco. */
.card-brand {
  border-radius: 20px;
  border: 3px solid #7A2000;
}

/* Campo de formulário no padrão do checkout (borda 2px marrom-escuro, raio 12px). */
.campo-brand {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 2px solid #7A2000;
  background: #fff;
  font-size: 15px;
  color: #5A2A0C;
}
.campo-brand:focus {
  outline: 2px solid #C1440E;
  outline-offset: 1px;
}
.campo-brand[aria-invalid="true"] {
  border-color: #C1440E;
}
.campo-brand[readonly] {
  background: #FFEBC7;
  cursor: default;
}

/* ---------- Landing ---------- */

/* Sublinhado ondulado (frevo) sob a palavra destacada de um título. */
.sublinhado-onda {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5' fill='none' stroke='%23FFD84D' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 40px 10px;
  padding-bottom: 0.12em;
}

/* Faixa de avisos rolando (pausa ao passar o mouse). */
.faixa-rolante {
  display: flex;
  width: max-content;
  animation: faixa-rolar 38s linear infinite;
}
.faixa-rolante:hover { animation-play-state: paused; }
@keyframes faixa-rolar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Ilustrações decorativas flutuando de leve. */
.flutuar { animation: flutuar 6s ease-in-out infinite; }
.flutuar-lento { animation: flutuar 9s ease-in-out infinite reverse; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0) rotate(var(--giro, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--giro, 0deg)); }
}

/* Faixa nas cores do frevo (gomos da sombrinha), usada como divisória. */
.faixa-frevo {
  height: 10px;
  background: repeating-linear-gradient(90deg,
    #C34342 0 36px, #FFB511 36px 72px, #00AD4A 72px 108px, #3155A4 108px 144px, #E2601C 144px 180px);
}

/* Varal de bandeirinhas atravessando o topo de uma seção. */
.varal {
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 4 Q60 12 120 4' fill='none' stroke='%235A2A0C' stroke-width='2'/%3E%3Cg stroke='%232A1408' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 5 L26 9 L15 30 Z' fill='%23C34342'/%3E%3Cpath d='M34 10 L56 12 L45 32 Z' fill='%23FFB511'/%3E%3Cpath d='M64 12 L86 10 L75 32 Z' fill='%2300AD4A'/%3E%3Cpath d='M94 9 L116 5 L105 30 Z' fill='%233155A4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 34px;
}

/* Foto em moldura de "polaroide" com fita adesiva. */
.polaroide {
  background: #fff;
  padding: 12px 12px 18px;
  border: 3px solid #7A2000;
  border-radius: 6px;
  box-shadow: 0 8px 0 #E8B85A;
}
.fita {
  position: absolute;
  width: 110px;
  height: 28px;
  background: rgba(255, 216, 77, .85);
  border-left: 2px dashed rgba(122, 32, 0, .25);
  border-right: 2px dashed rgba(122, 32, 0, .25);
}

/* FAQ em acordeão (<details>): marcador +/− próprio. */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-sinal { transition: transform .2s ease; }
.faq[open] summary .faq-sinal { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa-rolante, .flutuar, .flutuar-lento { animation: none; }
}