/* ==========================================================================
   BALNEÁRIO TASTE FESTIVAL — devlop prototype
   Índice:
   01 Tokens        02 Reset/base     03 Type utilities   04 Layout primitives
   05 Motion         06 Bulbo/luzinhas (assinatura)        07 Ticket/eyebrow
   08 Botões/foco    09 Hero           10 Pilares          11 Programação
   12 Família        13 Gastronomia    14 Formulário       15 Footer
   16 @880           17 @480
   ========================================================================== */

/* ===== 01. TOKENS ===== */
:root {
  /* -- tier 1: paleta bruta (NUNCA referenciada direto por componente) -- */
  --brand-terracotta: #b53324;
  --brand-mustard: #e2a051;
  --brand-cream: #f1dcc7;
  --neutral-dusk: #1c1512;
  --neutral-dusk-soft: #2a201b;
  --neutral-paper: #faf6f0;
  --neutral-ink: #241a15;

  /* -- tier 2: semântico -- */
  --c-bg-page: var(--neutral-paper);
  --c-bg-dark: var(--neutral-dusk);
  --c-bg-dark-soft: var(--neutral-dusk-soft);
  --c-surface: #ffffff;
  --c-text: var(--neutral-ink);
  --c-text-soft: #6b5548;
  --c-text-on-dark: var(--brand-cream);
  --c-text-on-dark-soft: #cbb6a3;
  --c-accent: var(--brand-terracotta);
  --c-accent-hover: #9c2b1e;
  --c-accent-2: var(--brand-mustard);
  --c-line: rgba(181, 51, 36, .18);
  --c-line-on-dark: rgba(226, 160, 81, .28);
  --c-focus: var(--brand-terracotta);

  /* motivo luzinhas */
  --c-wire: rgba(226, 160, 81, .55);
  --c-wire-on-dark: rgba(226, 160, 81, .4);
  --c-bulb-off: #4a3c33;
  --c-bulb-on: var(--brand-mustard);
  --c-bulb-bloom: rgba(226, 160, 81, .55);

  /* tipografia */
  --ff-display: "Archivo", "Oswald", "Arial Narrow", sans-serif;
  --ff-voice: "Fraunces", Georgia, serif;
  --ff-body: "Archivo", "Oswald", system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 3.8rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.7vw, 2.44rem);
  --fs-h3: 1.95rem;
  --fs-h4: 1.5625rem;
  --fs-lg: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8rem;
  --fs-2xs: 0.6875rem;

  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
  --tr-tight: -.02em;
  --tr-normal: 0;
  --tr-wide: .14em;

  /* espaçamento / radius / sombra */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;
  --sp-gutter: 40px;
  --sp-section: 96px;

  --r-card: 18px;
  --r-field: 10px;
  --r-pill: 999px;

  --sh-card: 0 8px 24px rgba(181, 51, 36, .12);
  --sh-card-hover: 0 14px 32px rgba(181, 51, 36, .20);
  --sh-dark: 0 10px 30px rgba(0, 0, 0, .45);

  --maxw: 1120px;

  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  --z-deco: 1;
  --z-content: 2;
  --z-sticky: 20;
  --z-modal: 80;

  --wire-w: 48px;
  --sag: 14px;
}

@media (max-width:880px) {
  :root {
    --sp-gutter: 26px;
    --sp-section: 64px;
    --wire-w: 40px;
    --sag: 10px;
  }
}

@media (max-width:480px) {
  :root {
    --sp-gutter: 16px;
    --sp-section: 48px;
    --wire-w: 32px;
    --sag: 7px;
  }
}

/* ===== 02. RESET / BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

svg {
  display: block;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-field);
}

.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

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

.sec-dark :focus-visible {
  outline-color: var(--c-accent-2);
}

#main .container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.section {
  padding-block: var(--sp-section);
}

.sec-dark {
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
}

.sec-light {
  background: var(--c-bg-page);
  color: var(--c-text);
}

/* ===== 03. TYPE UTILITIES ===== */
.eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sec-dark .eyebrow {
  color: var(--c-accent-2);
}

