/* ==========================================================================
   WINE&JAZZ SESSIONS 2026 — Landing Page
   Design system: preto e vinho chapados, ouro e creme nos detalhes.
   Sem degradês decorativos — o contraste faz o trabalho.
   Bebas Neue nos títulos, Montserrat no texto.
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS */
:root {
  /* fundos — a página inteira é preta */
  --preto:      #000000;
  --preto-card: #111111;
  --preto-alt:  #070707;          /* respiro entre seções vizinhas */

  /* cantos levemente arredondados em tudo */
  --r:          10px;

  /* vermelho do projeto: cor de AÇÃO (botões e destaques), não de fundo */
  --vinho:      #720606;
  --vinho-alto: #8f0b0b;
  --vinho-claro:#c62222;   /* o vermelho do projeto clareado para leitura sobre preto */

  /* detalhes */
  --oliva:      #483e1b;
  --ouro:       #ecd792;
  --creme:      #e7dcc5;

  /* texto */
  --txt:        #e7dcc5;
  --txt-suave:  rgba(231, 220, 197, .74);
  --txt-fraco:  rgba(231, 220, 197, .68);
  /* bordas discretas: o cartão se separa pelo preenchimento, não pelo contorno */
  --linha:      rgba(231, 220, 197, .11);
  --linha-forte:rgba(236, 215, 146, .42);

  /* tipografia */
  --f-titulo: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --f-texto:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* medidas — 1400px no Full HD, proporcional até o HD */
  --wrap:   min(1400px, 72.9vw);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --sec-y:  clamp(3.75rem, 7.5vw, 7.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--txt);
  font-family: var(--f-texto);
  font-size: clamp(.95rem, .92rem + .18vw, 1.02rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* barra de rolagem nas cores do projeto */
html { scrollbar-color: var(--vinho) #0a0a0a; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
  border: 3px solid #0a0a0a;
  border-radius: 999px;
  background: var(--vinho);
}
::-webkit-scrollbar-thumb:hover { background: var(--vinho-alto); }
::-webkit-scrollbar-corner { background: #0a0a0a; }
::selection { background: var(--vinho); color: #fff; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: .88; }
p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: .8rem 1.4rem;
  background: var(--ouro);
  color: #1a0000;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- 3. LAYOUT */
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
@media (max-width: 1200px) {
  /* width:auto + margin-inline:auto faria o item flex encolher no hero */
  .wrap { width: 100%; padding-inline: var(--gutter); }
}

.sec { padding-block: var(--sec-y); }
.sec--preto { background: var(--preto); }
.sec--alt   { background: var(--preto-alt); }

/* ------------------------------------------------------------- 4. TIPOGRAFIA */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ouro);
}
.eyebrow::before {
  content: "";
  width: 2.2rem; height: 2px;
  background: var(--ouro);
  flex-shrink: 0;
}
.eyebrow--centro { justify-content: center; }
/* filetes que acompanham a largura da coluna, como no mockup */
.eyebrow--largo::before, .eyebrow--largo::after { width: clamp(2.2rem, 6vw, 5.5rem); }
.eyebrow--centro::after {
  content: "";
  width: 2.2rem; height: 2px;
  background: var(--ouro);
  flex-shrink: 0;
}

.titulo {
  font-family: var(--f-titulo);
  font-size: clamp(2.6rem, 1.1rem + 5.2vw, 5.6rem);
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.titulo em { font-style: normal; color: var(--vinho-claro); }
.titulo--md { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.9rem); }

.lead {
  max-width: 54ch;
  margin-top: 1.35rem;
  font-size: clamp(1rem, .95rem + .28vw, 1.12rem);
  color: var(--txt-suave);
  text-wrap: pretty;
}

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.sec-head .titulo { margin-top: 1.15rem; }
.sec-head--centro { text-align: center; }
.sec-head--centro .lead { margin-inline: auto; }

/* ------------------------------------------------------------- 5. BOTÕES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05rem 2.2rem;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

/* botão de ação: borda com luz girando + faixa de brilho atravessando */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.btn--acao {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  color: #fff;
  background:
    linear-gradient(135deg, #7d0808, #5e0404) padding-box,
    conic-gradient(from var(--giro),
      rgba(236, 215, 146, 0) 0%, var(--ouro) 6%, #fff8e2 12%, var(--ouro) 18%, rgba(236, 215, 146, 0) 26%,
      rgba(236, 215, 146, 0) 50%, var(--ouro) 56%, #fff8e2 62%, var(--ouro) 68%, rgba(236, 215, 146, 0) 76%) border-box;
  box-shadow: inset 0 0 0 1px rgba(236, 215, 146, .18), 0 10px 26px rgba(114, 6, 6, .45);
  animation: girar 4s linear infinite;
}
.btn--acao::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: brilhar 3.8s ease-in-out infinite;
}
.btn--acao > * { position: relative; z-index: 2; }
.btn--acao:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(236, 215, 146, .3), 0 16px 34px rgba(114, 6, 6, .6);
}
.btn--acao:active { transform: translateY(-1px); }

@keyframes girar   { to { --giro: 360deg; } }
@keyframes brilhar {
  0%, 100% { transform: translateX(-180%) skewX(-18deg); }
  55%      { transform: translateX(280%) skewX(-18deg); }
}

.btn--linha { border-color: var(--ouro); color: var(--ouro); }
.btn--linha:hover { background: var(--ouro); color: #1a0000; }

.btn--sm { padding: .8rem 1.5rem; font-size: .7rem; letter-spacing: .13em; }
.btn--full { width: 100%; }

/* ------------------------------------------------------------- 6. ÍCONES */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico * { vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------- 7. CABEÇALHO */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.topo.is-fixo { background: var(--preto); border-bottom-color: var(--linha); }

.topo__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: clamp(.9rem, 1.6vw, 1.4rem) var(--gutter);
}

.topo__logo { position: relative; z-index: 2; flex-shrink: 0; }
.topo__logo img { width: clamp(112px, 11vw, 170px); }

.nav { margin-left: auto; }
.nav__lista { display: flex; gap: clamp(1rem, 2.2vw, 2.3rem); }
.nav__lista a {
  position: relative;
  display: block;
  padding-block: .35rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--creme);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__lista a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__lista a:hover { color: var(--ouro); }
.nav__lista a:hover::after { transform: scaleX(1); }

.topo__cta { flex-shrink: 0; }

.burger {
  display: none;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0 8px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--creme);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .topo__cta { display: none; }
  .burger { display: flex; }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    margin: 0;
    padding: 6rem var(--gutter) 2.5rem;
    background: var(--preto);
    border-bottom: 1px solid var(--linha);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
  }
  .nav.is-aberto { transform: translateY(0); visibility: visible; }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__lista li + li { border-top: 1px solid var(--linha); }
  .nav__lista a { padding-block: 1.05rem; font-size: .9rem; }
}

/* ------------------------------------------------------------- 8. HERO */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  /* a base reserva o espaço que a .cruz vai ocupar ao subir sobre o hero,
     senão em telas baixas (1366x768) a faixa cobre o selo de lote */
  padding-block: clamp(7rem, 11.2vh, 9.5rem)
                 calc(clamp(2.5rem, 4.5vh, 4rem) + min(11rem, 9.2vw) * .9);
  background: var(--preto);
  overflow: hidden;
  text-align: center;
}
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.86) 78%, #000 100%);
}

