/* ==========================================================
   Vivere Eventi - Estilos do site
   ========================================================== */

:root {
    /* Paleta champanhe: os destaques do site seguem o dourado nobre.
       (os nomes antigos foram mantidos para não mexer no resto do CSS;
        laranja/amarelo originais do logo: #E8832A / #F5C518) */
    --laranja:        #C49A45;   /* ouro          */
    --ambar:          #D6AE5E;   /* ouro claro    */
    --amarelo:        #E8CC8A;   /* champanhe     */
    /* dourado nobre dos botões de compra (mais sóbrio que o amarelo) */
    --ouro-escuro:    #A97B26;
    --ouro:           #C99A3E;
    --ouro-claro:     #E2BF74;
    --champanhe:      #E8CC8A;
    /* champanhe suave dos botões: claro, com um brilho discreto */
    /* Botões "black tie": fundo grafite com letra champanhe;
       ao passar o mouse invertem (fundo champanhe, letra grafite) */
    --botao-ouro:     #1F1A16;
    --botao-ouro-hover: #E8CC8A;
    --sombra-ouro:    0 10px 22px -14px rgba(20, 16, 12, .55);
    --mesa:           #FFFFFF;   /* reserva de mesa: branco, igual às ondas do parallax */
    --mesa-hover:     #F6F1E7;
    --esgotado-fundo: #234962;   /* ingressos/mesas esgotados */
    --esgotado-texto: rgba(255, 255, 255, .82);
    --laranja-texto:  #8A6420;  /* ouro profundo, legível em fundo claro */

    /* Neutros */
    --tinta:          #1A1714;
    --texto:          #2B2622;
    --texto-suave:    #6E6761;
    --borda:          #E6E2DC;
    --fundo-suave:    #F3F1ED;
    --branco:         #FFFFFF;
    --verde-status:   #1F9D55;

    /* Tons da noite (seção de eventos) */
    --noite:          #14100D;
    --card-noite:     #1D1814;
    --linha-noite:    rgba(255, 240, 220, .09);

    /* Tons claros (seções depois do vídeo) */
    --cinza-claro:    #F1EFEC;
    --linha-clara:    #E4DFD8;

    /* Tipografia */
    --fonte-titulo: 'Cormorant Garamond', 'Georgia', serif;   /* títulos e números: serifa clássica */
    --fonte-texto:  'Manrope', 'Segoe UI', sans-serif;
    --fonte-elegante: 'Cormorant Garamond', 'Georgia', serif;

    --largura-max: 1240px;
    --raio: 12px;
}

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

/* Tipografia refinada: títulos sem palavra solitária na última linha */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; hanging-punctuation: first; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
    width: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 24px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ==========================================================
   TOPO COM VÍDEO
   ========================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--branco);
    overflow: hidden;
    background: var(--tinta) url('../img/hero-poster-show.jpg') center / cover no-repeat;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Escurece o vídeo para o logo e o menu ficarem legíveis */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(20, 16, 12, .78) 0%, rgba(20, 16, 12, .25) 28%,
                                rgba(20, 16, 12, .30) 62%, rgba(20, 16, 12, .85) 100%),
        rgba(20, 16, 12, .30);
}

/* ---------- Menu principal ---------- */
.menu {
    position: absolute;
    top: 34px;                 /* menu um pouco mais baixo sobre o vídeo */
    left: 0; right: 0;
    z-index: 10;
    /* tarja translúcida: largura total até 1920px, centralizada */
    max-width: 1920px;
    margin: 0 auto;
    background: linear-gradient(90deg,
        rgba(18, 14, 11, 0) 0%,
        rgba(18, 14, 11, .2) 18%,
        rgba(18, 14, 11, .2) 82%,
        rgba(18, 14, 11, 0) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background .3s, padding .3s;
}
/* fios dourados finos acima e abaixo da tarja */
.menu::before,
.menu::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 174, 94, .3) 30%, rgba(232, 204, 138, .3) 70%, transparent);
    pointer-events: none;
}
.menu::before { top: 0; }
.menu::after  { bottom: 0; }
.menu__inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 76px;
}

/* Logo pequeno: só aparece quando o menu fica fixo ao rolar */
.menu__logo {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.menu__logo img { width: 96px; height: auto; }

.menu__lista {
    display: flex;
    align-items: center;
    gap: 64px;
}
/* losango dourado discreto entre os itens */
.menu__lista li { position: relative; }
.menu__lista li + li::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 50%;
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, var(--amarelo), var(--laranja));
    transform: translateY(-50%) rotate(45deg);
    opacity: .85;
}
.menu__lista a {
    position: relative;
    display: block;
    padding: 10px 0 14px;
    font-family: var(--fonte-texto);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;   /* menu em letras maiúsculas */
    text-decoration: none;
    color: rgba(255, 255, 255, .9);
    transition: color .25s ease;
}
.menu__lista a:hover,
.menu__lista a.ativo { color: #fff; }
/* Traço laranja embaixo do item ativo / ao passar o mouse */
.menu__lista a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amarelo) 20%, var(--laranja) 80%, transparent);
    transform: translateX(-50%);
    transition: width .35s ease;
}
.menu__lista a:hover::after,
.menu__lista a.ativo::after { width: 100%; }