h2.title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin-block: var(--sp-2) var(--sp-5);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--c-text-soft);
  max-width: 60ch;
}

.sec-dark .lead {
  color: var(--c-text-on-dark-soft);
}

/* ===== 04. LAYOUT PRIMITIVES ===== */
.grid-2 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-7);
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* ===== 05. MOTION ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-spring);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* stagger em cascata: cards de uma mesma grade entram em sequência, não juntos */
.pilares-grid .reveal:nth-child(1) {
  transition-delay: 0ms;
}

.pilares-grid .reveal:nth-child(2) {
  transition-delay: 110ms;
}

.pilares-grid .reveal:nth-child(3) {
  transition-delay: 220ms;
}

.fornecedores-grid .reveal:nth-child(1) {
  transition-delay: 0ms;
}

.fornecedores-grid .reveal:nth-child(2) {
  transition-delay: 70ms;
}

.fornecedores-grid .reveal:nth-child(3) {
  transition-delay: 140ms;
}

.fornecedores-grid .reveal:nth-child(4) {
  transition-delay: 210ms;
}

.fornecedores-grid .reveal:nth-child(5) {
  transition-delay: 280ms;
}

.fornecedores-grid .reveal:nth-child(6) {
  transition-delay: 350ms;
}

.prog-panel ol li:nth-child(1) {
  transition-delay: 0ms;
}

.prog-panel ol li:nth-child(2) {
  transition-delay: 60ms;
}

.prog-panel ol li:nth-child(3) {
  transition-delay: 120ms;
}

.prog-panel ol li:nth-child(4) {
  transition-delay: 180ms;
}

.prog-panel ol li:nth-child(5) {
  transition-delay: 240ms;
}

.prog-panel ol li:nth-child(6) {
  transition-delay: 300ms;
}

.prog-panel ol li:nth-child(7) {
  transition-delay: 360ms;
}

.prog-panel ol li:nth-child(8) {
  transition-delay: 420ms;
}

@media (prefers-reduced-motion: reduce) {

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

  html {
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== 06. BULBO / STRING LIGHTS (assinatura) ===== */
.bulb {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-bulb-off);
  transition: background-color var(--t-base) var(--ease-out);
  z-index: var(--z-content);
}

.bulb::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-bulb-bloom) 0%, transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  pointer-events: none;
}

.bulb.is-lit {
  background: var(--c-bulb-on);
  animation: bulb-pulse 2400ms ease-in-out 600ms infinite;
}

.bulb.is-lit::after {
  opacity: 1;
  transform: scale(1.2);
}

@keyframes bulb-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(226, 160, 81, 0);
  }

  50% {
    box-shadow: 0 0 10px 3px var(--c-bulb-bloom);
  }
}

/* fio horizontal — CSS puro, sem SVG (hero + divisores) */
.string-lights {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 34px;
  margin-block: var(--sp-4);
}

.string-lights::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: 60%;
  border-bottom: 2px solid var(--c-wire-on-dark);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.sec-light .string-lights::before {
  border-color: var(--c-wire);
}

.string-lights .bulb {
  transform: translateY(0);
}

.string-lights .bulb:nth-child(odd) {
  transform: translateY(6px);
}

.string-lights .bulb:nth-child(3n) {
  transform: translateY(10px);
}

.hero-lights .bulb {
  transition-delay: calc(var(--i, 0) * 90ms);
}

.hero-lights .bulb:nth-child(1) {
  --i: 1;
}

.hero-lights .bulb:nth-child(2) {
  --i: 2;
}

.hero-lights .bulb:nth-child(3) {
  --i: 3;
}

.hero-lights .bulb:nth-child(4) {
  --i: 4;
}

.hero-lights .bulb:nth-child(5) {
  --i: 5;
}

.hero-lights .bulb:nth-child(6) {
  --i: 6;
}

.hero-lights .bulb:nth-child(7) {
  --i: 7;
}

/* fio vertical — SVG por segmento (Programação) */
.bulb-row {
  display: grid;
  grid-template-columns: var(--wire-w) 1fr;
  column-gap: var(--sp-4);
}

.bulb-gutter {
  position: relative;
  display: flex;
  justify-content: center;
}