.hero__in { position: relative; display: grid; justify-items: center; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .95rem;
  border: 1px solid var(--ouro);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .55);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouro);
}

.hero__titulo {
  max-width: none;
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
  font-family: var(--f-titulo);
  font-size: clamp(2.9rem, 1.05rem + 5.6vw, 6.4rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.hero__titulo em { display: block; font-style: normal; font-size: .75em; color: var(--ouro); }
.hero__titulo em { white-space: nowrap; }
.hero__titulo i { font-style: normal; margin-inline: .3em; color: var(--txt-fraco); }
/* em tela estreita a linha não cabe: cada parte ganha uma linha e a barra sai */
@media (max-width: 900px) {
  .hero__titulo em { white-space: normal; }
  .hero__titulo em span { display: block; }
  .hero__titulo i { display: none; }
}

/* barra do hero: data, local e contagem numa linha só */
.hero__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(.5rem, .9vw, .9rem);
  margin-top: clamp(.7rem, 1.2vw, 1.2rem);
}
.hero__barra > ul { display: flex; flex-wrap: wrap; gap: clamp(.5rem, .9vw, .9rem); }

/* Vidro fosco na cor do projeto. O tinto entra no próprio vidro, não como
   preenchimento chapado, para a foto atrás continuar aparecendo. Uma definição
   só, usada pelas caixas do hero e do fechamento.
   No hero o vidro fica em cada caixa e não num painel em volta: com a foto
   atrás, um bloco único de blur virava uma mancha.
   Sem degradê: o tinto é uma cor só, translúcida. */
.hero__barra .hero__quando li,
.hero__barra .contagem li,
.fim__info,
.fim .contagem--fim li {
  border: 1px solid rgba(236, 215, 146, .3);
  background: rgba(120, 8, 8, .4);
}
/* No fechamento o vidro assenta sobre preto e dá rgb(48,3,3). No hero a foto
   das velas atravessa e clareava a caixa para rgb(69,15,3); a base preta abaixo
   do tinto iguala as duas. Custo assumido: com a base em 85% o desfoque quase
   não aparece mais — o que sobra do vidro é a borda e a sombra. */
.hero__barra .hero__quando li,
.hero__barra .contagem li {
  background-color: rgba(0, 0, 0, .85);
  background-image: linear-gradient(rgba(120, 8, 8, .4), rgba(120, 8, 8, .4));
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 226, 226, .18);
  border-radius: var(--r);
}

/* data e local em uma caixa só */
.hero__quando li {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.2vw, 1.2rem);
  padding: clamp(.55rem, .8vw, .85rem) clamp(.85rem, 1.15vw, 1.2rem);
}
.hero__quando li > span {
  display: grid;
  gap: .35rem;
  padding-left: clamp(.85rem, 1.4vw, 1.4rem);
  border-left: 1px solid rgba(255, 255, 255, .2);
  text-align: left;
}
.hero__quando b {
  font-family: var(--f-titulo);
  /* mesmo corpo dos números da contagem: a barra tem que ler como um bloco só */
  font-size: clamp(1.75rem, 1.15rem + 1.75vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}
.hero__quando li > span > span {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.hero__quando svg { width: 1.1em; height: 1.1em; stroke-width: 1.8; }

/* fora do hero volta a ser uma linha simples de data e local */
.quando-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1.25rem, 2.4vw, 2.25rem);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme);
}
.quando-linha li { display: flex; align-items: center; gap: .55rem; }
.quando-linha svg { width: 1.3em; height: 1.3em; color: var(--ouro); }

/* contagem regressiva */
.contagem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.55rem, 1vw, .95rem);
}
.contagem--fim { margin-top: clamp(1.6rem, 2.8vw, 2.5rem); }
.contagem li {
  min-width: clamp(4.2rem, 6.2vw, 5.8rem);
  padding: clamp(.7rem, 1vw, 1.05rem) clamp(.5rem, 1vw, .9rem);
  /* no hero as caixas ficam mais justas: são seis lado a lado sobre a foto */
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .3);
}
.contagem--fim li { border-color: var(--linha); background: var(--preto-card); border-radius: var(--r); }
.contagem b {
  display: block;
  font-family: var(--f-titulo);
  font-size: clamp(1.75rem, 1.15rem + 1.75vw, 2.9rem);
  line-height: 1;
  font-weight: 400;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.contagem span {
  display: block;
  margin-top: .3rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
}
.contagem--fim li { background: var(--preto-card); }

.hero__barra .contagem li { padding-block: clamp(.55rem, .8vw, .85rem); border-color: rgba(236, 215, 146, .3); }
/* botões e selo de lote do hero, um pouco mais justos que o padrão */
.hero__acoes .btn { padding-block: .88rem; }
#hero .lote { padding: .32rem .8rem; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.4rem, 2.4vw, 2.35rem);
}

/* selo do lote */
.lote {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(.75rem, 1.1vw, 1rem);
  padding: .35rem .9rem;
  border: 1px solid rgba(236, 215, 146, .3);
  border-radius: var(--r);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-suave);
}
.lote i { opacity: .8; }
.lote i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ouro);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(236, 215, 146, .65); }
  70%  { box-shadow: 0 0 0 10px rgba(236, 215, 146, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 215, 146, 0); }
}