/* Menu fixo ao rolar a página */
.menu.menu--fixo {
    position: fixed;
    top: 0; left: 0; right: 0;
    max-width: 1920px;            /* mesma largura da tarja do topo */
    margin: 0 auto;
    background: rgba(26, 23, 20, .86);   /* grafite translúcido */
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    animation: menu-desce .3s ease;
}
.menu--fixo .menu__inner { min-height: 76px; }   /* mesma altura da tarja do topo */
.menu--fixo::before { display: none; }
.menu--fixo .menu__logo { opacity: 1; pointer-events: auto; }

@keyframes menu-desce {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Botão do menu no celular */
.menu__botao {
    display: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    padding: 11px 9px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.menu__botao span:not(.sr-only) {
    display: block;
    height: 2px;
    margin: 4px 0;
    background: var(--branco);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.menu__botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu__botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu__botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Logo central ---------- */
.hero__conteudo {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 150px 24px 110px;
}
/* Logo em camadas (animação de entrada) */
.hero__logo {
    position: relative;
    width: clamp(260px, 36vw, 520px);
    aspect-ratio: 1096 / 716;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .45));
}
.logo-camada {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* 1) o nome "Vivere" se escreve da esquerda para a direita */
.logo-camada--vivere {
    animation: logo-escreve 1.6s .3s cubic-bezier(.65, 0, .35, 1) both;
}
/* 2) as folhas brotam, uma de cada vez */
.logo-camada--folha1,
.logo-camada--folha2,
.logo-camada--folha3 {
    transform-origin: 72% 42%;   /* base das folhas */
    animation: folha-brota .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.logo-camada--folha1 { animation-delay: 1.55s; }
.logo-camada--folha2 { animation-delay: 1.75s; }
.logo-camada--folha3 { animation-delay: 1.95s; }
/* 3) "EVENTI" aparece por último */
.logo-camada--eventi {
    animation: sobe-suave .9s 2.1s ease-out both;
}

@keyframes logo-escreve {
    from { clip-path: inset(0 100% 0 0); opacity: .2; }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes folha-brota {
    from { opacity: 0; transform: scale(.2) rotate(-25deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes sobe-suave {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.hero__frase {
    margin-top: 28px;
    max-width: 42ch;
    font-family: var(--fonte-elegante);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
    animation: sobe-suave 1s 2.4s ease-out both;
}
.hero .botao {
    animation: logo-entra 1.2s .45s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes logo-entra {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Botão principal */
.botao {
    display: inline-block;
    margin-top: 32px;
    padding: 15px 34px;
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    color: var(--tinta);
    background: var(--ambar);
    border-radius: 999px;
    transition: background .2s, transform .2s;
}
.botao:hover { background: var(--amarelo); transform: translateY(-2px); }

/* Indicador para rolar */
.hero__rolar {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    width: 28px; height: 46px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
}
.hero__rolar span {
    position: absolute;
    left: 50%; top: 9px;
    width: 4px; height: 9px;
    margin-left: -2px;
    background: var(--branco);
    border-radius: 2px;
    animation: rolar 1.8s infinite;
}
@keyframes rolar {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(14px); }
}

/* ==========================================================
   EVENTOS CONFIRMADOS (fundo claro: branco e cinza)
   ========================================================== */
.eventos {
    position: relative;
    padding: 100px 0 120px;
    scroll-margin-top: 60px;
    color: var(--texto);
    background: linear-gradient(180deg, var(--branco) 0%, var(--cinza-claro) 100%);
}

.eventos__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--linha-clara);
}

.eventos__chamada {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--laranja-texto);
}
/* fio dourado antes da chamada */
.eventos__chamada::before {
    content: '';
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--laranja), var(--amarelo));
}

.eventos__titulo {
    font-family: var(--fonte-elegante);
    font-size: clamp(1.9rem, 2.9vw, 2.6rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .005em;
    color: var(--tinta);
}
.eventos__sub {
    padding-bottom: 4px;
    font-family: var(--fonte-elegante);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--laranja-texto);
}

/* Sem eventos cadastrados: só o título, com altura enxuta */
.eventos.eventos--vazia { padding: 80px 0 56px; }
.eventos--vazia .eventos__cabecalho { margin-bottom: 0; }
@media (max-width: 760px) { .eventos.eventos--vazia { padding: 56px 0 40px; } }

/* ---------- Elementos comuns ---------- */
.selo {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.selo--novo     { color: var(--tinta); background: var(--amarelo); }
.selo--ultimos  { color: var(--champanhe); background: rgba(26, 23, 20, .88); }
.selo--esgotado { color: var(--tinta); background: rgba(255, 255, 255, .94); }
.selo--ultimos::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--branco);
    animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

.contagem {
    display: inline-block;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #6E5019;
    background: #F8F0DF;
    border: 1px solid #E6D2A6;
    border-radius: 999px;
}

.seta {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s;
}

.esgotado img { filter: grayscale(.9) brightness(.85); }

/* ==========================================================
   CAIXAS EM DESTAQUE (foto emoldurada + caixa da data)
   ========================================================== */
.grade-destaques {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 72px 110px;
    padding-right: 48px;           /* espaço para a caixa da data que sai da foto */
}

.destaque__midia { position: relative; }

/* Moldura branca grossa, como foto impressa */
.destaque__moldura {
    position: relative;
    display: block;
    padding: 14px;
    background: var(--branco);
    box-shadow: 0 30px 60px -20px rgba(40, 30, 20, .28), 0 2px 8px rgba(40, 30, 20, .06);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
}
.destaque__moldura img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.destaque__moldura .selo { top: 30px; left: 30px; }
.destaque:hover .destaque__moldura {
    transform: translateY(-6px);
    box-shadow: 0 40px 70px -24px rgba(40, 30, 20, .34), 0 2px 8px rgba(40, 30, 20, .06);
}

/* Caixa menor, à direita da foto, com a data */
.destaque__data {
    position: absolute;
    z-index: 3;
    right: -48px;
    bottom: -44px;
    display: block;
    width: 138px;
    padding: 10px;
    background: var(--branco);
    box-shadow: 0 22px 40px -14px rgba(40, 30, 20, .35);
}
.destaque__data-interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px 14px;
    text-align: center;
    color: var(--branco);
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 174, 94, .28), transparent 65%),
        var(--tinta);
}
.destaque__semana {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amarelo);
}
.destaque__dia {
    margin: 2px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 4rem;
    font-weight: 600;
    line-height: .9;
    font-variant-numeric: lining-nums;
}
.destaque__mes {
    font-family: var(--fonte-elegante);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    color: #F6EFE6;
}
.destaque__hora {
    margin-top: 10px;
    padding-top: 8px;
    width: 70%;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .8);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