.wire-seg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wire-seg path {
  fill: none;
  stroke: var(--c-wire);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out);
}

.reveal.in .wire-seg path {
  stroke-dashoffset: 0;
}

.sec-dark .wire-seg path {
  stroke: var(--c-wire-on-dark);
}

.bulb-row:nth-child(even) .wire-seg {
  transform: scaleX(-1);
}

.bulb-row .bulb {
  margin-top: var(--sp-1);
}

.bulb-row:last-child .wire-seg {
  display: none;
}

/* ===== 07. TICKET / EYEBROW numerado ===== */
.ticket-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-5);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  position: relative;
}

.ticket-card::before {
  /* borda perfurada sutil no topo, referência a ticket */
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-5);
  right: var(--sp-5);
  height: 1px;
  background-image: linear-gradient(90deg, var(--c-line) 50%, transparent 50%);
  background-size: 8px 1px;
}

.ticket-card:hover {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: var(--sh-card-hover);
}

.ticket-card:nth-child(even):hover {
  transform: translateY(-8px) rotate(.6deg);
}

/* ===== 08. BOTÕES / LINKS / FOCO ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--brand-cream);
  box-shadow: 0 6px 18px rgba(181, 51, 36, .35);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  touch-action: manipulation;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(181, 51, 36, .45);
  background: var(--c-accent-hover);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(181, 51, 36, .35);
}

.sec-dark .btn {
  background: var(--c-accent-2);
  color: var(--neutral-dusk);
  box-shadow: 0 6px 18px rgba(226, 160, 81, .3);
}

.sec-dark .btn:hover {
  background: #f0b56a;
  box-shadow: 0 12px 26px rgba(226, 160, 81, .4);
}

.link-more {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-accent);
  text-underline-offset: 3px;
}

/* ===== 09. HERO ===== */
.hero {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--sp-section) + var(--sp-6)) var(--sp-section);
  text-align: center;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-image: url("hero-foto.webp");
  background-size: cover;
  background-position: center 62%;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(28, 21, 18, .80) 0%, rgba(28, 21, 18, .45) 38%, rgba(28, 21, 18, .55) 62%, rgba(28, 21, 18, .88) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(28, 21, 18, .55) 100%);
  pointer-events: none;
}

.hero .deco {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
  pointer-events: none;
}

.hero .deco::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 15%, rgba(226, 160, 81, .20) 0%, transparent 70%);
}

.hero .content {
  position: relative;
  z-index: var(--z-content);
}

.hero .content>* {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.hero.hero-in .content>* {
  opacity: 1;
  transform: none;
}

.hero.hero-in .content>*:nth-child(1) {
  transition-delay: 0ms;
}

.hero.hero-in .content>*:nth-child(2) {
  transition-delay: 90ms;
}

.hero.hero-in .content>*:nth-child(3) {
  transition-delay: 180ms;
}

.hero.hero-in .content>*:nth-child(4) {
  transition-delay: 270ms;
}

.hero.hero-in .content>*:nth-child(5) {
  transition-delay: 360ms;
}

.hero.hero-in .content>*:nth-child(6) {
  transition-delay: 420ms;
}

.hero.hero-in .content>*:nth-child(7) {
  transition-delay: 520ms;
}

.hero .logo-mark {
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
}

.hero h1 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.hero .logo-mark {
  width: min(420px, 85vw);
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  display: inline-block;
}

.hero h1 {
  font-family: var(--ff-voice);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: .98;
  letter-spacing: var(--tr-tight);
  color: var(--c-text-on-dark);
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
}

.hero .fest {
  display: block;
  font-style: italic;
  color: var(--c-accent-2);
}

.hero .tese {
  font-family: var(--ff-voice);
  font-size: var(--fs-h4);
  color: var(--c-text-on-dark);
  max-width: 26ch;
  margin: var(--sp-5) auto 0;
}

.hero .apoio {
  font-size: var(--fs-lg);
  color: var(--c-text-on-dark-soft);
  max-width: 46ch;
  margin: var(--sp-3) auto var(--sp-6);
}

.hero .meta {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-on-dark);
  margin-bottom: var(--sp-6);
}