/* faixa de números */
/* ------------------------------------------------------------- 9. CARTÕES */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1.1rem);
}
/* com 7 cartões o último sobraria sozinho numa fileira de 3; aqui ele ocupa a
   fileira inteira. A regra se desliga sozinha se entrar um 8º cartão. */
.cards li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  transition: border-color .2s var(--ease);
}
.card:hover { border-color: var(--linha-forte); }

/* cada cartao leva a sua secao. O .card mora no <a>, entao o <li> precisa virar
   grid para o link esticar e ocupar o cartao inteiro. */
.cards > li { display: grid; }
.card { position: relative; }
/* a seta fica na altura do disco do icone, acima do titulo: e o unico aviso de
   que o cartao e clicavel, entao ela nao some quando o mouse sai */
.card::after {
  content: "";
  position: absolute;
  top: calc(clamp(1.5rem, 2.4vw, 2.1rem) + 1.39rem);
  right: clamp(1.5rem, 2.4vw, 2.1rem);
  width: .62rem; height: .62rem;
  border-top: 2px solid var(--ouro);
  border-right: 2px solid var(--ouro);
  transform: rotate(45deg);
  opacity: .45;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.card:hover::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }

.card__ico {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  color: var(--ouro);
  transition: border-color .2s var(--ease);
}
.card:hover .card__ico { border-color: var(--linha-forte); }
.card__ico svg { width: 1.85rem; height: 1.85rem; }

.card__titulo {
  font-family: var(--f-titulo);
  font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ouro);
}
.card__txt { font-size: .95rem; color: var(--txt-suave); }

/* ------------------------------------------------------------- 10. MURAL DE LOGOS */
.mural + .mural { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.mural__titulo {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.15rem;
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
}
.mural__titulo::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.mural__grade {
  --cols: 5;
  --g: clamp(.6rem, .9vw, .9rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g);
}

.marca {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: clamp(.85rem, 1.4vw, 1.3rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  transition: border-color .2s var(--ease);
}
.marca:hover { border-color: var(--linha-forte); }
.marca img { width: 100%; height: 100%; object-fit: contain; }

/* logo colorido de restaurante ocupa o cartão inteiro */
.marca--cheia { padding: 0; overflow: hidden; }
.marca--cheia img { object-fit: cover; }

/* as 12 marcas de vinho ficam em duas fileiras de 6 */
.mural__grade--seis { --cols: 6; }

@media (max-width: 1200px) { .mural__grade--seis { --cols: 4; } }
@media (max-width: 1080px) { .mural__grade { --cols: 4; } }
@media (max-width: 780px)  { .mural__grade, .mural__grade--seis { --cols: 3; } }
@media (max-width: 520px)  { .mural__grade, .mural__grade--seis { --cols: 2; } }

/* ------------------------------------------------------------- 11. CHEFS */
.chefs {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(.7rem, 1.1vw, 1.05rem);
}
.chef__foto {
  aspect-ratio: 5 / 7;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.chef:hover .chef__foto { border-color: var(--linha-forte); }
.chef__foto img { width: 100%; height: 100%; object-fit: cover; }

.chef__nome {
  margin-top: .8rem;
  font-family: var(--f-titulo);
  font-size: clamp(1rem, .88rem + .38vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--creme);
  text-align: center;
}
.chef__nome span {
  display: block;
  margin-bottom: .25em;
  font-family: var(--f-texto);
  font-size: .55em;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--ouro);
}
@media (max-width: 900px) { .chefs { --cols: 3; } }
@media (max-width: 560px) { .chefs { --cols: 2; } }

/* ------------------------------------------------------------- 12. PROGRAMAÇÃO */
.palco { margin-bottom: clamp(2rem, 3.5vw, 3rem); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.palco img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .palco img { aspect-ratio: 3 / 2; } }

/* --------------------------------------------------- 12b. LINE-UP */
.lineup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(.9rem, 1.4vw, 1.3rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.lineup__dia {
  padding: clamp(1.2rem, 2vw, 1.9rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
}
.lineup__data {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-bottom: clamp(.8rem, 1.2vw, 1.1rem);
  border-bottom: 1px solid var(--linha);
  font-family: var(--f-titulo);
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem);
  letter-spacing: .05em;
  color: var(--ouro);
}
.lineup__data span {
  font-family: var(--f-texto);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-suave);
}

.lineup__lista { display: grid; }
.lineup__lista li {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.3vw, 1.15rem);
  padding-block: clamp(.75rem, 1.1vw, 1rem);
}
.lineup__lista li + li { border-top: 1px solid var(--linha); }

/* espaço reservado para o retrato do artista */
.lineup__foto {
  display: grid;
  place-items: center;
  gap: .15rem;
  flex: 0 0 auto;
  width: clamp(3.4rem, 4.4vw, 4.4rem);
  height: clamp(3.4rem, 4.4vw, 4.4rem);
  border: 1px dashed rgba(236, 215, 146, .28);
  border-radius: 50%;
  background: #0a0a0a;
  text-align: center;
}
.lineup__foto svg { width: 1.5rem; height: 1.5rem; color: var(--oliva); }
.lineup__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.lineup__hora {
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--ouro);
}
.lineup__artista {
  font-family: var(--f-titulo);
  font-size: clamp(1.2rem, 1.05rem + .35vw, 1.5rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.lineup__sub { margin-top: .1rem; font-size: .8rem; color: var(--txt-suave); }

/* os dois concertos Candlelight são o destaque da grade */
.lineup--candlelight .lineup__artista { color: var(--ouro); }
.lineup--candlelight .lineup__foto { border-style: solid; border-color: rgba(236, 215, 146, .45); }

.atributos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}
.atributos li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}
.atributos li + li { border-left: 1px solid var(--linha); }
.atributos svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--ouro); }
.atributos b, .atributos span {
  display: block;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
}
.atributos b { font-weight: 700; color: var(--creme); }
.atributos span { font-weight: 500; color: var(--txt-fraco); }
@media (max-width: 900px) {
  .atributos { grid-template-columns: repeat(2, 1fr); }
  .atributos li:nth-child(3) { border-left: 0; }
  .atributos li:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
@media (max-width: 520px) {
  .atributos { grid-template-columns: 1fr; }
  .atributos li + li { border-left: 0; border-top: 1px solid var(--linha); }
}

/* ------------------------------------------------------------- 12b. FAIXA EM LOOP */
/* as três faixas usam a mesma cor: viram um respiro vermelho recorrente */
.faixa {
  display: flex;
  overflow: hidden;
  border-block: 1px solid rgba(236, 215, 146, .28);
  background: var(--vinho);
  user-select: none;
}

.faixa__fita {
  display: flex;
  flex-shrink: 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(.85rem, 1.4vw, 1.2rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  animation: correr 42s linear infinite;
}
.faixa--rapida .faixa__fita { animation-duration: 30s; }

.faixa__fita li {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-shrink: 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.1rem, .9rem + .85vw, 1.85rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.faixa__fita li::after {
  content: "";
  width: .5em; height: .5em;
  border: 1px solid var(--ouro);
  background: var(--ouro);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Duas faixas inclinadas em sentidos opostos, cruzando no meio da tela. O
   recorte fica no .cruz: cada fita é mais larga que a tela para as pontas
   giradas não deixarem canto vazio. */
.cruz {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: clamp(9rem, 12.5vw, 12.5rem);
  /* sobe sobre o hero para aparecer ainda na primeira tela — a borda das faixas
     já anuncia que tem conteúdo abaixo */
  margin-top: max(-11rem, min(-9.2vw, -11vh));   /* pelo lado maior da tela */
}
.cruz .faixa {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116%;
}
.faixa--diag-a { z-index: 1; transform: translate(-50%, -50%) rotate(-3.2deg); }
.faixa--diag-b {
  /* preta sobre preto: quem separa a faixa do fundo é o fio dourado */
  border-color: rgba(236, 215, 146, .4);
  background: #141414;
  transform: translate(-50%, -50%) rotate(3.2deg);
}
/* a de baixo corre no sentido contrário, senão o cruzamento não lê */
.faixa--diag-b .faixa__fita { animation-direction: reverse; animation-duration: 48s; }
.faixa--diag-b .faixa__fita li { color: var(--creme); }
.faixa--diag-b .faixa__fita li b {
  font-weight: 400;
  font-size: 1.2em;
  color: var(--ouro);
}
.faixa--diag .faixa__fita { padding-block: clamp(.7rem, 1.15vw, 1rem); }

/* em tela estreita a inclinação precisa crescer, senão as duas faixas se
   sobrepõem de ponta a ponta e o X não aparece */
@media (max-width: 720px) {
  .cruz { height: clamp(8.5rem, 30vw, 10.5rem); }
  .cruz .faixa { width: 150%; }
  .cruz .faixa__fita li { font-size: clamp(.9rem, 3.2vw, 1.15rem); }
  .faixa--diag-a { transform: translate(-50%, -50%) rotate(-9deg); }
  .faixa--diag-b { transform: translate(-50%, -50%) rotate(9deg); }
}

@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa__fita { animation: none; }
  .faixa { overflow-x: auto; }
}

/* ------------------------------------------------------- 12c. NAS ALTURAS */
/* Cabeçalho em largura cheia e, abaixo, foto ao lado do que a experiência
   inclui. A imagem NÃO pode ser cortada em nenhuma largura: as marcas dos
   parceiros estão queimadas na base dela — por isso nada de aspect-ratio,
   object-fit ou máscara aqui, e por isso as duas colunas não têm a mesma
   altura (a lista manda, a foto se centra). */
.alturas {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .alturas { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.alturas__foto {
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--preto-card);
}
.alturas__foto img { width: 100%; }

.alturas__inclui .eyebrow { margin-bottom: clamp(.9rem, 1.5vw, 1.35rem); }
/* coluna mais estreita que a do Save the date: disco menor, senão o ícone
   engole o texto do cartão */
.alturas .inclui { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.alturas .inclui__ico { width: clamp(2.8rem, 3.6vw, 3.6rem); height: clamp(2.8rem, 3.6vw, 3.6rem); }
.alturas .inclui__ico svg { width: clamp(1.55rem, 2.15vw, 2.15rem); height: clamp(1.55rem, 2.15vw, 2.15rem); }

/* fecho + botões + nota fecham o bloco em largura cheia */
.alturas__fim {
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linha);
}

.alturas__fecho {
  max-width: 46ch;
  font-family: var(--f-titulo);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--creme);
}

.alturas__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.7rem, 1.2vw, 1rem);
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
}

.alturas__nota {
  display: flex;
  gap: .5rem;
  margin-top: clamp(1rem, 1.6vw, 1.35rem);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--txt-fraco);
}
.alturas__nota i { font-style: normal; color: var(--ouro); }