/* Texto do destaque */
.destaque__info {
    padding: 64px 70px 0 6px;      /* abre espaço abaixo da caixa da data */
}
.destaque__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--laranja-texto);
}
.destaque__meta > span:not(.contagem) + span:not(.contagem)::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    margin: 0 12px 2px 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}
.destaque__titulo {
    margin-top: 10px;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.85rem, 2.7vw, 2.4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.005em;
    color: var(--tinta);
}
.destaque__titulo a { text-decoration: none; }
.destaque__titulo a:hover { color: var(--laranja-texto); }
.destaque__descricao {
    margin-top: 12px;
    max-width: 52ch;
    font-size: .98rem;
    line-height: 1.65;
    color: var(--texto-suave);
}
.destaque__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 24px;
}
.destaque__preco { display: flex; flex-direction: column; line-height: 1.15; }
.destaque__preco span { font-size: .78rem; color: var(--texto-suave); }
.destaque__preco strong {
    font-family: var(--fonte-titulo);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--tinta);
}

.botao-ingresso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--champanhe);
    background: var(--botao-ouro);
    box-shadow: var(--sombra-ouro);
    transition: transform .2s, box-shadow .2s, background .3s, color .3s;
}
.botao-ingresso:hover { transform: translateY(-2px); color: var(--tinta); background: var(--botao-ouro-hover); box-shadow: 0 12px 24px -14px rgba(120, 92, 40, .45); }
.botao-ingresso:hover .seta { transform: translateX(3px); }
.esgotado .botao-ingresso,
.botao-ingresso.is-esgotado {
    color: var(--esgotado-texto);
    background: var(--esgotado-fundo);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}
.esgotado .botao-ingresso .seta,
.botao-ingresso.is-esgotado .seta { display: none; }

/* Preços lado a lado (ingresso | mesa) e botões */
.destaque__precos { display: flex; align-items: flex-end; gap: 26px; }
.destaque__preco + .destaque__preco { padding-left: 26px; border-left: 1px solid var(--linha-clara); }
.destaque__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.destaque__botoes:has(.botao-mesa) { width: 100%; max-width: 520px; }
/* com ingresso + mesa os dois botões ficam lado a lado, mais compactos */
.destaque__botoes:has(.botao-mesa) a {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: .76rem;
    letter-spacing: .1em;
    white-space: nowrap;
}
@media (max-width: 420px) { .destaque__botoes:has(.botao-mesa) a { flex-basis: 100%; } }

/* Botão secundário "Reservar mesa": contorno escuro, preenche ao passar o mouse */
.botao-mesa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinta);
    background: var(--mesa);
    border: 1px solid #E2DACB;
    box-shadow: 0 10px 22px -14px rgba(150, 100, 20, .55);
    transition: transform .2s, background .2s, border-color .2s;
}
.botao-mesa:hover { transform: translateY(-2px); background: var(--mesa-hover); border-color: #D6CBB6; }
.botao-mesa:hover .seta { transform: translateX(3px); }
.botao-mesa.is-esgotado { color: var(--esgotado-texto); background: var(--esgotado-fundo); border-color: var(--esgotado-fundo); box-shadow: none; pointer-events: none; }
.botao-mesa.is-esgotado .seta { display: none; }

/* ==========================================================
   CAIXAS DOS SHOWS (foto + texto + faixa lateral)
   ========================================================== */
.grade-shows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 40px;
    margin-top: 110px;
}