.hero .meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero .meta svg {
  width: 18px;
  height: 18px;
  color: var(--c-accent-2);
}

.hero-lights {
  max-width: 420px;
  margin-inline: auto;
}

/* ===== 10. O QUE É ===== */
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.pilar-card {
  text-align: left;
}

.pilar-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.pilar-card .icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-cream);
}

.pilar-card h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.pilar-card p {
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
}

/* ===== 11. PROGRAMAÇÃO ===== */
.prog-legend {
  display: flex;
  gap: var(--sp-4);
  margin-block: var(--sp-5) var(--sp-6);
}

.tag {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  vertical-align: middle;
}

.prog-legend .tag {
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  opacity: .55;
  transition: opacity 420ms cubic-bezier(.4, 0, .2, 1), transform 420ms cubic-bezier(.4, 0, .2, 1), box-shadow 420ms cubic-bezier(.4, 0, .2, 1);
}

.prog-legend .tag:hover {
  opacity: .85;
}

.prog-legend .tag[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor inset;
  transform: translateY(-1px);
}

.tag-todos {
  background: var(--c-bg-dark-soft);
  color: var(--c-text-on-dark);
  border: 1px solid var(--c-line-on-dark);
}

.tag-familia {
  background: rgba(226, 160, 81, .18);
  color: var(--c-accent-2);
  border: 1px solid var(--c-line-on-dark);
}

.tag-adulto,
.tag-musica {
  background: rgba(181, 51, 36, .28);
  color: #ff9d85;
  border: 1px solid rgba(255, 157, 133, .35);
}

.bulb-row .label .tag {
  margin-left: var(--sp-2);
  transform: translateY(-1px) scale(.5);
  opacity: 0;
  transition: opacity 260ms var(--ease-spring) 260ms, transform 260ms var(--ease-spring) 260ms;
}

.bulb-row.reveal.in .label .tag {
  transform: translateY(-1px) scale(1);
  opacity: 1;
}

/* filtro família/adulto — classe .dimmed aplicada via JS por linha */
.bulb-row {
  transition: opacity 620ms cubic-bezier(.4, 0, .2, 1), filter 620ms cubic-bezier(.4, 0, .2, 1);
}

.bulb-row.dimmed {
  opacity: .4;
  filter: saturate(.7);
}

.prog-tablist {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.prog-tab {
  flex: 1;
  padding: var(--sp-4);
  border-radius: var(--r-field) var(--r-field) 0 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  background: var(--c-bg-dark-soft);
  color: var(--c-text-on-dark-soft);
  border-bottom: 3px solid transparent;
}

.prog-tab {
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.prog-tab:hover {
  color: var(--c-text-on-dark);
}

.prog-tab[aria-selected="true"] {
  color: var(--c-text-on-dark);
  border-color: var(--c-accent-2);
}

.prog-panel {
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.prog-panel.panel-enter {
  opacity: 0;
  transform: translateX(12px);
}

.prog-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.prog-panel h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  color: var(--c-text-on-dark);
  margin-bottom: var(--sp-5);
}

.bulb-row {
  padding-block: var(--sp-3);
}

.bulb-row time {
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-accent-2);
  display: block;
  letter-spacing: var(--tr-wide);
}

.bulb-row .label {
  font-size: var(--fs-body);
  color: var(--c-text-on-dark);
  font-weight: 600;
}

.bulb-row .sub {
  font-size: var(--fs-sm);
  color: var(--c-text-on-dark-soft);
}

.bulb-row .pendente {
  color: var(--c-accent-2);
  font-style: italic;
}

@media (min-width:881px) {
  .prog-panel[hidden] {
    display: block;
  }

  .prog-tablist {
    display: none;
  }
}

/* ===== 12. BANNER IMERSIVO (foto still-life real, sem texto de marca embutido) ===== */
.gastro-banner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-image: url("banner-queijaria.webp");
  background-size: cover;
  background-position: center;
  overflow: clip;
}

.gastro-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 21, 18, .86) 0%, rgba(28, 21, 18, .15) 65%, transparent 100%);
}