/* ------------------------------------------------------------- 13. EXPERIÊNCIA */
.exp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) { .exp { grid-template-columns: 1.15fr .85fr; } }

/* as duas frases sao quebradas com <br>: a medida padrao de 54ch cortaria a
   primeira no meio e a quebra manual perderia a graca */
.exp .lead { max-width: 66ch; }

.exp__fotos {
  display: grid;
  /* em telas estreitas 3 colunas viram selos pequenos demais para o rótulo */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: clamp(.6rem, 1vw, .9rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.reel { justify-self: center; width: min(23rem, 100%); }

/* moldura com anel degradê do Instagram */
.reel__anel {
  padding: 3px;
  border-radius: calc(var(--r) + 6px);
  background: conic-gradient(from 210deg,
    #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #d62976, #fa7e1e, #feda75);
}
.reel__topo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  background: var(--preto);
  border-radius: calc(var(--r) + 3px) calc(var(--r) + 3px) 0 0;
}
.reel__avatar {
  width: 2.1rem; height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--preto-card);
  object-fit: contain;
  padding: 3px;
}
.reel__perfil { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.reel__perfil b { font-size: .78rem; font-weight: 700; color: #fff; }
.reel__perfil span { font-size: .65rem; color: var(--txt-fraco); }
.reel__seguir {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .3rem .7rem;
  border-radius: 6px;
  /* azul do Instagram escurecido: no #0095f6 original o texto branco dá 3,17:1 */
  background: #0b6ed0;
  font-size: .62rem;
  font-weight: 700;
  color: #fff;
}
.reel__caixa {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--preto-card);
  overflow: hidden;
}
.reel__acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem .8rem .75rem;
  background: var(--preto);
  border-radius: 0 0 calc(var(--r) + 3px) calc(var(--r) + 3px);
}
.reel__acoes svg { width: 1.35rem; height: 1.35rem; color: #fff; stroke-width: 1.7; }
.reel__acoes .reel__ultimo { margin-left: auto; display: flex; }
.reel__caixa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel__caixa img { width: 100%; height: 100%; object-fit: cover; }
.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
  transition: background-color .2s var(--ease);
}
.reel__play::before {
  content: "";
  position: absolute;
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.reel__play svg { position: relative; width: 1.7rem; height: 1.7rem; margin-left: 4px; color: #111; }
.reel__selo {
  position: absolute;
  top: .7rem; right: .7rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.reel__selo svg { width: .9rem; height: .9rem; }
.reel__play:hover { background: rgba(0, 0, 0, .12); }
.reel__nota { margin-top: .9rem; font-size: .78rem; color: var(--txt-fraco); text-align: center; }
.reel__nota a { color: var(--ouro); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 14. SAVE THE DATE */
/* Proporções tiradas do mockup (1717x916), reescaladas para o wrap de 1400px:
   coluna de texto 40,9% · vão 16,4% · coluna dos cartões 42,7%. */
.save {
  position: relative;
  overflow: hidden;
  /* o mockup tem 916px de altura para 1537 de conteudo: secao curta e apertada */
  padding-block: clamp(3.5rem, 5.5vw, 5.45rem) clamp(2.2rem, 3vw, 2.9rem);
}

/* a taça ocupa a metade esquerda e some antes da coluna dos cartões */
.save__foto {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 51.4%;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.save__foto img {
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: center;
  /* sem isto a foto termina em um corte reto contra o preto */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
}
.save__foto::after {           /* véu para o texto por cima da foto */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.93) 30%, rgba(0,0,0,.7) 48%, rgba(0,0,0,.12) 72%, transparent 100%);
}

.save__in {
  position: relative;
  display: grid;
  grid-template-columns: 40.9% 42.7%;
  justify-content: space-between;
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

.save__txt .titulo { margin-top: clamp(1.1rem, 1.7vw, 1.65rem); }
.save .lead { margin-top: clamp(.8rem, 1.2vw, 1.15rem); }

/* --- caixa da data --------------------------------------------------- */
.data {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.7vw, 1.65rem);
  margin-top: clamp(1.2rem, 1.9vw, 1.8rem);
  padding: clamp(.8rem, 1.25vw, 1.18rem) clamp(1.2rem, 2vw, 1.85rem);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .5);
}
.data__ico { flex: 0 0 auto; width: clamp(2.2rem, 3.3vw, 3.3rem); height: clamp(2.2rem, 3.3vw, 3.3rem); color: var(--ouro); }
.data__dia { display: flex; align-items: baseline; gap: .55em; }
.data__dia b {
  font-family: var(--f-titulo);
  font-size: clamp(2.4rem, 1.5rem + 2.4vw, 3.9rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--ouro);
}
.data__dia span {
  font-family: var(--f-titulo);
  font-size: clamp(1.05rem, .8rem + .75vw, 1.5rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ouro);
}
.data__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-size: clamp(.68rem, .58rem + .2vw, .8rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--creme);
}
.data__sub span { display: inline-flex; align-items: center; gap: .45rem; }
.data__sub i { width: 1px; height: 1.1em; background: var(--linha-forte); }
.data__sub svg { width: 1.25em; height: 1.25em; color: var(--ouro); }

.inclui__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #7d150f;
  background: radial-gradient(circle at 50% 38%, #1e0c0c, #150808 88%);
}
/* `non-scaling-stroke` congela o traço em 1,6px: bom para os ícones pequenos,
   mas deixa os grandes com um fio solto dentro do disco. Aqui o traço volta a
   escalar junto e fica nos ~3px medidos no mockup. */
.inclui__ico svg *, .data__ico * { vector-effect: none; }
.inclui__ico svg, .data__ico { stroke-width: 1.05; }

/* sem isto o svg fica na linha de base e sobra o espaço do descendente embaixo */
.inclui__ico svg { display: block; }

/* --- coluna dos cartões ---------------------------------------------- */
.save__lista { padding-top: clamp(.2rem, .5vw, .55rem); }
.save__lista .eyebrow { margin-bottom: clamp(1rem, 1.7vw, 1.55rem); }

.inclui {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(.7rem, 1vw, .95rem);
}
.inclui li {
  display: flex;
  align-items: flex-start;
  gap: clamp(.8rem, 1.15vw, 1.05rem);
  padding: clamp(.85rem, 1.25vw, 1.15rem);
  border: 1px solid var(--linha);
  border-radius: calc(var(--r) + 2px);
  border-color: rgba(236, 215, 146, .3);
  background: #080909;
}
.inclui__ico { width: clamp(3.1rem, 4.8vw, 4.8rem); height: clamp(3.1rem, 4.8vw, 4.8rem); }
.inclui__ico svg { width: clamp(1.8rem, 3.55vw, 3.55rem); height: clamp(1.8rem, 3.55vw, 3.55rem); color: var(--ouro); }
.inclui b {
  display: block;
  font-family: var(--f-titulo);
  font-size: clamp(1.05rem, .9rem + .3vw, 1.28rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
.inclui div > span {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--txt-suave);
}

@media (max-width: 1100px) {
  .save { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
  .save__in { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 3.5rem); }
  .save__foto { width: 100%; opacity: .5; }
  .save__foto::after { background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.9)); }
  .save .lead { max-width: 60ch; }
}

/* --------------------------------------------- 14b. LINHA DO TEMPO */
/* Duas fileiras de 3, sem rolagem: cada marco é foto + ponto na linha + data +
   local. O fio corre atrás dos pontos e para no primeiro e no último de cada
   fileira, para não sobrar ponta solta. */
.linha {
  --g: clamp(.7rem, 1.1vw, 1.1rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.4rem) var(--g);
}
.linha figure {
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
}
.linha img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* faixa do ponto: a linha atravessa e o ponto a recorta */
.linha__marco {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.1rem;
}
.linha__marco::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: calc(var(--g) / -2);
  height: 1px;
  background: var(--linha-forte);
}
.linha li:nth-child(3n + 1) .linha__marco::before { inset-inline-start: 50%; }
.linha li:nth-child(3n)     .linha__marco::before { inset-inline-end: 50%; }
.linha li:last-child        .linha__marco::before { inset-inline-end: 50%; }
.linha__marco::after {
  content: "";
  position: relative;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 5px var(--preto);
}