.show {
    position: relative;
    padding-right: 42px;           /* a faixa lateral sai para fora da caixa */
}

.show__caixa {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--branco);
    box-shadow: 0 18px 40px -18px rgba(40, 30, 20, .25);
    transition: box-shadow .35s, transform .35s;
}
.show:hover .show__caixa { transform: translateY(-4px); box-shadow: 0 28px 50px -20px rgba(40, 30, 20, .32); }

.show__midia {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #EDE9E4;
}
.show__midia img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.show:hover .show__midia img { transform: scale(1.06); }
.show__midia::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(18, 14, 11, .7) 100%);
}
.show__legenda {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 18px;
    font-family: var(--fonte-elegante);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;
    color: var(--branco);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.show__corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 22px 60px 24px 24px;  /* direita: não fica embaixo da faixa */
}
.show__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--tinta);
}
.show__titulo a { text-decoration: none; }
.show__titulo a:hover { color: var(--laranja-texto); }
.show__corpo .contagem { margin-top: 8px; }
.show__descricao {
    margin-top: 10px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.show__mais {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--laranja-texto);
}
.show__mais:hover .seta { transform: translateX(3px); }

/* Barra de ação no rodapé da caixa */
.show__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 62px;
    padding: 0 60px 0 24px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--champanhe);
    background: var(--botao-ouro);
    transition: background .3s, color .3s;
}
.show__cta:not(.show__cta--mesa):not(.is-esgotado):hover { color: var(--tinta); background: var(--botao-ouro-hover); }
.show__cta:hover .seta { transform: translateX(4px); }
/* esgotado: azul petróleo */
.esgotado .show__cta,
.show__cta.is-esgotado {
    color: var(--esgotado-texto);
    background: var(--esgotado-fundo);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}
.esgotado .show__cta .seta,
.show__cta.is-esgotado .seta { display: none; }
.esgotado .faixa__preco strong {
    color: rgba(232, 204, 138, .55);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.esgotado .faixa__preco span { color: rgba(255, 255, 255, .45) !important; }
/* barra de reserva de mesa */
.show__cta--secundario { border-top: 1px solid rgba(255, 255, 255, .1); }
.show__cta--mesa {
    color: var(--tinta);
    background: var(--mesa);
    border-top: 1px solid #ECE6DB;
}
.show__cta--mesa:not(.is-esgotado):hover { background: var(--mesa-hover); }
.esgotado .show__cta--mesa,
.show__cta--mesa.is-esgotado {
    color: var(--esgotado-texto);
    background: var(--esgotado-fundo);
}

/* Faixa lateral de informações */
.show__faixa {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 72px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 84px;
    background: var(--branco);
    box-shadow: -10px 14px 30px -12px rgba(40, 30, 20, .3);
}
.show--sem-preco .show__faixa { bottom: 62px; }   /* sem preço: termina acima da barra */

.faixa__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    text-align: center;
    border-bottom: 1px solid #EEEAE5;
}
.faixa__item:last-child { border-bottom: 0; }
.faixa__item svg {
    width: 26px; height: 26px;
    fill: none; stroke: #4A443E; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.faixa__item strong {
    font-family: var(--fonte-titulo);
    font-size: 2.05rem;
    font-weight: 600;
    line-height: .95;
    font-variant-numeric: lining-nums;
    color: var(--tinta);
}
.faixa__item span {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8C847D;
}
.faixa__item--data strong { color: var(--laranja-texto); }

/* Preço: só aparece quando o evento tem ingresso à venda */
.faixa__preco {
    border-left: 1px solid rgba(232, 204, 138, .2);
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 62px;                  /* mesma altura da barra de ação */
    color: var(--branco);
    background: var(--tinta);
}
.faixa__preco strong {
    font-family: var(--fonte-texto);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--champanhe);
}
/* segundo valor (mesa): mesma caixa escura com o preço em champanhe */
.faixa__preco--secundario { border-top: 1px solid rgba(255, 255, 255, .08); }
.faixa__preco span {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* ==========================================================
   EXPERIÊNCIA VIVERE (faixa com parallax)
   ========================================================== */
.experiencia {
    position: relative;
    isolation: isolate;
    clip-path: inset(0);          /* "janela": o vídeo fixo só aparece dentro da faixa */
    --recorte: clamp(64px, 10.5vw, 200px);  /* altura das ondas do topo */
    padding: calc(var(--recorte) + 16px) 0 72px;
    scroll-margin-top: 0;
    color: var(--branco);
    background: var(--noite);
}
/* recorte em ondas no topo: continua o fundo da agenda sobre o vídeo */
.experiencia__recorte {
    position: absolute;
    top: -1px; left: 0;
    z-index: 1;
    width: 100%;
    height: var(--recorte);
    pointer-events: none;
}
.onda__fundo { fill: var(--cinza-claro); }
.onda__fita--principal { fill: #FFFFFF; }
.onda__fita--lua       { fill: #FFFFFF; opacity: .9; }
.experiencia__fundo {
    position: fixed;              /* fica parado enquanto a página rola */
    inset: 0;
    z-index: -1;
}
.experiencia__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* véu escuro e quente sobre o vídeo */
.experiencia__fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(196, 154, 69, .18), transparent 70%),
        linear-gradient(180deg, rgba(15, 12, 10, .9), rgba(15, 12, 10, .8) 50%, rgba(15, 12, 10, .92));
}
/* fios dourados no topo e na base da faixa */
.experiencia::before,
.experiencia::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 174, 94, .55) 30%, rgba(232, 204, 138, .55) 70%, transparent);
}
.experiencia::before,
.experiencia::after { display: none; }   /* o arco substitui os fios retos */