.gastro-banner .container {
  position: relative;
  z-index: var(--z-content);
  padding-block-end: var(--sp-6);
  text-align: center;
}

.gastro-banner .eyebrow {
  color: var(--c-accent-2);
  justify-content: center;
  display: flex;
}

#main .gastro-banner h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--c-text-on-dark) !important;
  margin-top: var(--sp-2);
}

/* ===== 13. CURADORIA GASTRONÔMICA ===== */
.fornecedores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.fornecedor-card {
  text-align: left;
  padding: var(--sp-4);
}

.fornecedor-card .monograma {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-field);
  display: block;
  object-fit: cover;
  margin-bottom: var(--sp-3);
}

.fornecedor-card h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
  color: var(--neutral-ink);
}

.fornecedor-card .role {
  font-size: var(--fs-2xs);
  font-style: italic;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

.sec-dark .fornecedor-card .role {
  color: #ab6b19;
  /* mostarda mais escuro para acessibilidade no fundo branco do card */
}

.fornecedor-card p {
  font-size: var(--fs-2xs);
  color: var(--c-text-soft);
  line-height: var(--lh-normal);
}

.fornecedor-card .badge {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

.foto-nota {
  font-size: var(--fs-2xs);
  color: var(--c-text-soft);
  font-style: italic;
  text-align: center;
  margin-top: var(--sp-6);
}

.highlight-block {
  background: linear-gradient(115deg, var(--brand-terracotta), var(--brand-mustard), var(--brand-terracotta));
  background-size: 200% 200%;
  color: var(--brand-cream);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  animation: sheen-shift 6s ease-in-out infinite;
}

@keyframes sheen-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.highlight-block .eyebrow {
  color: var(--brand-cream);
}

.highlight-block h3 {
  font-family: var(--ff-voice);
  font-size: var(--fs-h3);
  margin-block: var(--sp-2);
}

.highlight-block p {
  max-width: 60ch;
}

/* ===== 14. FORMULÁRIO ===== */
.ticket-form {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 5rem;
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: var(--sp-7);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  /* sombra bem espalhada e desfocada — separa a forma do fundo, efeito 1º/2º plano */
  box-shadow: 0 50px 90px -24px rgba(28, 21, 18, .45), 0 14px 32px rgba(181, 51, 36, .12);
  transition: box-shadow var(--t-base) var(--ease-out);
}

.ticket-form:hover {
  box-shadow: 0 60px 110px -22px rgba(28, 21, 18, .52), 0 18px 38px rgba(181, 51, 36, .16);
}

/* contorno pontilhado, 10px para dentro da borda, acompanhando o border-radius do card */
.ticket-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ticket-outline rect {
  x: 10px;
  y: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  rx: calc(var(--r-card) - 10px);
  ry: calc(var(--r-card) - 10px);
  fill: none;
  stroke: var(--c-line);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.ticket-stub {
  padding-top: var(--sp-6);
  border-top: 2px dashed var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stub-label {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-4);
}

.ticket-stub .form-note {
  border-top: 0;
}

@media (min-width:720px) {
  .ticket-form {
    grid-template-columns: 1fr 240px;
    align-items: start;
  }

  .ticket-stub {
    padding-top: 0;
    padding-left: var(--sp-6);
    border-top: 0;
    border-left: 2px dashed var(--c-line);
  }
}

.field {
  margin-bottom: var(--sp-5);
}

.field label {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-2);
}

.field input {
  width: 100%;
  font-size: var(--fs-body);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-field);
  background: var(--c-bg-page);
  transition: border-color var(--t-fast) var(--ease-out);
}

.field input:focus {
  border-color: var(--c-accent);
}

.field-label {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-2);
}

.field-choice {
  margin-bottom: var(--sp-6);
}

.field-choice .choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