.linha__data {
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
}
@media (max-width: 860px) {
  .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha li:nth-child(3n + 1) .linha__marco::before,
  .linha li:nth-child(3n)     .linha__marco::before { inset-inline: calc(var(--g) / -2); }
  .linha li:nth-child(odd)  .linha__marco::before { inset-inline-start: 50%; }
  .linha li:nth-child(even) .linha__marco::before { inset-inline-end: 50%; }
}

.linha__local {
  margin-top: .25rem;
  text-align: center;
  font-family: var(--f-titulo);
  font-size: clamp(1.15rem, 1rem + .35vw, 1.45rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--creme);
}

/* ------------------------------------------------------------- 14c. FAQ */
.faq {
  display: grid;
  gap: clamp(.6rem, .9vw, .8rem);
  max-width: 56rem;
  margin-inline: auto;
}
.faq details {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--linha-forte); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.15rem, 1.8vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-titulo);
  font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--creme);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--ouro);
  border-bottom: 2px solid var(--ouro);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--ouro); }
.faq p {
  padding: 0 clamp(1.15rem, 1.8vw, 1.6rem) clamp(1.15rem, 1.6vw, 1.4rem);
  font-size: .95rem;
  color: var(--txt-suave);
}
.faq a { color: var(--ouro); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 15. INGRESSOS */
.ingressos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(.75rem, 1.2vw, 1.1rem);
  align-items: stretch;
}