.experiencia__topo {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
}
.experiencia__cabecalho { text-align: center; }
.experiencia__chamada {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ambar);
}
.experiencia__chamada::before,
.experiencia__chamada::after {
    content: '';
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amarelo));
}
.experiencia__chamada::after { background: linear-gradient(90deg, var(--amarelo), transparent); }
.experiencia__titulo {
    margin-top: 10px;
    font-family: var(--fonte-elegante);
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    color: #F6EFE6;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

.experiencia__seta {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: var(--branco);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.experiencia__seta svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.experiencia__seta:hover:not(:disabled) { color: var(--tinta); background: var(--amarelo); border-color: var(--amarelo); }
.experiencia__seta:disabled { opacity: .3; cursor: default; }
.sem-rolagem .experiencia__seta { visibility: hidden; }

/* Trilho do carrossel: 4 itens visíveis, desliza com as setas ou com o dedo */
.experiencia__trilho {
    --colunas: 4;
    --espaco: 40px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--colunas) - 1) * var(--espaco)) / var(--colunas));
    gap: var(--espaco);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.experiencia__trilho::-webkit-scrollbar { display: none; }
.experiencia__trilho:focus-visible { outline-offset: 8px; }

.experiencia__item {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    scroll-margin-top: 120px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* numeração elegante 01, 02, 03, 04 acima de cada ambiente */
.experiencia__trilho { counter-reset: ambiente; }
.experiencia__item { counter-increment: ambiente; }
.experiencia__item::before {
    content: counter(ambiente, decimal-leading-zero);
    margin-bottom: 4px;
    font-family: var(--fonte-elegante);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ambar);
}
.experiencia__item h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 14px;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: .005em;
    color: #F6EFE6;
}
/* traço em degradê sob o título (como no modelo) */
.experiencia__item h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, var(--amarelo), var(--laranja));
}
.experiencia__item p {
    font-size: .9rem;
    line-height: 1.62;
    color: rgba(246, 239, 230, .76);
}
.experiencia__item p + p { margin-top: 10px; }
/* três primeiros ambientes: mais respiro entre os parágrafos */
.experiencia__item:not(#area-multiuso) p + p { margin-top: 16px; }
.experiencia__item .experiencia__tipos {
    font-family: var(--fonte-elegante);
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.42;
    letter-spacing: .01em;
    color: var(--ambar);
}
.experiencia__item .experiencia__fecho {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--fonte-elegante);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.25;
    color: #F6EFE6;
}
.experiencia__mais {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 18px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--amarelo);
}
.experiencia__mais:hover .seta { transform: translateX(3px); }

@media (max-width: 1200px) {
    .experiencia__trilho { --espaco: 24px; }
    .experiencia__item { padding: 30px 24px; }
}
@media (max-width: 1000px) {
    .experiencia__trilho { --colunas: 2; }
}
@media (max-width: 620px) {
    .experiencia { padding: calc(var(--recorte) + 32px) 0 72px; }
    .experiencia__topo { grid-template-columns: 1fr auto auto; margin-bottom: 40px; }
    .experiencia__cabecalho { grid-column: 1 / -1; grid-row: 1; }
    .experiencia__seta { width: 44px; height: 44px; }
    .experiencia__seta--ant  { grid-row: 2; grid-column: 2; }
    .experiencia__seta--prox { grid-row: 2; grid-column: 3; }
    .experiencia__trilho { --colunas: 1; --espaco: 24px; grid-auto-columns: 82%; }
}

/* ==========================================================
   FAÇA CONTATO
   ========================================================== */
.contato {
    padding: 110px 0 120px;
    background: linear-gradient(180deg, var(--branco), var(--cinza-claro));
    scroll-margin-top: 60px;
}
.contato__grade {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: start;
}
.contato__chamada {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--laranja-texto);
}
.contato__chamada::before {
    content: '';
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--laranja), var(--amarelo));
}
.contato__titulo {
    font-family: var(--fonte-elegante);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.05;
    color: var(--tinta);
}
.contato__texto {
    max-width: 46ch;
    margin: 18px 0 40px;
    line-height: 1.7;
    color: var(--texto-suave);
}
.contato__texto p + p { margin-top: 14px; }