.field-choice label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.optin {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-note {
  font-size: var(--fs-2xs);
  color: var(--c-text-soft);
  text-align: center;
  margin-top: var(--sp-4);
  border-top: 1px dashed var(--c-line);
  padding-top: var(--sp-4);
}

.form-cta {
  text-align: center;
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

.btn-outline {
  background: transparent;
  color: var(--c-accent);
  box-shadow: none;
  border: 2px solid var(--c-accent);
}

.btn-outline:hover {
  background: var(--c-accent);
  color: var(--brand-cream);
  transform: translateY(-2px);
  box-shadow: none;
}

/* ===== 14b. INFORMAÇÕES PRÁTICAS ===== */
.info-table {
  margin: var(--sp-6) auto 0;
  max-width: 72ch;
}

.info-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  border-bottom: 1px dashed var(--c-line-on-dark);
}

.info-row dt {
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent-2);
}

.info-row dd {
  margin: 0;
  color: var(--c-text-on-dark-soft);
}

.legal-notice {
  background: var(--brand-cream);
  color: var(--neutral-ink);
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-field);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--sp-6) auto 0;
  max-width: 72ch;
}

.map-embed {
  margin: var(--sp-6) auto 0;
  max-width: 72ch;
}

.map-embed iframe {
  width: 100%;
  height: 280px;
  border: 0;
  border-radius: var(--r-card);
  display: block;
  margin-bottom: var(--sp-3);
}

.sec-dark .map-embed .link-more {
  color: var(--c-accent-2);
}

/* ===== 15. FOOTER ===== */
.footer {
  text-align: center;
  padding-block: var(--sp-8);
}

.footer .logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-7);
  margin-bottom: var(--sp-5);
}

.footer .logos img {
  height: 56px;
  width: auto;
}

.footer .legal {
  font-size: var(--fs-2xs);
  color: var(--c-text-on-dark-soft);
  max-width: 56ch;
  margin-inline: auto;
}

.footer .legal+.legal {
  margin-top: var(--sp-2);
}