.ing {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  transition: border-color .2s var(--ease);
}
.ing:hover { border-color: var(--linha-forte); }
.ing--destaque { border-color: var(--linha-forte); background: var(--vinho); }
.ing--destaque .ing__tag { border-color: var(--ouro); color: var(--ouro); }
.ing--destaque .ing__txt { color: rgba(255, 255, 255, .82); }
.ing--destaque .ing__precos { border-color: rgba(236, 215, 146, .38); }
.ing--destaque .ing__precos dt { color: rgba(255, 255, 255, .7); }

.ing__tag {
  align-self: flex-start;
  padding: .32rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-suave);
}
.ing__nome {
  margin-top: 1.1rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem);
  line-height: 1.02;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}
.ing__txt { flex: 1; margin-top: .8rem; font-size: .9rem; color: var(--txt-suave); }
.ing__precos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--linha);
}
.ing__precos dt {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-fraco);
}
.ing__precos dd {
  margin-top: .15rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
  line-height: 1;
  color: var(--ouro);
}
.ing .btn {
  margin-top: 1.5rem;
  width: 100%;
  /* o cartão é estreito: aperta o rótulo em vez de deixá-lo quebrar em duas linhas */
  padding-inline: 1rem;
  font-size: clamp(.7rem, .55vw + .38rem, .8rem);
  letter-spacing: clamp(.06em, .5vw - .05em, .16em);
  white-space: nowrap;
}
.ing__nota {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  font-size: .8rem;
  color: var(--txt-fraco);
  text-align: center;
}
.ing__nota + .ing__nota { margin-top: .55rem; }
.ing__nota i { font-style: normal; margin-right: .35rem; color: var(--ouro); }

/* ------------------------------------------------------------- 16. PASSAPORTE */
/* o Passaporte era uma seção inteira dizendo o mesmo que o Save the date;
   sobrou daqui o bloco de data, agora dentro dele */

/* ------------------------------------------------------------- 16b. CTA DE SEÇÃO */
.cta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linha);
  text-align: center;
}
.cta-linha p {
  font-family: var(--f-titulo);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--creme);
}
.cta-linha p b { color: var(--ouro); font-weight: 400; }

/* ---------------------------------------------------- 16c. NOTA DE SECAO */
/* ressalva no pe de uma secao, no mesmo tom da nota dos Ingressos */
.sec-nota {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--txt-fraco);
  text-align: center;
}
.sec-nota i { font-style: normal; margin-right: .35rem; color: var(--ouro); }

/* ------------------------------------------------------------- 17. FECHAMENTO */
/* Proporções do mockup (1672x941), normalizadas pela largura da seção:
   conteúdo 48,2% · arte do sax 26% à esquerda · foto da taça 26% à direita. */
.fim {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 4.9rem) clamp(1.5rem, 2.4vw, 2.9rem);
  background: var(--preto);
  text-align: center;
}
/* clarão de palco no alto, como no mockup */
.fim::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(236, 215, 146, .09), transparent 72%);
  pointer-events: none;
}

.fim__arte {
  position: absolute;
  inset-block: 0;
  width: 26%;
  pointer-events: none;
}
.fim__arte img {
  width: 100%; height: 100%; object-fit: cover;
  /* o preto da arte não é o mesmo preto da seção e deixava um degrau vertical;
     em `screen` o preto vira neutro e só o traço dourado soma */
  mix-blend-mode: screen;
}
.fim__arte--esq { left: 0; }
.fim__arte--esq img { object-position: right center; }
.fim__arte--dir { right: 0; }
.fim__arte--dir img { object-position: left center; }

.fim__in {
  position: relative;
  width: min(48.2%, var(--wrap));
  display: grid;
  justify-items: center;
}

/* mesmo caso dos discos do Save the date: com `non-scaling-stroke` o traço fica
   preso em 1,6px e some dentro de um ícone grande */
.fim__info svg * { vector-effect: none; }
.fim .eyebrow { margin-top: clamp(1rem, 1.9vw, 1.9rem); }
.fim .titulo {
  margin-top: clamp(.6rem, 1vw, 1rem);
  max-width: none;
  font-size: clamp(2.4rem, .3rem + 5.9vw, 7.1rem);
  line-height: 1.06;
}
.fim .lead { margin-top: clamp(.9rem, 1.5vw, 1.5rem); max-width: 44ch; font-size: clamp(.95rem, .8rem + .35vw, 1.15rem); }

/* três barrinhas douradas separando os blocos */