.contato__lista { display: flex; flex-direction: column; gap: 22px; }
.contato__lista li { display: flex; align-items: center; gap: 18px; }
.contato__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: #F9F2E3;
    border: 1px solid #EBDBB6;
    border-radius: 14px;
}
.contato__icone svg {
    width: 23px; height: 23px;
    fill: none; stroke: var(--laranja); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.contato__lista strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--fonte-texto);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta);
}
.contato__lista a {
    font-size: .93rem;
    text-decoration: none;
    color: var(--texto-suave);
    transition: color .2s;
}
.contato__lista a:hover { color: var(--laranja-texto); }

/* Cartão do formulário */
.contato__cartao {
    position: relative;
    padding: 44px 42px;
    background: var(--branco);
    border: 1px solid var(--linha-clara);
    border-radius: 18px;
    box-shadow: 0 30px 60px -30px rgba(40, 30, 20, .25);
}
/* detalhe dourado no topo do cartão */
.contato__cartao::before {
    content: '';
    position: absolute;
    top: -1px; left: 42px; right: 42px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--laranja), var(--amarelo));
}
.contato__form { display: flex; flex-direction: column; gap: 16px; }
.contato__isca { position: absolute; left: -9999px; }

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 15px 18px;
    font-family: var(--fonte-texto);
    font-size: .95rem;
    color: var(--tinta);
    background: #FAF8F5;
    border: 1px solid var(--linha-clara);
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo input::placeholder,
.campo textarea::placeholder { color: #9C948C; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    background: var(--branco);
    border-color: var(--ambar);
    box-shadow: 0 0 0 4px rgba(214, 174, 94, .18);
}
.campo--select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
}
.campo--select select:invalid { color: #9C948C; }

.contato__retorno {
    padding: 12px 16px;
    font-size: .9rem;
    border-radius: 10px;
}
.contato__retorno.ok   { color: #1E6B3A; background: #EAF7EE; border: 1px solid #BFE5CB; }
.contato__retorno.erro { color: #9B2C1F; background: #FDECEA; border: 1px solid #F5C6C0; }

.contato__enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    padding: 17px 24px;
    font-family: var(--fonte-texto);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--champanhe);
    background: var(--botao-ouro);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: var(--sombra-ouro);
    transition: transform .2s, box-shadow .2s, opacity .2s, background .3s, color .3s;
}
.contato__enviar svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.contato__enviar:hover:not(:disabled) { transform: translateY(-2px); color: var(--tinta); background: var(--botao-ouro-hover); box-shadow: 0 12px 24px -14px rgba(120, 92, 40, .45); }
.contato__enviar:disabled { opacity: .6; cursor: wait; }

@media (max-width: 900px) {
    .contato__grade { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 520px) {
    .contato { padding: 80px 0 90px; }
    .contato__cartao { padding: 32px 22px; }
    .contato__cartao::before { left: 22px; right: 22px; }
}

/* ==========================================================
   RODAPÉ (mesmo desenho do Araçatuba Transportes)
   ========================================================== */
.rodape {
    background: var(--branco);
    border-top: 1px solid var(--linha-clara);
}
.rodape__grade {
    display: grid;
    grid-template-columns: 1.35fr .65fr 1fr;
    gap: 64px;
    padding-top: 96px;
    padding-bottom: 80px;
}
.rodape__marca img { width: 190px; height: auto; margin-bottom: 30px; }
.rodape__marca p {
    max-width: 44ch;
    margin-bottom: 14px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--texto-suave);
}
.rodape__marca .rodape__lema {
    margin-bottom: 16px;
    font-family: var(--fonte-elegante);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    color: var(--laranja-texto);
}
.rodape__marca strong { color: var(--tinta); }

.rodape__titulo {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 28px;
    font-family: var(--fonte-titulo);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .005em;
    color: var(--tinta);
}
/* traço curto embaixo do título */
.rodape__titulo::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 56px;
    height: 1px;
    background: var(--ouro);
}

.rodape__links { display: flex; flex-direction: column; gap: 16px; }
.rodape__links a {
    font-family: var(--fonte-titulo);
    font-size: 1.22rem;
    font-weight: 500;
    text-decoration: none;
    color: #4A443E;
    transition: color .2s, padding .2s;
}
.rodape__links a:hover { color: var(--laranja-texto); padding-left: 4px; }

.rodape__contatos { display: flex; flex-direction: column; gap: 24px; }
.rodape__contatos li { display: flex; align-items: flex-start; gap: 16px; }
.rodape__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linha-clara);
    border-radius: 50%;
}
.rodape__icone svg {
    width: 18px; height: 18px;
    fill: none; stroke: var(--tinta); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.rodape__contatos small {
    display: block;
    margin: 2px 0 4px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #8C847D;
}
.rodape__contatos a {
    font-family: var(--fonte-titulo);
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: lining-nums;
    text-decoration: none;
    color: var(--tinta);
    transition: color .2s;
}
.rodape__contatos a:hover { color: var(--laranja-texto); }
.rodape__contatos li:hover .rodape__icone { border-color: var(--ambar); }
.rodape__contatos li:hover .rodape__icone svg { stroke: var(--laranja); }

/* Barra inferior */
.rodape__barra { background: #F1EFEC; }
.rodape__barra-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    min-height: 92px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: .84rem;
    color: #4A443E;
}
.rodape__barra-inner p {
    font-family: var(--fonte-elegante);
    font-size: 1.12rem;
    font-style: italic;
    letter-spacing: .01em;
}
.rodape__status {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rodape__status span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--verde-status);
    box-shadow: 0 0 0 4px rgba(31, 157, 85, .15);
}
.rodape__assinatura a {
    text-decoration: none;
    color: #4A443E;
    background-image: linear-gradient(var(--ouro), var(--ouro));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color .2s, background-size .3s;
}
.rodape__assinatura a:hover { color: var(--laranja-texto); background-size: 100% 1px; }
.rodape__idioma {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rodape__idioma svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
}