/* ===== 16. BREAKPOINT 880 ===== */
@media (max-width:880px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .pilares-grid {
    grid-template-columns: 1fr;
  }

  .fornecedores-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prog-panels {
    grid-template-columns: 1fr;
  }

  .prog-panel[hidden] {
    display: none;
  }

  .prog-tablist {
    display: flex;
  }

  h2.title {
    font-size: var(--fs-h2);
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* ===== 17. BREAKPOINT 480 ===== */
@media (max-width:480px) {
  .fornecedores-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .logo-mark {
    width: min(320px, 80vw);
  }

  .hero .meta {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .footer .logos {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .ticket-form {
    padding: var(--sp-5);
  }
}

/* Centralizar títulos e textos principais das seções */
.section .eyebrow,
.section .title,
.section .lead,
.section .foto-nota {
  text-align: center;
  margin-inline: auto;
}

.section .eyebrow {
  justify-content: center;
  display: flex;
}

/* Centralizar conteúdo do bloco de destaque (exclusivo) */
.highlight-block {
  text-align: center;
}

.highlight-block p {
  margin-inline: auto;
}

/* ===== 18. NOVO LAYOUT DO FORMULÁRIO ===== */
.ticket-form {
  background: #ffffff !important;
}

.field input {
  background: #eef3fc !important;
  border: 1px solid #d0d7de !important;
  color: var(--neutral-ink) !important;
}

.field input:focus {
  border-color: var(--c-accent) !important;
  background: #ffffff !important;
}

/* Alterações no layout do botão CTA na esquerda */
.form-cta-left {
  margin-top: var(--sp-6);
  width: 100%;
}

.form-cta-left .btn {
  width: 100%;
  justify-content: center;
  font-size: var(--fs-body);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 4px 14px rgba(181, 51, 36, 0.3);
}

/* Stub / Direita: Como Participar */
.stub-label-right {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: #6b5548;
  margin-bottom: var(--sp-5);
  text-align: center;
  width: 100%;
}

.steps-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6) 0;
  width: 100%;
}

.steps-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: var(--sp-4);
}

.steps-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.steps-list .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fdf6ee;
  border: 1px solid rgba(181, 51, 36, 0.25);
  color: var(--c-accent);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.steps-list .step-text {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: var(--lh-snug);
}

/* Info Box do App */
.app-info-box {
  background: #fdf6ee;
  border: 1px solid rgba(181, 51, 36, 0.1);
  border-radius: var(--r-field);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  width: 100%;
}

.app-info-box .phone-icon {
  color: var(--c-accent);
  flex-shrink: 0;
}

.app-info-box .app-info-text {
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  margin: 0;
  line-height: var(--lh-snug);
  text-align: left;
}

.app-info-box .brand-highlight {
  color: var(--c-accent);
  font-weight: 700;
}

/* Reajustar colunas do formulário no desktop */
@media (min-width: 720px) {
  .ticket-form {
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: var(--sp-7) !important;
  }

  .ticket-stub {
    padding-top: 0 !important;
    padding-left: var(--sp-7) !important;
    border-top: 0 !important;
    border-left: 2.5px dashed var(--c-line) !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Estilos do Bloco de Sucesso (Cadastro Realizado) - Centralizado em Coluna Única */
.success-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6) 0;
  width: 100%;
}

.success-icon-container {
  margin-inline: auto;
  margin-bottom: var(--sp-4);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
}

/* Estilo Confetes */
.success-icon-container::after {
  content: '';
  position: absolute;
  inset: -15px;
  background-image: radial-gradient(circle at 10% 20%, #b53324 3px, transparent 4px),
    radial-gradient(circle at 80% 10%, #e2a051 4px, transparent 5px),
    radial-gradient(circle at 90% 80%, #2e7d32 3px, transparent 4px),
    radial-gradient(circle at 20% 90%, #b53324 4px, transparent 5px);
  background-size: 100% 100%;
  pointer-events: none;
}

.success-title {
  font-family: var(--ff-voice);
  font-size: var(--fs-h2) !important;
  color: #2e7d32 !important;
  margin-bottom: var(--sp-3) !important;
  text-transform: none !important;
  font-weight: 700;
}

.success-desc {
  font-size: var(--fs-body);
  color: var(--c-text-soft);
  max-width: 42ch;
  line-height: var(--lh-snug);
  margin: 0;
}

.success-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 480px;
  margin-top: var(--sp-5);
}

.success-stub-desc {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
}

.form-cta-centered {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.btn-access-app {
  width: 100%;
  justify-content: center;
  font-size: var(--fs-sm) !important;
  padding: var(--sp-4) var(--sp-3) !important;
  background: var(--c-accent) !important;
  color: var(--brand-cream) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(181, 51, 36, 0.3);
}

.btn-access-app:hover {
  background: var(--c-accent-hover) !important;
  transform: translateY(-2px);
}

.app-subtext {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--c-text-soft);
  margin-top: var(--sp-3);
  text-align: center;
  width: 100%;
}

/* Nota de segurança de dados abaixo do botão principal */
.data-security-note {
  font-size: var(--fs-2xs);
  color: #8c8c8c;
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.data-security-note svg {
  color: #8c8c8c;
}

/* ===== SOBRESCRITAS DE ESPECIFICIDADE DE COR CONTRA TEMA GLOBAL ===== */
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  color: var(--neutral-ink) !important;
}

#main .sec-dark h1,
#main .sec-dark h2,
#main .sec-dark h3,
#main .sec-dark h4,
#main .sec-dark h5,
#main .sec-dark h6 {
  color: var(--c-text-on-dark) !important;
}

#main li {
  color: var(--c-text-soft) !important;
}

#main .sec-dark li {
  color: var(--c-text-on-dark-soft) !important;
}

/* Timeline */
#main .bulb-row .label {
  color: var(--c-text-on-dark) !important;
}

#main .bulb-row .sub {
  color: var(--c-text-on-dark-soft) !important;
}

#main .bulb-row time {
  color: var(--c-accent-2) !important;
}

/* Como Participar */
#main .steps-list li,
#main .steps-list .step-text {
  color: var(--c-text-soft) !important;
}

#main .steps-list .step-num {
  color: var(--c-accent) !important;
}

/* Cards de Fornecedores / Curadoria */
#main .fornecedor-card h3 {
  color: var(--neutral-ink) !important;
}

#main .fornecedor-card p {
  color: var(--c-text-soft) !important;
}

#main .fornecedor-card .role {
  color: var(--c-accent) !important;
}

#main .sec-dark .fornecedor-card .role {
  color: #ab6b19 !important;
}