/* faixa de data, horário e local */
.fim__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.2rem, 2vw, 2rem);
}
.fim__info li + li { border-left-color: rgba(236, 215, 146, .22); }
.fim__info li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, .95vw, .95rem);
  padding: clamp(.9rem, 1.3vw, 1.3rem) clamp(1rem, 1.5vw, 1.5rem);
  text-align: left;
}
.fim__info li + li { border-left: 1px solid var(--linha); }
.fim__info svg { flex: 0 0 auto; width: clamp(1.25rem, 1.55vw, 1.55rem); height: clamp(1.25rem, 1.55vw, 1.55rem); color: var(--ouro); stroke-width: 1.5; }
.fim__info span {
  display: block;
  font-size: clamp(.66rem, .5rem + .3vw, .82rem);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--creme);
}
.fim__info b { display: block; font-weight: 700; }

/* a contagem do fechamento segue a mesma caixa do resto do projeto; só os
   algarismos vão para o ouro */
.fim .contagem--fim {
  gap: clamp(.55rem, 1vw, .95rem);
  margin-top: clamp(1.2rem, 2vw, 2rem);
}
.fim .contagem--fim b { color: var(--ouro); }

.fim__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 1rem clamp(.8rem, 1.15vw, 1.15rem);
  margin-top: clamp(1.1rem, 1.8vw, 1.8rem);
}
.fim__acoes .btn { min-width: min(100%, 15rem); }

.fim__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: clamp(1rem, 1.7vw, 1.7rem);
  font-size: .8rem;
  color: var(--txt-suave);
}
.fim__nota svg { width: 1.15em; height: 1.15em; color: var(--ouro); }

@media (max-width: 1100px) {
  .fim__in { width: min(100%, 34rem); }
  .fim__arte { width: 30%; opacity: .45; }
}
@media (max-width: 620px) {
  .fim__arte { display: none; }
  .fim__info li { flex: 1 1 100%; justify-content: center; }
  .fim__info li + li { border-left: 0; border-top: 1px solid var(--linha); }
}

/* ------------------------------------------------------------- 18. RODAPÉ */
.rodape {
  background: var(--preto);
  border-top: 1px solid var(--linha);
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  font-size: .88rem;
}
.rodape__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.rodape__logo img { width: 170px; }
.rodape__logo p { margin-top: 1rem; font-size: .82rem; color: var(--txt-fraco); }
.rodape h2 {
  margin-bottom: 1rem;
  font-family: var(--f-titulo);
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
}
.rodape li { margin-bottom: .55rem; color: var(--txt-suave); }
.rodape a:hover { color: var(--ouro); }
/* ressalva das atracoes a parte, entre as colunas e a linha de credito */
.rodape__nota {
  display: flex;
  gap: .5rem;
  padding-bottom: clamp(1.4rem, 2.4vw, 2rem);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--txt-fraco);
}
.rodape__nota i { font-style: normal; color: var(--ouro); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--linha);
  font-size: .76rem;
  color: var(--txt-fraco);
}
.rodape__base strong { color: var(--creme); font-weight: 600; }

/* ------------------------------------------------------------- 19. BARRA FIXA */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--preto);
  border-top: 1px solid var(--ouro);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.barra.is-visivel { transform: translateY(0); }
.barra div { display: flex; flex-direction: column; line-height: 1.3; }
.barra strong {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--creme);
}
.barra span { font-size: .68rem; letter-spacing: .06em; color: var(--ouro); }
@media (min-width: 1001px) { .barra { display: none; } }
/* Tela baixa (notebook 1366x768 e afins): o hero não cabe em 100svh e empurra
   a .cruz para fora da dobra. Aqui o ritmo interno encolhe junto com a altura,
   para sobrar espaço e a faixa aparecer. */
@media (max-height: 940px) {
  .hero {
    padding-block: clamp(5.4rem, 8.5vh, 7rem)
                   calc(clamp(1.8rem, 3.2vh, 2.75rem) + min(11rem, 9.2vw) * .9);
  }
  .hero__titulo { margin-top: clamp(.9rem, 2.2vh, 1.9rem); font-size: clamp(2.6rem, .95rem + 4.8vw, 5.6rem); }
  .hero__barra  { margin-top: clamp(1.1rem, 2.6vh, 2.2rem); }
  .hero__acoes  { margin-top: clamp(1.1rem, 2.6vh, 2.2rem); }
  .hero .lote   { margin-top: clamp(.8rem, 1.8vh, 1.4rem); }
  .hero__tag    { font-size: .62rem; }
}

@media (max-width: 480px) {
  /* aperta o rótulo para "Garanta seu ingresso" caber em uma linha só */
  .btn { padding-inline: 1.15rem; letter-spacing: .1em; }
  .barra { gap: .65rem; padding-inline: 1rem; }
  .barra strong { font-size: .68rem; }
  .barra span { font-size: .6rem; }
  .barra .btn { padding: .72rem 1rem; font-size: .62rem; letter-spacing: .08em; white-space: nowrap; }
}
@media (max-width: 1000px) { .rodape__base { padding-bottom: 4.75rem; } }

/* -------------------------------------------- 19b. PÁGINAS INTERNAS */
/* Política de privacidade e 404. Sem hero de foto no topo, o cabeçalho precisa
   nascer sólido: o main.js só o escurece depois de 40px de rolagem. */
.topo--solido { background: var(--preto); border-bottom-color: var(--linha); }

.capa {
  padding-block: clamp(7.5rem, 6rem + 6vw, 11rem) clamp(2.75rem, 4.5vw, 4.5rem);
  background: var(--preto-alt);
  border-bottom: 1px solid var(--linha);
}
.capa .titulo { margin-top: 1.15rem; }
.capa .lead   { margin-top: 1.25rem; }

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-fraco);
}
.trilha li { display: flex; align-items: center; gap: .45rem .8rem; }
.trilha li + li::before {
  content: "";
  flex-shrink: 0;
  width: .32rem; height: .32rem;
  background: var(--linha-forte);
  transform: rotate(45deg);
}
.trilha a:hover { color: var(--ouro); }
.trilha [aria-current] { color: var(--creme); }

.capa__data {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding: .55rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-suave);
}
.capa__data svg { width: 1.15em; height: 1.15em; color: var(--ouro); }

/* coluna de leitura — texto corrido pede medida curta, não os 1400px do .wrap */
.pagina { max-width: 82ch; margin-inline: auto; }

/* --- índice da página */
.sumario {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.35rem, 2.2vw, 2rem);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
}
.sumario__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .55rem clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: 1.25rem;
}
.sumario__lista a {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .9rem;
  color: var(--txt-suave);
}
.sumario__lista a:hover { color: var(--ouro); }
.sumario__lista b {
  font-family: var(--f-titulo);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ouro);
}