@media (max-width: 1000px) {
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .rodape__grade { grid-template-columns: 1fr; gap: 48px; padding-top: 72px; padding-bottom: 56px; }
    .rodape__barra-inner { flex-direction: column; justify-content: center; text-align: center; }
}

/* ==========================================================
   PAINEL DE ATALHOS (lado direito)
   ========================================================== */
.atalhos {
    position: fixed;
    z-index: 50;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: 92px;
    /* vidro claro (sobre fundos claros) */
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(26, 23, 20, .07);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -8px 10px 30px rgba(20, 16, 12, .12);
    overflow: hidden;
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
/* vidro escuro e bem transparente quando passa sobre os vídeos */
.atalhos--escuro {
    background: rgba(20, 16, 13, .28);
    border-color: rgba(232, 204, 138, .22);
    box-shadow: -8px 10px 30px rgba(0, 0, 0, .18);
}
.atalhos--escuro .atalho { color: rgba(255, 255, 255, .88); }
.atalhos--escuro .atalho svg { color: var(--champanhe); }
.atalhos--escuro .atalho + .atalho { border-color: rgba(255, 255, 255, .1); }
.atalhos--escuro .atalho:hover,
.atalhos--escuro .atalho:focus-visible { color: var(--branco); background: rgba(232, 204, 138, .14); }
.atalhos--escuro .atalho--destaque { color: var(--champanhe); }
.atalho {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 15px 6px 13px;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #4E4740;
    transition: background .2s, color .4s;
}
.atalho + .atalho { border-top: 1px solid rgba(26, 23, 20, .07); }
.atalho svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #4A443E;
    transition: color .4s, transform .25s;
}
.atalho:hover,
.atalho:focus-visible { color: var(--laranja-texto); background: #FBF6EC; }
.atalho:hover svg,
.atalho:focus-visible svg { color: var(--laranja); transform: translateY(-2px); }

/* item em destaque (ingressos) */
.atalho--destaque { color: var(--laranja-texto); font-weight: 600; }
.atalho--destaque svg { color: var(--laranja); }
.atalho--destaque::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ouro), var(--champanhe));
}