/* --- texto corrido */
.texto > * + *  { margin-top: 1.15rem; }
.texto p        { color: var(--txt-suave); }
.texto strong   { color: var(--creme); font-weight: 700; }
.texto p a, .texto .lista a, .texto .aviso a, .texto p button[data-lgpd] {
  color: var(--ouro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.texto p a:hover, .texto .lista a:hover, .texto .aviso a:hover,
.texto p button[data-lgpd]:hover { color: #fff; }

.texto h2 {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  font-family: var(--f-titulo);
  font-size: clamp(1.45rem, 1.15rem + .95vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
/* o numeral acompanha o corpo do texto e encolhe junto: ouro para passar no AA
   mesmo na menor escala (o vinho-claro so passaria como texto grande) */
.texto h2 span { flex-shrink: 0; font-size: .72em; color: var(--ouro); }

.lista { display: grid; gap: .7rem; }
.lista li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--txt-suave);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .42rem; height: .42rem;
  border: 1px solid var(--ouro);
  background: var(--ouro);
  transform: rotate(45deg);
}

.aviso {
  display: flex;
  gap: .9rem;
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--preto-card);
  font-size: .92rem;
  color: var(--creme);
}
.aviso svg { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--ouro); }

/* --- canais de contato do titular */
.canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(.85rem, 1.5vw, 1.25rem);
}
.canais a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--preto-card);
  transition: border-color .2s var(--ease);
}
.canais a:hover { border-color: var(--linha-forte); }
.canais svg { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--ouro); }
.canais b {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-fraco);
}
.canais span { display: block; margin-top: .15rem; font-size: .95rem; color: var(--creme); }

/* -------------------------------------------- 19c. PÁGINA 404 */
.erro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 11.2vh, 9.5rem) clamp(3rem, 6vh, 5rem);
  background: var(--preto);
  overflow: hidden;
  text-align: center;
}
.erro__foto { position: absolute; inset: 0; }
/* o <picture> precisa de altura própria, senão o height:100% da imagem vira auto
   e a foto para no meio da seção */
.erro__foto picture { display: block; height: 100%; }
.erro__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.erro__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.8) 42%, rgba(0,0,0,.88) 78%, #000 100%);
}
.erro__in { position: relative; display: grid; justify-items: center; }

/* o número é textura de fundo, não informação: quem lê é o h1 abaixo */
.erro__num {
  margin-top: clamp(1.1rem, 2vw, 1.9rem);
  font-family: var(--f-titulo);
  font-size: clamp(6rem, 2rem + 17vw, 15rem);
  line-height: .82;
  letter-spacing: .06em;
  color: var(--vinho-claro);
}
@supports (-webkit-text-stroke: 1px #000) {
  .erro__num { color: transparent; -webkit-text-stroke: clamp(2px, .35vw, 4px) var(--linha-forte); }
}

.erro .titulo    { margin-top: clamp(.5rem, 1.2vw, 1.1rem); }
.erro .titulo em { color: var(--ouro); }
.erro .lead      { margin-inline: auto; }

.erro__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.75rem, 1.4vw, 1.15rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.erro__acoes .btn { min-width: min(100%, 15rem); }

.erro__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem clamp(1rem, 2vw, 2rem);
  width: min(100%, 46rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--linha);
}
.erro__links a {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--creme);
}
.erro__links a:hover { color: var(--ouro); }

/* -------------------------------------------- 19e. BANNER DE COOKIES (LGPD) */
/* Enquanto o aviso está na tela a .barra fica recolhida: duas barras fixas
   empilhadas no rodapé do celular não cabem (ver o lgpdAberto no main.js). */
.lgpd {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  padding: clamp(.7rem, 1.8vw, 1.4rem)
           clamp(.7rem, 1.8vw, 1.4rem)
           calc(clamp(.7rem, 1.8vw, 1.4rem) + env(safe-area-inset-bottom));
  transform: translateY(125%);
  transition: transform .4s var(--ease);
}
.lgpd.is-visivel { transform: translateY(0); }

.lgpd__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(72rem, 100%);
  margin-inline: auto;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.9rem);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--preto-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.lgpd__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  color: var(--ouro);
}
.lgpd__ico svg { width: 1.6rem; height: 1.6rem; }

.lgpd__txt { flex: 1 1 22rem; min-width: 0; }
.lgpd__txt strong {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--f-titulo);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro);
}
.lgpd__txt p { font-size: .85rem; line-height: 1.6; color: var(--txt-suave); }
.lgpd__txt a { color: var(--ouro); text-decoration: underline; text-underline-offset: 3px; }
.lgpd__txt a:hover { color: #fff; }

.lgpd__acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.lgpd__acoes .btn { flex: 1 1 auto; min-width: 9rem; }
/* vinho chapado: o brilho girante do .btn--acao é assinatura do "Garanta seu
   ingresso" e não pode ser gasto num aviso de cookie */
.lgpd__sim { background: var(--vinho); border-color: rgba(236, 215, 146, .38); color: #fff; }
.lgpd__sim:hover { background: var(--vinho-alto); border-color: var(--ouro); }
.lgpd__nao { border-color: var(--linha); color: var(--creme); }
.lgpd__nao:hover { border-color: var(--linha-forte); color: var(--ouro); }

@media (max-width: 720px) {
  .lgpd__in { align-items: flex-start; }
  .lgpd__ico { display: none; }
  .lgpd__acoes { width: 100%; }
  .lgpd__acoes .btn { flex: 1 1 0; min-width: 0; }
}
/* lado a lado "So os necessarios" quebra em duas linhas: empilhado cada rotulo
   cabe inteiro e os dois botoes ficam do mesmo tamanho */
@media (max-width: 480px) {
  .lgpd__acoes { flex-direction: column; }
  .lgpd__acoes .btn { width: 100%; }
}

/* -------------------------------------------- 19d. LEGAL NO RODAPÉ */
.rodape__legal { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.rodape__legal li { margin-bottom: 0; }
.rodape__legal a,
.rodape__legal button { text-decoration: underline; text-underline-offset: 3px; }
.rodape__legal button:hover { color: var(--ouro); }

/* ------------------------------------------------------------- 20. REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topo, .barra, .reel__play { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}