/* Voltar ao topo */
.voltar-topo {
    position: fixed;
    z-index: 50;
    right: 22px;
    bottom: 24px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--branco);
    background: var(--tinta);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(20, 16, 12, .25);
    transition: opacity .3s, visibility .3s, transform .3s, background .2s;
}
.voltar-topo:hover { color: var(--tinta); background: var(--champanhe); }
.voltar-topo svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.voltar-topo:not(.visivel) { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* Telas médias: painel compacto, nome aparece ao passar o mouse */
@media (max-width: 1400px) and (min-width: 761px) {
    .atalhos { width: 62px; overflow: visible; }
    .atalho { padding: 14px 6px; }
    .atalho:first-child { border-radius: 14px 0 0 0; }
    .atalho:last-child  { border-radius: 0 0 0 14px; }
    .atalho svg { width: 27px; height: 27px; }
    .atalho span {
        position: absolute;
        right: calc(100% + 10px);
        top: 50%;
        padding: 7px 12px;
        font-size: .76rem;
        white-space: nowrap;
        color: var(--branco);
        background: var(--tinta);
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transform: translate(6px, -50%);
        transition: opacity .2s, transform .2s;
    }
    .atalho span br { display: none; }
    .atalho:hover span,
    .atalho:focus-visible span { opacity: 1; transform: translate(0, -50%); }
}

/* Celular: o painel vira uma barra fixa embaixo da tela */
@media (max-width: 760px) {
    body { padding-bottom: 68px; }
    .atalhos {
        top: auto; bottom: 0; left: 0; right: 0;
        transform: none;
        flex-direction: row;
        width: auto;
        border: 0;
        border-top: 1px solid rgba(26, 23, 20, .08);
        border-radius: 16px 16px 0 0;
        background: rgba(255, 255, 255, .8);
        box-shadow: 0 -6px 24px rgba(20, 16, 12, .14);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .atalho { flex: 1; gap: 4px; padding: 9px 2px 8px; font-size: .6rem; }
    .atalho + .atalho { border-top: 0; border-left: 1px solid rgba(26, 23, 20, .07); }
    .atalhos--escuro { background: rgba(20, 16, 13, .55); border-top-color: rgba(232, 204, 138, .2); }
    .atalho svg { width: 24px; height: 24px; }
    .atalho span br { display: none; }
    .atalho--destaque::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
    .voltar-topo { right: 14px; bottom: 84px; width: 42px; height: 42px; }
    .hero__rolar { bottom: 92px; }
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 1100px) {
    .menu__lista { gap: 40px; }
    .menu__lista li + li::before { left: -23px; }
}

@media (max-width: 900px) {

    .menu { top: 16px; background: rgba(18, 14, 11, .22); }
    .menu__inner { justify-content: flex-start; min-height: 64px; }
    .menu__logo img { width: 84px; }
    .menu__botao { display: block; }

    .menu__lista {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px 24px 20px;
        background: rgba(26, 23, 20, .97);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s, transform .25s, visibility .25s;
    }
    .menu__lista.aberto { visibility: visible; opacity: 1; transform: none; }
    .menu__lista li + li::before { display: none; }
    .menu__lista a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .menu__lista a::after { left: 0; transform: none; bottom: 8px; }
    .menu__lista a:hover::after,
    .menu__lista a.ativo::after { width: 32px; }

    .hero__logo { width: clamp(220px, 62vw, 380px); }
}

@media (max-width: 1180px) {
    .grade-shows { grid-template-columns: repeat(2, 1fr); }
    .grade-destaques { gap: 72px 90px; }
    .destaque__info { padding-right: 40px; }
}

@media (max-width: 900px) {
    .grade-destaques { grid-template-columns: 1fr; gap: 96px; }
}

@media (max-width: 680px) {
    .grade-shows { grid-template-columns: 1fr; margin-top: 96px; }
}

@media (max-width: 520px) {
    .container { padding: 0 16px; }
    .eventos { padding: 72px 0 90px; }
    .menu__logo { left: 16px; }
    .menu__botao { right: 12px; }
    .grade-destaques { padding-right: 0; }
    .destaque__moldura { padding: 10px; }
    .destaque__data { right: 12px; bottom: -40px; width: 116px; padding: 8px; }
    .destaque__dia { font-size: 2.8rem; }
    .destaque__info { padding: 56px 0 0; }
    .eventos { padding: 64px 0 80px; }
}

/* Quem prefere menos movimento: sem vídeo e sem animações */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__video { display: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   TESTE: VERSÃO ESCURA DA AGENDA
   Para ligar:    <section class="eventos eventos--escuro" ...>
   Para desligar: <section class="eventos" ...>
   ========================================================== */
.eventos.eventos--escuro {
    color: #E9E2D8;
    background:
        radial-gradient(ellipse 60% 40% at 10% 0%, rgba(196, 154, 69, .14), transparent 70%),
        radial-gradient(ellipse 50% 35% at 95% 45%, rgba(232, 204, 138, .06), transparent 70%),
        #0F0C0A;
}
.eventos--escuro .eventos__cabecalho { border-bottom-color: rgba(255, 240, 220, .1); }
.eventos--escuro .eventos__chamada   { color: var(--ambar); }
.eventos--escuro .eventos__titulo    { color: #F6EFE6; }
.eventos--escuro .eventos__sub       { color: var(--amarelo); }

/* Destaques: a moldura branca continua (efeito de foto exposta numa galeria) */
.eventos--escuro .destaque__moldura { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.eventos--escuro .destaque__data    { box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .9); }
.eventos--escuro .destaque__meta    { color: var(--ambar); }
.eventos--escuro .destaque__titulo  { color: #F6EFE6; }
.eventos--escuro .destaque__titulo a:hover { color: var(--amarelo); }
.eventos--escuro .destaque__descricao { color: rgba(255, 255, 255, .62); }
.eventos--escuro .destaque__preco span   { color: rgba(255, 255, 255, .55); }
.eventos--escuro .destaque__preco strong { color: var(--branco); }

.eventos--escuro .contagem {
    color: var(--amarelo);
    background: rgba(214, 174, 94, .12);
    border-color: rgba(214, 174, 94, .35);
}

/* Caixas dos shows */
.eventos--escuro .show__caixa {
    background: #1B1612;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
    outline: 1px solid rgba(255, 240, 220, .07);
}
.eventos--escuro .show:hover .show__caixa { box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(214, 174, 94, .35); }
.eventos--escuro .show__titulo      { color: #F6EFE6; }
.eventos--escuro .show__titulo a:hover { color: var(--amarelo); }
.eventos--escuro .show__descricao   { color: rgba(255, 255, 255, .58); }
.eventos--escuro .show__mais        { color: var(--ambar); }

.eventos--escuro .show__faixa {
    background: #241D18;
    box-shadow: -10px 14px 30px -12px rgba(0, 0, 0, .8);
    outline: 1px solid rgba(255, 240, 220, .07);
}
.eventos--escuro .faixa__item              { border-bottom-color: rgba(255, 240, 220, .08); }
.eventos--escuro .faixa__item svg          { stroke: #CFC6BC; }
.eventos--escuro .faixa__item strong       { color: #F6EFE6; }
.eventos--escuro .faixa__item span         { color: rgba(255, 255, 255, .5); }
.eventos--escuro .faixa__item--data strong { color: var(--amarelo); }
.eventos--escuro .faixa__preco             { background: #0A0807; }